@indico-data/design-system 3.0.0 → 3.0.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.
Files changed (23) hide show
  1. package/lib/components/modal/ConfirmationModal.d.ts +1 -1
  2. package/lib/components/modal/Modal.stories.d.ts +1 -0
  3. package/lib/components/modal/types.d.ts +5 -2
  4. package/lib/index.css +91 -75
  5. package/lib/index.d.ts +6 -3
  6. package/lib/index.esm.css +91 -75
  7. package/lib/index.esm.js +8 -4
  8. package/lib/index.esm.js.map +1 -1
  9. package/lib/index.js +8 -4
  10. package/lib/index.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/components/floatUI/styles/FloatUI.scss +1 -0
  13. package/src/components/modal/ConfirmationModal.tsx +31 -2
  14. package/src/components/modal/Modal.stories.tsx +69 -0
  15. package/src/components/modal/types.ts +7 -3
  16. package/src/components/pagination/Pagination.tsx +1 -1
  17. package/src/components/pagination/__tests__/Pagination.test.tsx +5 -0
  18. package/src/components/pill/styles/Pill.scss +33 -33
  19. package/src/components/tanstackTable/styles/table.scss +0 -18
  20. package/src/components/tooltip/Tooltip.tsx +0 -1
  21. package/src/styles/globals.scss +1 -1
  22. package/src/styles/variables/themes/dark.scss +28 -13
  23. package/src/styles/variables/themes/light.scss +28 -14
package/lib/components/modal/ConfirmationModal.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { ConfirmationModalProps } from './types';
2
- export declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText, cancelButtonText, confirmationButtonVariant, icon, title, status, maxWidthInPixels, }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText, cancelButtonText, confirmationButtonVariant, icon, title, status, maxWidthInPixels, hasDontShowAgainCheckbox, }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
package/lib/components/modal/Modal.stories.d.ts CHANGED
@@ -6,3 +6,4 @@ export default meta;
6
6
  type Story = StoryObj<typeof Modal>;
7
7
  export declare const Default: Story;
8
8
  export declare const ConfirmationModalStory: StoryObj<typeof ConfirmationModal>;
9
+ export declare const ConfirmationModalStoryWithCheckbox: StoryObj<typeof ConfirmationModal>;
package/lib/components/modal/types.d.ts CHANGED
@@ -21,8 +21,11 @@ export interface ModalProps {
21
21
  maxWidthInPixels?: number;
22
22
  }
23
23
  export interface ConfirmationModalProps extends ModalProps {
24
- onConfirmRequest?: () => void;
25
- onCancelRequest?: () => void;
24
+ onConfirmRequest?: ({ dontShowAgain, }: {
25
+ dontShowAgain?: boolean;
26
+ }) => void | Promise<void> | Promise<boolean>;
27
+ onCancelRequest?: () => void | Promise<void> | Promise<boolean>;
28
+ hasDontShowAgainCheckbox?: boolean;
26
29
  confirmationButtonVariant?: ButtonVariants;
27
30
  confirmationButtonText?: string;
28
31
  cancelButtonText?: string;
package/lib/index.css CHANGED
@@ -141,6 +141,7 @@
141
141
  --pf-yellow-color-400: #eaab3e;
142
142
  --pf-yellow-color-450: #dc9518;
143
143
  --pf-yellow-color-500: #ad791f;
144
+ --pf-yellow-color-550: #976f00;
144
145
  --pf-yellow-color-600: #825b17;
145
146
  --pf-yellow-color-700: #58421d;
146
147
  --pf-yellow-color-800: #32291b;
@@ -173,20 +174,20 @@
173
174
  --pf-teal-color-700: #235252;
174
175
  --pf-teal-color-800: #1b3232;
175
176
  --pf-teal-color-900: #101818;
176
- --pf-brand-color: #2960a3;
177
+ --pf-brand-color: #2989ff;
177
178
  --pf-brand-color-50: #f6fafd;
178
179
  --pf-brand-color-100: #eef4fc;
179
- --pf-brand-color-150: #dce9f9;
180
- --pf-brand-color-200: #eef4fc;
181
- --pf-brand-color-250: #accdf6;
182
- --pf-brand-color-300: #8cbaf2;
183
- --pf-brand-color-400: #3e8bea;
180
+ --pf-brand-color-150: #e5effa;
181
+ --pf-brand-color-200: #d8e9fd;
182
+ --pf-brand-color-250: #bbd8fb;
183
+ --pf-brand-color-300: #9ec7fa;
184
+ --pf-brand-color-400: #2989ff;
184
185
  --pf-brand-color-450: #0070f5;
185
- --pf-brand-color-500: #2960a3;
186
- --pf-brand-color-600: #264973;
187
- --pf-brand-color-700: #233852;
188
- --pf-brand-color-800: #1b2532;
189
- --pf-brand-color-900: #101418;
186
+ --pf-brand-color-500: #005ccc;
187
+ --pf-brand-color-600: #004599;
188
+ --pf-brand-color-700: #06356f;
189
+ --pf-brand-color-800: #082345;
190
+ --pf-brand-color-900: #061323;
190
191
  --pf-purple-color: #5c29a3;
191
192
  --pf-purple-color-50: #f9f6fc;
192
193
  --pf-purple-color-100: #f4f0fa;
@@ -232,12 +233,26 @@
232
233
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
233
234
  --pf-black-color-100: rgba(0, 0, 0, 1);
234
235
  --pf-error-color: var(--pf-red-color-450);
236
+ --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
237
+ --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
235
238
  --pf-success-color: var(--pf-green-color-500);
236
- --pf-warning-color: var(--pf-yellow-color-400);
239
+ --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
240
+ --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
241
+ --pf-warning-color: var(--pf-yellow-color-450);
242
+ --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
243
+ --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
237
244
  --pf-neutral-color: var(--pf-gray-color-500);
245
+ --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
246
+ --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
238
247
  --pf-info-color: var(--pf-secondary-color-450);
248
+ --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
249
+ --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
239
250
  --pf-brand-color: var(--pf-brand-color-450);
240
- --pf-pending-color: var(--pf-orange-color-400);
251
+ --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
252
+ --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
253
+ --pf-pending-color: var(--pf-pink-color-450);
254
+ --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
255
+ --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
241
256
  }
