@@ -22,17 +22,17 @@
 "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
 },
 "devDependencies": {
-"@typescript-eslint/eslint-plugin": "^8.12.1",
-"@typescript-eslint/parser": "^8.12.1",
+"@typescript-eslint/eslint-plugin": "^8.18.1",
+"@typescript-eslint/parser": "^8.18.1",
 "eslint": "8.57.0",
 "eslint-config-prettier": "^9.1.0",
 "eslint-plugin-prettier": "^5.2.1",
 "eslint-plugin-react": "^7.37.2",
-"eslint-plugin-react-hooks": "^5.0.0",
-"eslint-plugin-unicorn": "^56.0.0",
-"lerna": "^8.1.8",
+"eslint-plugin-react-hooks": "^5.1.0",
+"eslint-plugin-unicorn": "^56.0.1",
+"lerna": "^8.1.9",
 "npm-run-all": "^4.1.5",
-"prettier": "^3.3.3"
+"prettier": "^3.4.2"
 },
 "overrides": {
 "gatsby-remark-external-links": {

@@ -46,26 +46,26 @@
 "prop-types": "^15.8.1"
 },
 "devDependencies": {
-"@rollup/plugin-commonjs": "^28.0.1",
-"@rollup/plugin-node-resolve": "^15.3.0",
-"@rollup/plugin-typescript": "^12.1.1",
-"@testing-library/jest-dom": "^6.6.2",
-"@testing-library/react": "^16.0.1",
+"@rollup/plugin-commonjs": "^28.0.2",
+"@rollup/plugin-node-resolve": "^16.0.0",
+"@rollup/plugin-typescript": "^12.1.2",
+"@testing-library/jest-dom": "^6.6.3",
+"@testing-library/react": "^16.1.0",
 "@types/jest": "^29.5.14",
-"@types/react": "18.3.12",
-"@types/react-dom": "^18.3.1",
-"@types/react-transition-group": "^4.4.11",
+"@types/react": "18.3.17",
+"@types/react-dom": "^18.3.5",
+"@types/react-transition-group": "^4.4.12",
 "classnames": "^2.5.1",
 "cross-env": "^7.0.3",
 "jest": "^29.7.0",
 "jest-environment-jsdom": "^29.7.0",
 "react": "^18.3.1",
 "react-dom": "^18.3.1",
 "react-transition-group": "^4.4.5",
-"rollup": "^4.24.2",
+"rollup": "^4.28.1",
 "ts-jest": "^29.2.5",
-"tslib": "^2.8.0",
-"typescript": "^5.6.3"
+"tslib": "^2.8.1",
+"typescript": "^5.7.2"
 },
 "peerDependencies": {
 "react": ">=17",

@@ -2,78 +2,25 @@ import React, { createContext, forwardRef, HTMLAttributes, useState } from 'reac
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { mergeClassNames } from '../../utils'
-
 export interface CAccordionProps extends HTMLAttributes<HTMLDivElement> {
 /**
-* Determines which accordion item is currently active (expanded) by default.
-* Accepts a number or string corresponding to the `itemKey` of the desired accordion item.
-*
-* @example
-* <CAccordion activeItemKey="1">...</CAccordion>
+* The active item key.
 */
 activeItemKey?: number | string
-
 /**
-* When set to `true`, multiple accordion items within the React Accordion can be open simultaneously.
-* This is ideal for scenarios where users need to view multiple sections at once without collapsing others.
-*
-* @default false
-*
-* @example
-* <CAccordion alwaysOpen>...</CAccordion>
+* Make accordion items stay open when another item is opened
 */
 alwaysOpen?: boolean
-
 /**
-* Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.
-*
-* @example
-* <CAccordion className="my-custom-accordion">...</CAccordion>
+* A string of all className you want applied to the base component.
 */
 className?: string
-
 /**
-* Allows overriding or extending the default CSS class names used in the component.
-*
-* - `ACCORDION`: Base class for the accordion component.
-* - `ACCORDION_FLUSH`: Class applied when the `flush` prop is set to true, ensuring an edge-to-edge layout.
-*
-* Use this prop to customize the styles of specific parts of the accordion.
-*
-* @example
-* const customClasses = {
-* ACCORDION: 'custom-accordion',
-* ACCORDION_FLUSH: 'custom-accordion-flush'
-* }
-* <CAccordion customClassNames={customClasses}>...</CAccordion>
-*/
-customClassNames?: Partial<typeof ACCORDION_CLASS_NAMES>
-
-/**
-* When `flush` is set to `true`, the React Accordion renders edge-to-edge with its parent container,
-* creating a seamless and modern look ideal for minimalist designs.
-*
-* @default false
-*
-* @example
-* <CAccordion flush>...</CAccordion>
+* Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
 */
 flush?: boolean
 }
 
-export const ACCORDION_CLASS_NAMES = {
-/**
-* Base class for the accordion container.
-*/
-ACCORDION: 'accordion',
-
-/**
-* Applied when the `flush` prop is enabled.
-*/
-ACCORDION_FLUSH: 'accordion-flush',
-}
-
 export interface CAccordionContextProps {
 _activeItemKey?: number | string
 alwaysOpen?: boolean
@@ -83,24 +30,12 @@ export interface CAccordionContextProps {
 export const CAccordionContext = createContext({} as CAccordionContextProps)
 
 export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
-(
-{ children, activeItemKey, alwaysOpen = false, className, customClassNames, flush, ...rest },
-ref,
-) => {
+({ children, activeItemKey, alwaysOpen = false, className, flush, ...rest }, ref) => {
 const [_activeItemKey, setActiveKey] = useState(activeItemKey)
 
-const mergedClassNames = mergeClassNames<typeof ACCORDION_CLASS_NAMES>(
-ACCORDION_CLASS_NAMES,
-customClassNames,
-)
-
 return (
 <div
-className={classNames(
-mergedClassNames.ACCORDION,
-{ [mergedClassNames.ACCORDION_FLUSH]: flush },
-className,
-)}
+className={classNames('accordion', { 'accordion-flush': flush }, className)}
 {...rest}
 ref={ref}
 >

@@ -5,60 +5,21 @@ import classNames from 'classnames'
 import { CAccordionItemContext } from './CAccordionItem'
 
 import { CCollapse } from './../collapse/CCollapse'
-import { mergeClassNames } from '../../utils'
 
 export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
 /**
-* Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.
-*
-* @example
-* <CAccordionBody className="custom-accordion-body">...</CAccordionBody>
+* A string of all className you want applied to the base component.
 */
 className?: string
-
-/**
-* Allows overriding or extending the default CSS class names used in the accordion body component.
-* Accepts a partial object matching the shape of `ACCORDION_BODY_CLASS_NAMES`, which includes:
-*
-* - `ACCORDION_COLLAPSE`: Base class for the collapse container in the accordion body.
-* - `ACCORDION_BODY`: Base class for the main content container inside the accordion body.
-*
-* Use this prop to customize the styles of specific parts of the accordion body.
-*
-* @example
-* const customClasses = {
-* ACCORDION_COLLAPSE: 'custom-collapse-class',
-* ACCORDION_BODY: 'custom-body-class',
-* }
-* <CAccordionBody customClassNames={customClasses}>...</CAccordionBody>
-*/
-customClassNames?: Partial<typeof ACCORDION_BODY_CLASS_NAMES>
-}
-
-export const ACCORDION_BODY_CLASS_NAMES = {
-/**
-* Used for managing collapsible behavior in the accordion body.
-*/
-ACCORDION_COLLAPSE: 'accordion-collapse',
-
-/**
-* Styles the main content container inside the accordion.
-*/
-ACCORDION_BODY: 'accordion-body',
 }
 
 export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
-({ children, className, customClassNames, ...rest }, ref) => {
-const { id, visible } = useContext(CAccordionItemContext)
-
-const mergedClassNames = mergeClassNames<typeof ACCORDION_BODY_CLASS_NAMES>(
-ACCORDION_BODY_CLASS_NAMES,
-customClassNames,
-)
+({ children, className, ...rest }, ref) => {
+const { visible } = useContext(CAccordionItemContext)
 
 return (
-<CCollapse id={id} className={mergedClassNames.ACCORDION_COLLAPSE} visible={visible}>
-<div className={classNames(mergedClassNames.ACCORDION_BODY, className)} {...rest} ref={ref}>
+<CCollapse className="accordion-collapse" visible={visible}>
+<div className={classNames('accordion-body', className)} {...rest} ref={ref}>
 {children}
 </div>
 </CCollapse>

@@ -4,49 +4,21 @@ import classNames from 'classnames'
 
 import { CAccordionItemContext } from './CAccordionItem'
 
-import { mergeClassNames } from '../../utils'
-
 export interface CAccordionButtonProps extends HTMLAttributes<HTMLButtonElement> {
 /**
-* Styles the clickable element in the accordion header.
+* A string of all className you want applied to the base component.
 */
 className?: string
-
-/**
-* Allows overriding or extending the default CSS class names used in the accordion button component.
-* Accepts a partial object matching the shape of `CLASS_NAMES`, which includes:
-*
-* - `ACCORDION_BUTTON`: Base class for the accordion button.
-*
-* Use this prop to customize the styles of the accordion button.
-*
-* @example
-* const customClasses = {
-* ACCORDION_BUTTON: 'custom-button-class',
-* }
-* <CAccordionButton customClassNames={customClasses}>...</CAccordionButton>
-*/
-customClassNames?: Partial<typeof CLASS_NAMES>
-}
-
-export const CLASS_NAMES = {
-ACCORDION_BUTTON: 'accordion-button',
 }
 
 export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonProps>(
-({ children, className, customClassNames, ...rest }, ref) => {
+({ children, className, ...rest }, ref) => {
 const { id, visible, setVisible } = useContext(CAccordionItemContext)
 
-const mergedClassNames = mergeClassNames<typeof CLASS_NAMES>(CLASS_NAMES, customClassNames)
-
 return (
 <button
 type="button"
-className={classNames(
-mergedClassNames.ACCORDION_BUTTON,
-{ collapsed: !visible },
-className,
-)}
+className={classNames('accordion-button', { collapsed: !visible }, className)}
 aria-controls={id}
 aria-expanded={visible}
 onClick={() => setVisible(!visible)}

@@ -3,55 +3,19 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CAccordionButton } from './CAccordionButton'
-import { mergeClassNames } from '../../utils'
 
 export interface CAccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
 /**
 * A string of all className you want applied to the base component.
 */
 className?: string
-/**
-* Allows overriding or extending the default CSS class names used in the accordion header component.
-* Accepts a partial object matching the shape of `ACCORDION_HEADER_CLASS_NAMES`, which includes:
-*
-* - `ACCORDION_HEADER`: Base class for the accordion header container.
-* - `ACCORDION_BUTTON`: Class applied to the button within the accordion header.
-*
-* Use this prop to customize the styles of specific parts of the accordion header.
-*
-* @example
-* const customClasses = {
-* ACCORDION_HEADER: 'custom-header-class',
-* ACCORDION_BUTTON: 'custom-button-class',
-* }
-* <CAccordionHeader customClassNames={customClasses}>...</CAccordionHeader>
-*/
-customClassNames?: Partial<typeof ACCORDION_HEADER_CLASS_NAMES>
-}
-
-export const ACCORDION_HEADER_CLASS_NAMES = {
-/**
-* Styles the header container of an accordion item.
-*/
-ACCORDION_HEADER: 'accordion-header',
-
-/**
-* Styles the clickable element in the accordion header.
-*/
-ACCORDION_BUTTON: 'accordion-button',
 }
 
 export const CAccordionHeader = forwardRef<HTMLDivElement, CAccordionHeaderProps>(
-({ children, className, customClassNames, ...rest }, ref) => {
-const mergedClassNames = mergeClassNames<typeof ACCORDION_HEADER_CLASS_NAMES>(
-ACCORDION_HEADER_CLASS_NAMES,
-customClassNames,
-)
+({ children, className, ...rest }, ref) => {
 return (
-<div className={classNames(mergedClassNames.ACCORDION_HEADER, className)} {...rest} ref={ref}>
-<CAccordionButton className={mergedClassNames.ACCORDION_HEADER}>
-{children}
-</CAccordionButton>
+<div className={classNames('accordion-header', className)} {...rest} ref={ref}>
+<CAccordionButton>{children}</CAccordionButton>
 </div>
 )
 },