@revikornmann/muka-ui 0.2.1

package/dist/esm/components/Avatar/Avatar.css

@@ -0,0 +1,266 @@
+/* Avatar Component Styles - Using Muka Design Tokens */
+
+/* Base avatar styles */
+.muka-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  user-select: none;
+  vertical-align: middle;
+  background-color: var(--avatar-color-background-default);
+  color: var(--avatar-color-foreground-default);
+  border: var(--avatar-border-width) solid var(--avatar-color-border-default);
+  font-family: var(--alias-font-brand-family);
+  font-weight: var(--alias-font-brand-weight-semibold);
+}
+
+/* Size variants */
+.muka-avatar--xs {
+  width: var(--avatar-size-xs);
+  height: var(--avatar-size-xs);
+  font-size: var(--avatar-font-size-xs);
+}
+
+.muka-avatar--sm {
+  width: var(--avatar-size-sm);
+  height: var(--avatar-size-sm);
+  font-size: var(--avatar-font-size-sm);
+}
+
+.muka-avatar--md {
+  width: var(--avatar-size-md);
+  height: var(--avatar-size-md);
+  font-size: var(--avatar-font-size-md);
+}
+
+.muka-avatar--lg {
+  width: var(--avatar-size-lg);
+  height: var(--avatar-size-lg);
+  font-size: var(--avatar-font-size-lg);
+}
+
+.muka-avatar--xl {
+  width: var(--avatar-size-xl);
+  height: var(--avatar-size-xl);
+  font-size: var(--avatar-font-size-xl);
+}
+
+/* Shape variants */
+.muka-avatar--circle {
+  border-radius: var(--avatar-radius-circle);
+}
+
+.muka-avatar--square {
+  border-radius: var(--avatar-radius-square);
+}
+
+/* Clickable state */
+.muka-avatar--clickable {
+  cursor: pointer;
+  transition: opacity 0.2s ease, box-shadow 0.2s ease;
+  border: none;
+  background: none;
+  padding: 0;
+}
+
+.muka-avatar--clickable:hover {
+  opacity: 0.9;
+}
+
+.muka-avatar--clickable:active {
+  opacity: 0.8;
+}
+
+.muka-avatar--clickable:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Loading state */
+.muka-avatar--loading {
+  background-color: var(--avatar-color-background-loading);
+}
+
+.muka-avatar__skeleton {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color-surface-level1) 50%,
+    transparent 100%
+  );
+  animation: avatar-loading 1.5s ease-in-out infinite;
+}
+
+@keyframes avatar-loading {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Avatar content */
+.muka-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.muka-avatar__icon {
+  width: 60%;
+  height: 60%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.muka-avatar__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.muka-avatar__initials {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-transform: uppercase;
+  line-height: 1;
+}
+
+.muka-avatar__fallback {
+  width: 60%;
+  height: 60%;
+  color: var(--avatar-color-foreground-muted);
+}
+
+.muka-avatar__overflow-count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: inherit;
+  line-height: 1;
+}
+
+/* Status indicator */
+.muka-avatar__status {
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid var(--color-surface-level1);
+  box-sizing: border-box;
+}
+
+.muka-avatar--xs .muka-avatar__status {
+  width: var(--avatar-status-size-xs);
+  height: var(--avatar-status-size-xs);
+}
+
+.muka-avatar--sm .muka-avatar__status {
+  width: var(--avatar-status-size-sm);
+  height: var(--avatar-status-size-sm);
+}
+
+.muka-avatar--md .muka-avatar__status {
+  width: var(--avatar-status-size-md);
+  height: var(--avatar-status-size-md);
+}
+
+.muka-avatar--lg .muka-avatar__status {
+  width: var(--avatar-status-size-lg);
+  height: var(--avatar-status-size-lg);
+}
+
+.muka-avatar--xl .muka-avatar__status {
+  width: var(--avatar-status-size-xl);
+  height: var(--avatar-status-size-xl);
+}
+
+/* Status positioning */
+.muka-avatar__status--top-right {
+  top: 0;
+  right: 0;
+}
+
+.muka-avatar__status--bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+/* Status colors */
+.muka-avatar__status--online {
+  background-color: var(--avatar-color-status-online);
+}
+
+.muka-avatar__status--offline {
+  background-color: var(--avatar-color-status-offline);
+}
+
+.muka-avatar__status--busy {
+  background-color: var(--avatar-color-status-busy);
+}
+
+.muka-avatar__status--away {
+  background-color: var(--avatar-color-status-away);
+}
+
+/* Avatar Group */
+.muka-avatar-group {
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.muka-avatar-group__item {
+  position: relative;
+  display: inline-flex;
+  border: 2px solid var(--color-surface-level1);
+  border-radius: inherit;
+}
+
+/* Add border radius to match avatar shape */
+.muka-avatar-group__item .muka-avatar--circle {
+  border-radius: var(--avatar-radius-circle);
+}
+
+.muka-avatar-group__item .muka-avatar--square {
+  border-radius: var(--avatar-radius-square);
+}
+
+.muka-avatar-group__item .muka-avatar {
+  border: none;
+}
+
+/* Spacing variants for avatar group */
+.muka-avatar-group--tight .muka-avatar-group__item:not(:first-child) {
+  margin-left: calc(var(--avatar-group-spacing-tight));
+}
+
+.muka-avatar-group--normal .muka-avatar-group__item:not(:first-child) {
+  margin-left: calc(var(--avatar-group-spacing-normal));
+}
+
+/* Z-index stacking for overlap effect */
+.muka-avatar-group__item {
+  z-index: 0;
+}
+
+.muka-avatar-group__item:hover {
+  z-index: 10;
+}
+
+/* Overflow avatar styling */
+.muka-avatar--overflow {
+  background-color: var(--avatar-color-background-default);
+  color: var(--avatar-color-foreground-default);
+  font-weight: var(--alias-font-brand-weight-semibold);
+}

package/dist/esm/components/Avatar/Avatar.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { warnMissingA11yProp } from '../../utils/accessibility';
+import './Avatar.css';
+/**
+ * Generate initials from a name string
+ */
+function getInitials(name) {
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1) {
+        return parts[0].charAt(0).toUpperCase();
+    }
+    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+/**
+ * Avatar Component
+ *
+ * Displays user representation with multiple fallback options:
+ * 1. Image (src) - Primary display if available
+ * 2. Icon (icon) - Custom icon fallback
+ * 3. Initials (name) - Generated from name
+ * 4. Default icon - Generic user icon
+ *
+ * Features:
+ * - 5 sizes: xs, sm, md, lg, xl
+ * - 2 shapes: circle, square
+ * - Status indicators: online, offline, busy, away
+ * - Loading and error states
+ * - Clickable support
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - Requires alt text when using image
+ * - Uses role="img" with aria-label for non-image avatars
+ * - Status indicators include aria-label
+ * - Clickable avatars use role="button" with keyboard support
+ */
+export const Avatar = ({ src, alt, icon, name, size = 'md', shape = 'circle', status, statusPosition = 'bottom-right', onClick, className = '', 'aria-label': ariaLabel, }) => {
+    const [imageError, setImageError] = useState(false);
+    const [imageLoading, setImageLoading] = useState(!!src);
+    // Warn if src provided without alt
+    warnMissingA11yProp('Avatar', !!(src && !alt), 'Avatar with src requires alt text for accessibility');
+    const handleImageLoad = () => {
+        setImageLoading(false);
+    };
+    const handleImageError = () => {
+        setImageError(true);
+        setImageLoading(false);
+    };
+    const handleClick = () => {
+        if (onClick) {
+            onClick();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            onClick();
+        }
+    };
+    const avatarClasses = [
+        'muka-avatar',
+        `muka-avatar--${size}`,
+        `muka-avatar--${shape}`,
+        onClick && 'muka-avatar--clickable',
+        imageLoading && 'muka-avatar--loading',
+        className,
+    ].filter(Boolean).join(' ');
+    const statusClasses = [
+        'muka-avatar__status',
+        `muka-avatar__status--${status}`,
+        `muka-avatar__status--${statusPosition}`,
+    ].filter(Boolean).join(' ');
+    // Determine what to display (fallback chain)
+    const showImage = src && !imageError;
+    const showIcon = !showImage && icon;
+    const showInitials = !showImage && !showIcon && name;
+    const showFallback = !showImage && !showIcon && !showInitials;
+    // Generate accessible label
+    const computedAriaLabel = ariaLabel || (name ? `${name}` : alt || 'User avatar');
+    const statusLabels = {
+        online: 'Online',
+        offline: 'Offline',
+        busy: 'Busy',
+        away: 'Away',
+    };
+    const WrapperTag = onClick ? 'button' : 'div';
+    const wrapperProps = onClick ? {
+        type: 'button',
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        'aria-label': computedAriaLabel,
+    } : {
+        role: 'img',
+        'aria-label': computedAriaLabel,
+    };
+    return (_jsxs(WrapperTag, { className: avatarClasses, ...wrapperProps, children: [showImage && (_jsx("img", { src: src, alt: alt, className: "muka-avatar__image", onLoad: handleImageLoad, onError: handleImageError })), showIcon && (_jsx("span", { className: "muka-avatar__icon", "aria-hidden": "true", children: icon })), showInitials && (_jsx("span", { className: "muka-avatar__initials", "aria-hidden": "true", children: getInitials(name) })), showFallback && (_jsx("svg", { className: "muka-avatar__fallback", "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" }) })), imageLoading && (_jsx("span", { className: "muka-avatar__skeleton", "aria-hidden": "true" })), status && (_jsx("span", { className: statusClasses, "aria-label": statusLabels[status], role: "status" }))] }));
+};
+export default Avatar;
+//# sourceMappingURL=Avatar.js.map

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

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

