@walkeros/explorer 0.3.1 → 1.0.0

package/dist/components/atoms/code.js

@@ -0,0 +1,251 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState, useRef, useCallback, } from 'react';
+import { Editor } from '@monaco-editor/react';
+import { registerAllThemes } from '../../themes';
+import { registerWalkerOSTypes } from '../../utils/monaco-types';
+import { applyDataElbDecorations, registerDataElbStyles, } from '../../utils/monaco-decorators';
+import { registerFormatters } from '../../utils/monaco-formatters';
+import { useMonacoHeight } from '../../hooks/useMonacoHeight';
+import { useGridHeight } from '../../contexts/GridHeightContext';
+/**
+ * Code - Pure Monaco editor atom
+ *
+ * Height Management:
+ * Two modes controlled by `autoHeight` prop:
+ *
+ * 1. Default (autoHeight=false): height="100%" - fills parent container
+ *    - Uses flex: 1 + min-height: 0 for proper flex overflow containment
+ *    - Monaco set to height="100%" to fill container
+ *    - automaticLayout: true + ResizeObserver for reliable resize detection
+ *    - Use in Grid (equal heights) and Flex contexts (fill parent)
+ *
+ * 2. Auto-height (autoHeight=true): Dynamically sizes to content
+ *    - Uses Monaco's getContentHeight() API for accurate content measurement
+ *    - Respects min/max boundaries (default: 100-600px)
+ *    - Updates automatically when content changes
+ *    - Use in standalone contexts (docs) to eliminate blank space
+ *
+ * @example
+ * // Grid context - use default height="100%" for equal row heights
+ * <Grid columns={3}>
+ *   <CodeBox code={event} />
+ *   <CodeBox code={mapping} />
+ * </Grid>
+ *
+ * @example
+ * // Standalone context - use autoHeight to fit content
+ * <CodeBox
+ *   code={shortExample}
+ *   autoHeight={{ min: 100, max: 600 }}
+ * />
+ */
+export function Code({ code, language = 'javascript', onChange, disabled = false, lineNumbers = false, folding = false, wordWrap = false, className, beforeMount, onMount, autoHeight, fontSize = 13, packages, sticky = true, ide = false, }) {
+    const [monacoTheme, setMonacoTheme] = useState('vs-light');
+    const decorationsCleanupRef = useRef(null);
+    const monacoRef = useRef(null);
+    const editorRef = useRef(null);
+    const containerRef = useRef(null);
+    const gridContext = useGridHeight();
+    const boxIdRef = useRef(null);
+    if (gridContext?.enabled && boxIdRef.current === null) {
+        boxIdRef.current = gridContext.getBoxId();
+    }
+    const handleHeightChange = useCallback((height) => {
+        if (gridContext?.enabled && boxIdRef.current !== null) {
+            gridContext.registerBox(boxIdRef.current, height);
+        }
+    }, [gridContext]);
+    useEffect(() => {
+        return () => {
+            if (gridContext?.enabled && boxIdRef.current !== null) {
+                gridContext.unregisterBox(boxIdRef.current);
+            }
+        };
+    }, [gridContext]);
+    const heightConfig = typeof autoHeight === 'object' ? autoHeight : {};
+    const [calculatedHeight, registerEditor] = useMonacoHeight({
+        enabled: !!autoHeight || !!gridContext?.enabled,
+        minHeight: heightConfig.min ?? (gridContext?.enabled ? 1 : 20),
+        maxHeight: heightConfig.max ?? 600,
+        defaultHeight: gridContext?.enabled ? 250 : 400,
+        onHeightChange: handleHeightChange,
+    });
+    // Register data-elb styles on mount
+    useEffect(() => {
+        registerDataElbStyles();
+    }, []);
+    // Helper: Find data-theme attribute from closest ancestor or document
+    const getDataTheme = useCallback(() => {
+        // Check container ref first (closest to Monaco)
+        if (containerRef.current) {
+            const closest = containerRef.current.closest('[data-theme]');
+            if (closest) {
+                return closest.getAttribute('data-theme');
+            }
+        }
+        // Fall back to document root
+        return document.documentElement.getAttribute('data-theme');
+    }, []);
+    // Theme detection
+    useEffect(() => {
+        const checkTheme = () => {
+            const dataTheme = getDataTheme();
+            const isDark = dataTheme === 'dark' ||
+                (dataTheme === null &&
+                    window.matchMedia('(prefers-color-scheme: dark)').matches);
+            const newTheme = isDark ? 'elbTheme-dark' : 'elbTheme-light';
+            setMonacoTheme(newTheme);
+        };
+        checkTheme();
+        const observer = new MutationObserver(() => {
+            checkTheme();
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme'],
+        });
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = () => {
+            checkTheme();
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => {
+            observer.disconnect();
+            mediaQuery.removeEventListener('change', handleChange);
+        };
+    }, [getDataTheme]);
+    // ResizeObserver for container size changes
+    // Complements automaticLayout: true for more reliable detection
+    // Handles cases where Grid constraints change or parent container resizes
+    useEffect(() => {
+        const editor = editorRef.current;
+        const container = containerRef.current;
+        if (!editor || !container)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            // Debounce layout calls to prevent excessive updates
+            requestAnimationFrame(() => {
+                editor.layout();
+            });
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    const handleChange = (value) => {
+        if (onChange && value !== undefined) {
+            onChange(value);
+        }
+    };
+    const handleBeforeMount = async (monaco) => {
+        monacoRef.current = monaco;
+        if (beforeMount) {
+            beforeMount(monaco);
+            return;
+        }
+        registerAllThemes(monaco);
+        registerFormatters(monaco);
+        if (packages && packages.length > 0) {
+            registerWalkerOSTypes(monaco);
+            const { loadPackageTypes } = await import('../../utils/monaco-types');
+            for (const pkg of packages) {
+                if (pkg !== '@walkeros/core') {
+                    await loadPackageTypes(monaco, { package: pkg }).catch(() => { });
+                }
+            }
+        }
+        const dataTheme = getDataTheme();
+        const isDark = dataTheme === 'dark' ||
+            (dataTheme === null &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches);
+        const themeName = isDark ? 'elbTheme-dark' : 'elbTheme-light';
+        monaco.editor.setTheme(themeName);
+    };
+    const MonacoEditor = Editor;
+    const handleEditorMount = (monacoEditor) => {
+        editorRef.current = monacoEditor;
+        // Register with height hook if auto-height or grid context is enabled
+        if (autoHeight || gridContext?.enabled) {
+            registerEditor(monacoEditor);
+        }
+        // Apply data-elb decorations for HTML
+        if (language === 'html' && monacoRef.current) {
+            decorationsCleanupRef.current = applyDataElbDecorations(monacoEditor, monacoRef.current);
+        }
+        // Initial layout call after mount
+        requestAnimationFrame(() => {
+            monacoEditor.layout();
+        });
+        if (onMount) {
+            onMount(monacoEditor);
+        }
+    };
+    // Cleanup
+    useEffect(() => {
+        return () => {
+            if (decorationsCleanupRef.current) {
+                decorationsCleanupRef.current();
+            }
+        };
+    }, []);
+    // Choose height strategy: auto-calculated or fill parent
+    // Note: When grid context is enabled with synced mode, CodeBox applies
+    // syncedHeight to the Box container. Monaco should use calculatedHeight
+    // (content-only) here, not syncedHeight (which includes header + border).
+    const monacoHeight = autoHeight || gridContext?.enabled ? `${calculatedHeight}px` : '100%';
+    // Add modifier class when using auto-height or synced height
+    const useContentHeight = !!autoHeight || !!gridContext?.enabled;
+    const codeClassName = `elb-code ${useContentHeight ? 'elb-code--auto-height' : ''} ${className || ''}`.trim();
+    return (_jsx("div", { className: codeClassName, ref: containerRef, children: _jsx(MonacoEditor, { height: monacoHeight, language: language, value: code, onChange: handleChange, beforeMount: handleBeforeMount, onMount: handleEditorMount, theme: monacoTheme, options: {
+                readOnly: disabled || !onChange,
+                readOnlyMessage: { value: '' },
+                minimap: { enabled: false },
+                fontSize: fontSize,
+                lineHeight: Math.round(fontSize * 1.5),
+                padding: 0,
+                lineNumbers: lineNumbers ? 'on' : 'off',
+                lineNumbersMinChars: 3,
+                glyphMargin: false,
+                folding: folding,
+                lineDecorationsWidth: 8, // Gap between line numbers and code
+                scrollBeyondLastLine: false,
+                automaticLayout: true,
+                tabSize: 2,
+                detectIndentation: false,
+                trimAutoWhitespace: false,
+                wordWrap: wordWrap ? 'on' : 'off',
+                fixedOverflowWidgets: true,
+                overviewRulerLanes: 0,
+                renderLineHighlight: 'none',
+                renderValidationDecorations: ide ? 'editable' : 'off',
+                hover: { enabled: ide },
+                'semanticHighlighting.enabled': ide,
+                showDeprecated: ide,
+                showUnused: ide,
+                'bracketPairColorization.enabled': false,
+                guides: {
+                    bracketPairs: false,
+                    bracketPairsHorizontal: false,
+                    highlightActiveBracketPair: false,
+                    indentation: false, // Disable indentation guide lines
+                },
+                scrollbar: {
+                    vertical: 'auto',
+                    horizontal: 'auto',
+                    alwaysConsumeMouseWheel: false,
+                },
+                // Cursor and selection behavior
+                cursorBlinking: 'blink', // Make cursor blink visibly
+                cursorStyle: 'line', // Use line cursor (most visible)
+                cursorWidth: 2, // Make cursor 2px wide for better visibility
+                cursorSmoothCaretAnimation: 'off', // Disable smooth cursor animation
+                selectionHighlight: false, // Disable auto-highlighting of selected text occurrences
+                occurrencesHighlight: 'off', // Disable highlighting matching words
+                selectOnLineNumbers: false, // Don't select line when clicking line numbers
+                wordBasedSuggestions: 'off', // Reduce auto-completion interference
+                quickSuggestions: false, // Disable quick suggestions popup
+                stickyScroll: { enabled: sticky },
+            } }) }));
+}
+//# sourceMappingURL=code.js.map

package/dist/components/atoms/code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","sourceRoot":"","sources":["../../../src/components/atoms/code.tsx"],"names":[],"mappings":";AAAA,OAAc,EAEZ,SAAS,EACT,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAU,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACL,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAyBjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EACJ,QAAQ,GAAG,YAAY,EACvB,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,WAAW,EACX,OAAO,EACP,UAAU,EACV,QAAQ,GAAG,EAAE,EACb,QAAQ,EACR,MAAM,GAAG,IAAI,EACb,GAAG,GAAG,KAAK,GACD;IACV,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC3D,MAAM,qBAAqB,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAChE,MAAM,SAAS,GAAG,MAAM,CAAwC,IAAI,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,MAAM,CAAsC,IAAI,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEzD,MAAM,WAAW,GAAG,aAAa,EAAE,CAAC;IACpC,MAAM,QAAQ,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE7C,IAAI,WAAW,EAAE,OAAO,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;QACtD,QAAQ,CAAC,OAAO,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,MAAc,EAAE,EAAE;QACjB,IAAI,WAAW,EAAE,OAAO,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YACtD,WAAW,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,WAAW,EAAE,OAAO,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;gBACtD,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACtE,MAAM,CAAC,gBAAgB,EAAE,cAAc,CAAC,GAAG,eAAe,CAAC;QACzD,OAAO,EAAE,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,WAAW,EAAE,OAAO;QAC/C,SAAS,EAAE,YAAY,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9D,SAAS,EAAE,YAAY,CAAC,GAAG,IAAI,GAAG;QAClC,aAAa,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;QAC/C,cAAc,EAAE,kBAAkB;KACnC,CAAC,CAAC;IAEH,oCAAoC;IACpC,SAAS,CAAC,GAAG,EAAE;QACb,qBAAqB,EAAE,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,sEAAsE;IACtE,MAAM,YAAY,GAAG,WAAW,CAAC,GAAkB,EAAE;QACnD,gDAAgD;QAChD,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC7D,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC;QAED,6BAA6B;QAC7B,OAAO,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,kBAAkB;IAClB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;YACjC,MAAM,MAAM,GACV,SAAS,KAAK,MAAM;gBACpB,CAAC,SAAS,KAAK,IAAI;oBACjB,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CAAC,CAAC;YAC/D,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;YAE7D,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC3B,CAAC,CAAC;QAEF,UAAU,EAAE,CAAC;QAEb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACzC,UAAU,EAAE,CAAC;QACf,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;YACzC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;SAChC,CAAC,CAAC;QAEH,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;QACrE,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,UAAU,EAAE,CAAC;QACf,CAAC,CAAC;QACF,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,4CAA4C;IAC5C,gEAAgE;IAChE,0EAA0E;IAC1E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS;YAAE,OAAO;QAElC,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7C,qDAAqD;YACrD,qBAAqB,CAAC,GAAG,EAAE;gBACzB,MAAM,CAAC,MAAM,EAAE,CAAC;YAClB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAElC,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,CAAC,KAAyB,EAAE,EAAE;QACjD,IAAI,QAAQ,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACpC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,KAAK,EAAE,MAAsC,EAAE,EAAE;QACzE,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;QAE3B,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,MAAM,CAAC,CAAC;YACpB,OAAO;QACT,CAAC;QAED,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAC1B,kBAAkB,CAAC,MAAM,CAAC,CAAC;QAE3B,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpC,qBAAqB,CAAC,MAAM,CAAC,CAAC;YAE9B,MAAM,EAAE,gBAAgB,EAAE,GAAG,MAAM,MAAM,CAAC,0BAA0B,CAAC,CAAC;YACtE,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;gBAC3B,IAAI,GAAG,KAAK,gBAAgB,EAAE,CAAC;oBAC7B,MAAM,gBAAgB,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;gBACnE,CAAC;YACH,CAAC;QACH,CAAC;QAED,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;QACjC,MAAM,MAAM,GACV,SAAS,KAAK,MAAM;YACpB,CAAC,SAAS,KAAK,IAAI;gBACjB,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CAAC,CAAC;QAC/D,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;QAE9D,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,MASnB,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,YAA0C,EAAE,EAAE;QACvE,SAAS,CAAC,OAAO,GAAG,YAAY,CAAC;QAEjC,sEAAsE;QACtE,IAAI,UAAU,IAAI,WAAW,EAAE,OAAO,EAAE,CAAC;YACvC,cAAc,CAAC,YAAY,CAAC,CAAC;QAC/B,CAAC;QAED,sCAAsC;QACtC,IAAI,QAAQ,KAAK,MAAM,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YAC7C,qBAAqB,CAAC,OAAO,GAAG,uBAAuB,CACrD,YAAY,EACZ,SAAS,CAAC,OAAO,CAClB,CAAC;QACJ,CAAC;QAED,kCAAkC;QAClC,qBAAqB,CAAC,GAAG,EAAE;YACzB,YAAY,CAAC,MAAM,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;QAEH,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,YAAY,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEF,UAAU;IACV,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,qBAAqB,CAAC,OAAO,EAAE,CAAC;gBAClC,qBAAqB,CAAC,OAAO,EAAE,CAAC;YAClC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,yDAAyD;IACzD,uEAAuE;IACvE,wEAAwE;IACxE,0EAA0E;IAC1E,MAAM,YAAY,GAChB,UAAU,IAAI,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,gBAAgB,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAExE,6DAA6D;IAC7D,MAAM,gBAAgB,GAAG,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,WAAW,EAAE,OAAO,CAAC;IAChE,MAAM,aAAa,GACjB,YAAY,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IAE1F,OAAO,CACL,cAAK,SAAS,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,YAC9C,KAAC,YAAY,IACX,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE;gBACP,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAQ;gBAC/B,eAAe,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;gBAC9B,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBAC3B,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC;gBACtC,OAAO,EAAE,CAAC;gBACV,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;gBACvC,mBAAmB,EAAE,CAAC;gBACtB,WAAW,EAAE,KAAK;gBAClB,OAAO,EAAE,OAAO;gBAChB,oBAAoB,EAAE,CAAC,EAAE,oCAAoC;gBAC7D,oBAAoB,EAAE,KAAK;gBAC3B,eAAe,EAAE,IAAI;gBACrB,OAAO,EAAE,CAAC;gBACV,iBAAiB,EAAE,KAAK;gBACxB,kBAAkB,EAAE,KAAK;gBACzB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;gBACjC,oBAAoB,EAAE,IAAI;gBAC1B,kBAAkB,EAAE,CAAC;gBACrB,mBAAmB,EAAE,MAAM;gBAC3B,2BAA2B,EAAE,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK;gBACrD,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;gBACvB,8BAA8B,EAAE,GAAG;gBACnC,cAAc,EAAE,GAAG;gBACnB,UAAU,EAAE,GAAG;gBACf,iCAAiC,EAAE,KAAK;gBACxC,MAAM,EAAE;oBACN,YAAY,EAAE,KAAK;oBACnB,sBAAsB,EAAE,KAAK;oBAC7B,0BAA0B,EAAE,KAAK;oBACjC,WAAW,EAAE,KAAK,EAAE,kCAAkC;iBACvD;gBACD,SAAS,EAAE;oBACT,QAAQ,EAAE,MAAM;oBAChB,UAAU,EAAE,MAAM;oBAClB,uBAAuB,EAAE,KAAK;iBAC/B;gBACD,gCAAgC;gBAChC,cAAc,EAAE,OAAO,EAAE,4BAA4B;gBACrD,WAAW,EAAE,MAAM,EAAE,iCAAiC;gBACtD,WAAW,EAAE,CAAC,EAAE,6CAA6C;gBAC7D,0BAA0B,EAAE,KAAK,EAAE,kCAAkC;gBACrE,kBAAkB,EAAE,KAAK,EAAE,yDAAyD;gBACpF,oBAAoB,EAAE,KAAK,EAAE,sCAAsC;gBACnE,mBAAmB,EAAE,KAAK,EAAE,+CAA+C;gBAC3E,oBAAoB,EAAE,KAAK,EAAE,sCAAsC;gBACnE,gBAAgB,EAAE,KAAK,EAAE,kCAAkC;gBAC3D,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;aAClC,GACD,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/components/atoms/code.stories.d.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Code } from './code';
+/**
+ * Code - Monaco Editor atom component
+ *
+ * Pure Monaco editor without Box wrapper. This is the base atom that CodeBox uses.
+ * Supports syntax highlighting, auto-height, and various editor configurations.
+ *
+ * Note: For most use cases, use CodeBox (molecule) which includes header and actions.
+ */
+declare const meta: Meta<typeof Code>;
+export default meta;
+type Story = StoryObj<typeof Code>;
+/**
+ * Default code editor - fills parent container height
+ *
+ * The dashed border shows the parent container bounds.
+ * Code uses height="100%" by default, filling the available space.
+ */
+export declare const Default: Story;
+/**
+ * With line numbers enabled
+ */
+export declare const WithLineNumbers: Story;
+/**
+ * Auto-height mode - sizes to content
+ *
+ * Instead of filling the container, the editor sizes to fit its content.
+ * Useful for documentation and standalone code displays.
+ */
+export declare const AutoHeight: Story;
+/**
+ * Sticky scroll disabled
+ *
+ * When sticky={false}, the nested context headers won't stick to the top when scrolling.
+ * Compare with default (sticky=true) to see the difference.
+ */
+export declare const NoStickyScroll: Story;
+/**
+ * IDE mode ON - Full Monaco features
+ *
+ * Enable hover tooltips, validation decorations, and other IDE features.
+ * Use for interactive editors like playgrounds where feedback is useful.
+ */
+export declare const IdeOn: Story;
+/**
+ * Homepage web.ts - Test styling
+ *
+ * This is the exact code from the homepage "Universal event transformation" box.
+ * All object keys should be the same light gray color.
+ */
+export declare const HomepageWebTs: Story;
+//# sourceMappingURL=code.stories.d.ts.map

package/dist/components/atoms/code.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.stories.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/code.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAsB3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC;;;;;GAKG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAC;AAkCF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAiBF;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAyBF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC"}

package/dist/components/atoms/code.stories.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Code } from './code';
+/**
+ * Code - Monaco Editor atom component
+ *
+ * Pure Monaco editor without Box wrapper. This is the base atom that CodeBox uses.
+ * Supports syntax highlighting, auto-height, and various editor configurations.
+ *
+ * Note: For most use cases, use CodeBox (molecule) which includes header and actions.
+ */
+const meta = {
+    component: Code,
+    title: 'Atoms/Code',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                height: '300px',
+                display: 'flex',
+                flexDirection: 'column',
+                background: '#292d3e',
+                borderRadius: '8px',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const sampleCode = `const event = {
+  entity: 'product',
+  action: 'view',
+  data: {
+    id: 'P123',
+    name: 'Laptop',
+    price: 999
+  }
+};
+
+console.log('Event:', event);`;
+/**
+ * Default code editor - fills parent container height
+ *
+ * The dashed border shows the parent container bounds.
+ * Code uses height="100%" by default, filling the available space.
+ */
+export const Default = {
+    args: {
+        code: sampleCode,
+        language: 'javascript',
+    },
+};
+/**
+ * With line numbers enabled
+ */
+export const WithLineNumbers = {
+    args: {
+        code: sampleCode,
+        language: 'javascript',
+        lineNumbers: true,
+    },
+};
+/**
+ * Auto-height mode - sizes to content
+ *
+ * Instead of filling the container, the editor sizes to fit its content.
+ * Useful for documentation and standalone code displays.
+ */
+export const AutoHeight = {
+    args: {
+        code: `import { elb } from '@walkeros/core';
+
+elb('product view', { id: 'abc' });`,
+        language: 'typescript',
+        autoHeight: { min: 50, max: 400 },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                background: '#292d3e',
+                borderRadius: '8px',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+const nestedCode = `{
+  "flows": {
+    "default": {
+      "sources": {
+        "browser": {
+          "package": "@walkeros/web-source-browser",
+          "config": {
+            "settings": {
+              "pageview": true,
+              "session": true,
+              "globals": {
+                "language": "en",
+                "currency": "USD"
+              }
+            }
+          }
+        }
+      },
+      "destinations": {
+        "ga4": {
+          "package": "@walkeros/web-destination-gtag",
+          "config": {
+            "settings": {
+              "measurementId": "G-XXXXXXXXXX"
+            }
+          }
+        }
+      }
+    }
+  }
+}`;
+/**
+ * Sticky scroll disabled
+ *
+ * When sticky={false}, the nested context headers won't stick to the top when scrolling.
+ * Compare with default (sticky=true) to see the difference.
+ */
+export const NoStickyScroll = {
+    args: {
+        code: nestedCode,
+        language: 'json',
+        sticky: false,
+    },
+};
+const typescriptCode = `import { tagger } from '../walker';
+
+function ProductDetail({ product }) {
+  return (
+    <div
+      {...tagger()
+        .entity('product')
+        .action('load', 'view')
+        .get()}
+    >
+      <h1>{product.name}</h1>
+    </div>
+  );
+}`;
+/**
+ * IDE mode ON - Full Monaco features
+ *
+ * Enable hover tooltips, validation decorations, and other IDE features.
+ * Use for interactive editors like playgrounds where feedback is useful.
+ */
+export const IdeOn = {
+    args: {
+        code: typescriptCode,
+        language: 'typescript',
+        ide: true,
+    },
+};
+// Exact code from homepage web.ts example
+const webTsCode = `// Capture GA4 dataLayer events
+{
+  sources: {
+    dataLayer: {
+      config: {
+        mapping: {
+          add_to_cart: {
+            name: 'product add',
+            data: {
+              map: {
+                id: 'items.0.item_id',
+                name: 'items.0.item_name',
+                price: 'value'
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}`;
+/**
+ * Homepage web.ts - Test styling
+ *
+ * This is the exact code from the homepage "Universal event transformation" box.
+ * All object keys should be the same light gray color.
+ */
+export const HomepageWebTs = {
+    args: {
+        code: webTsCode,
+        language: 'typescript',
+    },
+};
+//# sourceMappingURL=code.stories.js.map

package/dist/components/atoms/code.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.stories.js","sourceRoot":"","sources":["../../../src/components/atoms/code.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B;;;;;;;GAOG;AACH,MAAM,IAAI,GAAsB;IAC9B,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;KACjB;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cACE,KAAK,EAAE;gBACL,MAAM,EAAE,OAAO;gBACf,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,UAAU,EAAE,SAAS;gBACrB,YAAY,EAAE,KAAK;aACpB,YAED,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,UAAU,GAAG;;;;;;;;;;8BAUW,CAAC;AAE/B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,YAAY;QACtB,WAAW,EAAE,IAAI;KAClB;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE;;oCAE0B;QAChC,QAAQ,EAAE,YAAY;QACtB,UAAU,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;KAClC;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,UAAU,EAAE,SAAS;gBACrB,YAAY,EAAE,KAAK;aACpB,YAED,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BjB,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,KAAK;KACd;CACF,CAAC;AAEF,MAAM,cAAc,GAAG;;;;;;;;;;;;;EAarB,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE,YAAY;QACtB,GAAG,EAAE,IAAI;KACV;CACF,CAAC;AAEF,0CAA0C;AAC1C,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;EAoBhB,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,YAAY;KACvB;CACF,CAAC"}

package/dist/components/atoms/config-tile.d.ts

@@ -0,0 +1,38 @@
+export interface ConfigTileStatus {
+    enabled: boolean;
+    text?: string;
+    maxLength?: number;
+}
+export interface ConfigTileProps {
+    label: string;
+    description?: string;
+    status: ConfigTileStatus;
+    onClick: () => void;
+    className?: string;
+}
+/**
+ * ConfigTile - Reusable tile component for configuration options
+ *
+ * Features:
+ * - Status indicator (green/gray circle)
+ * - Optional status text with fade effect for long values
+ * - Hover states with theme colors
+ * - Automatic styling based on enabled state
+ *
+ * Used by:
+ * - Rule overview (name, data, settings, batch, ignore, etc.)
+ * - ValueConfig options (key, value, fn, map, loop, etc.)
+ *
+ * @example
+ * <ConfigTile
+ *   label="Name"
+ *   description="Override the destination event name"
+ *   status={{ enabled: true, text: "page_view" }}
+ *   onClick={() => handleEdit('name')}
+ * />
+ */
+export declare function ConfigTile({ label, description, status, onClick, className, }: ConfigTileProps): import("react/jsx-runtime").JSX.Element;
+export type RuleTileStatus = ConfigTileStatus;
+export type RuleTileProps = ConfigTileProps;
+export declare const RuleTile: typeof ConfigTile;
+//# sourceMappingURL=config-tile.d.ts.map

package/dist/components/atoms/config-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-tile.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/config-tile.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,gBAAgB,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,SAAc,GACf,EAAE,eAAe,2CA+BjB;AAGD,MAAM,MAAM,cAAc,GAAG,gBAAgB,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,eAAe,CAAC;AAC5C,eAAO,MAAM,QAAQ,mBAAa,CAAC"}

package/dist/components/atoms/config-tile.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ConfigTile - Reusable tile component for configuration options
+ *
+ * Features:
+ * - Status indicator (green/gray circle)
+ * - Optional status text with fade effect for long values
+ * - Hover states with theme colors
+ * - Automatic styling based on enabled state
+ *
+ * Used by:
+ * - Rule overview (name, data, settings, batch, ignore, etc.)
+ * - ValueConfig options (key, value, fn, map, loop, etc.)
+ *
+ * @example
+ * <ConfigTile
+ *   label="Name"
+ *   description="Override the destination event name"
+ *   status={{ enabled: true, text: "page_view" }}
+ *   onClick={() => handleEdit('name')}
+ * />
+ */
+export function ConfigTile({ label, description, status, onClick, className = '', }) {
+    const maxLength = status.maxLength || 20;
+    const isLongText = (status.text?.length || 0) > maxLength;
+    return (_jsxs("button", { className: `elb-config-tile ${status.enabled ? 'is-enabled' : ''} ${className}`, onClick: onClick, type: "button", children: [_jsxs("div", { className: "elb-config-tile-header", children: [_jsx("div", { className: "elb-config-tile-label", children: label }), _jsxs("div", { className: "elb-config-tile-status", children: [_jsx("div", { className: `elb-config-tile-indicator ${status.enabled ? 'is-enabled' : 'is-disabled'}` }), status.text && (_jsx("div", { className: `elb-config-tile-status-text ${isLongText ? 'is-long' : ''}`, children: status.text }))] })] }), _jsx("div", { className: "elb-config-tile-description", children: description })] }));
+}
+export const RuleTile = ConfigTile;
+//# sourceMappingURL=config-tile.js.map

package/dist/components/atoms/config-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-tile.js","sourceRoot":"","sources":["../../../src/components/atoms/config-tile.tsx"],"names":[],"mappings":";AAgBA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,SAAS,GAAG,EAAE,GACE;IAChB,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,IAAI,EAAE,CAAC;IACzC,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC;IAE1D,OAAO,CACL,kBACE,SAAS,EAAE,mBAAmB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,EAC/E,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,aAEb,eAAK,SAAS,EAAC,wBAAwB,aACrC,cAAK,SAAS,EAAC,uBAAuB,YAAE,KAAK,GAAO,EACpD,eAAK,SAAS,EAAC,wBAAwB,aACrC,cACE,SAAS,EAAE,6BACT,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAClC,EAAE,GACF,EACD,MAAM,CAAC,IAAI,IAAI,CACd,cACE,SAAS,EAAE,+BAA+B,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,YAEtE,MAAM,CAAC,IAAI,GACR,CACP,IACG,IACF,EAEN,cAAK,SAAS,EAAC,6BAA6B,YAAE,WAAW,GAAO,IACzD,CACV,CAAC;AACJ,CAAC;AAKD,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC"}

package/dist/components/atoms/consent-state-tile.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Consent State Tile
+ *
+ * Checkbox-like tile for toggling consent state requirements.
+ * Styled similar to rule tiles with active/inactive states.
+ */
+export interface ConsentStateTileProps {
+    label: string;
+    checked: boolean;
+    onClick: () => void;
+    className?: string;
+}
+export declare function ConsentStateTile({ label, checked, onClick, className, }: ConsentStateTileProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=consent-state-tile.d.ts.map

package/dist/components/atoms/consent-state-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-state-tile.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/consent-state-tile.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,OAAO,EACP,SAAc,GACf,EAAE,qBAAqB,2CA6BvB"}

package/dist/components/atoms/consent-state-tile.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ConsentStateTile({ label, checked, onClick, className = '', }) {
+    return (_jsxs("button", { type: "button", className: `elb-consent-state-tile ${checked ? 'is-checked' : ''} ${className}`, onClick: onClick, children: [_jsx("div", { className: "elb-consent-state-tile-checkbox", children: checked && (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), _jsx("span", { className: "elb-consent-state-tile-label", children: label })] }));
+}
+//# sourceMappingURL=consent-state-tile.js.map

package/dist/components/atoms/consent-state-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent-state-tile.js","sourceRoot":"","sources":["../../../src/components/atoms/consent-state-tile.tsx"],"names":[],"mappings":";AAaA,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,OAAO,EACP,SAAS,GAAG,EAAE,GACQ;IACtB,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,0BAA0B,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,EAC/E,OAAO,EAAE,OAAO,aAEhB,cAAK,SAAS,EAAC,iCAAiC,YAC7C,OAAO,IAAI,CACV,cACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,YAElC,eACE,CAAC,EAAC,mBAAmB,EACrB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,GACG,EACN,eAAM,SAAS,EAAC,8BAA8B,YAAE,KAAK,GAAQ,IACtD,CACV,CAAC;AACJ,CAAC"}