From bba1c231ca33f816863d2dc25b9ba252975632b6 Mon Sep 17 00:00:00 2001
From: Szymon Tondowski <szymon.tondowski@synergycodes.com>
Date: Wed, 6 Aug 2025 17:00:53 +0200
Subject: [PATCH] RFL-122 Additional classNames for Axiom components

---
 about/images/CONTRIBUTING.md                  |   2 +-
 packages/ui/src/components/avatar/avatar.tsx  |  15 +-
 .../ui/src/components/checkbox/checkbox.tsx   |   7 +-
 .../collapsible/collapsible.module.css        |   2 +-
 .../components/collapsible/collapsible.tsx    |   2 +-
 .../components/date-picker/date-picker.tsx    |   7 +
 packages/ui/src/components/input/input.tsx    |  16 +-
 packages/ui/src/components/input/types.ts     |   8 +
 packages/ui/src/components/menu/menu-item.tsx |  12 +-
 packages/ui/src/components/menu/menu.tsx      |  17 +-
 packages/ui/src/components/menu/types.ts      |   1 +
 .../ui/src/components/modal/modal.module.css  |   4 +-
 packages/ui/src/components/modal/modal.tsx    |  19 +-
 .../node-description/node-description.tsx     |  27 ++-
 .../components/radio-button/radio.module.css  |   2 +-
 .../ui/src/components/radio-button/radio.tsx  |   5 +-
 .../select/select-option/select-option.tsx    |   7 +-
 .../select/select-value/select-value.tsx      |  12 +-
 packages/ui/src/components/select/select.tsx  |  20 +-
 packages/ui/src/components/select/types.ts    |   1 +
 .../ui/src/components/separator/separator.tsx |  12 +-
 .../ui/src/components/snackbar/snackbar.tsx   |   7 +-
 packages/website/generated/props.json         | 177 +++++++++++++++++-
 23 files changed, 345 insertions(+), 37 deletions(-)

diff --git a/about/images/CONTRIBUTING.md b/about/images/CONTRIBUTING.md
index 6a118fd7..568b303e 100644
--- a/about/images/CONTRIBUTING.md
+++ b/about/images/CONTRIBUTING.md
@@ -4,4 +4,4 @@
 2. Install dependencies: `pnpm install`
 3. Build the Axiom library: `pnpm ui dev`
 4. Start the Docusaurus documentation site: `pnpm website dev`
-5. Open `http://localhost:3000/axiom/`
+5. Open `http://localhost:3000/ui-components/authored/overview`
diff --git a/packages/ui/src/components/avatar/avatar.tsx b/packages/ui/src/components/avatar/avatar.tsx
index 091b25ed..2496f8f9 100644
--- a/packages/ui/src/components/avatar/avatar.tsx
+++ b/packages/ui/src/components/avatar/avatar.tsx
@@ -14,6 +14,10 @@ type Props = {
    * Size of the circle container
    */
   size?: Size;
+  /**
+   * Optional class name for the container element
+   */
+  classNameContainer?: string;
 };
 
 type Size = 'extra-large' | 'large' | 'medium' | 'small';
@@ -21,9 +25,16 @@ type Size = 'extra-large' | 'large' | 'medium' | 'small';
 /**
  * Component for displaying user avatars with various sizes
  */
