entangle-ui 0.3.0 → 0.5.0

package/dist/esm/assets/src/components/layout/Accordion/Accordion.css.ts.vanilla-Ck5Yew0e.css

@@ -0,0 +1,118 @@
+.Accordion_accordionRoot__1j9ah931 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--accordionGapVar__1j9ah930);
+}
+.Accordion_accordionItem__1j9ah932 {
+  display: flex;
+  flex-direction: column;
+}
+.Accordion_triggerButton__1j9ah933 {
+  margin: 0;
+  border: none;
+  font-family: inherit;
+  outline: none;
+  user-select: none;
+  width: 100%;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: var(--etui-spacing-sm);
+  font-weight: var(--etui-font-weight-medium);
+  color: var(--etui-color-text-primary);
+  transition: background var(--etui-transition-fast);
+}
+.Accordion_triggerButton__1j9ah933:focus-visible {
+  box-shadow: var(--etui-shadow-focus);
+  z-index: 1;
+}
+.Accordion_triggerButton_variant_default__1j9ah934 {
+  background: var(--etui-color-surface-default);
+  border-bottom: 1px solid var(--etui-color-border-default);
+}
+.Accordion_triggerButton_variant_default__1j9ah934:hover:not(:disabled) {
+  background: var(--etui-color-surface-hover);
+}
+.Accordion_triggerButton_variant_ghost__1j9ah935 {
+  background: transparent;
+  border-bottom: 1px solid var(--etui-color-border-default);
+}
+.Accordion_triggerButton_variant_ghost__1j9ah935:hover:not(:disabled) {
+  background: var(--etui-color-surface-hover);
+}
+.Accordion_triggerButton_variant_filled__1j9ah936 {
+  background: var(--etui-color-bg-tertiary);
+}
+.Accordion_triggerButton_variant_filled__1j9ah936:hover:not(:disabled) {
+  background: var(--etui-color-surface-hover);
+}
+.Accordion_triggerButton_size_sm__1j9ah937 {
+  height: 28px;
+  padding: 0 var(--etui-spacing-md);
+  font-size: var(--etui-font-size-xs);
+}
+.Accordion_triggerButton_size_md__1j9ah938 {
+  height: 32px;
+  padding: 0 var(--etui-spacing-lg);
+  font-size: var(--etui-font-size-sm);
+}
+.Accordion_triggerButton_size_lg__1j9ah939 {
+  height: 38px;
+  padding: 0 var(--etui-spacing-xl);
+  font-size: var(--etui-font-size-md);
+}
+.Accordion_triggerButton_disabled_true__1j9ah93a {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.Accordion_triggerButton_disabled_false__1j9ah93b {
+  cursor: pointer;
+}
+.Accordion_chevronStyle__1j9ah93c {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform var(--etui-transition-fast);
+  color: var(--etui-color-text-muted);
+}
+.Accordion_chevronExpanded__1j9ah93d {
+  transform: rotate(90deg);
+}
+.Accordion_chevronCollapsed__1j9ah93e {
+  transform: rotate(0deg);
+}
+.Accordion_actionsArea__1j9ah93f {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  gap: var(--etui-spacing-xs);
+}
+.Accordion_iconArea__1j9ah93g {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.Accordion_contentWrapper__1j9ah93h {
+  display: grid;
+  transition: grid-template-rows var(--etui-transition-normal);
+}
+.Accordion_contentWrapperExpanded__1j9ah93i {
+  grid-template-rows: 1fr;
+}
+.Accordion_contentWrapperCollapsed__1j9ah93j {
+  grid-template-rows: 0fr;
+}
+.Accordion_contentInner__1j9ah93k {
+  overflow: hidden;
+  min-height: 0;
+}
+.Accordion_contentBody_size_sm__1j9ah93m {
+  padding: var(--etui-spacing-sm) var(--etui-spacing-md);
+}
+.Accordion_contentBody_size_md__1j9ah93n {
+  padding: var(--etui-spacing-md) var(--etui-spacing-lg);
+}
+.Accordion_contentBody_size_lg__1j9ah93o {
+  padding: var(--etui-spacing-lg) var(--etui-spacing-xl);
+}

package/dist/esm/assets/src/components/layout/Flex/Flex.css.ts.vanilla-D7wY2gY6.css

@@ -0,0 +1,142 @@
+.Flex_flexRecipe__tsbw354 {
+  display: flex;
+  box-sizing: border-box;
+  gap: var(--gapVar__tsbw350);
+  flex-grow: var(--growVar__tsbw351);
+  flex-shrink: var(--shrinkVar__tsbw352);
+  flex-basis: var(--basisVar__tsbw353);
+}
+.Flex_flexRecipe_direction_row__tsbw355 {
+  flex-direction: row;
+}
+.Flex_flexRecipe_direction_row-reverse__tsbw356 {
+  flex-direction: row-reverse;
+}
+.Flex_flexRecipe_direction_column__tsbw357 {
+  flex-direction: column;
+}
+.Flex_flexRecipe_direction_column-reverse__tsbw358 {
+  flex-direction: column-reverse;
+}
+.Flex_flexRecipe_wrap_nowrap__tsbw359 {
+  flex-wrap: nowrap;
+}
+.Flex_flexRecipe_wrap_wrap__tsbw35a {
+  flex-wrap: wrap;
+}
+.Flex_flexRecipe_wrap_wrap-reverse__tsbw35b {
+  flex-wrap: wrap-reverse;
+}
+.Flex_flexRecipe_justify_flex-start__tsbw35c {
+  justify-content: flex-start;
+}
+.Flex_flexRecipe_justify_flex-end__tsbw35d {
+  justify-content: flex-end;
+}
+.Flex_flexRecipe_justify_center__tsbw35e {
+  justify-content: center;
+}
+.Flex_flexRecipe_justify_space-between__tsbw35f {
+  justify-content: space-between;
+}
+.Flex_flexRecipe_justify_space-around__tsbw35g {
+  justify-content: space-around;
+}
+.Flex_flexRecipe_justify_space-evenly__tsbw35h {
+  justify-content: space-evenly;
+}
+.Flex_flexRecipe_align_flex-start__tsbw35i {
+  align-items: flex-start;
+}
+.Flex_flexRecipe_align_flex-end__tsbw35j {
+  align-items: flex-end;
+}
+.Flex_flexRecipe_align_center__tsbw35k {
+  align-items: center;
+}
+.Flex_flexRecipe_align_stretch__tsbw35l {
+  align-items: stretch;
+}
+.Flex_flexRecipe_align_baseline__tsbw35m {
+  align-items: baseline;
+}
+.Flex_flexRecipe_alignContent_flex-start__tsbw35n {
+  align-content: flex-start;
+}
+.Flex_flexRecipe_alignContent_flex-end__tsbw35o {
+  align-content: flex-end;
+}
+.Flex_flexRecipe_alignContent_center__tsbw35p {
+  align-content: center;
+}
+.Flex_flexRecipe_alignContent_stretch__tsbw35q {
+  align-content: stretch;
+}
+.Flex_flexRecipe_alignContent_space-between__tsbw35r {
+  align-content: space-between;
+}
+.Flex_flexRecipe_alignContent_space-around__tsbw35s {
+  align-content: space-around;
+}
+.Flex_flexRecipe_fullWidth_true__tsbw35t {
+  width: 100%;
+}
+.Flex_flexRecipe_fullHeight_true__tsbw35u {
+  height: 100%;
+}
+@media (min-width: 576px) {
+  .Flex_flexRecipe__tsbw354[data-sm-dir="row"] {
+    flex-direction: row;
+  }
+  .Flex_flexRecipe__tsbw354[data-sm-dir="row-reverse"] {
+    flex-direction: row-reverse;
+  }
+  .Flex_flexRecipe__tsbw354[data-sm-dir="column"] {
+    flex-direction: column;
+  }
+  .Flex_flexRecipe__tsbw354[data-sm-dir="column-reverse"] {
+    flex-direction: column-reverse;
+  }
+}
+@media (min-width: 768px) {
+  .Flex_flexRecipe__tsbw354[data-md-dir="row"] {
+    flex-direction: row;
+  }
+  .Flex_flexRecipe__tsbw354[data-md-dir="row-reverse"] {
+    flex-direction: row-reverse;
+  }
+  .Flex_flexRecipe__tsbw354[data-md-dir="column"] {
+    flex-direction: column;
+  }
+  .Flex_flexRecipe__tsbw354[data-md-dir="column-reverse"] {
+    flex-direction: column-reverse;
+  }
+}
+@media (min-width: 992px) {
+  .Flex_flexRecipe__tsbw354[data-lg-dir="row"] {
+    flex-direction: row;
+  }
+  .Flex_flexRecipe__tsbw354[data-lg-dir="row-reverse"] {
+    flex-direction: row-reverse;
+  }
+  .Flex_flexRecipe__tsbw354[data-lg-dir="column"] {
+    flex-direction: column;
+  }
+  .Flex_flexRecipe__tsbw354[data-lg-dir="column-reverse"] {
+    flex-direction: column-reverse;
+  }
+}
+@media (min-width: 1200px) {
+  .Flex_flexRecipe__tsbw354[data-xl-dir="row"] {
+    flex-direction: row;
+  }
+  .Flex_flexRecipe__tsbw354[data-xl-dir="row-reverse"] {
+    flex-direction: row-reverse;
+  }
+  .Flex_flexRecipe__tsbw354[data-xl-dir="column"] {
+    flex-direction: column;
+  }
+  .Flex_flexRecipe__tsbw354[data-xl-dir="column-reverse"] {
+    flex-direction: column-reverse;
+  }
+}

package/dist/esm/assets/src/components/layout/Grid/Grid.css.ts.vanilla-gqfqUi29.css

@@ -0,0 +1,213 @@
+.Grid_gridContainer__wzrx2t2 {
+  display: grid;
+  grid-template-columns: repeat(var(var(--columnsVar__wzrx2t1)), 1fr);
+  width: 100%;
+  box-sizing: border-box;
+  gap: var(--gapVar__wzrx2t0);
+}
+.Grid_gridItem__wzrx2t3 {
+  box-sizing: border-box;
+}
+.Grid_gridItem__wzrx2t3[data-xs="1"] {
+  grid-column: span 1;
+}
+.Grid_gridItem__wzrx2t3[data-xs="2"] {
+  grid-column: span 2;
+}
+.Grid_gridItem__wzrx2t3[data-xs="3"] {
+  grid-column: span 3;
+}
+.Grid_gridItem__wzrx2t3[data-xs="4"] {
+  grid-column: span 4;
+}
+.Grid_gridItem__wzrx2t3[data-xs="5"] {
+  grid-column: span 5;
+}
+.Grid_gridItem__wzrx2t3[data-xs="6"] {
+  grid-column: span 6;
+}
+.Grid_gridItem__wzrx2t3[data-xs="7"] {
+  grid-column: span 7;
+}
+.Grid_gridItem__wzrx2t3[data-xs="8"] {
+  grid-column: span 8;
+}
+.Grid_gridItem__wzrx2t3[data-xs="9"] {
+  grid-column: span 9;
+}
+.Grid_gridItem__wzrx2t3[data-xs="10"] {
+  grid-column: span 10;
+}
+.Grid_gridItem__wzrx2t3[data-xs="11"] {
+  grid-column: span 11;
+}
+.Grid_gridItem__wzrx2t3[data-xs="12"] {
+  grid-column: span 12;
+}
+.Grid_gridItem__wzrx2t3[data-xs="auto"] {
+  grid-column: span auto;
+}
+@media (min-width: 576px) {
+  .Grid_gridItem__wzrx2t3[data-sm="1"] {
+    grid-column: span 1;
+  }
+  .Grid_gridItem__wzrx2t3[data-sm="2"] {
+    grid-column: span 2;
+  }
+  .Grid_gridItem__wzrx2t3[data-sm="3"] {
+    grid-column: span 3;
+  }
+  .Grid_gridItem__wzrx2t3[data-sm="4"] {
+    grid-column: span 4;
+  }
+  .Grid_gridItem__wzrx2t3[data-sm="5"] {
+    grid-column: span 5;
+  }
+  .Grid_gridItem__wzrx2t3[data-sm="6"] {
+    grid-column: span 6;
+  }
+  .Grid_gridItem__wzrx2t3[data-sm="7"] {
+    grid-column: span 7;
+  }
+  .Grid_gridItem__wzrx2t3[data-sm="8"] {
+    grid-column: span 8;
+  }
+  .Grid_gridItem__wzrx2t3[data-sm="9"] {
+    grid-column: span 9;
+  }
+  .Grid_gridItem__wzrx2t3[data-sm="10"] {
+    grid-column: span 10;
+  }
+  .Grid_gridItem__wzrx2t3[data-sm="11"] {
+    grid-column: span 11;
+  }
+  .Grid_gridItem__wzrx2t3[data-sm="12"] {
+    grid-column: span 12;
+  }
+  .Grid_gridItem__wzrx2t3[data-sm="auto"] {
+    grid-column: span auto;
+  }
+}
+@media (min-width: 768px) {
+  .Grid_gridItem__wzrx2t3[data-md="1"] {
+    grid-column: span 1;
+  }
+  .Grid_gridItem__wzrx2t3[data-md="2"] {
+    grid-column: span 2;
+  }
+  .Grid_gridItem__wzrx2t3[data-md="3"] {
+    grid-column: span 3;
+  }
+  .Grid_gridItem__wzrx2t3[data-md="4"] {
+    grid-column: span 4;
+  }
+  .Grid_gridItem__wzrx2t3[data-md="5"] {
+    grid-column: span 5;
+  }
+  .Grid_gridItem__wzrx2t3[data-md="6"] {
+    grid-column: span 6;
+  }
+  .Grid_gridItem__wzrx2t3[data-md="7"] {
+    grid-column: span 7;
+  }
+  .Grid_gridItem__wzrx2t3[data-md="8"] {
+    grid-column: span 8;
+  }
+  .Grid_gridItem__wzrx2t3[data-md="9"] {
+    grid-column: span 9;
+  }
+  .Grid_gridItem__wzrx2t3[data-md="10"] {
+    grid-column: span 10;
+  }
+  .Grid_gridItem__wzrx2t3[data-md="11"] {
+    grid-column: span 11;
+  }
+  .Grid_gridItem__wzrx2t3[data-md="12"] {
+    grid-column: span 12;
+  }
+  .Grid_gridItem__wzrx2t3[data-md="auto"] {
+    grid-column: span auto;
+  }
+}
+@media (min-width: 992px) {
+  .Grid_gridItem__wzrx2t3[data-lg="1"] {
+    grid-column: span 1;
+  }
+  .Grid_gridItem__wzrx2t3[data-lg="2"] {
+    grid-column: span 2;
+  }
+  .Grid_gridItem__wzrx2t3[data-lg="3"] {
+    grid-column: span 3;
+  }
+  .Grid_gridItem__wzrx2t3[data-lg="4"] {
+    grid-column: span 4;
+  }
+  .Grid_gridItem__wzrx2t3[data-lg="5"] {
+    grid-column: span 5;
+  }
+  .Grid_gridItem__wzrx2t3[data-lg="6"] {
+    grid-column: span 6;
+  }
+  .Grid_gridItem__wzrx2t3[data-lg="7"] {
+    grid-column: span 7;
+  }
+  .Grid_gridItem__wzrx2t3[data-lg="8"] {
+    grid-column: span 8;
+  }
+  .Grid_gridItem__wzrx2t3[data-lg="9"] {
+    grid-column: span 9;
+  }
+  .Grid_gridItem__wzrx2t3[data-lg="10"] {
+    grid-column: span 10;
+  }
+  .Grid_gridItem__wzrx2t3[data-lg="11"] {
+    grid-column: span 11;
+  }
+  .Grid_gridItem__wzrx2t3[data-lg="12"] {
+    grid-column: span 12;
+  }
+  .Grid_gridItem__wzrx2t3[data-lg="auto"] {
+    grid-column: span auto;
+  }
+}
+@media (min-width: 1200px) {
+  .Grid_gridItem__wzrx2t3[data-xl="1"] {
+    grid-column: span 1;
+  }
+  .Grid_gridItem__wzrx2t3[data-xl="2"] {
+    grid-column: span 2;
+  }
+  .Grid_gridItem__wzrx2t3[data-xl="3"] {
+    grid-column: span 3;
+  }
+  .Grid_gridItem__wzrx2t3[data-xl="4"] {
+    grid-column: span 4;
+  }
+  .Grid_gridItem__wzrx2t3[data-xl="5"] {
+    grid-column: span 5;
+  }
+  .Grid_gridItem__wzrx2t3[data-xl="6"] {
+    grid-column: span 6;
+  }
+  .Grid_gridItem__wzrx2t3[data-xl="7"] {
+    grid-column: span 7;
+  }
+  .Grid_gridItem__wzrx2t3[data-xl="8"] {
+    grid-column: span 8;
+  }
+  .Grid_gridItem__wzrx2t3[data-xl="9"] {
+    grid-column: span 9;
+  }
+  .Grid_gridItem__wzrx2t3[data-xl="10"] {
+    grid-column: span 10;
+  }
+  .Grid_gridItem__wzrx2t3[data-xl="11"] {
+    grid-column: span 11;
+  }
+  .Grid_gridItem__wzrx2t3[data-xl="12"] {
+    grid-column: span 12;
+  }
+  .Grid_gridItem__wzrx2t3[data-xl="auto"] {
+    grid-column: span auto;
+  }
+}

package/dist/esm/assets/src/components/layout/PanelSurface/PanelSurface.css.ts.vanilla-HZvObe0l.css

@@ -0,0 +1,86 @@
+.PanelSurface_rootStyle__1h989w11 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: var(--backgroundVar__1h989w10);
+  color: var(--etui-color-text-primary);
+  border-radius: var(--etui-radius-md);
+}
+.PanelSurface_rootBordered__1h989w12 {
+  border: 1px solid var(--etui-color-border-default);
+}
+.PanelSurface_rootNoBorder__1h989w13 {
+  border: none;
+}
+.PanelSurface_headerRecipe__1h989w14 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--etui-color-bg-secondary);
+  color: var(--etui-color-text-secondary);
+  font-weight: var(--etui-font-weight-medium);
+  border-bottom: 1px solid var(--etui-color-border-default);
+  flex-shrink: 0;
+  user-select: none;
+}
+.PanelSurface_headerRecipe_size_sm__1h989w15 {
+  min-height: 24px;
+  padding: 0 var(--etui-spacing-sm);
+  font-size: var(--etui-font-size-xs);
+}
+.PanelSurface_headerRecipe_size_md__1h989w16 {
+  min-height: 28px;
+  padding: 0 var(--etui-spacing-md);
+  font-size: var(--etui-font-size-sm);
+}
+.PanelSurface_headerRecipe_size_lg__1h989w17 {
+  min-height: 32px;
+  padding: 0 var(--etui-spacing-lg);
+  font-size: var(--etui-font-size-md);
+}
+.PanelSurface_headerActions__1h989w18 {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--etui-spacing-xs);
+  margin-left: var(--etui-spacing-md);
+}
+.PanelSurface_bodyStyle__1h989w19 {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+}
+.PanelSurface_bodyScrollable__1h989w1a {
+  overflow: auto;
+}
+.PanelSurface_bodyHidden__1h989w1b {
+  overflow: hidden;
+}
+.PanelSurface_footerRecipe__1h989w1c {
+  display: flex;
+  align-items: center;
+  border-top: 1px solid var(--etui-color-border-default);
+  background: var(--etui-color-bg-secondary);
+  color: var(--etui-color-text-secondary);
+  flex-shrink: 0;
+}
+.PanelSurface_footerRecipe_size_sm__1h989w1d {
+  min-height: 24px;
+  padding: 0 var(--etui-spacing-sm);
+  font-size: var(--etui-font-size-xs);
+}
+.PanelSurface_footerRecipe_size_md__1h989w1e {
+  min-height: 28px;
+  padding: 0 var(--etui-spacing-md);
+  font-size: var(--etui-font-size-sm);
+}
+.PanelSurface_footerRecipe_size_lg__1h989w1f {
+  min-height: 32px;
+  padding: 0 var(--etui-spacing-lg);
+  font-size: var(--etui-font-size-md);
+}

