@uipath/apollo-wind 2.32.0 → 2.32.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -531,12 +531,14 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
531
531
  }
532
532
  function FormField({ children, className = '' }) {
533
533
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
534
- className: (0, index_cjs_namespaceObject.cn)('space-y-2', className),
534
+ "data-slot": "form-field",
535
+ className: (0, index_cjs_namespaceObject.cn)('grid gap-1.5', className),
535
536
  children: children
536
537
  });
537
538
  }
538
539
  function FormLabel({ children, required, htmlFor, className = '' }) {
539
540
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(label_cjs_namespaceObject.Label, {
541
+ "data-slot": "form-label",
540
542
  htmlFor: htmlFor,
541
543
  className: className,
542
544
  children: [
@@ -551,6 +553,7 @@ function FormLabel({ children, required, htmlFor, className = '' }) {
551
553
  function FormDescription({ children }) {
552
554
  if (!children) return null;
553
555
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
556
+ "data-slot": "form-description",
554
557
  className: "text-sm text-muted-foreground",
555
558
  children: children
556
559
  });
@@ -503,12 +503,14 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
503
503
  }
504
504
  function FormField({ children, className = '' }) {
505
505
  return /*#__PURE__*/ jsx("div", {
506
- className: cn('space-y-2', className),
506
+ "data-slot": "form-field",
507
+ className: cn('grid gap-1.5', className),
507
508
  children: children
508
509
  });
509
510
  }
510
511
  function FormLabel({ children, required, htmlFor, className = '' }) {
511
512
  return /*#__PURE__*/ jsxs(Label, {
513
+ "data-slot": "form-label",
512
514
  htmlFor: htmlFor,
513
515
  className: className,
514
516
  children: [
@@ -523,6 +525,7 @@ function FormLabel({ children, required, htmlFor, className = '' }) {
523
525
  function FormDescription({ children }) {
524
526
  if (!children) return null;
525
527
  return /*#__PURE__*/ jsx("p", {
528
+ "data-slot": "form-description",
526
529
  className: "text-sm text-muted-foreground",
527
530
  children: children
528
531
  });
@@ -81,14 +81,14 @@ const dialog_DialogContent = /*#__PURE__*/ external_react_namespaceObject.forwar
81
81
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(dialog_DialogOverlay, {
82
82
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_dialog_namespaceObject.Content, {
83
83
  "data-slot": "dialog-content",
84
- className: (0, index_cjs_namespaceObject.cn)('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg', className),
84
+ className: (0, index_cjs_namespaceObject.cn)('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 relative z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg', className),
85
85
  ref: ref,
86
86
  ...props,
87
87
  children: [
88
88
  children,
89
89
  showCloseButton && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_dialog_namespaceObject.Close, {
90
90
  "data-slot": "dialog-close",
91
- className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
91
+ className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:cursor-default disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
92
92
  children: [
93
93
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.XIcon, {}),
94
94
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
@@ -44,14 +44,14 @@ const dialog_DialogContent = /*#__PURE__*/ forwardRef(function({ className, chil
44
44
  children: /*#__PURE__*/ jsx(dialog_DialogOverlay, {
45
45
  children: /*#__PURE__*/ jsxs(Content, {
46
46
  "data-slot": "dialog-content",
47
- className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg', className),
47
+ className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 relative z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg', className),
48
48
  ref: ref,
49
49
  ...props,
50
50
  children: [
51
51
  children,
52
52
  showCloseButton && /*#__PURE__*/ jsxs(Close, {
53
53
  "data-slot": "dialog-close",
54
- className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
54
+ className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:cursor-default disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
55
55
  children: [
56
56
  /*#__PURE__*/ jsx(XIcon, {}),
57
57
  /*#__PURE__*/ jsx("span", {
@@ -24,7 +24,7 @@ var __webpack_modules__ = {
24
24
  "./button-group" (module) {
25
25
  module.exports = require("./button-group.cjs");
26
26
  },
27
- "./button" (module) {
27
+ "@/components/ui/button" (module) {
28
28
  module.exports = require("./button.cjs");
29
29
  },
30
30
  "./calendar" (module) {
@@ -63,7 +63,7 @@ var __webpack_modules__ = {
63
63
  "./dropdown-menu" (module) {
64
64
  module.exports = require("./dropdown-menu.cjs");
65
65
  },
66
- "./editable-cell" (module) {
66
+ "@/components/ui/editable-cell" (module) {
67
67
  module.exports = require("./editable-cell.cjs");
68
68
  },
69
69
  "./empty-state" (module) {
@@ -93,7 +93,7 @@ var __webpack_modules__ = {
93
93
  "./pagination" (module) {
94
94
  module.exports = require("./pagination.cjs");
95
95
  },
96
- "./popover" (module) {
96
+ "@/components/ui/popover" (module) {
97
97
  module.exports = require("./popover.cjs");
98
98
  },
99
99
  "./progress" (module) {
@@ -261,7 +261,7 @@ var __webpack_exports__ = {};
261
261
  "default"
262
262
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_breadcrumb__rspack_import_6[__rspack_import_key];
263
263
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
264
- var _button__rspack_import_7 = __webpack_require__("./button");
264
+ var _button__rspack_import_7 = __webpack_require__("@/components/ui/button");
265
265
  var __rspack_reexport = {};
266
266
  for(const __rspack_import_key in _button__rspack_import_7)if ([
267
267
  "TreeView",
@@ -359,7 +359,7 @@ var __webpack_exports__ = {};
359
359
  "default"
360
360
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_20[__rspack_import_key];
361
361
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
362
- var _editable_cell__rspack_import_21 = __webpack_require__("./editable-cell");
362
+ var _editable_cell__rspack_import_21 = __webpack_require__("@/components/ui/editable-cell");
363
363
  var __rspack_reexport = {};
364
364
  for(const __rspack_import_key in _editable_cell__rspack_import_21)if ([
365
365
  "TreeView",
@@ -429,7 +429,7 @@ var __webpack_exports__ = {};
429
429
  "default"
430
430
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_pagination__rspack_import_30[__rspack_import_key];
431
431
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
432
- var _popover__rspack_import_31 = __webpack_require__("./popover");
432
+ var _popover__rspack_import_31 = __webpack_require__("@/components/ui/popover");
433
433
  var __rspack_reexport = {};
434
434
  for(const __rspack_import_key in _popover__rspack_import_31)if ([
435
435
  "TreeView",
package/dist/styles.css CHANGED
@@ -5409,6 +5409,11 @@
5409
5409
  pointer-events: none;
5410
5410
  }
5411
5411
  }
5412
+ .disabled\:cursor-default {
5413
+ &:disabled {
5414
+ cursor: default;
5415
+ }
5416
+ }
5412
5417
  .disabled\:cursor-not-allowed {
5413
5418
  &:disabled {
5414
5419
  cursor: not-allowed;
@@ -9105,6 +9110,610 @@ body.future-light, .future-light {
9105
9110
  --border: var(--border-future-light);
9106
9111
  color-scheme: light;
9107
9112
  }
9113
+ html[dir='ltr'], [data-sonner-toaster][dir='ltr'] {
9114
+ --toast-icon-margin-start: -3px;
9115
+ --toast-icon-margin-end: 4px;
9116
+ --toast-svg-margin-start: -1px;
9117
+ --toast-svg-margin-end: 0px;
9118
+ --toast-button-margin-start: auto;
9119
+ --toast-button-margin-end: 0;
9120
+ --toast-close-button-start: 0;
9121
+ --toast-close-button-end: unset;
9122
+ --toast-close-button-transform: translate(-35%, -35%);
9123
+ }
9124
+ html[dir='rtl'], [data-sonner-toaster][dir='rtl'] {
9125
+ --toast-icon-margin-start: 4px;
9126
+ --toast-icon-margin-end: -3px;
9127
+ --toast-svg-margin-start: 0px;
9128
+ --toast-svg-margin-end: -1px;
9129
+ --toast-button-margin-start: 0;
9130
+ --toast-button-margin-end: auto;
9131
+ --toast-close-button-start: unset;
9132
+ --toast-close-button-end: 0;
9133
+ --toast-close-button-transform: translate(35%, -35%);
9134
+ }
9135
+ [data-sonner-toaster] {
9136
+ position: fixed;
9137
+ width: var(--width);
9138
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
9139
+ --gray1: hsl(0, 0%, 99%);
9140
+ --gray2: hsl(0, 0%, 97.3%);
9141
+ --gray3: hsl(0, 0%, 95.1%);
9142
+ --gray4: hsl(0, 0%, 93%);
9143
+ --gray5: hsl(0, 0%, 90.9%);
9144
+ --gray6: hsl(0, 0%, 88.7%);
9145
+ --gray7: hsl(0, 0%, 85.8%);
9146
+ --gray8: hsl(0, 0%, 78%);
9147
+ --gray9: hsl(0, 0%, 56.1%);
9148
+ --gray10: hsl(0, 0%, 52.3%);
9149
+ --gray11: hsl(0, 0%, 43.5%);
9150
+ --gray12: hsl(0, 0%, 9%);
9151
+ --border-radius: 8px;
9152
+ box-sizing: border-box;
9153
+ padding: 0;
9154
+ margin: 0;
9155
+ list-style: none;
9156
+ outline: none;
9157
+ z-index: 999999999;
9158
+ transition: transform 400ms ease;
9159
+ }
9160
+ @media (hover: none) and (pointer: coarse) {
9161
+ [data-sonner-toaster][data-lifted='true'] {
9162
+ transform: none;
9163
+ }
9164
+ }
9165
+ [data-sonner-toaster][data-x-position='right'] {
9166
+ right: var(--offset-right);
9167
+ }
9168
+ [data-sonner-toaster][data-x-position='left'] {
9169
+ left: var(--offset-left);
9170
+ }
9171
+ [data-sonner-toaster][data-x-position='center'] {
9172
+ left: 50%;
9173
+ transform: translateX(-50%);
9174
+ }
9175
+ [data-sonner-toaster][data-y-position='top'] {
9176
+ top: var(--offset-top);
9177
+ }
9178
+ [data-sonner-toaster][data-y-position='bottom'] {
9179
+ bottom: var(--offset-bottom);
9180
+ }
9181
+ [data-sonner-toast] {
9182
+ --y: translateY(100%);
9183
+ --lift-amount: calc(var(--lift) * var(--gap));
9184
+ z-index: var(--z-index);
9185
+ position: absolute;
9186
+ opacity: 0;
9187
+ transform: var(--y);
9188
+ touch-action: none;
9189
+ transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
9190
+ box-sizing: border-box;
9191
+ outline: none;
9192
+ overflow-wrap: anywhere;
9193
+ }
9194
+ [data-sonner-toast][data-styled='true'] {
9195
+ padding: 16px;
9196
+ background: var(--normal-bg);
9197
+ border: 1px solid var(--normal-border);
9198
+ color: var(--normal-text);
9199
+ border-radius: var(--border-radius);
9200
+ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
9201
+ width: var(--width);
9202
+ font-size: 13px;
9203
+ display: flex;
9204
+ align-items: center;
9205
+ gap: 6px;
9206
+ }
9207
+ [data-sonner-toast]:focus-visible {
9208
+ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
9209
+ }
9210
+ [data-sonner-toast][data-y-position='top'] {
9211
+ top: 0;
9212
+ --y: translateY(-100%);
9213
+ --lift: 1;
9214
+ --lift-amount: calc(1 * var(--gap));
9215
+ }
9216
+ [data-sonner-toast][data-y-position='bottom'] {
9217
+ bottom: 0;
9218
+ --y: translateY(100%);
9219
+ --lift: -1;
9220
+ --lift-amount: calc(var(--lift) * var(--gap));
9221
+ }
9222
+ [data-sonner-toast][data-styled='true'] [data-description] {
9223
+ font-weight: 400;
9224
+ line-height: 1.4;
9225
+ color: #3f3f3f;
9226
+ }
9227
+ [data-rich-colors='true'][data-sonner-toast][data-styled='true'] [data-description] {
9228
+ color: inherit;
9229
+ }
9230
+ [data-sonner-toaster][data-sonner-theme='dark'] [data-description] {
9231
+ color: hsl(0, 0%, 91%);
9232
+ }
9233
+ [data-sonner-toast][data-styled='true'] [data-title] {
9234
+ font-weight: 500;
9235
+ line-height: 1.5;
9236
+ color: inherit;
9237
+ }
9238
+ [data-sonner-toast][data-styled='true'] [data-icon] {
9239
+ display: flex;
9240
+ height: 16px;
9241
+ width: 16px;
9242
+ position: relative;
9243
+ justify-content: flex-start;
9244
+ align-items: center;
9245
+ flex-shrink: 0;
9246
+ margin-left: var(--toast-icon-margin-start);
9247
+ margin-right: var(--toast-icon-margin-end);
9248
+ }
9249
+ [data-sonner-toast][data-promise='true'] [data-icon] > svg {
9250
+ opacity: 0;
9251
+ transform: scale(0.8);
9252
+ transform-origin: center;
9253
+ animation: sonner-fade-in 300ms ease forwards;
9254
+ }
9255
+ [data-sonner-toast][data-styled='true'] [data-icon] > * {
9256
+ flex-shrink: 0;
9257
+ }
9258
+ [data-sonner-toast][data-styled='true'] [data-icon] svg {
9259
+ margin-left: var(--toast-svg-margin-start);
9260
+ margin-right: var(--toast-svg-margin-end);
9261
+ }
9262
+ [data-sonner-toast][data-styled='true'] [data-content] {
9263
+ display: flex;
9264
+ flex-direction: column;
9265
+ gap: 2px;
9266
+ }
9267
+ [data-sonner-toast][data-styled='true'] [data-button] {
9268
+ border-radius: 4px;
9269
+ padding-left: 8px;
9270
+ padding-right: 8px;
9271
+ height: 24px;
9272
+ font-size: 12px;
9273
+ color: var(--normal-bg);
9274
+ background: var(--normal-text);
9275
+ margin-left: var(--toast-button-margin-start);
9276
+ margin-right: var(--toast-button-margin-end);
9277
+ border: none;
9278
+ font-weight: 500;
9279
+ cursor: pointer;
9280
+ outline: none;
9281
+ display: flex;
9282
+ align-items: center;
9283
+ flex-shrink: 0;
9284
+ transition: opacity 400ms, box-shadow 200ms;
9285
+ }
9286
+ [data-sonner-toast][data-styled='true'] [data-button]:focus-visible {
9287
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
9288
+ }
9289
+ [data-sonner-toast][data-styled='true'] [data-button]:first-of-type {
9290
+ margin-left: var(--toast-button-margin-start);
9291
+ margin-right: var(--toast-button-margin-end);
9292
+ }
9293
+ [data-sonner-toast][data-styled='true'] [data-cancel] {
9294
+ color: var(--normal-text);
9295
+ background: rgba(0, 0, 0, 0.08);
9296
+ }
9297
+ [data-sonner-toaster][data-sonner-theme='dark'] [data-sonner-toast][data-styled='true'] [data-cancel] {
9298
+ background: rgba(255, 255, 255, 0.3);
9299
+ }
9300
+ [data-sonner-toast][data-styled='true'] [data-close-button] {
9301
+ position: absolute;
9302
+ left: var(--toast-close-button-start);
9303
+ right: var(--toast-close-button-end);
9304
+ top: 0;
9305
+ height: 20px;
9306
+ width: 20px;
9307
+ display: flex;
9308
+ justify-content: center;
9309
+ align-items: center;
9310
+ padding: 0;
9311
+ color: var(--gray12);
9312
+ background: var(--normal-bg);
9313
+ border: 1px solid var(--gray4);
9314
+ transform: var(--toast-close-button-transform);
9315
+ border-radius: 50%;
9316
+ cursor: pointer;
9317
+ z-index: 1;
9318
+ transition: opacity 100ms, background 200ms, border-color 200ms;
9319
+ }
9320
+ [data-sonner-toast][data-styled='true'] [data-close-button]:focus-visible {
9321
+ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
9322
+ }
9323
+ [data-sonner-toast][data-styled='true'] [data-disabled='true'] {
9324
+ cursor: not-allowed;
9325
+ }
9326
+ [data-sonner-toast][data-styled='true']:hover [data-close-button]:hover {
9327
+ background: var(--gray2);
9328
+ border-color: var(--gray5);
9329
+ }
9330
+ [data-sonner-toast][data-swiping='true']::before {
9331
+ content: '';
9332
+ position: absolute;
9333
+ left: -100%;
9334
+ right: -100%;
9335
+ height: 100%;
9336
+ z-index: -1;
9337
+ }
9338
+ [data-sonner-toast][data-y-position='top'][data-swiping='true']::before {
9339
+ bottom: 50%;
9340
+ transform: scaleY(3) translateY(50%);
9341
+ }
9342
+ [data-sonner-toast][data-y-position='bottom'][data-swiping='true']::before {
9343
+ top: 50%;
9344
+ transform: scaleY(3) translateY(-50%);
9345
+ }
9346
+ [data-sonner-toast][data-swiping='false'][data-removed='true']::before {
9347
+ content: '';
9348
+ position: absolute;
9349
+ inset: 0;
9350
+ transform: scaleY(2);
9351
+ }
9352
+ [data-sonner-toast][data-expanded='true']::after {
9353
+ content: '';
9354
+ position: absolute;
9355
+ left: 0;
9356
+ height: calc(var(--gap) + 1px);
9357
+ bottom: 100%;
9358
+ width: 100%;
9359
+ }
9360
+ [data-sonner-toast][data-mounted='true'] {
9361
+ --y: translateY(0);
9362
+ opacity: 1;
9363
+ }
9364
+ [data-sonner-toast][data-expanded='false'][data-front='false'] {
9365
+ --scale: var(--toasts-before) * 0.05 + 1;
9366
+ --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
9367
+ height: var(--front-toast-height);
9368
+ }
9369
+ [data-sonner-toast] > * {
9370
+ transition: opacity 400ms;
9371
+ }
9372
+ [data-sonner-toast][data-x-position='right'] {
9373
+ right: 0;
9374
+ }
9375
+ [data-sonner-toast][data-x-position='left'] {
9376
+ left: 0;
9377
+ }
9378
+ [data-sonner-toast][data-expanded='false'][data-front='false'][data-styled='true'] > * {
9379
+ opacity: 0;
9380
+ }
9381
+ [data-sonner-toast][data-visible='false'] {
9382
+ opacity: 0;
9383
+ pointer-events: none;
9384
+ }
9385
+ [data-sonner-toast][data-mounted='true'][data-expanded='true'] {
9386
+ --y: translateY(calc(var(--lift) * var(--offset)));
9387
+ height: var(--initial-height);
9388
+ }
9389
+ [data-sonner-toast][data-removed='true'][data-front='true'][data-swipe-out='false'] {
9390
+ --y: translateY(calc(var(--lift) * -100%));
9391
+ opacity: 0;
9392
+ }
9393
+ [data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='true'] {
9394
+ --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
9395
+ opacity: 0;
9396
+ }
9397
+ [data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false'] {
9398
+ --y: translateY(40%);
9399
+ opacity: 0;
9400
+ transition: transform 500ms, opacity 200ms;
9401
+ }
9402
+ [data-sonner-toast][data-removed='true'][data-front='false']::before {
9403
+ height: calc(var(--initial-height) + 20%);
9404
+ }
9405
+ [data-sonner-toast][data-swiping='true'] {
9406
+ transform: var(--y) translateY(var(--swipe-amount-y, 0px)) translateX(var(--swipe-amount-x, 0px));
9407
+ transition: none;
9408
+ }
9409
+ [data-sonner-toast][data-swiped='true'] {
9410
+ user-select: none;
9411
+ }
9412
+ [data-sonner-toast][data-swipe-out='true'][data-y-position='bottom'], [data-sonner-toast][data-swipe-out='true'][data-y-position='top'] {
9413
+ animation-duration: 200ms;
9414
+ animation-timing-function: ease-out;
9415
+ animation-fill-mode: forwards;
9416
+ }
9417
+ [data-sonner-toast][data-swipe-out='true'][data-swipe-direction='left'] {
9418
+ animation-name: swipe-out-left;
9419
+ }
9420
+ [data-sonner-toast][data-swipe-out='true'][data-swipe-direction='right'] {
9421
+ animation-name: swipe-out-right;
9422
+ }
9423
+ [data-sonner-toast][data-swipe-out='true'][data-swipe-direction='up'] {
9424
+ animation-name: swipe-out-up;
9425
+ }
9426
+ [data-sonner-toast][data-swipe-out='true'][data-swipe-direction='down'] {
9427
+ animation-name: swipe-out-down;
9428
+ }
9429
+ @keyframes swipe-out-left {
9430
+ from {
9431
+ transform: var(--y) translateX(var(--swipe-amount-x));
9432
+ opacity: 1;
9433
+ }
9434
+ to {
9435
+ transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
9436
+ opacity: 0;
9437
+ }
9438
+ }
9439
+ @keyframes swipe-out-right {
9440
+ from {
9441
+ transform: var(--y) translateX(var(--swipe-amount-x));
9442
+ opacity: 1;
9443
+ }
9444
+ to {
9445
+ transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
9446
+ opacity: 0;
9447
+ }
9448
+ }
9449
+ @keyframes swipe-out-up {
9450
+ from {
9451
+ transform: var(--y) translateY(var(--swipe-amount-y));
9452
+ opacity: 1;
9453
+ }
9454
+ to {
9455
+ transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
9456
+ opacity: 0;
9457
+ }
9458
+ }
9459
+ @keyframes swipe-out-down {
9460
+ from {
9461
+ transform: var(--y) translateY(var(--swipe-amount-y));
9462
+ opacity: 1;
9463
+ }
9464
+ to {
9465
+ transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
9466
+ opacity: 0;
9467
+ }
9468
+ }
9469
+ @media (max-width: 600px) {
9470
+ [data-sonner-toaster] {
9471
+ position: fixed;
9472
+ right: var(--mobile-offset-right);
9473
+ left: var(--mobile-offset-left);
9474
+ width: 100%;
9475
+ }
9476
+ [data-sonner-toaster][dir='rtl'] {
9477
+ left: calc(var(--mobile-offset-left) * -1);
9478
+ }
9479
+ [data-sonner-toaster] [data-sonner-toast] {
9480
+ left: 0;
9481
+ right: 0;
9482
+ width: calc(100% - var(--mobile-offset-left) * 2);
9483
+ }
9484
+ [data-sonner-toaster][data-x-position='left'] {
9485
+ left: var(--mobile-offset-left);
9486
+ }
9487
+ [data-sonner-toaster][data-y-position='bottom'] {
9488
+ bottom: var(--mobile-offset-bottom);
9489
+ }
9490
+ [data-sonner-toaster][data-y-position='top'] {
9491
+ top: var(--mobile-offset-top);
9492
+ }
9493
+ [data-sonner-toaster][data-x-position='center'] {
9494
+ left: var(--mobile-offset-left);
9495
+ right: var(--mobile-offset-right);
9496
+ transform: none;
9497
+ }
9498
+ }
9499
+ [data-sonner-toaster][data-sonner-theme='light'] {
9500
+ --normal-bg: #fff;
9501
+ --normal-border: var(--gray4);
9502
+ --normal-text: var(--gray12);
9503
+ --success-bg: hsl(143, 85%, 96%);
9504
+ --success-border: hsl(145, 92%, 87%);
9505
+ --success-text: hsl(140, 100%, 27%);
9506
+ --info-bg: hsl(208, 100%, 97%);
9507
+ --info-border: hsl(221, 91%, 93%);
9508
+ --info-text: hsl(210, 92%, 45%);
9509
+ --warning-bg: hsl(49, 100%, 97%);
9510
+ --warning-border: hsl(49, 91%, 84%);
9511
+ --warning-text: hsl(31, 92%, 45%);
9512
+ --error-bg: hsl(359, 100%, 97%);
9513
+ --error-border: hsl(359, 100%, 94%);
9514
+ --error-text: hsl(360, 100%, 45%);
9515
+ }
9516
+ [data-sonner-toaster][data-sonner-theme='light'] [data-sonner-toast][data-invert='true'] {
9517
+ --normal-bg: #000;
9518
+ --normal-border: hsl(0, 0%, 20%);
9519
+ --normal-text: var(--gray1);
9520
+ }
9521
+ [data-sonner-toaster][data-sonner-theme='dark'] [data-sonner-toast][data-invert='true'] {
9522
+ --normal-bg: #fff;
9523
+ --normal-border: var(--gray3);
9524
+ --normal-text: var(--gray12);
9525
+ }
9526
+ [data-sonner-toaster][data-sonner-theme='dark'] {
9527
+ --normal-bg: #000;
9528
+ --normal-bg-hover: hsl(0, 0%, 12%);
9529
+ --normal-border: hsl(0, 0%, 20%);
9530
+ --normal-border-hover: hsl(0, 0%, 25%);
9531
+ --normal-text: var(--gray1);
9532
+ --success-bg: hsl(150, 100%, 6%);
9533
+ --success-border: hsl(147, 100%, 12%);
9534
+ --success-text: hsl(150, 86%, 65%);
9535
+ --info-bg: hsl(215, 100%, 6%);
9536
+ --info-border: hsl(223, 43%, 17%);
9537
+ --info-text: hsl(216, 87%, 65%);
9538
+ --warning-bg: hsl(64, 100%, 6%);
9539
+ --warning-border: hsl(60, 100%, 9%);
9540
+ --warning-text: hsl(46, 87%, 65%);
9541
+ --error-bg: hsl(358, 76%, 10%);
9542
+ --error-border: hsl(357, 89%, 16%);
9543
+ --error-text: hsl(358, 100%, 81%);
9544
+ }
9545
+ [data-sonner-toaster][data-sonner-theme='dark'] [data-sonner-toast] [data-close-button] {
9546
+ background: var(--normal-bg);
9547
+ border-color: var(--normal-border);
9548
+ color: var(--normal-text);
9549
+ }
9550
+ [data-sonner-toaster][data-sonner-theme='dark'] [data-sonner-toast] [data-close-button]:hover {
9551
+ background: var(--normal-bg-hover);
9552
+ border-color: var(--normal-border-hover);
9553
+ }
9554
+ [data-rich-colors='true'][data-sonner-toast][data-type='success'] {
9555
+ background: var(--success-bg);
9556
+ border-color: var(--success-border);
9557
+ color: var(--success-text);
9558
+ }
9559
+ [data-rich-colors='true'][data-sonner-toast][data-type='success'] [data-close-button] {
9560
+ background: var(--success-bg);
9561
+ border-color: var(--success-border);
9562
+ color: var(--success-text);
9563
+ }
9564
+ [data-rich-colors='true'][data-sonner-toast][data-type='info'] {
9565
+ background: var(--info-bg);
9566
+ border-color: var(--info-border);
9567
+ color: var(--info-text);
9568
+ }
9569
+ [data-rich-colors='true'][data-sonner-toast][data-type='info'] [data-close-button] {
9570
+ background: var(--info-bg);
9571
+ border-color: var(--info-border);
9572
+ color: var(--info-text);
9573
+ }
9574
+ [data-rich-colors='true'][data-sonner-toast][data-type='warning'] {
9575
+ background: var(--warning-bg);
9576
+ border-color: var(--warning-border);
9577
+ color: var(--warning-text);
9578
+ }
9579
+ [data-rich-colors='true'][data-sonner-toast][data-type='warning'] [data-close-button] {
9580
+ background: var(--warning-bg);
9581
+ border-color: var(--warning-border);
9582
+ color: var(--warning-text);
9583
+ }
9584
+ [data-rich-colors='true'][data-sonner-toast][data-type='error'] {
9585
+ background: var(--error-bg);
9586
+ border-color: var(--error-border);
9587
+ color: var(--error-text);
9588
+ }
9589
+ [data-rich-colors='true'][data-sonner-toast][data-type='error'] [data-close-button] {
9590
+ background: var(--error-bg);
9591
+ border-color: var(--error-border);
9592
+ color: var(--error-text);
9593
+ }
9594
+ .sonner-loading-wrapper {
9595
+ --size: 16px;
9596
+ height: var(--size);
9597
+ width: var(--size);
9598
+ position: absolute;
9599
+ inset: 0;
9600
+ z-index: 10;
9601
+ }
9602
+ .sonner-loading-wrapper[data-visible='false'] {
9603
+ transform-origin: center;
9604
+ animation: sonner-fade-out 0.2s ease forwards;
9605
+ }
9606
+ .sonner-spinner {
9607
+ position: relative;
9608
+ top: 50%;
9609
+ left: 50%;
9610
+ height: var(--size);
9611
+ width: var(--size);
9612
+ }
9613
+ .sonner-loading-bar {
9614
+ animation: sonner-spin 1.2s linear infinite;
9615
+ background: var(--gray11);
9616
+ border-radius: 6px;
9617
+ height: 8%;
9618
+ left: -10%;
9619
+ position: absolute;
9620
+ top: -3.9%;
9621
+ width: 24%;
9622
+ }
9623
+ .sonner-loading-bar:nth-child(1) {
9624
+ animation-delay: -1.2s;
9625
+ transform: rotate(0.0001deg) translate(146%);
9626
+ }
9627
+ .sonner-loading-bar:nth-child(2) {
9628
+ animation-delay: -1.1s;
9629
+ transform: rotate(30deg) translate(146%);
9630
+ }
9631
+ .sonner-loading-bar:nth-child(3) {
9632
+ animation-delay: -1s;
9633
+ transform: rotate(60deg) translate(146%);
9634
+ }
9635
+ .sonner-loading-bar:nth-child(4) {
9636
+ animation-delay: -0.9s;
9637
+ transform: rotate(90deg) translate(146%);
9638
+ }
9639
+ .sonner-loading-bar:nth-child(5) {
9640
+ animation-delay: -0.8s;
9641
+ transform: rotate(120deg) translate(146%);
9642
+ }
9643
+ .sonner-loading-bar:nth-child(6) {
9644
+ animation-delay: -0.7s;
9645
+ transform: rotate(150deg) translate(146%);
9646
+ }
9647
+ .sonner-loading-bar:nth-child(7) {
9648
+ animation-delay: -0.6s;
9649
+ transform: rotate(180deg) translate(146%);
9650
+ }
9651
+ .sonner-loading-bar:nth-child(8) {
9652
+ animation-delay: -0.5s;
9653
+ transform: rotate(210deg) translate(146%);
9654
+ }
9655
+ .sonner-loading-bar:nth-child(9) {
9656
+ animation-delay: -0.4s;
9657
+ transform: rotate(240deg) translate(146%);
9658
+ }
9659
+ .sonner-loading-bar:nth-child(10) {
9660
+ animation-delay: -0.3s;
9661
+ transform: rotate(270deg) translate(146%);
9662
+ }
9663
+ .sonner-loading-bar:nth-child(11) {
9664
+ animation-delay: -0.2s;
9665
+ transform: rotate(300deg) translate(146%);
9666
+ }
9667
+ .sonner-loading-bar:nth-child(12) {
9668
+ animation-delay: -0.1s;
9669
+ transform: rotate(330deg) translate(146%);
9670
+ }
9671
+ @keyframes sonner-fade-in {
9672
+ 0% {
9673
+ opacity: 0;
9674
+ transform: scale(0.8);
9675
+ }
9676
+ 100% {
9677
+ opacity: 1;
9678
+ transform: scale(1);
9679
+ }
9680
+ }
9681
+ @keyframes sonner-fade-out {
9682
+ 0% {
9683
+ opacity: 1;
9684
+ transform: scale(1);
9685
+ }
9686
+ 100% {
9687
+ opacity: 0;
9688
+ transform: scale(0.8);
9689
+ }
9690
+ }
9691
+ @keyframes sonner-spin {
9692
+ 0% {
9693
+ opacity: 1;
9694
+ }
9695
+ 100% {
9696
+ opacity: 0.15;
9697
+ }
9698
+ }
9699
+ @media (prefers-reduced-motion) {
9700
+ [data-sonner-toast], [data-sonner-toast] > *, .sonner-loading-bar {
9701
+ transition: none !important;
9702
+ animation: none !important;
9703
+ }
9704
+ }
9705
+ .sonner-loader {
9706
+ position: absolute;
9707
+ top: 50%;
9708
+ left: 50%;
9709
+ transform: translate(-50%, -50%);
9710
+ transform-origin: center;
9711
+ transition: opacity 200ms, transform 200ms;
9712
+ }
9713
+ .sonner-loader[data-visible='false'] {
9714
+ opacity: 0;
9715
+ transform: scale(0.8) translate(-50%, -50%);
9716
+ }
9108
9717
  @keyframes apollo-glow {
9109
9718
  0% {
9110
9719
  box-shadow: 0 0 0 0 var(--_glow-shadow, currentColor);
package/dist/tailwind.css CHANGED
@@ -12,6 +12,7 @@
12
12
 
13
13
  @import "tailwindcss";
14
14
  @import "@uipath/apollo-core/tokens/css/theme-variables.css";
15
+ @import "sonner/dist/styles.css";
15
16
 
16
17
  @import "./tailwind.utilities.css";
17
18
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-wind",
3
- "version": "2.32.0",
3
+ "version": "2.32.2",
4
4
  "description": "UiPath wind design system - A Tailwind CSS based React component library",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",