@uipath/apollo-wind 2.33.3 → 2.35.0

package/dist/components/ui/alert.cjs

@@ -32,11 +32,14 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_class_variance_authority_namespaceObject = require("class-variance-authority");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const alertVariants = (0, external_class_variance_authority_namespaceObject.cva)('relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', {
+const alertVariants = (0, external_class_variance_authority_namespaceObject.cva)('relative w-full rounded-xl border p-3 text-foreground [&>svg~*]:pl-6 [&>svg]:absolute [&>svg]:left-3 [&>svg]:top-3.5 [&>svg]:size-3.5', {
     variants: {
         variant: {
-            default: 'bg-background text-foreground',
-            destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive'
+            default: 'border-border-subtle bg-surface [&>svg]:text-foreground-muted',
+            info: 'border-info/30 bg-info-background/10 [&>svg]:text-info',
+            success: 'border-success/50 bg-success-background/25 [&>svg]:text-success',
+            warning: 'border-warning/50 bg-warning-background/25 [&>svg]:text-warning',
+            destructive: 'border-error/50 bg-error-background/25 [&>svg]:text-error'
         }
     },
     defaultVariants: {
@@ -54,13 +57,13 @@ const Alert = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ classNa
 Alert.displayName = 'Alert';
 const AlertTitle = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h5", {
         ref: ref,
-        className: (0, index_cjs_namespaceObject.cn)('mb-1 font-medium leading-none tracking-tight', className),
+        className: (0, index_cjs_namespaceObject.cn)('text-xs font-semibold leading-4', className),
         ...props
     }));
 AlertTitle.displayName = 'AlertTitle';
 const AlertDescription = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
-        className: (0, index_cjs_namespaceObject.cn)('text-sm [&_p]:leading-relaxed', className),
+        className: (0, index_cjs_namespaceObject.cn)('mt-1 text-xs leading-4 text-foreground-muted [&_p+p]:mt-1 [&_p]:leading-4', className),
         ...props
     }));
 AlertDescription.displayName = "AlertDescription";

package/dist/components/ui/alert.d.ts

@@ -1,8 +1,8 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "info" | "success" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
-declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
-declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export { Alert, AlertTitle, AlertDescription };

package/dist/components/ui/alert.js

