@uipath/apollo-wind 2.69.0 → 2.71.0

package/dist/styles.css

@@ -842,6 +842,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .-my-0\.5 {
+    margin-block: calc(var(--spacing) * -0.5);
+  }
   .my-0\.5 {
     margin-block: calc(var(--spacing) * 0.5);
   }
@@ -923,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);
   }
@@ -992,6 +992,18 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
   }
+  .line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .scrollbar-none {
     scrollbar-width: none;
     &::-webkit-scrollbar {
@@ -1097,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;
@@ -1269,6 +1285,9 @@
   .h-\[600px\] {
     height: 600px;
   }
+  .h-\[640px\] {
+    height: 640px;
+  }
   .h-\[calc\(100vh-10rem\)\] {
     height: calc(100vh - 10rem);
   }
@@ -1677,9 +1696,6 @@
   .w-\[760px\] {
     width: 760px;
   }
-  .w-\[900px\] {
-    width: 900px;
-  }
   .w-\[930px\] {
     width: 930px;
   }
@@ -1863,6 +1879,9 @@
   .flex-auto {
     flex: auto;
   }
+  .flex-none {
+    flex: none;
+  }
   .flex-shrink {
     flex-shrink: 1;
   }
@@ -2081,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);
   }
@@ -2123,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);
   }
@@ -2795,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);
   }
@@ -2864,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);
   }
@@ -3008,6 +3021,12 @@
       background-color: color-mix(in oklab, var(--background) 80%, transparent);
     }
   }
+  .bg-background\/85 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 85%, transparent);
+    }
+  }
   .bg-black {
     background-color: var(--color-black);
   }
@@ -3455,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);
   }
@@ -3839,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);
   }
@@ -4378,12 +4385,18 @@
   .text-right {
     text-align: right;
   }
+  .text-start {
+    text-align: start;
+  }
   .align-middle {
     vertical-align: middle;
   }
   .align-text-bottom {
     vertical-align: text-bottom;
   }
+  .align-text-top {
+    vertical-align: text-top;
+  }
   .align-top {
     vertical-align: top;
   }
@@ -4487,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;
@@ -4591,6 +4608,9 @@
   .break-all {
     word-break: break-all;
   }
+  .whitespace-normal {
+    white-space: normal;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -4759,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);
   }
@@ -4822,9 +4839,6 @@
   .text-transparent {
     color: transparent;
   }
-  .text-violet-400 {
-    color: var(--color-violet-400);
-  }
   .text-warning {
     color: var(--warning);
   }
@@ -5195,16 +5209,16 @@
       display: block;
     }
   }
-  .group-focus-within\/input\:bg-foreground-accent {
-    &:is(:where(.group\/input):focus-within *) {
-      background-color: var(--foreground-accent);
-    }
-  }
   .group-focus-within\/menu-item\:opacity-100 {
     &:is(:where(.group\/menu-item):focus-within *) {
       opacity: 100%;
     }
   }
+  .group-focus-within\/message\:opacity-100 {
+    &:is(:where(.group\/message):focus-within *) {
+      opacity: 100%;
+    }
+  }
   .group-hover\:block {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -5296,6 +5310,13 @@
       }
     }
   }
