@walkeros/explorer 0.5.0 → 1.0.1

package/dist/components/demos/PromotionPlayground.js

@@ -0,0 +1,366 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback, useMemo, } from 'react';
+import { startFlow } from '@walkeros/collector';
+import { Grid } from '../atoms/grid';
+import { Preview } from '../molecules/preview';
+import { BrowserBox } from '../organisms/browser-box';
+import { CodeBox } from '../molecules/code-box';
+import { createGtagDestination, } from '../../helpers/destinations';
+const defaultHtml = `<div
+  data-elb="product"
+  data-elbaction="load:view"
+  data-elbcontext="stage:inspire"
+  class="product-card"
+>
+  <figure class="product-figure">
+    <div class="product-badge-container">
+      <div data-elb-product="badge:delicious" class="product-badge">delicious</div>
+    </div>
+  </figure>
+  <div class="product-body">
+    <h3 data-elb-product="name:#innerText" class="product-title">
+      Everyday Ruck Snack
+    </h3>
+    <div class="form-control">
+      <label class="form-label">Taste</label>
+      <select
+        data-elb-product="taste:#value"
+        class="form-select"
+      >
+        <option value="sweet">Sweet</option>
+        <option value="spicy">Spicy</option>
+      </select>
+    </div>
+    <p data-elb-product="price:2.50" class="product-price">
+      € 2.50 <span data-elb-product="old_price:3.14" class="product-old-price">€ 3.14</span>
+    </p>
+    <div data-elbcontext="stage:hooked" class="product-actions">
+      <button
+        data-elbaction="click:save"
+        class="btn btn-secondary"
+      >
+        Maybe later
+      </button>
+      <button
+        data-elbaction="click:add"
+        class="btn btn-primary"
+      >
+        Add to Cart
+      </button>
+    </div>
+  </div>
+</div>`;
+const defaultCss = `* {
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.product-card {
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+.product-figure {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 160px;
+  background:
+    linear-gradient(135deg, rgba(243, 244, 246, 0.9) 0%, rgba(229, 231, 235, 0.9) 100%),
+    repeating-linear-gradient(
+      45deg,
+      #f9fafb,
+      #f9fafb 10px,
+      #f3f4f6 10px,
+      #f3f4f6 20px
+    );
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.product-figure::before {
+  content: '🍟';
+  font-size: 8rem;
+  opacity: 0.8;
+}
+
+.product-badge-container {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.product-badge {
+  background: #01b5e2;
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.product-body {
+  padding: 1.5rem;
+}
+
+.product-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin: 0 0 1rem 0;
+  color: #111827;
+}
+
+.form-control {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6b7280;
+  margin-bottom: 0.5rem;
+}
+
+.form-select {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  color: #111827;
+  background: white;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.form-select:hover {
+  border-color: #9ca3af;
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: #01b5e2;
+  box-shadow: 0 0 0 3px rgba(1, 181, 226, 0.1);
+}
+
+.product-price {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #111827;
+  margin: 0 0 1rem 0;
+}
+
+.product-old-price {
+  font-size: 1rem;
+  font-weight: 400;
+  color: #9ca3af;
+  text-decoration: line-through;
+  margin-left: 0.5rem;
+}
+
+.product-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.btn {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.btn:active {
+  transform: translateY(0);
+}
+
+.btn-primary {
+  background: #01b5e2;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #0195b8;
+}
+
+.btn-secondary {
+  background: #ffffff;
+  color: #01b5e2;
+  border: 1px solid #01b5e2;
+}
+
+.btn-secondary:hover {
+  background: #01b5e2;
+  color: #ffffff;
+}`;
+const defaultMapping = `{
+  "product": {
+    "view": {
+      "name": "view_item",
+      "data": {
+        "map": {
+          "event": "name",
+          "price": "data.price",
+          "stage": "context.stage.0"
+        }
+      }
+    },
+    "add": {
+      "name": "add_to_cart",
+      "data": {
+        "map": {
+          "event": "event",
+          "price": "data.price",
+          "user": {
+            "consent": { "marketing": true },
+            "key": "user.session"
+          },
+          "isSale": {
+            "fn": "(e) => !!e.data.old_price"
+          }
+        }
+      }
+    },
+    "save": {
+      "data": {
+        "map": {
+          "event": "event",
+          "data": "data"
+        }
+      }
+    }
+  }
+}`;
+/**
+ * PromotionPlayground - Full walkerOS demonstration with live code editing
+ *
+ * Shows the complete chain:
+ * 1. Code Editor - Edit HTML/CSS/JS with walkerOS data attributes
+ * 2. Preview - Live rendered output that captures real events
+ * 3. Events - Real events captured from preview interactions
+ * 4. Mapping - Apply transformations and see destination output
+ * 5. Result - Final destination function calls
+ *
+ * Uses a single unified collector flow:
+ * - PromotionPlayground owns the collector with destinations
+ * - Preview initializes browser source using parent's elb
+ * - Events flow through one collector to all destinations
+ */
+export function PromotionPlayground({ initialHtml = defaultHtml, initialCss = defaultCss, initialJs = '', initialMapping = defaultMapping, labelCode = 'Code', labelPreview = 'Preview', labelEvents = 'Events', labelMapping = 'Mapping', labelResult = 'Result', destination: destinationProp, }) {
+    // Memoize destination to prevent useEffect re-runs on every render
+    // Default prop values create new objects each render, breaking effect dependencies
+    const destination = useMemo(() => destinationProp ?? createGtagDestination(), [destinationProp]);
+    const [html, setHtml] = useState(initialHtml);
+    const [css, setCss] = useState(initialCss);
+    const [js, setJs] = useState(initialJs);
+    const [mappingInput, setMappingInput] = useState(initialMapping);
+    const [eventJson, setEventJson] = useState('// Click elements in the preview to see events');
+    const [outputString, setOutputString] = useState('// Click elements in the preview to see function call');
+    const collectorRef = useRef(null);
+    const elbRef = useRef(null);
+    const lastEventRef = useRef(null);
+    const [isReady, setIsReady] = useState(false);
+    // Initialize collector once on mount
+    useEffect(() => {
+        let mounted = true;
+        const init = async () => {
+            try {
+                const parsedMapping = JSON.parse(initialMapping);
+                const { collector, elb } = await startFlow({
+                    destinations: {
+                        // Capture raw events for display in Events column
+                        rawCapture: {
+                            code: {
+                                type: 'rawCapture',
+                                config: {},
+                                push: async (event) => {
+                                    if (!mounted)
+                                        return;
+                                    lastEventRef.current = event;
+                                    setEventJson(JSON.stringify(event, null, 2));
+                                },
+                            },
+                        },
+                        // Transform and display formatted output in Result column
+                        gtag: {
+                            code: destination,
+                            config: {
+                                mapping: parsedMapping,
+                            },
+                            env: {
+                                elb: (output) => {
+                                    if (!mounted)
+                                        return;
+                                    setOutputString(output);
+                                },
+                            },
+                        },
+                    },
+                    consent: { functional: true, marketing: true },
+                    user: { session: 'playground' },
+                });
+                if (!mounted)
+                    return;
+                collectorRef.current = collector;
+                elbRef.current = elb;
+                setIsReady(true);
+            }
+            catch {
+                // Initialization failed - component will show placeholder
+            }
+        };
+        init();
+        return () => {
+            mounted = false;
+            // Cleanup collector
+            if (collectorRef.current) {
+                // Sources cleanup would happen here if needed
+            }
+        };
+    }, [initialMapping, destination]);
+    // Handle mapping changes - update collector destination config
+    const handleMappingChange = useCallback((newMapping) => {
+        setMappingInput(newMapping);
+        // Debounced update to collector
+        const timeoutId = setTimeout(() => {
+            try {
+                const parsed = JSON.parse(newMapping);
+                // Update destination config directly
+                if (collectorRef.current?.destinations?.gtag?.config) {
+                    collectorRef.current.destinations.gtag.config.mapping = parsed;
+                }
+                // Re-process last event to update Result column
+                if (lastEventRef.current && collectorRef.current) {
+                    collectorRef.current.push(lastEventRef.current);
+                }
+            }
+            catch {
+                // Invalid JSON - don't update
+            }
+        }, 500);
+        return () => clearTimeout(timeoutId);
+    }, []);
+    return (_jsxs(Grid, { columns: 5, rowHeight: 600, children: [_jsx(BrowserBox, { label: labelCode, html: html, css: css, js: js, onHtmlChange: setHtml, onCssChange: setCss, onJsChange: setJs, showPreview: false, initialTab: "html", lineNumbers: false, wordWrap: true }), _jsx(Preview, { label: labelPreview, html: html, css: css, elb: isReady ? (elbRef.current ?? undefined) : undefined }), _jsx(CodeBox, { label: labelEvents, code: eventJson, onChange: setEventJson, language: "json", wordWrap: true }), _jsx(CodeBox, { label: labelMapping, code: mappingInput, onChange: handleMappingChange, language: "json", wordWrap: true }), _jsx(CodeBox, { label: labelResult, code: outputString, language: "javascript", disabled: true, wordWrap: true })] }));
+}
+//# sourceMappingURL=PromotionPlayground.js.map

