@lumx/react 3.0.2 → 3.0.3

package/src/components/heading/context.tsx

@@ -1,4 +1,4 @@
-import { HeadingElement } from '@lumx/react/utils';
+import { HeadingElement } from '@lumx/react/utils/type';
 import { createContext } from 'react';
 
 interface HeadingLevelContext {

package/src/components/icon/Icon.test.tsx

@@ -7,7 +7,7 @@ import { build, fake, oneOf } from 'test-data-bot';
 import { mdiCheck, mdiPlus } from '@lumx/icons';
 import { ColorPalette, ColorVariant, Size } from '@lumx/react';
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Icon, IconProps } from './Icon';
 

package/src/components/icon/Icon.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { Color, ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mdiAlertCircle } from '@lumx/icons';
 
 export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;

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

@@ -6,7 +6,8 @@ import isObject from 'lodash/isObject';
 
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ThumbnailProps } from '../thumbnail/Thumbnail';
 
 /**

package/src/components/index.ts

@@ -1,4 +1,4 @@
-import { ValueOf } from '@lumx/react/utils';
+import { ValueOf } from '@lumx/react/utils/type';
 
 /**
  * Alignments.

package/src/components/inline-list/InlineList.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { mdiEarth } from '@lumx/icons';
+import { ColorPalette, ColorVariant, Icon, Text, TypographyCustom, TypographyInterface } from '@lumx/react';
+import { withResizableBox } from '@lumx/react/stories/withResizableBox';
+import { InlineList } from '.';
+
+const ALL_TYPOGRAPHY = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
+
+export default {
+    title: 'LumX components/inline-list/InlineList',
+    argTypes: {
+        typography: { control: 'select', options: ALL_TYPOGRAPHY },
+        color: { control: 'select', options: ColorPalette },
+        colorVariant: { control: 'select', options: ColorVariant },
+    },
+};
+
+export const Default = (args: any) => (
+    <InlineList as="p" {...args}>
+        <span>Some text</span>
+        <span>Some other text</span>
+        <span>Some other other text</span>
+    </InlineList>
+);
+
+export const MixedNoWrapAndTruncate = (args: any) => (
+    <InlineList typography="body1" color="dark" colorVariant="L2" {...args} style={{ width: '100%' }}>
+        <Text as="span" truncate>
+            Very very very very very long text
+        </Text>
+        <Text as="span" noWrap>
+            <Icon icon={mdiEarth} />
+            Some text
+        </Text>
+        <Text as="span" truncate>
+            Very very very very very long text
+        </Text>
+    </InlineList>
+);
+MixedNoWrapAndTruncate.decorators = [withResizableBox({ width: 400 })];

package/src/components/inline-list/InlineList.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite } from '@lumx/react/testing/utils';
+import { InlineList, InlineListProps } from '.';
+
+const setup = (props: Partial<InlineListProps> = {}) => {
+    const wrapper = shallow(<InlineList {...props} />);
+    return { props, wrapper };
+};
+
+describe(`<${InlineList.displayName}>`, () => {
+    describe('Snapshots and structure', () => {
+        it('should render default', () => {
+            const { wrapper } = setup({ children: ['Some text', 'Some other text'] });
+            expect(wrapper).toHaveDisplayName('ul');
+            expect(wrapper.prop('className')).toBe(InlineList.className);
+            expect(wrapper.find('li')).toHaveLength(2);
+        });
+
+        it('should render with typography', () => {
+            const { wrapper } = setup({ typography: 'body2', children: 'Some text' });
+            expect(wrapper).toHaveClassName('lumx-typography-body2');
+        });
+
+        it('should render with color', () => {
+            const { wrapper } = setup({ color: 'blue', children: 'Some text' });
+            expect(wrapper).toHaveClassName('lumx-color-font-blue-N');
+        });
+
+        it('should render with color and variant', () => {
+            const { wrapper } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
+            expect(wrapper).toHaveClassName('lumx-color-font-blue-D2');
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: InlineList.className });
+});

package/src/components/inline-list/InlineList.tsx

@@ -0,0 +1,80 @@
+import React, { Children, forwardRef, isValidElement } from 'react';
+
+import classNames from 'classnames';
+
+import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getFontColorClassName, getRootClassName, getTypographyClassName } from '@lumx/react/utils/className';
+
+/**
+ * Defines the props of the component.
+ */
+export interface InlineListProps extends GenericProps {
+    /**
+     * Text color.
+     */
+    color?: ColorPalette;
+    /**
+     * Lightened or darkened variant of the selected color.
+     */
+    colorVariant?: ColorVariant;
+    /**
+     * Typography variant.
+     */
+    typography?: Typography;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'InlineList';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {} as const;
+
+/**
+ * InlineList component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const InlineList: Comp<InlineListProps> = forwardRef((props, ref) => {
+    const { className, color, colorVariant, typography, children, ...forwardedProps } = props;
+    const fontColorClassName = color && getFontColorClassName(color, colorVariant);
+    const typographyClassName = typography && getTypographyClassName(typography);
+    return (
+        // eslint-disable-next-line jsx-a11y/no-redundant-roles
+        <ul
+            {...forwardedProps}
+            ref={ref as any}
+            className={classNames(className, CLASSNAME, fontColorClassName, typographyClassName)}
+            // Lists with removed bullet style can lose their a11y list role on some browsers
+            role="list"
+        >
+            {Children.toArray(children).map((child, index) => {
+                const key = (isValidElement(child) && child.key) || index;
+                return (
+                    <li key={key} className={`${CLASSNAME}__item`}>
+                        {index !== 0 && (
+                            <span className={`${CLASSNAME}__item-separator`} aria-hidden="true">
+                                {'\u00A0•\u00A0'}
+                            </span>
+                        )}
+                        {child}
+                    </li>
+                );
+            })}
+        </ul>
+    );
+});
+InlineList.displayName = COMPONENT_NAME;
+InlineList.className = CLASSNAME;
+InlineList.defaultProps = DEFAULT_PROPS;

package/src/components/inline-list/index.ts

@@ -0,0 +1 @@
+export * from './InlineList';

package/src/components/input-helper/InputHelper.tsx

@@ -1,5 +1,6 @@
 import { Kind, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 

package/src/components/input-label/InputLabel.tsx

@@ -1,5 +1,6 @@
 import { Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 

package/src/components/lightbox/Lightbox.tsx

@@ -6,7 +6,8 @@ import { createPortal } from 'react-dom';
 import { mdiClose } from '@lumx/icons';
 import { ColorPalette, Emphasis, IconButton, IconButtonProps } from '@lumx/react';
 import { DOCUMENT } from '@lumx/react/constants';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';

package/src/components/link/Link.tsx

@@ -5,7 +5,8 @@ import isEmpty from 'lodash/isEmpty';
 import classNames from 'classnames';
 
 import { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;

package/src/components/link-preview/LinkPreview.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 import { Link, Thumbnail } from '@lumx/react';
 
 import { Size, Theme } from '..';

package/src/components/link-preview/LinkPreview.tsx

@@ -14,7 +14,8 @@ import {
     ThumbnailProps,
 } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HeadingElement, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/list/List.tsx

@@ -1,7 +1,8 @@
 import { Size } from '@lumx/react';
 
 import { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import classNames from 'classnames';

package/src/components/list/ListDivider.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/list/ListItem.tsx

@@ -4,14 +4,9 @@ import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { ListProps, Size } from '@lumx/react';
-import {
-    Comp,
-    GenericProps,
-    getRootClassName,
-    handleBasicClasses,
-    onEnterPressed,
-    onButtonPressed,
-} from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/event';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
 export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;

package/src/components/list/ListSubheader.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/list/useInteractiveList.tsx

@@ -1,7 +1,7 @@
 import { ListItemProps } from '@lumx/react';
 import { isClickable } from '@lumx/react/components/list/ListItem';
 
-import { isComponent } from '@lumx/react/utils';
+import { isComponent } from '@lumx/react/utils/type';
 import { flattenChildren } from '@lumx/react/utils/flattenChildren';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import get from 'lodash/get';

package/src/components/message/Message.test.tsx

@@ -1,6 +1,6 @@
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
 import { Kind } from '@lumx/react';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 import React, { ReactElement } from 'react';

package/src/components/message/Message.tsx

@@ -1,6 +1,7 @@
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
 import { ColorPalette, Icon, Kind, Size } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 

package/src/components/mosaic/Mosaic.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef, MouseEventHandler, useMemo } from 'react';
 
 import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
 import take from 'lodash/take';
 

package/src/components/notification/Notification.tsx

@@ -9,7 +9,8 @@ import { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';
 
 import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';
 import { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
 

package/src/components/popover/Popover.tsx

@@ -10,7 +10,8 @@ import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';

package/src/components/post-block/PostBlock.tsx

@@ -6,7 +6,8 @@ import isObject from 'lodash/isObject';
 
 import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/progress/Progress.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Progress variants.

package/src/components/progress-tracker/ProgressTracker.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
 import { useTabProviderContextState } from '../tabs/state';

package/src/components/progress-tracker/ProgressTrackerStep.test.tsx

@@ -1,5 +1,5 @@
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';

package/src/components/progress-tracker/ProgressTrackerStep.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 
 import { Icon, InputHelper, InputLabel, Kind, Size } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';
 import { useTabProviderContext } from '../tabs/state';

package/src/components/progress-tracker/ProgressTrackerStepPanel.tsx

@@ -1,6 +1,7 @@
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 
 import classNames from 'classnames';
 import React, { forwardRef } from 'react';

package/src/components/radio-button/RadioButton.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Theme } from '@lumx/react';
 import { RadioButton, RadioButtonProps } from './RadioButton';

package/src/components/radio-button/RadioButton.tsx

@@ -5,7 +5,8 @@ import { uid } from 'uid';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/radio-button/RadioGroup.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/select/Select.test.tsx

@@ -8,7 +8,7 @@ import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';

package/src/components/select/Select.tsx

@@ -11,7 +11,8 @@ import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 
-import { Comp, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';

package/src/components/select/SelectMultiple.test.tsx

@@ -10,7 +10,7 @@ import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { Icon } from '@lumx/react/components/icon/Icon';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 import { SelectMultiple, SelectMultipleProps } from './SelectMultiple';
 import { DEFAULT_PROPS } from './WithSelectContext';
 import { SelectVariant } from './constants';

package/src/components/select/SelectMultiple.tsx

@@ -9,7 +9,8 @@ import { Chip } from '@lumx/react/components/chip/Chip';
 import { Icon } from '@lumx/react/components/icon/Icon';
 import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 
-import { Comp, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';

package/src/components/select/WithSelectContext.tsx

@@ -8,7 +8,7 @@ import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { InputHelper } from '@lumx/react/components/input-helper/InputHelper';
 import { Placement } from '@lumx/react/components/popover/Popover';
 
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
 import { CoreSelectProps, SelectVariant } from './constants';

package/src/components/select/constants.ts

@@ -1,5 +1,5 @@
 import { IconButtonProps } from '@lumx/react';
-import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils';
+import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
 import { ReactNode, SyntheticEvent } from 'react';
 
 /**

package/src/components/side-navigation/SideNavigation.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 
 import { SideNavigationItem, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, isComponent } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/side-navigation/SideNavigationItem.test.tsx

@@ -5,7 +5,7 @@ import 'jest-enzyme';
 import without from 'lodash/without';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { mdiAccount } from '@lumx/icons';
 

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -7,15 +7,9 @@ import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
 
-import {
-    Callback,
-    Comp,
-    GenericProps,
-    getRootClassName,
-    handleBasicClasses,
-    isComponent,
-    onEnterPressed,
-} from '@lumx/react/utils';
+import { Callback, Comp, GenericProps, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { onEnterPressed } from '@lumx/react/utils/event';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
 /**

package/src/components/skeleton/SkeletonCircle.tsx

@@ -2,7 +2,8 @@ import classNames from 'classnames';
 import React, { forwardRef } from 'react';
 
 import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -2,7 +2,8 @@ import classNames from 'classnames';
 import React, { forwardRef } from 'react';
 
 import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Skeleton variants.

package/src/components/skeleton/SkeletonTypography.tsx

@@ -2,7 +2,8 @@ import classNames from 'classnames';
 import React, { CSSProperties, forwardRef } from 'react';
 
 import { Theme, TypographyInterface, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.