@@ -2,11 +2,14 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { cn } from "../../lib/index.js";
-const alertVariants = cva('relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', {
+const alertVariants = cva('relative w-full rounded-xl border p-3 text-foreground [&>svg~*]:pl-6 [&>svg]:absolute [&>svg]:left-3 [&>svg]:top-3.5 [&>svg]:size-3.5', {
     variants: {
         variant: {
-            default: 'bg-background text-foreground',
-            destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive'
+            default: 'border-border-subtle bg-surface [&>svg]:text-foreground-muted',
+            info: 'border-info/30 bg-info-background/10 [&>svg]:text-info',
+            success: 'border-success/50 bg-success-background/25 [&>svg]:text-success',
+            warning: 'border-warning/50 bg-warning-background/25 [&>svg]:text-warning',
+            destructive: 'border-error/50 bg-error-background/25 [&>svg]:text-error'
         }
     },
     defaultVariants: {
@@ -24,13 +27,13 @@ const Alert = /*#__PURE__*/ forwardRef(({ className, variant, ...props }, ref)=>
 Alert.displayName = 'Alert';
 const AlertTitle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("h5", {
         ref: ref,
-        className: cn('mb-1 font-medium leading-none tracking-tight', className),
+        className: cn('text-xs font-semibold leading-4', className),
         ...props
     }));
 AlertTitle.displayName = 'AlertTitle';
 const AlertDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: cn('text-sm [&_p]:leading-relaxed', className),
+        className: cn('mt-1 text-xs leading-4 text-foreground-muted [&_p+p]:mt-1 [&_p]:leading-4', className),
         ...props
     }));
 AlertDescription.displayName = "AlertDescription";

package/dist/components/ui/index.cjs

@@ -30,10 +30,10 @@ var __webpack_modules__ = {
     "./calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "./card" (module) {
+    "@/components/ui/card" (module) {
         module.exports = require("./card.cjs");
     },
-    "./checkbox" (module) {
+    "@/components/ui/checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
     "./collapsible" (module) {
@@ -45,7 +45,7 @@ var __webpack_modules__ = {
     "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "./context-menu" (module) {
+    "@/components/ui/context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (module) {
@@ -57,10 +57,10 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "./dialog" (module) {
+    "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
-    "./dropdown-menu" (module) {
+    "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
     "./editable-cell" (module) {
@@ -72,7 +72,7 @@ var __webpack_modules__ = {
     "./file-upload" (module) {
         module.exports = require("./file-upload.cjs");
     },
-    "./hover-card" (module) {
+    "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
     "./input-group" (module) {
@@ -156,7 +156,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "./toggle" (module) {
+    "@/components/ui/toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -282,14 +282,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_9[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _card__rspack_import_10 = __webpack_require__("./card");
+    var _card__rspack_import_10 = __webpack_require__("@/components/ui/card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_10)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_card__rspack_import_10[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_11 = __webpack_require__("./checkbox");
+    var _checkbox__rspack_import_11 = __webpack_require__("@/components/ui/checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_11)if ([
         "TreeView",
@@ -317,7 +317,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_14[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_15 = __webpack_require__("./context-menu");
+    var _context_menu__rspack_import_15 = __webpack_require__("@/components/ui/context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_15)if ([
         "TreeView",
@@ -345,14 +345,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_18[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_19 = __webpack_require__("./dialog");
+    var _dialog__rspack_import_19 = __webpack_require__("@/components/ui/dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_19)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dialog__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_20 = __webpack_require__("./dropdown-menu");
+    var _dropdown_menu__rspack_import_20 = __webpack_require__("@/components/ui/dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_20)if ([
         "TreeView",
@@ -380,7 +380,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_file_upload__rspack_import_23[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hover_card__rspack_import_24 = __webpack_require__("./hover-card");
+    var _hover_card__rspack_import_24 = __webpack_require__("@/components/ui/hover-card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _hover_card__rspack_import_24)if ([
         "TreeView",
@@ -569,7 +569,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_50[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_51 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_51 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_51)if ([
         "TreeView",

package/dist/styles.css

@@ -667,9 +667,6 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
-  .bottom-5 {
-    bottom: calc(var(--spacing) * 5);
-  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -988,18 +985,6 @@
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
-  .size-20 {
-    width: calc(var(--spacing) * 20);
-    height: calc(var(--spacing) * 20);
-  }
-  .size-24 {
-    width: calc(var(--spacing) * 24);
-    height: calc(var(--spacing) * 24);
-  }
-  .size-\[360px\] {
-    width: 360px;
-    height: 360px;
-  }
   .size-\[var\(--cell-size\)\] {
     width: var(--cell-size);
     height: var(--cell-size);
@@ -1140,12 +1125,12 @@
   .h-\[600px\] {
     height: 600px;
   }
-  .h-\[700px\] {
-    height: 700px;
-  }
   .h-\[calc\(100vh-10rem\)\] {
     height: calc(100vh - 10rem);
   }
+  .h-\[clamp\(320px\,40vh\,720px\)\] {
+    height: clamp(320px, 40vh, 720px);
+  }
   .h-\[var\(--cell-size\)\] {
     height: var(--cell-size);
   }
@@ -1383,9 +1368,6 @@
   .w-\[100px\] {
     width: 100px;
   }
-  .w-\[107px\] {
-    width: 107px;
-  }
   .w-\[110px\] {
     width: 110px;
   }
@@ -1455,9 +1437,6 @@
   .w-\[600px\] {
     width: 600px;
   }
-  .w-\[680px\] {
-    width: 680px;
-  }
   .w-\[700px\] {
     width: 700px;
   }
@@ -1545,9 +1524,6 @@
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
-  .max-w-\[calc\(100\%-32px\)\] {
-    max-width: calc(100% - 32px);
-  }
   .max-w-\[calc\(100vw-1rem\)\] {
     max-width: calc(100vw - 1rem);
   }
@@ -2149,10 +2125,6 @@
     border-style: var(--tw-border-style);
     border-width: 1.5px;
   }
-  .border-\[1\.6px\] {
-    border-style: var(--tw-border-style);
-    border-width: 1.6px;
-  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -2249,15 +2221,12 @@
       border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
     }
   }
-  .border-destructive\/50 {
-    border-color: var(--destructive);
+  .border-error\/50 {
+    border-color: var(--error);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+      border-color: color-mix(in oklab, var(--error) 50%, transparent);
     }
   }
-  .border-foreground-accent-muted {
-    border-color: var(--foreground-accent-muted);
-  }
   .border-foreground-inverse\/20 {
     border-color: var(--foreground-inverse);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2285,6 +2254,12 @@
   .border-hover {
     border-color: var(--color-hover);
   }
+  .border-info\/30 {
+    border-color: var(--info);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--info) 30%, transparent);
+    }
+  }
   .border-input {
     border-color: var(--input);
   }
@@ -2345,12 +2320,15 @@
   .border-ring {
     border-color: var(--ring);
   }
+  .border-success\/50 {
+    border-color: var(--success);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--success) 50%, transparent);
+    }
+  }
   .border-surface-hover {
     border-color: var(--surface-hover);
   }
-  .border-surface-overlay {
-    border-color: var(--surface-overlay);
-  }
   .border-transparent {
     border-color: transparent;
   }
@@ -2360,6 +2338,12 @@
       border-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
     }
   }
+  .border-warning\/50 {
+    border-color: var(--warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--warning) 50%, transparent);
+    }
+  }
   .border-white\/10 {
     border-color: color-mix(in srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2657,15 +2641,18 @@
   .bg-error-background {
     background-color: var(--error-background);
   }
+  .bg-error-background\/25 {
+    background-color: var(--error-background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--error-background) 25%, transparent);
+    }
+  }
   .bg-foreground {
     background-color: var(--foreground);
   }
   .bg-foreground-accent {
     background-color: var(--foreground-accent);
   }
-  .bg-foreground-inverse {
-    background-color: var(--foreground-inverse);
-  }
   .bg-foreground-inverse\/10 {
     background-color: var(--foreground-inverse);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2825,6 +2812,12 @@
   .bg-info-background {
     background-color: var(--info-background);
   }
+  .bg-info-background\/10 {
+    background-color: var(--info-background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--info-background) 10%, transparent);
+    }
+  }
   .bg-muted {
     background-color: var(--muted);
   }
@@ -3143,6 +3136,12 @@
   .bg-success-background {
     background-color: var(--success-background);
   }
+  .bg-success-background\/25 {
+    background-color: var(--success-background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--success-background) 25%, transparent);
+    }
+  }
   .bg-success\/10 {
     background-color: var(--success);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3281,6 +3280,12 @@
   .bg-warning-background {
     background-color: var(--warning-background);
   }
+  .bg-warning-background\/25 {
+    background-color: var(--warning-background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--warning-background) 25%, transparent);
+    }
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -3781,9 +3786,6 @@
   .text-\[13px\] {
     font-size: 13px;
   }
-  .text-\[14px\] {
-    font-size: 14px;
-  }
   .text-\[15px\] {
     font-size: 15px;
   }
@@ -4209,10 +4211,6 @@
     --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0,0,0,0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[0px_4px_4px_0px_rgba\(0\,0\,0\,0\.05\)\] {
-    --tw-shadow: 0px 4px 4px 0px var(--tw-shadow-color, rgba(0,0,0,0.05));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-\[0px_4px_16px_0px_rgba\(0\,0\,0\,0\.25\)\] {
     --tw-shadow: 0px 4px 16px 0px var(--tw-shadow-color, rgba(0,0,0,0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4417,35 +4415,6 @@
       }
     }
   }
-  .group-hover\:scale-\[1\.25\] {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        scale: 1.25;
-      }
-    }
-  }
-  .group-hover\:border-2 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        border-style: var(--tw-border-style);
-        border-width: 2px;
-      }
-    }
-  }
-  .group-hover\:border-border-hover {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        border-color: var(--border-hover);
-      }
-    }
-  }
-  .group-hover\:border-foreground-accent-muted {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        border-color: var(--foreground-accent-muted);
-      }
-    }
-  }
   .group-hover\:border-muted-foreground {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -4842,13 +4811,6 @@
       }
     }
   }
-  .hover\:border-transparent {
-    &:hover {
-      @media (hover: hover) {
-        border-color: transparent;
-      }
-    }
-  }
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
@@ -5260,14 +5222,6 @@
       }
     }
   }
-  .hover\:shadow-none {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: 0 0 #0000;
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
   .focus\:z-10 {
     &:focus {
       z-index: 10;
@@ -6187,11 +6141,6 @@
       text-align: right;
     }
   }
-  .dark\:border-destructive {
-    &:is(.dark:not(.react-flow), .dark-hc, .future-dark, .dark:not(.react-flow) *, .dark-hc *, .future-dark *) {
-      border-color: var(--destructive);
-    }
-  }
   .dark\:bg-green-900\/10 {
     &:is(.dark:not(.react-flow), .dark-hc, .future-dark, .dark:not(.react-flow) *, .dark-hc *, .future-dark *) {
       background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 10%, transparent);
@@ -6645,10 +6594,15 @@
       width: calc(var(--spacing) * 5);
     }
   }
-  .\[\&_p\]\:leading-relaxed {
+  .\[\&_p\]\:leading-4 {
     & p {
-      --tw-leading: var(--leading-relaxed);
-      line-height: var(--leading-relaxed);
+      --tw-leading: calc(var(--spacing) * 4);
+      line-height: calc(var(--spacing) * 4);
+    }
+  }
+  .\[\&_p\+p\]\:mt-1 {
+    & p+p {
+      margin-top: calc(var(--spacing) * 1);
     }
   }
   .\[\&_svg\]\:pointer-events-none {
@@ -6674,12 +6628,6 @@
       height: calc(var(--spacing) * 4);
     }
   }
-  .\[\&_svg\]\:size-5 {
-    & svg {
-      width: calc(var(--spacing) * 5);
-      height: calc(var(--spacing) * 5);
-    }
-  }
   .\[\&_svg\]\:shrink-0 {
     & svg {
       flex-shrink: 0;
@@ -6891,14 +6839,14 @@
       position: absolute;
     }
   }
-  .\[\&\>svg\]\:top-4 {
+  .\[\&\>svg\]\:top-3\.5 {
     &>svg {
-      top: calc(var(--spacing) * 4);
+      top: calc(var(--spacing) * 3.5);
     }
   }
-  .\[\&\>svg\]\:left-4 {
+  .\[\&\>svg\]\:left-3 {
     &>svg {
-      left: calc(var(--spacing) * 4);
+      left: calc(var(--spacing) * 3);
     }
   }
   .\[\&\>svg\]\:hidden {
@@ -6942,19 +6890,19 @@
       width: calc(var(--spacing) * 3.5);
     }
   }
-  .\[\&\>svg\]\:text-destructive {
+  .\[\&\>svg\]\:text-error {
     &>svg {
-      color: var(--destructive);
+      color: var(--error);
     }
   }
-  .\[\&\>svg\]\:text-foreground {
+  .\[\&\>svg\]\:text-foreground-muted {
     &>svg {
-      color: var(--foreground);
+      color: var(--foreground-muted);
     }
   }
-  .\[\&\>svg\]\:text-foreground-muted {
+  .\[\&\>svg\]\:text-info {
     &>svg {
-      color: var(--foreground-muted);
+      color: var(--info);
     }
   }
   .\[\&\>svg\]\:text-muted-foreground {
@@ -6962,10 +6910,14 @@
       color: var(--muted-foreground);
     }
   }
-  .\[\&\>svg\+div\]\:translate-y-\[-3px\] {
-    &>svg+div {
-      --tw-translate-y: -3px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+  .\[\&\>svg\]\:text-success {
+    &>svg {
+      color: var(--success);
+    }
+  }
+  .\[\&\>svg\]\:text-warning {
+    &>svg {
+      color: var(--warning);
     }
   }
   .\[\&\>svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-4 {
@@ -6974,9 +6926,9 @@
       height: calc(var(--spacing) * 4);
     }
   }
-  .\[\&\>svg\~\*\]\:pl-7 {
+  .\[\&\>svg\~\*\]\:pl-6 {
     &>svg~* {
-      padding-left: calc(var(--spacing) * 7);
+      padding-left: calc(var(--spacing) * 6);
     }
   }
   .\[\&\>tr\]\:table {

package/dist/templates/Delegate/template-delegate.d.ts

@@ -14,13 +14,10 @@ export interface DelegateTemplateProps {
     selectedChildId?: string;
     /** Callback when a nav child is selected */
     onChildSelect?: (childId: string) => void;
-    /** Main content to render in the Canvas */
+    /** Main content */
     children?: React.ReactNode;
 }
 /**
- * Full-page Delegate template composed of a DelegatePanel and Canvas.
- *
- * This is a convenience wrapper — for more control you can use
- * `DelegatePanel` and `Canvas` directly.
+ * Full-page Delegate template composed of a DelegatePanel and main content area.
  */
 export declare function DelegateTemplate({ className, theme, defaultPanelOpen, navItems, selectedChildId, onChildSelect, children, }: DelegateTemplateProps): import("react/jsx-runtime").JSX.Element;

package/dist/templates/Flow/template-flow.d.ts

@@ -15,16 +15,6 @@ export interface FlowTemplateProps {
     chatMessages?: FlowPanelChatMessage[];
     /** Custom content for the expanded panel (overrides default chat) */
     expandedContent?: React.ReactNode;
-    /** Flow name displayed in the properties bar */
-    flowName?: string;
-    /** Flow type label (e.g. "Workflow") */
-    flowType?: string;
-    /** Whether the properties panel starts expanded */
-    defaultPropertiesExpanded?: boolean;
-    /** Node name for the expanded properties panel */
-    propertiesNodeName?: string;
-    /** Node type for the expanded properties panel */
-    propertiesNodeType?: string;
     /** Whether to show the simple properties panel (right side) */
     defaultPropertiesSimple?: boolean;
     /** Title for the simple properties panel header */
@@ -37,6 +27,18 @@ export interface FlowTemplateProps {
     propertiesSimpleSections?: PropertiesSimpleSection[];
     /** Canvas content */
     children?: React.ReactNode;
+    /** Hide the left navigation rail and expanded assistant panel. */
+    hideLeftPanel?: boolean;
+    /** Control rendered at the top right of the canvas. */
+    topRightControl?: React.ReactNode;
+    /** Control rendered at the bottom center of the canvas. */
+    bottomCenterControl?: React.ReactNode;
+    /** Control rendered at the bottom right of the canvas. */
+    bottomRightControl?: React.ReactNode;
+    /** Custom docked panel rendered to the right of the canvas. */
+    rightPanel?: React.ReactNode;
+    /** Custom docked panel rendered across the bottom of the workspace. */
+    bottomPanel?: React.ReactNode;
     /**
      * When true, renders only the left sidebar (icon rail) and the canvas —
      * no properties bar, no toolbars, no right-side panels.
@@ -48,10 +50,8 @@ export interface FlowTemplateProps {
  *
  * Composed of:
  * - **FlowPanel** — 60px icon rail + optional 420px expanded chat panel
- * - **Canvas** — main content area (reuses Delegate Canvas)
- * - **FlowProperties** (collapsed) — bar top-right of canvas (default)
- * - **FlowProperties** (expanded) — full properties panel on the right (when expanded)
- * - **FlowCanvasToolbar** — bottom-center of canvas
- * - **FlowViewToolbar** — bottom-right of canvas
+ * - Full-bleed canvas content area
+ * - Consumer-supplied controls at top-right, bottom-center, and bottom-right
+ * - Consumer-supplied docked panels at right or bottom
  */
-export declare function FlowTemplate({ className, theme, navItems, defaultPanelOpen, chatMessages, expandedContent, flowName, flowType, defaultPropertiesExpanded, propertiesNodeName, propertiesNodeType, defaultPropertiesSimple, propertiesSimpleTitle, propertiesSimpleIcon, propertiesSimpleFields, propertiesSimpleSections, children, blank, }: FlowTemplateProps): import("react/jsx-runtime").JSX.Element;
+export declare function FlowTemplate({ className, theme, navItems, defaultPanelOpen, chatMessages, expandedContent, defaultPropertiesSimple, propertiesSimpleTitle, propertiesSimpleIcon, propertiesSimpleFields, propertiesSimpleSections, children, blank, hideLeftPanel, topRightControl, bottomCenterControl, bottomRightControl, rightPanel, bottomPanel, }: FlowTemplateProps): import("react/jsx-runtime").JSX.Element;