@copilotkit/a2ui-renderer 1.51.4-next.5 → 1.51.4-next.6

package/dist/react-renderer/components/content/AudioPlayer.d.ts

@@ -0,0 +1,8 @@
+import type { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types';
+/**
+ * AudioPlayer component - renders an audio player with optional description.
+ */
+export declare const AudioPlayer: import("react").NamedExoticComponent<A2UIComponentProps<Types.AudioPlayerNode>>;
+export default AudioPlayer;
+//# sourceMappingURL=AudioPlayer.d.ts.map

package/dist/react-renderer/components/content/AudioPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayer.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/AudioPlayer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAItD;;GAEG;AACH,eAAO,MAAM,WAAW,iFA2BtB,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/react-renderer/components/content/AudioPlayer.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useA2UIComponent } from '../../hooks/useA2UIComponent';
+import { classMapToString, stylesToObject } from '../../lib/utils';
+/**
+ * AudioPlayer component - renders an audio player with optional description.
+ */
+export const AudioPlayer = memo(function AudioPlayer({ node, surfaceId }) {
+    const { theme, resolveString } = useA2UIComponent(node, surfaceId);
+    const props = node.properties;
+    const url = resolveString(props.url);
+    const description = resolveString(props.description ?? null);
+    if (!url) {
+        return null;
+    }
+    // Apply --weight CSS variable on root div (:host equivalent) for flex layouts
+    const hostStyle = node.weight !== undefined
+        ? { '--weight': node.weight }
+        : {};
+    return (_jsx("div", { className: "a2ui-audio", style: hostStyle, children: _jsxs("section", { className: classMapToString(theme.components.AudioPlayer), style: stylesToObject(theme.additionalStyles?.AudioPlayer), children: [description && _jsx("p", { children: description }), _jsx("audio", { src: url, controls: true })] }) }));
+});
+export default AudioPlayer;
+//# sourceMappingURL=AudioPlayer.js.map

package/dist/react-renderer/components/content/AudioPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayer.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/AudioPlayer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAA6C;IACjH,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACnE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAE9B,MAAM,GAAG,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC;IAE7D,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,OAAO,IAAI,CAAC;IACd,CAAC;IAED,8EAA8E;IAC9E,MAAM,SAAS,GAAwB,IAAI,CAAC,MAAM,KAAK,SAAS;QAC9D,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAyB;QACpD,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,cAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,SAAS,YAC1C,mBACE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EACzD,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,gBAAgB,EAAE,WAAW,CAAC,aAEzD,WAAW,IAAI,sBAAI,WAAW,GAAK,EACpC,gBAAO,GAAG,EAAE,GAAG,EAAE,QAAQ,SAAG,IACpB,GACN,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/react-renderer/components/content/Divider.d.ts

@@ -0,0 +1,13 @@
+import type { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types';
+/**
+ * Divider component - renders a visual separator line.
+ *
+ * Structure mirrors Lit's Divider component:
+ *   <div class="a2ui-divider">  ← :host equivalent
+ *     <hr class="...">          ← internal element
+ *   </div>
+ */
+export declare const Divider: import("react").NamedExoticComponent<A2UIComponentProps<Types.DividerNode>>;
+export default Divider;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/react-renderer/components/content/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAItD;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,6EAgBlB,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/react-renderer/components/content/Divider.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useA2UIComponent } from '../../hooks/useA2UIComponent';
+import { classMapToString, stylesToObject } from '../../lib/utils';
+/**
+ * Divider component - renders a visual separator line.
+ *
+ * Structure mirrors Lit's Divider component:
+ *   <div class="a2ui-divider">  ← :host equivalent
+ *     <hr class="...">          ← internal element
+ *   </div>
+ */
+export const Divider = memo(function Divider({ node, surfaceId }) {
+    const { theme } = useA2UIComponent(node, surfaceId);
+    // Apply --weight CSS variable on root div (:host equivalent) for flex layouts
+    const hostStyle = node.weight !== undefined
+        ? { '--weight': node.weight }
+        : {};
+    return (_jsx("div", { className: "a2ui-divider", style: hostStyle, children: _jsx("hr", { className: classMapToString(theme.components.Divider), style: stylesToObject(theme.additionalStyles?.Divider) }) }));
+});
+export default Divider;
+//# sourceMappingURL=Divider.js.map