242
257
 
243
258
  :root [data-theme=dark],
@@ -350,6 +365,7 @@
350
365
  --pf-yellow-color-400: #eaab3e;
351
366
  --pf-yellow-color-450: #dc9518;
352
367
  --pf-yellow-color-500: #ad791f;
368
+ --pf-yellow-color-550: #976f00;
353
369
  --pf-yellow-color-600: #825b17;
354
370
  --pf-yellow-color-700: #58421d;
355
371
  --pf-yellow-color-800: #32291b;
@@ -382,20 +398,20 @@
382
398
  --pf-teal-color-700: #235252;
383
399
  --pf-teal-color-800: #1b3232;
384
400
  --pf-teal-color-900: #101818;
385
- --pf-brand-color: #2960a3;
401
+ --pf-brand-color: #2989ff;
386
402
  --pf-brand-color-50: #f6fafd;
387
403
  --pf-brand-color-100: #eef4fc;
388
- --pf-brand-color-150: #dce9f9;
389
- --pf-brand-color-200: #eef4fc;
390
- --pf-brand-color-250: #accdf6;
391
- --pf-brand-color-300: #8cbaf2;
392
- --pf-brand-color-400: #3e8bea;
404
+ --pf-brand-color-150: #e5effa;
405
+ --pf-brand-color-200: #d8e9fd;
406
+ --pf-brand-color-250: #bbd8fb;
407
+ --pf-brand-color-300: #9ec7fa;
408
+ --pf-brand-color-400: #2989ff;
393
409
  --pf-brand-color-450: #0070f5;
394
- --pf-brand-color-500: #2960a3;
395
- --pf-brand-color-600: #264973;
396
- --pf-brand-color-700: #233852;
397
- --pf-brand-color-800: #1b2532;
398
- --pf-brand-color-900: #101418;
410
+ --pf-brand-color-500: #005ccc;
411
+ --pf-brand-color-600: #004599;
412
+ --pf-brand-color-700: #06356f;
413
+ --pf-brand-color-800: #082345;
414
+ --pf-brand-color-900: #061323;
399
415
  --pf-purple-color: #5c29a3;
400
416
  --pf-purple-color-50: #f9f6fc;
401
417
  --pf-purple-color-100: #f4f0fa;
@@ -441,12 +457,26 @@
441
457
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
442
458
  --pf-black-color-100: rgba(0, 0, 0, 1);
443
459
  --pf-error-color: var(--pf-red-color-450);
460
+ --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
461
+ --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
444
462
  --pf-success-color: var(--pf-green-color-500);
