@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/components/skeleton/SkeletonCircle.stories.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { FlexBox, Orientation, Size, SkeletonCircle, ColorPalette } from '@lumx/react';
-
-export default { title: 'LumX components/skeleton/Skeleton Circle' };
-
-const sizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl] as const;
-const colors = Object.values(ColorPalette);
-
-export const Circle = ({ theme }: any) => (
-    <>
-        Sizes:
-        <FlexBox orientation={Orientation.horizontal}>
-            {sizes.map((size) => (
-                <SkeletonCircle theme={theme} key={size} size={size} className="lumx-spacing-margin" />
-            ))}
-        </FlexBox>
-        Colors:
-        <FlexBox orientation={Orientation.horizontal}>
-            {colors.map((color) => (
-                <SkeletonCircle theme={theme} size={Size.m} key={color} color={color} className="lumx-spacing-margin" />
-            ))}
-        </FlexBox>
-    </>
-);

package/dist/src/components/skeleton/SkeletonCircle.test.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
-
-import { SkeletonCircle, SkeletonCircleProps } from './SkeletonCircle';
-import * as stories from './SkeletonCircle.stories';
-
-const CLASSNAME = SkeletonCircle.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<SkeletonCircleProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<SkeletonCircle {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${SkeletonCircle.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, SkeletonCircle);
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

package/dist/src/components/skeleton/SkeletonCircle.tsx

@@ -1,52 +0,0 @@
-import classNames from 'classnames';
-import React, { forwardRef } from 'react';
-
-import { GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export interface SkeletonCircleProps extends GenericProps, HasTheme {
-    /** Size variant. */
-    size: GlobalSize;
-    /** The color of the skeleton. */
-    color?: ColorPalette;
-}
-
-const DEFAULT_PROPS: Partial<SkeletonCircleProps> = {
-    theme: Theme.light,
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SkeletonCircle';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * SkeletonCircle component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SkeletonCircle: Comp<SkeletonCircleProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, size, color, theme, ...forwardedProps } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, color, theme }))}
-        />
-    );
-});
-SkeletonCircle.displayName = COMPONENT_NAME;
-SkeletonCircle.defaultProps = DEFAULT_PROPS;
-SkeletonCircle.className = CLASSNAME;

package/dist/src/components/skeleton/SkeletonRectangle.stories.tsx

@@ -1,107 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import {
-    Alignment,
-    AspectRatio,
-    Button,
-    FlexBox,
-    Orientation,
-    Size,
-    SkeletonRectangle,
-    SkeletonRectangleVariant,
-    Thumbnail,
-    ColorPalette,
-} from '@lumx/react';
-import { imageKnob } from '@lumx/react/stories/knobs/image';
-
-export default { title: 'LumX components/skeleton/Skeleton Rectangle' };
-
-const variants = [
-    SkeletonRectangleVariant.squared,
-    SkeletonRectangleVariant.rounded,
-    SkeletonRectangleVariant.pill,
-] as const;
-const sizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl] as const;
-const aspectRatios = [AspectRatio.vertical, AspectRatio.square, AspectRatio.horizontal, AspectRatio.wide] as const;
-const colors = Object.values(ColorPalette);
-
-export const Rectangle = ({ theme }: any) => (
-    <>
-        Sizes:
-        <FlexBox orientation={Orientation.horizontal}>
-            {sizes.map((size) => (
-                <SkeletonRectangle
-                    key={size}
-                    className="lumx-spacing-margin"
-                    theme={theme}
-                    height={size}
-                    width={size}
-                />
-            ))}
-        </FlexBox>
-        Variants:
-        <FlexBox orientation={Orientation.horizontal}>
-            {variants.map((variant) => (
-                <SkeletonRectangle
-                    key={variant}
-                    className="lumx-spacing-margin"
-                    theme={theme}
-                    width={Size.xl}
-                    height={Size.m}
-                    variant={variant}
-                />
-            ))}
-        </FlexBox>
-        Ratios:
-        <FlexBox orientation={Orientation.horizontal} hAlign={Alignment.top}>
-            {aspectRatios.map((aspectRatio) => (
-                <SkeletonRectangle
-                    key={aspectRatio}
-                    className="lumx-spacing-margin"
-                    theme={theme}
-                    width={Size.xl}
-                    aspectRatio={aspectRatio}
-                />
-            ))}
-        </FlexBox>
-        Colors:
-        <FlexBox orientation={Orientation.horizontal} hAlign={Alignment.top}>
-            {colors.map((color) => (
-                <SkeletonRectangle
-                    key={color}
-                    className="lumx-spacing-margin"
-                    theme={theme}
-                    width={Size.xl}
-                    height={Size.m}
-                    color={color}
-                />
-            ))}
-        </FlexBox>
-    </>
-);
-
-export const LoadingThumbnail = ({ theme }: any) => {
-    const [loading, setLoading] = useState(true);
-    const fakeLoad = () => {
-        setLoading(true);
-        setTimeout(() => {
-            setLoading(false);
-        }, 2000);
-    };
-    useEffect(fakeLoad, []);
-    const size = Size.xl;
-
-    return (
-        <>
-            <Button onClick={fakeLoad}>Reload</Button> (fake 2sec loading)
-            <Thumbnail
-                image={imageKnob()}
-                alt="Image"
-                style={{ display: loading ? 'none' : undefined }}
-                aspectRatio={AspectRatio.square}
-                size={size}
-            />
-            {loading && <SkeletonRectangle theme={theme} width={size} aspectRatio={AspectRatio.square} />}
-        </>
-    );
-};