package/dist/react-renderer/components/content/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC,EAAE,IAAI,EAAE,SAAS,EAAyC;IACrG,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAEpD,8EAA8E;IAC9E,MAAM,SAAS,GAAwB,IAAI,CAAC,MAAM,KAAK,SAAS;QAC9D,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAyB;QACpD,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,cAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,SAAS,YAC5C,aACE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,EACrD,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,gBAAgB,EAAE,OAAO,CAAC,GACtD,GACE,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/react-renderer/components/content/Icon.d.ts

@@ -0,0 +1,16 @@
+import type { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types';
+/**
+ * Icon component - renders an icon using Material Symbols Outlined font.
+ *
+ * This matches the Lit renderer's approach using the g-icon class with
+ * Material Symbols Outlined font.
+ *
+ * @example Add Material Symbols font to your HTML:
+ * ```html
+ * <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
+ * ```
+ */
+export declare const Icon: import("react").NamedExoticComponent<A2UIComponentProps<Types.IconNode>>;
+export default Icon;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/react-renderer/components/content/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAatD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,IAAI,0EA4Bf,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/dist/react-renderer/components/content/Icon.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useA2UIComponent } from '../../hooks/useA2UIComponent';
+import { classMapToString, stylesToObject } from '../../lib/utils';
+/**
+ * Convert camelCase to snake_case for Material Symbols font.
+ * e.g., "shoppingCart" -> "shopping_cart"
+ * This matches the Lit renderer's approach.
+ */
+function toSnakeCase(str) {
+    return str.replace(/([A-Z])/g, '_$1').toLowerCase();
+}
+/**
+ * Icon component - renders an icon using Material Symbols Outlined font.
+ *
+ * This matches the Lit renderer's approach using the g-icon class with
+ * Material Symbols Outlined font.
+ *
+ * @example Add Material Symbols font to your HTML:
+ * ```html
+ * <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
+ * ```
+ */
+export const Icon = memo(function Icon({ node, surfaceId }) {
+    const { theme, resolveString } = useA2UIComponent(node, surfaceId);
+    const props = node.properties;
+    const iconName = resolveString(props.name);
+    if (!iconName) {
+        return null;
+    }
+    // Convert camelCase to snake_case for Material Symbols
+    const snakeCaseName = toSnakeCase(iconName);
+    // Apply --weight CSS variable on root div (:host equivalent) for flex layouts
+    const hostStyle = node.weight !== undefined
+        ? { '--weight': node.weight }
+        : {};
+    return (_jsx("div", { className: "a2ui-icon", style: hostStyle, children: _jsx("section", { className: classMapToString(theme.components.Icon), style: stylesToObject(theme.additionalStyles?.Icon), children: _jsx("span", { className: "g-icon", children: snakeCaseName }) }) }));
+});
+export default Icon;
+//# sourceMappingURL=Icon.js.map

package/dist/react-renderer/components/content/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;;;GAIG;AACH,SAAS,WAAW,CAAC,GAAW;IAC9B,OAAO,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;AACtD,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAsC;IAC5F,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACnE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAE9B,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAE3C,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,uDAAuD;IACvD,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAE5C,8EAA8E;IAC9E,MAAM,SAAS,GAAwB,IAAI,CAAC,MAAM,KAAK,SAAS;QAC9D,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAyB;QACpD,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,YACzC,kBACE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAClD,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAEnD,eAAM,SAAS,EAAC,QAAQ,YAAE,aAAa,GAAQ,GACvC,GACN,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/dist/react-renderer/components/content/Image.d.ts

