@revikornmann/muka-ui 0.2.1

package/dist/esm/components/DocumentViewer/DocumentViewer.css

@@ -0,0 +1,276 @@
+/* DocumentViewer Component Styles - Using Muka Design Tokens */
+
+.muka-documentviewer {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--documentviewer-container-background);
+  border-radius: var(--documentviewer-container-borderRadius);
+  overflow: hidden;
+  position: relative;
+}
+
+.muka-documentviewer--fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  border-radius: 0;
+}
+
+/* Toolbar */
+.muka-documentviewer__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--documentviewer-toolbar-height);
+  padding: var(--documentviewer-toolbar-padding-y) var(--documentviewer-toolbar-padding-x);
+  background-color: var(--documentviewer-toolbar-background);
+  border-bottom: 1px solid var(--documentviewer-toolbar-border);
+  gap: var(--documentviewer-toolbar-gap);
+  flex-shrink: 0;
+}
+
+.muka-documentviewer__toolbar-section {
+  display: flex;
+  align-items: center;
+  gap: var(--documentviewer-toolbar-gap);
+}
+
+.muka-documentviewer__toolbar-section--center {
+  flex: 1;
+  justify-content: center;
+}
+
+.muka-documentviewer__toolbar-section--end {
+  justify-content: flex-end;
+}
+
+/* Page navigation */
+.muka-documentviewer__page-input {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.muka-documentviewer__page-number {
+  width: 3rem;
+  padding: var(--spacing-1) var(--spacing-2);
+  text-align: center;
+  font-family: var(--alias-font-brand-family);
+  font-size: var(--text-label-sm-fontSize);
+  line-height: var(--text-label-sm-lineHeight);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-surface-default);
+  color: var(--color-text-default-default);
+}
+
+.muka-documentviewer__page-number:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 0;
+  border-color: var(--color-border-focus);
+}
+
+.muka-documentviewer__page-total {
+  font-family: var(--alias-font-brand-family);
+  font-size: var(--text-label-sm-fontSize);
+  color: var(--color-text-subtle-default);
+}
+
+/* Zoom controls */
+.muka-documentviewer__zoom-display {
+  min-width: var(--documentviewer-zoom-button-width);
+  padding: var(--spacing-1) var(--spacing-2);
+  font-family: var(--alias-font-brand-family);
+  font-size: var(--text-label-sm-fontSize);
+  font-weight: var(--alias-font-brand-weight-semibold);
+  color: var(--color-text-default-default);
+  background: transparent;
+  border: none;
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.muka-documentviewer__zoom-display:hover {
+  background-color: var(--color-surface-level2);
+}
+
+.muka-documentviewer__zoom-display:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 0;
+}
+
+/* Content area */
+.muka-documentviewer__content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.muka-documentviewer__main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Canvas */
+.muka-documentviewer__canvas {
+  flex: 1;
+  background-color: var(--documentviewer-canvas-background);
+  padding: var(--documentviewer-canvas-padding);
+  overflow: auto;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.muka-documentviewer__page {
+  background-color: var(--documentviewer-page-background);
+  box-shadow: var(--documentviewer-page-shadow);
+  border-radius: var(--documentviewer-page-borderRadius);
+  overflow: hidden;
+}
+
+.muka-documentviewer__page canvas {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.muka-documentviewer__page-number {
+  text-align: center;
+  padding: var(--spacing-2);
+  font-family: var(--alias-font-brand-family);
+  font-size: var(--text-label-sm-fontSize);
+  color: var(--color-text-subtle-default);
+}
+
+/* Thumbnails */
+.muka-documentviewer__thumbnails {
+  width: var(--documentviewer-thumbnails-width);
+  background-color: var(--documentviewer-thumbnails-background);
+  border-right: 1px solid var(--documentviewer-thumbnails-border);
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.muka-documentviewer__thumbnails-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--documentviewer-thumbnails-item-gap);
+  padding: var(--spacing-2);
+}
+
+.muka-documentviewer__thumbnail-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--documentviewer-thumbnails-item-padding);
+  border-radius: var(--documentviewer-thumbnails-item-borderRadius);
+  border: 2px solid var(--documentviewer-thumbnails-item-border-default);
+  background-color: var(--documentviewer-thumbnails-item-background-default);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 100%;
+}
+
+.muka-documentviewer__thumbnail-item:hover {
+  background-color: var(--documentviewer-thumbnails-item-background-hover);
+}
+
+.muka-documentviewer__thumbnail-item--selected {
+  background-color: var(--documentviewer-thumbnails-item-background-selected);
+  border-color: var(--documentviewer-thumbnails-item-border-selected);
+}
+
+.muka-documentviewer__thumbnail-item:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.muka-documentviewer__thumbnail-preview {
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--border-radius-sm);
+}
+
+.muka-documentviewer__thumbnail-preview canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.muka-documentviewer__thumbnail-label {
+  font-family: var(--alias-font-brand-family);
+  font-size: var(--text-label-xs-fontSize);
+  color: var(--color-text-default-default);
+  font-weight: var(--alias-font-brand-weight-medium);
+}
+
+/* Loading state */
+.muka-documentviewer__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  background-color: var(--documentviewer-loading-overlay-background);
+}
+
+/* Error state */
+.muka-documentviewer__error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: var(--spacing-4);
+  background-color: var(--documentviewer-error-background);
+}
+
+/* Accessibility - visually hidden */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* React-PDF specific styles */
+.react-pdf__Document {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.react-pdf__Page {
+  max-width: 100%;
+  box-shadow: var(--documentviewer-page-shadow);
+  border-radius: var(--documentviewer-page-borderRadius);
+  overflow: hidden;
+}
+
+.react-pdf__Page__canvas {
+  max-width: 100%;
+  height: auto !important;
+  display: block;
+}
+
+.react-pdf__Page__textContent {
+  max-width: 100%;
+}
+
+.react-pdf__Page__annotations {
+  max-width: 100%;
+}

package/dist/esm/components/DocumentViewer/DocumentViewer.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { DocumentToolbar } from './DocumentToolbar';
+import { DocumentCanvas } from './DocumentCanvas';
+import { DocumentThumbnails } from './DocumentThumbnails';
+import { Progress } from '../Progress';
+import { Alert } from '../Alert';
+import './DocumentViewer.css';
+/**
+ * DocumentViewer Component
+ *
+ * A comprehensive viewer for PDFs, images, and other documents.
+ * Supports zoom, page navigation, thumbnails, and various actions.
+ *
+ * Features:
+ * - PDF rendering with react-pdf
+ * - Image viewing with zoom/pan
+ * - Toolbar with zoom controls and actions
+ * - Optional thumbnail sidebar
+ * - Loading and error states
+ * - Keyboard navigation
+ * - Fullscreen mode
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - Keyboard navigation (arrows for pages, +/- for zoom)
+ * - Focus management
+ * - Screen reader announcements
+ * - ARIA labels on all controls
+ */
+export const DocumentViewer = ({ src, type = 'auto', initialPage = 1, initialZoom = 1, showToolbar = true, showThumbnails = false, showPageNumbers = true, allowDownload = false, allowPrint = false, allowFullscreen = false, onPageChange, onZoomChange, onLoad, onError, height = 600, className = '', }) => {
+    const [currentPage, setCurrentPage] = useState(initialPage);
+    const [zoom, setZoom] = useState(initialZoom);
+    const [metadata, setMetadata] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const containerRef = useRef(null);
+    const detectedType = type === 'auto' ? detectFileType(src) : type;
+    useEffect(() => {
+        setCurrentPage(initialPage);
+    }, [initialPage]);
+    useEffect(() => {
+        setZoom(initialZoom);
+    }, [initialZoom]);
+    const handlePageChange = useCallback((page) => {
+        if (metadata && page >= 1 && page <= metadata.totalPages) {
+            setCurrentPage(page);
+            onPageChange?.(page);
+        }
+    }, [metadata, onPageChange]);
+    const handleZoomChange = useCallback((newZoom) => {
+        const clampedZoom = Math.min(Math.max(0.25, newZoom), 5);
+        setZoom(clampedZoom);
+        onZoomChange?.(clampedZoom);
+    }, [onZoomChange]);
+    const handleLoad = useCallback((meta) => {
+        setMetadata(meta);
+        setIsLoading(false);
+        onLoad?.(meta);
+    }, [onLoad]);
+    const handleError = useCallback((err) => {
+        setError(err);
+        setIsLoading(false);
+        onError?.(err);
+    }, [onError]);
+    const handleDownload = useCallback(() => {
+        const link = document.createElement('a');
+        link.href = src;
+        link.download = extractFilename(src);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }, [src]);
+    const handlePrint = useCallback(() => {
+        window.print();
+    }, []);
+    const handleFullscreen = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        if (!isFullscreen) {
+            if (containerRef.current.requestFullscreen) {
+                containerRef.current.requestFullscreen();
+            }
+        }
+        else {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            }
+        }
+        setIsFullscreen(!isFullscreen);
+    }, [isFullscreen]);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (!metadata)
+                return;
+            switch (e.key) {
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    e.preventDefault();
+                    handlePageChange(currentPage - 1);
+                    break;
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    e.preventDefault();
+                    handlePageChange(currentPage + 1);
+                    break;
+                case '+':
+                case '=':
+                    e.preventDefault();
+                    handleZoomChange(zoom + 0.25);
+                    break;
+                case '-':
+                case '_':
+                    e.preventDefault();
+                    handleZoomChange(zoom - 0.25);
+                    break;
+                case '0':
+                    if (e.ctrlKey || e.metaKey) {
+                        e.preventDefault();
+                        handleZoomChange(1);
+                    }
+                    break;
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [currentPage, zoom, metadata, handlePageChange, handleZoomChange]);
+    const containerClasses = [
+        'muka-documentviewer',
+        isFullscreen && 'muka-documentviewer--fullscreen',
+        showThumbnails && 'muka-documentviewer--with-thumbnails',
+        className,
+    ].filter(Boolean).join(' ');
+    const containerStyle = {
+        height: typeof height === 'number' ? `${height}px` : height,
+    };
+    return (_jsxs("div", { ref: containerRef, className: containerClasses, style: containerStyle, role: "region", "aria-label": "Document viewer", children: [showToolbar && metadata && (_jsx(DocumentToolbar, { currentPage: currentPage, totalPages: metadata.totalPages, zoom: zoom, onPageChange: handlePageChange, onZoomChange: handleZoomChange, onDownload: allowDownload ? handleDownload : undefined, onPrint: allowPrint ? handlePrint : undefined, onFullscreen: allowFullscreen ? handleFullscreen : undefined })), _jsxs("div", { className: "muka-documentviewer__content", children: [showThumbnails && metadata && detectedType === 'pdf' && (_jsx(DocumentThumbnails, { src: src, totalPages: metadata.totalPages, currentPage: currentPage, onPageClick: handlePageChange })), _jsxs("div", { className: "muka-documentviewer__main", children: [isLoading && (_jsx("div", { className: "muka-documentviewer__loading", role: "status", children: _jsx(Progress, { indeterminate: true, variant: "circle", size: "lg", "aria-label": "Loading document" }) })), error && (_jsx("div", { className: "muka-documentviewer__error", children: _jsx(Alert, { variant: "error", title: "Failed to load document", children: error.message }) })), !error && (_jsx(DocumentCanvas, { src: src, type: detectedType, currentPage: currentPage, zoom: zoom, showPageNumbers: showPageNumbers, onLoad: handleLoad, onError: handleError }))] })] }), _jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "visually-hidden", children: metadata && `Page ${currentPage} of ${metadata.totalPages}, zoom ${Math.round(zoom * 100)}%` })] }));
+};
+function detectFileType(src) {
+    const extension = src.split('.').pop()?.toLowerCase();
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'];
+    return imageExtensions.indexOf(extension || '') !== -1 ? 'image' : 'pdf';
+}
+function extractFilename(src) {
+    return src.split('/').pop() || 'document';
+}
+export default DocumentViewer;
+//# sourceMappingURL=DocumentViewer.js.map

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

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

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

