@uipath/apollo-wind 2.70.0 → 2.71.0

package/dist/styles.css

@@ -926,9 +926,6 @@
   .mr-auto {
     margin-right: auto;
   }
-  .mb-0\.5 {
-    margin-bottom: calc(var(--spacing) * 0.5);
-  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -1112,6 +1109,10 @@
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .size-12 {
+    width: calc(var(--spacing) * 12);
+    height: calc(var(--spacing) * 12);
+  }
   .size-\[18px\] {
     width: 18px;
     height: 18px;
@@ -1284,6 +1285,9 @@
   .h-\[600px\] {
     height: 600px;
   }
+  .h-\[640px\] {
+    height: 640px;
+  }
   .h-\[calc\(100vh-10rem\)\] {
     height: calc(100vh - 10rem);
   }
@@ -1875,6 +1879,9 @@
   .flex-auto {
     flex: auto;
   }
+  .flex-none {
+    flex: none;
+  }
   .flex-shrink {
     flex-shrink: 1;
   }
@@ -2093,6 +2100,9 @@
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .animate-slide-in-from-bottom {
+    animation: apollo-slide-in-from-bottom 300ms ease-out;
+  }
   .animate-spin {
     animation: var(--animate-spin);
   }
@@ -2135,6 +2145,9 @@
   .snap-mandatory {
     --tw-scroll-snap-strictness: mandatory;
   }
+  .snap-start {
+    scroll-snap-align: start;
+  }
   .scroll-px-1 {
     scroll-padding-inline: calc(var(--spacing) * 1);
   }
@@ -2807,12 +2820,6 @@
   .border-orange-300 {
     border-color: var(--color-orange-300);
   }
-  .border-orange-500\/20 {
-    border-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
-    }
-  }
   .border-primary {
     border-color: var(--primary);
   }
@@ -2876,12 +2883,6 @@
   .border-transparent {
     border-color: transparent;
   }
-  .border-violet-500\/20 {
-    border-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
-    }
-  }
   .border-warning {
     border-color: var(--warning);
   }
@@ -3473,12 +3474,6 @@
   .bg-orange-500 {
     background-color: var(--color-orange-500);
   }
-  .bg-orange-500\/10 {
-    background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
-    }
-  }
   .bg-orange-600 {
     background-color: var(--color-orange-600);
   }
@@ -3857,12 +3852,6 @@
   .bg-violet-500 {
     background-color: var(--color-violet-500);
   }
-  .bg-violet-500\/10 {
-    background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
-    }
-  }
   .bg-violet-600 {
     background-color: var(--color-violet-600);
   }
@@ -4396,6 +4385,9 @@
   .text-right {
     text-align: right;
   }
+  .text-start {
+    text-align: start;
+  }
   .align-middle {
     vertical-align: middle;
   }
@@ -4508,6 +4500,10 @@
     --tw-leading: calc(var(--spacing) * 9);
     line-height: calc(var(--spacing) * 9);
   }
+  .leading-10 {
+    --tw-leading: calc(var(--spacing) * 10);
+    line-height: calc(var(--spacing) * 10);
+  }
   .leading-\[18px\] {
     --tw-leading: 18px;
     line-height: 18px;
@@ -4612,6 +4608,9 @@
   .break-all {
     word-break: break-all;
   }
+  .whitespace-normal {
+    white-space: normal;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -4780,9 +4779,6 @@
       color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
     }
   }
-  .text-orange-400 {
-    color: var(--color-orange-400);
-  }
   .text-orange-500 {
     color: var(--color-orange-500);
   }
@@ -4843,9 +4839,6 @@
   .text-transparent {
     color: transparent;
   }
-  .text-violet-400 {
-    color: var(--color-violet-400);
-  }
   .text-warning {
     color: var(--warning);
   }
@@ -6158,16 +6151,6 @@
       }
     }
   }
-  .hover\:border-primary\/40 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--primary);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--primary) 40%, transparent);
-        }
-      }
-    }
-  }
   .hover\:border-primary\/50 {
     &:hover {
       @media (hover: hover) {
@@ -7458,6 +7441,49 @@
       }
     }
   }
+  .\*\*\:data-\[slot\=prompt-suggestion\]\:h-10 {
+    :is(& *) {
+      &[data-slot="prompt-suggestion"] {
+        height: calc(var(--spacing) * 10);
+      }
+    }
+  }
+  .\*\*\:data-\[slot\=prompt-suggestion\]\:py-2\.5 {
+    :is(& *) {
+      &[data-slot="prompt-suggestion"] {
+        padding-block: calc(var(--spacing) * 2.5);
+      }
+    }
+  }
+  .\*\*\:data-\[slot\=prompt-suggestion\]\:text-foreground-secondary {
+    :is(& *) {
+      &[data-slot="prompt-suggestion"] {
+        color: var(--foreground-secondary);
+      }
+    }
+  }
+  .\*\*\:data-\[slot\=prompt-suggestion\]\:hover\:border-border-hover {
+    :is(& *) {
+      &[data-slot="prompt-suggestion"] {
+        &:hover {
+          @media (hover: hover) {
+            border-color: var(--border-hover);
+          }
+        }
+      }
+    }
+  }
+  .\*\*\:data-\[slot\=prompt-suggestion\]\:hover\:text-foreground {
+    :is(& *) {
+      &[data-slot="prompt-suggestion"] {
+        &:hover {
+          @media (hover: hover) {
+            color: var(--foreground);
+          }
+        }
+      }
+    }
+  }
   .data-\[spacing\=0\]\:rounded-none {
     &[data-spacing="0"] {
       border-radius: 0;
@@ -12482,10 +12508,23 @@ html[dir='rtl'], [data-sonner-toaster][dir='rtl'] {
     transform: translateX(0);
   }
 }
+@keyframes apollo-slide-in-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(1.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .animate-slide-in-from-right, .animate-slide-in-from-left {
     animation: apollo-fade-in 150ms ease-out;
   }
+  .animate-slide-in-from-bottom {
+    animation: apollo-fade-in 300ms ease-out;
+  }
 }
 @property --scroll-fade-t {
   syntax: '<length-percentage>';

package/dist/tailwind.utilities.css

@@ -69,6 +69,8 @@
  * element in while it travels 20px to its resting position. Intended for
  * hierarchical panels where forward navigation enters from the right and
  * going back enters from the left (canvas Toolbox, nested pickers).
+ * `animate-slide-in-from-bottom` is the slower rise of chat content that
+ * appears below a reply (PromptSuggestions).
  *
  * Two keyframes rather than one parameterized by a custom property: the
  * offset is the only difference, and inlining it keeps `var()` out of the
@@ -85,6 +87,11 @@
   to   { opacity: 1; transform: translateX(0); }
 }
 
+@keyframes apollo-slide-in-from-bottom {
+  from { opacity: 0; transform: translateY(1.25rem); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
 @utility animate-slide-in-from-right {
   animation: apollo-slide-in-from-right 150ms ease-out;
 }
@@ -93,11 +100,19 @@
   animation: apollo-slide-in-from-left 150ms ease-out;
 }
 
+@utility animate-slide-in-from-bottom {
+  animation: apollo-slide-in-from-bottom 300ms ease-out;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .animate-slide-in-from-right,
   .animate-slide-in-from-left {
     animation: apollo-fade-in 150ms ease-out;
   }
+
+  .animate-slide-in-from-bottom {
+    animation: apollo-fade-in 300ms ease-out;
+  }
 }
 
 /* ============================================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.70.0",
+  "version": "2.71.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -1,87 +0,0 @@
-"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 ("u" > 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__, {
-    ChatFirstExperience: ()=>ChatFirstExperience
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_chat_prompt_suggestions_cjs_namespaceObject = require("./chat-prompt-suggestions.cjs");
-const external_demo_composer_cjs_namespaceObject = require("./demo-composer.cjs");
-const index_cjs_namespaceObject = require("../../lib/index.cjs");
-function ChatFirstExperience({ className, userName = 'David', subtitle = 'What should we work on today?', composerPlaceholder = 'I would like you to automate my', suggestions = [
-    {
-        id: '1',
-        label: 'Make a list of affordable apartments in NYC'
-    },
-    {
-        id: '2',
-        label: 'Find the highest CD rates'
-    },
-    {
-        id: '3',
-        label: 'Lorem ipsum dolor sit amet'
-    }
-], onSuggestionClick, onSubmit }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, index_cjs_namespaceObject.cn)('flex flex-1 flex-col items-center justify-center', className),
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            className: "flex w-full max-w-[800px] flex-col items-center gap-[37px]",
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                    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-foreground",
-                            children: [
-                                "Hello ",
-                                userName
-                            ]
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-                            className: "mt-1 text-base font-normal leading-9 text-foreground-secondary",
-                            children: subtitle
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_demo_composer_cjs_namespaceObject.DemoComposer, {
-                    placeholder: composerPlaceholder,
-                    onSubmit: onSubmit
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_chat_prompt_suggestions_cjs_namespaceObject.PromptSuggestions, {
-                    className: "w-full",
-                    suggestions: suggestions,
-                    onSelect: onSuggestionClick
-                })
-            ]
-        })
-    });
-}
-exports.ChatFirstExperience = __webpack_exports__.ChatFirstExperience;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "ChatFirstExperience"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

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

@@ -1,24 +0,0 @@
-import { type PromptSuggestion } from './chat-prompt-suggestions';
-export interface ChatFirstExperienceProps {
-    className?: string;
-    /** Greeting name displayed in the heading */
-    userName?: string;
-    /** Subtitle below the greeting */
-    subtitle?: string;
-    /** Placeholder text inside the composer */
-    composerPlaceholder?: string;
-    /** Prompt suggestions shown below the composer */
-    suggestions?: PromptSuggestion[];
-    /** Callback when a suggestion is clicked */
-    onSuggestionClick?: (suggestion: PromptSuggestion) => void;
-    /** Callback when the composer submit button is clicked */
-    onSubmit?: (value: string) => void;
-}
-/**
- * The initial "first run" experience shown in the Canvas when
- * a user opens the Delegate Chat page with no active conversation.
- *
- * Displays a greeting, a composer input, and prompt suggestions,
- * all constrained to 800px max-width and centered in the canvas.
- */
-export declare function ChatFirstExperience({ className, userName, subtitle, composerPlaceholder, suggestions, onSuggestionClick, onSubmit, }: ChatFirstExperienceProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,53 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { PromptSuggestions } from "./chat-prompt-suggestions.js";
-import { DemoComposer } from "./demo-composer.js";
-import { cn } from "../../lib/index.js";
-function ChatFirstExperience({ className, userName = 'David', subtitle = 'What should we work on today?', composerPlaceholder = 'I would like you to automate my', suggestions = [
-    {
-        id: '1',
-        label: 'Make a list of affordable apartments in NYC'
-    },
-    {
-        id: '2',
-        label: 'Find the highest CD rates'
-    },
-    {
-        id: '3',
-        label: 'Lorem ipsum dolor sit amet'
-    }
-], onSuggestionClick, onSubmit }) {
-    return /*#__PURE__*/ jsx("div", {
-        className: cn('flex flex-1 flex-col items-center justify-center', className),
-        children: /*#__PURE__*/ jsxs("div", {
-            className: "flex w-full max-w-[800px] flex-col items-center gap-[37px]",
-            children: [
-                /*#__PURE__*/ jsxs("div", {
-                    className: "flex flex-col items-center text-center",
-                    children: [
-                        /*#__PURE__*/ jsxs("h1", {
-                            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-foreground-secondary",
-                            children: subtitle
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(DemoComposer, {
-                    placeholder: composerPlaceholder,
-                    onSubmit: onSubmit
-                }),
-                /*#__PURE__*/ jsx(PromptSuggestions, {
-                    className: "w-full",
-                    suggestions: suggestions,
-                    onSelect: onSuggestionClick
-                })
-            ]
-        })
-    });
-}
-export { ChatFirstExperience };

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

@@ -1,49 +0,0 @@
-"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 ("u" > 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__, {
-    PromptSuggestions: ()=>PromptSuggestions
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../lib/index.cjs");
-function PromptSuggestions({ className, suggestions = [], onSelect }) {
-    if (0 === suggestions.length) return null;
-    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", {
-                type: "button",
-                className: "flex h-10 items-center rounded-xl border border-border-subtle bg-surface-raised hover:border-border-hover px-4 py-2.5 text-sm font-normal leading-5 text-foreground-secondary transition-colors hover:bg-surface-hover hover:text-foreground",
-                onClick: ()=>onSelect?.(suggestion),
-                children: suggestion.label
-            }, suggestion.id))
-    });
-}
-exports.PromptSuggestions = __webpack_exports__.PromptSuggestions;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "PromptSuggestions"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

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

@@ -1,18 +0,0 @@
-export interface PromptSuggestion {
-    id: string;
-    label: string;
-}
-export interface PromptSuggestionsProps {
-    className?: string;
-    /** List of suggestions to display */
-    suggestions?: PromptSuggestion[];
-    /** Callback when a suggestion is clicked */
-    onSelect?: (suggestion: PromptSuggestion) => void;
-}
-/**
- * A vertical list of clickable prompt suggestion pills.
- *
- * Styled per the Delegate Figma spec: zinc-800 background with
- * zinc-700 border and zinc-50 text.
- */
-export declare function PromptSuggestions({ className, suggestions, onSelect, }: PromptSuggestionsProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { cn } from "../../lib/index.js";
-function PromptSuggestions({ className, suggestions = [], onSelect }) {
-    if (0 === suggestions.length) return null;
-    return /*#__PURE__*/ jsx("div", {
-        className: cn('flex flex-col items-start gap-2', className),
-        children: suggestions.map((suggestion)=>/*#__PURE__*/ jsx("button", {
-                type: "button",
-                className: "flex h-10 items-center rounded-xl border border-border-subtle bg-surface-raised hover:border-border-hover px-4 py-2.5 text-sm font-normal leading-5 text-foreground-secondary transition-colors hover:bg-surface-hover hover:text-foreground",
-                onClick: ()=>onSelect?.(suggestion),
-                children: suggestion.label
-            }, suggestion.id))
-    });
-}
-export { PromptSuggestions };