package/dist/components/demos/PromotionPlayground.js.map

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

package/dist/components/demos/PromotionPlayground.stories.d.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PromotionPlayground } from './PromotionPlayground';
+/**
+ * PromotionPlayground - Complete walkerOS demonstration
+ *
+ * Full-featured playground showing the complete walkerOS flow:
+ * HTML → Preview → Events → Mapping → Destination output
+ *
+ * Features:
+ * - Live HTML/CSS/JS editor with real-time preview
+ * - Event capture from data attributes
+ * - Interactive mapping configuration
+ * - Destination output visualization
+ *
+ * Perfect for demonstrating the entire walkerOS ecosystem in action.
+ */
+declare const meta: Meta<typeof PromotionPlayground>;
+export default meta;
+type Story = StoryObj<typeof PromotionPlayground>;
+/**
+ * Default promotion playground with product card example
+ *
+ * Includes a fully styled product card with walkerOS data attributes,
+ * demonstrating event tracking, context switching, and destination integration.
+ */
+export declare const Default: Story;
+//# sourceMappingURL=PromotionPlayground.stories.d.ts.map

package/dist/components/demos/PromotionPlayground.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotionPlayground.stories.d.ts","sourceRoot":"","sources":["../../../src/components/demos/PromotionPlayground.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAO1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAElD;;;;;GAKG;AACH,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/demos/PromotionPlayground.stories.js

