@lumx/react 3.21.1 → 3.21.2-alpha.1

package/src/hooks/useTransitionVisibility.ts

@@ -1,48 +0,0 @@
-import { RefObject, useEffect, useRef, useState } from 'react';
-import { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';
-
-/**
- * Returns true if the component is visible tracking the opacity transition.
- *
- * @param ref Element on which to listen the transition event.
- * @param isComponentVisible Whether the component intends to be visible or not.
- * @param onVisibilityChange Callback called when the visibility changes.
- * @return true if the component should be rendered
- */
-export const useTransitionVisibility = (
-    ref: RefObject<HTMLElement>,
-    isComponentVisible: boolean,
-    timeout: number,
-    onVisibilityChange?: (isVisible: boolean) => void,
-) => {
-    const [isVisible, setVisible] = useState(isComponentVisible);
-    const previousVisibility = useRef(isVisible);
-
-    // On component visibility change.
-    useEffect(() => {
-        if (isComponentVisible) {
-            setVisible(true);
-            return undefined;
-        }
-        const { current: element } = ref;
-
-        // Transition event is not supported or the user prefers reduced motion.
-        // => Skip and set visibility to false directly.
-        if (!element || !window.TransitionEvent || isReducedMotion()) {
-            setVisible(false);
-            return undefined;
-        }
-
-        const timer = setTimeout(() => setVisible(false), timeout);
-        return () => clearTimeout(timer);
-    }, [isComponentVisible, ref, timeout]);
-
-    useEffect(() => {
-        if (onVisibilityChange && previousVisibility.current !== isVisible) {
-            onVisibilityChange(isVisible);
-            previousVisibility.current = isVisible;
-        }
-    }, [isVisible, onVisibilityChange]);
-
-    return isVisible || isComponentVisible;
-};

package/src/index.ts

@@ -1,63 +0,0 @@
-/**
- * Components listed here will be exposed to NPM in '@lumx/react'.
- */
-
-export * from '@lumx/core/js/constants';
-export * from '@lumx/core/js/types';
-
-export * from './components/alert-dialog';
-export * from './components/autocomplete';
-export * from './components/avatar';
-export * from './components/badge';
-export * from './components/button';
-export * from './components/checkbox';
-export * from './components/chip';
-export * from './components/comment-block';
-export * from './components/date-picker';
-export * from './components/dialog';
-export * from './components/divider';
-export * from './components/drag-handle';
-export * from './components/dropdown';
-export * from './components/expansion-panel';
-export * from './components/flag';
-export * from './components/flex-box';
-export * from './components/generic-block';
-export * from './components/heading';
-export * from './components/grid';
-export * from './components/grid-column';
-export * from './components/icon';
-export * from './components/image-block';
-export * from './components/image-lightbox';
-export * from './components/inline-list';
-export * from './components/input-helper';
-export * from './components/input-label';
-export * from './components/lightbox';
-export * from './components/link';
-export * from './components/link-preview';
-export * from './components/list';
-export * from './components/message';
-export * from './components/mosaic';
-export * from './components/navigation';
-export * from './components/notification';
-export * from './components/popover';
-export * from './components/popover-dialog';
-export * from './components/post-block';
-export * from './components/progress';
-export * from './components/progress-tracker';
-export * from './components/radio-button';
-export * from './components/select';
-export * from './components/side-navigation';
-export * from './components/skeleton';
-export * from './components/slider';
-export * from './components/slideshow';
-export * from './components/switch';
-export * from './components/table';
-export * from './components/tabs';
-export * from './components/text';
-export * from './components/text-field';
-export * from './components/thumbnail';
-export * from './components/toolbar';
-export * from './components/tooltip';
-export * from './components/uploader';
-export * from './components/user-block';
-export { ThemeProvider, useTheme } from './utils/theme/ThemeContext';

package/src/stories/controls/color.ts

@@ -1,7 +0,0 @@
-import { ColorPalette, ColorVariant } from '@lumx/react';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-
-export const ALL_COLORS = Object.values(ColorPalette);
-export const colorArgType = getSelectArgType(withUndefined(ALL_COLORS));
-export const colorVariantArgType = getSelectArgType(ColorVariant);

package/src/stories/controls/element.ts

@@ -1,6 +0,0 @@
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { HeadingElement, TextElement } from '@lumx/react';
-
-export const HEADING_ELEMENTS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as HeadingElement[];
-export const headingElementArgType = getSelectArgType<HeadingElement>(HEADING_ELEMENTS);
-export const textElementArgType = getSelectArgType<TextElement>(['p', 'span', ...HEADING_ELEMENTS]);

package/src/stories/controls/focusPoint.ts

@@ -1 +0,0 @@
-export const focusPoint = { control: { type: 'range', min: -1, max: 1, step: 0.01 } };

package/src/stories/controls/icons.ts

@@ -1,126 +0,0 @@
-import {
-    mdiAbTesting,
-    mdiAbjadArabic,
-    mdiAccount,
-    mdiAccountBox,
-    mdiAlert,
-    mdiAlertCircle,
-    mdiArrowDown,
-    mdiArrowUp,
-    mdiAtom,
-    mdiBee,
-    mdiBell,
-    mdiBullhornOutline,
-    mdiCheck,
-    mdiCheckCircle,
-    mdiChevronDown,
-    mdiChevronLeft,
-    mdiChevronRight,
-    mdiChevronUp,
-    mdiClose,
-    mdiCloseCircle,
-    mdiDelete,
-    mdiDotsHorizontal,
-    mdiDragVertical,
-    mdiEarth,
-    mdiEmail,
-    mdiEye,
-    mdiFileEdit,
-    mdiFlag,
-    mdiFolder,
-    mdiFolderGoogleDrive,
-    mdiFoodApple,
-    mdiGoogleCirclesExtended,
-    mdiHeart,
-    mdiHome,
-    mdiImageBroken,
-    mdiInformation,
-    mdiLink,
-    mdiMagnifyMinusOutline,
-    mdiMagnifyPlusOutline,
-    mdiMenuDown,
-    mdiMessageTextOutline,
-    mdiMinus,
-    mdiOpenInNew,
-    mdiPauseCircleOutline,
-    mdiPencil,
-    mdiPlay,
-    mdiPlayCircleOutline,
-    mdiPlus,
-    mdiRadioboxBlank,
-    mdiRadioboxMarked,
-    mdiReply,
-    mdiSend,
-    mdiStar,
-    mdiTextBox,
-    mdiTextBoxPlus,
-    mdiTram,
-    mdiTranslate,
-    mdiViewList,
-} from '@lumx/icons';
-
-// Small selection of mdi icons to
-export const iconArgType = {
-    control: { type: 'select' },
-    options: {
-        undefined,
-        mdiAbTesting,
-        mdiAbjadArabic,
-        mdiAccount,
-        mdiAccountBox,
-        mdiAlert,
-        mdiAlertCircle,
-        mdiArrowDown,
-        mdiArrowUp,
-        mdiAtom,
-        mdiBee,
-        mdiBell,
-        mdiBullhornOutline,
-        mdiCheck,
-        mdiCheckCircle,
-        mdiChevronDown,
-        mdiChevronLeft,
-        mdiChevronRight,
-        mdiChevronUp,
-        mdiClose,
-        mdiCloseCircle,
-        mdiDelete,
-        mdiDotsHorizontal,
-        mdiDragVertical,
-        mdiEarth,
-        mdiEmail,
-        mdiEye,
-        mdiFileEdit,
-        mdiFlag,
-        mdiFolder,
-        mdiFolderGoogleDrive,
-        mdiFoodApple,
-        mdiGoogleCirclesExtended,
-        mdiHeart,
-        mdiHome,
-        mdiImageBroken,
-        mdiInformation,
-        mdiLink,
-        mdiMagnifyMinusOutline,
-        mdiMagnifyPlusOutline,
-        mdiMenuDown,
-        mdiMessageTextOutline,
-        mdiMinus,
-        mdiOpenInNew,
-        mdiPauseCircleOutline,
-        mdiPencil,
-        mdiPlay,
-        mdiPlayCircleOutline,
-        mdiPlus,
-        mdiRadioboxBlank,
-        mdiRadioboxMarked,
-        mdiReply,
-        mdiSend,
-        mdiStar,
-        mdiTextBox,
-        mdiTextBoxPlus,
-        mdiTram,
-        mdiTranslate,
-        mdiViewList,
-    },
-};

package/src/stories/controls/image.ts

@@ -1,84 +0,0 @@
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-
-const avatar1 = '/demo-assets/avatar1.jpg';
-const avatar2 = '/demo-assets/avatar2.jpg';
-const avatar3 = '/demo-assets/avatar3.jpg';
-const avatar4 = '/demo-assets/avatar4.jpg';
-const landscape1 = '/demo-assets/landscape1.jpg';
-const landscape2 = '/demo-assets/landscape2.jpg';
-const landscape1s200 = '/demo-assets/landscape1-s200.jpg';
-const landscape3 = '/demo-assets/landscape3.jpg';
-const portrait1 = '/demo-assets/portrait1.jpg';
-const portrait1s200 = '/demo-assets/portrait1-s200.jpg';
-const portrait2 = '/demo-assets/portrait2.jpg';
-const portrait3 = '/demo-assets/portrait3.jpg';
-const square1 = '/demo-assets/square1.jpg';
-const square2 = '/demo-assets/square2.jpg';
-const defaultSvg = '/demo-assets/defaultSvg.svg';
-const emptyImage = '';
-
-export const AVATAR_IMAGES = { avatar1, avatar2, avatar3, avatar4 };
-export const SQUARE_IMAGES = { square1, square2 };
-export const SVG_IMAGES = { defaultSvg };
-export const EMPTY_IMAGES = { emptyImage };
-export const LANDSCAPE_IMAGES = { landscape1, landscape1s200, landscape2, landscape3 };
-export const LANDSCAPE_IMAGES_ALT: { [key in keyof typeof LANDSCAPE_IMAGES]: string } = {
-    landscape1: 'A majestic snowy mountain range with a peak covered in glistening snow',
-    landscape1s200: 'A majestic snowy mountain range with a peak covered in glistening snow',
-    landscape2: 'A colorful rack of shirts displaying various hues and styles',
-    landscape3: 'An open book resting on a table, ready to be explored and read',
-};
-export const PORTRAIT_IMAGES = { portrait1, portrait1s200, portrait2, portrait3 };
-export const IMAGES = {
-    ...LANDSCAPE_IMAGES,
-    ...PORTRAIT_IMAGES,
-    ...SQUARE_IMAGES,
-    ...AVATAR_IMAGES,
-    ...SVG_IMAGES,
-    ...EMPTY_IMAGES,
-};
-
-export const avatarImageArgType = getSelectArgType(AVATAR_IMAGES);
-export const squareImageArgType = getSelectArgType(SQUARE_IMAGES);
-export const landscapeImageArgType = getSelectArgType(LANDSCAPE_IMAGES);
-export const portraitImageArgType = getSelectArgType(PORTRAIT_IMAGES);
-export const imageArgType = getSelectArgType(IMAGES);
-
-type Size = { width: number; height: number };
-
-export const AVATAR_IMAGE_SIZES: Record<keyof typeof AVATAR_IMAGES, Size> = {
-    avatar1: { width: 128, height: 128 },
-    avatar2: { width: 150, height: 150 },
-    avatar3: { width: 128, height: 128 },
-    avatar4: { width: 128, height: 128 },
-};
-export const SQUARE_IMAGE_SIZES: Record<keyof typeof SQUARE_IMAGES, Size> = {
-    square1: { width: 72, height: 72 },
-    square2: { width: 300, height: 300 },
-};
-export const LANDSCAPE_IMAGE_SIZES: Record<keyof typeof LANDSCAPE_IMAGES, Size> = {
-    landscape1: { width: 800, height: 546 },
-    landscape1s200: { width: 200, height: 150 },
-    landscape2: { width: 800, height: 600 },
-    landscape3: { width: 640, height: 480 },
-};
-export const PORTRAIT_IMAGE_SIZES: Record<keyof typeof PORTRAIT_IMAGES, Size> = {
-    portrait1: { width: 275, height: 500 },
-    portrait1s200: { width: 200, height: 364 },
-    portrait2: { width: 350, height: 500 },
-    portrait3: { width: 300, height: 500 },
-};
-export const SVG_IMAGE_SIZES: Record<keyof typeof SVG_IMAGES, Size> = {
-    defaultSvg: { width: 0, height: 0 },
-};
-export const EMPTY_IMAGES_SIZES: Record<keyof typeof EMPTY_IMAGES, Size> = {
-    emptyImage: { width: 0, height: 0 },
-};
-export const IMAGE_SIZES: Record<keyof typeof IMAGES, Size> = {
-    ...LANDSCAPE_IMAGE_SIZES,
-    ...PORTRAIT_IMAGE_SIZES,
-    ...SQUARE_IMAGE_SIZES,
-    ...AVATAR_IMAGE_SIZES,
-    ...SVG_IMAGE_SIZES,
-    ...EMPTY_IMAGES_SIZES,
-};

package/src/stories/controls/selectArgType.ts

@@ -1,8 +0,0 @@
-export const getSelectArgType = <E>(
-    options: Array<E> | Record<string, E>,
-    type: 'select' | 'inline-radio' = 'inline-radio',
-) => ({
-    control: { type },
-    options: Object.values(options),
-    mapping: !Array.isArray(options) ? options : undefined,
-});

package/src/stories/controls/theme.ts

@@ -1,3 +0,0 @@
-import { Theme } from '@lumx/react';
-
-export const themeArgType = { control: 'inline-radio', options: Theme };

package/src/stories/controls/typography.ts

@@ -1,5 +0,0 @@
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { TypographyCustom, TypographyInterface } from '@lumx/react';
-
-export const ALL_TYPOGRAPHY = [...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
-export const allTypographyArgType = getSelectArgType(ALL_TYPOGRAPHY);

package/src/stories/controls/withUndefined.ts

@@ -1 +0,0 @@
-export const withUndefined = <E>(options: Array<E> | Record<string, E>) => [undefined, ...Object.values(options)];

package/src/stories/decorators/withChromaticForceScreenSize.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import isChromatic from 'chromatic/isChromatic';
-
-/** Story decorator used to force a minimum screen size when running in chromatic */
-export const withChromaticForceScreenSize = () => {
-    // eslint-disable-next-line react/display-name
-    return (story: any) => (isChromatic() ? <div style={{ minWidth: 1200, minHeight: 800 }}>{story()}</div> : story());
-};

package/src/stories/decorators/withCombinations.tsx

@@ -1,132 +0,0 @@
-/* eslint-disable react/display-name,jsx-a11y/control-has-associated-label,prefer-object-spread */
-import React from 'react';
-import isEmpty from 'lodash/isEmpty';
-import { Heading, HeadingLevelProvider } from '@lumx/react';
-
-type PropEntry = [key: string, value: unknown];
-type PropCombination = Record<string, Record<string, unknown>>;
-type PropArrayCombination = { key: string; options: Array<any> };
-type Combination = PropArrayCombination | PropCombination;
-
-const toProps = <E,>(arr: Array<E>, prop: string): PropEntry[] =>
-    arr.map((value) => [String(value), { [prop]: value }]);
-
-const isArrayConfig = (c?: Combination): c is PropArrayCombination => !!c?.key;
-
-function toPropEntries(config?: Combination): PropEntry[] {
-    if (isEmpty(config)) return [['', {}]];
-    if (isArrayConfig(config)) return toProps(config.options, config.key);
-    return Object.entries(config as PropCombination);
-}
-
-type Options = {
-    /** Props combinations */
-    combinations: {
-        rows?: Combination;
-        cols?: Combination;
-        sections?: Combination;
-    };
-    /** Inject style on table */
-    tableStyle?: React.CSSProperties;
-    /** Inject style on first col */
-    firstColStyle?: React.CSSProperties;
-    /** Inject style on sections */
-    sectionStyle?: React.CSSProperties;
-    /** Inject style on cols */
-    colStyle?: React.CSSProperties;
-    /** Inject style on cells */
-    cellStyle?: React.CSSProperties;
-    /** Combinator function */
-    combinator?: (a: any, b: any) => any;
-    /** Exclude a combination */
-    excludeCombination?: (args: any) => boolean;
-};
-
-/**
- * SB decorator generating a tables of combination of props (max 3 levels of props)
- */
-export const withCombinations =
-    ({
-        combinations,
-        tableStyle,
-        firstColStyle,
-        cellStyle,
-        colStyle,
-        sectionStyle,
-        combinator = Object.assign,
-        excludeCombination,
-    }: Options) =>
-    (Story: any, ctx: any) => {
-        const rows = toPropEntries(combinations.rows);
-        const cols = toPropEntries(combinations.cols);
-        const sections = toPropEntries(combinations.sections);
-        const hasRows = rows.length > 1;
-        const hasCols = cols.length > 1;
-
-        return (
-            <>
-                {sections.map(([level2Key, level2Value]) => {
-                    const sectionArgs = combinator({ ...ctx.args }, level2Value);
-                    const sectionCols = cols
-                        .map(([level1Key, level1Value]) => {
-                            const args = combinator({ ...sectionArgs }, level1Value);
-                            if (excludeCombination?.(args)) return null;
-                            return [level1Key, args];
-                        })
-                        .filter(Boolean) as Array<[string, any]>;
-                    return (
-                        <section key={level2Key} style={sectionStyle}>
-                            <HeadingLevelProvider>
-                                {level2Key && <Heading style={{ textTransform: 'capitalize' }}>{level2Key}</Heading>}
-
-                                {hasRows || hasCols ? (
-                                    <table style={{ ...tableStyle, borderCollapse: 'separate', borderSpacing: 8 }}>
-                                        {combinations.cols && (
-                                            <thead>
-                                                <tr>
-                                                    {hasRows && <th aria-hidden />}
-                                                    {sectionCols.map(([key]) => (
-                                                        <th key={key} style={colStyle}>
-                                                            <small>{key}</small>
-                                                        </th>
-                                                    ))}
-                                                </tr>
-                                            </thead>
-                                        )}
-                                        <tbody>
-                                            {rows.map(([level0Key, level0Value], i1) => {
-                                                const rowArgs = combinator({ ...sectionArgs }, level0Value);
-                                                if (excludeCombination?.(rowArgs)) return null;
-                                                return (
-                                                    <tr key={i1}>
-                                                        {hasRows && (
-                                                            <th style={{ ...firstColStyle, textAlign: 'left' }}>
-                                                                <small>{level0Key}</small>
-                                                            </th>
-                                                        )}
-                                                        {cols.map(([level1Key, level1Value]) => {
-                                                            const args = combinator({ ...rowArgs }, level1Value);
-                                                            let render: React.ReactNode = <Story args={args} />;
-                                                            if (excludeCombination?.(args)) render = null;
-                                                            const textAlign = combinations.cols ? 'center' : undefined;
-                                                            return (
-                                                                <td key={level1Key} style={{ textAlign, ...cellStyle }}>
-                                                                    {render}
-                                                                </td>
-                                                            );
-                                                        })}
-                                                    </tr>
-                                                );
-                                            })}
-                                        </tbody>
-                                    </table>
-                                ) : (
-                                    <Story args={sectionArgs} />
-                                )}
-                            </HeadingLevelProvider>
-                        </section>
-                    );
-                })}
-            </>
-        );
-    };

package/src/stories/decorators/withNestedProps.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import set from 'lodash/set';
-
-/**
- * Convert flattened props into nested props
- *
- * @example: toNestedProps({ 'foo.bar': 4 }) => { foo: { bar: 4 } }
- */
-export function toNestedProps(flattenedProps: Record<string, any>): Record<string, any> {
-    const props = {};
-    for (const [key, value] of Object.entries(flattenedProps)) {
-        set(props, key, value);
-    }
-    return props;
-}
-
-/**
- * SB decorator converting args from flattened props to nested props
- */
-export const withNestedProps = () => {
-    // eslint-disable-next-line react/display-name
-    return (Story: any, ctx: any) => <Story args={toNestedProps(ctx.args)} />;
-};

package/src/stories/decorators/withResizableBox.tsx

@@ -1,21 +0,0 @@
-import type { CSSProperties } from 'react';
-import { withWrapper } from './withWrapper';
-
-/** Storybook decorator wrapping story in a resizable box  */
-export const withResizableBox = ({
-    width = 150,
-    height = 50,
-    ...style
-}: Pick<CSSProperties, 'height' | 'minWidth' | 'width'> = {}) => {
-    return withWrapper({
-        style: {
-            display: 'flex',
-            width,
-            height,
-            border: '1px solid red',
-            resize: 'both',
-            overflow: 'hidden',
-            ...style,
-        },
-    });
-};

package/src/stories/decorators/withThemedBackground.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-const LIGHT_BACKGROUND_COLOR = '#EEE';
-const DARK_BACKGROUND_COLOR = '#333';
-
-/**
- * SB decorator adding a background adapted to the current theme.
- */
-export const withThemedBackground = () => {
-    return (Story: any, { args }: any) => {
-        const backgroundColor = args.theme === 'dark' ? DARK_BACKGROUND_COLOR : LIGHT_BACKGROUND_COLOR;
-        return (
-            <div style={{ backgroundColor, padding: 8 }}>
-                <Story />
-            </div>
-        );
-    };
-};

package/src/stories/decorators/withValueOnChange.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import over from 'lodash/over';
-import identity from 'lodash/identity';
-
-export const withValueOnChange = ({
-    valueProp = 'value',
-    valueTransform = identity,
-}: {
-    valueProp?: string;
-    valueTransform?: (v: any) => any;
-} = {}) => {
-    // eslint-disable-next-line react/display-name
-    return (Story: any, ctx: any) => {
-        const [value, onChange] = React.useState(ctx.args[valueProp]);
-        const args = { ...ctx.args, onChange: over([onChange, ctx.args.onChange]), [valueProp]: valueTransform(value) };
-        return <Story args={args} />;
-    };
-};

package/src/stories/decorators/withWrapper.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-/**
- * SB decorator adding a wrapping div around the story
- */
-export const withWrapper = <E extends React.ElementType = 'div'>(
-    props: Omit<React.ComponentProps<E>, 'children'>,
-    as?: E,
-) => {
-    // eslint-disable-next-line react/display-name
-    return (Story: any, ctx: any) => {
-        const Wrapper = as || 'div';
-        const { wrapperProps } = ctx.parameters;
-        const overriddenProps = { ...props, ...wrapperProps, style: { ...props?.style, ...wrapperProps?.style } };
-        return (
-            <Wrapper {...overriddenProps}>
-                <Story />
-            </Wrapper>
-        );
-    };
-};

package/src/stories/generated/Autocomplete/Demos.stories.tsx

@@ -1,7 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/autocomplete/Autocomplete Demos' };
-
-export { App as Default } from './default';
-export { App as Multiple } from './multiple';

package/src/stories/generated/Avatar/Demos.stories.tsx

@@ -1,7 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/avatar/Avatar Demos' };
-
-export { App as Actions } from './actions';
-export { App as Default } from './default';

package/src/stories/generated/Badge/Demos.stories.tsx

@@ -1,9 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/badge/Badge Demos' };
-
-export { App as Colors } from './colors';
-export { App as Icon } from './icon';
-export { App as Label } from './label';
-export { App as Thumbnail } from './thumbnail';

package/src/stories/generated/Button/Demos.stories.tsx

@@ -1,11 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/button/Button Demos' };
-
-export { App as EmphasisHigh } from './emphasis-high';
-export { App as EmphasisLow } from './emphasis-low';
-export { App as EmphasisMedium } from './emphasis-medium';
-export { App as FullWidth } from './full-width';
-export { App as Small } from './small';
-export { App as Toggle } from './toggle';

package/src/stories/generated/Checkbox/Demos.stories.tsx

@@ -1,6 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/checkbox/Checkbox Demos' };
-
-export { App as Default } from './default';