@indico-data/design-system 3.22.0 → 3.23.0-beta.1

package/lib/index.css

@@ -6500,21 +6500,21 @@ body div[class*=select__single-value] {
   border-radius: var(--pf-border-radius-full);
 }
 .pill--sm {
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
+  padding: var(--pf-spacing-micro) var(--pf-spacing-xs);
   font-size: var(--pf-font-size-sm);
   font-weight: var(--pf-font-weight-semibold);
   line-height: 16px;
   gap: var(--pf-spacing-xxs);
 }
 .pill--md {
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-md);
+  padding: var(--pf-spacing-micro) var(--pf-spacing-sm);
   font-size: var(--pf-font-size-md);
   font-weight: var(--pf-font-weight-medium);
   line-height: 20px;
   gap: var(--pf-spacing-xs);
 }
 .pill--lg {
-  padding: var(--pf-spacing-xs) var(--pf-spacing-lg);
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-md);
   font-size: var(--pf-font-size-md);
   font-weight: var(--pf-font-weight-medium);
   line-height: 20px;
@@ -6523,6 +6523,15 @@ body div[class*=select__single-value] {
 .pill--lg.pill--badge {
   border-radius: var(--pf-border-radius-md);
 }
+.pill--sm.pill--pill {
+  padding: var(--pf-spacing-micro) var(--pf-spacing-sm);
+}
+.pill--md.pill--pill {
+  padding: var(--pf-spacing-micro) var(--pf-spacing-md);
+}
+.pill--lg.pill--pill {
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
+}
 .pill--icon-only.pill--sm {
   padding: var(--pf-spacing-xxs);
 }
@@ -6533,18 +6542,27 @@ body div[class*=select__single-value] {
   padding: var(--pf-spacing-sm);
 }
 .pill--closeable.pill--sm {
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-xs);
 }
 .pill--closeable.pill--md {
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-md);
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
   gap: var(--pf-spacing-xxs);
 }
 .pill--closeable.pill--lg {
-  padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-lg);
+  padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-md);
   gap: var(--pf-spacing-xxs);
 }
