@itwin/itwinui-css 1.8.0 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 1.10.0
+
+### Minor Changes
+
+- [#1106](https://github.com/iTwin/iTwinUI/pull/1106): Added new List and ListItem components.
+
+  ```jsx
+  <List>
+    <ListItem>item 1</ListItem>
+    <ListItem>item 2</ListItem>
+    <ListItem>item 3</ListItem>
+  </List>
+  ```
+
+## 1.9.0
+
+### Minor Changes
+
+- c8f6a8dd: Add surface component with included layout for header, body, and button footer.
+
+### Patch Changes
+
+- 3ad916b2: Allows alert messages to break when words are long.
+- f1e0d8d6: Allows toast messages to break when words are long.
+
 ## 1.8.0
 
 ### Minor Changes

package/css/alert.css

@@ -2,4 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-:where(.iui-root, [data-iui-theme]) .iui-alert{vertical-align:baseline;--_iui-alert-border-color:var(--iui-color-border);border-radius:var(--iui-border-radius-1);color:var(--iui-color-text);background-color:var(--iui-color-background);border:none;border:1px solid var(--_iui-alert-border-color);box-shadow:inset var(--iui-size-2xs)0 0 var(--_iui-alert-border-color);align-items:center;margin:0;padding:0;display:flex}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]){--_iui-alert-border-color:var(--iui-color-border-informational);--_iui-alert-icon-color:var(--iui-color-icon-informational)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational])::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link{color:var(--iui-color-text-informational);-webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link:hover{color:var(--iui-color-text-informational-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-button:focus{outline-color:var(--iui-color-text-informational)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]){--_iui-alert-border-color:var(--iui-color-border-positive);--_iui-alert-icon-color:var(--iui-color-icon-positive)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive])::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link{color:var(--iui-color-text-positive);-webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link:hover{color:var(--iui-color-text-positive-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-button:focus{outline-color:var(--iui-color-text-positive)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]){--_iui-alert-border-color:var(--iui-color-border-warning);--_iui-alert-icon-color:var(--iui-color-icon-warning)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning])::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link{color:var(--iui-color-text-warning);-webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link:hover{color:var(--iui-color-text-warning-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-button:focus{outline-color:var(--iui-color-text-warning)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]){--_iui-alert-border-color:var(--iui-color-border-negative);--_iui-alert-icon-color:var(--iui-color-icon-negative)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative])::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link{color:var(--iui-color-text-negative);-webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link:hover{color:var(--iui-color-text-negative-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-button:focus{outline-color:var(--iui-color-text-negative)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-variant=sticky]){border-radius:0;position:sticky;top:0;left:0}:where(.iui-root, [data-iui-theme]) .iui-alert-button{vertical-align:baseline;vertical-align:middle;border-radius:var(--iui-border-radius-1);font-family:inherit;line-height:1.2;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);-webkit-user-select:none;user-select:none;cursor:pointer;white-space:nowrap;border:none;border:1px solid var(--_iui-button-border-color);background:var(--_iui-button-background-color);color:var(--_iui-button-text-color);justify-content:center;align-items:center;gap:var(--_iui-button-gap);min-height:var(--_iui-button-min-height);min-width:var(--_iui-button-min-height);padding:0;padding-block:var(--_iui-button-padding-block);padding-inline:var(--_iui-button-padding-inline);transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out;-webkit-tap-highlight-color:transparent;--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon);--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);--_iui-button-padding-inline:var(--iui-size-2xs);margin:0 0 0 auto;margin-right:var(--iui-size-xs);flex-shrink:0;text-decoration:none;display:inline-flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-alert-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-alert-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}:where(.iui-root, [data-iui-theme]) .iui-alert-button:where(:hover,:active){--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-transparent-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert-button:where(:focus){outline-offset:-1px;outline-width:1px}:where(.iui-root, [data-iui-theme]) .iui-alert-button:where([disabled],:disabled,[aria-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon-disabled)}:where(.iui-root, [data-iui-theme]) .iui-alert-icon{width:var(--iui-size-m);height:var(--iui-size-m);margin-left:var(--iui-size-m);fill:var(--_iui-alert-icon-color,var(--iui-color-icon-muted));flex-shrink:0;display:flex}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-alert-icon{fill:CanvasText}}:where(.iui-root, [data-iui-theme]) .iui-alert-message{margin:var(--iui-size-s)var(--iui-size-m)}:where(.iui-root, [data-iui-theme]) .iui-alert-link{border-radius:var(--iui-border-radius-1);cursor:pointer;margin-left:var(--iui-size-xs);-webkit-user-select:none;user-select:none;white-space:nowrap;text-decoration:underline}:where(.iui-root, [data-iui-theme]) .iui-alert-link:hover{text-decoration:none}:where(.iui-root, [data-iui-theme]) .iui-alert-button-icon{display:inline-flex}:where(.iui-root, [data-iui-theme]) .iui-alert-button-icon svg{width:var(--iui-size-m);height:var(--iui-size-m);transition:fill var(--iui-duration-1)ease-out;fill:var(--_iui-button-icon-fill,currentColor);flex-shrink:0;display:flex}
+:where(.iui-root, [data-iui-theme]) .iui-alert{vertical-align:baseline;--_iui-alert-border-color:var(--iui-color-border);border-radius:var(--iui-border-radius-1);color:var(--iui-color-text);background-color:var(--iui-color-background);border:none;border:1px solid var(--_iui-alert-border-color);box-shadow:inset var(--iui-size-2xs)0 0 var(--_iui-alert-border-color);align-items:center;margin:0;padding:0;display:flex}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]){--_iui-alert-border-color:var(--iui-color-border-informational);--_iui-alert-icon-color:var(--iui-color-icon-informational)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational])::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link{color:var(--iui-color-text-informational);-webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link:hover{color:var(--iui-color-text-informational-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-button:focus{outline-color:var(--iui-color-text-informational)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]){--_iui-alert-border-color:var(--iui-color-border-positive);--_iui-alert-icon-color:var(--iui-color-icon-positive)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive])::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link{color:var(--iui-color-text-positive);-webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link:hover{color:var(--iui-color-text-positive-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-button:focus{outline-color:var(--iui-color-text-positive)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]){--_iui-alert-border-color:var(--iui-color-border-warning);--_iui-alert-icon-color:var(--iui-color-icon-warning)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning])::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link{color:var(--iui-color-text-warning);-webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link:hover{color:var(--iui-color-text-warning-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-button:focus{outline-color:var(--iui-color-text-warning)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]){--_iui-alert-border-color:var(--iui-color-border-negative);--_iui-alert-icon-color:var(--iui-color-icon-negative)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative])::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link{color:var(--iui-color-text-negative);-webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link:hover{color:var(--iui-color-text-negative-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-button:focus{outline-color:var(--iui-color-text-negative)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-variant=sticky]){border-radius:0;position:sticky;top:0;left:0}:where(.iui-root, [data-iui-theme]) .iui-alert-button{vertical-align:baseline;vertical-align:middle;border-radius:var(--iui-border-radius-1);font-family:inherit;line-height:1.2;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);-webkit-user-select:none;user-select:none;cursor:pointer;white-space:nowrap;border:none;border:1px solid var(--_iui-button-border-color);background:var(--_iui-button-background-color);color:var(--_iui-button-text-color);justify-content:center;align-items:center;gap:var(--_iui-button-gap);min-height:var(--_iui-button-min-height);min-width:var(--_iui-button-min-height);padding:0;padding-block:var(--_iui-button-padding-block);padding-inline:var(--_iui-button-padding-inline);transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out;-webkit-tap-highlight-color:transparent;--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon);--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);--_iui-button-padding-inline:var(--iui-size-2xs);margin:0 0 0 auto;margin-right:var(--iui-size-xs);flex-shrink:0;text-decoration:none;display:inline-flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-alert-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-alert-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}:where(.iui-root, [data-iui-theme]) .iui-alert-button:where(:hover,:active){--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-transparent-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert-button:where(:focus){outline-offset:-1px;outline-width:1px}:where(.iui-root, [data-iui-theme]) .iui-alert-button:where([disabled],:disabled,[aria-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon-disabled)}:where(.iui-root, [data-iui-theme]) .iui-alert-icon{width:var(--iui-size-m);height:var(--iui-size-m);margin-left:var(--iui-size-m);fill:var(--_iui-alert-icon-color,var(--iui-color-icon-muted));flex-shrink:0;display:flex}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-alert-icon{fill:CanvasText}}:where(.iui-root, [data-iui-theme]) .iui-alert-message{margin:var(--iui-size-s)var(--iui-size-m);word-break:normal;overflow-wrap:anywhere}:where(.iui-root, [data-iui-theme]) .iui-alert-link{border-radius:var(--iui-border-radius-1);cursor:pointer;margin-left:var(--iui-size-xs);-webkit-user-select:none;user-select:none;white-space:nowrap;text-decoration:underline}:where(.iui-root, [data-iui-theme]) .iui-alert-link:hover{text-decoration:none}:where(.iui-root, [data-iui-theme]) .iui-alert-button-icon{display:inline-flex}:where(.iui-root, [data-iui-theme]) .iui-alert-button-icon svg{width:var(--iui-size-m);height:var(--iui-size-m);transition:fill var(--iui-duration-1)ease-out;fill:var(--_iui-button-icon-fill,currentColor);flex-shrink:0;display:flex}