@furystack/shades-common-components 10.0.35 → 12.0.0

package/esm/components/typography.js

@@ -0,0 +1,223 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js';
+import { paletteMainColors } from '../services/palette-css-vars.js';
+import { Icon } from './icons/icon.js';
+import { clipboard } from './icons/icon-definitions.js';
+const variantDefs = {
+    h1: {
+        fontSize: cssVariableTheme.typography.fontSize.xl,
+        fontWeight: cssVariableTheme.typography.fontWeight.bold,
+        lineHeight: cssVariableTheme.typography.lineHeight.tight,
+        letterSpacing: cssVariableTheme.typography.letterSpacing.tight,
+        scale: '2',
+    },
+    h2: {
+        fontSize: cssVariableTheme.typography.fontSize.xl,
+        fontWeight: cssVariableTheme.typography.fontWeight.bold,
+        lineHeight: cssVariableTheme.typography.lineHeight.tight,
+        letterSpacing: cssVariableTheme.typography.letterSpacing.dense,
+        scale: '1.6',
+    },
+    h3: {
+        fontSize: cssVariableTheme.typography.fontSize.xl,
+        fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+        lineHeight: cssVariableTheme.typography.lineHeight.tight,
+        letterSpacing: cssVariableTheme.typography.letterSpacing.normal,
+        scale: '1.3',
+    },
+    h4: {
+        fontSize: cssVariableTheme.typography.fontSize.lg,
+        fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+        lineHeight: cssVariableTheme.typography.lineHeight.tight,
+        letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+        scale: '1.15',
+    },
+    h5: {
+        fontSize: cssVariableTheme.typography.fontSize.lg,
+        fontWeight: cssVariableTheme.typography.fontWeight.medium,
+        lineHeight: cssVariableTheme.typography.lineHeight.normal,
+        letterSpacing: cssVariableTheme.typography.letterSpacing.normal,
+    },
+    h6: {
+        fontSize: cssVariableTheme.typography.fontSize.md,
+        fontWeight: cssVariableTheme.typography.fontWeight.medium,
+        lineHeight: cssVariableTheme.typography.lineHeight.normal,
+        letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+        scale: '1.1',
+    },
+    subtitle1: {
+        fontSize: cssVariableTheme.typography.fontSize.md,
+        fontWeight: cssVariableTheme.typography.fontWeight.medium,
+        lineHeight: cssVariableTheme.typography.lineHeight.normal,
+        letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+    },
+    subtitle2: {
+        fontSize: cssVariableTheme.typography.fontSize.sm,
+        fontWeight: cssVariableTheme.typography.fontWeight.medium,
+        lineHeight: cssVariableTheme.typography.lineHeight.normal,
+        letterSpacing: '0.1px',
+    },
+    body1: {
+        fontSize: cssVariableTheme.typography.fontSize.md,
+        fontWeight: cssVariableTheme.typography.fontWeight.normal,
+        lineHeight: cssVariableTheme.typography.lineHeight.relaxed,
+        letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+    },
+    body2: {
+        fontSize: cssVariableTheme.typography.fontSize.sm,
+        fontWeight: cssVariableTheme.typography.fontWeight.normal,
+        lineHeight: cssVariableTheme.typography.lineHeight.relaxed,
+        letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+    },
+    caption: {
+        fontSize: cssVariableTheme.typography.fontSize.xs,
+        fontWeight: cssVariableTheme.typography.fontWeight.normal,
+        lineHeight: cssVariableTheme.typography.lineHeight.normal,
+        letterSpacing: '0.4px',
+    },
+    overline: {
+        fontSize: cssVariableTheme.typography.fontSize.xs,
+        fontWeight: cssVariableTheme.typography.fontWeight.medium,
+        lineHeight: cssVariableTheme.typography.lineHeight.normal,
+        letterSpacing: cssVariableTheme.typography.letterSpacing.widest,
+        textTransform: 'uppercase',
+    },
+};
+const buildVariantCssRules = () => {
+    const rules = {};
+    for (const [variant, def] of Object.entries(variantDefs)) {
+        const rule = {
+            fontSize: def.fontSize,
+            fontWeight: def.fontWeight,
+            lineHeight: def.lineHeight,
+            letterSpacing: def.letterSpacing,
+        };
+        if (def.textTransform) {
+            rule.textTransform = def.textTransform;
+        }
+        if (def.scale && def.scale !== '1') {
+            rule.transformOrigin = 'left top';
+            rule.transform = `scale(${def.scale})`;
+            rule.marginBottom = `calc((${def.scale} - 1) * 1em)`;
+        }
+        rules[`&[data-variant="${variant}"]`] = rule;
+    }
+    return rules;
+};
+const colorToVar = (color) => {
+    if (color === 'textPrimary')
+        return cssVariableTheme.text.primary;
+    if (color === 'textSecondary')
+        return cssVariableTheme.text.secondary;
+    if (color === 'textDisabled')
+        return cssVariableTheme.text.disabled;
+    return paletteMainColors[color].main;
+};
+const variantToTag = (variant) => {
+    if (variant.startsWith('h'))
+        return variant;
+    if (variant === 'subtitle1' || variant === 'subtitle2')
+        return 'h6';
+    if (variant === 'body1' || variant === 'body2')
+        return 'p';
+    return 'span';
+};
+/**
+ * Typography component for consistent text styling.
+ * Maps variants to semantic HTML tags and uses theme typography tokens.
+ */
+export const Typography = Shade({
+    shadowDomName: 'shade-typography',
+    css: {
+        display: 'block',
+        margin: '0',
+        padding: '0',
+        fontFamily: cssVariableTheme.typography.fontFamily,
+        color: 'var(--typo-color)',
+        // Variant-specific typography styles
+        ...buildVariantCssRules(),
+        // Gutter bottom
+        '&[data-gutter-bottom]': {
+            marginBottom: '0.35em',
+        },
+        // Alignment
+        '&[data-align="left"]': { textAlign: 'left' },
+        '&[data-align="center"]': { textAlign: 'center' },
+        '&[data-align="right"]': { textAlign: 'right' },
+        '&[data-align="justify"]': { textAlign: 'justify' },
+        // Inner tag resets
+        '& .typo-inner': {
+            margin: '0',
+            padding: '0',
+            font: 'inherit',
+            color: 'inherit',
+            letterSpacing: 'inherit',
+            textTransform: 'inherit',
+        },
+        // Ellipsis: single line
+        '&[data-ellipsis="true"] .typo-inner': {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        },
+        // Ellipsis: multi-line (webkit-box-orient applied inline in render)
+        '&[data-ellipsis="multiline"] .typo-inner': {
+            overflow: 'hidden',
+            display: '-webkit-box',
+        },
+        // Copy button
+        '& .typo-copy-btn': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'transparent',
+            border: 'none',
+            color: cssVariableTheme.text.secondary,
+            cursor: 'pointer',
+            padding: `0 ${cssVariableTheme.spacing.xs}`,
+            fontSize: '0.85em',
+            lineHeight: '1',
+            verticalAlign: 'middle',
+            borderRadius: cssVariableTheme.shape.borderRadius.sm,
+            transition: buildTransition(['color', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default], ['background', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default]),
+        },
+        '& .typo-copy-btn:hover': {
+            color: cssVariableTheme.text.primary,
+            background: cssVariableTheme.action.hoverBackground,
+        },
+    },
+    render: ({ props, children, useHostProps, useRef }) => {
+        const { variant = 'body1', color = 'textPrimary', ellipsis, copyable, gutterBottom, align, style } = props;
+        const hostStyle = {
+            '--typo-color': colorToVar(color),
+        };
+        if (style) {
+            Object.assign(hostStyle, style);
+        }
+        useHostProps({
+            'data-gutter-bottom': gutterBottom ? '' : undefined,
+            'data-align': align || undefined,
+            'data-ellipsis': ellipsis === true ? 'true' : typeof ellipsis === 'number' ? 'multiline' : undefined,
+            'data-variant': variant,
+            style: hostStyle,
+        });
+        const tag = variantToTag(variant);
+        const innerRef = useRef('inner');
+        const handleCopy = () => {
+            const text = innerRef.current?.textContent ?? '';
+            navigator.clipboard.writeText(text).catch(() => {
+                // Fallback: do nothing on copy failure
+            });
+        };
+        const innerProps = { className: 'typo-inner', ref: innerRef };
+        if (typeof ellipsis === 'number') {
+            innerProps.style = { webkitLineClamp: String(ellipsis), webkitBoxOrient: 'vertical' };
+        }
+        const inner = children ? createComponent(tag, innerProps, ...children) : createComponent(tag, innerProps);
+        return (createComponent(createComponent, null,
+            inner,
+            copyable ? (createComponent("button", { type: "button", className: "typo-copy-btn", onclick: handleCopy, title: "Copy to clipboard" },
+                createComponent(Icon, { icon: clipboard, size: 14 }))) : null));
+    },
+});
+//# sourceMappingURL=typography.js.map

