@uipath/apollo-wind 2.36.1 → 2.36.2

package/dist/styles.css

@@ -946,6 +946,15 @@
   .table {
     display: table;
   }
+  .table-caption {
+    display: table-caption;
+  }
+  .table-cell {
+    display: table-cell;
+  }
+  .table-row {
+    display: table-row;
+  }
   .aspect-auto {
     aspect-ratio: auto;
   }
@@ -1218,6 +1227,9 @@
   .min-h-\[124px\] {
     min-height: 124px;
   }
+  .min-h-\[200px\] {
+    min-height: 200px;
+  }
   .min-h-\[400px\] {
     min-height: 400px;
   }
@@ -1739,6 +1751,12 @@
   .appearance-none {
     appearance: none;
   }
+  .auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+  .auto-rows-max {
+    grid-auto-rows: max-content;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -1760,6 +1778,9 @@
   .grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
+  .grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1968,6 +1989,13 @@
   .gap-x-10 {
     column-gap: calc(var(--spacing) * 10);
   }
+  .-space-x-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -2263,6 +2291,18 @@
       border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
     }
   }
+  .border-error\/20 {
+    border-color: var(--error);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--error) 20%, transparent);
+    }
+  }
+  .border-error\/30 {
+    border-color: var(--error);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--error) 30%, transparent);
+    }
+  }
   .border-error\/50 {
     border-color: var(--error);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2275,24 +2315,12 @@
       border-color: color-mix(in oklab, var(--foreground-inverse) 20%, transparent);
     }
   }
-  .border-gray-200 {
-    border-color: var(--color-gray-200);
-  }
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
-  .border-green-200 {
-    border-color: var(--color-green-200);
-  }
   .border-green-300 {
     border-color: var(--color-green-300);
   }
-  .border-green-500\/20 {
-    border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
-    }
-  }
   .border-hover {
     border-color: var(--color-hover);
   }
@@ -2314,9 +2342,6 @@
       border-color: color-mix(in oklab, var(--muted-foreground) 25%, transparent);
     }
   }
-  .border-orange-200 {
-    border-color: var(--color-orange-200);
-  }
   .border-orange-300 {
     border-color: var(--color-orange-300);
   }
@@ -2341,8 +2366,11 @@
       border-color: color-mix(in oklab, var(--primary) 30%, transparent);
     }
   }
-  .border-red-200 {
-    border-color: var(--color-red-200);
+  .border-primary\/50 {
+    border-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--primary) 50%, transparent);
+    }
   }
   .border-red-300 {
     border-color: var(--color-red-300);
@@ -2362,6 +2390,18 @@
   .border-ring {
     border-color: var(--ring);
   }
+  .border-success\/20 {
+    border-color: var(--success);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--success) 20%, transparent);
+    }
+  }
+  .border-success\/30 {
+    border-color: var(--success);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--success) 30%, transparent);
+    }
+  }
   .border-success\/50 {
     border-color: var(--success);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2380,6 +2420,12 @@
       border-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
     }
   }
+  .border-warning\/20 {
+    border-color: var(--warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--warning) 20%, transparent);
+    }
+  }
   .border-warning\/30 {
     border-color: var(--warning);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2401,12 +2447,6 @@
   .border-yellow-300 {
     border-color: var(--color-yellow-300);
   }
-  .border-yellow-500\/20 {
-    border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
-    }
-  }
   .border-zinc-200 {
     border-color: var(--color-zinc-200);
   }
@@ -2434,9 +2474,6 @@
   .bg-\(--color-bg\) {
     background-color: var(--color-bg);
   }
-  .bg-\[\#0092b8\] {
-    background-color: #0092b8;
-  }
   .bg-\[\#ff0000\] {
     background-color: #ff0000;
   }
@@ -2494,18 +2531,6 @@
   .bg-black {
     background-color: var(--color-black);
   }
-  .bg-black\/50 {
-    background-color: color-mix(in srgb, #000 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
-    }
-  }
-  .bg-black\/80 {
-    background-color: color-mix(in srgb, #000 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
-    }
-  }
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
@@ -2524,12 +2549,6 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
-  .bg-blue-500\/0 {
-    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 0%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-blue-500) 0%, transparent);
-    }
-  }
   .bg-blue-500\/10 {
     background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2605,6 +2624,9 @@
       background-color: color-mix(in oklab, var(--card) 50%, transparent);
     }
   }
+  .bg-curtain {
+    background-color: var(--color-curtain);
+  }
   .bg-cyan-50 {
     background-color: var(--color-cyan-50);
   }
@@ -2695,6 +2717,12 @@
       background-color: color-mix(in oklab, var(--error-background) 25%, transparent);
     }
   }
+  .bg-error\/5 {
+    background-color: var(--error);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--error) 5%, transparent);
+    }
+  }
   .bg-foreground {
     background-color: var(--foreground);
   }
