@coreui/react-pro 5.20.0 → 5.22.0

package/dist/esm/utils/getNextSibling.js.map

@@ -1 +1 @@
-{"version":3,"file":"getNextSibling.js","sources":["../../../src/utils/getNextSibling.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAO,IAAM,cAAc,GAAG,UAAC,IAAiB,EAAE,QAAiB,EAAA;;AAEjE,IAAA,IAAI,OAAO,GAAG,IAAI,CAAC,kBAAkB;;AAGrC,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,OAAO;;;IAI7B,OAAO,OAAO,EAAE;AACd,QAAA,IAAI,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;AAAE,YAAA,OAAO,OAAO;AAC7C,QAAA,OAAO,GAAG,OAAO,CAAC,kBAAkB;IACtC;IAEA;AACF;;;;"}
+{"version":3,"file":"getNextSibling.js","sources":["../../../src/utils/getNextSibling.ts"],"sourcesContent":[null],"names":[],"mappings":"MAAa,cAAc,GAAG,CAAC,IAAiB,EAAE,QAAiB,KAAI;;AAErE,IAAA,IAAI,OAAO,GAAG,IAAI,CAAC,kBAAkB;;AAGrC,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,OAAO;;;IAI7B,OAAO,OAAO,EAAE;AACd,QAAA,IAAI,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;AAAE,YAAA,OAAO,OAAO;AAC7C,QAAA,OAAO,GAAG,OAAO,CAAC,kBAAkB;IACtC;IAEA;AACF;;;;"}

package/dist/esm/utils/getPreviousSibling.js

@@ -1,6 +1,6 @@
-var getPreviousSibling = function (elem, selector) {
+const getPreviousSibling = (elem, selector) => {
     // Get the next sibling element
-    var sibling = elem.previousElementSibling;
+    let sibling = elem.previousElementSibling;
     // If there's no selector, return the first sibling
     if (!selector)
         return sibling;

package/dist/esm/utils/getPreviousSibling.js.map

@@ -1 +1 @@
-{"version":3,"file":"getPreviousSibling.js","sources":["../../../src/utils/getPreviousSibling.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,IAAM,kBAAkB,GAAG,UAAC,IAAiB,EAAE,QAAiB,EAAA;;AAE9D,IAAA,IAAI,OAAO,GAAG,IAAI,CAAC,sBAAsB;;AAGzC,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,OAAO;;;IAI7B,OAAO,OAAO,EAAE;AACd,QAAA,IAAI,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;AAAE,YAAA,OAAO,OAAO;AAC7C,QAAA,OAAO,GAAG,OAAO,CAAC,sBAAsB;IAC1C;IAEA;AACF;;;;"}
+{"version":3,"file":"getPreviousSibling.js","sources":["../../../src/utils/getPreviousSibling.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG,CAAC,IAAiB,EAAE,QAAiB,KAAI;;AAElE,IAAA,IAAI,OAAO,GAAG,IAAI,CAAC,sBAAsB;;AAGzC,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,OAAO;;;IAI7B,OAAO,OAAO,EAAE;AACd,QAAA,IAAI,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;AAAE,YAAA,OAAO,OAAO;AAC7C,QAAA,OAAO,GAAG,OAAO,CAAC,sBAAsB;IAC1C;IAEA;AACF;;;;"}

package/dist/esm/utils/getRTLPlacement.js

@@ -1,6 +1,6 @@
 import isRTL from './isRTL.js';
 
-var getRTLPlacement = function (placement, element) {
+const getRTLPlacement = (placement, element) => {
     switch (placement) {
         case 'right': {
             return isRTL(element) ? 'left' : 'right';

package/dist/esm/utils/getRTLPlacement.js.map

@@ -1 +1 @@
-{"version":3,"file":"getRTLPlacement.js","sources":["../../../src/utils/getRTLPlacement.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA,IAAM,eAAe,GAAG,UAAC,SAAiB,EAAE,OAA8B,EAAA;IACxE,QAAQ,SAAS;QACf,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,MAAM,GAAG,OAAO;QAC1C;QACA,KAAK,MAAM,EAAE;AACX,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,MAAM;QAC1C;QACA,SAAS;AACP,YAAA,OAAO,SAAsB;QAC/B;;AAEJ;;;;"}
+{"version":3,"file":"getRTLPlacement.js","sources":["../../../src/utils/getRTLPlacement.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA,MAAM,eAAe,GAAG,CAAC,SAAiB,EAAE,OAA8B,KAAe;IACvF,QAAQ,SAAS;QACf,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,MAAM,GAAG,OAAO;QAC1C;QACA,KAAK,MAAM,EAAE;AACX,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,MAAM;QAC1C;QACA,SAAS;AACP,YAAA,OAAO,SAAsB;QAC/B;;AAEJ;;;;"}

package/dist/esm/utils/getTransitionDurationFromElement.js

@@ -1,11 +1,11 @@
-var getTransitionDurationFromElement = function (element) {
+const getTransitionDurationFromElement = (element) => {
     if (!element) {
         return 0;
     }
     // Get transition-duration of the element
-    var _a = window.getComputedStyle(element), transitionDuration = _a.transitionDuration, transitionDelay = _a.transitionDelay;
-    var floatTransitionDuration = Number.parseFloat(transitionDuration);
-    var floatTransitionDelay = Number.parseFloat(transitionDelay);
+    let { transitionDuration, transitionDelay } = window.getComputedStyle(element);
+    const floatTransitionDuration = Number.parseFloat(transitionDuration);
+    const floatTransitionDelay = Number.parseFloat(transitionDelay);
     // Return 0 if element or transition duration is not found
     if (!floatTransitionDuration && !floatTransitionDelay) {
         return 0;

package/dist/esm/utils/getTransitionDurationFromElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"getTransitionDurationFromElement.js","sources":["../../../src/utils/getTransitionDurationFromElement.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,IAAM,gCAAgC,GAAG,UAAC,OAAoB,EAAA;IAC5D,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,OAAO,CAAC;IACV;;AAGI,IAAA,IAAA,EAAA,GAA0C,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAxE,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAAE,eAAe,qBAAqC;IAE9E,IAAM,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC;IACrE,IAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC;;AAG/D,IAAA,IAAI,CAAC,uBAAuB,IAAI,CAAC,oBAAoB,EAAE;AACrD,QAAA,OAAO,CAAC;IACV;;IAGA,kBAAkB,GAAG,kBAAkB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACrD,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAE/C,IAAA,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,IAAI,IAAI;AAC5F;;;;"}
+{"version":3,"file":"getTransitionDurationFromElement.js","sources":["../../../src/utils/getTransitionDurationFromElement.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,gCAAgC,GAAG,CAAC,OAAoB,KAAI;IAChE,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,OAAO,CAAC;IACV;;AAGA,IAAA,IAAI,EAAE,kBAAkB,EAAE,eAAe,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;IAE9E,MAAM,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC;IACrE,MAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC;;AAG/D,IAAA,IAAI,CAAC,uBAAuB,IAAI,CAAC,oBAAoB,EAAE;AACrD,QAAA,OAAO,CAAC;IACV;;IAGA,kBAAkB,GAAG,kBAAkB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACrD,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAE/C,IAAA,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,IAAI,IAAI;AAC5F;;;;"}

package/dist/esm/utils/isInViewport.js

@@ -1,5 +1,5 @@
-var isInViewport = function (element) {
-    var rect = element.getBoundingClientRect();
+const isInViewport = (element) => {
+    const rect = element.getBoundingClientRect();
     return (Math.floor(rect.top) >= 0 &&
         Math.floor(rect.left) >= 0 &&
         Math.floor(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) &&

package/dist/esm/utils/isInViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"isInViewport.js","sources":["../../../src/utils/isInViewport.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,IAAM,YAAY,GAAG,UAAC,OAAoB,EAAA;AACxC,IAAA,IAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE;IAC5C,QACE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AAC1B,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;QACxF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;AAEzF;;;;"}
+{"version":3,"file":"isInViewport.js","sources":["../../../src/utils/isInViewport.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,OAAoB,KAAI;AAC5C,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE;IAC5C,QACE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AAC1B,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;QACxF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;AAEzF;;;;"}

package/dist/esm/utils/isObjectInArray.js

@@ -1,16 +1,13 @@
-var isObjectInArray = function (array, item, ignore) {
-    if (ignore === void 0) { ignore = []; }
-    return array.some(function (_item) {
-        var result = true;
-        for (var key in _item) {
-            if (!ignore.includes(key) && item[key] !== _item[key]) {
-                result = false;
-                break;
-            }
+const isObjectInArray = (array, item, ignore = []) => array.some((_item) => {
+    let result = true;
+    for (const key in _item) {
+        if (!ignore.includes(key) && item[key] !== _item[key]) {
+            result = false;
+            break;
         }
-        return result;
-    });
-};
+    }
+    return result;
+});
 
 export { isObjectInArray as default };
 //# sourceMappingURL=isObjectInArray.js.map

package/dist/esm/utils/isObjectInArray.js.map

@@ -1 +1 @@
-{"version":3,"file":"isObjectInArray.js","sources":["../../../src/utils/isObjectInArray.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,IAAM,eAAe,GAAG,UAAI,KAAU,EAAE,IAAO,EAAE,MAAqB,EAAA;AAArB,IAAA,IAAA,MAAA,KAAA,MAAA,EAAA,EAAA,MAAA,GAAA,EAAqB,CAAA,CAAA;AACpE,IAAA,OAAA,KAAK,CAAC,IAAI,CAAC,UAAC,KAAQ,EAAA;QAClB,IAAI,MAAM,GAAG,IAAI;AACjB,QAAA,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;AACvB,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,EAAE;gBACrD,MAAM,GAAG,KAAK;gBACd;YACF;QACF;AAEA,QAAA,OAAO,MAAM;AACf,IAAA,CAAC,CAAC;AAVF;;;;"}
+{"version":3,"file":"isObjectInArray.js","sources":["../../../src/utils/isObjectInArray.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,eAAe,GAAG,CAAI,KAAU,EAAE,IAAO,EAAE,MAAA,GAAmB,EAAE,KACpE,KAAK,CAAC,IAAI,CAAC,CAAC,KAAQ,KAAI;IACtB,IAAI,MAAM,GAAG,IAAI;AACjB,IAAA,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,EAAE;YACrD,MAAM,GAAG,KAAK;YACd;QACF;IACF;AAEA,IAAA,OAAO,MAAM;AACf,CAAC;;;;"}

package/dist/esm/utils/isRTL.js

@@ -1,4 +1,4 @@
-var isRTL = function (element) {
+const isRTL = (element) => {
     if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
         return true;
     }

package/dist/esm/utils/isRTL.js.map

@@ -1 +1 @@
-{"version":3,"file":"isRTL.js","sources":["../../../src/utils/isRTL.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,IAAM,KAAK,GAAG,UAAC,OAA6C,EAAA;AAC1D,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,GAAG,KAAK,KAAK,EAAE;AAC7E,QAAA,OAAO,IAAI;IACb;IAEA,IAAI,OAAO,EAAE;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI;IAChD;AAEA,IAAA,OAAO,KAAK;AACd;;;;"}
+{"version":3,"file":"isRTL.js","sources":["../../../src/utils/isRTL.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,CAAC,OAA6C,KAAI;AAC9D,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,GAAG,KAAK,KAAK,EAAE;AAC7E,QAAA,OAAO,IAAI;IACb;IAEA,IAAI,OAAO,EAAE;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI;IAChD;AAEA,IAAA,OAAO,KAAK;AACd;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "5.20.0",
+  "version": "5.22.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -41,7 +41,7 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui-pro": "^5.18.0",
+    "@coreui/coreui-pro": "^5.20.0",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },
@@ -50,12 +50,12 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
     "@types/prop-types": "15.7.15",
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
     "@types/react-transition-group": "^4.4.12",
     "classnames": "^2.5.1",
     "cross-env": "^10.0.0",
@@ -65,8 +65,8 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.46.2",
-    "ts-jest": "^29.4.1",
+    "rollup": "^4.50.2",
+    "ts-jest": "^29.4.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.2"
   },

package/src/components/accordion/CAccordion.tsx

@@ -38,7 +38,7 @@ export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
         </CAccordionContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CAccordion.propTypes = {

package/src/components/accordion/CAccordionHeader.tsx

@@ -18,7 +18,7 @@ export const CAccordionHeader = forwardRef<HTMLDivElement, CAccordionHeaderProps
         <CAccordionButton>{children}</CAccordionButton>
       </div>
     )
-  },
+  }
 )
 
 CAccordionHeader.propTypes = {

package/src/components/alert/CAlert.tsx

@@ -50,7 +50,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
       onClose,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const alertRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, alertRef)
@@ -78,7 +78,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
                 'alert-dismissible fade': dismissible,
                 show: state === 'entered',
               },
-              className,
+              className
             )}
             role="alert"
             {...rest}
@@ -90,7 +90,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
         )}
       </Transition>
     )
-  },
+  }
 )
 
 CAlert.propTypes = {

package/src/components/alert/CAlertHeading.tsx

@@ -23,7 +23,7 @@ export const CAlertHeading: PolymorphicRefForwardingComponent<'h4', CAlertHeadin
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CAlertHeading.propTypes = {

package/src/components/alert/CAlertLink.tsx

@@ -18,7 +18,7 @@ export const CAlertLink = forwardRef<HTMLAnchorElement, CAlertLinkProps>(
         {children}
       </CLink>
     )
-  },
+  }
 )
 
 CAlertLink.propTypes = {

package/src/components/alert/__tests__/CAlertHeading.spec.tsx

@@ -12,7 +12,7 @@ test('CAlertHeading customize', async () => {
   const { container } = render(
     <CAlertHeading as="h3" className="bazinga">
       Test
-    </CAlertHeading>,
+    </CAlertHeading>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/alert/__tests__/CAlertLink.spec.tsx

@@ -12,7 +12,7 @@ test('CAlertLink customize', async () => {
   const { container } = render(
     <CAlertLink className="bazinga" href="/bazinga">
       Test
-    </CAlertLink>,
+    </CAlertLink>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/avatar/CAvatar.tsx

@@ -58,7 +58,7 @@ export const CAvatar = forwardRef<HTMLDivElement, CAvatarProps>(
             [`text-${textColor}`]: textColor,
           },
           shape,
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -67,7 +67,7 @@ export const CAvatar = forwardRef<HTMLDivElement, CAvatarProps>(
         {status && <span className={statusClassName}></span>}
       </div>
     )
-  },
+  }
 )
 
 CAvatar.propTypes = {

package/src/components/avatar/__tests__/CAvatar.spec.tsx

@@ -20,7 +20,7 @@ test('CAvatar customize', async () => {
       textColor="white"
     >
       Test
-    </CAvatar>,
+    </CAvatar>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -45,7 +45,7 @@ test('CAvatar customize image', async () => {
       src="/bazinga"
     >
       Test
-    </CAvatar>,
+    </CAvatar>
   )
   expect(container).toMatchSnapshot()
 

package/src/components/backdrop/CBackdrop.tsx

@@ -34,7 +34,7 @@ export const CBackdrop = forwardRef<HTMLDivElement, CBackdropProps>(
         )}
       </Transition>
     )
-  },
+  }
 )
 
 CBackdrop.propTypes = {

package/src/components/backdrop/__tests__/CBackdrop.spec.tsx

@@ -22,7 +22,7 @@ test('CBackdrop customize 2', async () => {
   const { container } = render(
     <CBackdrop className="bazinga" visible={true}>
       Test
-    </CBackdrop>,
+    </CBackdrop>
   )
   jest.runAllTimers()
   expect(container).toMatchSnapshot()

package/src/components/badge/CBadge.tsx

@@ -66,7 +66,7 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo
       textColor,
       ...rest
     },
-    ref,
+    ref
   ) => {
     return (
       <Component
@@ -84,7 +84,7 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo
             [`text-bg-${textBgColor}`]: textBgColor,
           },
           shape,
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -92,7 +92,7 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo
         {children}
       </Component>
     )
-  },
+  }
 )
 
 CBadge.propTypes = {

package/src/components/badge/__tests__/CBadge.spec.tsx

@@ -12,7 +12,7 @@ test('CBadge customize', async () => {
   const { container } = render(
     <CBadge className="bazinga" color="warning" as="div" shape="rounded" textColor="white">
       Test
-    </CBadge>,
+    </CBadge>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/breadcrumb/CBreadcrumb.tsx

@@ -18,7 +18,7 @@ export const CBreadcrumb = forwardRef<HTMLOListElement, CBreadcrumbProps>(
         </ol>
       </nav>
     )
-  },
+  }
 )
 
 CBreadcrumb.propTypes = {

package/src/components/breadcrumb/CBreadcrumbItem.tsx

@@ -37,7 +37,7 @@ export const CBreadcrumbItem: PolymorphicRefForwardingComponent<'li', CBreadcrum
             {
               active: active,
             },
-            className,
+            className
           )}
           {...(active && { 'aria-current': 'page' })}
           {...rest}
@@ -52,7 +52,7 @@ export const CBreadcrumbItem: PolymorphicRefForwardingComponent<'li', CBreadcrum
           )}
         </li>
       )
-    },
+    }
   )
 
 CBreadcrumbItem.propTypes = {

package/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx

@@ -14,7 +14,7 @@ test('CBreadcrumb customize', async () => {
       <CBreadcrumbItem>Test A</CBreadcrumbItem>
       <CBreadcrumbItem active={false}>Test B</CBreadcrumbItem>
       <CBreadcrumbItem active={true}>Test C</CBreadcrumbItem>
-    </CBreadcrumb>,
+    </CBreadcrumb>
   )
   const ol = container.querySelector('ol')
   expect(container).toMatchSnapshot()

package/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx

@@ -12,7 +12,7 @@ test('CBreadcrumbItem customize', async () => {
   const { container } = render(
     <CBreadcrumbItem active={true} className="bazinga">
       Test
-    </CBreadcrumbItem>,
+    </CBreadcrumbItem>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/button/__tests__/CButton.spec.tsx

@@ -12,7 +12,7 @@ test('CButton customize witch href', async () => {
   const { container } = render(
     <CButton color="primary" as="span" href="/bazinga">
       Test
-    </CButton>,
+    </CButton>
   )
   expect(container).toMatchSnapshot()
 })
@@ -32,7 +32,7 @@ test('CButton customize', async () => {
       variant="ghost"
     >
       Test
-    </CButton>,
+    </CButton>
   )
   expect(container).toMatchSnapshot()
 

package/src/components/button-group/CButtonGroup.tsx

@@ -24,7 +24,7 @@ export const CButtonGroup = forwardRef<HTMLDivElement, CButtonGroupProps>(
         className={classNames(
           vertical ? 'btn-group-vertical' : 'btn-group',
           { [`btn-group-${size}`]: size },
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -32,7 +32,7 @@ export const CButtonGroup = forwardRef<HTMLDivElement, CButtonGroupProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CButtonGroup.propTypes = {

package/src/components/button-group/CButtonToolbar.tsx

@@ -16,7 +16,7 @@ export const CButtonToolbar = forwardRef<HTMLDivElement, CButtonToolbarProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CButtonToolbar.propTypes = {

package/src/components/button-group/__tests__/CButtonGroup.spec.tsx

@@ -15,7 +15,7 @@ test('CButtonGroup customize', async () => {
       <CButton color="primary">Test A</CButton>
       <CButton color="primary">Test B</CButton>
       <CButton color="primary">Test C</CButton>
-    </CButtonGroup>,
+    </CButtonGroup>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -29,7 +29,7 @@ test('CButtonGroup customize vertical', async () => {
       <CButton color="primary">Test A</CButton>
       <CButton color="primary">Test B</CButton>
       <CButton color="primary">Test C</CButton>
-    </CButtonGroup>,
+    </CButtonGroup>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/button-group/__tests__/CButtonToolbar.spec.tsx

@@ -22,7 +22,7 @@ test('CButtonToolbar customize', async () => {
         <CButton color="primary">B</CButton>
         <CButton color="primary">C</CButton>
       </CButtonGroup>
-    </CButtonToolbar>,
+    </CButtonToolbar>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/calendar/CCalendarNavigation.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef, ReactNode } from 'react'
-import { CButton } from '../button/CButton'
 import type { ViewTypes } from './types'
 
 export interface CCalendarNavigationProps {
@@ -47,25 +46,25 @@ export const CCalendarNavigation = forwardRef<HTMLDivElement, CCalendarNavigatio
       <div className="calendar-nav" ref={ref}>
         {navigation && (
           <div className="calendar-nav-prev">
-            <CButton
-              color="transparent"
-              size="sm"
+            <button
+              type="button"
+              className="calendar-nav-btn"
               aria-label={ariaNavPrevYearLabel}
               onClick={() => onNavigationClick('prev', true)}
             >
               {navPrevDoubleIcon ?? (
                 <span className="calendar-nav-icon calendar-nav-icon-double-prev" />
               )}
-            </CButton>
+            </button>
             {view === 'days' && (
-              <CButton
-                color="transparent"
-                size="sm"
+              <button
+                type="button"
+                className="calendar-nav-btn"
                 aria-label={ariaNavPrevMonthLabel}
                 onClick={() => onNavigationClick('prev')}
               >
                 {navPrevIcon ?? <span className="calendar-nav-icon calendar-nav-icon-prev" />}
-              </CButton>
+              </button>
             )}
           </div>
         )}
@@ -75,41 +74,45 @@ export const CCalendarNavigation = forwardRef<HTMLDivElement, CCalendarNavigatio
           {...(navYearFirst && { style: { display: 'flex', justifyContent: 'center' } })}
         >
           {view === 'days' && (
-            <CButton color="transparent" size="sm" onClick={() => navigation && onMonthClick()}>
+            <button
+              type="button"
+              className="calendar-nav-btn"
+              onClick={() => navigation && onMonthClick()}
+            >
               {calendarDate && calendarDate.toLocaleDateString(locale, { month: 'long' })}
-            </CButton>
+            </button>
           )}
-          <CButton
-            color="transparent"
-            size="sm"
+          <button
+            type="button"
+            className="calendar-nav-btn"
             onClick={() => navigation && onYearClick()}
             {...(navYearFirst && { style: { order: '-1' } })}
           >
             {calendarDate && calendarDate.toLocaleDateString(locale, { year: 'numeric' })}
-          </CButton>
+          </button>
         </div>
         {navigation && (
           <div className="calendar-nav-next">
             {view === 'days' && (
-              <CButton
-                color="transparent"
-                size="sm"
+              <button
+                type="button"
+                className="calendar-nav-btn"
                 aria-label={ariaNavNextMonthLabel}
                 onClick={() => onNavigationClick('next')}
               >
                 {navNextIcon ?? <span className="calendar-nav-icon calendar-nav-icon-next" />}
-              </CButton>
+              </button>
             )}
-            <CButton
-              color="transparent"
-              size="sm"
+            <button
+              type="button"
+              className="calendar-nav-btn"
               aria-label={ariaNavNextYearLabel}
               onClick={() => onNavigationClick('next', true)}
             >
               {navNextDoubleIcon ?? (
                 <span className="calendar-nav-icon calendar-nav-icon-double-next" />
               )}
-            </CButton>
+            </button>
           </div>
         )}
       </div>

package/src/components/calendar/CCalendarPanel.tsx

@@ -123,21 +123,23 @@ export const CCalendarPanel = forwardRef<HTMLTableElement, CCalendarPanelProps>(
               const { date } = days[0]
               const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
               const isSelected = isDateSelected(date, startDate, endDate)
-              const current = days.some((day) => day.month === 'current')
               return (
                 <tr
-                  className={classNames('calendar-row', {
-                    disabled: isDisabled,
-                    range: selectionType === 'week' && isDateInRange(date, startDate, endDate),
-                    'range-hover':
-                      selectionType === 'week' && hoverDate && selectEndDate
-                        ? isDateInRange(date, startDate, hoverDate)
-                        : isDateInRange(date, hoverDate, endDate),
-                    selected: isSelected,
-                  })}
+                  className={classNames(
+                    'calendar-row',
+                    selectionType === 'week' && {
+                      disabled: isDisabled,
+                      range: selectionType === 'week' && isDateInRange(date, startDate, endDate),
+                      'range-hover':
+                        selectionType === 'week' && hoverDate && selectEndDate
+                          ? isDateInRange(date, startDate, hoverDate)
+                          : isDateInRange(date, hoverDate, endDate),
+                      selected: isSelected,
+                    }
+                  )}
                   key={index}
-                  tabIndex={selectionType === 'week' && current && !isDisabled ? 0 : -1}
-                  {...(isSelected && { 'aria-selected': true })}
+                  // tabIndex={selectionType === 'week' && !isDisabled ? 0 : -1}
+                  {...(selectionType === 'week' && isSelected && { 'aria-selected': true })}
                   {...(selectionType === 'week' &&
                     !isDisabled && {
                       onBlur: () => onCalendarMouseLeave(),