+.pill--closeable.pill--pill.pill--sm {
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
+}
+.pill--closeable.pill--pill.pill--md {
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-md);
+}
+.pill--closeable.pill--pill.pill--lg {
+  padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-lg);
+}
 .pill--solid-red {
-  background-color: var(--pf-pill-solid-red-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-solid-red-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-solid-red-text);
 }
 .pill--solid-red > .icon {
@@ -6561,7 +6579,7 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-solid-red-close-hover-bg);
 }
 .pill--solid-purple {
-  background-color: var(--pf-pill-solid-purple-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-solid-purple-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-solid-purple-text);
 }
 .pill--solid-purple > .icon {
@@ -6578,7 +6596,7 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-solid-purple-close-hover-bg);
 }
 .pill--solid-yellow {
-  background-color: var(--pf-pill-solid-yellow-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-solid-yellow-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-solid-yellow-text);
 }
 .pill--solid-yellow > .icon {
@@ -6595,7 +6613,7 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-solid-yellow-close-hover-bg);
 }
 .pill--solid-blue {
-  background-color: var(--pf-pill-solid-blue-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-solid-blue-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-solid-blue-text);
 }
 .pill--solid-blue > .icon {
@@ -6612,7 +6630,7 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-solid-blue-close-hover-bg);
 }
 .pill--solid-green {
-  background-color: var(--pf-pill-solid-green-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-solid-green-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-solid-green-text);
 }
 .pill--solid-green > .icon {
@@ -6629,7 +6647,7 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-solid-green-close-hover-bg);
 }
 .pill--solid-gray {
-  background-color: var(--pf-pill-solid-gray-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-solid-gray-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-solid-gray-text);
 }
 .pill--solid-gray > .icon {
@@ -6646,7 +6664,7 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-solid-gray-close-hover-bg);
 }
 .pill--solid-pink {
-  background-color: var(--pf-pill-solid-pink-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-solid-pink-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-solid-pink-text);
 }
 .pill--solid-pink > .icon {
@@ -6663,7 +6681,7 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-solid-pink-close-hover-bg);
 }
 .pill--solid-orange {
-  background-color: var(--pf-pill-solid-orange-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-solid-orange-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-solid-orange-text);
 }
 .pill--solid-orange > .icon {
@@ -6680,7 +6698,7 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-solid-orange-close-hover-bg);
 }
 .pill--solid-teal {
-  background-color: var(--pf-pill-solid-teal-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-solid-teal-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-solid-teal-text);
 }
 .pill--solid-teal > .icon {
@@ -6697,7 +6715,7 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-solid-teal-close-hover-bg);
 }
 .pill--solid-soft {
-  background-color: var(--pf-pill-solid-soft-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-solid-soft-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-solid-soft-text);
 }
 .pill--solid-soft > .icon {
@@ -6714,9 +6732,9 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-solid-soft-close-hover-bg);
 }
 .pill--outline-red {
-  background-color: var(--pf-pill-outline-red-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-outline-red-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-outline-red-text);
-  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-red-border);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-pill-outline-red-border) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
 }
 .pill--outline-red > .icon {
   color: var(--pf-pill-outline-red-icon);
@@ -6732,9 +6750,9 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-outline-red-close-hover-bg);
 }
 .pill--outline-purple {
-  background-color: var(--pf-pill-outline-purple-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-outline-purple-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-outline-purple-text);
-  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-purple-border);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-pill-outline-purple-border) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
 }
 .pill--outline-purple > .icon {
   color: var(--pf-pill-outline-purple-icon);
@@ -6750,9 +6768,9 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-outline-purple-close-hover-bg);
 }
 .pill--outline-yellow {
-  background-color: var(--pf-pill-outline-yellow-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-outline-yellow-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-outline-yellow-text);
-  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-yellow-border);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-pill-outline-yellow-border) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
 }
 .pill--outline-yellow > .icon {
   color: var(--pf-pill-outline-yellow-icon);
@@ -6768,9 +6786,9 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-outline-yellow-close-hover-bg);
 }
 .pill--outline-blue {
-  background-color: var(--pf-pill-outline-blue-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-outline-blue-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-outline-blue-text);
-  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-blue-border);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-pill-outline-blue-border) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
 }
 .pill--outline-blue > .icon {
   color: var(--pf-pill-outline-blue-icon);
@@ -6786,9 +6804,9 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-outline-blue-close-hover-bg);
 }
 .pill--outline-green {
-  background-color: var(--pf-pill-outline-green-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-outline-green-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-outline-green-text);
-  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-green-border);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-pill-outline-green-border) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
 }
 .pill--outline-green > .icon {
   color: var(--pf-pill-outline-green-icon);
@@ -6804,9 +6822,9 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-outline-green-close-hover-bg);
 }
 .pill--outline-gray {
-  background-color: var(--pf-pill-outline-gray-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-outline-gray-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-outline-gray-text);
-  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-gray-border);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-pill-outline-gray-border) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
 }
 .pill--outline-gray > .icon {
   color: var(--pf-pill-outline-gray-icon);
@@ -6822,9 +6840,9 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-outline-gray-close-hover-bg);
 }
 .pill--outline-pink {
-  background-color: var(--pf-pill-outline-pink-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-outline-pink-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-outline-pink-text);
-  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-pink-border);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-pill-outline-pink-border) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
 }
 .pill--outline-pink > .icon {
   color: var(--pf-pill-outline-pink-icon);
@@ -6840,9 +6858,9 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-outline-pink-close-hover-bg);
 }
 .pill--outline-orange {
-  background-color: var(--pf-pill-outline-orange-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-outline-orange-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-outline-orange-text);
-  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-orange-border);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-pill-outline-orange-border) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
 }
 .pill--outline-orange > .icon {
   color: var(--pf-pill-outline-orange-icon);
@@ -6858,9 +6876,9 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-outline-orange-close-hover-bg);
 }
 .pill--outline-teal {
-  background-color: var(--pf-pill-outline-teal-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-outline-teal-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-outline-teal-text);
-  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-teal-border);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-pill-outline-teal-border) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
 }
 .pill--outline-teal > .icon {
   color: var(--pf-pill-outline-teal-icon);
@@ -6876,9 +6894,9 @@ body div[class*=select__single-value] {
   background-color: var(--pf-pill-outline-teal-close-hover-bg);
 }
 .pill--outline-soft {
-  background-color: var(--pf-pill-outline-soft-bg);
+  background-color: color-mix(in srgb, var(--pf-pill-outline-soft-bg) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
   color: var(--pf-pill-outline-soft-text);
-  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-soft-border);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-pill-outline-soft-border) var(--pill-shade-mix, 100%), var(--pill-shade-target, white));
 }
 .pill--outline-soft > .icon {
   color: var(--pf-pill-outline-soft-icon);
@@ -6914,6 +6932,190 @@ body div[class*=select__single-value] {
   transition: color 0.15s ease, background-color 0.15s ease;
 }
 
+:root,
+:root [data-theme=light] {
+  --pf-alert-bordered-warning-bg: var(--pf-yellow-color-150);
+  --pf-alert-bordered-warning-border: var(--pf-yellow-color-400);
+  --pf-alert-bordered-warning-text: var(--pf-yellow-color-600);
+  --pf-alert-bordered-warning-icon: var(--pf-yellow-color-400);
+  --pf-alert-bordered-info-bg: var(--pf-blue-color-150);
+  --pf-alert-bordered-info-border: var(--pf-secondary-color-400);
+  --pf-alert-bordered-info-text: var(--pf-secondary-color-500);
+  --pf-alert-bordered-info-icon: var(--pf-secondary-color-400);
+  --pf-alert-bordered-success-bg: var(--pf-green-color-150);
+  --pf-alert-bordered-success-border: var(--pf-green-color-450);
+  --pf-alert-bordered-success-text: var(--pf-green-color-600);
+  --pf-alert-bordered-success-icon: var(--pf-green-color-500);
+  --pf-alert-bordered-error-bg: var(--pf-red-color-150);
+  --pf-alert-bordered-error-border: var(--pf-red-color-250);
+  --pf-alert-bordered-error-text: var(--pf-red-color-500);
+  --pf-alert-bordered-error-icon: var(--pf-red-color-450);
+}
+
+:root [data-theme=dark] {
+  --pf-alert-bordered-warning-bg: var(--pf-yellow-color-800);
+  --pf-alert-bordered-warning-border: var(--pf-yellow-color-500);
+  --pf-alert-bordered-warning-text: var(--pf-yellow-color-300);
+  --pf-alert-bordered-warning-icon: var(--pf-yellow-color-300);
+  --pf-alert-bordered-info-bg: var(--pf-blue-color-700);
+  --pf-alert-bordered-info-border: var(--pf-secondary-color-500);
+  --pf-alert-bordered-info-text: var(--pf-secondary-color-250);
+  --pf-alert-bordered-info-icon: var(--pf-secondary-color-250);
+  --pf-alert-bordered-success-bg: var(--pf-green-color-800);
+  --pf-alert-bordered-success-border: var(--pf-green-color-600);
+  --pf-alert-bordered-success-text: var(--pf-green-color-300);
+  --pf-alert-bordered-success-icon: var(--pf-green-color-300);
+  --pf-alert-bordered-error-bg: var(--pf-red-color-700);
+  --pf-alert-bordered-error-border: var(--pf-red-color-500);
+  --pf-alert-bordered-error-text: var(--pf-red-color-300);
+  --pf-alert-bordered-error-icon: var(--pf-red-color-300);
+}
+
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--pf-spacing-md);
+  padding: var(--pf-spacing-2xl);
+  border-radius: var(--pf-border-radius-md);
+  background-color: var(--pf-semantic-background-secondary);
+  font-family: var(--pf-font-family);
+  box-shadow: 0 4px 6px -4px var(--pf-semantic-elevation-1), 0 10px 15px -3px var(--pf-semantic-elevation-1);
+}
+.alert--small {
+  padding: var(--pf-spacing-sm);
+  align-items: center;
+  box-shadow: none;
+}
+.alert--bordered {
+  border: 1px solid var(--alert-border-color);
+}
+.alert--soft-warning > .icon {
+  color: var(--pf-semantic-utility-warning-default);
+}
+.alert--soft-info > .icon {
+  color: var(--pf-semantic-utility-info-default);
+}
+.alert--soft-success > .icon {
+  color: var(--pf-semantic-utility-success-default);
+}
+.alert--soft-error > .icon {
+  color: var(--pf-semantic-utility-error-default);
+}
+.alert--bordered-warning {
+  --alert-border-color: var(--pf-alert-bordered-warning-border);
+}
+.alert--bordered-warning > .icon {
+  color: var(--pf-alert-bordered-warning-icon);
+}
+.alert--bordered-warning .alert__title {
+  color: var(--pf-alert-bordered-warning-text);
+}
+.alert--tinted.alert--bordered-warning {
+  background-color: var(--pf-alert-bordered-warning-bg);
+}
+.alert--bordered-info {
+  --alert-border-color: var(--pf-alert-bordered-info-border);
+}
+.alert--bordered-info > .icon {
+  color: var(--pf-alert-bordered-info-icon);
+}
+.alert--bordered-info .alert__title {
+  color: var(--pf-alert-bordered-info-text);
+}
+.alert--tinted.alert--bordered-info {
+  background-color: var(--pf-alert-bordered-info-bg);
+}
+.alert--bordered-success {
+  --alert-border-color: var(--pf-alert-bordered-success-border);
+}
+.alert--bordered-success > .icon {
+  color: var(--pf-alert-bordered-success-icon);
+}
+.alert--bordered-success .alert__title {
+  color: var(--pf-alert-bordered-success-text);
+}
+.alert--tinted.alert--bordered-success {
+  background-color: var(--pf-alert-bordered-success-bg);
+}
+.alert--bordered-error {
+  --alert-border-color: var(--pf-alert-bordered-error-border);
+}
+.alert--bordered-error > .icon {
+  color: var(--pf-alert-bordered-error-icon);
+}
+.alert--bordered-error .alert__title {
+  color: var(--pf-alert-bordered-error-text);
+}
+.alert--tinted.alert--bordered-error {
+  background-color: var(--pf-alert-bordered-error-bg);
+}
+.alert > .icon {
+  flex-shrink: 0;
+}
+.alert__body {
+  flex: 1;
+  min-width: 0;
+}
+.alert__title {
+  font-size: var(--pf-font-size-md);
+  font-weight: var(--pf-font-weight-semibold);
+  line-height: 20px;
+  color: var(--pf-semantic-font-regular);
+  margin-bottom: var(--pf-spacing-xxs);
+}
+.alert__message {
+  font-size: var(--pf-font-size-md);
+  font-weight: var(--pf-font-weight-regular);
+  line-height: 20px;
+  color: var(--pf-semantic-font-regular);
+}
+.alert__message a {
+  color: var(--pf-semantic-font-link);
+  text-decoration: underline;
+}
+.alert--has-title .alert__message {
+  color: var(--pf-semantic-font-soft);
+}
+.alert__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--pf-spacing-sm);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.alert__action {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: var(--pf-font-family);
+  font-size: var(--pf-font-size-md);
+  font-weight: var(--pf-font-weight-medium);
+  line-height: 20px;
+  color: var(--pf-semantic-font-link);
+  padding: 0;
+  white-space: nowrap;
+}
+.alert__action:hover {
+  text-decoration: underline;
+}
+.alert__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: var(--pf-spacing-xxs);
+  border-radius: var(--pf-border-radius-xs);
+  color: var(--pf-semantic-font-soft);
+  line-height: 1;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.alert__close:hover {
+  color: var(--pf-semantic-font-regular);
+}
+
 @keyframes moveBg {
   0% {
     transform: translateX(0);

package/lib/index.d.ts

@@ -22,6 +22,32 @@ declare const Row: ({ ref: _ref, ...rest }: RowProps) => react_jsx_runtime.JSX.E
 
 declare const Col: ({ ref: _ref, ...rest }: ColProps) => react_jsx_runtime.JSX.Element;
 
+type AlertType = 'warning' | 'info' | 'success' | 'error';
+type AlertVariant = 'soft' | 'bordered';
+type AlertSize = 'small' | 'large';
+interface AlertProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Semantic type — controls the icon and accent color */
+    type: AlertType;
+    /** Visual style: soft (subtle bg) or bordered (colored border) */
+    variant?: AlertVariant;
+    /** Size: large (banner) or small (compact inline) */
+    size?: AlertSize;
+    /** When true, the bordered variant uses a type-specific tinted background instead of surface-secondary */
+    tinted?: boolean;
+    /** Optional title — when provided, renders above the message */
+    title?: string;
+    /** Alert body / message content */
+    children: React$1.ReactNode;
+    /** Optional action button label */
+    actionText?: string;
+    /** Called when the action button is clicked */
+    onAction?: () => void;
+    /** Called when the close button is clicked — omit to hide the close button */
+    onClose?: () => void;
+    /** Accessible label for the close button (for i18n) */
+    closeAriaLabel?: string;
+}
+
 /** Customizable text for form Label. */
 interface FormLabelText {
     /** Text appended to aria-label for required fields. Default: "(required)" */
@@ -249,6 +275,10 @@ interface PillProps extends React$1.HTMLAttributes<HTMLDivElement> {
     iconRight?: IconName;
     /** When true, renders a small colored dot indicator before the content */
     dot?: boolean;
+    /** 1-based shade index within a group. Used with shadeCount to vary background lightness via color-mix(). */
+    shade?: number;
+    /** Total shades in the group. Background blends lighter (white) below midpoint, darker (black) above. */
+    shadeCount?: number;
     /** When provided, renders a close button that calls this handler */
     onClose?: () => void;
     /** Accessible label for the close button (for i18n) */
@@ -852,7 +882,9 @@ type MenuProps = {
 };
 declare function Menu({ children, className, ...rest }: MenuProps): react_jsx_runtime.JSX.Element;
 
-declare const Pill: ({ children, color, size, variant, type, iconLeft, iconRight, dot, onClose, closeAriaLabel, className, ...rest }: PillProps) => react_jsx_runtime.JSX.Element;
+declare const Pill: ({ children, color, size, variant, type, iconLeft, iconRight, dot, shade, shadeCount, onClose, closeAriaLabel, className, style, ...rest }: PillProps) => react_jsx_runtime.JSX.Element;
+
+declare const Alert: ({ type, variant, size, tinted, title, children, actionText, onAction, onClose, closeAriaLabel, className, ...rest }: AlertProps) => react_jsx_runtime.JSX.Element;
 
 type BadgeSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 interface BadgeProps {
@@ -1159,4 +1191,4 @@ interface TruncateProps {
 
 declare const Truncate: ({ numLines, tooltipOptions, children, ...rest }: TruncateProps) => react_jsx_runtime.JSX.Element;
 
-export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, ConfirmationModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, InputDateRangePicker, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, LabeledSelect as SelectInput, type SelectOption, type SelectText, SingleInputDatePicker, SingleInputDateTimePicker, Skeleton, Stepper, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };
+export { Alert, Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, ConfirmationModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, InputDateRangePicker, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, LabeledSelect as SelectInput, type SelectOption, type SelectText, SingleInputDatePicker, SingleInputDateTimePicker, Skeleton, Stepper, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };