@lumx/react 3.10.1-alpha.5 → 3.10.1-alpha.7

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.10.1-alpha.5",
-        "@lumx/icons": "^3.10.1-alpha.5",
+        "@lumx/core": "^3.10.1-alpha.7",
+        "@lumx/icons": "^3.10.1-alpha.7",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.10.1-alpha.5"
+    "version": "3.10.1-alpha.7"
 }

package/src/components/alert-dialog/AlertDialog.tsx

@@ -15,9 +15,10 @@ import {
     ButtonProps,
 } from '@lumx/react';
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import type { ComponentClassName } from '@lumx/react/utils/type';
 
 export interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
     /** Message variant. */
@@ -57,7 +58,7 @@ const COMPONENT_NAME = 'AlertDialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-alert-dialog';
 
 /**
  * Component default props.

package/src/components/autocomplete/Autocomplete.tsx

@@ -5,11 +5,11 @@ import classNames from 'classnames';
 import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
 
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import type { ComponentClassName } from '@lumx/react/utils/type';
 
 /**
  * Defines the props of the component.
@@ -181,7 +181,7 @@ const COMPONENT_NAME = 'Autocomplete';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-autocomplete';
 
 /**
  * Component default props.

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { mdiClose } from '@lumx/icons';
 
 import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
-import { getRootClassName } from '@lumx/react/utils/className';
+import type { ComponentClassName } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
@@ -34,7 +34,7 @@ const COMPONENT_NAME = 'AutocompleteMultiple';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.

package/src/components/avatar/Avatar.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
 
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -51,7 +51,7 @@ const COMPONENT_NAME = 'Avatar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-avatar';
 
 /**
  * Component default props.

package/src/components/badge/Badge.tsx

@@ -3,8 +3,8 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { ColorPalette } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -25,7 +25,7 @@ const COMPONENT_NAME = 'Badge';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-badge';
 
 /**
  * Component default props.

package/src/components/badge/BadgeWrapper.tsx

@@ -2,9 +2,8 @@ import React, { ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { getRootClassName } from '@lumx/react/utils/className';
 import { DEFAULT_PROPS } from '@lumx/react/components/select/WithSelectContext';
-import { GenericProps } from '@lumx/react/utils/type';
+import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export interface BadgeWrapperProps extends GenericProps {
@@ -22,7 +21,7 @@ const COMPONENT_NAME = 'BadgeWrapper';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-badge-wrapper';
 
 export const BadgeWrapper = forwardRef<BadgeWrapperProps, HTMLDivElement>((props, ref) => {
     const { badge, children, className, ...forwardedProps } = props;

package/src/components/button/Button.tsx

@@ -3,8 +3,8 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { Emphasis, Icon, Size, Theme, Text } from '@lumx/react';
-import { isComponent } from '@lumx/react/utils/type';
-import { getBasicClass, getRootClassName } from '@lumx/react/utils/className';
+import { isComponentType, type ComponentClassName } from '@lumx/react/utils/type';
+import { getBasicClass } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -38,7 +38,7 @@ const COMPONENT_NAME = 'Button';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-button';
 
 /**
  * Component default props.
@@ -73,7 +73,7 @@ export const Button = forwardRef<ButtonProps, HTMLButtonElement | HTMLAnchorElem
             variant="button"
         >
             {leftIcon && <Icon icon={leftIcon} />}
-            {children && (isComponent(Text)(children) ? children : <span>{children}</span>)}
+            {children && (isComponentType(Text)(children) ? children : <span>{children}</span>)}
             {rightIcon && <Icon icon={rightIcon} />}
         </ButtonRoot>
     );

package/src/components/button/ButtonGroup.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**
@@ -19,7 +18,7 @@ const COMPONENT_NAME = 'ButtonGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-button-group';
 
 /**
  * Component default props.

package/src/components/button/IconButton.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { Emphasis, Icon, Size, Theme, Tooltip, TooltipProps } from '@lumx/react';
 import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
-import { getRootClassName } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import type { ComponentClassName } from '@lumx/react/utils/type';
 
 export interface IconButtonProps extends BaseButtonProps {
     /**
@@ -39,7 +39,7 @@ const COMPONENT_NAME = 'IconButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-icon-button';
 
 /**
  * Component default props.

package/src/components/checkbox/Checkbox.tsx

@@ -5,8 +5,8 @@ import classNames from 'classnames';
 import { mdiCheck, mdiMinus } from '@lumx/icons';
 
 import { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -51,7 +51,7 @@ const COMPONENT_NAME = 'Checkbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-checkbox';
 
 /**
  * Component default props.

package/src/components/chip/Chip.tsx

@@ -5,8 +5,8 @@ import classNames from 'classnames';
 import { ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { onEnterPressed } from '@lumx/react/utils/browser/event';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -50,7 +50,7 @@ const COMPONENT_NAME = 'Chip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-chip';
 
 /**
  * Component default props.

package/src/components/chip/ChipGroup.tsx

@@ -3,8 +3,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { HorizontalAlignment } from '@lumx/react/components';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
@@ -35,7 +34,7 @@ const COMPONENT_NAME = 'ChipGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-chip-group';
 
 /**
  * ChipGroup component.

package/src/components/comment-block/CommentBlock.tsx

@@ -3,8 +3,8 @@ import React, { Children, ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
-import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ValueOf, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -72,7 +72,7 @@ const COMPONENT_NAME = 'CommentBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-comment-block';
 
 /**
  * Component default props.

package/src/components/date-picker/constants.ts

@@ -1,4 +1,4 @@
-import { getRootClassName } from '@lumx/react/utils/className';
+import type { ComponentClassName } from '@lumx/react/utils/type';
 
 /**
  * Component display name.
@@ -8,4 +8,4 @@ export const COMPONENT_NAME = 'DatePicker';
 /**
  * Component default class name and class prefix.
  */