package/dist/esm/assets/src/components/layout/ScrollArea/ScrollArea.css.ts.vanilla-UsyrfXTC.css

@@ -0,0 +1,126 @@
+.ScrollArea_rootStyle__17ntphk3 {
+  position: relative;
+  overflow: hidden;
+}
+.ScrollArea_rootAutoFill__17ntphk4 {
+  width: 100%;
+  height: 100%;
+}
+.ScrollArea_viewportRecipe__17ntphk5 {
+  width: 100%;
+  height: 100%;
+  max-height: inherit;
+  max-width: inherit;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.ScrollArea_viewportRecipe__17ntphk5::-webkit-scrollbar {
+  display: none;
+}
+.ScrollArea_viewportRecipe__17ntphk5:focus {
+  outline: none;
+}
+.ScrollArea_viewportRecipe__17ntphk5:focus-visible {
+  box-shadow: var(--etui-shadow-focus);
+}
+.ScrollArea_viewportRecipe_direction_vertical__17ntphk6 {
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.ScrollArea_viewportRecipe_direction_horizontal__17ntphk7 {
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+.ScrollArea_viewportRecipe_direction_both__17ntphk8 {
+  overflow-x: scroll;
+  overflow-y: scroll;
+}
+.ScrollArea_scrollbarVertical__17ntphk9 {
+  position: absolute;
+  z-index: 1;
+  right: var(--scrollbarPaddingVar__17ntphk1);
+  top: var(--scrollbarPaddingVar__17ntphk1);
+  bottom: var(--scrollbarPaddingVar__17ntphk1);
+  width: var(--scrollbarWidthVar__17ntphk0);
+  border-radius: var(--scrollbarWidthVar__17ntphk0);
+  transition: opacity var(--etui-transition-fast);
+}
+.ScrollArea_scrollbarHorizontal__17ntphka {
+  position: absolute;
+  z-index: 1;
+  bottom: var(--scrollbarPaddingVar__17ntphk1);
+  left: var(--scrollbarPaddingVar__17ntphk1);
+  right: var(--scrollbarPaddingVar__17ntphk1);
+  height: var(--scrollbarWidthVar__17ntphk0);
+  border-radius: var(--scrollbarWidthVar__17ntphk0);
+  transition: opacity var(--etui-transition-fast);
+}
+.ScrollArea_scrollbarVisible__17ntphkb {
+  opacity: 1;
+  pointer-events: auto;
+}
+.ScrollArea_scrollbarHidden__17ntphkc {
+  opacity: 0;
+  pointer-events: none;
+}
+.ScrollArea_thumbBase__17ntphkd {
+  position: absolute;
+  border-radius: inherit;
+  background: var(--etui-color-text-disabled);
+  transition: background var(--etui-transition-fast);
+  cursor: pointer;
+}
+.ScrollArea_thumbBase__17ntphkd:hover {
+  background: var(--etui-color-text-muted);
+}
+.ScrollArea_thumbVertical__17ntphke {
+  width: 100%;
+  left: 0;
+}
+.ScrollArea_thumbHorizontal__17ntphkf {
+  height: 100%;
+  top: 0;
+}
+.ScrollArea_thumbDragging__17ntphkg {
+  background: var(--etui-color-text-secondary);
+}
+.ScrollArea_fadeMaskBase__17ntphkh {
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  transition: opacity var(--etui-transition-fast);
+}
+.ScrollArea_fadeMaskVisible__17ntphki {
+  opacity: 1;
+}
+.ScrollArea_fadeMaskHiddenStyle__17ntphkj {
+  opacity: 0;
+}
+.ScrollArea_fadeMaskTop__17ntphkk {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--fadeMaskSizeVar__17ntphk2);
+  background: linear-gradient(to bottom, var(--etui-color-bg-primary), transparent);
+}
+.ScrollArea_fadeMaskBottom__17ntphkl {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--fadeMaskSizeVar__17ntphk2);
+  background: linear-gradient(to top, var(--etui-color-bg-primary), transparent);
+}
+.ScrollArea_fadeMaskLeft__17ntphkm {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: var(--fadeMaskSizeVar__17ntphk2);
+  background: linear-gradient(to right, var(--etui-color-bg-primary), transparent);
+}
+.ScrollArea_fadeMaskRight__17ntphkn {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--fadeMaskSizeVar__17ntphk2);
+  background: linear-gradient(to left, var(--etui-color-bg-primary), transparent);
+}

package/dist/esm/assets/src/components/layout/Spacer/Spacer.css.ts.vanilla-A-7aOV46.css

@@ -0,0 +1,14 @@
+.Spacer_spacerBase__1177qpm0 {
+  pointer-events: none;
+  user-select: none;
+}
+.Spacer_spacerFlexible__1177qpm1 {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  min-width: 0;
+  min-height: 0;
+}
+.Spacer_spacerFixed__1177qpm2 {
+  flex: none;
+}