@@ -0,0 +1,11 @@
+import type { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types';
+/**
+ * Image component - renders an image from a URL with optional sizing and fit modes.
+ *
+ * Supports usageHint values: icon, avatar, smallFeature, mediumFeature, largeFeature, header
+ * Supports fit values: contain, cover, fill, none, scale-down (maps to object-fit via CSS variable)
+ */
+export declare const Image: import("react").NamedExoticComponent<A2UIComponentProps<Types.ImageNode>>;
+export default Image;
+//# sourceMappingURL=Image.d.ts.map

package/dist/react-renderer/components/content/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/Image.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAOtD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,2EAuChB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/react-renderer/components/content/Image.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useA2UIComponent } from '../../hooks/useA2UIComponent';
+import { classMapToString, stylesToObject, mergeClassMaps } from '../../lib/utils';
+/**
+ * Image component - renders an image from a URL with optional sizing and fit modes.
+ *
+ * Supports usageHint values: icon, avatar, smallFeature, mediumFeature, largeFeature, header
+ * Supports fit values: contain, cover, fill, none, scale-down (maps to object-fit via CSS variable)
+ */
+export const Image = memo(function Image({ node, surfaceId }) {
+    const { theme, resolveString } = useA2UIComponent(node, surfaceId);
+    const props = node.properties;
+    const url = resolveString(props.url);
+    const usageHint = props.usageHint;
+    const fit = props.fit ?? 'fill';
+    // Get merged classes for section (matches Lit's Styles.merge)
+    const classes = mergeClassMaps(theme.components.Image.all, usageHint ? theme.components.Image[usageHint] : {});
+    // Build style object with object-fit as CSS variable (matches Lit)
+    const style = {
+        ...stylesToObject(theme.additionalStyles?.Image),
+        '--object-fit': fit,
+    };
+    if (!url) {
+        return null;
+    }
+    // Apply --weight CSS variable on root div (:host equivalent) for flex layouts
+    const hostStyle = node.weight !== undefined
+        ? { '--weight': node.weight }
+        : {};
+    return (_jsx("div", { className: "a2ui-image", style: hostStyle, children: _jsx("section", { className: classMapToString(classes), style: style, children: _jsx("img", { src: url, alt: "" }) }) }));
+});
+export default Image;
+//# sourceMappingURL=Image.js.map

package/dist/react-renderer/components/content/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/Image.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKnF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAuC;IAC/F,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACnE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAE9B,MAAM,GAAG,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAkC,CAAC;IAC3D,MAAM,GAAG,GAAI,KAAK,CAAC,GAAe,IAAI,MAAM,CAAC;IAE7C,8DAA8D;IAC9D,MAAM,OAAO,GAAG,cAAc,CAC5B,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,EAC1B,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CACnD,CAAC;IAEF,mEAAmE;IACnE,MAAM,KAAK,GAAwB;QACjC,GAAG,cAAc,CAAC,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC;QAChD,cAAc,EAAE,GAAG;KACG,CAAC;IAEzB,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,OAAO,IAAI,CAAC;IACd,CAAC;IAED,8EAA8E;IAC9E,MAAM,SAAS,GAAwB,IAAI,CAAC,MAAM,KAAK,SAAS;QAC9D,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAyB;QACpD,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,cAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,SAAS,YAC1C,kBACE,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,EACpC,KAAK,EAAE,KAAK,YAEZ,cAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,EAAE,GAAG,GAChB,GACN,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/react-renderer/components/content/Text.d.ts

