@epam/ai-dial-ui-kit 0.5.0-rc.41 → 0.5.0-rc.43

package/dist/src/components/FormPopup/FormPopup.d.ts

@@ -32,7 +32,7 @@ export interface DialFormPopupProps extends DialPopupProps {
  * @param [cancelLabel="Cancel"] - Label for the cancel button
  * @param [isLoading=false] - Shows loader placeholder and hides actions
  * @param [disableSubmitButton=false] - Disables the submit button
- * @param [cssClass] - Extra classes for the popup container
+ * @param [className] - Extra classes for the popup container
  * @param [submitClassName] - Extra classes merged into the submit button
  * @param onClose - Fired on close
  * @param onSubmit - Fired on submit

package/dist/src/components/FormPopup/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const defaultSubmitLabel = "Create";
 export declare const defaultCancelLabel = "Cancel";
-export declare const actionsBaseClasses = "flex items-center justify-end gap-2 px-6 py-3";
+export declare const actionsBaseClassName = "flex items-center justify-end gap-2 px-6 py-3";

package/dist/src/components/Grid/Grid.d.ts

@@ -6,7 +6,7 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
     rowData?: T[];
     additionalGridOptions?: GridOptions<T>;
     getContextMenuItems?: (row: T) => DropdownItem[];
-    cssClass?: string;
+    className?: string;
     ariaLabel?: string;
     withSelectionColumn?: boolean;
     wrapCustomCellRenderers?: boolean | ((col: ColDef<T>) => boolean);
@@ -92,7 +92,7 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @param [rowData] - Array of data objects to display in the grid
  * @param [additionalGridOptions] - Additional ag-Grid GridOptions to merge with defaults
  * @param [getContextMenuItems] - Function returning context menu items for a given row
- * @param [cssClass] - Additional CSS classes to apply to the grid container
+ * @param [className] - Additional CSS classes to apply to the grid container
  * @param [ariaLabel='Data grid'] - Accessible label for the grid region
  * @param [withSelectionColumn=true] - Whether to show the checkbox selection column
  * @param [wrapCustomCellRenderers=true] - Whether to wrap custom cell renderers with context menu support
@@ -108,4 +108,4 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @param [loading=false] - When true, shows AG-Grid's native loading overlay
  * @param [wrapperBorder=true] - Whether to apply a border around the grid container
  */
-export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, cssClass, ariaLabel, withSelectionColumn, wrapCustomCellRenderers, selectedRowIds, selectedRows, onSelectionChange, onSelectionChangeWithMap, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, withSelectionColumn, wrapCustomCellRenderers, selectedRowIds, selectedRows, onSelectionChange, onSelectionChangeWithMap, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Grid/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const gridBaseClasses = "h-full";
+export declare const gridBaseClassName = "h-full";
 export declare const GRID_THEME_COLORS: {
     accentColor: string;
     backgroundColor: string;

package/dist/src/components/Grid/renderers/DateCellRenderer.d.ts

@@ -6,7 +6,7 @@ export interface DialDateCellRendererProps extends Partial<ICellRendererParams<R
     locale?: string;
     options?: Intl.DateTimeFormatOptions;
     emptyPlaceholder?: string;
-    cssClass?: string;
+    className?: string;
 }
 /**
  * Minimal date cell renderer (ag-Grid compatible).
@@ -27,6 +27,6 @@ export interface DialDateCellRendererProps extends Partial<ICellRendererParams<R
  * @param [locale='en-US'] - Locale fixed to U.S. English by default to enforce "Jul 20, 2025".
  * @param [options={ year: 'numeric', month: 'numeric', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZone: 'UTC' }] - Options for date formatting (e.g., timeZone).
  * @param [emptyPlaceholder='—'] - Placeholder when value is empty/invalid.
- * @param [cssClass] - Additional classes merged into the wrapper.
+ * @param [className] - Additional classes merged into the wrapper.
  */
 export declare const DialDateCellRenderer: FC<DialDateCellRendererProps>;

package/dist/src/components/Grid/renderers/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const DEFAULT_LOCALE = "en-US";
 export declare const DEFAULT_DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions;
-export declare const dateCellBaseClasses = "text-primary";
+export declare const dateCellBaseClassName = "text-primary";

package/dist/src/components/Input/Input.d.ts

@@ -2,8 +2,8 @@ import { FC, FocusEvent, Ref } from 'react';
 import { InputBaseProps, NumberInputBaseProps } from '../../models/field-control-props';
 export interface DialInputProps extends InputBaseProps, Partial<NumberInputBaseProps> {
     type?: string;
-    containerCssClass?: string;
-    cssClass?: string;
+    containerClassName?: string;
+    className?: string;
     hideBorder?: boolean;
     tooltipText?: string;
     tooltipTriggerClassName?: string;
@@ -31,8 +31,8 @@ export interface DialInputProps extends InputBaseProps, Partial<NumberInputBaseP
  * - {@link NumberInputBaseProps} - Number input properties (min, max) - partial
  *
  * @param type - The HTML input type (text, password, email, number, etc.)
- * @param containerCssClass - Additional CSS classes to apply to the container div
- * @param cssClass - Additional CSS classes to apply to the input element
+ * @param containerClassName - Additional CSS classes to apply to the container div
+ * @param className - Additional CSS classes to apply to the input element
  * @param hideBorder - Whether to hide the input border styling
  * @param tooltipText - The text to display inside the tooltip. If empty, the tooltip will display the value prop.
  * @param tooltipTriggerClassName - Additional CSS classes to apply to the tooltip

package/dist/src/components/InputField/InputField.d.ts

@@ -5,9 +5,9 @@ export interface DialInputFieldBaseProps extends FieldControlProps, DialFormItem
     value?: string | number;
     defaultEmptyText?: string;
     errorText?: string;
-    elementCssClass?: string;
-    elementContainerCssClass?: string;
-    containerCssClass?: string;
+    elementClassName?: string;
+    elementContainerClassName?: string;
+    containerClassName?: string;
 }
 export interface DialInputFieldProps extends DialInputFieldBaseProps, Partial<NumberInputBaseProps> {
     type: string;

package/dist/src/components/InputPopup/InputPopup.d.ts

@@ -5,8 +5,8 @@ export interface DialInputPopupProps {
     children: ReactNode;
     onOpen: () => void;
     disabled?: boolean;
-    valueCssClasses?: string;
-    inputCssClasses?: string;
+    valueClassNames?: string;
+    inputClassNames?: string;
     placeholder?: string;
     elementId?: string;
     errorText?: string;
@@ -26,8 +26,8 @@ export interface DialInputPopupProps {
  *   emptyValueText="No value selected"
  *   onOpen={() => setModalState(true)}
  *   disabled={false}
- *   valueCssClasses="custom-value-class"
- *   inputCssClasses="custom-input-class"
+ *   valueClassNames="custom-value-class"
+ *   inputClassNames="custom-input-class"
  *   elementId="input-modal"
  *   errorText="This field is required"
  * >
@@ -41,8 +41,8 @@ export interface DialInputPopupProps {
  * @param children - The content to render inside the modal when it is opened.
  * @param onOpen - A callback function triggered when the modal open button is clicked.
  * @param [disabled=false] - Whether the input is disabled, preventing user interaction.
- * @param [valueCssClasses] - Additional CSS classes applied to the displayed value.
- * @param [inputCssClasses] - Additional CSS classes applied to the input container.
+ * @param [valueClassNames] - Additional CSS classes applied to the displayed value.
+ * @param [inputClassNames] - Additional CSS classes applied to the input container.
  * @param [elementId] - A unique identifier for the input element, useful for accessibility and testing.
  * @param [errorText] - An optional error message displayed below the input when an error state is present.
  * @param [invalid] - Whether the input is in an invalid state, affecting styling. Applyed automatically if errorText is provided.

package/dist/src/components/PasswordInput/PasswordInputField.d.ts

@@ -24,6 +24,6 @@ export interface DialPasswordInputFieldProps extends DialInputFieldBaseProps {
  * @param [onChange] - Callback function called when the input value changes
  * @param [errorText] - Error message to display below the input
  * @param [optional=false] - Whether the field is optional
- * @param [cssClass] - Custom CSS class for the input element
+ * @param [className] - Custom CSS class for the input element
  */
 export declare const DialPasswordInputField: FC<DialPasswordInputFieldProps>;

package/dist/src/components/Popup/Popup.d.ts

@@ -4,9 +4,9 @@ export interface DialPopupProps {
     open?: boolean;
     title?: string | ReactNode;
     portalId?: string;
-    cssClass?: string;
-    overlayClass?: string;
-    headingClass?: string;
+    className?: string;
+    overlayClassName?: string;
+    headingClassName?: string;
     dividers?: boolean;
     children?: ReactNode;
     footer?: ReactNode;
@@ -40,9 +40,9 @@ export interface DialPopupProps {
  * @param [open=false] - Controls visibility of the popup
  * @param [title] - Optional title rendered in the header
  * @param [portalId] - Optional portal container id
- * @param [cssClass] - Additional CSS classes applied to the popup container
- * @param [overlayClass] - Additional CSS classes applied to the overlay
- * @param [headingClass] - Additional CSS classes applied to the title element
+ * @param [className] - Additional CSS classes applied to the popup container
+ * @param [overlayClassName] - Additional CSS classes applied to the overlay
+ * @param [headingClassName] - Additional CSS classes applied to the title element
  * @param [dividers=true] - Whether to render separators between sections
  * @param [children] - Body content
  * @param [footer] - Footer area for actions

package/dist/src/components/Popup/constants.d.ts

@@ -1,5 +1,5 @@
 import { PopupSize } from '../../types/popup';
-export declare const overlayBaseClasses = "z-[52] flex items-center justify-center bg-blackout md:p-4";
-export declare const popupDividerClasses = "divide-tertiary divide-y";
-export declare const popupHeaderClasses = "flex flex-row justify-between py-4 px-6 items-center";
+export declare const overlayBaseClassName = "z-[52] flex items-center justify-center bg-blackout md:p-4";
+export declare const popupDividerClassName = "divide-tertiary divide-y";
+export declare const popupHeaderClassName = "flex flex-row justify-between py-4 px-6 items-center";
 export declare const popupSizeClassMap: Record<PopupSize, string>;

package/dist/src/components/RadioButton/RadioButton.d.ts

@@ -6,11 +6,11 @@ export interface DialRadioButtonProps {
     description?: ReactNode;
     checked?: boolean;
     inputId: string;
-    cssClass?: string;
-    labelCssClass?: string;
+    className?: string;
+    labelClassName?: string;
     disabled?: boolean;
     onChange?: (value: string) => void;
-    descriptionCssClass?: string;
+    descriptionClassName?: string;
 }
 /**
  * A stylized, accessible radio input with optional description.
@@ -37,10 +37,10 @@ export interface DialRadioButtonProps {
  * @param [description] - Supporting text shown when checked
  * @param [checked=false] - Controlled checked state
  * @param inputId - ID associated with the label
- * @param [cssClass] - Additional classes applied to the input element
- * @param [labelCssClass] - Additional classes applied to the label element
+ * @param [className] - Additional classes applied to the input element
+ * @param [labelClassName] - Additional classes applied to the label element
  * @param [disabled] - Disabled state of the control
  * @param [onChange] - Callback fired with `value` when the radio is changed
- * @param [descriptionCssClass] - Additional classes applied to the description block
+ * @param [descriptionClassName] - Additional classes applied to the description block
  */
 export declare const DialRadioButton: FC<DialRadioButtonProps>;

package/dist/src/components/RadioGroup/RadioGroup.d.ts

@@ -9,16 +9,16 @@ export interface DialRadioGroupProps {
     activeRadioButton: string;
     orientation: RadioGroupOrientation;
     onChange: (radioId: string) => void;
-    radioCssClass?: string;
-    groupLabelCssClass?: string;
-    labelCssClass?: string;
-    containerCssClass?: string;
-    formItemChildrenCssClass?: string;
-    selectedItemCssClass?: string;
-    selectedLabelCssClass?: string;
-    radioGroupCssClass?: string;
-    inputContainerCssClass?: string;
-    selectedInputContainerCssClass?: string;
+    radioClassName?: string;
+    groupLabelClassName?: string;
+    labelClassName?: string;
+    containerClassName?: string;
+    formItemChildrenClassName?: string;
+    selectedItemClassName?: string;
+    selectedLabelClassName?: string;
+    radioGroupClassName?: string;
+    inputContainerClassName?: string;
+    selectedInputContainerClassName?: string;
 }
 /**
  * Groups multiple `DialRadio` options and renders custom content for the active option.
@@ -43,16 +43,16 @@ export interface DialRadioGroupProps {
  *
  * @param [fieldTitle] - Optional label rendered by `DialField`
  * @param elementId - Name for the underlying radio group; also used for input `name`
- * @param [radioCssClass] - Additional classes applied to each radio input
- * @param [inputContainerCssClass] - Additional classes applied to each radio input's container
- * @param [selectedInputContainerCssClass] - Additional classes applied to the selected radio input's container
- * @param [groupLabelCssClass] - Optional classes applied to the group label. If not provided, `labelCssClass` will be used.
- * @param [formItemChildrenCssClass] - Additional classes applied to the DialFormItem's children container
- * @param [labelCssClass] - Additional classes applied to each radio label
- * @param [containerCssClass] - Additional classes applied to the outer container
- * @param [selectedItemCssClass] - Additional classes applied to the selected option's content container
- * @param [selectedLabelCssClass] - Additional classes applied to the selected option's label
- * @param [radioGroupCssClass] - Additional classes applied to the radio group container
+ * @param [radioClassName] - Additional classes applied to each radio input
+ * @param [inputContainerClassName] - Additional classes applied to each radio input's container
+ * @param [selectedInputContainerClassName] - Additional classes applied to the selected radio input's container
+ * @param [groupLabelClassName] - Optional classes applied to the group label. If not provided, `labelClassName` will be used.
+ * @param [formItemChildrenClassName] - Additional classes applied to the DialFormItem's children container
+ * @param [labelClassName] - Additional classes applied to each radio label
+ * @param [containerClassName] - Additional classes applied to the outer container
+ * @param [selectedItemClassName] - Additional classes applied to the selected option's content container
+ * @param [selectedLabelClassName] - Additional classes applied to the selected option's label
+ * @param [radioGroupClassName] - Additional classes applied to the radio group container
  * @param [disabled] - Disables all child radios when set
  * @param radioButtons - Array of options with ids, labels, and optional content
  * @param activeRadioButton - The id of the currently selected radio

package/dist/src/components/RadioGroup/constants.d.ts

@@ -1,5 +1,5 @@
 import { RadioGroupOrientation } from '../../types/radio-group';
-export declare const groupBaseClasses = "flex flex-col gap-2";
-export declare const optionsWrapperBaseClasses = "flex";
-export declare const selectedContentClasses = "pb-1 mt-2";
+export declare const groupBaseClassName = "flex flex-col gap-2";
+export declare const optionsWrapperBaseClassName = "flex";
+export declare const selectedContentClassName = "pb-1 mt-2";
 export declare const orientationClassMap: Record<RadioGroupOrientation, string>;

package/dist/src/components/RadioGroupPopupField/RadioGroupPopupField.d.ts

@@ -51,8 +51,8 @@ export interface RadioGroupPopupFieldProps extends Pick<DialFieldLabelProps, 'fi
  * @param [selectedValue] - Current value id used to resolve the displayed option name
  * @param radioButtons - Collection of radio options (id/name)
  * @param [customInputValue] - Custom value text to display instead of a radio option name
- * @param [valueCssClasses] - Extra classes applied to the value text in the collapsed field
- * @param [inputCssClasses] - Extra classes applied to the collapsed input container
+ * @param [valueClassNames] - Extra classes applied to the value text in the collapsed field
+ * @param [inputClassNames] - Extra classes applied to the collapsed input container
  * @param emptyValueText - Placeholder text when no value is selected
  * @param [onClose] - Callback fired when the popup closes
  * @param title - Title text shown in the popup header

package/dist/src/components/ResizableContainer/ConditionalResizableContainer.d.ts

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { DialResizableContainerProps } from './ResizableContainer';
+export interface DialConditionalResizableContainerProps extends DialResizableContainerProps {
+    enabled?: boolean;
+}
+/**
+ * DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.
+ *
+ * This component renders its children inside a resizable container only when `enabled` is true.
+ * When `enabled` is false, children are rendered directly without any resizable behavior.
+ *
+ * All other props are the same as `DialResizableContainer`. See the documentation for
+ * `DialResizableContainer` for full details on usage, controlled/uncontrolled modes, sides, and callbacks.
+ *
+ * @example
+ * ```tsx
+ * <DialConditionalResizableContainer
+ *   enabled={!isCollapsed}
+ *   defaultWidth={260}
+ *   minWidth={180}
+ *   maxWidth={520}
+ *   onResize={(w) => console.log('Current width:', w)}
+ *   onResizeStop={(w) => setSidebarWidth(w)}
+ * >
+ *   <Sidebar />
+ * </DialConditionalResizableContainer>
+ * ```
+ *
+ * @param enabled - Whether resizing is enabled. When false, children are rendered directly.
+ * @param children - Content to render inside the container.
+ * @see DialResizableContainer
+ */
+export declare const DialConditionalResizableContainer: FC<DialConditionalResizableContainerProps>;

package/dist/src/components/ResizableContainer/ResizableContainer.d.ts

@@ -0,0 +1,69 @@
+import { ResizableContainerSide } from '../../types/resizable-container';
+import { FC, ReactNode } from 'react';
+export interface DialResizableContainerProps {
+    children: ReactNode;
+    minWidth: number;
+    maxWidth: number;
+    width?: number;
+    defaultWidth: number;
+    onResizeStop?: (width: number) => void;
+    onResize?: (width: number) => void;
+    side?: ResizableContainerSide;
+    resizeHandlerClassName?: string;
+    resizeHandler?: ReactNode;
+}
+/**
+ * DialResizableContainer — A reusable resizable container
+ * supporting both **controlled** and **uncontrolled** width modes.
+ *
+ * Controlled Mode
+ *
+ * Provide `width` and optionally `onResizeStop`:
+ * ```tsx
+ * <DialResizableContainer
+ *   width={sidebarWidth}
+ *   onResizeStop={(w) => setSidebarWidth(w)}
+ *   minWidth={180}
+ *   maxWidth={520}
+ * >
+ *   <Sidebar />
+ * </DialResizableContainer>
+ * ```
+ *
+ * Uncontrolled Mode
+ *
+ * Omit `width` entirely — the component manages its own width:
+ * ```tsx
+ * <DialResizableContainer
+ *   defaultWidth={260}
+ *   minWidth={180}
+ *   maxWidth={520}
+ * >
+ *   <Sidebar />
+ * </DialResizableContainer>
+ * ```
+ *
+ * Features:
+ * - Resize from left or right
+ * - Fully supports controlled & uncontrolled sizing
+ * - Custom resize handler (icon or any ReactNode)
+ * - Callback when resize stops (optional)
+ * - Smooth hover/drag visibility transitions
+ *
+ * @param [children] - Content placed inside the container.
+ * @param [minWidth] - Minimum allowed width (px).
+ * @param [maxWidth] - Maximum allowed width (px).
+ * @param [width] - Controlled width. If omitted → uncontrolled mode.
+ * @param [defaultWidth] - Initial width in uncontrolled mode.
+ * @param [onResizeStop] - Optional callback fired when resize ends.
+ * @param [onResize] - Optional callback fired continuously during resizing with current width.
+ * @param [side=ResizableContainerSide.Right] - Resize handle side.
+ * @param [resizeHandlerClassName] - Optional additional CSS classes.
+ * @param [resizeHandler] - Optional custom handler element.
+ *
+ * @remarks
+ * - In uncontrolled mode, width is stored internally.
+ * - `onResizeStop` is optional in both modes.
+ * - Controlled mode always uses the value from `width`.
+ */
+export declare const DialResizableContainer: FC<DialResizableContainerProps>;

package/dist/src/components/ResizableContainer/components/ResizeHandle.d.ts

@@ -0,0 +1,10 @@
+import { ResizableContainerSide } from '../../../types/resizable-container';
+import { FC, ReactNode } from 'react';
+interface ResizeHandleProps {
+    side: ResizableContainerSide;
+    isResizing: boolean;
+    customHandler?: ReactNode;
+    handlerClassName?: string;
+}
+export declare const ResizeHandle: FC<ResizeHandleProps>;
+export {};

package/dist/src/components/ResizableContainer/components/ResizeIcon.d.ts

@@ -0,0 +1,8 @@
+import { ResizableContainerSide } from '../../../types/resizable-container';
+import { FC } from 'react';
+interface ResizeIconProps {
+    side: ResizableContainerSide;
+    className: string;
+}
+export declare const ResizeIcon: FC<ResizeIconProps>;
+export {};

package/dist/src/components/Search/Search.d.ts

@@ -7,8 +7,8 @@ export interface DialSearchProps {
     disabled?: boolean;
     readonly?: boolean;
     invalid?: boolean;
-    cssClass?: string;
-    containerCssClass?: string;
+    className?: string;
+    containerClassName?: string;
     onChange?: (value: string) => void;
     size?: SearchSize;
     allowClear?: boolean;
@@ -35,8 +35,8 @@ export interface DialSearchProps {
  * @param [disabled=false] - Whether the input is disabled
  * @param [readonly=false] - Whether the input is read-only (non-editable)
  * @param [invalid=false] - Whether the input should be styled as invalid
- * @param [cssClass] - Additional CSS classes applied to the input element
- * @param [containerCssClass] - Additional CSS classes applied to the container
+ * @param [className] - Additional CSS classes applied to the input element
+ * @param [containerClassName] - Additional CSS classes applied to the container
  * @param [onChange] - Callback fired when the input value changes
  * @param [size=SearchSize.Base] - The size of the search input. Uses the {@link SearchSize} enum.
  * @param [allowClear=true] - Whether to show a clear button when there is a value

package/dist/src/components/Search/constants.d.ts

@@ -1,13 +1,13 @@
 export declare const SIZE_CONFIG: {
     small: {
-        textClass: string;
-        containerClass: string;
+        textClassName: string;
+        containerClassName: string;
         iconSize: number;
         iconStroke: number;
     };
     base: {
-        textClass: string;
-        containerClass: string;
+        textClassName: string;
+        containerClassName: string;
         iconSize: number;
         iconStroke: number;
     };

package/dist/src/components/Select/Select.d.ts

@@ -20,7 +20,7 @@ export interface DialSelectProps {
     emptyStateDescription?: string;
     emptyStateIcon?: ReactNode;
     disabled?: boolean;
-    cssClass?: string;
+    className?: string;
     closable?: boolean;
     header?: ReactNode | (() => ReactNode);
     footer?: ReactNode | (() => ReactNode);
@@ -71,7 +71,7 @@ export interface DialSelectProps {
  * @param [emptyStateDescription] - Description text when there are no options.
  * @param [emptyStateIcon] - Icon to display when there are no options.
  * @param [disabled=false] - Disable the control.
- * @param [cssClass] - Additional CSS classes for the trigger.
+ * @param [className] - Additional CSS classes for the trigger.
  * @param [closable=false] - Show a close button in the dropdown header.
  * @param [header] - Custom node/function rendered above the options.
  * @param [footer] - Custom node/function rendered below the options.

package/dist/src/components/Select/constants.d.ts

@@ -1,8 +1,8 @@
-export declare const selectTriggerBaseClasses = "dial-input flex w-full items-center justify-between gap-2 dial-small";
-export declare const selectOverlayBaseClasses = "w-full rounded flex flex-col";
-export declare const selectOptionBaseClasses = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
-export declare const selectOptionSelectedClasses = "bg-accent-primary-alpha";
-export declare const selectOptionSingleSelectedClasses = "bg-accent-primary-alpha border-l border-accent-primary border-1";
-export declare const selectOptionDisabledClasses = "opacity-75";
+export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small";
+export declare const selectOverlayBaseClassName = "w-full rounded flex flex-col";
+export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
+export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
+export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary border-1";
+export declare const selectOptionDisabledClassName = "opacity-75";
 export declare const dropdownMenuMaxHeight = 352;
 export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;

package/dist/src/components/SelectField/SelectField.d.ts

@@ -2,9 +2,9 @@ import { FC } from 'react';
 import { DialFormItemProps } from '../FormItem/FormItem';
 import { DialSelectProps } from '../Select/Select';
 import { DialFieldLabelProps } from '../Field/Field';
-export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass' | 'elementId'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children' | 'value'> {
-    selectCssClass?: string;
-    containerCssClass?: string;
+export interface DialSelectFieldProps extends Omit<DialSelectProps, 'className' | 'elementId'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children' | 'value'> {
+    selectClassName?: string;
+    containerClassName?: string;
 }
 /**
  * A Select field wrapper that composes `DialFormItem` and `DialSelect`.
@@ -26,12 +26,12 @@ export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass' |
  * />
  *
  * @params - Component properties extending:
- * - {@link DialSelectProps} for select options and props, except for cssClass
+ * - {@link DialSelectProps} for select options and props, except for className
  * - {@link DialFormItemProps} for form item props, except for htmlFor
  * - {@link DialFieldLabelProps} for label props, except for label, children, value
  *
- * @param selectCssClass CSS class for the select element
- * @param containerCssClass CSS class for the form item container
+ * @param selectClassName CSS class for the select element
+ * @param containerClassName CSS class for the form item container
  * @param emptyStateTitle Title to show when there are no options
  * @param restSelectProps All other DialSelect props
  * @param restFormItemProps All other DialFormItem props

package/dist/src/components/SharedEntityIndicator/SharedEntityIndicator.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 export interface DialSharedEntityIndicatorProps {
     label?: string;
     size?: number;
-    cssClass?: string;
+    className?: string;
     stroke?: number;
 }
 /**
@@ -18,7 +18,7 @@ export interface DialSharedEntityIndicatorProps {
  *
  * @param [label="Shared entity"] - Accessible label for assistive tech
  * @param [size=10] - Pixel size for the icon
- * @param [cssClass] - Additional Tailwind classes appended to the container
+ * @param [className] - Additional Tailwind classes appended to the container
  * @param [stroke=2] - Stroke width for the icon
  *
  */

package/dist/src/components/Tag/Tag.d.ts

@@ -2,7 +2,7 @@ import { TagVariant } from '../../types/tag';
 import { FC, MouseEvent, ReactNode } from 'react';
 export interface DialTagProps {
     tag: string;
-    cssClass?: string;
+    className?: string;
     remove?: (event: MouseEvent<HTMLButtonElement>) => void;
     variant?: TagVariant;
     iconBefore?: ReactNode;
@@ -22,7 +22,7 @@ export interface DialTagProps {
  * ```
  *
  * @param tag - The text label displayed inside the tag.
- * @param [cssClass] - Optional additional CSS classes applied to the tag container.
+ * @param [className] - Optional additional CSS classes applied to the tag container.
  * @param [remove] - Optional callback invoked when the remove button is clicked.
  *                   If not provided, the remove button will not be rendered.
  * @param [variant=TagVariant.Default] - Visual style of the tag. Uses the {@link TagVariant} enum.

package/dist/src/components/TextAreaField/TextAreaField.d.ts

@@ -33,9 +33,9 @@ export interface DialTextAreaFieldProps extends DialInputFieldBaseProps {
  * @param [iconBefore] - Icon or element to display before the input
  * @param [iconAfter] - Icon or element to display after the input
  * @param [textBeforeInput] - Text to display before the input
- * @param [elementCssClass] - Additional CSS classes to apply to the textarea element
- * @param [containerCssClass] - Additional CSS classes to apply to the outer container
- * @param [elementContainerCssClass] - Additional CSS classes to apply to the textarea container
+ * @param [elementClassName] - Additional CSS classes to apply to the textarea element
+ * @param [containerClassName] - Additional CSS classes to apply to the outer container
+ * @param [elementContainerClassName] - Additional CSS classes to apply to the textarea container
  * @param [disableTooltip] - Whether to disable the tooltip that shows the full value on hover
  */
 export declare const DialTextAreaField: FC<DialTextAreaFieldProps>;

package/dist/src/components/Textarea/Textarea.d.ts

@@ -3,8 +3,8 @@ export interface DialTextareaProps {
     value?: string | number | null;
     placeholder?: string;
     textareaId: string;
-    cssClass?: string;
-    containerCssClass?: string;
+    className?: string;
+    containerClassName?: string;
     disabled?: boolean;
     invalid?: boolean;
     readonly?: boolean;
@@ -28,8 +28,8 @@ export interface DialTextareaProps {
  * @param [value] - The current value of the textarea
  * @param [onChange] - Callback function called when the textarea value changes
  * @param [placeholder] - Placeholder text displayed when textarea is empty
- * @param [cssClass=""] - Additional CSS classes to apply to the textarea element
- * @param [containerCssClass=""] - Additional CSS classes to apply to the container div
+ * @param [className=""] - Additional CSS classes to apply to the textarea element
+ * @param [containerClassName=""] - Additional CSS classes to apply to the container div
  * @param [disabled=false] - Whether the textarea is disabled
  * @param [readonly=false] - Whether the textarea is read-only (no user input allowed)
  * @param [invalid=false] - Whether the textarea has validation errors (applies error styling)

package/dist/src/index.d.ts

@@ -18,6 +18,8 @@ export { DialFormItem } from './components/FormItem/FormItem';
 export { DialSharedEntityIndicator } from './components/SharedEntityIndicator/SharedEntityIndicator';
 export { DialFileName } from './components/FileName/FileName';
 export { DialFolderName } from './components/FolderName/FolderName';
+export { DialResizableContainer } from './components/ResizableContainer/ResizableContainer';
+export { DialConditionalResizableContainer } from './components/ResizableContainer/ConditionalResizableContainer';
 export { DialDateCellRenderer } from './components/Grid/renderers/DateCellRenderer';
 export { DialTabs } from './components/Tabs/Tabs';
 export { DialBreadcrumb } from './components/Breadcrumb/Breadcrumb';
@@ -65,6 +67,7 @@ export { SelectSize, SelectVariant } from './types/select';
 export { DialFileManagerTabs, DialFileManagerActions, } from './types/file-manager';
 export { FlexibleActionsDirection } from './types/flexible-actions';
 export { DialItemType } from './types/item';
+export { ResizableContainerSide } from './types/resizable-container';
 export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
 export { useEditableItem } from './hooks/use-editable-item';
 export { FileManagerProvider } from './components/FileManager/FileManagerProvider';

package/dist/src/types/resizable-container.d.ts

@@ -0,0 +1,4 @@
+export declare enum ResizableContainerSide {
+    Left = "left",
+    Right = "right"
+}