@@ -0,0 +1,6 @@
+export { DocumentViewer } from './DocumentViewer';
+export { DocumentToolbar } from './DocumentToolbar';
+export { DocumentCanvas } from './DocumentCanvas';
+export { DocumentThumbnails } from './DocumentThumbnails';
+export { DocumentViewer as default } from './DocumentViewer';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/DocumentViewer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAmD,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAA4B,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAgC,MAAM,sBAAsB,CAAC;AACxF,OAAO,EAAE,cAAc,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/esm/components/Drawer/Drawer.css

@@ -0,0 +1,153 @@
+/* Drawer Component Styles */
+
+/* Size tokens (local to Drawer) */
+.muka-drawer {
+  --drawer-width-sm: 18rem;
+  --drawer-width-md: 26rem;
+  --drawer-width-lg: 36rem;
+}
+
+/* Reset native dialog */
+.muka-drawer {
+  border: none;
+  padding: 0;
+  max-width: none;
+  max-height: none;
+  background: transparent;
+  overflow: visible;
+}
+
+/* Backdrop */
+.muka-drawer::backdrop {
+  background-color: var(--color-surface-backdrop);
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+
+.muka-drawer--slide-in::backdrop {
+  opacity: 1;
+}
+
+/* Surface */
+.muka-drawer__surface {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-surface-level3);
+  box-shadow: var(--shadow-level5);
+  height: 100%;
+  overflow: hidden;
+  position: fixed;
+  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Side positioning + initial transforms */
+.muka-drawer--right .muka-drawer__surface {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+  transform: translateX(100%);
+}
+
+.muka-drawer--left .muka-drawer__surface {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+  transform: translateX(-100%);
+}
+
+.muka-drawer--bottom .muka-drawer__surface {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  transform: translateY(100%);
+}
+
+.muka-drawer--top .muka-drawer__surface {
+  left: 0;
+  right: 0;
+  top: 0;
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  transform: translateY(-100%);
+}
+
+/* Slide-in state */
+.muka-drawer--slide-in .muka-drawer__surface {
+  transform: translate(0, 0);
+}
+
+/* Width sizes (left/right) */
+.muka-drawer--right .muka-drawer__surface,
+.muka-drawer--left .muka-drawer__surface {
+  width: var(--drawer-width-md);
+}
+
+.muka-drawer--sm.muka-drawer--right .muka-drawer__surface,
+.muka-drawer--sm.muka-drawer--left .muka-drawer__surface {
+  width: var(--drawer-width-sm);
+}
+
+.muka-drawer--lg.muka-drawer--right .muka-drawer__surface,
+.muka-drawer--lg.muka-drawer--left .muka-drawer__surface {
+  width: var(--drawer-width-lg);
+}
+
+.muka-drawer--full.muka-drawer--right .muka-drawer__surface,
+.muka-drawer--full.muka-drawer--left .muka-drawer__surface {
+  width: 100%;
+}
+
+/* Height sizes (top/bottom) */
+.muka-drawer--top .muka-drawer__surface,
+.muka-drawer--bottom .muka-drawer__surface {
+  height: auto;
+  max-height: 80vh;
+}
+
+.muka-drawer--full.muka-drawer--top .muka-drawer__surface,
+.muka-drawer--full.muka-drawer--bottom .muka-drawer__surface {
+  max-height: 100vh;
+}
+
+/* Header */
+.muka-drawer__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4);
+  border-bottom: var(--border-width-regular) solid var(--color-border-default);
+  flex-shrink: 0;
+}
+
+.muka-drawer__title {
+  flex: 1;
+  margin: 0;
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-drawer__leading,
+.muka-drawer__trailing {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Body */
+.muka-drawer__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-4);
+}
+
+/* Footer */
+.muka-drawer__footer {
+  padding: var(--spacing-4);
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+  flex-shrink: 0;
+}