package/esm/components/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/components/typography.tsx"],"names":[],"mappings":"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"}

package/esm/components/typography.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=typography.spec.d.ts.map

package/esm/components/typography.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.spec.d.ts","sourceRoot":"","sources":["../../src/components/typography.spec.tsx"],"names":[],"mappings":""}

package/esm/components/typography.spec.js

@@ -0,0 +1,199 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Typography } from './typography.js';
+describe('Typography', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    const renderTypography = async (props = {}, children) => {
+        const injector = new Injector();
+        const root = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement: root,
+            jsxElement: createComponent(Typography, { ...props }, children),
+        });
+        await sleepAsync(50);
+        return {
+            injector,
+            element: root.querySelector('shade-typography'),
+            [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
+        };
+    };
+    describe('rendering', () => {
+        it('should render a shade-typography element', async () => {
+            await usingAsync(await renderTypography(), async ({ element }) => {
+                expect(element).toBeTruthy();
+                expect(element.tagName.toLowerCase()).toBe('shade-typography');
+            });
+        });
+        it('should render children text', async () => {
+            await usingAsync(await renderTypography({}, ['Hello World']), async ({ element }) => {
+                expect(element.textContent).toContain('Hello World');
+            });
+        });
+    });
+    describe('variants', () => {
+        const headingVariants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+        const bodyVariants = ['body1', 'body2'];
+        const subtitleVariants = ['subtitle1', 'subtitle2'];
+        const inlineVariants = ['caption', 'overline'];
+        it('should default to body1 variant', async () => {
+            await usingAsync(await renderTypography(), async ({ element }) => {
+                expect(element.getAttribute('data-variant')).toBe('body1');
+                const inner = element.querySelector('.typo-inner');
+                expect(inner?.tagName.toLowerCase()).toBe('p');
+            });
+        });
+        headingVariants.forEach((variant) => {
+            it(`should render ${variant} tag for variant="${variant}"`, async () => {
+                await usingAsync(await renderTypography({ variant }), async ({ element }) => {
+                    expect(element.getAttribute('data-variant')).toBe(variant);
+                    const inner = element.querySelector('.typo-inner');
+                    expect(inner?.tagName.toLowerCase()).toBe(variant);
+                });
+            });
+        });
+        bodyVariants.forEach((variant) => {
+            it(`should render p tag for variant="${variant}"`, async () => {
+                await usingAsync(await renderTypography({ variant }), async ({ element }) => {
+                    const inner = element.querySelector('.typo-inner');
+                    expect(inner?.tagName.toLowerCase()).toBe('p');
+                });
+            });
+        });
+        subtitleVariants.forEach((variant) => {
+            it(`should render h6 tag for variant="${variant}"`, async () => {
+                await usingAsync(await renderTypography({ variant }), async ({ element }) => {
+                    const inner = element.querySelector('.typo-inner');
+                    expect(inner?.tagName.toLowerCase()).toBe('h6');
+                });
+            });
+        });
+        inlineVariants.forEach((variant) => {
+            it(`should render span tag for variant="${variant}"`, async () => {
+                await usingAsync(await renderTypography({ variant }), async ({ element }) => {
+                    const inner = element.querySelector('.typo-inner');
+                    expect(inner?.tagName.toLowerCase()).toBe('span');
+                });
+            });
+        });
+    });
+    describe('colors', () => {
+        it('should use textPrimary color by default', async () => {
+            await usingAsync(await renderTypography(), async ({ element }) => {
+                expect(element.style.getPropertyValue('--typo-color')).toBe('var(--shades-theme-text-primary)');
+            });
+        });
+        it('should set textSecondary color', async () => {
+            await usingAsync(await renderTypography({ color: 'textSecondary' }), async ({ element }) => {
+                expect(element.style.getPropertyValue('--typo-color')).toBe('var(--shades-theme-text-secondary)');
+            });
+        });
+        it('should set textDisabled color', async () => {
+            await usingAsync(await renderTypography({ color: 'textDisabled' }), async ({ element }) => {
+                expect(element.style.getPropertyValue('--typo-color')).toBe('var(--shades-theme-text-disabled)');
+            });
+        });
+        it('should set palette primary color', async () => {
+            await usingAsync(await renderTypography({ color: 'primary' }), async ({ element }) => {
+                expect(element.style.getPropertyValue('--typo-color')).toBe('var(--shades-theme-palette-primary-main)');
+            });
+        });
+        it('should set palette error color', async () => {
+            await usingAsync(await renderTypography({ color: 'error' }), async ({ element }) => {
+                expect(element.style.getPropertyValue('--typo-color')).toBe('var(--shades-theme-palette-error-main)');
+            });
+        });
+    });
+    describe('ellipsis', () => {
+        it('should set data-ellipsis="true" for boolean ellipsis', async () => {
+            await usingAsync(await renderTypography({ ellipsis: true }), async ({ element }) => {
+                expect(element.getAttribute('data-ellipsis')).toBe('true');
+            });
+        });
+        it('should set data-ellipsis="multiline" for numeric ellipsis', async () => {
+            await usingAsync(await renderTypography({ ellipsis: 3 }), async ({ element }) => {
+                expect(element.getAttribute('data-ellipsis')).toBe('multiline');
+                const inner = element.querySelector('.typo-inner');
+                expect(inner.style.webkitLineClamp).toBe('3');
+            });
+        });
+        it('should not set data-ellipsis when not specified', async () => {
+            await usingAsync(await renderTypography(), async ({ element }) => {
+                expect(element.getAttribute('data-ellipsis')).toBeNull();
+            });
+        });
+    });
+    describe('copyable', () => {
+        it('should render copy button when copyable is true', async () => {
+            await usingAsync(await renderTypography({ copyable: true }, ['Copy me']), async ({ element }) => {
+                const copyBtn = element.querySelector('.typo-copy-btn');
+                expect(copyBtn).toBeTruthy();
+            });
+        });
+        it('should not render copy button when copyable is false or undefined', async () => {
+            await usingAsync(await renderTypography(), async ({ element }) => {
+                const copyBtn = element.querySelector('.typo-copy-btn');
+                expect(copyBtn).toBeNull();
+            });
+        });
+        it('should call clipboard API when copy button is clicked', async () => {
+            const writeText = vi.fn().mockResolvedValue(undefined);
+            Object.assign(navigator, { clipboard: { writeText } });
+            await usingAsync(await renderTypography({ copyable: true }, ['Copy this text']), async ({ element }) => {
+                const copyBtn = element.querySelector('.typo-copy-btn');
+                copyBtn.click();
+                expect(writeText).toHaveBeenCalledWith(expect.stringContaining('Copy this text'));
+            });
+        });
+    });
+    describe('gutterBottom', () => {
+        it('should set data-gutter-bottom attribute when gutterBottom is true', async () => {
+            await usingAsync(await renderTypography({ gutterBottom: true }), async ({ element }) => {
+                expect(element.hasAttribute('data-gutter-bottom')).toBe(true);
+            });
+        });
+        it('should not set data-gutter-bottom attribute when gutterBottom is falsy', async () => {
+            await usingAsync(await renderTypography(), async ({ element }) => {
+                expect(element.hasAttribute('data-gutter-bottom')).toBe(false);
+            });
+        });
+    });
+    describe('align', () => {
+        const alignments = ['left', 'center', 'right', 'justify'];
+        alignments.forEach((align) => {
+            it(`should set data-align="${align}"`, async () => {
+                await usingAsync(await renderTypography({ align }), async ({ element }) => {
+                    expect(element.getAttribute('data-align')).toBe(align);
+                });
+            });
+        });
+        it('should not set data-align when not specified', async () => {
+            await usingAsync(await renderTypography(), async ({ element }) => {
+                expect(element.getAttribute('data-align')).toBeNull();
+            });
+        });
+    });
+    describe('custom styles', () => {
+        it('should apply custom styles from style prop', async () => {
+            await usingAsync(await renderTypography({ style: { margin: '20px', padding: '10px' } }), async ({ element }) => {
+                expect(element.style.margin).toBe('20px');
+                expect(element.style.padding).toBe('10px');
+            });
+        });
+    });
+    describe('overline variant', () => {
+        it('should apply uppercase text transform for overline', async () => {
+            await usingAsync(await renderTypography({ variant: 'overline' }), async ({ element }) => {
+                expect(element.getAttribute('data-variant')).toBe('overline');
+            });
+        });
+    });
+});
+//# sourceMappingURL=typography.spec.js.map

package/esm/components/typography.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.spec.js","sourceRoot":"","sources":["../../src/components/typography.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/wizard/index.d.ts

@@ -29,5 +29,7 @@ export interface WizardProps {
 }
 export declare const Wizard: (props: WizardProps & Omit<Partial<HTMLElement>, "style"> & {
     style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
 }, children?: ChildrenList) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/esm/components/wizard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,CAAC,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,eAAO,MAAM,MAAM;;0CAsCjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,CAAC,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,eAAO,MAAM,MAAM;;;;0CAuCjB,CAAA"}

package/esm/components/wizard/index.js

@@ -2,16 +2,19 @@ import { createComponent, Shade } from '@furystack/shades';
 import { Paper } from '../paper.js';
 export const Wizard = Shade({
     shadowDomName: 'shades-wizard',
+    css: {
+        '& .wizard-container': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100%',
+        },
+    },
     render: ({ props, useState }) => {
         const [currentPage, setCurrentPage] = useState('currentPage', 0);
         const CurrentPage = props.steps[currentPage];
-        return (createComponent("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: '100%',
-                height: '100%',
-            } },
+        return (createComponent("div", { className: "wizard-container" },
             createComponent(Paper, { style: { maxWidth: '100%', maxHeight: '100%' }, elevation: 3, onclick: (ev) => ev.stopPropagation() },
                 createComponent(CurrentPage, { currentPage: currentPage, maxPages: props.steps.length, onNext: () => {
                         if (currentPage < props.steps.length - 1) {

package/esm/components/wizard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/wizard/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAgCnC,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAc;IACvC,aAAa,EAAE,eAAe;IAC9B,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC9B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;QAEhE,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QAE5C,OAAO,CACL,yBACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;YAED,gBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE;gBACxG,gBAAC,WAAW,IACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,EAC5B,MAAM,EAAE,GAAG,EAAE;wBACX,IAAI,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;4BACzC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;wBACjC,CAAC;6BAAM,CAAC;4BACN,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAA;wBACpB,CAAC;oBACH,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;wBACX,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;4BACpB,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;wBACjC,CAAC;oBACH,CAAC,GACD,CACI,CACJ,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/wizard/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAgCnC,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAc;IACvC,aAAa,EAAE,eAAe;IAC9B,GAAG,EAAE;QACH,qBAAqB,EAAE;YACrB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;KACF;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC9B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;QAEhE,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QAE5C,OAAO,CACL,yBAAK,SAAS,EAAC,kBAAkB;YAC/B,gBAAC,KAAK,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE;gBACxG,gBAAC,WAAW,IACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,EAC5B,MAAM,EAAE,GAAG,EAAE;wBACX,IAAI,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;4BACzC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;wBACjC,CAAC;6BAAM,CAAC;4BACN,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAA;wBACpB,CAAC;oBACH,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;wBACX,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;4BACpB,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;wBACjC,CAAC;oBACH,CAAC,GACD,CACI,CACJ,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/esm/components/wizard/index.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.spec.d.ts.map

package/esm/components/wizard/index.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.d.ts","sourceRoot":"","sources":["../../../src/components/wizard/index.spec.tsx"],"names":[],"mappings":""}