-export const CLASSNAME = getRootClassName(COMPONENT_NAME);
+export const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-date-picker';

package/src/components/dialog/Dialog.tsx

@@ -10,9 +10,9 @@ import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';
 
-import { GenericProps, isComponent } from '@lumx/react/utils/type';
+import { type GenericProps, isComponentType, type ComponentClassName } from '@lumx/react/utils/type';
 import { partitionMulti } from '@lumx/react/utils/collection/partitionMulti';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
@@ -65,8 +65,8 @@ export interface DialogProps extends GenericProps {
 
 export type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
 
-const isHeader = isComponent('header');
-const isFooter = isComponent('footer');
+const isHeader = isComponentType('header');
+const isFooter = isComponentType('footer');
 
 /**
  * Component display name.
@@ -76,7 +76,7 @@ const COMPONENT_NAME = 'Dialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-dialog';
 
 /**
  * Component default props.

package/src/components/divider/Divider.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -21,7 +21,7 @@ const COMPONENT_NAME = 'Divider';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-divider';
 
 /**
  * Component default props.

package/src/components/drag-handle/DragHandle.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { mdiDragVertical } from '@lumx/icons';
 import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -22,7 +22,7 @@ const COMPONENT_NAME = 'DragHandle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-drag-handle';
 
 /**
  * DragHandle component.

package/src/components/dropdown/Dropdown.tsx

@@ -5,8 +5,7 @@ import classNames from 'classnames';
 import { List, ListProps } from '@lumx/react/components/list/List';
 import { Popover, PopoverProps } from '@lumx/react/components/popover/Popover';
 import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
-import { GenericProps, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { type GenericProps, isComponentType, type ComponentClassName } from '@lumx/react/utils/type';
 import { Offset, Placement } from '@lumx/react/components/popover/constants';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -91,7 +90,7 @@ const COMPONENT_NAME = 'Dropdown';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-dropdown';
 
 /**
  * Component default props.
@@ -140,7 +139,7 @@ export const Dropdown = forwardRef<DropdownProps, HTMLDivElement>((props, ref) =
     useInfiniteScroll(innerRef, onInfiniteScroll);
 
     const popperElement = useMemo(() => {
-        return !Array.isArray(children) && isComponent(List)(children)
+        return !Array.isArray(children) && isComponentType(List)(children)
             ? cloneElement<ListProps>(children, {
                   ...children.props,
                   ref: listElement,

package/src/components/expansion-panel/ExpansionPanel.tsx

@@ -5,8 +5,8 @@ import classNames from 'classnames';
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 
 import { ColorPalette, DragHandle, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { type GenericProps, type HasTheme, type ComponentClassName, isComponentType } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { partitionMulti } from '@lumx/react/utils/collection/partitionMulti';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 import { EXPANSION_PANEL_TRANSITION_DURATION } from '@lumx/core/js/constants';
@@ -45,16 +45,16 @@ const COMPONENT_NAME = 'ExpansionPanel';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-expansion-panel';
 
 /**
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<ExpansionPanelProps> = {};
 
-const isDragHandle = isComponent(DragHandle);
-const isHeader = isComponent('header');
-const isFooter = isComponent('footer');
+const isDragHandle = isComponentType(DragHandle);
+const isHeader = isComponentType('header');
+const isFooter = isComponentType('footer');
 
 /**
  * ExpansionPanel component.

package/src/components/flag/Flag.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { ColorPalette, Icon, Size, Theme, Text } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -20,7 +20,7 @@ export interface FlagProps extends GenericProps, HasTheme {
 }
 
 const COMPONENT_NAME = 'Flag';
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-flag';
 const DEFAULT_PROPS: Partial<FlagProps> = {};
 
 /**

package/src/components/flex-box/FlexBox.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { Alignment, Orientation } from '@lumx/react';
 import { castArray } from '@lumx/react/utils/collection/castArray';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { HorizontalAlignment, Size, VerticalAlignment } from '..';
 
@@ -49,7 +49,7 @@ const COMPONENT_NAME = 'FlexBox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-flex-box';
 
 /**
  * FlexBox component.

package/src/components/generic-block/GenericBlock.tsx

@@ -2,8 +2,7 @@ import React, { Children, ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, isComponentType } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { type ComponentClassName, type Comp, isComponentType } from '@lumx/react/utils/type';
 import { partitionMulti } from '@lumx/react/utils/collection/partitionMulti';
 import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
 import { GenericBlockGapSize } from '@lumx/react/components/generic-block/constants';
@@ -62,7 +61,7 @@ const COMPONENT_NAME = 'GenericBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-generic-block';
 
 /**
  * Component default props.

package/src/components/grid/Grid.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { Alignment, Orientation, Size } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;
@@ -33,7 +33,7 @@ const COMPONENT_NAME = 'Grid';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-grid';
 
 /**
  * Component default props.

package/src/components/grid/GridItem.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { Alignment } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
@@ -29,7 +29,7 @@ const COMPONENT_NAME = 'GridItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-grid-item';
 
 /**
  * GridItem component.

package/src/components/grid-column/GridColumn.tsx

@@ -3,8 +3,7 @@ import React, { ReactElement, ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { Size } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import type { GenericProps, ComponentClassName } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 export type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
@@ -33,7 +32,7 @@ const COMPONENT_NAME = 'GridColumn';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-grid-column';
 
 /**
  * Component default props.

package/src/components/heading/Heading.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { HeadingElement } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import type { HeadingElement, ComponentClassName } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { Text, TextProps } from '../text';
@@ -28,7 +27,7 @@ const COMPONENT_NAME = 'Heading';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-heading';
 
 /**
  * Component default props.

package/src/components/icon/Icon.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { mdiAlertCircle } from '@lumx/icons';
 import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
@@ -40,7 +40,7 @@ const COMPONENT_NAME = 'Icon';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-icon';
 
 /**
  * Component default props.

package/src/components/image-block/ImageBlock.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
 
-import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import type { GenericProps, HasTheme, ValueOf, ComponentClassName } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
@@ -56,7 +56,7 @@ const COMPONENT_NAME = 'ImageBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME: ComponentClassName<typeof COMPONENT_NAME> = 'lumx-image-block';
 
 /**
  * Component default props.