package/dist/esm/components/Avatar/AvatarGroup.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Children } from 'react';
+import './Avatar.css';
+/**
+ * AvatarGroup Component
+ *
+ * Displays a horizontal stack of avatars with overlap.
+ * When there are more avatars than `max`, shows remaining count as "+N".
+ *
+ * Features:
+ * - Configurable max visible avatars
+ * - Two spacing modes: tight, normal
+ * - Size propagation to child avatars
+ * - Overflow counter display
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - Uses role="group" with aria-label
+ * - Overflow count includes accessible label
+ */
+export const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'normal', className = '', 'aria-label': ariaLabel = 'Avatar group', ...props }) => {
+    const childArray = Children.toArray(children);
+    const totalCount = childArray.length;
+    const visibleCount = Math.min(max, totalCount);
+    const overflowCount = Math.max(0, totalCount - max);
+    const visibleChildren = childArray.slice(0, visibleCount);
+    const groupClasses = [
+        'muka-avatar-group',
+        `muka-avatar-group--${spacing}`,
+        `muka-avatar-group--${size}`,
+        className,
+    ].filter(Boolean).join(' ');
+    const overflowClasses = [
+        'muka-avatar',
+        'muka-avatar--overflow',
+        `muka-avatar--${size}`,
+        'muka-avatar--circle',
+    ].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: groupClasses, role: "group", "aria-label": ariaLabel, ...props, children: [visibleChildren.map((child, index) => {
+                if (!React.isValidElement(child)) {
+                    return child;
+                }
+                // Clone child and inject size prop if not already set
+                return (_jsx("div", { className: "muka-avatar-group__item", children: React.cloneElement(child, {
+                        size: child.props.size || size,
+                        ...child.props,
+                    }) }, index));
+            }), overflowCount > 0 && (_jsx("div", { className: "muka-avatar-group__item", children: _jsx("div", { className: overflowClasses, role: "img", "aria-label": `${overflowCount} more ${overflowCount === 1 ? 'person' : 'people'}`, children: _jsxs("span", { className: "muka-avatar__overflow-count", children: ["+", overflowCount] }) }) }))] }));
+};
+export default AvatarGroup;
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/esm/components/Avatar/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,cAAc,CAAC;AAsBtB;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,EACR,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,QAAQ,EAClB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GAAG,cAAc,EACxC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC;IACrC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,GAAG,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG;QACnB,mBAAmB;QACnB,sBAAsB,OAAO,EAAE;QAC/B,sBAAsB,IAAI,EAAE;QAC5B,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,eAAe,GAAG;QACtB,aAAa;QACb,uBAAuB;QACvB,gBAAgB,IAAI,EAAE;QACtB,qBAAqB;KACtB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,eACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,OAAO,gBACA,SAAS,KACjB,KAAK,aAER,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACpC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;oBACjC,OAAO,KAAK,CAAC;gBACf,CAAC;gBAED,sDAAsD;gBACtD,OAAO,CACL,cAAiB,SAAS,EAAC,yBAAyB,YACjD,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;wBACzB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI;wBAC9B,GAAG,KAAK,CAAC,KAAK;qBACY,CAAC,IAJrB,KAAK,CAKT,CACP,CAAC;YACJ,CAAC,CAAC,EAED,aAAa,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,yBAAyB,YACtC,cACE,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAC,KAAK,gBACE,GAAG,aAAa,SAAS,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,YAEhF,gBAAM,SAAS,EAAC,6BAA6B,kBACzC,aAAa,IACV,GACH,GACF,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export { AvatarGroup } from './AvatarGroup';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/components/Badge/Badge.css