package/dist/src/components/skeleton/SkeletonRectangle.test.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
-
-import { SkeletonRectangle, SkeletonRectangleProps } from './SkeletonRectangle';
-import * as stories from './SkeletonRectangle.stories';
-
-const CLASSNAME = SkeletonRectangle.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<SkeletonRectangleProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<SkeletonRectangle {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${SkeletonRectangle.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, SkeletonRectangle);
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

package/dist/src/components/skeleton/SkeletonRectangle.tsx

@@ -1,78 +0,0 @@
-import classNames from 'classnames';
-import React, { forwardRef } from 'react';
-
-import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Skeleton variants.
- */
-export const SkeletonRectangleVariant = { squared: 'squared', rounded: 'rounded', pill: 'pill' } as const;
-export type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;
-
-/**
- * Defines the props of the component.
- */
-export interface SkeletonRectangleProps extends GenericProps, HasTheme {
-    /** Aspect ratio (use with width and not height). */
-    aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;
-    /** Height size. */
-    height?: GlobalSize;
-    /** Border variant. */
-    variant?: SkeletonRectangleVariant;
-    /** Width size. */
-    width?: GlobalSize;
-    /** The color of the skeleton. */
-    color?: ColorPalette;
-}
-
-const DEFAULT_PROPS: Partial<SkeletonRectangleProps> = {
-    theme: Theme.light,
-    variant: SkeletonRectangleVariant.squared,
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SkeletonRectangle';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * SkeletonRectangle component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SkeletonRectangle: Comp<SkeletonRectangleProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { aspectRatio, className, height, theme, variant, width, color, ...forwardedProps } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    aspectRatio,
-                    height: aspectRatio ? undefined : height,
-                    theme,
-                    variant,
-                    width,
-                    color,
-                }),
-            )}
-        >
-            <div className={`${CLASSNAME}__inner`} />
-        </div>
-    );
-});
-SkeletonRectangle.displayName = COMPONENT_NAME;
-SkeletonRectangle.className = CLASSNAME;
-SkeletonRectangle.defaultProps = DEFAULT_PROPS;