@@ -0,0 +1,28 @@
+import type { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types';
+/**
+ * Text component - renders text content with markdown support.
+ *
+ * Structure mirrors Lit's Text component:
+ *   <div class="a2ui-text">      ← :host equivalent
+ *     <section class="...">      ← theme classes
+ *       <h2>...</h2>             ← rendered markdown content
+ *     </section>
+ *   </div>
+ *
+ * Text is parsed as markdown and rendered as HTML (matches Lit renderer behavior).
+ * Supports usageHint values: h1, h2, h3, h4, h5, caption, body
+ *
+ * Markdown features supported:
+ * - **Bold** and *italic* text
+ * - Lists (ordered and unordered)
+ * - `inline code` and code blocks
+ * - [Links](url) (auto-linkified URLs too)
+ * - Blockquotes
+ * - Horizontal rules
+ *
+ * Note: Raw HTML is disabled for security.
+ */
+export declare const Text: import("react").NamedExoticComponent<A2UIComponentProps<Types.TextNode>>;
+export default Text;
+//# sourceMappingURL=Text.d.ts.map

package/dist/react-renderer/components/content/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAgEtD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,IAAI,0EA+Ef,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/dist/react-renderer/components/content/Text.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, memo } from 'react';
+import { useA2UIComponent } from '../../hooks/useA2UIComponent';
+import { classMapToString, stylesToObject, mergeClassMaps } from '../../lib/utils';
+import MarkdownIt from 'markdown-it';
+function isHintedStyles(styles) {
+    if (typeof styles !== 'object' || !styles || Array.isArray(styles))
+        return false;
+    const expected = ['h1', 'h2', 'h3', 'h4', 'h5', 'caption', 'body'];
+    return expected.some((v) => v in styles);
+}
+/**
+ * Markdown-it instance for rendering markdown text.
+ * Uses synchronous import to ensure availability at first render (matches Lit renderer).
+ *
+ * Configuration matches Lit's markdown directive (uses MarkdownIt defaults):
+ * - html: false (default) - Security: disable raw HTML
+ * - linkify: false (default) - Don't auto-convert URLs/emails to links
+ * - breaks: false (default) - Don't convert \n to <br>
+ * - typographer: false (default) - Don't use smart quotes/dashes
+ */
+const markdownRenderer = new MarkdownIt();
+/**
+ * Apply theme classes to markdown HTML elements.
+ * Replaces default element tags with themed versions.
+ */
+function applyMarkdownTheme(html, markdownTheme) {
+    if (!markdownTheme)
+        return html;
+    // Map of element -> classes
+    const replacements = [];
+    for (const [element, classes] of Object.entries(markdownTheme)) {
+        if (!classes || (Array.isArray(classes) && classes.length === 0))
+            continue;
+        const classString = Array.isArray(classes) ? classes.join(' ') : classMapToString(classes);
+        if (!classString)
+            continue;
+        // Create regex to match opening tags (handles self-closing and regular)
+        const tagRegex = new RegExp(`<${element}(?=\\s|>|/>)`, 'gi');
+        replacements.push([tagRegex, `<${element} class="${classString}"`]);
+    }
+    let result = html;
+    for (const [regex, replacement] of replacements) {
+        result = result.replace(regex, replacement);
+    }
+    return result;
+}
+/**
+ * Text component - renders text content with markdown support.
+ *
+ * Structure mirrors Lit's Text component:
+ *   <div class="a2ui-text">      ← :host equivalent
+ *     <section class="...">      ← theme classes
+ *       <h2>...</h2>             ← rendered markdown content
+ *     </section>
+ *   </div>
+ *
+ * Text is parsed as markdown and rendered as HTML (matches Lit renderer behavior).
+ * Supports usageHint values: h1, h2, h3, h4, h5, caption, body
+ *
+ * Markdown features supported:
+ * - **Bold** and *italic* text
+ * - Lists (ordered and unordered)
+ * - `inline code` and code blocks
+ * - [Links](url) (auto-linkified URLs too)
+ * - Blockquotes
+ * - Horizontal rules
+ *
+ * Note: Raw HTML is disabled for security.
+ */
+export const Text = memo(function Text({ node, surfaceId }) {
+    const { theme, resolveString } = useA2UIComponent(node, surfaceId);
+    const props = node.properties;
+    const textValue = resolveString(props.text);
+    const usageHint = props.usageHint;
+    // Get merged classes (matches Lit's Styles.merge)
+    const classes = mergeClassMaps(theme.components.Text.all, usageHint ? theme.components.Text[usageHint] : {});
+    // Get additional styles based on usage hint
+    const additionalStyles = useMemo(() => {
+        const textStyles = theme.additionalStyles?.Text;
+        if (!textStyles)
+            return undefined;
+        if (isHintedStyles(textStyles)) {
+            const hint = usageHint ?? 'body';
+            return stylesToObject(textStyles[hint]);
+        }
+        return stylesToObject(textStyles);
+    }, [theme.additionalStyles?.Text, usageHint]);
+    // Render markdown content (matches Lit behavior - always uses markdown)
+    const renderedContent = useMemo(() => {
+        if (textValue === null || textValue === undefined) {
+            return null;
+        }
+        // Add markdown prefix based on usageHint (matches Lit behavior)
+        let markdownText = textValue;
+        switch (usageHint) {
+            case 'h1':
+                markdownText = `# ${markdownText}`;
+                break;
+            case 'h2':
+                markdownText = `## ${markdownText}`;
+                break;
+            case 'h3':
+                markdownText = `### ${markdownText}`;
+                break;
+            case 'h4':
+                markdownText = `#### ${markdownText}`;
+                break;
+            case 'h5':
+                markdownText = `##### ${markdownText}`;
+                break;
+            case 'caption':
+                markdownText = `*${markdownText}*`;
+                break;
+            default:
+                break; // Body - no prefix
+        }
+        const rawHtml = markdownRenderer.render(markdownText);
+        const themedHtml = applyMarkdownTheme(rawHtml, theme.markdown);
+        return { __html: themedHtml };
+    }, [textValue, theme.markdown, usageHint]);
+    if (!renderedContent) {
+        return null;
+    }
+    // Apply --weight CSS variable on root div (:host equivalent) for flex layouts
+    const hostStyle = node.weight !== undefined
+        ? { '--weight': node.weight }
+        : {};
+    return (_jsx("div", { className: "a2ui-text", style: hostStyle, children: _jsx("section", { className: classMapToString(classes), style: additionalStyles, dangerouslySetInnerHTML: renderedContent }) }));
+});
+export default Text;
+//# sourceMappingURL=Text.js.map

