@uipath/apollo-wind 0.10.0-pr219.eea0372 → 0.10.0-pr219.fbe6d54

package/dist/components/custom/canvas-studio.cjs

@@ -0,0 +1,133 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    StudioGrid: ()=>StudioGrid,
+    StudioCanvas: ()=>StudioCanvas,
+    StudioGridItem: ()=>StudioGridItem
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const paddingClasses = {
+    none: '',
+    sm: 'p-4',
+    md: 'p-6',
+    lg: 'p-8'
+};
+const canvasBackgroundClasses = {
+    raised: 'bg-surface-raised',
+    surface: 'bg-surface',
+    transparent: 'bg-transparent'
+};
+function StudioCanvas({ children, className, padding = 'md', background = 'raised', fullWidth = false }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('relative flex-1', canvasBackgroundClasses[background], className),
+        "data-canvas": true,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: (0, index_cjs_namespaceObject.cn)('absolute inset-0 overflow-y-auto', paddingClasses[padding]),
+            children: fullWidth ? children : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex justify-center",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "w-[760px] max-w-full",
+                    children: children
+                })
+            })
+        })
+    });
+}
+const gridColsClasses = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    6: 'grid-cols-6',
+    12: 'grid-cols-12'
+};
+const gridGapClasses = {
+    none: '',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6'
+};
+function StudioGrid({ children, cols = 12, gap = 'md', className }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('grid', gridColsClasses[cols], gridGapClasses[gap], className),
+        children: children
+    });
+}
+const itemColSpanClasses = {
+    1: 'col-span-1',
+    2: 'col-span-2',
+    3: 'col-span-3',
+    4: 'col-span-4',
+    6: 'col-span-6',
+    12: 'col-span-12'
+};
+const itemBackgroundClasses = {
+    surface: 'bg-surface',
+    raised: 'bg-surface-raised',
+    transparent: 'bg-transparent'
+};
+function StudioGridItem({ children, cols = 12, className, background = 'surface', padding = 'md', border = true, canvasResponsive = false }) {
+    const [canvasWidth, setCanvasWidth] = external_react_namespaceObject.useState(0);
+    const itemRef = external_react_namespaceObject.useRef(null);
+    external_react_namespaceObject.useEffect(()=>{
+        if (!canvasResponsive) return;
+        const update = ()=>{
+            const canvas = itemRef.current?.closest('[data-canvas]');
+            if (canvas) setCanvasWidth(canvas.offsetWidth);
+        };
+        update();
+        window.addEventListener('resize', update);
+        const ro = new ResizeObserver(update);
+        const canvas = itemRef.current?.closest('[data-canvas]');
+        if (canvas) ro.observe(canvas);
+        return ()=>{
+            window.removeEventListener('resize', update);
+            ro.disconnect();
+        };
+    }, [
+        canvasResponsive
+    ]);
+    const responsiveColClass = canvasResponsive ? canvasWidth < 768 ? 'col-span-12' : canvasWidth < 1024 ? 'col-span-6' : 'col-span-3' : itemColSpanClasses[cols];
+    const hasExplicitColSpan = className?.includes('col-span-');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: itemRef,
+        className: (0, index_cjs_namespaceObject.cn)(!hasExplicitColSpan && responsiveColClass, itemBackgroundClasses[background], paddingClasses[padding], border && 'rounded-lg border border-border-subtle', className),
+        children: children
+    });
+}
+exports.StudioCanvas = __webpack_exports__.StudioCanvas;
+exports.StudioGrid = __webpack_exports__.StudioGrid;
+exports.StudioGridItem = __webpack_exports__.StudioGridItem;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "StudioCanvas",
+    "StudioGrid",
+    "StudioGridItem"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/custom/canvas-studio.d.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+declare const paddingClasses: {
+    readonly none: "";
+    readonly sm: "p-4";
+    readonly md: "p-6";
+    readonly lg: "p-8";
+};
+type PaddingSize = keyof typeof paddingClasses;
+export interface StudioCanvasProps {
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Outer padding applied to the scrollable area.
+     * @default 'md' (1.5rem / 24px)
+     */
+    padding?: PaddingSize;
+    /**
+     * Background of the canvas workspace.
+     * - `'raised'` — slightly elevated surface (default, differentiates from panels)
+     * - `'surface'` — base surface color
+     * - `'transparent'` — no background
+     */
+    background?: 'raised' | 'surface' | 'transparent';
+    /**
+     * When true, content fills the full canvas width instead of being
+     * centered in a 760px column. Use for data-dense layouts like tables.
+     */
+    fullWidth?: boolean;
+}
+/**
+ * Center canvas for the Studio template.
+ *
+ * - Fills remaining horizontal space between panels (`flex-1 relative`)
+ * - Scrolls independently via `absolute inset-0 overflow-y-auto`
+ * - Centers content in a `w-[760px] max-w-full` column
+ * - `data-canvas` attribute allows `StudioGridItem` canvasResponsive tracking
+ *
+ * Usage:
+ * ```tsx
+ * <StudioCanvas>
+ *   <StudioGrid>
+ *     <StudioGridItem>...</StudioGridItem>
+ *   </StudioGrid>
+ * </StudioCanvas>
+ * ```
+ */
+export declare function StudioCanvas({ children, className, padding, background, fullWidth, }: StudioCanvasProps): import("react/jsx-runtime").JSX.Element;
+export interface StudioGridProps {
+    children: React.ReactNode;
+    /** Number of columns in the grid. Default 12. */
+    cols?: 1 | 2 | 3 | 4 | 6 | 12;
+    /** Gap between grid cells. Default 'md'. */
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/**
+ * Grid wrapper for use inside `StudioCanvas`.
+ *
+ * Defaults to a 12-column grid with md gap. Pair with `StudioGridItem`.
+ */
+export declare function StudioGrid({ children, cols, gap, className }: StudioGridProps): import("react/jsx-runtime").JSX.Element;
+export interface StudioGridItemProps {
+    children: React.ReactNode;
+    /**
+     * Column span within the parent `StudioGrid`.
+     * Ignored if `className` already contains a `col-span-*` class,
+     * or if `canvasResponsive` is true (canvas width drives the span).
+     * @default 12
+     */
+    cols?: 1 | 2 | 3 | 4 | 6 | 12;
+    className?: string;
+    /**
+     * Background of the grid item card.
+     * - `'surface'` — base surface color (default, card-like)
+     * - `'raised'` — elevated surface
+     * - `'transparent'` — no background
+     */
+    background?: 'surface' | 'raised' | 'transparent';
+    /** Padding inside the card. Default 'md'. */
+    padding?: PaddingSize;
+    /** Render a border and rounded corners around the card. Default true. */
+    border?: boolean;
+    /**
+     * When true, the item measures the nearest `[data-canvas]` ancestor width
+     * and overrides `cols` with a responsive span:
+     * - < 768px  → col-span-12 (full width)
+     * - < 1024px → col-span-6  (half width)
+     * - ≥ 1024px → col-span-3  (quarter width)
+     */
+    canvasResponsive?: boolean;
+}
+/**
+ * Grid cell for use inside `StudioGrid`.
+ *
+ * Renders a card-like container with configurable background, padding, and border.
+ * Set `canvasResponsive` to automatically resize based on the canvas width.
+ */
+export declare function StudioGridItem({ children, cols, className, background, padding, border, canvasResponsive, }: StudioGridItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/custom/canvas-studio.js

@@ -0,0 +1,93 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../lib/index.js";
+const paddingClasses = {
+    none: '',
+    sm: 'p-4',
+    md: 'p-6',
+    lg: 'p-8'
+};
+const canvasBackgroundClasses = {
+    raised: 'bg-surface-raised',
+    surface: 'bg-surface',
+    transparent: 'bg-transparent'
+};
+function StudioCanvas({ children, className, padding = 'md', background = 'raised', fullWidth = false }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('relative flex-1', canvasBackgroundClasses[background], className),
+        "data-canvas": true,
+        children: /*#__PURE__*/ jsx("div", {
+            className: cn('absolute inset-0 overflow-y-auto', paddingClasses[padding]),
+            children: fullWidth ? children : /*#__PURE__*/ jsx("div", {
+                className: "flex justify-center",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "w-[760px] max-w-full",
+                    children: children
+                })
+            })
+        })
+    });
+}
+const gridColsClasses = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    6: 'grid-cols-6',
+    12: 'grid-cols-12'
+};
+const gridGapClasses = {
+    none: '',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6'
+};
+function StudioGrid({ children, cols = 12, gap = 'md', className }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('grid', gridColsClasses[cols], gridGapClasses[gap], className),
+        children: children
+    });
+}
+const itemColSpanClasses = {
+    1: 'col-span-1',
+    2: 'col-span-2',
+    3: 'col-span-3',
+    4: 'col-span-4',
+    6: 'col-span-6',
+    12: 'col-span-12'
+};
+const itemBackgroundClasses = {
+    surface: 'bg-surface',
+    raised: 'bg-surface-raised',
+    transparent: 'bg-transparent'
+};
+function StudioGridItem({ children, cols = 12, className, background = 'surface', padding = 'md', border = true, canvasResponsive = false }) {
+    const [canvasWidth, setCanvasWidth] = useState(0);
+    const itemRef = useRef(null);
+    useEffect(()=>{
+        if (!canvasResponsive) return;
+        const update = ()=>{
+            const canvas = itemRef.current?.closest('[data-canvas]');
+            if (canvas) setCanvasWidth(canvas.offsetWidth);
+        };
+        update();
+        window.addEventListener('resize', update);
+        const ro = new ResizeObserver(update);
+        const canvas = itemRef.current?.closest('[data-canvas]');
+        if (canvas) ro.observe(canvas);
+        return ()=>{
+            window.removeEventListener('resize', update);
+            ro.disconnect();
+        };
+    }, [
+        canvasResponsive
+    ]);
+    const responsiveColClass = canvasResponsive ? canvasWidth < 768 ? 'col-span-12' : canvasWidth < 1024 ? 'col-span-6' : 'col-span-3' : itemColSpanClasses[cols];
+    const hasExplicitColSpan = className?.includes('col-span-');
+    return /*#__PURE__*/ jsx("div", {
+        ref: itemRef,
+        className: cn(!hasExplicitColSpan && responsiveColClass, itemBackgroundClasses[background], paddingClasses[padding], border && 'rounded-lg border border-border-subtle', className),
+        children: children
+    });
+}
+export { StudioCanvas, StudioGrid, StudioGridItem };