package/dist/src/components/skeleton/SkeletonTypography.stories.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import { SkeletonTypography, Typography, ColorPalette } from '@lumx/react';
-
-export default { title: 'LumX components/skeleton/Skeleton Typography' };
-
-const colors = Object.values(ColorPalette);
-
-export const TextTypography = ({ theme }: any) => (
-    <>
-        <SkeletonTypography
-            theme={theme}
-            typography={Typography.title}
-            width="30%"
-            className="lumx-spacing-margin-bottom"
-        />
-        <SkeletonTypography theme={theme} typography={Typography.body1} />
-        <SkeletonTypography theme={theme} typography={Typography.body1} />
-        <SkeletonTypography theme={theme} typography={Typography.body1} />
-        <SkeletonTypography theme={theme} typography={Typography.body1} width="70%" />
-        Colors:
-        {colors.map((color) => (
-            <SkeletonTypography key={color} color={color} theme={theme} typography={Typography.body1} />
-        ))}
-    </>
-);

package/dist/src/components/skeleton/SkeletonTypography.test.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
-
-import { SkeletonTypography, SkeletonTypographyProps } from './SkeletonTypography';
-import * as stories from './SkeletonTypography.stories';
-
-const CLASSNAME = SkeletonTypography.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<SkeletonTypographyProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<SkeletonTypography {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${SkeletonTypography.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, SkeletonTypography);
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

package/dist/src/components/skeleton/SkeletonTypography.tsx

@@ -1,57 +0,0 @@
-import classNames from 'classnames';
-import React, { CSSProperties, forwardRef } from 'react';
-
-import { Theme, TypographyInterface, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export interface SkeletonTypographyProps extends GenericProps, HasTheme {
-    /** Typography variant. */
-    typography: TypographyInterface;
-    /** Width CSS property. */
-    width?: CSSProperties['width'];
-    /** The color of the skeleton. */
-    color?: ColorPalette;
-}
-
-const DEFAULT_PROPS: Partial<SkeletonTypographyProps> = {
-    theme: Theme.light,
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SkeletonTypography';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * SkeletonTypography component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SkeletonTypography: Comp<SkeletonTypographyProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, typography, width, color, ...forwardedProps } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, typography, color }))}
-            style={{ ...forwardedProps.style, width }}
-        >
-            <div className={`${CLASSNAME}__inner`} />
-        </div>
-    );
-});
-SkeletonTypography.displayName = COMPONENT_NAME;
-SkeletonTypography.defaultProps = DEFAULT_PROPS;
-SkeletonTypography.className = CLASSNAME;

package/dist/src/components/skeleton/__snapshots__/SkeletonCircle.test.tsx.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SkeletonCircle> Snapshots and structure should render story 'Circle' 1`] = `
-[
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-xxs lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-xs lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-s lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-l lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-xl lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-xxl lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-primary lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-secondary lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-blue lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-dark lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-green lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-yellow lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-red lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-light lumx-skeleton-circle--theme-light"
-  />,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-circle lumx-skeleton-circle--size-m lumx-skeleton-circle--color-grey lumx-skeleton-circle--theme-light"
-  />,
-]
-`;

package/dist/src/components/skeleton/__snapshots__/SkeletonRectangle.test.tsx.snap

@@ -1,177 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SkeletonRectangle> Snapshots and structure should render story 'LoadingThumbnail' 1`] = `
-<div
-  className="lumx-skeleton-rectangle lumx-skeleton-rectangle--aspect-ratio-square lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
->
-  <div
-    className="lumx-skeleton-rectangle__inner"
-  />
-</div>
-`;
-
-exports[`<SkeletonRectangle> Snapshots and structure should render story 'Rectangle' 1`] = `
-[
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-xxs lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xxs"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-xs lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xs"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-s lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-s"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-m"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-l lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-l"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-xl lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-xxl lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xxl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-rounded lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-pill lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--aspect-ratio-vertical lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--aspect-ratio-square lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--aspect-ratio-horizontal lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--aspect-ratio-wide lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-primary"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-secondary"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-blue"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-dark"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-green"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-yellow"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-red"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-light"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-  <div
-    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--height-m lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl lumx-skeleton-rectangle--color-grey"
-  >
-    <div
-      className="lumx-skeleton-rectangle__inner"
-    />
-  </div>,
-]
-`;