@opencode-ai/ui 0.0.0-dev-202609010135 → 0.0.0-dev-18786

package/src/{components → data-display/diff-changes}/diff-changes.css

@@ -6,18 +6,27 @@
   justify-content: flex-end;
   align-items: center;
 
-  [data-slot="diff-changes-additions"] {
-    font-family: var(--font-family-mono);
-    font-feature-settings: var(--font-family-mono--font-feature-settings);
-    font-size: 14px;
+  [data-slot="diff-changes-additions"],
+  [data-slot="diff-changes-deletions"] {
+    font-size: 11px;
     font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: 0.05px;
     text-align: right;
-    color: var(--text-diff-add-base);
+  }
+
+  [data-slot="diff-changes-additions"] {
+    color: var(--v2-state-fg-success);
   }
 
+  [data-slot="diff-changes-deletions"] {
+    color: var(--v2-state-fg-danger);
+  }
+}
+
+[data-component="diff-changes"][data-appearance="standard"] {
+  [data-slot="diff-changes-additions"],
   [data-slot="diff-changes-deletions"] {
     font-family: var(--font-family-mono);
     font-feature-settings: var(--font-family-mono--font-feature-settings);
@@ -26,19 +35,13 @@
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
-    text-align: right;
-    color: var(--text-diff-delete-base);
   }
-}
 