package/dist/components/custom/canvas.cjs

@@ -31,7 +31,7 @@ require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 function Canvas({ className, children }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, index_cjs_namespaceObject.cn)('flex flex-1 flex-col overflow-auto bg-future-surface', className),
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-1 flex-col overflow-auto bg-surface', className),
         children: children
     });
 }

package/dist/components/custom/canvas.js

@@ -3,7 +3,7 @@ import "react";
 import { cn } from "../../lib/index.js";
 function Canvas({ className, children }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex flex-1 flex-col overflow-auto bg-future-surface', className),
+        className: cn('flex flex-1 flex-col overflow-auto bg-surface', className),
         children: children
     });
 }

package/dist/components/custom/canvas.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Canvas } from './canvas';
+declare const meta: {
+    title: string;
+    component: typeof Canvas;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/custom/chat-composer.cjs

@@ -45,12 +45,12 @@ function ChatComposer({ className, placeholder = 'I would like you to automate m
         }
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, index_cjs_namespaceObject.cn)('w-full max-w-[800px] rounded-[32px] bg-gradient-to-b from-future-surface to-future-surface-raised p-2', className),
+        className: (0, index_cjs_namespaceObject.cn)('w-full max-w-[800px] rounded-[32px] bg-gradient-to-b from-surface to-surface-raised p-2', className),
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            className: "flex min-h-[124px] flex-col justify-between rounded-3xl border border-future-border bg-future-surface-overlay pb-3 pl-4 pr-3 pt-4",
+            className: "flex min-h-[124px] flex-col justify-between rounded-3xl border border-border bg-surface-overlay pb-3 pl-4 pr-3 pt-4",
             children: [
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
-                    className: "w-full resize-none bg-transparent text-base font-medium leading-5 text-future-foreground placeholder:text-future-foreground-subtle focus:outline-none",
+                    className: "w-full resize-none bg-transparent text-base font-medium leading-5 text-foreground placeholder:text-foreground-subtle focus:outline-none",
                     placeholder: placeholder,
                     rows: 2,
                     value: value,
@@ -65,29 +65,29 @@ function ChatComposer({ className, placeholder = 'I would like you to automate m
                             children: [
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                                     type: "button",
-                                    className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-future-border-inverse bg-future-surface-inverse transition-opacity hover:opacity-80",
+                                    className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80",
                                     "aria-label": "Add attachment",
                                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
-                                        className: "h-5 w-5 text-future-foreground-inverse"
+                                        className: "h-5 w-5 text-foreground-inverse"
                                     })
                                 }),
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                                     type: "button",
-                                    className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-future-border-inverse bg-future-surface-inverse transition-opacity hover:opacity-80",
+                                    className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80",
                                     "aria-label": "Add workflow",
                                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Workflow, {
-                                        className: "h-5 w-5 text-future-foreground-inverse"
+                                        className: "h-5 w-5 text-foreground-inverse"
                                     })
                                 })
                             ]
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                             type: "button",
-                            className: "flex h-8 w-8 items-center justify-center rounded-2xl bg-future-accent transition-opacity hover:opacity-90",
+                            className: "flex h-8 w-8 items-center justify-center rounded-2xl bg-brand transition-opacity hover:opacity-90",
                             onClick: handleSubmit,
                             "aria-label": "Submit message",
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CornerDownLeft, {
-                                className: "h-5 w-5 -scale-y-100 rotate-90 text-future-foreground-on-accent"
+                                className: "h-5 w-5 -scale-y-100 rotate-90 text-foreground-on-accent"
                             })
                         })
                     ]

package/dist/components/custom/chat-composer.js

@@ -17,12 +17,12 @@ function ChatComposer({ className, placeholder = 'I would like you to automate m
         }
     };
     return /*#__PURE__*/ jsx("div", {
-        className: cn('w-full max-w-[800px] rounded-[32px] bg-gradient-to-b from-future-surface to-future-surface-raised p-2', className),
+        className: cn('w-full max-w-[800px] rounded-[32px] bg-gradient-to-b from-surface to-surface-raised p-2', className),
         children: /*#__PURE__*/ jsxs("div", {
-            className: "flex min-h-[124px] flex-col justify-between rounded-3xl border border-future-border bg-future-surface-overlay pb-3 pl-4 pr-3 pt-4",
+            className: "flex min-h-[124px] flex-col justify-between rounded-3xl border border-border bg-surface-overlay pb-3 pl-4 pr-3 pt-4",
             children: [
                 /*#__PURE__*/ jsx("textarea", {
-                    className: "w-full resize-none bg-transparent text-base font-medium leading-5 text-future-foreground placeholder:text-future-foreground-subtle focus:outline-none",
+                    className: "w-full resize-none bg-transparent text-base font-medium leading-5 text-foreground placeholder:text-foreground-subtle focus:outline-none",
                     placeholder: placeholder,
                     rows: 2,
                     value: value,
@@ -37,29 +37,29 @@ function ChatComposer({ className, placeholder = 'I would like you to automate m
                             children: [
                                 /*#__PURE__*/ jsx("button", {
                                     type: "button",
-                                    className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-future-border-inverse bg-future-surface-inverse transition-opacity hover:opacity-80",
+                                    className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80",
                                     "aria-label": "Add attachment",
                                     children: /*#__PURE__*/ jsx(Plus, {
-                                        className: "h-5 w-5 text-future-foreground-inverse"
+                                        className: "h-5 w-5 text-foreground-inverse"
                                     })
                                 }),
                                 /*#__PURE__*/ jsx("button", {
                                     type: "button",
-                                    className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-future-border-inverse bg-future-surface-inverse transition-opacity hover:opacity-80",
+                                    className: "flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80",
                                     "aria-label": "Add workflow",
                                     children: /*#__PURE__*/ jsx(Workflow, {
-                                        className: "h-5 w-5 text-future-foreground-inverse"
+                                        className: "h-5 w-5 text-foreground-inverse"
                                     })
                                 })
                             ]
                         }),
                         /*#__PURE__*/ jsx("button", {
                             type: "button",
-                            className: "flex h-8 w-8 items-center justify-center rounded-2xl bg-future-accent transition-opacity hover:opacity-90",
+                            className: "flex h-8 w-8 items-center justify-center rounded-2xl bg-brand transition-opacity hover:opacity-90",
                             onClick: handleSubmit,
                             "aria-label": "Submit message",
                             children: /*#__PURE__*/ jsx(CornerDownLeft, {
-                                className: "h-5 w-5 -scale-y-100 rotate-90 text-future-foreground-on-accent"
+                                className: "h-5 w-5 -scale-y-100 rotate-90 text-foreground-on-accent"
                             })
                         })
                     ]

package/dist/components/custom/chat-composer.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { ChatComposer } from './chat-composer';
+declare const meta: {
+    title: string;
+    component: typeof ChatComposer;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/custom/chat-first-experience.cjs

@@ -53,14 +53,14 @@ function ChatFirstExperience({ className, userName = 'David', subtitle = 'What s
                     className: "flex flex-col items-center text-center",
                     children: [
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("h1", {
-                            className: "text-[40px] font-bold leading-9 tracking-[-0.8px] text-future-foreground",
+                            className: "text-[40px] font-bold leading-9 tracking-[-0.8px] text-foreground",
                             children: [
                                 "Hello ",
                                 userName
                             ]
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                            className: "mt-1 text-base font-normal leading-9 text-future-foreground-secondary",
+                            className: "mt-1 text-base font-normal leading-9 text-foreground-secondary",
                             children: subtitle
                         })
                     ]

package/dist/components/custom/chat-first-experience.js

@@ -25,14 +25,14 @@ function ChatFirstExperience({ className, userName = 'David', subtitle = 'What s
                     className: "flex flex-col items-center text-center",
                     children: [
                         /*#__PURE__*/ jsxs("h1", {
-                            className: "text-[40px] font-bold leading-9 tracking-[-0.8px] text-future-foreground",
+                            className: "text-[40px] font-bold leading-9 tracking-[-0.8px] text-foreground",
                             children: [
                                 "Hello ",
                                 userName
                             ]
                         }),
                         /*#__PURE__*/ jsx("p", {
-                            className: "mt-1 text-base font-normal leading-9 text-future-foreground-secondary",
+                            className: "mt-1 text-base font-normal leading-9 text-foreground-secondary",
                             children: subtitle
                         })
                     ]

package/dist/components/custom/chat-first-experience.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { ChatFirstExperience } from './chat-first-experience';
+declare const meta: {
+    title: string;
+    component: typeof ChatFirstExperience;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/custom/chat-prompt-suggestions.cjs

@@ -33,7 +33,8 @@ function PromptSuggestions({ className, suggestions = [], onSelect }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: (0, index_cjs_namespaceObject.cn)('flex flex-col items-start gap-2', className),
         children: suggestions.map((suggestion)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                className: "flex h-10 items-center rounded-xl border border-future-border bg-future-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-future-foreground transition-colors hover:bg-future-surface-hover",
+                type: "button",
+                className: "flex h-10 items-center rounded-xl border border-border bg-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-foreground transition-colors hover:bg-surface-hover",
                 onClick: ()=>onSelect?.(suggestion),
                 children: suggestion.label
             }, suggestion.id))

package/dist/components/custom/chat-prompt-suggestions.js

@@ -5,7 +5,8 @@ function PromptSuggestions({ className, suggestions = [], onSelect }) {
     return /*#__PURE__*/ jsx("div", {
         className: cn('flex flex-col items-start gap-2', className),
         children: suggestions.map((suggestion)=>/*#__PURE__*/ jsx("button", {
-                className: "flex h-10 items-center rounded-xl border border-future-border bg-future-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-future-foreground transition-colors hover:bg-future-surface-hover",
+                type: "button",
+                className: "flex h-10 items-center rounded-xl border border-border bg-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-foreground transition-colors hover:bg-surface-hover",
                 onClick: ()=>onSelect?.(suggestion),
                 children: suggestion.label
             }, suggestion.id))

package/dist/components/custom/chat-prompt-suggestions.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { PromptSuggestions } from './chat-prompt-suggestions';
+declare const meta: {
+    title: string;
+    component: typeof PromptSuggestions;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;