@@ -0,0 +1,32 @@
+import { PromotionPlayground } from './PromotionPlayground';
+/**
+ * PromotionPlayground - Complete walkerOS demonstration
+ *
+ * Full-featured playground showing the complete walkerOS flow:
+ * HTML → Preview → Events → Mapping → Destination output
+ *
+ * Features:
+ * - Live HTML/CSS/JS editor with real-time preview
+ * - Event capture from data attributes
+ * - Interactive mapping configuration
+ * - Destination output visualization
+ *
+ * Perfect for demonstrating the entire walkerOS ecosystem in action.
+ */
+const meta = {
+    component: PromotionPlayground,
+    title: 'Demos/PromotionPlayground',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+/**
+ * Default promotion playground with product card example
+ *
+ * Includes a fully styled product card with walkerOS data attributes,
+ * demonstrating event tracking, context switching, and destination integration.
+ */
+export const Default = {};
+//# sourceMappingURL=PromotionPlayground.stories.js.map

package/dist/components/demos/PromotionPlayground.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotionPlayground.stories.js","sourceRoot":"","sources":["../../../src/components/demos/PromotionPlayground.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;;;;;;;;;;;GAaG;AACH,MAAM,IAAI,GAAqC;IAC7C,SAAS,EAAE,mBAAmB;IAC9B,KAAK,EAAE,2BAA2B;IAClC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}

package/dist/components/forms/field-registry.d.ts

@@ -0,0 +1,42 @@
+import type { RegistryFieldsType } from '@rjsf/utils';
+/**
+ * Field Registry for RJSF Mapping Forms
+ *
+ * Central registry of all custom fields used in react-jsonschema-form.
+ * Fields are used for complex types (like objects) while widgets are for primitives.
+ * Fields are referenced in uiSchema via 'ui:field' property.
+ *
+ * @example
+ * // In uiSchema:
+ * const uiSchema = {
+ *   consent: {
+ *     'ui:field': 'mappingConsent'
+ *   }
+ * }
+ *
+ * @example
+ * // In Form component:
+ * <Form
+ *   schema={schema}
+ *   fields={mappingFields}
+ *   ...
+ * />
+ */
+/**
+ * Mapping Fields Registry
+ *
+ * Available fields:
+ * - mappingConsent: Collapsible consent requirements editor for object types
+ * - mappingCondition: Checkbox-collapsible condition function editor for string types
+ * - mappingFn: Checkbox-collapsible custom transformation function editor for string types
+ * - mappingKey: Simple text input for event path extraction (e.g., 'data.id', 'user.email')
+ * - mappingValidate: Checkbox-collapsible validate function editor for string types
+ * - mappingData: Toggle-collapsible data transformation editor for object types
+ * - mappingSettings: Destination-specific settings editor (schema-aware or JSON fallback)
+ * - objectExplorer: Generic object key-value explorer with add/rename/delete/navigate
+ * - mappingMap: Key-value pair editor for object transformation mapping
+ * - mappingSet: Array of values editor for static value arrays
+ * - mappingLoop: Array processing with transformation editor for loop tuples
+ */
+export declare const mappingFields: RegistryFieldsType;
+//# sourceMappingURL=field-registry.d.ts.map

package/dist/components/forms/field-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-registry.d.ts","sourceRoot":"","sources":["../../../src/components/forms/field-registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAatD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,aAAa,EAAE,kBAY3B,CAAC"}

package/dist/components/forms/field-registry.js

@@ -0,0 +1,64 @@
+import { MappingConsentField } from '../atoms/mapping-consent-field';
+import { MappingConditionField } from '../atoms/mapping-condition-field';
+import { MappingFnField } from '../atoms/mapping-fn-field';
+import { MappingKeyField } from '../atoms/mapping-key-field';
+import { MappingValidateField } from '../atoms/mapping-validate-field';
+import { MappingDataField } from '../atoms/mapping-data-field';
+import { MappingSettingsField } from '../atoms/mapping-settings-field';
+import { MappingObjectExplorerField } from '../atoms/mapping-object-explorer-field';
+import { MappingMapField } from '../molecules/mapping-map-field';
+import { MappingSetField } from '../molecules/mapping-set-field';
+import { MappingLoopField } from '../molecules/mapping-loop-field';
+/**
+ * Field Registry for RJSF Mapping Forms
+ *
+ * Central registry of all custom fields used in react-jsonschema-form.
+ * Fields are used for complex types (like objects) while widgets are for primitives.
+ * Fields are referenced in uiSchema via 'ui:field' property.
+ *
+ * @example
+ * // In uiSchema:
+ * const uiSchema = {
+ *   consent: {
+ *     'ui:field': 'mappingConsent'
+ *   }
+ * }
+ *
+ * @example
+ * // In Form component:
+ * <Form
+ *   schema={schema}
+ *   fields={mappingFields}
+ *   ...
+ * />
+ */
+/**
+ * Mapping Fields Registry
+ *
+ * Available fields:
+ * - mappingConsent: Collapsible consent requirements editor for object types
+ * - mappingCondition: Checkbox-collapsible condition function editor for string types
+ * - mappingFn: Checkbox-collapsible custom transformation function editor for string types
+ * - mappingKey: Simple text input for event path extraction (e.g., 'data.id', 'user.email')
+ * - mappingValidate: Checkbox-collapsible validate function editor for string types
+ * - mappingData: Toggle-collapsible data transformation editor for object types
+ * - mappingSettings: Destination-specific settings editor (schema-aware or JSON fallback)
+ * - objectExplorer: Generic object key-value explorer with add/rename/delete/navigate
+ * - mappingMap: Key-value pair editor for object transformation mapping
+ * - mappingSet: Array of values editor for static value arrays
+ * - mappingLoop: Array processing with transformation editor for loop tuples
+ */
+export const mappingFields = {
+    mappingConsent: MappingConsentField,
+    mappingCondition: MappingConditionField,
+    mappingFn: MappingFnField,
+    mappingKey: MappingKeyField,
+    mappingValidate: MappingValidateField,
+    mappingData: MappingDataField,
+    mappingSettings: MappingSettingsField,
+    objectExplorer: MappingObjectExplorerField,
+    mappingMap: MappingMapField,
+    mappingSet: MappingSetField,
+    mappingLoop: MappingLoopField,
+};
+//# sourceMappingURL=field-registry.js.map

package/dist/components/forms/field-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-registry.js","sourceRoot":"","sources":["../../../src/components/forms/field-registry.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,wCAAwC,CAAC;AACpF,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,aAAa,GAAuB;IAC/C,cAAc,EAAE,mBAAmB;IACnC,gBAAgB,EAAE,qBAAqB;IACvC,SAAS,EAAE,cAAc;IACzB,UAAU,EAAE,eAAe;IAC3B,eAAe,EAAE,oBAAoB;IACrC,WAAW,EAAE,gBAAgB;IAC7B,eAAe,EAAE,oBAAoB;IACrC,cAAc,EAAE,0BAA0B;IAC1C,UAAU,EAAE,eAAe;IAC3B,UAAU,EAAE,eAAe;IAC3B,WAAW,EAAE,gBAAgB;CAC9B,CAAC"}

package/dist/components/forms/mapping-form-wrapper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { RJSFSchema, UiSchema, FormContextType } from '@rjsf/utils';
+export interface MappingFormWrapperProps {
+    schema: RJSFSchema;
+    uiSchema?: UiSchema;
+    formData?: unknown;
+    onChange?: (data: unknown) => void;
+    onSubmit?: (data: unknown) => void;
+    children?: React.ReactNode;
+    nested?: boolean;
+    formContext?: FormContextType;
+}
+export declare function MappingFormWrapper({ schema, uiSchema, formData, onChange, onSubmit, children, nested, formContext, }: MappingFormWrapperProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=mapping-form-wrapper.d.ts.map

package/dist/components/forms/mapping-form-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapping-form-wrapper.d.ts","sourceRoot":"","sources":["../../../src/components/forms/mapping-form-wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EACV,UAAU,EACV,QAAQ,EACR,eAAe,EAEhB,MAAM,aAAa,CAAC;AAQrB,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAyCD,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAc,EACd,WAAW,GACZ,EAAE,uBAAuB,2CA8DzB"}