package/dist/react-renderer/components/content/Text.js.map

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

package/dist/react-renderer/components/content/Video.d.ts

@@ -0,0 +1,10 @@
+import type { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types';
+/**
+ * Video component - renders a video player.
+ *
+ * Supports regular video URLs and YouTube URLs (renders as embedded iframe).
+ */
+export declare const Video: import("react").NamedExoticComponent<A2UIComponentProps<Types.VideoNode>>;
+export default Video;
+//# sourceMappingURL=Video.d.ts.map

package/dist/react-renderer/components/content/Video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/Video.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAsBtD;;;;GAIG;AACH,eAAO,MAAM,KAAK,2EAqChB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/react-renderer/components/content/Video.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useA2UIComponent } from '../../hooks/useA2UIComponent';
+import { classMapToString, stylesToObject } from '../../lib/utils';
+/**
+ * Check if a URL is a YouTube URL and extract the video ID.
+ */
+function getYouTubeVideoId(url) {
+    const patterns = [
+        /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\s?]+)/,
+    ];
+    for (const pattern of patterns) {
+        const match = url.match(pattern);
+        if (match && match.length > 1) {
+            // Non-null assertion is safe here since we checked match.length > 1
+            return match[1];
+        }
+    }
+    return null;
+}
+/**
+ * Video component - renders a video player.
+ *
+ * Supports regular video URLs and YouTube URLs (renders as embedded iframe).
+ */
+export const Video = memo(function Video({ node, surfaceId }) {
+    const { theme, resolveString } = useA2UIComponent(node, surfaceId);
+    const props = node.properties;
+    const url = resolveString(props.url);
+    if (!url) {
+        return null;
+    }
+    const youtubeId = getYouTubeVideoId(url);
+    // Apply --weight CSS variable on root div (:host equivalent) for flex layouts
+    const hostStyle = node.weight !== undefined
+        ? { '--weight': node.weight }
+        : {};
+    return (_jsx("div", { className: "a2ui-video", style: hostStyle, children: _jsx("section", { className: classMapToString(theme.components.Video), style: stylesToObject(theme.additionalStyles?.Video), children: youtubeId ? (_jsx("iframe", { src: `https://www.youtube.com/embed/${youtubeId}`, title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, style: { border: 'none', width: '100%', aspectRatio: '16/9' } })) : (_jsx("video", { src: url, controls: true })) }) }));
+});
+export default Video;
+//# sourceMappingURL=Video.js.map

