@lumx/react 3.18.2-alpha.4 → 3.19.1-alpha.0

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

@@ -5,7 +5,7 @@ import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
 import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 
-import { Size } from '..';
+import { Size } from '@lumx/core/js/constants';
 import { LinkPreview, LinkPreviewProps } from './LinkPreview';
 
 export default {

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

@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import { Size, Theme } from '@lumx/core/js/constants';
 import { Thumbnail } from '@lumx/react';
 import { render, screen, within } from '@testing-library/react';
 import { getByClassName, queryByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
 
-import { Size, Theme } from '..';
 import { LinkPreview, LinkPreviewProps } from './LinkPreview';
 
 const CLASSNAME = LinkPreview.className as string;

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

@@ -15,7 +15,7 @@ import {
 } from '@lumx/react';
 
 import { GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/list/List.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Size } from '@lumx/react';
 import { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/list/ListDivider.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/list/ListItem.test.tsx

@@ -43,7 +43,7 @@ describe(`<${ListItem.displayName}>`, () => {
         it('should render disabled list item button', async () => {
             const onItemSelected = jest.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, onItemSelected });
-            expect(link).toHaveAttribute('aria-disabled', 'true');
+            expect(link).toBeDisabled();
             // The `renderLink` util removes the onClick handler but `user-event` will also not fire events on disabled elements.
             if (link) await userEvent.click(link);
             expect(onItemSelected).not.toHaveBeenCalled();
@@ -57,7 +57,6 @@ describe(`<${ListItem.displayName}>`, () => {
                 linkProps: { href: 'https://example.com' },
                 onItemSelected,
             });
-            expect(link).not.toHaveAttribute('href');
             expect(link).toHaveAttribute('aria-disabled', 'true');
             if (link) await userEvent.click(link);
             expect(onItemSelected).not.toHaveBeenCalled();
@@ -79,7 +78,6 @@ describe(`<${ListItem.displayName}>`, () => {
                 linkProps: { href: 'https://example.com' },
                 onItemSelected,
             });
-            expect(link).not.toHaveAttribute('href');
             expect(link).toHaveAttribute('aria-disabled', 'true');
             if (link) await userEvent.click(link);
             expect(onItemSelected).not.toHaveBeenCalled();

package/src/components/list/ListItem.tsx

@@ -1,16 +1,15 @@
-import React, { ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
+import React, { ReactNode, Ref, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { ListProps, Size } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/browser/event';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { renderLink } from '@lumx/react/utils/react/renderLink';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 
 export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
 
@@ -94,13 +93,6 @@ export const ListItem = forwardRef<ListItemProps, HTMLLIElement>((props, ref) =>
         ...forwardedProps
     } = otherProps;
 
-    const role = linkAs || linkProps.href ? 'link' : 'button';
-    const onKeyDown = useMemo(() => {
-        if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected as any);
-        if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected as any);
-        return undefined;
-    }, [role, onItemSelected]);
-
     const content = (
         <>
             {before && <div className={`${CLASSNAME}__before`}>{before}</div>}
@@ -123,28 +115,23 @@ export const ListItem = forwardRef<ListItemProps, HTMLLIElement>((props, ref) =>
         >
             {isClickable({ linkProps, onItemSelected }) ? (
                 /* Clickable list item */
-                renderLink(
-                    {
-                        linkAs,
-                        tabIndex: !disabledStateProps.disabled ? 0 : undefined,
-                        role,
-                        'aria-disabled': isAnyDisabled,
-                        ...linkProps,
-                        href: isAnyDisabled ? undefined : linkProps.href,
-                        className: classNames(
-                            handleBasicClasses({
-                                prefix: `${CLASSNAME}__link`,
-                                isHighlighted,
-                                isSelected,
-                                isDisabled: isAnyDisabled,
-                            }),
-                        ),
-                        onClick: isAnyDisabled ? undefined : onItemSelected,
-                        onKeyDown: isAnyDisabled ? undefined : onKeyDown,
-                        ref: linkRef,
-                    },
-                    content,
-                )
+                <RawClickable
+                    as={linkAs || linkProps.href ? 'a' : 'button'}
+                    {...linkProps}
+                    {...disabledStateProps}
+                    className={classNames(
+                        handleBasicClasses({
+                            prefix: `${CLASSNAME}__link`,
+                            isHighlighted,
+                            isSelected,
+                            isDisabled: isAnyDisabled,
+                        }),
+                    )}
+                    onClick={onItemSelected}
+                    ref={linkRef}
+                >
+                    {content}
+                </RawClickable>
             ) : (
                 /* Non clickable list item */
                 <div className={`${CLASSNAME}__wrapper`}>{content}</div>

package/src/components/list/ListSubheader.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/message/Message.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';
 import { ColorPalette, Emphasis, Icon, IconButton, Kind, Size } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/mosaic/Mosaic.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
 import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

package/src/components/navigation/Navigation.test.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { getAllByClassName, getByClassName } from '@lumx/react/testing/utils/queries';
+import { Orientation } from '@lumx/core/js/constants';
 import { Navigation, NavigationProps } from '.';
-import { Orientation } from '..';
 
 const CLASSNAME = Navigation.className as string;
 

package/src/components/navigation/Navigation.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { Orientation, Theme } from '@lumx/react';
 import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';

package/src/components/navigation/NavigationItem.tsx

@@ -1,11 +1,12 @@
 import React, { ElementType, ReactNode } from 'react';
 import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { ComponentRef, HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, HasTheme } from '@lumx/react/utils/type';
 import classNames from 'classnames';
 import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 
 type BaseNavigationItemProps = {
     /** Icon (SVG path). */
@@ -16,9 +17,6 @@ type BaseNavigationItemProps = {
     isCurrentPage?: boolean;
 };
 
-/** Make `href` required when `as` is `a` */
-type RequiredLinkHref<E> = E extends 'a' ? { href: string } : Record<string, unknown>;
-
 /**
  * Navigation item props
  */
@@ -26,7 +24,7 @@ export type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<
     HasTheme &
     HasClassName &
     BaseNavigationItemProps &
-    RequiredLinkHref<E>;
+    HasRequiredLinkHref<E>;
 
 /**
  * Component display name.
@@ -42,9 +40,7 @@ export const NavigationItem = Object.assign(
     forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {
         const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;
         const theme = useTheme();
-        const { tooltipLabel, labelRef } = useOverflowTooltipLabel();
-
-        const buttonProps = Element === 'button' ? { type: 'button' } : {};
+        const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);
 
         return (
             <li
@@ -57,14 +53,14 @@ export const NavigationItem = Object.assign(
                 )}
             >
                 <Tooltip label={tooltipLabel} placement={Placement.TOP}>
-                    <Element
+                    <RawClickable
+                        as={Element}
                         className={handleBasicClasses({
                             prefix: `${CLASSNAME}__link`,
                             isSelected: isCurrentPage,
                         })}
                         ref={ref as React.Ref<any>}
                         aria-current={isCurrentPage ? 'page' : undefined}
-                        {...buttonProps}
                         {...forwardedProps}
                     >
                         {icon ? (
@@ -74,7 +70,7 @@ export const NavigationItem = Object.assign(
                         <Text as="span" truncate className={`${CLASSNAME}__label`} ref={labelRef}>
                             {label}
                         </Text>
-                    </Element>
+                    </RawClickable>
                 </Tooltip>
             </li>
         );

package/src/components/navigation/NavigationSection.test.tsx

@@ -4,10 +4,11 @@ import { commonTestsSuiteRTL, RenderWrapper } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
+import { Orientation } from '@lumx/core/js/constants';
+
 import { NavigationItem } from './NavigationItem';
 import { NavigationSection, NavigationSectionProps } from './NavigationSection';
 import { NavigationContext } from './context';
-import { Orientation } from '..';
 
 const CLASSNAME = NavigationSection.className as string;
 

package/src/components/navigation/NavigationSection.tsx

@@ -3,12 +3,13 @@ import React, { useRef, useState, useContext } from 'react';
 import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';
 import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { HasClassName } from '@lumx/react/utils/type';
 import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
 import { NavigationContext } from './context';
 
@@ -52,7 +53,8 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
             )}
             ref={ref}
         >
-            <button
+            <RawClickable<'button'>
+                as="button"
                 {...forwardedProps}
                 aria-controls={sectionId}
                 aria-expanded={isOpen}
@@ -62,7 +64,6 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
                     setIsOpen(!isOpen);
                     event.stopPropagation();
                 }}
-                type="button"
             >
                 {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
 
@@ -73,7 +74,7 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
                     className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
                     icon={isOpen ? mdiChevronUp : mdiChevronDown}
                 />
-            </button>
+            </RawClickable>
             {isOpen &&
                 (isDropdown ? (
                     <Popover

package/src/components/navigation/context.tsx

@@ -1,5 +1,6 @@
 import { createContext } from 'react';
-import { Orientation } from '..';
+
+import { Orientation } from '@lumx/core/js/constants';
 
 export const NavigationContext = createContext<{ orientation?: Orientation } | undefined>({
     orientation: Orientation.vertical,

package/src/components/notification/Notification.tsx

@@ -7,7 +7,7 @@ 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 { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';

package/src/components/popover/Popover.tsx

@@ -7,7 +7,7 @@ import { useFocus } from '@lumx/react/hooks/useFocus';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { DOCUMENT } from '@lumx/react/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { skipRender } from '@lumx/react/utils/react/skipRender';

package/src/components/popover-dialog/PopoverDialog.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { HeadingLevelProvider } from '@lumx/react/components/heading';

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

@@ -5,7 +5,7 @@ import isObject from 'lodash/isObject';
 
 import { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/progress/Progress.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
 import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/progress/ProgressCircular.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Theme, Size } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

package/src/components/progress/ProgressLinear.tsx

@@ -4,7 +4,7 @@ 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 { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

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

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

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

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';
 import { Icon, InputHelper, InputLabel, Kind, Size } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';

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

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { GenericProps } from '@lumx/react/utils/type';
-import { handleBasicClasses } from '@lumx/react/utils/className';
+import { handleBasicClasses } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

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

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';

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

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 /**

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Theme } from '@lumx/react/components';
+import { Theme } from '@lumx/core/js/constants';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/select/Select.tsx

@@ -4,12 +4,12 @@ import classNames from 'classnames';
 import lodashIsEmpty from 'lodash/isEmpty';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-import { Emphasis, Size, Theme } from '@lumx/react/components';
+import { Emphasis, Size, Theme } from '@lumx/core/js/constants';
 import { IconButton } from '@lumx/react/components/button/IconButton';
 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 { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Theme } from '@lumx/react/components';
+import { Theme } from '@lumx/core/js/constants';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';

package/src/components/select/SelectMultiple.tsx

@@ -3,11 +3,11 @@ import React, { ReactNode, RefObject, SyntheticEvent } from 'react';
 import classNames from 'classnames';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiClose, mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-import { Size, Theme } from '@lumx/react/components';
+import { Size, Theme } from '@lumx/core/js/constants';
 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 { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';

package/src/components/select/WithSelectContext.tsx

@@ -2,12 +2,12 @@ import classNames from 'classnames';
 import React, { Ref, useCallback, useRef } from 'react';
 
 import { Placement } from '@lumx/react';
-import { Kind, Theme } from '@lumx/react/components';
+import { Kind, Theme } from '@lumx/core/js/constants';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { InputHelper } from '@lumx/react/components/input-helper/InputHelper';
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
 import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 
 import { useId } from '@lumx/react/hooks/useId';

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

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { SideNavigationItem, Theme } from '@lumx/react';
 import { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/react/utils/className';
+import { getRootClassName } from '@lumx/core/js/utils/className';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';