package/dist/esm/components/Drawer/Drawer.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
+import './Drawer.css';
+const ANIMATION_DURATION = 200;
+export const Drawer = ({ open, onClose, children, side = 'right', size = 'md', title, leading, trailing, footer, closeOnBackdropClick = true, lockScroll = true, className = '', }) => {
+    const dialogRef = useRef(null);
+    const [isSlideIn, setIsSlideIn] = useState(false);
+    // Open the native <dialog> and force reflow before slide-in
+    useLayoutEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (open && !dialog.open) {
+            dialog.showModal();
+            void dialog.offsetHeight;
+        }
+    }, [open]);
+    // Trigger slide-in or slide-out + delayed close
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (open) {
+            setIsSlideIn(true);
+            if (lockScroll) {
+                document.body.style.overflow = 'hidden';
+            }
+        }
+        else if (dialog.open) {
+            setIsSlideIn(false);
+            if (lockScroll) {
+                document.body.style.overflow = '';
+            }
+            const timer = setTimeout(() => {
+                dialog.close();
+            }, ANIMATION_DURATION);
+            return () => clearTimeout(timer);
+        }
+    }, [open, lockScroll]);
+    // Restore scroll on unmount
+    useEffect(() => {
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, []);
+    // Handle escape key
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        const handleCancel = (e) => {
+            e.preventDefault();
+            onClose?.();
+        };
+        dialog.addEventListener('cancel', handleCancel);
+        return () => dialog.removeEventListener('cancel', handleCancel);
+    }, [onClose]);
+    // Handle backdrop click
+    const handleBackdropClick = useCallback((e) => {
+        if (e.target !== dialogRef.current)
+            return;
+        if (closeOnBackdropClick) {
+            onClose?.();
+        }
+    }, [closeOnBackdropClick, onClose]);
+    const dialogClasses = [
+        'muka-drawer',
+        `muka-drawer--${side}`,
+        `muka-drawer--${size}`,
+        isSlideIn && 'muka-drawer--slide-in',
+        className,
+    ].filter(Boolean).join(' ');
+    const hasHeader = title || leading || trailing;
+    return (
+    // Native <dialog> is interactive and handles Escape natively; click handler closes on backdrop click.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    _jsx("dialog", { ref: dialogRef, className: dialogClasses, onClick: handleBackdropClick, children: _jsxs("div", { className: "muka-drawer__surface", children: [hasHeader && (_jsxs("header", { className: "muka-drawer__header", children: [leading && _jsx("div", { className: "muka-drawer__leading", children: leading }), title && _jsx("h2", { className: "muka-drawer__title", children: title }), trailing && _jsx("div", { className: "muka-drawer__trailing", children: trailing })] })), _jsx("div", { className: "muka-drawer__body", children: children }), footer && (_jsx("footer", { className: "muka-drawer__footer", children: footer }))] }) }));
+};
+export default Drawer;
+//# sourceMappingURL=Drawer.js.map

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

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