-export function Avatar({ imageUrl, username, size = 'extra-large' }: Props) {
+export function Avatar({
+  imageUrl,
+  username,
+  size = 'extra-large',
+  classNameContainer,
+}: Props) {
   return (
-    <div className={clsx(styles['container'], styles[size])}>
+    <div
+      className={clsx(styles['container'], styles[size], classNameContainer)}
+    >
       <img src={imageUrl} alt={username} />
     </div>
   );
diff --git a/packages/ui/src/components/checkbox/checkbox.tsx b/packages/ui/src/components/checkbox/checkbox.tsx
index 86df9286..9833bd4a 100644
--- a/packages/ui/src/components/checkbox/checkbox.tsx
+++ b/packages/ui/src/components/checkbox/checkbox.tsx
@@ -18,6 +18,10 @@ type Props = {
    * Whether the checkbox is checked
    */
   checked?: boolean;
+  /**
+   * Optional class name for the container element
+   */
+  classNameContainer?: string;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
 /**
@@ -29,6 +33,7 @@ export function Checkbox({
   indeterminate,
   checked,
   onChange,
+  classNameContainer,
   ...props
 }: Props) {
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -36,7 +41,7 @@ export function Checkbox({
   }
 
   return (
-    <label className={styles['container']}>
+    <label className={clsx(styles['container'], classNameContainer)}>
       <input
         type="checkbox"
         className={clsx(styles['checkbox'], styles[size], className)}
diff --git a/packages/ui/src/components/collapsible/collapsible.module.css b/packages/ui/src/components/collapsible/collapsible.module.css
index 46fb5373..5174a1a5 100644
--- a/packages/ui/src/components/collapsible/collapsible.module.css
+++ b/packages/ui/src/components/collapsible/collapsible.module.css
@@ -16,7 +16,7 @@
   }
 }
 
-.content-wrapper {
+.content-container {
   display: grid;
   grid-template-rows: 0fr;
   overflow: hidden;
diff --git a/packages/ui/src/components/collapsible/collapsible.tsx b/packages/ui/src/components/collapsible/collapsible.tsx
index d8f233c8..38737c84 100644
--- a/packages/ui/src/components/collapsible/collapsible.tsx
+++ b/packages/ui/src/components/collapsible/collapsible.tsx
@@ -94,7 +94,7 @@ Collapsible.Content = function CollapsibleContent({
   return (
     <div
       ref={ref}
-      className={clsx(styles['content-wrapper'], {
+      className={clsx(styles['content-container'], {
         [styles['expanded']]: context?.isExpanded,
       })}
     >
diff --git a/packages/ui/src/components/date-picker/date-picker.tsx b/packages/ui/src/components/date-picker/date-picker.tsx
index 1cfd1a9a..dadd4487 100644
--- a/packages/ui/src/components/date-picker/date-picker.tsx
+++ b/packages/ui/src/components/date-picker/date-picker.tsx
@@ -12,6 +12,7 @@ import {
 import { forwardRef } from 'react';
 import type { DatePickerProps } from './types';
 import { MantineProvider } from '@mantine/core';
+
 type Props = DatePickerProps & {
   /**
    * Format string to control how the selected date is displayed
@@ -42,6 +43,10 @@ type Props = DatePickerProps & {
    * Whether the date picker has an error
    */
   error?: boolean;
+  /**
+   * Custom class name for the date picker component
+   */
+  className?: string;
 };
 
 /**
@@ -56,6 +61,7 @@ export const DatePicker = forwardRef<HTMLButtonElement, Props>(
       type = 'default',
       value,
       error = false,
+      className,
       ...props
     },
     ref,
@@ -74,6 +80,7 @@ export const DatePicker = forwardRef<HTMLButtonElement, Props>(
               inputFontStyles[inputSize],
               inputSizeStyles[inputSize],
               styles['container'],
+              className,
               {
                 [styles['container--error']]: error,
               },
diff --git a/packages/ui/src/components/input/input.tsx b/packages/ui/src/components/input/input.tsx
index ae8b59c7..5b134a89 100644
--- a/packages/ui/src/components/input/input.tsx
+++ b/packages/ui/src/components/input/input.tsx
@@ -12,6 +12,8 @@ export function Input({
   size = 'medium',
   startAdornment = undefined,
   endAdornment = undefined,
+  className,
+  classNameContainer,
   ...props
 }: InputProps) {
   return (
@@ -19,9 +21,19 @@ export function Input({
       {...props}
       slotProps={{
         root: {
-          className: clsx(inputRootStyles['input-root'], inputSizeStyles[size]),
+          className: clsx(
+            inputRootStyles['input-root'],
+            inputSizeStyles[size],
+            classNameContainer,
+          ),
+        },
+        input: {
+          className: clsx(
+            inputStyles['input'],
+            inputFontStyles[size],
+            className,
+          ),
         },
-        input: { className: clsx(inputStyles['input'], inputFontStyles[size]) },
       }}
       startAdornment={startAdornment}
       endAdornment={endAdornment}
diff --git a/packages/ui/src/components/input/types.ts b/packages/ui/src/components/input/types.ts
index 2462f856..537b1951 100644
--- a/packages/ui/src/components/input/types.ts
+++ b/packages/ui/src/components/input/types.ts
@@ -18,4 +18,12 @@ export type InputProps = InputBaseProps & {
    * Element displayed at the start of the input field.
    */
   startAdornment?: ReactNode;
+  /**
+   * Custom class name for the input element
+   */
+  className?: string;
+  /**
+   * Optional class name for the container element
+   */
+  classNameContainer?: string;
 };
diff --git a/packages/ui/src/components/menu/menu-item.tsx b/packages/ui/src/components/menu/menu-item.tsx
index 42e2a847..de09c761 100644
--- a/packages/ui/src/components/menu/menu-item.tsx
+++ b/packages/ui/src/components/menu/menu-item.tsx
@@ -10,14 +10,20 @@ export function MenuItem({
   disabled,
   destructive,
   size = 'medium',
+  className,
   onClick,
 }: MenuItemProps) {
   return (
     <MenuItemBase
       disabled={disabled}
-      className={clsx(listItemStyles['list-item'], listItemSize[size], {
-        [listItemStyles['destructive']]: destructive,
-      })}
+      className={clsx(
+        listItemStyles['list-item'],
+        listItemSize[size],
+        {
+          [listItemStyles['destructive']]: destructive,
+        },
+        className,
+      )}
       onClick={onClick}
     >
       {icon}
diff --git a/packages/ui/src/components/menu/menu.tsx b/packages/ui/src/components/menu/menu.tsx
index 97fce266..2afb4aaa 100644
--- a/packages/ui/src/components/menu/menu.tsx
+++ b/packages/ui/src/components/menu/menu.tsx
@@ -57,11 +57,22 @@ type MenuProps = MenuBaseProps & {
    * Distance between a popup and the trigger element
    */
   offset?: OffsetOptions;
+
   /**
    * The trigger element that will open the menu when clicked.
    * This element will be wrapped in a button with appropriate ARIA attributes.
    */
   children?: ReactElement;
+
+  /**
+   * Optional class name for the container element
+   */
+  classNameContainer?: string;
+
+  /**
+   * Optional class name for the separator inside
+   */
+  classNameSeparator?: string;
 };
 
 export const Menu = memo(
@@ -74,6 +85,8 @@ export const Menu = memo(
     open,
     offset,
     onOpenChange,
+    classNameContainer,
+    classNameSeparator,
     ...props
   }: MenuProps) => {
     const MenuTriggerButton = useMemo(() => {
@@ -95,7 +108,7 @@ export const Menu = memo(
             },
             root: {
               placement: placement,
-              className: clsx(listBoxStyles['popup']),
+              className: clsx(listBoxStyles['popup'], classNameContainer),
               offset,
             },
             ...slotProps,
@@ -104,7 +117,7 @@ export const Menu = memo(
         >
           {items.map((item, index) =>
             item.type === 'separator' ? (
-              <Separator key={index} />
+              <Separator key={index} className={classNameSeparator} />
             ) : (
               <MenuItem key={item.label} {...item} size={size} />
             ),
diff --git a/packages/ui/src/components/menu/types.ts b/packages/ui/src/components/menu/types.ts
index 41a74729..5a370443 100644
--- a/packages/ui/src/components/menu/types.ts
+++ b/packages/ui/src/components/menu/types.ts
@@ -5,4 +5,5 @@ export type MenuItemProps = ListItem & {
   destructive?: boolean;
   onClick?: () => void;
   size?: ItemSize;
+  className?: string;
 };
diff --git a/packages/ui/src/components/modal/modal.module.css b/packages/ui/src/components/modal/modal.module.css
index 6c313ebe..0c85b5ac 100644
--- a/packages/ui/src/components/modal/modal.module.css
+++ b/packages/ui/src/components/modal/modal.module.css
@@ -115,7 +115,7 @@
     background: var(--ax-public-modal-header-background);
   }
 
-  .title-wrapper {
+  .title-container {
     display: flex;
     align-items: center;
     gap: var(--ax-token-spacing-modal-m-header-gap);
@@ -181,7 +181,7 @@
     .header {
       padding: var(--ax-public-modal-large-padding);
 
-      .title-wrapper {
+      .title-container {
         gap: var(--ax-public-modal-gap-large);
       }
     }
diff --git a/packages/ui/src/components/modal/modal.tsx b/packages/ui/src/components/modal/modal.tsx
index e1d679b7..318c4106 100644
--- a/packages/ui/src/components/modal/modal.tsx
+++ b/packages/ui/src/components/modal/modal.tsx
@@ -41,6 +41,14 @@ type ModalProps = Partial<WithIcon> & {
    * Callback function called when the modal is closed
    */
   onClose?: () => void;
+  /**
+   * Custom class name for the input element
+   */
+  className?: string;
+  /**
+   * Optional class name for the container element
+   */
+  classNameContainer?: string;
 };
 
 /**
@@ -58,12 +66,14 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
       footerVariant = 'integrated',
       open,
       onClose,
+      className,
+      classNameContainer,
     },
     ref,
   ) => {
     return (
       <BaseModal
-        className={styles['modal-base']}
+        className={clsx(styles['modal-base'], classNameContainer)}
         open={open}
         onClose={onClose}
         slots={{
@@ -71,9 +81,12 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
         }}
       >
         <Fade in={open}>
-          <div className={clsx(styles['modal'], styles[size])} ref={ref}>
+          <div
+            className={clsx(styles['modal'], styles[size], className)}
+            ref={ref}
+          >
             <div className={styles['header']}>
-              <div className={styles['title-wrapper']}>
+              <div className={styles['title-container']}>
                 {icon && <div className={styles['icon']}>{icon}</div>}
                 <div className={styles['title-container']}>
                   <span className={clsx(styles['title'], 'ax-public-h6')}>
diff --git a/packages/ui/src/components/node/node-description/node-description.tsx b/packages/ui/src/components/node/node-description/node-description.tsx
index 8b053b30..4dd22752 100644
--- a/packages/ui/src/components/node/node-description/node-description.tsx
+++ b/packages/ui/src/components/node/node-description/node-description.tsx
@@ -2,16 +2,37 @@ import clsx from 'clsx';
 import styles from './node-description.module.css';
 
 type Props = {
+  // The main label or title text to be displayed
   label: string;
+
+  // Optional description or subtitle text
   description?: string;
+
+  // Optional custom class name for the outer container
   className?: string;
+
+  // Optional custom class name for the label element
+  classNameLabel?: string;
+
+  // Optional custom class name for the subtitle/description element
+  classNameSubtitle?: string;
 };
 
-export function NodeDescription({ label, description, className }: Props) {
+export function NodeDescription({
+  label,
+  description,
+  className,
+  classNameLabel,
+  classNameSubtitle,
+}: Props) {
   return (
     <div className={clsx(styles['container'], className)}>
-      <span className={clsx('ax-public-h9', styles['title'])}>{label}</span>
-      <span className={clsx('ax-public-p11', styles['subtitle'])}>
+      <span className={clsx('ax-public-h9', styles['title'], classNameLabel)}>
+        {label}
+      </span>
+      <span
+        className={clsx('ax-public-p11', styles['subtitle'], classNameSubtitle)}
+      >
         {description}
       </span>
     </div>
diff --git a/packages/ui/src/components/radio-button/radio.module.css b/packages/ui/src/components/radio-button/radio.module.css
index 514345b7..1fafd0dd 100644
--- a/packages/ui/src/components/radio-button/radio.module.css
+++ b/packages/ui/src/components/radio-button/radio.module.css
@@ -16,7 +16,7 @@
   --ax-public-radio-border-radius: var(--ax-token-radius-radiobutton);
 }
 
-.wrapper {
+.container {
   position: relative;
   display: inline-flex;
   cursor: pointer;
diff --git a/packages/ui/src/components/radio-button/radio.tsx b/packages/ui/src/components/radio-button/radio.tsx
index 1f11b81a..9e5d3758 100644
--- a/packages/ui/src/components/radio-button/radio.tsx
+++ b/packages/ui/src/components/radio-button/radio.tsx
@@ -16,6 +16,8 @@ type Props = {
   value: string | number;
   /** Callback fired when the radio button state changes */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Optional class name for the container element */
+  classNameContainer?: string;
 } & Omit<
   InputHTMLAttributes<HTMLInputElement>,
   'size' | 'type' | 'value' | 'name'
@@ -31,6 +33,7 @@ export function Radio({
   name,
   value,
   onChange,
+  classNameContainer,
   ...props
 }: Props) {
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -38,7 +41,7 @@ export function Radio({
   }
 
   return (
-    <label className={radioButtonStyles['wrapper']}>
+    <label className={clsx(radioButtonStyles['container'], classNameContainer)}>
       <input
         type="radio"
         className={clsx(
diff --git a/packages/ui/src/components/select/select-option/select-option.tsx b/packages/ui/src/components/select/select-option/select-option.tsx
index 4ab8c277..ea6c4cb9 100644
--- a/packages/ui/src/components/select/select-option/select-option.tsx
+++ b/packages/ui/src/components/select/select-option/select-option.tsx
@@ -14,11 +14,16 @@ export function SelectOption({
   value,
   label,
   size = 'medium',
+  className,
   ...props
 }: SelectOptionProps) {
   return (
     <Option
-      className={clsx(listItemStyles['list-item'], listItemSize[size])}
+      className={clsx(
+        listItemStyles['list-item'],
+        listItemSize[size],
+        className,
+      )}
       value={value}
       {...props}
     >
diff --git a/packages/ui/src/components/select/select-value/select-value.tsx b/packages/ui/src/components/select/select-value/select-value.tsx
index 88876f43..491d5b4b 100644
--- a/packages/ui/src/components/select/select-value/select-value.tsx
+++ b/packages/ui/src/components/select/select-value/select-value.tsx
@@ -5,15 +5,25 @@ import type { SelectItem } from '../types';
 import clsx from 'clsx';
 
 type SelectValueProps = {
+  // Currently selected option label (or null if nothing is selected)
   selectedOptionLabel: SelectOption<string | number> | null;
+
+  // List of selectable items
   items: SelectItem[];
+
+  // Optional placeholder text when no option is selected
   placeholder?: string;
+
+  // Optional class name for styling the component
+  className?: string;
 };
 
+// Component that displays the selected option or a placeholder
 export function SelectValue({
   selectedOptionLabel,
   items,
   placeholder,
+  className,
 }: SelectValueProps) {
   const value = selectedOptionLabel?.label ?? placeholder;
   const selectedOption = items.find(
@@ -21,7 +31,7 @@ export function SelectValue({
   );
 
   return (
-    <div className={style['container']}>
+    <div className={clsx(style['container'], className)}>
       {selectedOption?.icon}
       <span
         className={clsx({
diff --git a/packages/ui/src/components/select/select.tsx b/packages/ui/src/components/select/select.tsx
index 2f78e289..77aed79f 100644
--- a/packages/ui/src/components/select/select.tsx
+++ b/packages/ui/src/components/select/select.tsx
@@ -35,6 +35,18 @@ export type SelectBaseProps = UseSelectParameters<string | number | null> & {
    * Whether the select has an error
    */
   error?: boolean;
+  /**
+   * Optional class name for the container element
+   */
+  classNameContainer?: string;
+  /**
+   * Optional class name for the select value
+   */
+  classNameValue?: string;
+  /**
+   * Optional class name for the separator inside
+   */
+  classNameSeparator?: string;
 };
 
 /**
@@ -46,6 +58,9 @@ export function Select({
   items,
   placeholder,
   error = false,
+  classNameContainer,
+  classNameValue,
+  classNameSeparator,
   ...props
 }: SelectBaseProps) {
   const slotProps = {
@@ -67,11 +82,12 @@ export function Select({
   };
 
   return (
-    <div className={style['container']}>
+    <div className={clsx(style['container'], classNameContainer)}>
       <SelectBase
         className={className}
         renderValue={(option) => (
           <SelectValue
+            className={classNameValue}
             selectedOptionLabel={option}
             items={items}
             placeholder={placeholder}
@@ -83,7 +99,7 @@ export function Select({
       >
         {items.map((item, index) =>
           item.type === 'separator' ? (
-            <Separator key={index} />
+            <Separator key={index} className={classNameSeparator} />
           ) : (
             <SelectOption key={item.value} {...item} size={size} />
           ),
diff --git a/packages/ui/src/components/select/types.ts b/packages/ui/src/components/select/types.ts
index 9ab344f4..7c4226f6 100644
--- a/packages/ui/src/components/select/types.ts
+++ b/packages/ui/src/components/select/types.ts
@@ -3,4 +3,5 @@ import { ListItem } from '../../shared/types/list-item';
 export type SelectItem = ListItem & {
   value?: string | number | null;
   label?: string;
+  className?: string;
 };
diff --git a/packages/ui/src/components/separator/separator.tsx b/packages/ui/src/components/separator/separator.tsx
index 20022e5d..ffa586b7 100644
--- a/packages/ui/src/components/separator/separator.tsx
+++ b/packages/ui/src/components/separator/separator.tsx
@@ -1,8 +1,16 @@
+import clsx from 'clsx';
 import styles from './separator.module.css';
 
+export type Props = {
+  /**
+   * Custom class name for the component.
+   */
+  className?: string;
+};
+
 /**
  * A visual separator component that creates a horizontal line to divide content.
  */
-export function Separator() {
-  return <hr className={styles['separator']} />;
+export function Separator({ className }: Props) {
+  return <hr className={clsx(styles['separator'], className)} />;
 }
diff --git a/packages/ui/src/components/snackbar/snackbar.tsx b/packages/ui/src/components/snackbar/snackbar.tsx
index e060c8d8..f482dfd8 100644
--- a/packages/ui/src/components/snackbar/snackbar.tsx
+++ b/packages/ui/src/components/snackbar/snackbar.tsx
@@ -12,6 +12,10 @@ export type SnackbarProps = {
    * Visual style variant of the snackbar
    */
   variant: SnackbarVariant;
+  /**
+   * Custom class name for the component (if the variant is not sufficient)
+   */
+  className?: string;
   /**
    * Main message displayed in the snackbar
    */
@@ -52,13 +56,14 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
       onButtonClick,
       close = false,
       onClose,
+      className,
     },
     ref,
   ) => (
     <div ref={ref}>
       <BaseSnackbar
         open={true}
-        className={clsx(styles['container'], styles[variant])}
+        className={clsx(styles['container'], styles[variant], className)}
       >
         <div className={styles['content']}>
           <Icon isCentered={!subtitle} variant={variant} />
diff --git a/packages/website/generated/props.json b/packages/website/generated/props.json
index 551a6342..317b9738 100644
--- a/packages/website/generated/props.json
+++ b/packages/website/generated/props.json
@@ -77,6 +77,13 @@
       "displayName": "Avatar",
       "methods": [],
       "props": {
+        "classNameContainer": {
+          "description": "Optional class name for the container element",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "imageUrl": {
           "description": "Image URL",
           "required": false,
@@ -837,6 +844,13 @@
             "name": "boolean"
           }
         },
+        "classNameContainer": {
+          "description": "Optional class name for the container element",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "indeterminate": {
           "description": "Whether the checkbox is in an indeterminate state",
           "required": false,
@@ -960,6 +974,13 @@
       "displayName": "DatePicker",
       "methods": [],
       "props": {
+        "className": {
+          "description": "Custom class name for the date picker component",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "defaultValue": {
           "description": "Default date value when the component is initially rendered.\n\nFor the \"default\" is a single date, for the \"range\" [date, date]; and for the \"multiple\", an array of dates.",
           "required": false,
@@ -1172,6 +1193,20 @@
       "displayName": "Input",
       "methods": [],
       "props": {
+        "className": {
+          "description": "Custom class name for the input element",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
+        "classNameContainer": {
+          "description": "Optional class name for the container element",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "endAdornment": {
           "defaultValue": {
             "computed": true,
@@ -1214,6 +1249,13 @@
       "displayName": "MenuItem",
       "methods": [],
       "props": {
+        "className": {
+          "description": "",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "destructive": {
           "description": "",
           "required": false,
@@ -1263,6 +1305,20 @@
             "name": "ReactElement"
           }
         },
+        "classNameContainer": {
+          "description": "Optional class name for the container element",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
+        "classNameSeparator": {
+          "description": "Optional class name for the separator inside",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "items": {
           "description": "Array of menu items to be rendered in the menu.\nEach item can be either a regular menu item or a separator.",
           "required": true,
@@ -1275,7 +1331,7 @@
                   },
                   {
                     "name": "signature",
-                    "raw": "{\n  destructive?: boolean;\n  onClick?: () => void;\n  size?: ItemSize;\n}",
+                    "raw": "{\n  destructive?: boolean;\n  onClick?: () => void;\n  size?: ItemSize;\n  className?: string;\n}",
                     "signature": {
                       "properties": [
                         {
@@ -1306,6 +1362,13 @@
                             "name": "ItemSize",
                             "required": false
                           }
+                        },
+                        {
+                          "key": "className",
+                          "value": {
+                            "name": "string",
+                            "required": false
+                          }
                         }
                       ]
                     },
@@ -1313,7 +1376,7 @@
                   }
                 ],
                 "name": "intersection",
-                "raw": "ListItem & {\n  destructive?: boolean;\n  onClick?: () => void;\n  size?: ItemSize;\n}"
+                "raw": "ListItem & {\n  destructive?: boolean;\n  onClick?: () => void;\n  size?: ItemSize;\n  className?: string;\n}"
               }
             ],
             "name": "Array",
@@ -1433,6 +1496,20 @@
             "name": "ReactNode"
           }
         },
+        "className": {
+          "description": "Custom class name for the input element",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
+        "classNameContainer": {
+          "description": "Optional class name for the container element",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "footer": {
           "description": "Content to be displayed in the modal footer",
           "required": false,
@@ -1609,6 +1686,20 @@
             "name": "string"
           }
         },
+        "classNameLabel": {
+          "description": "",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
+        "classNameSubtitle": {
+          "description": "",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "description": {
           "description": "",
           "required": false,
@@ -1662,6 +1753,13 @@
             "name": "boolean"
           }
         },
+        "classNameContainer": {
+          "description": "Optional class name for the container element",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "name": {
           "description": "The name of the radio button group",
           "required": true,
@@ -1804,6 +1902,13 @@
       "displayName": "SelectOption",
       "methods": [],
       "props": {
+        "className": {
+          "description": "",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "disabled": {
           "description": "",
           "required": false,
@@ -1875,6 +1980,13 @@
       "displayName": "SelectValue",
       "methods": [],
       "props": {
+        "className": {
+          "description": "",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "items": {
           "description": "",
           "required": true,
@@ -1955,7 +2067,7 @@
                   },
                   {
                     "name": "signature",
-                    "raw": "{\n  value?: string | number | null;\n  label?: string;\n}",
+                    "raw": "{\n  value?: string | number | null;\n  label?: string;\n  className?: string;\n}",
                     "signature": {
                       "properties": [
                         {
@@ -1983,6 +2095,13 @@
                             "name": "string",
                             "required": false
                           }
+                        },
+                        {
+                          "key": "className",
+                          "value": {
+                            "name": "string",
+                            "required": false
+                          }
                         }
                       ]
                     },
@@ -1990,7 +2109,7 @@
                   }
                 ],
                 "name": "intersection",
-                "raw": "ListItem & {\n  value?: string | number | null;\n  label?: string;\n}"
+                "raw": "ListItem & {\n  value?: string | number | null;\n  label?: string;\n  className?: string;\n}"
               }
             ],
             "name": "Array",
@@ -2051,6 +2170,27 @@
             "name": "string"
           }
         },
+        "classNameContainer": {
+          "description": "Optional class name for the container element",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
+        "classNameSeparator": {
+          "description": "Optional class name for the separator inside",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
+        "classNameValue": {
+          "description": "Optional class name for the select value",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "error": {
           "defaultValue": {
             "computed": false,
@@ -2142,7 +2282,7 @@
                   },
                   {
                     "name": "signature",
-                    "raw": "{\n  value?: string | number | null;\n  label?: string;\n}",
+                    "raw": "{\n  value?: string | number | null;\n  label?: string;\n  className?: string;\n}",
                     "signature": {
                       "properties": [
                         {
@@ -2170,6 +2310,13 @@
                             "name": "string",
                             "required": false
                           }
+                        },
+                        {
+                          "key": "className",
+                          "value": {
+                            "name": "string",
+                            "required": false
+                          }
                         }
                       ]
                     },
@@ -2177,7 +2324,7 @@
                   }
                 ],
                 "name": "intersection",
-                "raw": "ListItem & {\n  value?: string | number | null;\n  label?: string;\n}"
+                "raw": "ListItem & {\n  value?: string | number | null;\n  label?: string;\n  className?: string;\n}"
               }
             ],
             "name": "Array",
@@ -2234,7 +2381,16 @@
     {
       "description": "A visual separator component that creates a horizontal line to divide content.",
       "displayName": "Separator",
-      "methods": []
+      "methods": [],
+      "props": {
+        "className": {
+          "description": "Custom class name for the component.",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        }
+      }
     }
   ],
   "../ui/src/components/snackbar/components/action-buttons.tsx": [
@@ -2366,6 +2522,13 @@
             "name": "string"
           }
         },
+        "className": {
+          "description": "Custom class name for the component (if the variant is not sufficient)",
+          "required": false,
+          "tsType": {
+            "name": "string"
+          }
+        },
         "close": {
           "defaultValue": {
             "computed": false,