@@ -0,0 +1,132 @@
+/* Badge Component Styles - Using Muka Design Tokens */
+
+.muka-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  border-radius: var(--border-radius-full);
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+/* Sizes */
+.muka-badge--sm {
+  height: var(--badge-size-height-sm);
+  padding: 0 var(--spacing-2);
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-badge--md {
+  height: var(--badge-size-height-md);
+  padding: 0 var(--spacing-2);
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-badge--lg {
+  height: var(--badge-size-height-lg);
+  padding: 0 var(--spacing-3);
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+/* Icon slot */
+.muka-badge__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+}
+
+.muka-badge__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Dot indicator */
+.muka-badge__dot {
+  flex-shrink: 0;
+  border-radius: var(--border-radius-full);
+}
+
+.muka-badge--sm .muka-badge__dot {
+  width: var(--badge-size-dot-sm);
+  height: var(--badge-size-dot-sm);
+}
+
+.muka-badge--md .muka-badge__dot {
+  width: var(--badge-size-dot-md);
+  height: var(--badge-size-dot-md);
+}
+
+.muka-badge--lg .muka-badge__dot {
+  width: var(--badge-size-dot-lg);
+  height: var(--badge-size-dot-lg);
+}
+
+.muka-badge__label {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Neutral variant */
+.muka-badge--neutral {
+  background-color: var(--color-surface-level1);
+  color: var(--color-text-default-default);
+}
+
+.muka-badge--neutral .muka-badge__dot {
+  background-color: var(--color-text-subtle-default);
+}
+
+/* Info variant */
+.muka-badge--info {
+  background-color: var(--color-state-info-background);
+  color: var(--color-state-info-foreground);
+}
+
+.muka-badge--info .muka-badge__dot {
+  background-color: var(--color-state-info-foreground);
+}
+
+/* Success variant */
+.muka-badge--success {
+  background-color: var(--color-state-success-background);
+  color: var(--color-state-success-foreground);
+}
+
+.muka-badge--success .muka-badge__dot {
+  background-color: var(--color-state-success-foreground);
+}
+
+/* Warning variant */
+.muka-badge--warning {
+  background-color: var(--color-state-warning-background);
+  color: var(--color-state-warning-foreground);
+}
+
+.muka-badge--warning .muka-badge__dot {
+  background-color: var(--color-state-warning-foreground);
+}
+
+/* Error variant */
+.muka-badge--error {
+  background-color: var(--color-state-error-background);
+  color: var(--color-state-error-foreground);
+}
+
+.muka-badge--error .muka-badge__dot {
+  background-color: var(--color-state-error-foreground);
+}

package/dist/esm/components/Badge/Badge.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Badge.css';
+/**
+ * Badge Component
+ *
+ * Compact status indicators for labels, counts, and status information.
+ * Unlike Chip, badges are non-interactive and non-dismissible.
+ *
+ * Variants: neutral, info, success, warning, error
+ * Sizes: sm, md, lg
+ * Features: optional leading icon or dot indicator
+ */
+export const Badge = ({ children, variant = 'neutral', size = 'md', icon, dot = false, className = '', 'aria-label': ariaLabel, ...props }) => {
+    const badgeClasses = [
+        'muka-badge',
+        `muka-badge--${variant}`,
+        `muka-badge--${size}`,
+        className,
+    ].filter(Boolean).join(' ');
+    return (_jsxs("span", { className: badgeClasses, role: "status", "aria-label": ariaLabel, ...props, children: [dot && _jsx("span", { className: "muka-badge__dot", "aria-hidden": "true" }), !dot && icon && _jsx("span", { className: "muka-badge__icon", "aria-hidden": "true", children: icon }), _jsx("span", { className: "muka-badge__label", children: children })] }));
+};
+export default Badge;
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../components/Badge/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,CAAC;AAyBrB;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAC1C,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,GAAG,GAAG,KAAK,EACX,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,YAAY,GAAG;QACnB,YAAY;QACZ,eAAe,OAAO,EAAE;QACxB,eAAe,IAAI,EAAE;QACrB,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,gBACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,QAAQ,gBACD,SAAS,KACjB,KAAK,aAER,GAAG,IAAI,eAAM,SAAS,EAAC,iBAAiB,iBAAa,MAAM,GAAG,EAC9D,CAAC,GAAG,IAAI,IAAI,IAAI,eAAM,SAAS,EAAC,kBAAkB,iBAAa,MAAM,YAAE,IAAI,GAAQ,EACpF,eAAM,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAQ,IAChD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}