@itwin/itwinui-css 1.5.5 → 1.7.0

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 (50) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/css/alert.css +1 -1
  3. package/css/all.css +1 -1
  4. package/css/anchor.css +1 -1
  5. package/css/avatar.css +1 -1
  6. package/css/backdrop.css +1 -1
  7. package/css/badge.css +1 -1
  8. package/css/blockquote.css +1 -1
  9. package/css/breadcrumbs.css +1 -1
  10. package/css/button.css +1 -1
  11. package/css/carousel.css +1 -1
  12. package/css/checkbox.css +1 -1
  13. package/css/code.css +1 -1
  14. package/css/color-picker.css +1 -1
  15. package/css/date-picker.css +1 -1
  16. package/css/dialog.css +1 -1
  17. package/css/expandable-block.css +1 -1
  18. package/css/fieldset.css +1 -1
  19. package/css/file-upload.css +1 -1
  20. package/css/footer.css +1 -1
  21. package/css/global.css +1 -1
  22. package/css/header.css +1 -1
  23. package/css/information-panel.css +1 -1
  24. package/css/input.css +1 -1
  25. package/css/keyboard.css +1 -1
  26. package/css/location-marker.css +1 -1
  27. package/css/menu.css +1 -1
  28. package/css/non-ideal-state.css +1 -1
  29. package/css/progress-indicator.css +1 -1
  30. package/css/radio-tile.css +1 -1
  31. package/css/radio.css +1 -1
  32. package/css/select.css +1 -1
  33. package/css/side-navigation.css +1 -1
  34. package/css/skip-to-content.css +1 -1
  35. package/css/slider.css +1 -1
  36. package/css/stepper.css +1 -1
  37. package/css/surface.css +1 -1
  38. package/css/table.css +1 -1
  39. package/css/tabs.css +1 -1
  40. package/css/tag.css +1 -1
  41. package/css/text.css +1 -1
  42. package/css/tile.css +1 -1
  43. package/css/time-picker.css +1 -1
  44. package/css/toast.css +1 -1
  45. package/css/toggle-switch.css +1 -1
  46. package/css/tooltip.css +1 -1
  47. package/css/tree.css +1 -1
  48. package/css/utils.css +1 -1
  49. package/css/workflow-diagram.css +1 -1
  50. package/package.json +3 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,65 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 85af52c6: Add small size toggle switch option using `size` prop as follows: `<ToggleSwitch size='small' />`
8
+ - 1b541699: Added a new FileUploadCard component which serves as a default UI for when a single file is uploaded. This can also be used as a child of FileUpload
9
+
10
+ ```jsx
11
+ <FileUploadCard />
12
+ ```
13
+
14
+ ```jsx
15
+ const [files, setFiles] = React.useState<File[]>([]);
16
+
17
+ <FileUpload
18
+ onFileDropped={(files) => {
19
+ setFiles(files);
20
+ }}
21
+ >
22
+ <FileUploadCard files={files} onFilesChange={(files) => setFiles(files)} />
23
+ </FileUpload>
24
+ ```
25
+
26
+ ### Patch Changes
27
+
28
+ - 62c4a6da: Fixed issue where checkbox / radio border appeared above `:focus` outline.
29
+
30
+ ## 1.6.0
31
+
32
+ ### Minor Changes
33
+
34
+ - 2397ee0c: All styles will now be scoped and always take preference over previous major versions (`@itwin/itwinui-react`@`1.x`).
35
+
36
+ This enables incremental adoption of `@itwin/itwinui-react`@`2.x` for some parts of the app, while still using `1.x` for the rest of the app.
37
+
38
+ To use this feature, make sure that all parts that use v1 are updated to `@itwin/itwinui-css@0.63.2`, and then wrap the v2 parts in `ThemeProvider`:
39
+
40
+ ```html
41
+ <body>
42
+ <!-- rest of your app (v1) -->
43
+
44
+ <ThemeProvider>
45
+ <!-- new UI built using v2 -->
46
+ </ThemeProvider>
47
+ </body>
48
+ ```
49
+
50
+ For packages, there is a new theme `'inherit'`. Setting this enables scoping without forcing the default light theme. When the app eventually updates to v2, it can use its own `ThemeProvider` with any theme, and the components inside your package will inherit the app's theme.
51
+
52
+ ```html
53
+ <body>
54
+ <!-- rest of the app (maybe v1) -->
55
+
56
+ <!-- inside your package ⬇️ -->
57
+ <ThemeProvider theme='inherit'>
58
+ <!-- v2 components inside package -->
59
+ </ThemeProvider>
60
+ </bod
61
+ ```
62
+
3
63
  ## 1.5.5
4
64
 
5
65
  ### Patch Changes
package/css/alert.css CHANGED
@@ -2,4 +2,4 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .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}.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)}.iui-alert:where([data-iui-status=informational])::selection,.iui-alert:where([data-iui-status=informational]) ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}.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))}.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){.iui-alert:where([data-iui-status=informational]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}}.iui-alert:where([data-iui-status=informational]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=informational]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=informational]) .iui-alert-link:hover{color:var(--iui-color-text-informational-hover)}.iui-alert:where([data-iui-status=informational]) .iui-alert-button:focus{outline-color:var(--iui-color-text-informational)}.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)}.iui-alert:where([data-iui-status=positive])::selection,.iui-alert:where([data-iui-status=positive]) ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.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))}.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){.iui-alert:where([data-iui-status=positive]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}}.iui-alert:where([data-iui-status=positive]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=positive]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=positive]) .iui-alert-link:hover{color:var(--iui-color-text-positive-hover)}.iui-alert:where([data-iui-status=positive]) .iui-alert-button:focus{outline-color:var(--iui-color-text-positive)}.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)}.iui-alert:where([data-iui-status=warning])::selection,.iui-alert:where([data-iui-status=warning]) ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.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))}.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){.iui-alert:where([data-iui-status=warning]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}}.iui-alert:where([data-iui-status=warning]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=warning]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=warning]) .iui-alert-link:hover{color:var(--iui-color-text-warning-hover)}.iui-alert:where([data-iui-status=warning]) .iui-alert-button:focus{outline-color:var(--iui-color-text-warning)}.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)}.iui-alert:where([data-iui-status=negative])::selection,.iui-alert:where([data-iui-status=negative]) ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.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))}.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){.iui-alert:where([data-iui-status=negative]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}}.iui-alert:where([data-iui-status=negative]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=negative]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=negative]) .iui-alert-link:hover{color:var(--iui-color-text-negative-hover)}.iui-alert:where([data-iui-status=negative]) .iui-alert-button:focus{outline-color:var(--iui-color-text-negative)}.iui-alert:where([data-iui-variant=sticky]){border-radius:0;position:sticky;top:0;left:0}.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}.iui-alert-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-alert-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.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)}.iui-alert-button:where(:focus){outline-offset:-1px;outline-width:1px}.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)}.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){.iui-alert-icon{fill:CanvasText}}.iui-alert-message{margin:var(--iui-size-s)var(--iui-size-m)}.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}.iui-alert-link:hover{text-decoration:none}.iui-alert-button-icon{display:inline-flex}.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}
5
+ :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}