-[data-component="diff-changes"][data-variant="bars"] {
-  width: 18px;
-  height: 14px;
-  flex-shrink: 0;
+  [data-slot="diff-changes-additions"] {
+    color: var(--text-diff-add-base);
+  }
 
-  svg {
-    display: block;
-    width: 100%;
-    height: 100%;
+  [data-slot="diff-changes-deletions"] {
+    color: var(--text-diff-delete-base);
   }
 }

package/src/{v2/components/diff-changes-v2.tsx → data-display/diff-changes/diff-changes.tsx}

@@ -1,8 +1,9 @@
 import { createMemo, Show } from "solid-js"
-import "./diff-changes-v2.css"
+import "./diff-changes.css"
 
 export function DiffChanges(props: {
   class?: string
+  appearance?: "standard" | "compact"
   changes: { additions: number; deletions: number } | { additions: number; deletions: number }[]
 }) {
   const additions = createMemo(() =>
@@ -19,7 +20,11 @@ export function DiffChanges(props: {
 
   return (
     <Show when={total() > 0}>
-      <div data-component="diff-changes" classList={{ [props.class ?? ""]: true }}>
+      <div
+        data-component="diff-changes"
+        data-appearance={props.appearance ?? "compact"}
+        classList={{ [props.class ?? ""]: true }}
+      >
         <span data-slot="diff-changes-additions">{`+${additions()}`}</span>
         <span data-slot="diff-changes-deletions">{`-${deletions()}`}</span>
       </div>

package/src/{v2/components/keybind-v2.css → data-display/keybind/keybind.css}

@@ -27,6 +27,7 @@
   justify-content: center;
   align-items: center;
   padding: 0;
+  padding-inline: 4px;
   gap: 4px;
   min-width: 14px;
   height: 14px;
@@ -48,7 +49,6 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  min-width: 14px;
   height: 11px;
   padding: 0;
   flex: none;

package/src/{v2/components/keybind-v2.tsx → data-display/keybind/keybind.tsx}

@@ -1,12 +1,12 @@
 import { type ComponentProps, For, splitProps } from "solid-js"
-import "./keybind-v2.css"
+import "./keybind.css"
 
-export interface KeybindV2Props extends ComponentProps<"div"> {
+export interface KeybindProps extends ComponentProps<"div"> {
   keys: string[]
   variant?: "neutral" | "ghost"
 }
 
-export function KeybindV2(props: KeybindV2Props) {
+export function Keybind(props: KeybindProps) {
   const [local, rest] = splitProps(props, ["keys", "variant", "class", "classList"])
   return (
     <div

package/src/{v2/components/line-comment-v2.css → data-display/line-comment/line-comment.css}

@@ -49,7 +49,7 @@
   font-size: 13px;
   font-style: normal;
   font-weight: 440;
-  line-height: 1;
+  line-height: var(--line-height-compact);
   letter-spacing: -0.04px;
   color: var(--v2-text-text-base);
   font-variation-settings: "slnt" 0;
@@ -59,7 +59,7 @@
   font-size: 11px;
   font-style: normal;
   font-weight: 530;
-  line-height: 1;
+  line-height: var(--line-height-tight);
   letter-spacing: 0.05px;
   color: var(--v2-text-text-faint);
   font-variation-settings: "slnt" 0;
@@ -138,7 +138,7 @@
   font-size: 13px;
   font-style: normal;
   font-weight: 530;
-  line-height: 1;
+  line-height: var(--line-height-compact);
   letter-spacing: -0.04px;
   color: var(--v2-text-text-base);
   user-select: none;

package/src/{v2/components/line-comment-v2.tsx → data-display/line-comment/line-comment.tsx}

@@ -1,12 +1,12 @@
 import { For, Show, createSignal, onMount, splitProps, type ComponentProps, type JSX } from "solid-js"
-import { FileIcon } from "../../components/file-icon"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { useI18n } from "../../context/i18n"
 import { useFilteredList } from "../../hooks"
-import { ButtonV2 } from "./button-v2"
-import "./line-comment-v2.css"
+import { Button } from "@opencode-ai/ui/button"
+import "./line-comment.css"
 
 /** Horizontal “more” glyph for the display-card overflow control (Figma outline-dots). */
-export function LineCommentV2OverflowIcon(props: ComponentProps<"svg">) {
+export function LineCommentOverflowIcon(props: ComponentProps<"svg">) {
   return (
     <svg
       {...props}
@@ -24,16 +24,16 @@ export function LineCommentV2OverflowIcon(props: ComponentProps<"svg">) {
   )
 }
 
-export interface LineCommentV2Props extends ComponentProps<"div"> {
+export interface LineCommentProps extends ComponentProps<"div"> {
   /** Main comment body (text or rich content). */
   comment: JSX.Element
   /** Line / selection context (e.g. “Comment on line 40”). */
   selection: JSX.Element
-  /** Typically an overflow menu trigger; use `LineCommentV2OverflowIcon` inside `line-comment-v2-overflow`. */
+  /** Typically an overflow menu trigger; use `LineCommentOverflowIcon` inside `line-comment-v2-overflow`. */
   actions?: JSX.Element
 }
 
-export function LineCommentV2(props: LineCommentV2Props) {
+export function LineComment(props: LineCommentProps) {
   const [local, rest] = splitProps(props, ["comment", "selection", "actions", "class", "classList"])
   return (
     <div
@@ -56,11 +56,11 @@ export function LineCommentV2(props: LineCommentV2Props) {
   )
 }
 
-export type LineCommentEditorV2Mention = {
+export type LineCommentEditorMention = {
   items: (query: string) => string[] | Promise<string[]>
 }
 
-export interface LineCommentEditorV2Props extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
+export interface LineCommentEditorProps extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
   /** Visible field label above the textarea (default: “Comment”). */
   heading?: JSX.Element | string
   value: string
@@ -73,7 +73,7 @@ export interface LineCommentEditorV2Props extends Omit<ComponentProps<"div">, "c
   cancelLabel?: string
   submitLabel?: string
   autofocus?: boolean
-  mention?: LineCommentEditorV2Mention
+  mention?: LineCommentEditorMention
 }
 
 function pathFilename(path: string) {
@@ -86,7 +86,7 @@ function pathDirectory(path: string) {
   return index === -1 ? "" : path.slice(0, index + 1)
 }
 
-export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
+export function LineCommentEditor(props: LineCommentEditorProps) {
   const i18n = useI18n()
   let textareaRef: HTMLTextAreaElement | undefined
   const [mentionOpen, setMentionOpen] = createSignal(false)
@@ -212,9 +212,11 @@ export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
               textareaRef = el
             }}
             data-slot="line-comment-v2-textarea"
+            dir="auto"
             rows={local.rows ?? 3}
             placeholder={local.placeholder ?? i18n.t("ui.lineComment.contextPlaceholder")}
             value={local.value}
+            style={{ "unicode-bidi": "plaintext", "text-align": "start" }}
             onInput={(e) => {
               local.onInput(e.currentTarget.value)
               syncMention()
@@ -292,12 +294,12 @@ export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
         <div data-slot="line-comment-v2-footer">
           <div data-slot="line-comment-v2-footer-meta">{local.selection}</div>
           <div data-slot="line-comment-v2-footer-actions">
-            <ButtonV2 type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
+            <Button type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
               {local.cancelLabel ?? i18n.t("ui.lineComment.cancel")}
-            </ButtonV2>
-            <ButtonV2 type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
+            </Button>
+            <Button type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
               {local.submitLabel ?? i18n.t("ui.lineComment.submit")}
-            </ButtonV2>
+            </Button>
           </div>
         </div>
       </div>

package/src/{v2/components/project-avatar-v2.tsx → data-display/project-avatar/project-avatar.tsx}

@@ -1,5 +1,5 @@
 import { type ComponentProps, splitProps, Show } from "solid-js"
-import "./project-avatar-v2.css"
+import "./project-avatar.css"
 
 const segmenter =
   typeof Intl !== "undefined" && "Segmenter" in Intl

package/src/{v2/components/loader-v2.tsx → feedback/loader/loader.tsx}

@@ -1,7 +1,7 @@
 import { splitProps, type ComponentProps } from "solid-js"
-import "./loader-v2.css"
+import "./loader.css"
 
-export function LoaderV2(props: ComponentProps<"svg">) {
+export function Loader(props: ComponentProps<"svg">) {
   const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
   return (
     <svg

package/src/feedback/progress-circle/progress-circle.css

@@ -0,0 +1,28 @@
+[data-component="progress-circle"] {
+  display: block;
+  transform: rotate(-90deg);
+}
+
+[data-component="progress-circle"][data-appearance="compact"] [data-slot="progress-circle-background"] {
+  stroke: var(--v2-background-bg-layer-04);
+}
+
+[data-component="progress-circle"][data-appearance="compact"] [data-slot="progress-circle-progress"] {
+  stroke: var(--v2-icon-icon-base);
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-background"] {
+  stroke: var(--progress-circle-background, var(--border-weak-base));
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-background-overlay"] {
+  stroke: var(--progress-circle-background-overlay, transparent);
+}
+
+[data-component="progress-circle"][data-appearance="indicator"] [data-slot="progress-circle-progress"] {
+  stroke: var(--progress-circle-progress, var(--border-active));
+}
+
+[data-component="progress-circle"] [data-slot="progress-circle-progress"] {
+  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
+}

package/src/feedback/progress-circle/progress-circle.tsx

@@ -0,0 +1,64 @@
+import { type ComponentProps, createMemo, Show, splitProps } from "solid-js"
+import "./progress-circle.css"
+
+export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList" | "style"> {
+  percentage: number
+  appearance?: "compact" | "indicator"
+  size?: number
+  strokeWidth?: number
+}
+
+export function ProgressCircle(props: ProgressCircleProps) {
+  const [local, rest] = splitProps(props, ["percentage", "appearance", "size", "strokeWidth", "class", "classList"])
+
+  const appearance = () => local.appearance ?? "compact"
+  const viewBoxSize = () => (appearance() === "indicator" ? 16 : 14)
+  const size = () => local.size ?? viewBoxSize()
+  const strokeWidth = () => local.strokeWidth ?? (appearance() === "indicator" ? 3 : 1.5)
+  const center = () => viewBoxSize() / 2
+  const radius = () => center() - strokeWidth() / 2
+  const circumference = createMemo(() => 2 * Math.PI * radius())
+  const offset = createMemo(() => circumference() * (1 - Math.max(0, Math.min(100, local.percentage || 0)) / 100))
+
+  return (
+    <svg
+      {...rest}
+      width={size()}
+      height={size()}
+      viewBox={`0 0 ${viewBoxSize()} ${viewBoxSize()}`}
+      fill="none"
+      data-component="progress-circle"
+      data-appearance={appearance()}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <circle
+        cx={center()}
+        cy={center()}
+        r={radius()}
+        data-slot="progress-circle-background"
+        stroke-width={strokeWidth()}
+      />
+      <Show when={appearance() === "indicator"}>
+        <circle
+          cx={center()}
+          cy={center()}
+          r={radius()}
+          data-slot="progress-circle-background-overlay"
+          stroke-width={strokeWidth()}
+        />
+      </Show>
+      <circle
+        cx={center()}
+        cy={center()}
+        r={radius()}
+        data-slot="progress-circle-progress"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
+      />
+    </svg>
+  )
+}

package/src/{v2/components/toast-v2.tsx → feedback/toast/toast.tsx}

@@ -4,12 +4,12 @@ import type { ComponentProps, JSX } from "solid-js"
 import { createContext, onCleanup, onMount, splitProps, useContext } from "solid-js"
 import { Portal } from "solid-js/web"
 import { useI18n } from "../../context/i18n"
-import "./button-v2.css"
-import "./toast-v2.css"
+import "../../actions/button/button.css"
+import "./toast.css"
 
-export interface ToastV2RegionProps extends ToasterProps {}
+export interface ToastRegionProps extends ToasterProps {}
 
-function ToastV2Region(props: ToastV2RegionProps) {
+function ToastRegion(props: ToastRegionProps) {
   const i18n = useI18n()
   const [local, rest] = splitProps(props, ["class", "className", "style", "toastOptions", "swipeDirections"])
   onMount(() => {
@@ -67,40 +67,40 @@ function ToastV2Region(props: ToastV2RegionProps) {
   )
 }
 
-const ToastV2Context = createContext<number>()
+const ToastContext = createContext<number>()
 
-export interface ToastV2RootComponentProps {
+export interface ToastRootComponentProps {
   toastId: number
   children?: JSX.Element
 }
 
-function ToastV2Root(props: ToastV2RootComponentProps) {
-  return <ToastV2Context.Provider value={props.toastId}>{props.children}</ToastV2Context.Provider>
+function ToastRoot(props: ToastRootComponentProps) {
+  return <ToastContext.Provider value={props.toastId}>{props.children}</ToastContext.Provider>
 }
 
-function ToastV2Icon(props: ComponentProps<"div">) {
+function ToastIcon(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-icon" {...props} />
 }
 
-function ToastV2Content(props: ComponentProps<"div">) {
+function ToastContent(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-content" {...props} />
 }
 
-function ToastV2Title(props: ComponentProps<"div">) {
+function ToastTitle(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-title" {...props} />
 }
 
-function ToastV2Description(props: ComponentProps<"div">) {
+function ToastDescription(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-description" {...props} />
 }
 
-function ToastV2Actions(props: ComponentProps<"div">) {
+function ToastActions(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-actions" {...props} />
 }
 
-function ToastV2CloseButton(props: ComponentProps<"button">) {
+function ToastCloseButton(props: ComponentProps<"button">) {
   const i18n = useI18n()
-  const toastId = useContext(ToastV2Context)
+  const toastId = useContext(ToastContext)
   const [local, rest] = splitProps(props, ["children", "onClick"])
   return (
     <button
@@ -110,7 +110,7 @@ function ToastV2CloseButton(props: ComponentProps<"button">) {
       {...rest}
       onClick={(event) => {
         if (typeof local.onClick === "function") local.onClick(event)
-        if (!event.defaultPrevented && toastId !== undefined) toasterV2.dismiss(toastId)
+        if (!event.defaultPrevented && toastId !== undefined) toaster.dismiss(toastId)
       }}
     >
       {local.children ?? <CloseIcon />}
@@ -127,19 +127,19 @@ function CloseIcon() {
   )
 }
 
-export const ToastV2 = Object.assign(ToastV2Root, {
-  Region: ToastV2Region,
-  Icon: ToastV2Icon,
-  Content: ToastV2Content,
-  Title: ToastV2Title,
-  Description: ToastV2Description,
-  Actions: ToastV2Actions,
-  CloseButton: ToastV2CloseButton,
+export const Toast = Object.assign(ToastRoot, {
+  Region: ToastRegion,
+  Icon: ToastIcon,
+  Content: ToastContent,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Actions: ToastActions,
+  CloseButton: ToastCloseButton,
 })
 
 let toastV2Id = 0
 
-export const toasterV2 = {
+export const toaster = {
   show(render: (props: { toastId: number }) => JSX.Element, options?: { duration?: number; persistent?: boolean }) {
     const toastId = --toastV2Id
     toast.custom((id) => render({ toastId: Number(id) }), {
@@ -152,43 +152,43 @@ export const toasterV2 = {
   },
   dismiss(toastId?: number) {
     if (toastId === undefined) {
-      activeToastV2ByKey.clear()
-      activeToastV2ById.clear()
+      activeToastByKey.clear()
+      activeToastById.clear()
     } else {
-      releaseToastV2(activeToastV2ById.get(toastId))
+      releaseToast(activeToastById.get(toastId))
     }
     return toast.dismiss(toastId)
   },
 }
 
-export interface ToastV2Action {
+export interface ToastAction {
   label: string
   variant?: "primary" | "secondary"
   onClick: "dismiss" | (() => void)
 }
 
-export interface ToastV2Options {
+export interface ToastOptions {
   title?: string
   description?: string
   icon?: JSX.Element
   variant?: "default" | "success" | "error" | "loading"
   duration?: number
   persistent?: boolean
-  actions?: ToastV2Action[]
+  actions?: ToastAction[]
 }
 
-interface ActiveToastV2 {
+interface ActiveToast {
   id: number
   key: string
-  options: ToastV2Options
+  options: ToastOptions
   actions?: JSX.Element
 }
 
-const activeToastV2ByKey = new Map<string, ActiveToastV2>()
-const activeToastV2ById = new Map<number, ActiveToastV2>()
+const activeToastByKey = new Map<string, ActiveToast>()
+const activeToastById = new Map<number, ActiveToast>()
 
-export function showToastV2(options: ToastV2Options | string) {
-  const opts: ToastV2Options = typeof options === "string" ? { description: options } : options
+export function showToast(options: ToastOptions | string) {
+  const opts: ToastOptions = typeof options === "string" ? { description: options } : options
   const key = JSON.stringify({
     title: opts.title,
     description: opts.description,
@@ -197,29 +197,29 @@ export function showToastV2(options: ToastV2Options | string) {
     persistent: opts.persistent,
     actions: opts.actions?.map((action) => [action.label, action.variant]),
   })
-  const active = activeToastV2ByKey.get(key)
+  const active = activeToastByKey.get(key)
   const toasts = toast.getToasts()
 
   if (active && toasts.at(-1)?.id === active.id) {
     active.options = opts
-    publishToastV2(active)
-    pulseToastV2(active.id)
+    publishToast(active)
+    pulseToast(active.id)
     return active.id
   }
 
-  if (active && toasts.some((item) => item.id === active.id)) toasterV2.dismiss(active.id)
-  releaseToastV2(active)
+  if (active && toasts.some((item) => item.id === active.id)) toaster.dismiss(active.id)
+  releaseToast(active)
 
-  const entry: ActiveToastV2 = { id: --toastV2Id, key, options: opts }
-  entry.actions = createToastV2Actions(entry)
-  activeToastV2ByKey.set(key, entry)
-  activeToastV2ById.set(entry.id, entry)
-  publishToastV2(entry)
+  const entry: ActiveToast = { id: --toastV2Id, key, options: opts }
+  entry.actions = createToastActions(entry)
+  activeToastByKey.set(key, entry)
+  activeToastById.set(entry.id, entry)
+  publishToast(entry)
   return entry.id
 }
 
-function publishToastV2(entry: ActiveToastV2) {
-  const release = () => releaseToastV2(entry)
+function publishToast(entry: ActiveToast) {
+  const release = () => releaseToast(entry)
   toast(entry.options.title ?? "", {
     id: entry.id,
     description: entry.options.description,
@@ -235,10 +235,12 @@ function publishToastV2(entry: ActiveToastV2) {
   })
 }
 
-function createToastV2Actions(entry: ActiveToastV2) {
+function createToastActions(entry: ActiveToast) {
   if (!entry.options.actions?.length) return undefined
   return (
-    <ToastV2.Actions>
+    <Toast.Actions>
+      {/* Static map, not <For>: this JSX is created imperatively outside any Solid
+          root, where a <For> computation would never be disposed. */}
       {entry.options.actions.map((action, index) => (
         <button
           type="button"
@@ -249,17 +251,17 @@ function createToastV2Actions(entry: ActiveToastV2) {
           onClick={() => {
             const onClick = entry.options.actions?.[index]?.onClick
             if (typeof onClick === "function") onClick()
-            toasterV2.dismiss(entry.id)
+            toaster.dismiss(entry.id)
           }}
         >
           {action.label}
         </button>
       ))}
-    </ToastV2.Actions>
+    </Toast.Actions>
   )
 }
 
-function pulseToastV2(toastId: number) {
+function pulseToast(toastId: number) {
   if (typeof document === "undefined" || typeof requestAnimationFrame === "undefined") return
   requestAnimationFrame(() => {
     const element = document.querySelector<HTMLElement>(`[data-testid="toast-v2-${toastId}"]`)
@@ -268,13 +270,13 @@ function pulseToastV2(toastId: number) {
   })
 }
 
-function releaseToastV2(entry: ActiveToastV2 | undefined) {
+function releaseToast(entry: ActiveToast | undefined) {
   if (!entry) return
-  if (activeToastV2ByKey.get(entry.key) === entry) activeToastV2ByKey.delete(entry.key)
-  if (activeToastV2ById.get(entry.id) === entry) activeToastV2ById.delete(entry.id)
+  if (activeToastByKey.get(entry.key) === entry) activeToastByKey.delete(entry.key)
+  if (activeToastById.get(entry.id) === entry) activeToastById.delete(entry.id)
 }
 
-export interface ToastV2PromiseOptions<T, U = unknown> {
+export interface ToastPromiseOptions<T, U = unknown> {
   loading?: JSX.Element
   success?: (data: T) => JSX.Element
   error?: (error: U) => JSX.Element

package/src/{components → forms/checkbox}/checkbox.css

@@ -32,7 +32,6 @@
       border-color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
       background-color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
       box-shadow 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
-    /* background-color: var(--surface-weak); */
   }
 
   [data-slot="checkbox-checkbox-indicator"] {
@@ -49,19 +48,14 @@
       transform 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
   }
 
-  /* [data-slot="checkbox-checkbox-content"] { */
-  /* } */
-
   [data-slot="checkbox-checkbox-label"] {
     user-select: none;
     color: var(--text-base);
-
-    /* text-12-regular */
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-style: normal;
     font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large); /* 166.667% */
+    line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
   }