@@ -2797,12 +2825,6 @@
   .bg-green-500 {
     background-color: var(--color-green-500);
   }
-  .bg-green-500\/5 {
-    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-green-500) 5%, transparent);
-    }
-  }
   .bg-green-500\/10 {
     background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3076,12 +3098,6 @@
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
-  .bg-red-500\/5 {
-    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-red-500) 5%, transparent);
-    }
-  }
   .bg-red-500\/10 {
     background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3214,6 +3230,12 @@
       background-color: color-mix(in oklab, var(--success-background) 25%, transparent);
     }
   }
+  .bg-success\/5 {
+    background-color: var(--success);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--success) 5%, transparent);
+    }
+  }
   .bg-success\/10 {
     background-color: var(--success);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3358,6 +3380,12 @@
       background-color: color-mix(in oklab, var(--warning-background) 25%, transparent);
     }
   }
+  .bg-warning\/5 {
+    background-color: var(--warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--warning) 5%, transparent);
+    }
+  }
   .bg-warning\/10 {
     background-color: var(--warning);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3385,12 +3413,6 @@
   .bg-yellow-500 {
     background-color: var(--color-yellow-500);
   }
-  .bg-yellow-500\/5 {
-    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-yellow-500) 5%, transparent);
-    }
-  }
   .bg-yellow-500\/10 {
     background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4105,9 +4127,6 @@
   .text-gray-500 {
     color: var(--color-gray-500);
   }
-  .text-gray-600 {
-    color: var(--color-gray-600);
-  }
   .text-green-400 {
     color: var(--color-green-400);
   }
@@ -4117,9 +4136,6 @@
   .text-green-600 {
     color: var(--color-green-600);
   }
-  .text-green-700 {
-    color: var(--color-green-700);
-  }
   .text-green-800 {
     color: var(--color-green-800);
   }
@@ -4352,6 +4368,9 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
   }
+  .ring-background {
+    --tw-ring-color: var(--background);
+  }
   .ring-brand {
     --tw-ring-color: var(--brand);
   }
@@ -4933,13 +4952,6 @@
       }
     }
   }
-  .hover\:bg-blue-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-100);
-      }
-    }
-  }
   .hover\:bg-blue-600 {
     &:hover {
       @media (hover: hover) {
@@ -5007,6 +5019,13 @@
       }
     }
   }
+  .hover\:bg-error-background {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--error-background);
+      }
+    }
+  }
   .hover\:bg-error-background\/80 {
     &:hover {
       @media (hover: hover) {
@@ -5031,10 +5050,10 @@
       }
     }
   }
-  .hover\:bg-green-50 {
+  .hover\:bg-info-background {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-green-50);
+        background-color: var(--info-background);
       }
     }
   }
@@ -5132,13 +5151,6 @@
       }
     }
   }
-  .hover\:bg-red-50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-red-50);
-      }
-    }
-  }
   .hover\:bg-red-500 {
     &:hover {
       @media (hover: hover) {
@@ -5156,6 +5168,13 @@
       }
     }
   }
+  .hover\:bg-success-background {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--success-background);
+      }
+    }
+  }
   .hover\:bg-success-background\/80 {
     &:hover {
       @media (hover: hover) {
@@ -5228,6 +5247,13 @@
       }
     }
   }
+  .hover\:text-error-text {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--error);
+      }
+    }
+  }
   .hover\:text-foreground {
     &:hover {
       @media (hover: hover) {
@@ -5249,13 +5275,6 @@
       }
     }
   }
-  .hover\:text-green-700 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-green-700);
-      }
-    }
-  }
   .hover\:text-muted-foreground {
     &:hover {
       @media (hover: hover) {
@@ -5280,10 +5299,10 @@
       }
     }
   }
-  .hover\:text-red-700 {
+  .hover\:text-success-text {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-red-700);
+        color: var(--success);
       }
     }
   }
@@ -6294,24 +6313,6 @@
       text-align: right;
     }
   }
