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

package/dist/esm/components/Card/components/Card/Card.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useThemeContext } from '../../../../theme/theme/ThemeProvider.js';
+import '../../../../theme/theme/tokens.js';
+
+/**
+ * Card component - Container for grouping related content
+ *
+ * A versatile card component with support for variants, padding control,
+ * headers, footers, and interactive states.
+ *
+ * @example
+ * Basic card
+ * ```tsx
+ * <Card>
+ *   <h3>Card Title</h3>
+ *   <p>Card content goes here</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * Card without padding
+ * ```tsx
+ * <Card noPadding>
+ *   <img src="image.jpg" alt="Full bleed image" />
+ * </Card>
+ * ```
+ *
+ * @example
+ * Card with custom padding
+ * ```tsx
+ * <Card padding="32px">
+ *   <p>Card with custom padding</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * Card with header and footer
+ * ```tsx
+ * <Card
+ *   header={<h3>Card Header</h3>}
+ *   footer={<button>Action</button>}
+ *   divider
+ * >
+ *   <p>Card content</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * Interactive card
+ * ```tsx
+ * <Card hoverable clickable onClick={() => console.log('clicked')}>
+ *   <p>Click me!</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * Customize appearance with CSS
+ * ```css
+ * .vtx-card {
+ *   --vtx-card-bg: #ffffff;
+ *   --vtx-card-border-radius: 8px;
+ *   --vtx-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ *   --vtx-card-padding: 16px;
+ * }
+ * ```
+ */
+const Card = React__default.forwardRef(({ children, variant = 'elevated', size, noPadding = false, padding, hoverable = false, clickable = false, className = '', header, footer, divider = false, style, onClick, tabIndex, ...props }, ref) => {
+    const { theme } = useThemeContext();
+    const cardSize = size || (theme === null || theme === void 0 ? void 0 : theme.defaultSize) || 'md';
+    // Compose class names
+    const cardClassNames = [
+        'vtx-card',
+        `vtx-card--${variant}`,
+        `vtx-card--${cardSize}`,
+        hoverable ? 'vtx-card--hoverable' : '',
+        clickable ? 'vtx-card--clickable' : '',
+        noPadding && !padding ? 'vtx-card--no-padding' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Compose style, ensuring custom property is set if padding is provided
+    const customStyle = {
+        ...(style || {}),
+        ...(padding ? { ['--vtx-card-padding']: padding } : {}),
+    };
+    // If clickable, set tabIndex to 0 by default unless provided
+    const computedTabIndex = clickable ? (typeof tabIndex === 'number' ? tabIndex : 0) : tabIndex;
+    return (jsxs("div", { ref: ref, className: cardClassNames, style: customStyle, onClick: onClick, tabIndex: computedTabIndex, ...props, children: [header && (jsx("div", { className: `vtx-card-header${divider ? ' vtx-card-header--divider' : ''}`, children: header })), jsx("div", { className: "vtx-card-content", children: children }), footer && (jsx("div", { className: `vtx-card-footer${divider ? ' vtx-card-footer--divider' : ''}`, children: footer }))] }));
+});
+Card.displayName = 'Card';
+
+export { Card, Card as default };
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":[null],"names":["React","_jsxs","_jsx"],"mappings":";;;;;AA4DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DG;AAEG,MAAA,IAAI,GAAGA,cAAK,CAAC,UAAU,CAC3B,CACE,EACE,QAAQ,EACR,OAAO,GAAG,UAAU,EACpB,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,EAAE,EACd,MAAM,EACN,MAAM,EACN,OAAO,GAAG,KAAK,EACf,KAAK,EACL,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;AACpC,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAI,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,WAAW,CAAA,IAAI,IAAI,CAAC;;AAGpD,IAAA,MAAM,cAAc,GAAG;QACrB,UAAU;AACV,QAAA,CAAA,UAAA,EAAa,OAAO,CAAE,CAAA;AACtB,QAAA,CAAA,UAAA,EAAa,QAAQ,CAAE,CAAA;AACvB,QAAA,SAAS,GAAG,qBAAqB,GAAG,EAAE;AACtC,QAAA,SAAS,GAAG,qBAAqB,GAAG,EAAE;QACtC,SAAS,IAAI,CAAC,OAAO,GAAG,sBAAsB,GAAG,EAAE;QACnD,SAAS;AACV,KAAA;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;;AAGb,IAAA,MAAM,WAAW,GAAwB;AACvC,QAAA,IAAI,KAAK,IAAI,EAAE,CAAC;AAChB,QAAA,IAAI,OAAO,GAAG,EAAE,CAAC,oBAA2B,GAAG,OAAO,EAAE,GAAG,EAAE,CAAC;KAC/D,CAAC;;IAGF,MAAM,gBAAgB,GAAG,SAAS,IAAI,OAAO,QAAQ,KAAK,QAAQ,GAAG,QAAQ,GAAG,CAAC,IAAI,QAAQ,CAAC;AAE9F,IAAA,QACEC,IACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,EACtB,GAAA,KAAK,EAER,QAAA,EAAA,CAAA,MAAM,KACLC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,OAAO,GAAG,2BAA2B,GAAG,EAAE,EAAE,EAC3E,QAAA,EAAA,MAAM,EACH,CAAA,CACP,EACDA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kBAAkB,YAAE,QAAQ,EAAA,CAAO,EACjD,MAAM,KACLA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,OAAO,GAAG,2BAA2B,GAAG,EAAE,EAAE,EAC3E,QAAA,EAAA,MAAM,GACH,CACP,CAAA,EAAA,CACG,EACN;AACJ,CAAC,EACD;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

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

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

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

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

package/dist/esm/components/Checkbox/components/Checkbox/Checkbox.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useId, useRef, useImperativeHandle, useEffect } from 'react';
+import { useThemeContext } from '../../../../theme/theme/ThemeProvider.js';
+
+/**
+ * Checkbox component - Allows users to select one or more items from a set
+ *
+ * The Checkbox component provides a customizable checkbox input with support
+ * for labels, error states, indeterminate state, and three sizes.
+ *
+ * ## CSS Customization
+ *
+ * You can customize the checkbox appearance using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *   --vtx-checkbox-color: #1976d2;
+ *   --vtx-checkbox-size: 20px;
+ *   --vtx-checkbox-border-width: 2px;
+ *   --vtx-checkbox-border-radius: 4px;
+ * }
+ * ```
+ *
+ * @example
+ * Basic checkbox
+ * ```tsx
+ * <Checkbox label="Accept terms and conditions" />
+ * ```
+ *
+ * @example
+ * Controlled checkbox with size
+ * ```tsx
+ * const [checked, setChecked] = useState(false);
+ * <Checkbox
+ *   checked={checked}
+ *   onChange={(e) => setChecked(e.target.checked)}
+ *   label="Subscribe to newsletter"
+ *   size="lg"
+ *   variant="secondary"
+ * />
+ * ```
+ *
+ * @example
+ * With error state
+ * ```tsx
+ * <Checkbox
+ *   label="I agree"
+ *   error
+ *   helperText="You must agree to continue"
+ * />
+ * ```
+ *
+ * @example
+ * Indeterminate state
+ * ```tsx
+ * <Checkbox
+ *   label="Select all"
+ *   indeterminate
+ * />
+ * ```
+ */
+const Checkbox = React__default.forwardRef(({ checked, indeterminate = false, disabled = false, label, size, variant = 'primary', error = false, helperText, onChange, className = '', inputClassName = '', id, ...props }, ref) => {
+    // Get theme default size if size prop is not provided
+    const { theme } = useThemeContext();
+    const checkboxSize = size || theme.defaultSize || 'md';
+    const generatedId = useId();
+    const checkboxId = id || generatedId;
+    // Build class names
+    const containerClassNames = [
+        'vtx-checkbox',
+        `vtx-checkbox--${checkboxSize}`,
+        `vtx-checkbox--${variant}`,
+        disabled && 'vtx-checkbox--disabled',
+        error && 'vtx-checkbox--error',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const inputClassNames = ['vtx-checkbox-input', inputClassName].filter(Boolean).join(' ');
+    // Handle ref for indeterminate state
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    return (jsxs("div", { className: containerClassNames, children: [jsxs("label", { className: "vtx-checkbox-label", htmlFor: checkboxId, children: [jsxs("span", { className: "vtx-checkbox-wrapper", children: [jsx("input", { ref: inputRef, type: "checkbox", id: checkboxId, className: inputClassNames, checked: checked, disabled: disabled, onChange: onChange, ...props }), jsxs("span", { className: "vtx-checkbox-box", children: [jsx("svg", { className: "vtx-checkbox-icon vtx-checkbox-icon--check", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("svg", { className: "vtx-checkbox-icon vtx-checkbox-icon--indeterminate", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M5 12H19", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" }) })] })] }), label && jsx("span", { className: "vtx-checkbox-label-text", children: label })] }), helperText && jsx("div", { className: "vtx-checkbox-helper-text", children: helperText })] }));
+});
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox, Checkbox as default };
+//# sourceMappingURL=Checkbox.js.map

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

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

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

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

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

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

package/dist/esm/components/CheckboxGroup/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import Checkbox from '../../../Checkbox/components/Checkbox/Checkbox.js';
+import { useThemeContext } from '../../../../theme/theme/ThemeProvider.js';
+
+/**
+ * CheckboxGroup component - Manages a group of related checkboxes
+ *
+ * The CheckboxGroup component provides a convenient way to manage multiple
+ * checkboxes with shared state, labels, and error handling.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <CheckboxGroup
+ *   label="Select your interests"
+ *   options={[
+ *     { value: 'sports', label: 'Sports' },
+ *     { value: 'music', label: 'Music' },
+ *     { value: 'travel', label: 'Travel' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * Controlled mode
+ * ```tsx
+ * const [selected, setSelected] = useState(['sports']);
+ * <CheckboxGroup
+ *   label="Interests"
+ *   options={options}
+ *   value={selected}
+ *   onChange={setSelected}
+ * />
+ * ```
+ *
+ * @example
+ * Horizontal layout
+ * ```tsx
+ * <CheckboxGroup
+ *   label="Preferences"
+ *   options={options}
+ *   orientation="horizontal"
+ * />
+ * ```
+ *
+ * @example
+ * With error state
+ * ```tsx
+ * <CheckboxGroup
+ *   label="Required selection"
+ *   options={options}
+ *   error
+ *   helperText="Please select at least one option"
+ * />
+ * ```
+ */
+const CheckboxGroup = React__default.forwardRef(({ label, options, value: controlledValue, defaultValue, onChange, disabled = false, error = false, helperText, orientation = 'vertical', size, className = '', ...props }, ref) => {
+    // Get theme default size if size prop is not provided
+    const { theme } = useThemeContext();
+    const groupSize = size || theme.defaultSize || 'md';
+    // Internal state for uncontrolled mode
+    const [internalValue, setInternalValue] = useState(defaultValue || []);
+    // Determine if component is controlled
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    // Handle checkbox change
+    const handleChange = (checkboxValue, checked) => {
+        const newValue = checked
+            ? [...currentValue, checkboxValue]
+            : currentValue.filter((v) => v !== checkboxValue);
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    // Build class names
+    const classNames = [
+        'vtx-checkbox-group',
+        `vtx-checkbox-group--${orientation}`,
+        error && 'vtx-checkbox-group--error',
+        disabled && 'vtx-checkbox-group--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (jsxs("div", { ref: ref, className: classNames, ...props, children: [label && jsx("div", { className: "vtx-checkbox-group-label", children: label }), jsx("div", { className: "vtx-checkbox-group-options", children: options.map((option) => {
+                    const isChecked = currentValue.includes(option.value);
+                    const isDisabled = disabled || option.disabled;
+                    return (jsx(Checkbox, { label: option.label, checked: isChecked, disabled: isDisabled, error: error, size: groupSize, onChange: (e) => handleChange(option.value, e.target.checked) }, option.value));
+                }) }), helperText && jsx("div", { className: "vtx-checkbox-group-helper-text", children: helperText })] }));
+});
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+export { CheckboxGroup, CheckboxGroup as default };
+//# sourceMappingURL=CheckboxGroup.js.map

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

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

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

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

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

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

package/dist/esm/components/Chip/components/Chip/Chip.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CloseSmallIcon } from '../../../../icons/icons/IconComponents.js';
+import React__default from 'react';
+
+/**
+ * Chip component - Compact element for displaying tags, labels, or selections
+ *
+ * A versatile chip component for representing small pieces of information like tags,
+ * filters, selections, or categories with optional delete functionality.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Chip label="React" />
+ * ```
+ *
+ * @example
+ * With delete functionality
+ * ```tsx
+ * <Chip
+ *   label="JavaScript"
+ *   onDelete={() => handleRemove('js')}
+ * />
+ * ```
+ *
+ * @example
+ * With avatar
+ * ```tsx
+ * <Chip
+ *   label="John Doe"
+ *   avatar="https://avatar.url/john.jpg"
+ *   variant="outlined"
+ * />
+ * ```
+ */
+const Chip = React__default.forwardRef(({ label, size = 'md', variant = 'filled', color = 'default', icon, avatar, onDelete, onClick, disabled = false, className = '', 'aria-label': ariaLabel, 'data-testid': dataTestId }, ref) => {
+    const chipClassNames = [
+        'vtx-chip',
+        `vtx-chip--${size}`,
+        `vtx-chip--${variant}`,
+        `vtx-chip--${color}`,
+        onClick && !disabled && 'vtx-chip--clickable',
+        disabled && 'vtx-chip--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const handleClick = (event) => {
+        if (!disabled && onClick) {
+            onClick(event);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (!disabled && onClick && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            onClick(event);
+        }
+    };
+    const handleDeleteClick = (event) => {
+        event.stopPropagation();
+        if (!disabled && onDelete) {
+            onDelete(event);
+        }
+    };
+    const handleDeleteKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!disabled && onDelete) {
+                onDelete(event);
+            }
+        }
+    };
+    return (jsxs("div", { ref: ref, className: chipClassNames, onClick: handleClick, onKeyDown: handleKeyDown, role: onClick ? 'button' : undefined, tabIndex: onClick && !disabled ? 0 : undefined, "aria-label": ariaLabel || label, "aria-disabled": disabled, "data-testid": dataTestId, children: [avatar && jsx("img", { src: avatar, alt: "", className: "vtx-chip__avatar", "aria-hidden": "true" }), icon && !avatar && (jsx("span", { className: "vtx-chip__icon", "aria-hidden": "true", children: icon })), jsx("span", { className: "vtx-chip__label", children: label }), onDelete && (jsx("button", { type: "button", className: "vtx-chip__delete", onClick: handleDeleteClick, onKeyDown: handleDeleteKeyDown, disabled: disabled, "aria-label": `Remove ${label}`, tabIndex: -1, children: jsx(CloseSmallIcon, { size: 16 }) }))] }));
+});
+Chip.displayName = 'Chip';
+
+export { Chip, Chip as default };
+//# sourceMappingURL=Chip.js.map

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

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

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

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

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

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

package/dist/esm/components/Container/components/Container/Container.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+
+/**
+ * Container component - A responsive container that centers content
+ *
+ * Similar to Bootstrap's container, this component provides a responsive
+ * fixed-width container with automatic margins and padding.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Container>
+ *   <h1>Hello World</h1>
+ *   <p>Content goes here...</p>
+ * </Container>
+ * ```
+ *
+ * @example
+ * Fluid container (full width)
+ * ```tsx
+ * <Container fluid>
+ *   <p>This spans the full width</p>
+ * </Container>
+ * ```
+ *
+ * @example
+ * Custom max width
+ * ```tsx
+ * <Container maxWidth="sm">
+ *   <p>Smaller container for forms</p>
+ * </Container>
+ * ```
+ *
+ * @example
+ * Without gutters
+ * ```tsx
+ * <Container disableGutters>
+ *   <p>No horizontal padding</p>
+ * </Container>
+ * ```
+ */
+const Container = React__default.forwardRef(({ maxWidth = 'lg', disableGutters = false, fluid = false, className = '', children, ...props }, ref) => {
+    const containerClassNames = [
+        'vtx-container',
+        fluid || maxWidth === 'fluid' ? 'vtx-container--fluid' : `vtx-container--${maxWidth}`,
+        disableGutters && 'vtx-container--no-gutters',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (jsx("div", { ref: ref, className: containerClassNames, ...props, children: children }));
+});
+Container.displayName = 'Container';
+
+export { Container, Container as default };
+//# sourceMappingURL=Container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sources":["../../../../../../src/components/Container/Container.tsx"],"sourcesContent":[null],"names":["React","_jsx"],"mappings":";;;AAqCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCG;AACH,MAAM,SAAS,GAAGA,cAAK,CAAC,UAAU,CAChC,CACE,EACE,QAAQ,GAAG,IAAI,EACf,cAAc,GAAG,KAAK,EACtB,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,mBAAmB,GAAG;QAC1B,eAAe;AACf,QAAA,KAAK,IAAI,QAAQ,KAAK,OAAO,GAAG,sBAAsB,GAAG,CAAA,eAAA,EAAkB,QAAQ,CAAE,CAAA;AACrF,QAAA,cAAc,IAAI,2BAA2B;QAC7C,SAAS;AACV,KAAA;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;AAEb,IAAA,QACEC,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,mBAAmB,KAAM,KAAK,EAAA,QAAA,EACrD,QAAQ,EAAA,CACL,EACN;AACJ,CAAC,EACD;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

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

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

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

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