445
- --pf-warning-color: var(--pf-yellow-color-400);
463
+ --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
464
+ --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
465
+ --pf-warning-color: var(--pf-yellow-color-450);
466
+ --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
467
+ --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
446
468
  --pf-neutral-color: var(--pf-gray-color-500);
469
+ --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
470
+ --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
447
471
  --pf-info-color: var(--pf-secondary-color-450);
472
+ --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
473
+ --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
448
474
  --pf-brand-color: var(--pf-brand-color-450);
449
- --pf-pending-color: var(--pf-orange-color-400);
475
+ --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
476
+ --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
477
+ --pf-pending-color: var(--pf-pink-color-450);
478
+ --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
479
+ --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
450
480
  }
451
481
 
452
482
  :root {
@@ -723,7 +753,7 @@ a:hover,
723
753
  .react-tooltip {
724
754
  z-index: 5;
725
755
  background-color: var(--pf-tooltip-background-color);
726
- border: var(--pf-border-sm) solid var(--pf-border-color-primary);
756
+ color: var(--pf-tooltip-font-color);
727
757
  opacity: 1 !important;
728
758
  text-wrap: wrap;
729
759
  }
@@ -2121,6 +2151,7 @@ body div[class*=select__single-value] {
2121
2151
  }
2122
2152
 
2123
2153
  .floatui-content {
2154
+ border: solid var(--pf-border-thin) var(--pf-border-color-secondary);
2124
2155
  border-radius: var(--pf-floatui-border-radius);
2125
2156
  box-shadow: var(--pf-floatui-box-shadow);
2126
2157
  background: var(--pf-floatui-background-color);
@@ -2642,21 +2673,6 @@ body div[class*=select__single-value] {
2642
2673
  vertical-align: middle;
2643
2674
  height: 100%;
2644
2675
  border: var(--pf-border-sm) solid var(--pf-border-color-primary);
2645
- animation: none;
2646
- }
2647
- @keyframes shimmer {
2648
- 0% {
2649
- background-color: var(--pf-primary-color-700) 40;
2650
- }
2651
- 50% {
2652
- background-color: var(--pf-primary-color-700);
2653
- }
2654
- 100% {
2655
- background-color: var(--pf-primary-color-700) 40;
2656
- }
2657
- }
2658
- .tanstack-table__centered-row.is-loading {
2659
- animation: shimmer 3s ease-in-out infinite;
2660
2676
  }
2661
2677
  .tanstack-table__centered-row svg {
2662
2678
  margin: 0 auto;
@@ -2672,64 +2688,64 @@ body div[class*=select__single-value] {
2672
2688
  }
2673
2689
 
2674
2690
  :root [data-theme=light] {
2675
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
2691
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
2676
2692
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
2677
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
2678
- --pf-pill-error-background-color: var(--pf-red-color-450);
2693
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
2694
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
2679
2695
  --pf-pill-error-font-color: var(--pf-red-color-50);
2680
- --pf-pill-error-border-color: var(--pf-red-color-450);
2681
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2696
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
2697
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2682
2698
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2683
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2699
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2684
2700
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2685
2701
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2686
2702
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2687
- --pf-pill-success-background-color: var(--pf-green-color-600);
2703
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
2688
2704
  --pf-pill-success-font-color: var(--pf-green-color-50);
2689
- --pf-pill-success-border-color: var(--pf-green-color-600);
2690
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
2705
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
2706
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2691
2707
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
2692
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
2693
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
2708
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2709
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2694
2710
  --pf-pill-pending-font-color: var(--pf-pink-color-50);
2695
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
2696
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
2711
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2712
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2697
2713
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
2698
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
2699
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
2714
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2715
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2700
2716
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
2701
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
2717
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2702
2718
  }
2703
2719
 
2704
2720
  :root [data-theme=dark],
2705
2721
  :root {
2706
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
2722
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
2707
2723
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
2708
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
2709
- --pf-pill-error-background-color: var(--pf-red-color-450);
2724
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
2725
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
2710
2726
  --pf-pill-error-font-color: var(--pf-red-color-50);
2711
- --pf-pill-error-border-color: var(--pf-red-color-450);
2712
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2727
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
2728
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2713
2729
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2714
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2730
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2715
2731
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2716
2732
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2717
2733
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2718
- --pf-pill-success-background-color: var(--pf-green-color-600);
2734
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
2719
2735
  --pf-pill-success-font-color: var(--pf-green-color-50);
2720
- --pf-pill-success-border-color: var(--pf-green-color-600);
2721
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
2736
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
2737
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2722
2738
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
2723
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
2724
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
2725
- --pf-pill-pipendingnk-font-color: var(--pf-pink-color-50);
2726
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
2727
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
2739
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2740
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2741
+ --pf-pill-pending-font-color: var(--pf-pink-color-50);
2742
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2743
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2728
2744
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
2729
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
2730
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
2745
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2746
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2731
2747
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
2732
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
2748
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2733
2749
  }
2734
2750
 
2735
2751
  .pill {
package/lib/index.d.ts CHANGED
@@ -564,8 +564,11 @@ interface ModalProps {
564
564
  maxWidthInPixels?: number;
565
565
  }
566
566
  interface ConfirmationModalProps extends ModalProps {
567
- onConfirmRequest?: () => void;
568
- onCancelRequest?: () => void;
567
+ onConfirmRequest?: ({ dontShowAgain, }: {
568
+ dontShowAgain?: boolean;
569
+ }) => void | Promise<void> | Promise<boolean>;
570
+ onCancelRequest?: () => void | Promise<void> | Promise<boolean>;
571
+ hasDontShowAgainCheckbox?: boolean;
569
572
  confirmationButtonVariant?: ButtonVariants;
570
573
  confirmationButtonText?: string;
571
574
  cancelButtonText?: string;
@@ -575,7 +578,7 @@ interface ConfirmationModalProps extends ModalProps {
575
578
 
576
579
  declare const Modal: ({ className, children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position, parentSelector, title, subtitle, footer, maxWidthInPixels, ...rest }: ModalProps) => react_jsx_runtime.JSX.Element;
577
580
 
578
- declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText, cancelButtonText, confirmationButtonVariant, icon, title, status, maxWidthInPixels, }: ConfirmationModalProps) => react_jsx_runtime.JSX.Element;
581
+ declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText, cancelButtonText, confirmationButtonVariant, icon, title, status, maxWidthInPixels, hasDontShowAgainCheckbox, }: ConfirmationModalProps) => react_jsx_runtime.JSX.Element;
579
582
 
580
583
  type WithPaginationProps = {
581
584
  rowsPerPage: number;
package/lib/index.esm.css CHANGED
@@ -141,6 +141,7 @@
141
141
  --pf-yellow-color-400: #eaab3e;
142
142
  --pf-yellow-color-450: #dc9518;
143
143
  --pf-yellow-color-500: #ad791f;
144
+ --pf-yellow-color-550: #976f00;
144
145
  --pf-yellow-color-600: #825b17;
145
146
  --pf-yellow-color-700: #58421d;
146
147
  --pf-yellow-color-800: #32291b;
@@ -173,20 +174,20 @@
173
174
  --pf-teal-color-700: #235252;
174
175
  --pf-teal-color-800: #1b3232;
175
176
  --pf-teal-color-900: #101818;
176
- --pf-brand-color: #2960a3;
177
+ --pf-brand-color: #2989ff;
177
178
  --pf-brand-color-50: #f6fafd;
178
179
  --pf-brand-color-100: #eef4fc;
179
- --pf-brand-color-150: #dce9f9;
180
- --pf-brand-color-200: #eef4fc;
181
- --pf-brand-color-250: #accdf6;
182
- --pf-brand-color-300: #8cbaf2;
183
- --pf-brand-color-400: #3e8bea;
180
+ --pf-brand-color-150: #e5effa;
181
+ --pf-brand-color-200: #d8e9fd;
182
+ --pf-brand-color-250: #bbd8fb;
183
+ --pf-brand-color-300: #9ec7fa;
184
+ --pf-brand-color-400: #2989ff;
184
185
  --pf-brand-color-450: #0070f5;
185
- --pf-brand-color-500: #2960a3;
186
- --pf-brand-color-600: #264973;
187
- --pf-brand-color-700: #233852;
188
- --pf-brand-color-800: #1b2532;
189
- --pf-brand-color-900: #101418;
186
+ --pf-brand-color-500: #005ccc;
187
+ --pf-brand-color-600: #004599;
188
+ --pf-brand-color-700: #06356f;
189
+ --pf-brand-color-800: #082345;
190
+ --pf-brand-color-900: #061323;
190
191
  --pf-purple-color: #5c29a3;
191
192
  --pf-purple-color-50: #f9f6fc;
192
193
  --pf-purple-color-100: #f4f0fa;
@@ -232,12 +233,26 @@
232
233
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
233
234
  --pf-black-color-100: rgba(0, 0, 0, 1);
234
235
  --pf-error-color: var(--pf-red-color-450);
236
+ --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
237
+ --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
235
238
  --pf-success-color: var(--pf-green-color-500);
236
- --pf-warning-color: var(--pf-yellow-color-400);
239
+ --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
240
+ --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
241
+ --pf-warning-color: var(--pf-yellow-color-450);
242
+ --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
243
+ --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
237
244
  --pf-neutral-color: var(--pf-gray-color-500);
245
+ --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
246
+ --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
238
247
  --pf-info-color: var(--pf-secondary-color-450);
248
+ --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
249
+ --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
239
250
  --pf-brand-color: var(--pf-brand-color-450);
240
- --pf-pending-color: var(--pf-orange-color-400);
251
+ --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
252
+ --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
253
+ --pf-pending-color: var(--pf-pink-color-450);
254
+ --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
255
+ --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
241
256
  }
242
257
 
243
258
  :root [data-theme=dark],
@@ -350,6 +365,7 @@
350
365
  --pf-yellow-color-400: #eaab3e;
351
366
  --pf-yellow-color-450: #dc9518;
352
367
  --pf-yellow-color-500: #ad791f;
368
+ --pf-yellow-color-550: #976f00;
353
369
  --pf-yellow-color-600: #825b17;
354
370
  --pf-yellow-color-700: #58421d;
355
371
  --pf-yellow-color-800: #32291b;
@@ -382,20 +398,20 @@
382
398
  --pf-teal-color-700: #235252;
383
399
  --pf-teal-color-800: #1b3232;
384
400
  --pf-teal-color-900: #101818;
385
- --pf-brand-color: #2960a3;
401
+ --pf-brand-color: #2989ff;
386
402
  --pf-brand-color-50: #f6fafd;
387
403
  --pf-brand-color-100: #eef4fc;
388
- --pf-brand-color-150: #dce9f9;
389
- --pf-brand-color-200: #eef4fc;
390
- --pf-brand-color-250: #accdf6;
391
- --pf-brand-color-300: #8cbaf2;
392
- --pf-brand-color-400: #3e8bea;
404
+ --pf-brand-color-150: #e5effa;
405
+ --pf-brand-color-200: #d8e9fd;
406
+ --pf-brand-color-250: #bbd8fb;
407
+ --pf-brand-color-300: #9ec7fa;
408
+ --pf-brand-color-400: #2989ff;
393
409
  --pf-brand-color-450: #0070f5;
394
- --pf-brand-color-500: #2960a3;
395
- --pf-brand-color-600: #264973;
396
- --pf-brand-color-700: #233852;
397
- --pf-brand-color-800: #1b2532;
398
- --pf-brand-color-900: #101418;
410
+ --pf-brand-color-500: #005ccc;
411
+ --pf-brand-color-600: #004599;
412
+ --pf-brand-color-700: #06356f;
413
+ --pf-brand-color-800: #082345;
414
+ --pf-brand-color-900: #061323;
399
415
  --pf-purple-color: #5c29a3;
400
416
  --pf-purple-color-50: #f9f6fc;
401
417
  --pf-purple-color-100: #f4f0fa;
@@ -441,12 +457,26 @@
441
457
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
442
458
  --pf-black-color-100: rgba(0, 0, 0, 1);
443
459
  --pf-error-color: var(--pf-red-color-450);
460
+ --pf-error-color-dark: color-mix(in srgb, var(--pf-red-color-450) 75%, black);
461
+ --pf-error-color-light: color-mix(in srgb, var(--pf-red-color-450) 60%, white);
444
462
  --pf-success-color: var(--pf-green-color-500);
445
- --pf-warning-color: var(--pf-yellow-color-400);
463
+ --pf-success-color-dark: color-mix(in srgb, var(--pf-green-color-500) 70%, black);
464
+ --pf-success-color-light: color-mix(in srgb, var(--pf-green-color-500) 60%, white);
465
+ --pf-warning-color: var(--pf-yellow-color-450);
466
+ --pf-warning-color-dark: color-mix(in srgb, var(--pf-yellow-color-450) 50%, black);
467
+ --pf-warning-color-light: color-mix(in srgb, var(--pf-yellow-color-50) 60%, white);
446
468
  --pf-neutral-color: var(--pf-gray-color-500);
469
+ --pf-neutral-color-dark: color-mix(in srgb, var(--pf-gray-color-500) 75%, black);
470
+ --pf-neutral-color-light: color-mix(in srgb, var(--pf-gray-color-500) 60%, white);
447
471
  --pf-info-color: var(--pf-secondary-color-450);
472
+ --pf-info-color-dark: color-mix(in srgb, var(--pf-secondary-color-450) 75%, black);
473
+ --pf-info-color-light: color-mix(in srgb, var(--pf-secondary-color-450) 60%, white);
448
474
  --pf-brand-color: var(--pf-brand-color-450);
449
- --pf-pending-color: var(--pf-orange-color-400);
475
+ --pf-brand-color-dark: color-mix(in srgb, var(--pf-brand-color-450) 75%, black);
476
+ --pf-brand-color-light: color-mix(in srgb, var(--pf-brand-color-450) 60%, white);
477
+ --pf-pending-color: var(--pf-pink-color-450);
478
+ --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
479
+ --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
450
480
  }
451
481
 
452
482
  :root {
@@ -723,7 +753,7 @@ a:hover,
723
753
  .react-tooltip {
724
754
  z-index: 5;
725
755
  background-color: var(--pf-tooltip-background-color);
726
- border: var(--pf-border-sm) solid var(--pf-border-color-primary);
756
+ color: var(--pf-tooltip-font-color);
727
757
  opacity: 1 !important;
728
758
  text-wrap: wrap;
729
759
  }
@@ -2121,6 +2151,7 @@ body div[class*=select__single-value] {
2121
2151
  }
2122
2152
 
2123
2153
  .floatui-content {
2154
+ border: solid var(--pf-border-thin) var(--pf-border-color-secondary);
2124
2155
  border-radius: var(--pf-floatui-border-radius);
2125
2156
  box-shadow: var(--pf-floatui-box-shadow);
2126
2157
  background: var(--pf-floatui-background-color);
@@ -2642,21 +2673,6 @@ body div[class*=select__single-value] {
2642
2673
  vertical-align: middle;
2643
2674
  height: 100%;
2644
2675
  border: var(--pf-border-sm) solid var(--pf-border-color-primary);
2645
- animation: none;
2646
- }
2647
- @keyframes shimmer {
2648
- 0% {
2649
- background-color: var(--pf-primary-color-700) 40;
2650
- }
2651
- 50% {
2652
- background-color: var(--pf-primary-color-700);
2653
- }
2654
- 100% {
2655
- background-color: var(--pf-primary-color-700) 40;
2656
- }
2657
- }
2658
- .tanstack-table__centered-row.is-loading {
2659
- animation: shimmer 3s ease-in-out infinite;
2660
2676
  }
2661
2677
  .tanstack-table__centered-row svg {
2662
2678
  margin: 0 auto;
@@ -2672,64 +2688,64 @@ body div[class*=select__single-value] {
2672
2688
  }
2673
2689
 
2674
2690
  :root [data-theme=light] {
2675
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
2691
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
2676
2692
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
2677
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
2678
- --pf-pill-error-background-color: var(--pf-red-color-450);
2693
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
2694
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
2679
2695
  --pf-pill-error-font-color: var(--pf-red-color-50);
2680
- --pf-pill-error-border-color: var(--pf-red-color-450);
2681
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2696
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
2697
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2682
2698
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2683
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2699
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2684
2700
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2685
2701
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2686
2702
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2687
- --pf-pill-success-background-color: var(--pf-green-color-600);
2703
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
2688
2704
  --pf-pill-success-font-color: var(--pf-green-color-50);
2689
- --pf-pill-success-border-color: var(--pf-green-color-600);
2690
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
2705
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
2706
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2691
2707
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
2692
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
2693
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
2708
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2709
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2694
2710
  --pf-pill-pending-font-color: var(--pf-pink-color-50);
2695
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
2696
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
2711
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2712
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2697
2713
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
2698
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
2699
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
2714
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2715
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2700
2716
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
2701
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
2717
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2702
2718
  }
2703
2719
 
2704
2720
  :root [data-theme=dark],
2705
2721
  :root {
2706
- --pf-pill-info-background-color: var(--pf-secondary-color-500);
2722
+ --pf-pill-info-background-color: var(--pf-info-color-dark);
2707
2723
  --pf-pill-info-font-color: var(--pf-secondary-color-50);
2708
- --pf-pill-info-border-color: var(--pf-secondary-color-500);
2709
- --pf-pill-error-background-color: var(--pf-red-color-450);
2724
+ --pf-pill-info-border-color: var(--pf-info-color-dark);
2725
+ --pf-pill-error-background-color: var(--pf-error-color-dark);
2710
2726
  --pf-pill-error-font-color: var(--pf-red-color-50);
2711
- --pf-pill-error-border-color: var(--pf-red-color-450);
2712
- --pf-pill-warning-background-color: var(--pf-yellow-color-450);
2727
+ --pf-pill-error-border-color: var(--pf-error-color-dark);
2728
+ --pf-pill-warning-background-color: var(--pf-warning-color-dark);
2713
2729
  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
2714
- --pf-pill-warning-border-color: var(--pf-yellow-color-450);
2730
+ --pf-pill-warning-border-color: var(--pf-warning-color-dark);
2715
2731
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
2716
2732
  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
2717
2733
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
2718
- --pf-pill-success-background-color: var(--pf-green-color-600);
2734
+ --pf-pill-success-background-color: var(--pf-success-color-dark);
2719
2735
  --pf-pill-success-font-color: var(--pf-green-color-50);
2720
- --pf-pill-success-border-color: var(--pf-green-color-600);
2721
- --pf-pill-purple-background-color: var(--pf-purple-color-450);
2736
+ --pf-pill-success-border-color: var(--pf-success-color-dark);
2737
+ --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2722
2738
  --pf-pill-purple-font-color: var(--pf-purple-color-50);
2723
- --pf-pill-purple-border-color: var(--pf-purple-color-450);
2724
- --pf-pill-pending-background-color: var(--pf-pink-color-450);
2725
- --pf-pill-pipendingnk-font-color: var(--pf-pink-color-50);
2726
- --pf-pill-pending-border-color: var(--pf-pink-color-450);
2727
- --pf-pill-orange-background-color: var(--pf-orange-color-450);
2739
+ --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
2740
+ --pf-pill-pending-background-color: var(--pf-pending-color-dark);
2741
+ --pf-pill-pending-font-color: var(--pf-pink-color-50);
2742
+ --pf-pill-pending-border-color: var(--pf-pending-color-dark);
2743
+ --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2728
2744
  --pf-pill-orange-font-color: var(--pf-orange-color-50);
2729
- --pf-pill-orange-border-color: var(--pf-orange-color-450);
2730
- --pf-pill-teal-background-color: var(--pf-teal-color-600);
2745
+ --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
2746
+ --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2731
2747
  --pf-pill-teal-font-color: var(--pf-teal-color-50);
2732
- --pf-pill-teal-border-color: var(--pf-teal-color-600);
2748
+ --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
2733
2749
  }
2734
2750
 
2735
2751
  .pill {
package/lib/index.esm.js CHANGED
@@ -5517,7 +5517,7 @@ const Pagination = (_a) => {
5517
5517
  const hasError = Number(inputValue) > totalPages || Number(inputValue) < 1;
5518
5518
  return (jsx("div", Object.assign({ className: classes }, rest, { children: jsx(Container, { children: jsxs(Row, { gutterWidth: 12, align: "center", children: [jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__previous", children: jsx(Button$1, { "data-testid": "pagination-previous-button", ariaLabel: "Previous Page", variant: "link", onClick: handlePreviousPage, iconLeft: "chevron-left", isDisabled: isPreviousButtonDisabled }) }) }), jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__current-page", children: jsx(LabeledInput, { "data-testid": "pagination-current-page-input", className: classNames('pagination__current-page-input', {
5519
5519
  'has-error': hasError,
5520
- }), value: inputValue, name: "currentPage", label: "Current Page", hasHiddenLabel: true, onKeyDown: (e) => {
5520
+ }), value: totalPages === 0 ? '0' : inputValue, name: "currentPage", label: "Current Page", hasHiddenLabel: true, onKeyDown: (e) => {
5521
5521
  if (e.key === 'Enter') {
5522
5522
  validateAndUpdatePage(e.currentTarget.value);
5523
5523
  }
@@ -21044,8 +21044,9 @@ const Modal = (_a) => {
21044
21044
  return (jsx(ReactModal, Object.assign({ className: modalClasses, overlayClassName: overlayClasses, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement }, rest, { children: jsxs("div", { className: "modal-content", style: { maxWidth: `${maxWidthInPixels}px` }, children: [jsx(Button$1, { className: "modal-close-button", onClick: onRequestClose, variant: "link", size: "md", iconLeft: "x-close", ariaLabel: "Close" }), hasHeader && (jsx("div", { className: "modal-header", children: jsx(Row, { justify: "between", align: "center", children: jsxs(Col, { children: [title && jsx("h2", { className: "modal-title", children: title }), subtitle && jsx("p", { className: "modal-subtitle", children: subtitle })] }) }) })), jsx("div", { className: "modal-body", children: children }), footer && jsx("div", { className: "modal-footer", children: footer })] }) })));
21045
21045
  };
21046
21046
 
21047
- const defaultFooter = ({ onCancelRequest, onConfirmRequest, confirmationButtonText, confirmationButtonVariant, cancelButtonText, }) => (jsxs(Row, { gutterWidth: 12, justify: "end", align: "center", children: [jsx(Col, { xs: "content", children: jsx(Button$1, { onClick: onCancelRequest, ariaLabel: cancelButtonText || 'Cancel', variant: "outline", children: cancelButtonText }) }), jsx(Col, { xs: "content", children: jsx(Button$1, { onClick: onConfirmRequest, ariaLabel: confirmationButtonText || 'Confirm', variant: confirmationButtonVariant, children: confirmationButtonText }) })] }));
21048
- const ConfirmationModal = ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText = 'Confirm', cancelButtonText = 'Cancel', confirmationButtonVariant = 'solid', icon, title, status = 'info', maxWidthInPixels, }) => {
21047
+ const defaultFooter = ({ onCancelRequest, onConfirmRequest, confirmationButtonText, confirmationButtonVariant, cancelButtonText, hasDontShowAgainCheckbox, isChecked, onDontShowAgainChange, }) => (jsxs(Row, { gutterWidth: 12, justify: "end", align: "center", children: [hasDontShowAgainCheckbox && (jsx(Col, { children: jsx(Checkbox, { label: "Don't display this again.", onChange: (e) => onDontShowAgainChange === null || onDontShowAgainChange === void 0 ? void 0 : onDontShowAgainChange(e.target.checked), isChecked: isChecked, id: "dont-show-again", name: "dont-show-again" }) })), jsx(Col, { xs: "content", children: jsx(Button$1, { onClick: onCancelRequest, ariaLabel: cancelButtonText || 'Cancel', variant: "outline", children: cancelButtonText }) }), jsx(Col, { xs: "content", children: jsx(Button$1, { onClick: () => onConfirmRequest === null || onConfirmRequest === void 0 ? void 0 : onConfirmRequest({ dontShowAgain: isChecked }), ariaLabel: confirmationButtonText || 'Confirm', variant: confirmationButtonVariant, children: confirmationButtonText }) })] }));
21048
+ const ConfirmationModal = ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText = 'Confirm', cancelButtonText = 'Cancel', confirmationButtonVariant = 'solid', icon, title, status = 'info', maxWidthInPixels, hasDontShowAgainCheckbox, }) => {
21049
+ const [dontShowAgain, setDontShowAgain] = useState(false);
21049
21050
  const modalFooter = footer ||
21050
21051
  defaultFooter({
21051
21052
  onCancelRequest,
@@ -21053,6 +21054,9 @@ const ConfirmationModal = ({ className, overlayClassName, testId, isOpen, onRequ
21053
21054
  confirmationButtonText,
21054
21055
  cancelButtonText,
21055
21056
  confirmationButtonVariant,
21057
+ hasDontShowAgainCheckbox,
21058
+ isChecked: dontShowAgain,
21059
+ onDontShowAgainChange: setDontShowAgain,
21056
21060
  });
21057
21061
  return (jsxs(Modal, { className: classNames('confirmation-modal', className), overlayClassName: overlayClassName, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement, footer: modalFooter, maxWidthInPixels: maxWidthInPixels, children: [icon && (jsx(Icon, { name: icon, className: classNames('confirmation-modal-icon', `color-${status}`), size: "xl" })), title && jsx("h2", { className: "confirmation-modal-title", children: title }), children] }));
21058
21062
  };
@@ -43031,7 +43035,7 @@ const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:!1,bas
43031
43035
 
43032
43036
  const Tooltip = (_a) => {
43033
43037
  var { id, clickToShow, delayShow, delayHide, children, zIndex = 1000, place = 'top' } = _a, rest = __rest(_a, ["id", "clickToShow", "delayShow", "delayHide", "children", "zIndex", "place"]);
43034
- return (jsx(M, Object.assign({ border: "solid var(--pf-border-thin)var(--pf-border-color)", style: {
43038
+ return (jsx(M, Object.assign({ style: {
43035
43039
  backgroundColor: 'var(--pf-tooltip-background-color)',
43036
43040
  color: 'var(--pf-tooltip-font-color)',
43037
43041
  zIndex,