-  .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);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-green-900) 10%, transparent);
-      }
-    }
-  }
-  .dark\:text-green-400 {
-    &:is(.dark:not(.react-flow), .dark-hc, .future-dark, .dark:not(.react-flow) *, .dark-hc *, .future-dark *) {
-      color: var(--color-green-400);
-    }
-  }
-  .dark\:text-red-400 {
-    &:is(.dark:not(.react-flow), .dark-hc, .future-dark, .dark:not(.react-flow) *, .dark-hc *, .future-dark *) {
-      color: var(--color-red-400);
-    }
-  }
   .future\:h-3\.5 {
     :is(.future-dark, .future-light) & {
       height: calc(var(--spacing) * 3.5);
@@ -7545,12 +7546,12 @@
   --color-hover-dark-hc: #273139;
   --color-hover-future-dark: #3f3f46;
   --color-hover-future-light: #d4d4d8;
-  --color-curtain-light: #000000;
-  --color-curtain-light-hc: #000000;
-  --color-curtain-dark: #000000;
-  --color-curtain-dark-hc: #000000;
-  --color-curtain-future-dark: #000000;
-  --color-curtain-future-light: #000000;
+  --color-curtain-light: rgba(0, 0, 0, 0.3);
+  --color-curtain-light-hc: rgba(0, 0, 0, 0.5);
+  --color-curtain-dark: rgba(0, 0, 0, 0.75);
+  --color-curtain-dark-hc: rgba(0, 0, 0, 0.75);
+  --color-curtain-future-dark: rgba(0, 0, 0, 0.75);
+  --color-curtain-future-light: rgba(0, 0, 0, 0.3);
   --color-border-light: #a4b1b8;
   --color-border-light-hc: #6b7882;
   --color-border-dark: #8a97a0;
@@ -8518,7 +8519,7 @@ body.light, .apollo-design.light, :where(.light:not(.react-flow)) {
   --color-notification-badge: #000000;
   --color-notification-indicator: #da3b11;
   --color-hover: #e9f1fa;
-  --color-curtain: #000000;
+  --color-curtain: rgba(0, 0, 0, 0.3);
   --color-border: #a4b1b8;
   --color-border-disabled: #cfd8dd;
   --color-border-grid: #f4f5f7;
@@ -8652,7 +8653,7 @@ body.light-hc, .apollo-design.light-hc, :where(.light-hc) {
   --color-notification-badge: #000000;
   --color-notification-indicator: #832107;
   --color-hover: #e9f1fa;
-  --color-curtain: #000000;
+  --color-curtain: rgba(0, 0, 0, 0.5);
   --color-border: #6b7882;
   --color-border-disabled: #cfd8dd;
   --color-border-grid: #f4f5f7;
@@ -8786,7 +8787,7 @@ body.dark, .apollo-design.dark, :where(.dark:not(.react-flow)) {
   --color-notification-badge: #ffffff;
   --color-notification-indicator: #ff8f70;
   --color-hover: #374652;
-  --color-curtain: #000000;
+  --color-curtain: rgba(0, 0, 0, 0.75);
   --color-border: #8a97a0;
   --color-border-disabled: #526069;
   --color-border-grid: #273139;
@@ -8920,7 +8921,7 @@ body.dark-hc, .apollo-design.dark-hc, :where(.dark-hc) {
   --color-notification-badge: #ffffff;
   --color-notification-indicator: #ff8f70;
   --color-hover: #273139;
-  --color-curtain: #000000;
+  --color-curtain: rgba(0, 0, 0, 0.75);
   --color-border: #bbc7cd;
   --color-border-disabled: #8a97a0;
   --color-border-grid: #273139;
@@ -9054,7 +9055,7 @@ body.future-dark, .future-dark {
   --color-notification-badge: #ffffff;
   --color-notification-indicator: #ff637e;
   --color-hover: #3f3f46;
-  --color-curtain: #000000;
+  --color-curtain: rgba(0, 0, 0, 0.75);
   --color-border: #3f3f46;
   --color-border-disabled: #27272a;
   --color-border-grid: #27272a;
@@ -9188,7 +9189,7 @@ body.future-light, .future-light {
   --color-notification-badge: #000000;
   --color-notification-indicator: #ec003f;
   --color-hover: #d4d4d8;
-  --color-curtain: #000000;
+  --color-curtain: rgba(0, 0, 0, 0.3);
   --color-border: #d4d4d8;
   --color-border-disabled: #e4e4e7;
   --color-border-grid: #e4e4e7;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.36.1",
+  "version": "2.36.2",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",
@@ -124,7 +124,7 @@
     "tailwindcss": "^4.1.17",
     "vaul": "^1.1.2",
     "zod": "^4.3.5",
-    "@uipath/apollo-core": "5.13.0"
+    "@uipath/apollo-core": "5.13.1"
   },
   "devDependencies": {
     "@codemirror/lang-javascript": "^6.2.5",
@@ -143,7 +143,6 @@
     "@storybook/addon-mcp": "^0.2.2",
     "@storybook/react-vite": "^10.4.1",
     "@tailwindcss/cli": "^4.1.17",
-    "@tailwindcss/postcss": "^4.1.17",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -155,7 +154,6 @@
     "@vitest/coverage-v8": "^4.1.5",
     "@vitest/ui": "^4.1.5",
     "ajv": "^8.18.0",
-    "autoprefixer": "^10.4.22",
     "globals": "^16.5.0",
     "jest-axe": "^10.0.0",
     "jsdom": "^27.2.0",
@@ -167,7 +165,6 @@
     "react-scan": "^0.5.3",
     "semantic-release": "^25.0.3",
     "storybook": "^10.4.1",
-    "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
     "vitest": "^4.1.5"
   },

package/dist/components/UiPath/index.cjs

@@ -1,5 +0,0 @@
-var __webpack_exports__ = {};
-for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/components/UiPath/index.d.ts

@@ -1 +0,0 @@
-export {};