+  .group-hover\/message\:opacity-100 {
+    &:is(:where(.group\/message):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-hover\/section\:opacity-100 {
     &:is(:where(.group\/section):hover *) {
       @media (hover: hover) {
@@ -5318,12 +5339,26 @@
       opacity: 50%;
     }
   }
+  .group-has-\[\[data-slot\=message-actions\]\]\/message\:-translate-y-10 {
+    &:is(:where(.group\/message):has(*:is([data-slot=message-actions])) *) {
+      --tw-translate-y: calc(var(--spacing) * -10);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .group-has-\[\[data-slot\=message-footer\]\]\/message\:-translate-y-8 {
     &:is(:where(.group\/message):has(*:is([data-slot=message-footer])) *) {
       --tw-translate-y: calc(var(--spacing) * -8);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .group-has-\[\[data-slot\=message-footer\]\]\/message\:group-has-\[\[data-slot\=message-actions\]\]\/message\:-translate-y-16 {
+    &:is(:where(.group\/message):has(*:is([data-slot=message-footer])) *) {
+      &:is(:where(.group\/message):has(*:is([data-slot=message-actions])) *) {
+        --tw-translate-y: calc(var(--spacing) * -16);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .group-aria-invalid\/radio-group\:border-error {
     &:is(:where(.group\/radio-group)[aria-invalid="true"] *) {
       border-color: var(--error);
@@ -5611,6 +5646,11 @@
       rotate: 90deg;
     }
   }
+  .group-data-\[state\=open\]\/sources\:rotate-180 {
+    &:is(:where(.group\/sources)[data-state="open"] *) {
+      rotate: 180deg;
+    }
+  }
   .group-data-\[state\=open\]\/tool-call-section-toggle\:rotate-90 {
     &:is(:where(.group\/tool-call-section-toggle)[data-state="open"] *) {
       rotate: 90deg;
@@ -5846,15 +5886,6 @@
       color: var(--muted-foreground);
     }
   }
-  .group-hover\/input\:placeholder\:text-foreground-secondary {
-    &:is(:where(.group\/input):hover *) {
-      @media (hover: hover) {
-        &::placeholder {
-          color: var(--foreground-secondary);
-        }
-      }
-    }
-  }
   .before\:mr-1 {
     &::before {
       content: var(--tw-content);
@@ -6026,14 +6057,14 @@
       border-top-width: 0px;
     }
   }
-  .focus-within\:border-border-hover {
+  .focus-within\:border-ring {
     &:focus-within {
-      border-color: var(--border-hover);
+      border-color: var(--ring);
     }
   }
-  .focus-within\:border-ring {
+  .focus-within\:opacity-100 {
     &:focus-within {
-      border-color: var(--ring);
+      opacity: 100%;
     }
   }
   .focus-within\:ring-1 {
@@ -6120,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) {
@@ -6265,13 +6286,6 @@
       }
     }
   }
-  .hover\:bg-foreground-accent-muted {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--foreground-accent-muted);
-      }
-    }
-  }
   .hover\:bg-foreground\/15 {
     &:hover {
       @media (hover: hover) {
@@ -6669,6 +6683,11 @@
       background-color: var(--accent);
     }
   }
+  .focus\:bg-error-background {
+    &:focus {
+      background-color: var(--error-background);
+    }
+  }
   .focus\:bg-surface-hover {
     &:focus {
       background-color: var(--surface-hover);
@@ -6743,13 +6762,6 @@
       outline-style: none;
     }
   }
-  .focus\:placeholder\:text-foreground-secondary {
-    &:focus {
-      &::placeholder {
-        color: var(--foreground-secondary);
-      }
-    }
-  }
   .focus-visible\:z-10 {
     &:focus-visible {
       z-index: 10;
@@ -6988,6 +7000,12 @@
       background-color: var(--surface);
     }
   }
+  .has-\[\[data-slot\=input-group-control\]_\:focus-visible\]\:ring-0 {
+    &:has(*:is([data-slot=input-group-control] :focus-visible)) {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .has-\[\[data-slot\=input-group-control\]_\:focus-visible\]\:ring-2 {
     &:has(*:is([data-slot=input-group-control] :focus-visible)) {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -7019,6 +7037,12 @@
       opacity: 50%;
     }
   }
+  .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-0 {
+    &:has(*:is([data-slot=input-group-control]:focus-visible)) {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-2 {
     &:has(*:is([data-slot=input-group-control]:focus-visible)) {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -7067,6 +7091,21 @@
       }
     }
   }
+  .has-\[\[data-state\=delayed-open\]\]\:opacity-100 {
+    &:has(*:is([data-state=delayed-open])) {
+      opacity: 100%;
+    }
+  }
+  .has-\[\[data-state\=instant-open\]\]\:opacity-100 {
+    &:has(*:is([data-state=instant-open])) {
+      opacity: 100%;
+    }
+  }
+  .has-\[\[data-state\=open\]\]\:opacity-100 {
+    &:has(*:is([data-state=open])) {
+      opacity: 100%;
+    }
+  }
   .has-\[button\[data-slot\=input-group-control\]\:not\(\:disabled\)\:hover\]\:bg-accent {
     &:has(*:is(button[data-slot=input-group-control]:not(:disabled):hover)) {
       background-color: var(--accent);
@@ -7127,6 +7166,16 @@
       }
     }
   }
+  .aria-pressed\:bg-accent {
+    &[aria-pressed="true"] {
+      background-color: var(--accent);
+    }
+  }
+  .aria-pressed\:text-accent-foreground {
+    &[aria-pressed="true"] {
+      color: var(--accent-foreground);
+    }
+  }
   .aria-selected\:text-muted-foreground {
     &[aria-selected="true"] {
       color: var(--muted-foreground);
@@ -7392,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;
@@ -8034,6 +8126,11 @@
       max-height: calc(var(--spacing) * 10);
     }
   }
+  .future\:min-h-0 {
+    :is(.future-dark, .future-light) & {
+      min-height: calc(var(--spacing) * 0);
+    }
+  }
   .future\:min-h-6 {
     :is(.future-dark, .future-light) & {
       min-height: calc(var(--spacing) * 6);
@@ -8059,6 +8156,11 @@
       gap: calc(var(--spacing) * 4);
     }
   }
+  .future\:rounded-\[24px\] {
+    :is(.future-dark, .future-light) & {
+      border-radius: 24px;
+    }
+  }
   .future\:rounded-lg {
     :is(.future-dark, .future-light) & {
       border-radius: var(--radius-lg);
@@ -8123,6 +8225,11 @@
       border-color: transparent;
     }
   }
+  .future\:bg-surface {
+    :is(.future-dark, .future-light) & {
+      background-color: var(--surface);
+    }
+  }
   .future\:bg-surface-overlay {
     :is(.future-dark, .future-light) & {
       background-color: var(--surface-overlay);
@@ -8592,6 +8699,13 @@
       }
     }
   }
+  .future\:aria-pressed\:text-foreground {
+    :is(.future-dark, .future-light) & {
+      &[aria-pressed="true"] {
+        color: var(--foreground);
+      }
+    }
+  }
   .future\:data-\[state\=checked\]\:border-foreground-accent {
     :is(.future-dark, .future-light) & {
       &[data-state="checked"] {
@@ -8675,6 +8789,13 @@
       }
     }
   }
+  .future\:dark\:border-border {
+    :is(.future-dark, .future-light) & {
+      &:is(.dark:not(.react-flow), .dark-hc, .future-dark, .dark:not(.react-flow) *, .dark-hc *, .future-dark *) {
+        border-color: var(--ap-wind-border);
+      }
+    }
+  }
   .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground {
     & .recharts-cartesian-axis-tick text {
       fill: var(--muted-foreground);
@@ -8868,6 +8989,17 @@
       }
     }
   }
+  .\[\&_img\]\:size-4 {
+    & img {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  }
+  .\[\&_img\]\:rounded-sm {
+    & img {
+      border-radius: var(--radius-sm);
+    }
+  }
   .\[\&_math\]\:text-\[1\.15em\] {
     & math {
       font-size: 1.15em;
@@ -9422,6 +9554,17 @@
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:mt-px {
+    &>svg:not([class*='size-']) {
+      margin-top: 1px;
+    }
+  }
+  .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 {
+    &>svg:not([class*='size-']) {
+      width: calc(var(--spacing) * 3.5);
+      height: calc(var(--spacing) * 3.5);
+    }
+  }
   .\[\&\>svg\~\*\]\:pl-6 {
     &>svg~* {
       padding-left: calc(var(--spacing) * 6);
@@ -9520,6 +9663,11 @@
       color: var(--foreground-emp);
     }
   }
+  .\[\@media\(hover\:none\)\]\:opacity-100 {
+    @media (hover:none) {
+      opacity: 100%;
+    }
+  }
   .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
     [data-side=left][data-collapsible=offcanvas] & {
       right: calc(var(--spacing) * -2);
@@ -12360,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.69.0",
+  "version": "2.71.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",