@vtx-ui/react 0.0.1-beta.16 → 0.0.1-beta.17

package/dist/esm/components/Box/components/Box/Box.js

@@ -0,0 +1,313 @@
+"use client";
+import * as React from 'react';
+
+/**
+ * Convert value to CSS string (adds px for numbers)
+ */
+const toCSSValue = (value) => {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === 'number')
+        return `${value}px`;
+    return value;
+};
+/**
+ * Box component - Flexible layout component that replaces div
+ *
+ * A versatile container component inspired by MUI Box that provides a prop-based
+ * interface for styling and layout. It can render as any HTML element and accepts
+ * style props for quick styling without writing CSS.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Box p={4} bg="white" borderRadius={8}>
+ *   Content here
+ * </Box>
+ * ```
+ *
+ * @example
+ * Flex layout
+ * ```tsx
+ * <Box display="flex" justifyContent="space-between" alignItems="center" gap={2}>
+ *   <Box>Item 1</Box>
+ *   <Box>Item 2</Box>
+ * </Box>
+ * ```
+ *
+ * @example
+ * Grid layout
+ * ```tsx
+ * <Box display="grid" gridTemplateColumns="repeat(3, 1fr)" gap={4}>
+ *   <Box>Item 1</Box>
+ *   <Box>Item 2</Box>
+ *   <Box>Item 3</Box>
+ * </Box>
+ * ```
+ *
+ * @example
+ * Responsive card
+ * ```tsx
+ * <Box
+ *   bg="#fff"
+ *   p={4}
+ *   borderRadius={12}
+ *   shadow="md"
+ *   maxW={400}
+ * >
+ *   <Typography variant="h3">Card Title</Typography>
+ *   <Typography>Card content</Typography>
+ * </Box>
+ * ```
+ *
+ * @example
+ * As semantic HTML
+ * ```tsx
+ * <Box as="section" py={8}>
+ *   <Box as="header" mb={4}>
+ *     <Typography variant="h2">Section Title</Typography>
+ *   </Box>
+ *   <Box as="article">
+ *     Content here
+ *   </Box>
+ * </Box>
+ * ```
+ *
+ * @example
+ * Wrapping other components
+ * ```tsx
+ * <Box display="flex" gap={2}>
+ *   <Button>Click me</Button>
+ *   <Button variant="secondary">Cancel</Button>
+ * </Box>
+ * ```
+ */
+const Box = React.forwardRef(({ as = 'div', display, position, overflow, overflowX, overflowY, bg, backgroundColor, color, w, width, h, height, minW, minWidth, maxW, maxWidth, minH, minHeight, maxH, maxHeight, m, margin, mt, marginTop, mr, marginRight, mb, marginBottom, ml, marginLeft, mx, my, p, padding, pt, paddingTop, pr, paddingRight, pb, paddingBottom, pl, paddingLeft, px, py, border, borderColor, borderRadius, rounded, borderTop, borderRight, borderBottom, borderLeft, shadow, boxShadow, opacity, zIndex, top, right, bottom, left, flexDirection, justifyContent, alignItems, alignContent, flexWrap, gap, rowGap, columnGap, flexGrow, flexShrink, flexBasis, gridTemplateColumns, gridTemplateRows, gridColumn, gridRow, textAlign, cursor, pointerEvents, userSelect, transition, className = '', style, children, ...props }, ref) => {
+    // Determine the HTML element to render
+    const Component = as;
+    // Build class names
+    const classNames = [
+        'vtx-box',
+        display && `vtx-box--display-${display}`,
+        position && `vtx-box--position-${position}`,
+        overflow && `vtx-box--overflow-${overflow}`,
+        shadow && typeof shadow === 'string' && !shadow.includes('(') && `vtx-box--shadow-${shadow}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Build inline styles
+    const inlineStyles = {
+        ...style,
+    };
+    // Background
+    if (bg || backgroundColor) {
+        inlineStyles.backgroundColor = bg || backgroundColor;
+    }
+    // Color
+    if (color) {
+        inlineStyles.color = color;
+    }
+    // Dimensions
+    if (w !== undefined || width !== undefined) {
+        inlineStyles.width = toCSSValue(w !== null && w !== void 0 ? w : width);
+    }
+    if (h !== undefined || height !== undefined) {
+        inlineStyles.height = toCSSValue(h !== null && h !== void 0 ? h : height);
+    }
+    if (minW !== undefined || minWidth !== undefined) {
+        inlineStyles.minWidth = toCSSValue(minW !== null && minW !== void 0 ? minW : minWidth);
+    }
+    if (maxW !== undefined || maxWidth !== undefined) {
+        inlineStyles.maxWidth = toCSSValue(maxW !== null && maxW !== void 0 ? maxW : maxWidth);
+    }
+    if (minH !== undefined || minHeight !== undefined) {
+        inlineStyles.minHeight = toCSSValue(minH !== null && minH !== void 0 ? minH : minHeight);
+    }
+    if (maxH !== undefined || maxHeight !== undefined) {
+        inlineStyles.maxHeight = toCSSValue(maxH !== null && maxH !== void 0 ? maxH : maxHeight);
+    }
+    // Margin (shorthand overrides specific sides)
+    if (m !== undefined || margin !== undefined) {
+        inlineStyles.margin = toCSSValue(m !== null && m !== void 0 ? m : margin);
+    }
+    else {
+        if (my !== undefined) {
+            inlineStyles.marginTop = toCSSValue(my);
+            inlineStyles.marginBottom = toCSSValue(my);
+        }
+        if (mx !== undefined) {
+            inlineStyles.marginLeft = toCSSValue(mx);
+            inlineStyles.marginRight = toCSSValue(mx);
+        }
+        if (mt !== undefined || marginTop !== undefined) {
+            inlineStyles.marginTop = toCSSValue(mt !== null && mt !== void 0 ? mt : marginTop);
+        }
+        if (mr !== undefined || marginRight !== undefined) {
+            inlineStyles.marginRight = toCSSValue(mr !== null && mr !== void 0 ? mr : marginRight);
+        }
+        if (mb !== undefined || marginBottom !== undefined) {
+            inlineStyles.marginBottom = toCSSValue(mb !== null && mb !== void 0 ? mb : marginBottom);
+        }
+        if (ml !== undefined || marginLeft !== undefined) {
+            inlineStyles.marginLeft = toCSSValue(ml !== null && ml !== void 0 ? ml : marginLeft);
+        }
+    }
+    // Padding (shorthand overrides specific sides)
+    if (p !== undefined || padding !== undefined) {
+        inlineStyles.padding = toCSSValue(p !== null && p !== void 0 ? p : padding);
+    }
+    else {
+        if (py !== undefined) {
+            inlineStyles.paddingTop = toCSSValue(py);
+            inlineStyles.paddingBottom = toCSSValue(py);
+        }
+        if (px !== undefined) {
+            inlineStyles.paddingLeft = toCSSValue(px);
+            inlineStyles.paddingRight = toCSSValue(px);
+        }
+        if (pt !== undefined || paddingTop !== undefined) {
+            inlineStyles.paddingTop = toCSSValue(pt !== null && pt !== void 0 ? pt : paddingTop);
+        }
+        if (pr !== undefined || paddingRight !== undefined) {
+            inlineStyles.paddingRight = toCSSValue(pr !== null && pr !== void 0 ? pr : paddingRight);
+        }
+        if (pb !== undefined || paddingBottom !== undefined) {
+            inlineStyles.paddingBottom = toCSSValue(pb !== null && pb !== void 0 ? pb : paddingBottom);
+        }
+        if (pl !== undefined || paddingLeft !== undefined) {
+            inlineStyles.paddingLeft = toCSSValue(pl !== null && pl !== void 0 ? pl : paddingLeft);
+        }
+    }
+    // Border
+    if (border !== undefined) {
+        inlineStyles.border = toCSSValue(border);
+    }
+    if (borderColor) {
+        inlineStyles.borderColor = borderColor;
+    }
+    if (borderRadius !== undefined || rounded !== undefined) {
+        inlineStyles.borderRadius = toCSSValue(borderRadius !== null && borderRadius !== void 0 ? borderRadius : rounded);
+    }
+    if (borderTop !== undefined) {
+        inlineStyles.borderTop = toCSSValue(borderTop);
+    }
+    if (borderRight !== undefined) {
+        inlineStyles.borderRight = toCSSValue(borderRight);
+    }
+    if (borderBottom !== undefined) {
+        inlineStyles.borderBottom = toCSSValue(borderBottom);
+    }
+    if (borderLeft !== undefined) {
+        inlineStyles.borderLeft = toCSSValue(borderLeft);
+    }
+    // Shadow
+    if (shadow && shadow.includes('(')) {
+        inlineStyles.boxShadow = shadow;
+    }
+    if (boxShadow) {
+        inlineStyles.boxShadow = boxShadow;
+    }
+    // Overflow
+    if (overflowX) {
+        inlineStyles.overflowX = overflowX;
+    }
+    if (overflowY) {
+        inlineStyles.overflowY = overflowY;
+    }
+    // Visual
+    if (opacity !== undefined) {
+        inlineStyles.opacity = opacity;
+    }
+    if (zIndex !== undefined) {
+        inlineStyles.zIndex = zIndex;
+    }
+    // Position
+    if (top !== undefined) {
+        inlineStyles.top = toCSSValue(top);
+    }
+    if (right !== undefined) {
+        inlineStyles.right = toCSSValue(right);
+    }
+    if (bottom !== undefined) {
+        inlineStyles.bottom = toCSSValue(bottom);
+    }
+    if (left !== undefined) {
+        inlineStyles.left = toCSSValue(left);
+    }
+    // Flexbox
+    if (flexDirection) {
+        inlineStyles.flexDirection = flexDirection;
+    }
+    if (justifyContent) {
+        inlineStyles.justifyContent = justifyContent;
+    }
+    if (alignItems) {
+        inlineStyles.alignItems = alignItems;
+    }
+    if (alignContent) {
+        inlineStyles.alignContent = alignContent;
+    }
+    if (flexWrap) {
+        inlineStyles.flexWrap = flexWrap;
+    }
+    if (gap !== undefined) {
+        inlineStyles.gap = toCSSValue(gap);
+    }
+    if (rowGap !== undefined) {
+        inlineStyles.rowGap = toCSSValue(rowGap);
+    }
+    if (columnGap !== undefined) {
+        inlineStyles.columnGap = toCSSValue(columnGap);
+    }
+    if (flexGrow !== undefined) {
+        inlineStyles.flexGrow = flexGrow;
+    }
+    if (flexShrink !== undefined) {
+        inlineStyles.flexShrink = flexShrink;
+    }
+    if (flexBasis !== undefined) {
+        inlineStyles.flexBasis = toCSSValue(flexBasis);
+    }
+    // Grid
+    if (gridTemplateColumns) {
+        inlineStyles.gridTemplateColumns = gridTemplateColumns;
+    }
+    if (gridTemplateRows) {
+        inlineStyles.gridTemplateRows = gridTemplateRows;
+    }
+    if (gridColumn) {
+        inlineStyles.gridColumn = gridColumn;
+    }
+    if (gridRow) {
+        inlineStyles.gridRow = gridRow;
+    }
+    // Text
+    if (textAlign) {
+        inlineStyles.textAlign = textAlign;
+    }
+    // Interaction
+    if (cursor) {
+        inlineStyles.cursor = cursor;
+    }
+    if (pointerEvents) {
+        inlineStyles.pointerEvents = pointerEvents;
+    }
+    if (userSelect) {
+        inlineStyles.userSelect = userSelect;
+    }
+    // Transition
+    if (transition) {
+        inlineStyles.transition = transition;
+    }
+    return React.createElement(Component, {
+        ref,
+        className: classNames,
+        style: inlineStyles,
+        ...props,
+    }, children);
+});
+Box.displayName = 'Box';
+
+export { Box, Box as default };
+//# sourceMappingURL=Box.js.map

package/dist/esm/components/Box/components/Box/Box.js.map

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

package/dist/esm/components/Box/components/Box/index.js

@@ -0,0 +1,2 @@
+export { default as Box, default } from './Box.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Box/components/Box/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/components/Breadcrumb/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,150 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useThemeContext } from '../../../../theme/theme/ThemeProvider.js';
+import { ChevronRightIcon } from '../../../../icons/icons/IconComponents.js';
+import Link from '../../../Link/components/Link/Link.js';
+import Typography from '../../../Typography/components/Typography/Typography.js';
+
+/**
+ * Breadcrumb component - Navigation aid showing current location hierarchy
+ *
+ * A flexible breadcrumb component that works with native anchors, React Router, Next.js,
+ * or any custom routing library. Supports icons, custom separators, and collapsing.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Breadcrumb
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Products', href: '/products' },
+ *     { label: 'Electronics', href: '/products/electronics' },
+ *     { label: 'Laptops', active: true }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * With React Router
+ * ```tsx
+ * import { Link as RouterLink } from 'react-router-dom'
+ *
+ * <Breadcrumb
+ *   linkComponent={RouterLink}
+ *   items={[
+ *     { label: 'Home', linkProps: { to: '/' } },
+ *     { label: 'Dashboard', linkProps: { to: '/dashboard' }, active: true }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * With Next.js
+ * ```tsx
+ * import NextLink from 'next/link'
+ *
+ * <Breadcrumb
+ *   linkComponent={NextLink}
+ *   items={[
+ *     { label: 'Home', linkProps: { href: '/' } },
+ *     { label: 'About', linkProps: { href: '/about' }, active: true }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * With icons and custom separator
+ * ```tsx
+ * <Breadcrumb
+ *   separator="›"
+ *   items={[
+ *     { label: 'Home', href: '/', icon: <HomeIcon /> },
+ *     { label: 'Products', href: '/products', icon: <PackageIcon /> },
+ *     { label: 'Current', active: true }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * With maxItems (collapsing)
+ * ```tsx
+ * <Breadcrumb
+ *   maxItems={4}
+ *   items={longItemsList}
+ * />
+ * ```
+ */
+const Breadcrumb = React__default.forwardRef(({ items, separator = jsx(ChevronRightIcon, { size: 16 }), linkComponent, maxItems, size, className = '', separatorClassName = '', }, ref) => {
+    const { theme } = useThemeContext();
+    const breadcrumbSize = size || theme.defaultSize;
+    // Handle collapsing if maxItems is set
+    const displayItems = React__default.useMemo(() => {
+        if (!maxItems || items.length <= maxItems) {
+            return items;
+        }
+        const firstItem = items[0];
+        const lastItems = items.slice(-(maxItems - 2));
+        return [
+            firstItem,
+            { label: '...', active: false },
+            ...lastItems,
+        ];
+    }, [items, maxItems]);
+    // Mobile display: show only first and last items
+    const mobileDisplayItems = React__default.useMemo(() => {
+        if (items.length <= 2) {
+            return items;
+        }
+        const firstItem = items[0];
+        const lastItem = items[items.length - 1];
+        return [firstItem, { label: '...', active: false }, lastItem];
+    }, [items]);
+    const breadcrumbClassNames = [
+        'vtx-breadcrumb',
+        `vtx-breadcrumb--${breadcrumbSize}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const separatorClassNames = [
+        'vtx-breadcrumb-separator',
+        separatorClassName,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const renderItem = (item, index) => {
+        const isLast = index === displayItems.length - 1;
+        const isActive = item.active || isLast;
+        const isEllipsis = item.label === '...';
+        const itemClassNames = [
+            'vtx-breadcrumb-item',
+            isActive && 'vtx-breadcrumb-item--active',
+            isEllipsis && 'vtx-breadcrumb-item--ellipsis',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const content = (jsxs(Fragment, { children: [item.icon && jsx("span", { className: "vtx-breadcrumb-item-icon", children: item.icon }), item.label && jsx(Typography, { as: "span", variant: "body2", className: "vtx-breadcrumb-item-label", children: item.label })] }));
+        // Render ellipsis as plain text
+        if (isEllipsis) {
+            return (jsx("li", { className: itemClassNames, children: jsx("span", { className: "vtx-breadcrumb-item-content", children: item.label }) }, index));
+        }
+        // Render active/last item as plain text
+        if (isActive) {
+            return (jsx("li", { className: itemClassNames, "aria-current": "page", children: jsx("span", { className: "vtx-breadcrumb-item-content", children: content }) }, index));
+        }
+        // Check if item has a link
+        const hasLink = item.href || item.linkProps;
+        // Render with Link component if link exists
+        if (hasLink) {
+            return (jsx("li", { className: itemClassNames, children: jsx(Link, { href: item.href, component: linkComponent, componentProps: item.linkProps, className: "vtx-breadcrumb-item-link", color: "inherit", children: content }) }, index));
+        }
+        // Render as plain text if no link
+        return (jsx("li", { className: itemClassNames, children: jsx("span", { className: "vtx-breadcrumb-item-content", children: content }) }, index));
+    };
+    return (jsxs("nav", { ref: ref, className: breadcrumbClassNames, "aria-label": "Breadcrumb", children: [jsx("ol", { className: "vtx-breadcrumb-list vtx-breadcrumb-list--desktop", children: displayItems.map((item, index) => (jsxs(React__default.Fragment, { children: [renderItem(item, index), index < displayItems.length - 1 && (jsx("li", { className: separatorClassNames, "aria-hidden": "true", children: separator }))] }, index))) }), jsx("ol", { className: "vtx-breadcrumb-list vtx-breadcrumb-list--mobile", children: mobileDisplayItems.map((item, index) => (jsxs(React__default.Fragment, { children: [renderItem(item, index), index < mobileDisplayItems.length - 1 && (jsx("li", { className: separatorClassNames, "aria-hidden": "true", children: separator }))] }, index))) })] }));
+});
+Breadcrumb.displayName = 'Breadcrumb';
+
+export { Breadcrumb, Breadcrumb as default };
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/esm/components/Breadcrumb/components/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../../../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":[null],"names":["React","_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/Breadcrumb/components/Breadcrumb/index.js

@@ -0,0 +1,2 @@
+export { default as Breadcrumb, default as BreadcrumbComponent } from './Breadcrumb.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Breadcrumb/components/Breadcrumb/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/components/Button/components/Button/Button.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useThemeContext } from '../../../../theme/theme/ThemeProvider.js';
+
+/**
+ * Button component - Primary interactive element for user actions
+ *
+ * A comprehensive button component with multiple variants, sizes, loading states,
+ * and icon support. Can also render as a link with button styling.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Button variant="primary" size="medium" onClick={() => console.log('clicked')}>
+ *   Click me
+ * </Button>
+ * ```
+ *
+ * @example
+ * With icons
+ * ```tsx
+ * <Button variant="primary" leftIcon={<SaveIcon />}>
+ *   Save Changes
+ * </Button>
+ * <Button variant="secondary" rightIcon={<ArrowIcon />}>
+ *   Next
+ * </Button>
+ * ```
+ *
+ * @example
+ * Loading state
+ * ```tsx
+ * <Button loading loadingText="Saving...">
+ *   Save
+ * </Button>
+ * ```
+ *
+ * @example
+ * As link
+ * ```tsx
+ * <Button asLink href="/dashboard" variant="primary">
+ *   Go to Dashboard
+ * </Button>
+ * ```
+ */
+const Button = React__default.forwardRef(({ children, variant = 'primary', size, fullWidth = false, loading = false, disabled = false, leftIcon, rightIcon, iconOnly = false, loadingText, asLink = false, href, target, rel, className = '', type = 'button', ...props }, ref) => {
+    // Get theme default size if size prop is not provided
+    const { theme } = useThemeContext();
+    const buttonSize = size || theme.defaultSize || 'md';
+    // Determine text color based on theme's color contrast configuration
+    const getTextColorClass = () => {
+        if (props.darkText === true)
+            return 'vtx-button--dark-text';
+        if (props.darkText === false)
+            return 'vtx-button--light-text';
+        // Use theme's colorContrast configuration
+        const contrast = theme.colorContrast[variant];
+        if (contrast === 'light') {
+            return 'vtx-button--dark-text'; // Light background needs dark text
+        }
+        else if (contrast === 'dark') {
+            return 'vtx-button--light-text'; // Dark background needs light text
+        }
+        return null;
+    };
+    const classNames = [
+        'vtx-button',
+        `vtx-button--${variant}`,
+        `vtx-button--${buttonSize}`,
+        fullWidth && 'vtx-button--full-width',
+        loading && 'vtx-button--loading',
+        iconOnly && 'vtx-button--icon-only',
+        getTextColorClass(),
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Inline style for text color override
+    const style = props.style ? { ...props.style } : {};
+    if (props.textColor) {
+        style.color = props.textColor;
+    }
+    const content = (jsxs(Fragment, { children: [loading && (jsx("span", { className: "vtx-button__spinner", role: "status", "aria-label": "Loading", children: jsx("svg", { className: "vtx-button__spinner-icon", viewBox: "0 0 24 24", children: jsx("circle", { className: "vtx-button__spinner-circle", cx: "12", cy: "12", r: "10", fill: "none", strokeWidth: "3" }) }) })), !loading && leftIcon && jsx("span", { className: "vtx-button__icon-left", children: leftIcon }), !iconOnly && (jsx("span", { className: "vtx-button__content", children: loading && loadingText ? loadingText : children })), iconOnly && !loading && children, !loading && rightIcon && jsx("span", { className: "vtx-button__icon-right", children: rightIcon })] }));
+    if (asLink && href) {
+        return (jsx("a", { ref: ref, href: href, target: target, rel: target === '_blank' ? 'noopener noreferrer' : rel, className: classNames, "aria-disabled": disabled || loading, style: style, ...props, children: content }));
+    }
+    return (jsx("button", { ref: ref, type: type, className: classNames, disabled: disabled || loading, "aria-busy": loading, "aria-disabled": disabled || loading, style: style, ...props, children: content }));
+});
+Button.displayName = 'Button';
+
+export { Button, Button as default };
+//# sourceMappingURL=Button.js.map

package/dist/esm/components/Button/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../../../src/components/Button/Button.tsx"],"sourcesContent":[null],"names":["React","_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/esm/components/Button/components/Button/index.js

@@ -0,0 +1,2 @@
+export { default as Button, default as ButtonComponent } from './Button.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Button/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}