@dbcdk/react-components 0.0.95 → 0.0.97

package/dist/tanstack.css

@@ -0,0 +1,1267 @@
+/* src/components/table/components/column-resizer/ColumnResizer.module.css */
+.ColumnResizer_resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 10px;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  z-index: 20;
+}
+.ColumnResizer_resizer::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  width: 1px;
+  height: 60%;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: var(--opac-bg-default);
+}
+
+/* src/components/pagination/Pagination.module.css */
+.Pagination_container2 {
+  display: flex;
+  gap: var(--spacing-xxs);
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  max-width: 100%;
+  overflow-x: auto;
+}
+.Pagination_ellipsisButton2 {
+  display: none;
+}
+@media (min-width: 480px) {
+  .Pagination_ellipsisButton2 {
+    display: contents;
+  }
+}
+.Pagination_range2 {
+  min-width: 110px;
+  text-align: center;
+  font-size: var(--font-size-xs);
+  padding: 0 var(--spacing-xxs);
+}
+
+/* src/components/overlay/tooltip/Tooltip.module.css */
+.Tooltip_container2 {
+  display: contents;
+}
+.Tooltip_trigger2 {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+}
+.Tooltip_trigger2:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--border-radius-default);
+}
+.Tooltip_bubble2 {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  pointer-events: none;
+  background: var(--color-fg-default);
+  color: var(--color-fg-on-strong);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-tight);
+  padding: var(--spacing-xxs) var(--spacing-sm);
+  border-radius: var(--border-radius-default);
+  max-width: min(360px, calc(100vw - 16px));
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22));
+  opacity: 0;
+  visibility: hidden;
+  transform: translate3d(0, 0, 0);
+  transition:
+    opacity var(--transition-fast),
+    transform var(--transition-fast),
+    visibility 0s linear var(--transition-fast);
+}
+.Tooltip_bubble2[data-open=true] {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity var(--transition-fast),
+    transform var(--transition-fast),
+    visibility 0s;
+}
+.Tooltip_bubble2[data-placement=top] {
+  transform: translate3d(0, -6px, 0);
+}
+.Tooltip_bubble2[data-placement=bottom] {
+  transform: translate3d(0, 6px, 0);
+}
+.Tooltip_bubble2[data-placement=left] {
+  transform: translate3d(-6px, 0, 0);
+}
+.Tooltip_bubble2[data-placement=right] {
+  transform: translate3d(6px, 0, 0);
+}
+.Tooltip_bubble2[data-open=true][data-placement=top],
+.Tooltip_bubble2[data-open=true][data-placement=bottom],
+.Tooltip_bubble2[data-open=true][data-placement=left],
+.Tooltip_bubble2[data-open=true][data-placement=right] {
+  transform: translate3d(0, 0, 0);
+}
+.Tooltip_bubble2 svg {
+  height: 20px;
+  width: 20px;
+  flex: 0 0 auto;
+}
+@media (prefers-reduced-motion: reduce) {
+  .Tooltip_bubble2 {
+    transition: none;
+    transform: none;
+  }
+}
+
+/* src/components/button/Button.module.css */
+.Button_button2 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: 1;
+  height: var(--component-size-md);
+  min-block-size: var(--component-size-md);
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
+  border-width: var(--border-width-thin, 1px);
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--border-radius-default);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+.Button_buttonLink2 {
+  color: inherit;
+  text-decoration: none;
+  user-select: default;
+}
+.Button_button2:hover {
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+.Button_button2:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+.Button_round2 {
+  border-radius: 100%;
+}
+.Button_rounded2 {
+  border-radius: var(--border-radius-rounded);
+}
+.Button_button2:disabled,
+.Button_button2[aria-disabled=true] {
+  cursor: not-allowed;
+  pointer-events: none;
+  background-color: var(--color-disabled-bg);
+  border-color: transparent;
+  color: var(--color-disabled-fg);
+  opacity: 0.5;
+}
+.Button_link2 {
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  color: var(--color-link);
+  transition: color var(--transition-fast) var(--ease-standard), text-decoration-color var(--transition-fast) var(--ease-standard);
+  text-underline-offset: 0.15em;
+}
+.Button_link2:focus-visible {
+  outline: none;
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+}
+.Button_button2 svg,
+.Button_icon2 svg {
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
+}
+.Button_icon2 {
+  display: inline-flex;
+}
+.Button_button2.Button_xs2 {
+  height: var(--component-size-xs);
+  min-block-size: var(--component-size-xs);
+  padding-inline: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+.Button_button2.Button_sm2 {
+  height: var(--component-size-sm);
+  min-block-size: var(--component-size-sm);
+  padding-inline: var(--spacing-xs);
+}
+.Button_button2.Button_sm2 svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+.Button_button2.Button_lg2 {
+  height: var(--component-size-lg);
+  font-size: var(--font-size-md);
+  min-block-size: var(--component-size-lg);
+  padding-inline: var(--spacing-lg);
+}
+.Button_button2.Button_fullWidth2 {
+  width: 100%;
+}
+.Button_primary2 {
+  background-color: var(--button-bg-primary);
+  color: var(--button-fg-primary);
+  border-color: transparent;
+}
+.Button_primary2:hover {
+  background-color: var(--button-bg-primary-hover);
+}
+.Button_secondary2 {
+  background-color: var(--button-bg-secondary);
+  color: var(--button-fg-secondary);
+  border-color: var(--button-border-secondary);
+}
+.Button_secondary2:hover {
+  background-color: var(--button-bg-secondary-hover);
+  border-color: var(--color-border-strong);
+}
+.Button_default2 {
+  background-color: var(--color-bg-toolbar);
+  color: var(--color-fg-default);
+  border-color: transparent;
+}
+.Button_default2:hover {
+  background-color: var(--color-bg-toolbar-hover);
+  border-color: transparent;
+}
+.Button_default2:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+.Button_outlined2 {
+  background-color: transparent;
+  color: var(--color-fg-default);
+  border-width: var(--border-width-thin, 1px);
+  border-style: solid;
+  border-color: var(--color-border-default);
+}
+.Button_outlined2:not(.Button_active2):hover {
+  background-color: var(--color-bg-hover-subtle);
+  border-color: var(--color-border-strong);
+}
+.Button_success2 {
+  background-color: transparent;
+  color: var(--color-status-success-fg);
+  border-color: var(--color-status-success-border);
+}
+.Button_success2 .Button_icon2 {
+  color: var(--color-status-success);
+}
+.Button_success2:hover {
+  border-color: var(--color-fg-default);
+}
+.Button_danger2 {
+  background-color: transparent;
+  color: var(--color-status-error-fg);
+  border-color: var(--color-status-error-border);
+}
+.Button_danger2 .Button_icon2 {
+  color: var(--color-status-error);
+}
+.Button_danger2:hover {
+  border-color: var(--color-fg-default);
+}
+.Button_button2.Button_inline2 {
+  background-color: transparent;
+  border-color: transparent;
+  padding: var(--spacing-xxs);
+  min-block-size: unset;
+  block-size: unset;
+  height: unset;
+  color: var(--color-fg-default);
+}
+.Button_button2.Button_inline2:hover {
+  background-color: var(--opac-bg-light);
+}
+.Button_button2.Button_inline2:focus-visible {
+  outline: none;
+  background-color: var(--opac-bg-light);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+.Button_active2 {
+  background-color: var(--button-bg-primary);
+  color: var(--button-fg-primary);
+  border-color: var(--color-border-selected);
+}
+.Button_inline2.Button_active2 {
+  color: var(--button-bg-primary);
+}
+.Button_active2:hover {
+  background-color: var(--button-bg-primary-hover);
+}
+.Button_inline2.Button_active2:hover {
+  color: var(--button-bg-primary-hover);
+}
+
+/* src/components/menu/Menu.module.css */
+.Menu_container2 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+}
+.Menu_row2 {
+  display: block;
+}
+.Menu_interactive2 {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--spacing-xs);
+  inline-size: 100%;
+  text-align: start;
+  text-decoration: none;
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-md);
+  margin-block: var(--spacing-2xs);
+  min-block-size: var(--component-size-sm);
+  background: transparent;
+  border: none;
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--color-fg-default);
+  cursor: pointer;
+  border-radius: var(--border-radius-md);
+  transition: background-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
+}
+.Menu_interactive2 > :last-child {
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.Menu_interactiveChild2 {
+  display: block;
+  inline-size: 100%;
+  border-radius: var(--border-radius-md);
+}
+.Menu_row2 > .Menu_interactiveChild2 {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-md);
+  margin-block: var(--spacing-2xs);
+  min-block-size: var(--component-size-sm);
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+}
+.Menu_row2 .container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  inline-size: 100%;
+  cursor: pointer;
+}
+.Menu_row2 .label {
+  flex: 1 1 auto;
+  cursor: pointer;
+}
+.Menu_row2 .label * {
+  cursor: pointer;
+}
+.Menu_interactive2:hover:not(.Menu_selected2),
+.Menu_row2:hover > .Menu_interactiveChild2:not(.Menu_selected2) {
+  background-color: var(--color-bg-toolbar-hover);
+}
+.Menu_interactive2:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+.Menu_row2:focus-within > .Menu_interactiveChild2 {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+.Menu_active2,
+.Menu_interactive2.Menu_active2,
+.Menu_row2 > .Menu_interactiveChild2.Menu_active2 {
+  background-color: var(--color-bg-toolbar-hover);
+}
+.Menu_selected2,
+.Menu_interactive2[aria-selected=true],
+.Menu_row2 > .Menu_interactiveChild2.Menu_selected2,
+.Menu_row2 > .Menu_interactiveChild2[aria-selected=true] {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+.Menu_selected2:hover,
+.Menu_interactive2.Menu_selected2:hover,
+.Menu_interactive2[aria-selected=true]:hover,
+.Menu_row2:hover > .Menu_interactiveChild2.Menu_selected2,
+.Menu_row2:hover > .Menu_interactiveChild2[aria-selected=true],
+.Menu_active2.Menu_selected2,
+.Menu_interactive2.Menu_active2.Menu_selected2,
+.Menu_interactive2.Menu_active2[aria-selected=true],
+.Menu_row2 > .Menu_interactiveChild2.Menu_active2.Menu_selected2,
+.Menu_row2 > .Menu_interactiveChild2.Menu_active2[aria-selected=true] {
+  background-color: var(--color-bg-selected-hover);
+}
+.Menu_interactive2[aria-checked=true],
+.Menu_row2 > .Menu_interactiveChild2[aria-checked=true] {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+.Menu_itemDanger2 {
+  color: var(--color-status-error);
+}
+.Menu_itemDanger2 svg {
+  color: inherit;
+}
+.Menu_interactive2[aria-disabled=true],
+.Menu_interactive2:disabled,
+.Menu_row2 > .Menu_interactiveChild2[aria-disabled=true] {
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.Menu_interactive2 svg,
+.Menu_interactiveChild2 svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  margin-block: calc((var(--line-height-normal) * var(--font-size-sm) - var(--icon-size-sm)) / 2);
+  flex-shrink: 0;
+}
+.Menu_separator2 {
+  block-size: 1px;
+  margin-block: var(--spacing-xxs);
+  background: var(--color-border-subtle);
+  opacity: 0.8;
+  border-radius: 999px;
+}
+.Menu_header2 {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-md);
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  line-height: var(--line-height-normal);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: default;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.Menu_header2 svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: inherit;
+}
+.Menu_gap2 {
+  gap: var(--spacing-xs);
+}
+.Menu_rowBordered2 {
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--border-radius-md);
+  overflow: hidden;
+}
+.Menu_rowBordered2 .Menu_interactive2,
+.Menu_rowBordered2 .Menu_interactiveChild2 {
+  border-radius: 0;
+}
+
+/* src/components/forms/checkbox/Checkbox.module.css */
+.Checkbox_container2 {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  vertical-align: middle;
+  line-height: var(--line-height-normal);
+}
+.Checkbox_containerSm2 {
+  gap: var(--spacing-xs);
+}
+.Checkbox_checkbox2 {
+  width: var(--component-size-sm);
+  height: var(--component-size-sm);
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-sm);
+  background-color: var(--color-bg-surface);
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+.Checkbox_checkbox2.Checkbox_sm2 {
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+}
+.Checkbox_label2 {
+  display: block;
+  font-size: var(--font-size-sm);
+  min-width: 0;
+  flex: 1 1 auto;
+  line-height: var(--line-height-normal);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.Checkbox_checkbox2:hover {
+  border-color: var(--color-fg-default);
+}
+.Checkbox_checked2 {
+  background-color: var(--color-brand);
+  border-color: var(--color-brand);
+}
+.Checkbox_icon2 {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  color: var(--color-fg-on-brand);
+  stroke-width: 2;
+  pointer-events: none;
+}
+.Checkbox_default2 {
+  background-color: var(--color-bg-toolbar);
+  border-color: var(--color-bg-toolbar);
+  &:not(:hover) {
+    border-color: var(--color-bg-toolbar);
+  }
+  .Checkbox_icon2 {
+    color: var(--color-fg-default);
+  }
+}
+.Checkbox_outlined2.Checkbox_checked2 {
+  background-color: transparent;
+  border-color: var(--color-border-default);
+  &:not(:hover) {
+    border-color: var(--color-brand);
+  }
+  .Checkbox_icon2 {
+    color: var(--color-brand);
+  }
+}
+.Checkbox_success2.Checkbox_checked2 {
+  background-color: var(--color-status-success);
+  &:not(:hover) {
+    border-color: transparent;
+  }
+}
+.Checkbox_info2.Checkbox_checked2 {
+  background-color: var(--color-status-info);
+  &:not(:hover) {
+    border-color: transparent;
+  }
+  .Checkbox_icon2 {
+    color: var(--color-fg-on-brand);
+  }
+}
+
+/* src/components/forms/input-container/InputContainer.module.css */
+.InputContainer_horizontal2 {
+  --gap: var(--spacing-sm);
+}
+.InputContainer_horizontal2[data-size=sm] {
+  --gap: var(--spacing-xs);
+}
+.InputContainer_labelContainer2 {
+  gap: var(--gap);
+}
+.InputContainer_label2 {
+  color: var(--color-fg-default);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+.InputContainer_horizontal2 .InputContainer_errorText2,
+.InputContainer_horizontal2 .InputContainer_helpText2 {
+  margin-left: calc(var(--label-width) + var(--gap));
+}
+.InputContainer_helpText2 {
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.InputContainer_helpTextAddition2 {
+  color: var(--color-fg-subtle);
+}
+.InputContainer_horizontal2 label {
+  width: var(--label-width);
+}
+.InputContainer_errorText2 {
+  color: var(--color-status-error);
+  font-size: var(--font-size-sm);
+}
+.InputContainer_required2 {
+  color: var(--color-status-error);
+  font-weight: bold;
+}
+.InputContainer_messageRow2 {
+  min-height: 1lh;
+}
+.InputContainer_inputContainer2[data-modified] label:not(.InputContainer_label2) {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
+  border-radius: var(--border-radius-default);
+  padding: 2px 6px;
+}
+
+/* src/components/forms/radio-buttons/RadioButtons.module.css */
+.RadioButtons_container2 {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.RadioButtons_controlWrap2 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.RadioButtons_input2 {
+  position: absolute;
+  inset: 0;
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.RadioButtons_radio2 {
+  width: var(--component-size-xs);
+  height: var(--component-size-xs);
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-surface);
+  border: 2px solid var(--color-border-default);
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    background-color 120ms ease;
+}
+.RadioButtons_dot2 {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  transform: scale(0);
+  transition: transform 120ms ease;
+  background: var(--color-brand);
+}
+.RadioButtons_checked2 {
+  border-color: var(--color-brand);
+}
+.RadioButtons_checked2 .RadioButtons_dot2 {
+  transform: scale(1);
+}
+.RadioButtons_input2:not(:disabled):hover + .RadioButtons_radio2 {
+  border-color: var(--color-brand-hover);
+}
+.RadioButtons_input2:focus-visible + .RadioButtons_radio2 {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 30%, transparent);
+  border-color: var(--color-brand-strong);
+}
+.RadioButtons_disabled2 {
+  opacity: 0.5;
+}
+.RadioButtons_input2:disabled {
+  cursor: not-allowed;
+}
+.RadioButtons_label2 {
+  cursor: pointer;
+  user-select: none;
+  flex: 1;
+}
+.RadioButtons_primary2.RadioButtons_checked2 {
+  background: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+}
+.RadioButtons_default2 {
+  border-color: var(--color-border-strong);
+}
+.RadioButtons_sm2 {
+  width: 16px;
+  height: 16px;
+}
+.RadioButtons_sm2 .RadioButtons_dot2 {
+  width: 8px;
+  height: 8px;
+}
+.RadioButtons_md2 {
+  width: 20px;
+  height: 20px;
+}
+.RadioButtons_md2 .RadioButtons_dot2 {
+  width: 10px;
+  height: 10px;
+}
+.RadioButtons_lg2 {
+  width: 24px;
+  height: 24px;
+}
+.RadioButtons_lg2 .RadioButtons_dot2 {
+  width: 12px;
+  height: 12px;
+}
+
+/* src/components/popover/Popover.module.css */
+.Popover_container2 {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+  min-width: 0;
+  width: auto;
+  flex: 0 0 auto;
+}
+.Popover_container2 > * {
+  min-width: 0;
+}
+.Popover_triggerSlot2 {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  width: auto;
+  flex: 0 0 auto;
+}
+.Popover_triggerSlot2 > * {
+  min-width: 0;
+}
+.Popover_fullWidth2,
+.Popover_fillTrigger2 {
+  width: 100%;
+  flex: 1 1 auto;
+}
+.Popover_fullWidth2 > *,
+.Popover_fillTrigger2 > * {
+  width: 100%;
+  min-width: 0;
+}
+.Popover_content2 {
+  position: fixed;
+  border: 1px solid var(--color-border-subtle);
+  background-color: var(--color-bg-surface);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-xxs);
+  z-index: var(--z-popover);
+  overflow: auto;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), var(--shadow-sm);
+}
+.Popover_content2[hidden] {
+  display: none;
+}
+
+/* src/components/table/Table.module.css */
+.Table_fillViewportRoot2 {
+  display: flex;
+  position: relative;
+  block-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+}
+.Table_inlineRoot2 {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  position: relative;
+}
+.Table_toolbarSlot2 {
+  margin-bottom: 12px;
+  flex: 0 0 auto;
+}
+.Table_tableViewport2 {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.Table_paginationSlot2 {
+  flex: 0 0 auto;
+  overflow: visible;
+  margin-top: auto;
+}
+.Table_paginationSlot2:not(.Table_paginationSlotTop2) {
+  padding-top: var(--spacing-sm);
+}
+.Table_paginationSlot2.Table_paginationSlotTop2 {
+  padding-bottom: var(--spacing-sm);
+}
+.Table_tableRoot2 {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 100%;
+}
+.Table_measuringLayout2 {
+  visibility: hidden;
+}
+.Table_tableScroll2 {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: auto;
+  background: var(--table-row-bg);
+  -webkit-overflow-scrolling: touch;
+}
+.Table_tableElement2 {
+  inline-size: 100%;
+  min-inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--table-cell-fg);
+  background: var(--table-row-bg);
+}
+.Table_header2 {
+  position: relative;
+  z-index: 10;
+}
+.Table_headerRow2,
+.Table_row2 {
+  position: relative;
+}
+.Table_emptyStateSlot2 {
+  display: grid;
+  place-items: center;
+  min-block-size: 100%;
+  padding: var(--spacing-lg);
+}
+.Table_body2 {
+  min-block-size: 0;
+}
+.Table_body2 .Table_row2:first-child .Table_cell2 {
+  border-block-start: var(--spacing-xs) solid var(--table-row-bg);
+}
+.Table_headerCell2,
+.Table_cell2 {
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  vertical-align: top;
+  text-align: start;
+}
+.Table_headerCell2 {
+  vertical-align: middle;
+  background-color: var(--table-header-bg);
+  border-block-end: 1px solid var(--table-border-header);
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--table-header-fg);
+  white-space: nowrap;
+}
+[data-sticky-header=true] .Table_headerCell2 {
+  position: sticky;
+  top: var(--table-sticky-top);
+  z-index: 6;
+}
+.Table_cell2 {
+  padding-block: 6px;
+  padding-inline: var(--spacing-sm);
+  border-block-end: 1px solid var(--table-border-subtle);
+  background: var(--table-row-bg);
+  overflow: hidden;
+  line-height: 20px;
+}
+.Table_md2 .Table_headerCell2 {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+}
+.Table_md2 .Table_cell2 {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+}
+.Table_sm2 .Table_headerCell2 {
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
+}
+.Table_sm2 .Table_cell2 {
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  line-height: 20px;
+}
+.Table_cell2[data-vertical-align=top] {
+  vertical-align: top;
+}
+.Table_cell2[data-vertical-align=middle] {
+  vertical-align: middle;
+}
+.Table_cell2[data-vertical-align=bottom] {
+  vertical-align: bottom;
+}
+.Table_headerCell2[data-align=right],
+.Table_cell2[data-align=right] {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+.Table_headerCell2[data-align=center],
+.Table_cell2[data-align=center] {
+  text-align: center;
+}
+.Table_headerCell2.Table_selectionCell2,
+.Table_cell2.Table_selectionCell2 {
+  padding-inline: calc(var(--spacing-xxs) + 6px) var(--spacing-sm);
+  cursor: pointer;
+  overflow: visible;
+  line-height: 0;
+}
+.Table_headerCell2.Table_selectionCell2 {
+  padding-block: var(--spacing-xxs);
+  vertical-align: middle;
+}
+.Table_cell2.Table_selectionCell2 {
+  vertical-align: top;
+  padding-block: var(--spacing-xxs);
+}
+.Table_selectionHitArea2 {
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-block-size: 0;
+  padding: 0;
+  line-height: 0;
+}
+.Table_selectionControlWrap2 {
+  display: inline-flex;
+  align-items: flex-start;
+  line-height: 0;
+}
+.Table_selectionControlWrap2 span {
+  gap: 0;
+}
+.Table_selectionControlWrap2 input[type=radio] + span {
+  width: 18px;
+  height: 18px;
+  border-width: 1px;
+  border-color: color-mix(in srgb, var(--color-fg-default) 28%, transparent);
+}
+.Table_selectionControlWrap2 input[type=radio] + span > span {
+  width: 8px;
+  height: 8px;
+}
+.Table_clickableRow2 {
+  cursor: pointer;
+}
+.Table_row2:hover > .Table_cell2 {
+  background-color: var(--table-row-bg-hover);
+}
+.Table_selectedRow2 > .Table_cell2 {
+  background-color: var(--table-row-bg-selected);
+}
+.Table_selectedRow2:hover > .Table_cell2 {
+  background-color: var(--table-row-bg-selected-hover);
+}
+.Table_striped2 > .Table_row2:nth-child(even):not(.Table_selectedRow2):not(:hover) > .Table_cell2 {
+  background-color: var(--table-row-bg-alt);
+}
+.Table_row2:focus-within > .Table_cell2 {
+  box-shadow: inset 0 2px 0 var(--color-brand), inset 0 -2px 0 var(--color-brand);
+}
+.Table_row2:focus-within > .Table_cell2:first-child {
+  box-shadow:
+    inset 2px 0 0 var(--color-brand),
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
+}
+.Table_row2:focus-within > .Table_cell2:last-child {
+  box-shadow:
+    inset -2px 0 0 var(--color-brand),
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
+}
+.Table_nowrap2 {
+  white-space: nowrap;
+}
+.Table_allowWrap2 {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+.Table_thInner2 {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  min-width: 0;
+}
+.Table_thInnerRight2 {
+  justify-content: flex-end;
+}
+.Table_thInnerCenter2 {
+  justify-content: center;
+}
+.Table_thMain2 {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.Table_thMainRight2 {
+  justify-content: flex-end;
+}
+.Table_thMainCenter2 {
+  justify-content: center;
+}
+.Table_thButton2 {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-inline-size: 100%;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--border-radius-default);
+  padding-block: 2px;
+  padding-inline: 2px;
+  justify-content: flex-start;
+}
+.Table_thButtonRight2 {
+  justify-content: flex-end;
+}
+.Table_thButtonCenter2 {
+  justify-content: center;
+}
+.Table_thLabel2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+.Table_thLabelRight2 {
+  text-align: right;
+  width: 100%;
+}
+.Table_thLabelCenter2 {
+  text-align: center;
+  width: 100%;
+}
+.Table_thOverlayExtras2 {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  pointer-events: none;
+  z-index: 7;
+}
+.Table_thOverlayExtras2 > * {
+  pointer-events: auto;
+}
+.Table_sortIndicator2 {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  color: var(--color-fg-subtle);
+  opacity: 0.9;
+}
+.Table_sortIndicator2 svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+.Table_descending2 {
+  transform: rotate(180deg);
+}
+.Table_inActiveSort2 {
+  opacity: 0.45;
+}
+.Table_cellContent2 {
+  display: flex;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
+}
+.Table_cellContent2[data-align=left] {
+  justify-content: flex-start;
+  text-align: left;
+}
+.Table_cellContent2[data-align=center] {
+  justify-content: center;
+  text-align: center;
+}
+.Table_cellContent2[data-align=right] {
+  justify-content: flex-end;
+  text-align: right;
+}
+.Table_cellContent2[data-vertical-align=top] {
+  align-items: flex-start;
+}
+.Table_cellContent2[data-vertical-align=middle] {
+  align-items: center;
+}
+.Table_cellContent2[data-vertical-align=bottom] {
+  align-items: flex-end;
+}
+.Table_cellContent2 > * {
+  min-width: 0;
+  max-inline-size: 100%;
+}
+.Table_cellValueEllipsis2 {
+  display: block;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.Table_cellContent2[data-align=left] .Table_cellValueEllipsis2 {
+  text-align: left;
+}
+.Table_cellContent2[data-align=center] .Table_cellValueEllipsis2 {
+  text-align: center;
+}
+.Table_cellContent2[data-align=right] .Table_cellValueEllipsis2 {
+  text-align: right;
+}
+.Table_allowWrap2 .Table_cellContent2,
+.Table_allowWrap2 .Table_cellValueEllipsis2 {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+.Table_severityTable2 {
+  --row-rail-width: 2px;
+  --row-rail-inset-block: 1px;
+  --row-rail-radius: 0;
+}
+.Table_severityTable2 .Table_row2.Table_severity2 > .Table_cell2:first-child {
+  position: relative;
+}
+.Table_severityTable2 .Table_row2.Table_severity2 > .Table_cell2:first-child::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: var(--row-rail-inset-block);
+  inset-block-end: var(--row-rail-inset-block);
+  inline-size: var(--row-rail-width);
+  background-color: var(--row-severity-color);
+  border-radius: var(--row-rail-radius);
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0.95;
+}
+.Table_severityTable2 .Table_row2.Table_severity2:hover > .Table_cell2:first-child::before,
+.Table_severityTable2 .Table_row2.Table_severity2:focus-within > .Table_cell2:first-child::before {
+  opacity: 1;
+  z-index: 8;
+}
+.Table_severityTable2 .Table_row2.Table_severityFailed2 > .Table_cell2:first-child::before {
+  box-shadow: 1px 0 0 color-mix(in srgb, var(--row-severity-color) 20%, transparent);
+}
+.Table_sm2 .Table_severityTable2 {
+  --row-rail-width: 4px;
+  --row-rail-inset-block: 1px;
+}
+.Table_dividerLeft2,
+.Table_dividerRight2 {
+  position: relative;
+}
+.Table_dividerLeft2::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--table-divider);
+}
+.Table_dividerRight2::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--table-divider);
+}
+
+/* src/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.module.css */
+.SkeletonLoaderItem_skeletonLoader2 {
+  --h: var(--skeleton-height, 14px);
+  --r: var(--border-radius-md, 6px);
+  --speed: var(--skeleton-speed, 1.2s);
+  --skeleton-base: var(--opac-bg-dark);
+  --skeleton-sheen: var(--opac-bg-default);
+  position: relative;
+  display: block;
+  inline-size: var(--width, 100%);
+  block-size: var(--h);
+  width: var(--width, 100%);
+  height: var(--h);
+  overflow: hidden;
+  border-radius: var(--r);
+  background:
+    linear-gradient(
+      90deg,
+      var(--skeleton-sheen) 0%,
+      var(--skeleton-base) 45%,
+      var(--skeleton-sheen) 60%,
+      var(--skeleton-base) 100%);
+  background-size: 200% 100%;
+  animation: SkeletonLoaderItem_shimmer2 var(--speed) linear infinite;
+}
+.SkeletonLoaderItem_invert2 {
+  --skeleton-base: var(--opac-bg-dark-invert);
+  --skeleton-sheen: var(--opac-bg-light-invert);
+}
+.SkeletonLoaderItem_bar2 {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: inherit;
+}
+@keyframes SkeletonLoaderItem_shimmer2 {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .SkeletonLoaderItem_skeletonLoader2 {
+    animation: none;
+  }
+}