package/dist/react-renderer/components/content/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/Video.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;GAEG;AACH,SAAS,iBAAiB,CAAC,GAAW;IACpC,MAAM,QAAQ,GAAG;QACf,yEAAyE;KAC1E,CAAC;IACF,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC9B,oEAAoE;YAEpE,OAAO,KAAK,CAAC,CAAC,CAAE,CAAC;QACnB,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAuC;IAC/F,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACnE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAE9B,MAAM,GAAG,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAErC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC;IAEzC,8EAA8E;IAC9E,MAAM,SAAS,GAAwB,IAAI,CAAC,MAAM,KAAK,SAAS;QAC9D,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAyB;QACpD,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,cAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,SAAS,YAC1C,kBACE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,EACnD,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,YAEnD,SAAS,CAAC,CAAC,CAAC,CACX,iBACE,GAAG,EAAE,iCAAiC,SAAS,EAAE,EACjD,KAAK,EAAC,sBAAsB,EAC5B,KAAK,EAAC,0FAA0F,EAChG,eAAe,QACf,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAC7D,CACH,CAAC,CAAC,CAAC,CACF,gBAAO,GAAG,EAAE,GAAG,EAAE,QAAQ,SAAG,CAC7B,GACO,GACN,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/react-renderer/components/content/index.d.ts

@@ -0,0 +1,7 @@
+export { Text } from './Text';
+export { Image } from './Image';
+export { Icon } from './Icon';
+export { Divider } from './Divider';
+export { Video } from './Video';
+export { AudioPlayer } from './AudioPlayer';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-renderer/components/content/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/react-renderer/components/content/index.js

@@ -0,0 +1,7 @@
+export { Text } from './Text';
+export { Image } from './Image';
+export { Icon } from './Icon';
+export { Divider } from './Divider';
+export { Video } from './Video';
+export { AudioPlayer } from './AudioPlayer';
+//# sourceMappingURL=index.js.map

package/dist/react-renderer/components/content/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/react-renderer/components/interactive/Button.d.ts

@@ -0,0 +1,11 @@
+import type { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types';
+/**
+ * Button component - a clickable element that triggers an action.
+ *
+ * Contains a child component (usually Text or Icon) and dispatches
+ * a user action when clicked.
+ */
+export declare const Button: import("react").NamedExoticComponent<A2UIComponentProps<Types.ButtonNode>>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/dist/react-renderer/components/interactive/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKtD;;;;;GAKG;AACH,eAAO,MAAM,MAAM,4EA0BjB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/react-renderer/components/interactive/Button.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, memo } from 'react';
+import { useA2UIComponent } from '../../hooks/useA2UIComponent';
+import { classMapToString, stylesToObject } from '../../lib/utils';
+import { ComponentNode } from '../../core/ComponentNode';
+/**
+ * Button component - a clickable element that triggers an action.
+ *
+ * Contains a child component (usually Text or Icon) and dispatches
+ * a user action when clicked.
+ */
+export const Button = memo(function Button({ node, surfaceId }) {
+    const { theme, sendAction } = useA2UIComponent(node, surfaceId);
+    const props = node.properties;
+    const handleClick = useCallback(() => {
+        if (props.action) {
+            sendAction(props.action);
+        }
+    }, [props.action, sendAction]);
+    // Apply --weight CSS variable on root div (:host equivalent) for flex layouts
+    const hostStyle = node.weight !== undefined
+        ? { '--weight': node.weight }
+        : {};
+    return (_jsx("div", { className: "a2ui-button", style: hostStyle, children: _jsx("button", { className: classMapToString(theme.components.Button), style: stylesToObject(theme.additionalStyles?.Button), onClick: handleClick, children: _jsx(ComponentNode, { node: props.child, surfaceId: surfaceId }) }) }));
+});
+export default Button;
+//# sourceMappingURL=Button.js.map

package/dist/react-renderer/components/interactive/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,MAAM,CAAC,EAAE,IAAI,EAAE,SAAS,EAAwC;IAClG,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAChE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;IAE9B,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACjB,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/B,8EAA8E;IAC9E,MAAM,SAAS,GAAwB,IAAI,CAAC,MAAM,KAAK,SAAS;QAC9D,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAyB;QACpD,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,cAAK,SAAS,EAAC,aAAa,EAAC,KAAK,EAAE,SAAS,YAC3C,iBACE,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,EACpD,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,gBAAgB,EAAE,MAAM,CAAC,EACrD,OAAO,EAAE,WAAW,YAEpB,KAAC,aAAa,IAAC,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,GAAI,GACnD,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/react-renderer/components/interactive/CheckBox.d.ts

@@ -0,0 +1,10 @@
+import type { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types';
+/**
+ * CheckBox component - a boolean toggle with a label.
+ *
+ * Supports two-way data binding for the checked state.
+ */
+export declare const CheckBox: import("react").NamedExoticComponent<A2UIComponentProps<Types.CheckboxNode>>;
+export default CheckBox;
+//# sourceMappingURL=CheckBox.d.ts.map

package/dist/react-renderer/components/interactive/CheckBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBox.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/CheckBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAItD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,8EAiFnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/react-renderer/components/interactive/CheckBox.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useId, memo } from 'react';
+import { useA2UIComponent } from '../../hooks/useA2UIComponent';
+import { classMapToString, stylesToObject } from '../../lib/utils';
+/**
+ * CheckBox component - a boolean toggle with a label.
+ *
+ * Supports two-way data binding for the checked state.
+ */
+export const CheckBox = memo(function CheckBox({ node, surfaceId }) {
+    const { theme, resolveString, resolveBoolean, setValue, getValue } = useA2UIComponent(node, surfaceId);
+    const props = node.properties;
+    const id = useId();
+    const label = resolveString(props.label);
+    const valuePath = props.value?.path;
+    const initialChecked = resolveBoolean(props.value) ?? false;
+    const [checked, setChecked] = useState(initialChecked);
+    // Sync with external data model changes (path binding)
+    useEffect(() => {
+        if (valuePath) {
+            const externalValue = getValue(valuePath);
+            if (externalValue !== null && Boolean(externalValue) !== checked) {
+                setChecked(Boolean(externalValue));
+            }
+        }
+    }, [valuePath, getValue]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Sync when literal value changes from props (server-driven updates via surfaceUpdate)
+    useEffect(() => {
+        if (props.value?.literalBoolean !== undefined) {
+            setChecked(props.value.literalBoolean);
+        }
+    }, [props.value?.literalBoolean]);
+    const handleChange = useCallback((e) => {
+        const newValue = e.target.checked;
+        setChecked(newValue);
+        // Two-way binding: update data model
+        if (valuePath) {
+            setValue(valuePath, newValue);
+        }
+    }, [valuePath, setValue]);
+    // Structure mirrors Lit's CheckBox component:
+    //   <div class="a2ui-checkbox">  ← :host equivalent
+    //     <section class="...">      ← internal element
+    //       <input>...</input>
+    //       <label>...</label>
+    //     </section>
+    //   </div>
+    // Apply --weight CSS variable on root div (:host equivalent) for flex layouts
+    const hostStyle = node.weight !== undefined
+        ? { '--weight': node.weight }
+        : {};
+    return (_jsx("div", { className: "a2ui-checkbox", style: hostStyle, children: _jsxs("section", { className: classMapToString(theme.components.CheckBox.container), style: stylesToObject(theme.additionalStyles?.CheckBox), children: [_jsx("input", { type: "checkbox", id: id, checked: checked, onChange: handleChange, className: classMapToString(theme.components.CheckBox.element) }), label && (_jsx("label", { htmlFor: id, className: classMapToString(theme.components.CheckBox.label), children: label }))] }) }));
+});
+export default CheckBox;
+//# sourceMappingURL=CheckBox.js.map

package/dist/react-renderer/components/interactive/CheckBox.js.map

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

package/dist/react-renderer/components/interactive/DateTimeInput.d.ts

@@ -0,0 +1,10 @@
+import type { Types } from '@a2ui/lit/0.8';
+import type { A2UIComponentProps } from '../../types';
+/**
+ * DateTimeInput component - a date and/or time picker.
+ *
+ * Supports enabling date, time, or both. Uses native HTML5 date/time inputs.
+ */
+export declare const DateTimeInput: import("react").NamedExoticComponent<A2UIComponentProps<Types.DateTimeInputNode>>;
+export default DateTimeInput;
+//# sourceMappingURL=DateTimeInput.d.ts.map

package/dist/react-renderer/components/interactive/DateTimeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/react-renderer/components/interactive/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAItD;;;;GAIG;AACH,eAAO,MAAM,aAAa,mFAwFxB,CAAC;AAEH,eAAe,aAAa,CAAC"}