@lumx/react 3.6.7 → 3.6.8

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.7",
-        "@lumx/icons": "^3.6.7",
+        "@lumx/core": "^3.6.8",
+        "@lumx/icons": "^3.6.8",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -69,7 +69,7 @@
         "rollup-plugin-ts-paths-resolve": "^1.3.0",
         "rollup-plugin-typescript-paths": "^1.2.2",
         "storybook": "^7.6.3",
-        "typescript": "^4.1.2",
+        "typescript": "^5.4.3",
         "vite": "^4.2.1",
         "vite-tsconfig-paths": "^4.0.7",
         "yargs": "^15.4.1"
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.6.7"
+    "version": "3.6.8"
 }

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

@@ -78,18 +78,8 @@ const DEFAULT_PROPS: Partial<DialogProps> = {
  * Children of this component should only be strings, paragraphs or links.
  */
 export const AlertDialog: Comp<AlertDialogProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const {
-        id,
-        title,
-        className,
-        cancelProps,
-        confirmProps,
-        kind,
-        size,
-        dialogProps,
-        children,
-        ...forwardedProps
-    } = props;
+    const { id, title, className, cancelProps, confirmProps, kind, size, dialogProps, children, ...forwardedProps } =
+        props;
 
     const cancelButtonRef = React.useRef(null);
     const confirmationButtonRef = React.useRef(null);

package/src/components/autocomplete/Autocomplete.test.tsx

@@ -38,7 +38,7 @@ describe(`<${Autocomplete.displayName}>`, () => {
         it('should render default', () => {
             const { autocomplete, textField, getDropdown } = setup();
 
-            expect(autocomplete.className).toMatchInlineSnapshot(`"lumx-autocomplete"`);
+            expect(autocomplete.className).toMatchInlineSnapshot('"lumx-autocomplete"');
             expect(textField).toBeInTheDocument();
             expect(getDropdown()).not.toBeInTheDocument();
         });

package/src/components/autocomplete/AutocompleteMultiple.test.tsx

@@ -36,7 +36,7 @@ describe(`<${AutocompleteMultiple.displayName}>`, () => {
         const { autocompleteMultiple, textField, getDropdown } = setup({});
 
         expect(autocompleteMultiple).toBeInTheDocument();
-        expect(autocompleteMultiple.className).toMatchInlineSnapshot(`"lumx-autocomplete-multiple lumx-autocomplete"`);
+        expect(autocompleteMultiple.className).toMatchInlineSnapshot('"lumx-autocomplete-multiple lumx-autocomplete"');
         expect(textField).toBeInTheDocument();
         expect(getDropdown()).not.toBeInTheDocument();
     });

package/src/components/badge/Badge.test.tsx

@@ -26,7 +26,7 @@ describe(`<${Badge.displayName}>`, () => {
         it('should use default props', () => {
             const { badge } = setup();
 
-            expect(badge.className).toMatchInlineSnapshot(`"lumx-badge lumx-badge--color-primary"`);
+            expect(badge.className).toMatchInlineSnapshot('"lumx-badge lumx-badge--color-primary"');
             expect(badge).toHaveTextContent(/30/);
         });
 

package/src/components/button/Button.test.tsx

@@ -32,7 +32,7 @@ describe(`<${Button.displayName}>`, () => {
             expect(button).toBe(screen.queryByRole('button', { name: label }));
             expect(button).toHaveAttribute('type', 'button');
             expect(button.className).toMatchInlineSnapshot(
-                `"lumx-button lumx-button--color-primary lumx-button--emphasis-high lumx-button--size-m lumx-button--theme-light lumx-button--variant-button"`,
+                '"lumx-button lumx-button--color-primary lumx-button--emphasis-high lumx-button--size-m lumx-button--theme-light lumx-button--variant-button"',
             );
             expect(icons.length).toBe(0);
         });
@@ -53,7 +53,7 @@ describe(`<${Button.displayName}>`, () => {
         it('should render emphasis low', () => {
             const { button } = setup({ emphasis: Emphasis.low });
             expect(button.className).toMatchInlineSnapshot(
-                `"lumx-button lumx-button--color-dark lumx-button--emphasis-low lumx-button--size-m lumx-button--variant-button"`,
+                '"lumx-button lumx-button--color-dark lumx-button--emphasis-low lumx-button--size-m lumx-button--variant-button"',
             );
         });
 

package/src/components/button/IconButton.test.tsx

@@ -30,7 +30,7 @@ describe(`<${IconButton.displayName}>`, () => {
             const { iconButton, icon, img } = setup();
             expect(iconButton).toBeInTheDocument();
             expect(iconButton.className).toMatchInlineSnapshot(
-                `"lumx-button lumx-button--color-primary lumx-button--emphasis-high lumx-button--size-m lumx-button--theme-light lumx-button--variant-icon"`,
+                '"lumx-button lumx-button--color-primary lumx-button--emphasis-high lumx-button--size-m lumx-button--theme-light lumx-button--variant-icon"',
             );
 
             expect(icon).toBeInTheDocument();

package/src/components/chip/Chip.test.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
-import { ColorPalette, Theme } from '@lumx/react';
+import { Theme } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
 import { Chip, ChipProps } from './Chip';
@@ -33,7 +32,7 @@ describe('<Chip />', () => {
             expect(chip).toBeInTheDocument();
             expect(chip).toHaveTextContent('Chip text');
             expect(chip.className).toMatchInlineSnapshot(
-                `"lumx-chip lumx-chip--color-dark lumx-chip--size-m lumx-chip--is-unselected"`,
+                '"lumx-chip lumx-chip--color-dark lumx-chip--size-m lumx-chip--is-unselected"',
             );
         });
 
@@ -47,9 +46,27 @@ describe('<Chip />', () => {
             const { chip } = setup({ children: 'Chip text', onClick });
             expect(chip).toHaveAttribute('role', 'button');
             expect(chip.className).toMatchInlineSnapshot(
-                `"lumx-chip lumx-chip--is-clickable lumx-chip--color-dark lumx-chip--size-m lumx-chip--is-unselected"`,
+                '"lumx-chip lumx-chip--is-clickable lumx-chip--color-dark lumx-chip--size-m lumx-chip--is-unselected"',
             );
         });
+
+        it('should render a link', () => {
+            setup({ children: 'Chip text', href: 'https://google.com', target: '_blank' });
+            const chip = screen.getByRole('link', { name: 'Chip text' });
+            expect(chip).toHaveAttribute('href', 'https://google.com');
+            expect(chip).toHaveAttribute('target', '_blank');
+            expect(chip).toHaveAttribute('tabIndex', '0');
+        });
+
+        it('should override the role', () => {
+            setup({ children: 'Chip text', role: 'radio' });
+            expect(screen.getByRole('radio', { name: 'Chip text' })).toBeInTheDocument();
+        });
+
+        it('should override the tabIndex', () => {
+            const { chip } = setup({ children: 'Chip text', tabIndex: -1 });
+            expect(chip).toHaveAttribute('tabIndex', '-1');
+        });
     });
 
     describe('Events', () => {

package/src/components/chip/Chip.tsx

@@ -74,7 +74,7 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
         className,
         color,
         disabled,
-        isClickable,
+        isClickable: propIsClickable,
         isDisabled = disabled,
         isHighlighted,
         isSelected,
@@ -83,11 +83,14 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
         onClick,
         size,
         theme,
+        href,
         ...forwardedProps
     } = props;
     const hasAfterClick = isFunction(onAfterClick);
     const hasBeforeClick = isFunction(onBeforeClick);
     const hasOnClick = isFunction(onClick);
+    const isButton = hasOnClick && !href;
+    const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
 
     // Adapt color to the theme.
     const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
@@ -98,12 +101,15 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
     return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <a
+            role={isButton ? 'button' : undefined}
+            tabIndex={isClickable ? 0 : undefined}
             {...forwardedProps}
+            href={href}
             ref={ref}
             className={classNames(
                 className,
                 handleBasicClasses({
-                    clickable: Boolean(hasOnClick) || isClickable,
+                    clickable: isClickable,
                     color: chipColor,
                     isDisabled,
                     hasAfter: Boolean(after),
@@ -115,9 +121,7 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
                     unselected: Boolean(!isSelected),
                 }),
             )}
-            role={hasOnClick ? 'button' : undefined}
-            tabIndex={isDisabled || !hasOnClick ? -1 : 0}
-            aria-disabled={(hasOnClick && isDisabled) || undefined}
+            aria-disabled={(isClickable && isDisabled) || undefined}
             onClick={hasOnClick ? onClick : undefined}
             onKeyDown={hasOnClick ? onEnterPressed(onClick) : undefined}
         >

package/src/components/date-picker/DatePickerControlled.tsx

@@ -77,10 +77,11 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
 
     const monthYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
 
-    // Year can only be validatd by pressing Enter key or on Blur. The below handles the press Enter key case
-    const handleKeyPress: KeyboardEventHandler = React.useMemo(() => onEnterPressed(updateMonthOffset), [
-        updateMonthOffset,
-    ]);
+    // Year can only be validated by pressing Enter key or on Blur. The below handles the press Enter key case
+    const handleKeyPress: KeyboardEventHandler = React.useMemo(
+        () => onEnterPressed(updateMonthOffset),
+        [updateMonthOffset],
+    );
 
     // Required to update year in the TextField when the user changes year by using prev next month arrows
     React.useEffect(() => {

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

@@ -26,13 +26,13 @@ describe(`<${GenericBlock.displayName}>`, () => {
             const { genericBlock, content, figure, actions } = setup({ children: 'Content' });
             expect(genericBlock).toBeInTheDocument();
             expect(genericBlock.className).toMatchInlineSnapshot(
-                `"lumx-generic-block lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--gap-big"`,
+                '"lumx-generic-block lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--gap-big"',
             );
 
             expect(content).toBeInTheDocument();
             expect(content).toHaveTextContent('Content');
             expect(content?.className).toMatchInlineSnapshot(
-                `"lumx-generic-block__content lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--fill-space"`,
+                '"lumx-generic-block__content lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--fill-space"',
             );
 
             expect(figure).not.toBeInTheDocument();
@@ -49,16 +49,16 @@ describe(`<${GenericBlock.displayName}>`, () => {
             });
 
             expect(genericBlock?.className).toMatchInlineSnapshot(
-                `"lumx-generic-block lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom lumx-flex-box--gap-big"`,
+                '"lumx-generic-block lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom lumx-flex-box--gap-big"',
             );
             expect(figure?.className).toMatchInlineSnapshot(
-                `"lumx-generic-block__figure lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom"`,
+                '"lumx-generic-block__figure lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom"',
             );
             expect(content?.className).toMatchInlineSnapshot(
-                `"lumx-generic-block__content lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom lumx-flex-box--fill-space"`,
+                '"lumx-generic-block__content lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom lumx-flex-box--fill-space"',
             );
             expect(actions?.className).toMatchInlineSnapshot(
-                `"lumx-generic-block__actions lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom"`,
+                '"lumx-generic-block__actions lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom"',
             );
         });
 
@@ -75,7 +75,7 @@ describe(`<${GenericBlock.displayName}>`, () => {
 
             // Merged class names
             expect(figure?.className).toMatchInlineSnapshot(
-                `"figure1 figure2 lumx-generic-block__figure lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--fill-space"`,
+                '"figure1 figure2 lumx-generic-block__figure lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--fill-space"',
             );
             // Merged content
             expect(figure).toHaveTextContent('Figure 1Figure 2');
@@ -97,7 +97,7 @@ describe(`<${GenericBlock.displayName}>`, () => {
 
             // Merged class names
             expect(content?.className).toMatchInlineSnapshot(
-                `"content1 content2 lumx-generic-block__content lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-left lumx-flex-box--fill-space"`,
+                '"content1 content2 lumx-generic-block__content lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-left lumx-flex-box--fill-space"',
             );
             // Merged content
             expect(content).toHaveTextContent('Content 2Content 1');
@@ -119,7 +119,7 @@ describe(`<${GenericBlock.displayName}>`, () => {
 
             // Merged class names
             expect(actions?.className).toMatchInlineSnapshot(
-                `"actions1 actions2 lumx-generic-block__actions lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--fill-space"`,
+                '"actions1 actions2 lumx-generic-block__actions lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--fill-space"',
             );
             // Merged content
             expect(actions).toHaveTextContent('Actions 1Actions 2');

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

@@ -50,41 +50,39 @@ const DEFAULT_PROPS: Partial<GridColumnProps> = {};
  * @param ref Component ref.
  * @return React element.
  */
-export const GridColumn: Comp<GridColumnProps> = forwardRef(
-    (props, ref): ReactElement => {
-        const {
-            as: Component = 'div',
-            gap,
-            maxColumns,
-            itemMinWidth,
-            children,
-            className,
-            style = {},
-            ...forwardedProps
-        } = props;
+export const GridColumn: Comp<GridColumnProps> = forwardRef((props, ref): ReactElement => {
+    const {
+        as: Component = 'div',
+        gap,
+        maxColumns,
+        itemMinWidth,
+        children,
+        className,
+        style = {},
+        ...forwardedProps
+    } = props;
 
-        return (
-            <Component
-                {...forwardedProps}
-                ref={ref as React.Ref<any>}
-                className={classNames(
-                    className,
-                    handleBasicClasses({
-                        prefix: CLASSNAME,
-                    }),
-                )}
-                style={{
-                    ...style,
-                    ['--lumx-grid-column-item-min-width' as any]: isInteger(itemMinWidth) && `${itemMinWidth}px`,
-                    ['--lumx-grid-column-columns' as any]: maxColumns,
-                    ['--lumx-grid-column-gap' as any]: gap && `var(--lumx-spacing-unit-${gap})`,
-                }}
-            >
-                {children}
-            </Component>
-        );
-    },
-);
+    return (
+        <Component
+            {...forwardedProps}
+            ref={ref as React.Ref<any>}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                }),
+            )}
+            style={{
+                ...style,
+                ['--lumx-grid-column-item-min-width' as any]: isInteger(itemMinWidth) && `${itemMinWidth}px`,
+                ['--lumx-grid-column-columns' as any]: maxColumns,
+                ['--lumx-grid-column-gap' as any]: gap && `var(--lumx-spacing-unit-${gap})`,
+            }}
+        >
+            {children}
+        </Component>
+    );
+});
 GridColumn.displayName = COMPONENT_NAME;
 GridColumn.className = CLASSNAME;
 GridColumn.defaultProps = DEFAULT_PROPS;

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

@@ -35,7 +35,7 @@ describe(`<${Icon.displayName}>`, () => {
 
             expect(i).toBeInTheDocument();
             expect(i).toHaveClass(CLASSNAME);
-            expect(i?.className).toMatchInlineSnapshot(`"lumx-icon lumx-icon--no-shape lumx-icon--path"`);
+            expect(i?.className).toMatchInlineSnapshot('"lumx-icon lumx-icon--no-shape lumx-icon--path"');
 
             expect(svg).toBeInTheDocument();
             expect(svg).toHaveAttribute('aria-hidden', 'true');

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

@@ -28,7 +28,7 @@ describe(`<${InputHelper.displayName}>`, () => {
             const { props, helper } = setup({ children: 'helper text' });
 
             expect(helper).toHaveTextContent(props.children);
-            expect(helper.className).toMatchInlineSnapshot(`"lumx-input-helper lumx-input-helper--theme-light"`);
+            expect(helper.className).toMatchInlineSnapshot('"lumx-input-helper lumx-input-helper--theme-light"');
         });
 
         it('should render dark theme', () => {

package/src/components/link/Link.test.tsx

@@ -30,7 +30,7 @@ describe(`<${Link.displayName}>`, () => {
 
             expect(link).toBe(screen.queryByRole('link', { name }));
             expect(link).toHaveAttribute('href', props.href);
-            expect(link.className).toMatchInlineSnapshot(`"lumx-link"`);
+            expect(link.className).toMatchInlineSnapshot('"lumx-link"');
 
             expect(rightIcon).not.toBeInTheDocument();
             expect(leftIcon).not.toBeInTheDocument();
@@ -43,13 +43,13 @@ describe(`<${Link.displayName}>`, () => {
                 colorVariant: ColorVariant.D1,
             });
             expect(link.className).toMatchInlineSnapshot(
-                `"lumx-link lumx-link--color-primary lumx-link--color-variant-D1"`,
+                '"lumx-link lumx-link--color-primary lumx-link--color-variant-D1"',
             );
         });
 
         it('should render typography', () => {
             const { content } = setup({ href: 'https://google.com', typography: Typography.title });
-            expect(content?.className).toMatchInlineSnapshot(`undefined`);
+            expect(content?.className).toMatchInlineSnapshot('undefined');
         });
 
         it('should render a button', () => {

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

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-import { Link, Thumbnail } from '@lumx/react';
+import { Thumbnail } from '@lumx/react';
 import { render, screen, within } from '@testing-library/react';
 import { getByClassName, queryByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
 

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

@@ -30,7 +30,7 @@ describe(`<${Message.displayName}>`, () => {
         it('should render default', () => {
             const { message, icon } = setup({ children: 'Message text' });
             expect(message).toBeInTheDocument();
-            expect(message.className).toMatchInlineSnapshot(`"lumx-message"`);
+            expect(message.className).toMatchInlineSnapshot('"lumx-message"');
             expect(message).toHaveTextContent('Message text');
 
             expect(icon).not.toBeInTheDocument();

package/src/components/mosaic/Mosaic.tsx

@@ -45,10 +45,11 @@ export const Mosaic: Comp<MosaicProps, HTMLDivElement> = forwardRef((props, ref)
     const handleImageClick = useMemo(() => {
         if (!onImageClick) return undefined;
 
-        return (index: number, onClick?: MouseEventHandler): MouseEventHandler => (event) => {
-            onClick?.(event);
-            onImageClick?.(index);
-        };
+        return (index: number, onClick?: MouseEventHandler): MouseEventHandler =>
+            (event) => {
+                onClick?.(event);
+                onImageClick?.(index);
+            };
     }, [onImageClick]);
 
     return (

package/src/components/popover/Popover.tsx

@@ -127,26 +127,19 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
     } = props;
     const popoverRef = useRef<HTMLDivElement>(null);
 
-    const {
-        styles,
-        attributes,
-        isPositioned,
-        position,
-        setArrowElement,
-        setPopperElement,
-        popperElement,
-    } = usePopoverStyle({
-        offset,
-        hasArrow,
-        fitToAnchorWidth,
-        fitWithinViewportHeight,
-        boundaryRef,
-        anchorRef,
-        children,
-        placement,
-        style,
-        zIndex,
-    });
+    const { styles, attributes, isPositioned, position, setArrowElement, setPopperElement, popperElement } =
+        usePopoverStyle({
+            offset,
+            hasArrow,
+            fitToAnchorWidth,
+            fitWithinViewportHeight,
+            boundaryRef,
+            anchorRef,
+            children,
+            placement,
+            style,
+            zIndex,
+        });
 
     const unmountSentinel = useRestoreFocusOnClose({ focusAnchorOnClose, anchorRef, parentElement }, popperElement);
     const focusZoneElement = focusTrapZoneElement?.current || popoverRef?.current;

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

@@ -42,7 +42,7 @@ describe(`<${Select.displayName}>`, () => {
             const { select, getDropdown } = setup();
             expect(getDropdown()).not.toBeInTheDocument();
             expect(select.className).toMatchInlineSnapshot(
-                `"lumx-select lumx-select--has-unique lumx-select lumx-select--is-empty lumx-select--theme-light"`,
+                '"lumx-select lumx-select--has-unique lumx-select lumx-select--is-empty lumx-select--theme-light"',
             );
         });
 
@@ -120,7 +120,7 @@ describe(`<${Select.displayName}>`, () => {
                 expect(inputWrapper).not.toBeInTheDocument();
                 expect(chip).toBeInTheDocument();
                 expect(select.className).toMatchInlineSnapshot(
-                    `"lumx-select lumx-select--has-unique lumx-select lumx-select--is-empty lumx-select--theme-light"`,
+                    '"lumx-select lumx-select--has-unique lumx-select lumx-select--is-empty lumx-select--theme-light"',
                 );
             });
 
@@ -128,7 +128,7 @@ describe(`<${Select.displayName}>`, () => {
                 const { select, chip, props } = setup({ variant: SelectVariant.chip, value: 'val1' });
                 expect(chip).toHaveTextContent(props.value);
                 expect(select.className).toMatchInlineSnapshot(
-                    `"lumx-select lumx-select--has-unique lumx-select lumx-select--has-value lumx-select--theme-light"`,
+                    '"lumx-select lumx-select--has-unique lumx-select lumx-select--has-value lumx-select--theme-light"',
                 );
             });