chore: generate

1 files changed, 325 insertions, 329 deletions

diff --git a/packages/ui/src/components/list.css b/packages/ui/src/components/list.css
index ae99e9841..bba3519ab 100644
--- a/packages/ui/src/components/list.css
+++ b/packages/ui/src/components/list.css
@@ -1,337 +1,333 @@
 @property --bottom-fade {
-	syntax: "<length>";
-	inherits: false;
-	initial-value: 0px;
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
 }
 
 @keyframes scroll {
-	0% {
-		--bottom-fade: 20px;
-	}
-	90% {
-		--bottom-fade: 20px;
-	}
-	100% {
-		--bottom-fade: 0;
-	}
+  0% {
+    --bottom-fade: 20px;
+  }
+  90% {
+    --bottom-fade: 20px;
+  }
+  100% {
+    --bottom-fade: 0;
+  }
 }
 
 [data-component="list"] {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	overflow: hidden;
-	padding: 0 12px;
-
-	[data-slot="list-search-wrapper"] {
-		display: flex;
-		flex-shrink: 0;
-		align-items: center;
-		gap: 8px;
-		align-self: stretch;
-		margin-bottom: 4px;
-
-		> [data-component="icon-button"] {
-			width: 24px;
-			height: 24px;
-			flex-shrink: 0;
-			background-color: transparent;
-			opacity: 0.5;
-			transition-property: opacity;
-			transition-duration: var(--transition-duration);
-			transition-timing-function: var(--transition-easing);
-
-			&:hover:not(:disabled),
-			&:focus-visible:not(:disabled),
-			&:active:not(:disabled) {
-				background-color: transparent;
-				opacity: 0.7;
-			}
-
-			&:hover:not(:disabled) [data-slot="icon-svg"] {
-				color: var(--icon-hover);
-			}
-
-			&:active:not(:disabled) [data-slot="icon-svg"] {
-				color: var(--icon-active);
-			}
-		}
-	}
-
-	[data-slot="list-search"] {
-		display: flex;
-		flex: 1;
-		padding: 8px;
-		align-items: center;
-		gap: 12px;
-
-		border-radius: var(--radius-md);
-		background: var(--surface-base);
-
-		[data-slot="list-search-container"] {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			flex: 1 0 0;
-			max-height: 20px;
-
-			[data-slot="list-search-input"] {
-				width: 100%;
-
-				&[data-slot="input-input"] {
-					line-height: 20px;
-					max-height: 20px;
-				}
-			}
-		}
-
-		> [data-component="icon-button"] {
-			width: 20px;
-			height: 20px;
-			background-color: transparent;
-			opacity: 0.5;
-			transition-property: opacity;
-			transition-duration: var(--transition-duration);
-			transition-timing-function: var(--transition-easing);
-
-			&:hover:not(:disabled),
-			&:focus-visible:not(:disabled),
-			&:active:not(:disabled) {
-				background-color: transparent;
-				opacity: 0.7;
-			}
-
-			&:hover:not(:disabled) [data-slot="icon-svg"] {
-				color: var(--icon-hover);
-			}
-
-			&:active:not(:disabled) [data-slot="icon-svg"] {
-				color: var(--icon-active);
-			}
-		}
-
-		> [data-component="icon-button"] {
-			background-color: transparent;
-
-			&:hover:not(:disabled),
-			&:focus:not(:disabled),
-			&:active:not(:disabled) {
-				background-color: transparent;
-			}
-
-			&:hover:not(:disabled) [data-slot="icon-svg"] {
-				color: var(--icon-hover);
-			}
-
-			&:active:not(:disabled) [data-slot="icon-svg"] {
-				color: var(--icon-active);
-			}
-		}
-	}
-
-	[data-slot="list-scroll"] {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		overflow-y: auto;
-		overscroll-behavior: contain;
-
-		[data-slot="list-empty-state"] {
-			display: flex;
-			padding: 32px 48px;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-			gap: 8px;
-			align-self: stretch;
-
-			[data-slot="list-message"] {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				gap: 2px;
-				max-width: 100%;
-				color: var(--text-weak);
-				white-space: nowrap;
-
-				/* text-14-regular */
-				font-family: var(--font-family-sans);
-				font-size: 14px;
-				font-style: normal;
-				font-weight: var(--font-weight-regular);
-				line-height: var(--line-height-large); /* 142.857% */
-				letter-spacing: var(--letter-spacing-normal);
-			}
-
-			[data-slot="list-filter"] {
-				color: var(--text-strong);
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-		}
-
-		[data-slot="list-group"] {
-			position: relative;
-			display: flex;
-			flex-direction: column;
-
-			&:last-child {
-				padding-bottom: 12px;
-			}
-
-			[data-slot="list-header"] {
-				display: flex;
-				z-index: 10;
-				padding: 8px 12px 8px 8px;
-				justify-content: space-between;
-				align-items: center;
-				align-self: stretch;
-				background: var(--surface-raised-stronger-non-alpha);
-				position: sticky;
-				top: 0;
-
-				color: var(--text-weak);
-
-				/* text-14-medium */
-				font-family: var(--font-family-sans);
-				font-size: 14px;
-				font-style: normal;
-				font-weight: var(--font-weight-medium);
-				line-height: var(--line-height-large); /* 142.857% */
-				letter-spacing: var(--letter-spacing-normal);
-
-				&::after {
-					content: "";
-					position: absolute;
-					top: 100%;
-					left: 0;
-					right: 0;
-					height: 16px;
-					background: linear-gradient(
-						to bottom,
-						var(--surface-raised-stronger-non-alpha),
-						transparent
-					);
-					pointer-events: none;
-					opacity: 0;
-					transition-property: opacity;
-					transition-duration: var(--transition-duration);
-					transition-timing-function: var(--transition-easing);
-				}
-
-				&[data-stuck="true"]::after {
-					opacity: 1;
-				}
-			}
-
-			[data-slot="list-items"] {
-				display: flex;
-				flex-direction: column;
-				align-items: flex-start;
-				align-self: stretch;
-
-				[data-slot="list-item"] {
-					display: flex;
-					position: relative;
-					width: 100%;
-					padding: 6px 8px 6px 8px;
-					align-items: center;
-					color: var(--text-strong);
-					scroll-margin-top: 28px;
-
-					/* text-14-medium */
-					font-family: var(--font-family-sans);
-					font-size: 14px;
-					font-style: normal;
-					font-weight: var(--font-weight-medium);
-					line-height: var(--line-height-large); /* 142.857% */
-					letter-spacing: var(--letter-spacing-normal);
-
-					[data-slot="list-item-selected-icon"] {
-						display: inline-flex;
-						align-items: center;
-						justify-content: center;
-						flex-shrink: 0;
-						aspect-ratio: 1 / 1;
-						[data-component="icon"] {
-							color: var(--icon-strong-base);
-						}
-					}
-
-					[name="check"] {
-						color: var(--icon-strong-base);
-					}
-
-					[data-slot="list-item-active-icon"] {
-						display: none;
-						align-items: center;
-						justify-content: center;
-						flex-shrink: 0;
-						aspect-ratio: 1 / 1;
-						[data-component="icon"] {
-							color: var(--icon-strong-base);
-						}
-					}
-
-					[data-slot="list-item-extra-icon"] {
-						color: var(--icon-base);
-						margin-left: -4px;
-					}
-
-					[data-slot="list-item-divider"] {
-						position: absolute;
-						bottom: 0;
-						left: var(--list-divider-inset, 16px);
-						right: var(--list-divider-inset, 16px);
-						height: 1px;
-						background: var(--border-weak-base);
-						pointer-events: none;
-					}
-
-					[data-slot="list-item"]:last-child [data-slot="list-item-divider"] {
-						display: none;
-					}
-
-					&[data-active="true"] {
-						border-radius: var(--radius-md);
-						background: var(--surface-raised-base-hover);
-						[data-slot="list-item-active-icon"] {
-							display: inline-flex;
-						}
-						[data-slot="list-item-extra-icon"] {
-							display: block !important;
-							color: var(--icon-strong-base) !important;
-						}
-					}
-					&:active {
-						background: var(--surface-raised-base-active);
-					}
-					&:focus-visible {
-						outline: none;
-					}
-				}
-
-				[data-slot="list-item-add"] {
-					display: flex;
-					position: relative;
-					width: 100%;
-					padding: 6px 8px 6px 8px;
-					align-items: center;
-					color: var(--text-strong);
-
-					/* text-14-medium */
-					font-family: var(--font-family-sans);
-					font-size: 14px;
-					font-style: normal;
-					font-weight: var(--font-weight-medium);
-					line-height: var(--line-height-large); /* 142.857% */
-					letter-spacing: var(--letter-spacing-normal);
-
-					[data-component="input"] {
-						width: 100%;
-					}
-				}
-			}
-		}
-	}
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  padding: 0 12px;
+
+  [data-slot="list-search-wrapper"] {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    margin-bottom: 4px;
+
+    > [data-component="icon-button"] {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+      background-color: transparent;
+      opacity: 0.5;
+      transition-property: opacity;
+      transition-duration: var(--transition-duration);
+      transition-timing-function: var(--transition-easing);
+
+      &:hover:not(:disabled),
+      &:focus-visible:not(:disabled),
+      &:active:not(:disabled) {
+        background-color: transparent;
+        opacity: 0.7;
+      }
+
+      &:hover:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-hover);
+      }
+
+      &:active:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-active);
+      }
+    }
+  }
+
+  [data-slot="list-search"] {
+    display: flex;
+    flex: 1;
+    padding: 8px;
+    align-items: center;
+    gap: 12px;
+
+    border-radius: var(--radius-md);
+    background: var(--surface-base);
+
+    [data-slot="list-search-container"] {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1 0 0;
+      max-height: 20px;
+
+      [data-slot="list-search-input"] {
+        width: 100%;
+
+        &[data-slot="input-input"] {
+          line-height: 20px;
+          max-height: 20px;
+        }
+      }
+    }
+
+    > [data-component="icon-button"] {
+      width: 20px;
+      height: 20px;
+      background-color: transparent;
+      opacity: 0.5;
+      transition-property: opacity;
+      transition-duration: var(--transition-duration);
+      transition-timing-function: var(--transition-easing);
+
+      &:hover:not(:disabled),
+      &:focus-visible:not(:disabled),
+      &:active:not(:disabled) {
+        background-color: transparent;
+        opacity: 0.7;
+      }
+
+      &:hover:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-hover);
+      }
+
+      &:active:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-active);
+      }
+    }
+
+    > [data-component="icon-button"] {
+      background-color: transparent;
+
+      &:hover:not(:disabled),
+      &:focus:not(:disabled),
+      &:active:not(:disabled) {
+        background-color: transparent;
+      }
+
+      &:hover:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-hover);
+      }
+
+      &:active:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-active);
+      }
+    }
+  }
+
+  [data-slot="list-scroll"] {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+
+    [data-slot="list-empty-state"] {
+      display: flex;
+      padding: 32px 48px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      align-self: stretch;
+
+      [data-slot="list-message"] {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 2px;
+        max-width: 100%;
+        color: var(--text-weak);
+        white-space: nowrap;
+
+        /* text-14-regular */
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: var(--font-weight-regular);
+        line-height: var(--line-height-large); /* 142.857% */
+        letter-spacing: var(--letter-spacing-normal);
+      }
+
+      [data-slot="list-filter"] {
+        color: var(--text-strong);
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    [data-slot="list-group"] {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      &:last-child {
+        padding-bottom: 12px;
+      }
+
+      [data-slot="list-header"] {
+        display: flex;
+        z-index: 10;
+        padding: 8px 12px 8px 8px;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+        background: var(--surface-raised-stronger-non-alpha);
+        position: sticky;
+        top: 0;
+
+        color: var(--text-weak);
+
+        /* text-14-medium */
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: var(--font-weight-medium);
+        line-height: var(--line-height-large); /* 142.857% */
+        letter-spacing: var(--letter-spacing-normal);
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          height: 16px;
+          background: linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha), transparent);
+          pointer-events: none;
+          opacity: 0;
+          transition-property: opacity;
+          transition-duration: var(--transition-duration);
+          transition-timing-function: var(--transition-easing);
+        }
+
+        &[data-stuck="true"]::after {
+          opacity: 1;
+        }
+      }
+
+      [data-slot="list-items"] {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+
+        [data-slot="list-item"] {
+          display: flex;
+          position: relative;
+          width: 100%;
+          padding: 6px 8px 6px 8px;
+          align-items: center;
+          color: var(--text-strong);
+          scroll-margin-top: 28px;
+
+          /* text-14-medium */
+          font-family: var(--font-family-sans);
+          font-size: 14px;
+          font-style: normal;
+          font-weight: var(--font-weight-medium);
+          line-height: var(--line-height-large); /* 142.857% */
+          letter-spacing: var(--letter-spacing-normal);
+
+          [data-slot="list-item-selected-icon"] {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            aspect-ratio: 1 / 1;
+            [data-component="icon"] {
+              color: var(--icon-strong-base);
+            }
+          }
+
+          [name="check"] {
+            color: var(--icon-strong-base);
+          }
+
+          [data-slot="list-item-active-icon"] {
+            display: none;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            aspect-ratio: 1 / 1;
+            [data-component="icon"] {
+              color: var(--icon-strong-base);
+            }
+          }
+
+          [data-slot="list-item-extra-icon"] {
+            color: var(--icon-base);
+            margin-left: -4px;
+          }
+
+          [data-slot="list-item-divider"] {
+            position: absolute;
+            bottom: 0;
+            left: var(--list-divider-inset, 16px);
+            right: var(--list-divider-inset, 16px);
+            height: 1px;
+            background: var(--border-weak-base);
+            pointer-events: none;
+          }
+
+          [data-slot="list-item"]:last-child [data-slot="list-item-divider"] {
+            display: none;
+          }
+
+          &[data-active="true"] {
+            border-radius: var(--radius-md);
+            background: var(--surface-raised-base-hover);
+            [data-slot="list-item-active-icon"] {
+              display: inline-flex;
+            }
+            [data-slot="list-item-extra-icon"] {
+              display: block !important;
+              color: var(--icon-strong-base) !important;
+            }
+          }
+          &:active {
+            background: var(--surface-raised-base-active);
+          }
+          &:focus-visible {
+            outline: none;
+          }
+        }
+
+        [data-slot="list-item-add"] {
+          display: flex;
+          position: relative;
+          width: 100%;
+          padding: 6px 8px 6px 8px;
+          align-items: center;
+          color: var(--text-strong);
+
+          /* text-14-medium */
+          font-family: var(--font-family-sans);
+          font-size: 14px;
+          font-style: normal;
+          font-weight: var(--font-weight-medium);
+          line-height: var(--line-height-large); /* 142.857% */
+          letter-spacing: var(--letter-spacing-normal);
+
+          [data-component="input"] {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
 }