@opencode-ai/ui 0.0.0-dev-18909 → 0.0.0-dev-202609021553

package/src/styles/index.css

@@ -6,31 +6,47 @@
 @import "./base.css" layer(base);
 @import "katex/dist/katex.min.css" layer(base);
 
-@import "../data-display/accordion/accordion.css" layer(components);
+@import "../components/accordion.css" layer(components);
 @import "../components/animated-number.css" layer(components);
 @import "../components/app-icon.css" layer(components);
+@import "../components/avatar.css" layer(components);
+@import "../components/button.css" layer(components);
 @import "../components/card.css" layer(components);
-@import "../forms/checkbox/checkbox.css" layer(components);
+@import "../components/checkbox.css" layer(components);
 @import "../components/collapsible.css" layer(components);
+@import "../components/diff-changes.css" layer(components);
 @import "../components/context-menu.css" layer(components);
+@import "../components/dropdown-menu.css" layer(components);
+@import "../components/dialog.css" layer(components);
 @import "../components/file-icon.css" layer(components);
 @import "../components/hover-card.css" layer(components);
 @import "../components/provider-icon.css" layer(components);
 @import "../components/dock-surface.css" layer(components);
+@import "../components/icon.css" layer(components);
+@import "../components/icon-button.css" layer(components);
 @import "../components/image-preview.css" layer(components);
-@import "../forms/inline-input/inline-input.css" layer(components);
+@import "../components/keybind.css" layer(components);
 @import "../components/text-field.css" layer(components);
+@import "../components/inline-input.css" layer(components);
 @import "../components/list.css" layer(components);
 @import "../components/logo.css" layer(components);
 @import "../components/popover.css" layer(components);
 @import "../components/progress.css" layer(components);
+@import "../components/progress-circle.css" layer(components);
+@import "../components/radio-group.css" layer(components);
 @import "../components/resize-handle.css" layer(components);
+@import "../components/select.css" layer(components);
 @import "../components/spinner.css" layer(components);
+@import "../components/switch.css" layer(components);
 @import "../components/scroll-view.css" layer(components);
 @import "../components/sticky-accordion-header.css" layer(components);
-@import "../navigation/tabs/tabs.css" layer(components);
+@import "../components/tabs.css" layer(components);
+@import "../components/tag.css" layer(components);
 @import "../components/text-reveal.css" layer(components);
 @import "../components/text-strikethrough.css" layer(components);
+@import "../components/text-shimmer.css" layer(components);
+@import "../components/toast.css" layer(components);
+@import "../components/tooltip.css" layer(components);
 @import "../components/typewriter.css" layer(components);
 
 @import "./utilities.css" layer(utilities);

package/src/styles/tailwind/colors.css

@@ -252,7 +252,6 @@
   --color-v2-text-text-code-accent: var(--v2-text-text-code-accent);
   --color-v2-icon-icon-base: var(--v2-icon-icon-base);
   --color-v2-icon-icon-muted: var(--v2-icon-icon-muted);
-  --color-v2-icon-icon-faint: var(--v2-icon-icon-faint);
   --color-v2-icon-icon-inverse: var(--v2-icon-icon-inverse);
   --color-v2-icon-icon-contrast: var(--v2-icon-icon-contrast);
   --color-v2-icon-icon-accent: var(--v2-icon-icon-accent);

package/src/styles/tailwind/index.css

@@ -1,21 +1,7 @@
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities) source(none);
-@source "../../../../app/src";
-@source "../../../../app/index.html";
-@source not "../../../../app/src/i18n";
-@source not "../../../../app/src/**/*.test.{ts,tsx}";
-@source "../../../../desktop/src/renderer";
-@source not "../../../../desktop/src/renderer/**/*.test.{ts,tsx}";
-@source "../../../../enterprise/src";
-@source "../../../../session-ui/src";
-@source not "../../../../session-ui/src/**/*.test.{ts,tsx}";
-@source "../../../../storybook";
-@source "../../../src";
-@source not "../../../src/assets";
-@source not "../../../src/i18n";
-@source not "../../../src/**/*.test.{ts,tsx}";
+@import "tailwindcss/utilities.css" layer(utilities) source("../../../../");
 @import "./utilities.css";
 
 @import "../index.css";
@@ -65,9 +51,6 @@
   --leading-lg: var(--line-height-large);
   --leading-xl: var(--line-height-x-large);
   --leading-2xl: var(--line-height-2x-large);
-  --leading-text-tight: var(--line-height-tight);
-  --leading-text-compact: var(--line-height-compact);
-  --leading-text-base: var(--line-height-base);
 
   --tracking-normal: var(--letter-spacing-normal);
   --tracking-tight: var(--letter-spacing-tight);

package/src/styles/theme.css

@@ -1,8 +1,8 @@
 :root {
-  --font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-family-sans--font-feature-settings: normal;
   --font-family-mono:
-    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-family-mono--font-feature-settings: normal;
 
   --font-size-small: 13px;

package/src/theme/context.tsx

@@ -84,9 +84,8 @@ const names: Record<string, string> = {
 }
 const oc2Theme = oc2ThemeJson as DesktopTheme
 
-function resolveStoredTheme(id: string | null | undefined, registered?: Record<string, DesktopTheme>) {
-  if (id === "oc-2" || (id && (knownThemes().has(id) || registered?.[id]))) return id
-  return "oc-2"
+function normalize(id: string | null | undefined) {
+  return id === "oc-1" ? "oc-2" : id
 }
 
 function read(key: string) {
@@ -178,12 +177,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     defaultTheme?: string
     onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark", scheme: ColorScheme) => void
   }) => {
-    const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
-    const themeId = resolveStoredTheme(rawTheme)
-    if (rawTheme && rawTheme !== themeId) {
-      write(STORAGE_KEYS.THEME_ID, themeId)
-      clear()
-    }
+    const themeId = normalize(read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme) ?? "oc-2"
     const colorScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
     const mode = colorScheme === "system" ? getSystemMode() : colorScheme
     const [store, setStore] = createStore({
@@ -200,7 +194,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     const loads = new Map<string, Promise<DesktopTheme | undefined>>()
 
     const load = (id: string) => {
-      const next = id
+      const next = normalize(id)
       if (!next) return Promise.resolve(undefined)
       const hit = store.themes[next]
       if (hit) return Promise.resolve(hit)
@@ -239,11 +233,9 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
 
     const onStorage = (e: StorageEvent) => {
       if (e.key === STORAGE_KEYS.THEME_ID && e.newValue) {
-        const next = resolveStoredTheme(e.newValue, store.themes)
-        if (next !== e.newValue) {
-          write(STORAGE_KEYS.THEME_ID, next)
-          clear()
-        }
+        const next = normalize(e.newValue)
+        if (!next) return
+        if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
         setStore("themeId", next)
         if (next === "oc-2") {
           clear()
@@ -270,8 +262,8 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       }
       makeEventListener(mediaQuery, "change", onMedia)
 
-      const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
-      const savedTheme = resolveStoredTheme(rawTheme, store.themes)
+      const rawTheme = read(STORAGE_KEYS.THEME_ID)
+      const savedTheme = normalize(rawTheme ?? props.defaultTheme) ?? "oc-2"
       const savedScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
       if (rawTheme && rawTheme !== savedTheme) {
         write(STORAGE_KEYS.THEME_ID, savedTheme)
@@ -293,7 +285,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     })
 
     const setTheme = (id: string) => {
-      const next = id
+      const next = normalize(id)
       if (!next) {
         console.warn(`Theme "${id}" not found`)
         return
@@ -333,7 +325,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       setColorScheme,
       registerTheme: (theme: DesktopTheme) => setStore("themes", theme.id, theme),
       previewTheme: (id: string) => {
-        const next = id
+        const next = normalize(id)
         if (!next) return
         if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
         setStore("previewThemeId", next)

package/src/theme/themes/oc-2.json

@@ -25,7 +25,7 @@
       "border-weak-base": "#DBDBDB",
       "border-weaker-base": "#E8E8E8",
       "icon-base": "#8F8F8F",
-      "icon-weak-base": "C7C7C7",
+      "icon-weak-base": "#C7C7C7",
       "surface-raised-base": "#F3F3F3",
       "surface-raised-base-hover": "#EDEDED",
       "surface-base": "#F8F8F8",
@@ -176,7 +176,6 @@
       "v2-text-text-code-accent": "var(--v2-blue-900)",
       "v2-icon-icon-base": "var(--v2-grey-800)",
       "v2-icon-icon-muted": "var(--v2-grey-600)",
-      "v2-icon-icon-faint": "var(--v2-grey-500)",
       "v2-icon-icon-inverse": "var(--v2-grey-50)",
       "v2-icon-icon-contrast": "var(--v2-grey-100)",
       "v2-icon-icon-accent": "var(--v2-blue-600)",
@@ -412,7 +411,6 @@
       "v2-text-text-code-accent": "var(--v2-blue-400)",
       "v2-icon-icon-base": "var(--v2-grey-400)",
       "v2-icon-icon-muted": "var(--v2-grey-600)",
-      "v2-icon-icon-faint": "var(--v2-grey-500)",
       "v2-icon-icon-inverse": "var(--v2-grey-1100)",
       "v2-icon-icon-contrast": "var(--v2-grey-100)",
       "v2-icon-icon-accent": "var(--v2-blue-400)",

package/src/theme/v2/foreground.ts

@@ -52,7 +52,6 @@ export function mapV2Foreground(
     "v2-text-text-faint": shift(body, { l: isDark ? -0.2 : 0.21, c: isDark ? 0.78 : 0.72 }),
     "v2-icon-icon-base": greyRef(pickGrey(primitives, bgBase, 7, isDark ? 400 : 800)),
     "v2-icon-icon-muted": greyRef(pickGrey(primitives, bgBase, 3, 600)),
-    "v2-icon-icon-faint": greyRef(pickGrey(primitives, bgBase, 1.5, 500)),
     "v2-icon-icon-inverse": greyRef(pickGrey(primitives, bgInverse, 7, inverseTarget)),
     "v2-icon-icon-contrast": greyRef(pickGrey(primitives, bgContrast, 7, 100)),
     "v2-icon-icon-accent": isDark ? "var(--v2-blue-400)" : "var(--v2-blue-600)",

package/src/theme/v2/mapping.ts

@@ -42,13 +42,11 @@ const light: Record<string, V2ColorValue> = {
   "v2-background-bg-contrast": ref("v2-grey-900"),
   "v2-background-bg-button-neutral": ref("v2-grey-100"),
   "v2-background-bg-accent": ref("v2-blue-600"),
-  "v2-background-bg-code-path": ref("v2-cyan-100"),
   "v2-text-text-inverse": ref("v2-grey-100"),
   "v2-text-text-contrast": ref("v2-grey-100"),
   "v2-text-text-accent": ref("v2-blue-600"),
   "v2-text-text-accent-hover": ref("v2-blue-700"),
   "v2-text-text-code-accent": ref("v2-blue-900"),
-  "v2-text-text-code-path": ref("v2-cyan-900"),
   "v2-border-border-muted": ref("v2-alpha-dark-8"),
   "v2-border-border-base": ref("v2-alpha-dark-10"),
   "v2-border-border-strong": ref("v2-alpha-dark-20"),
@@ -109,13 +107,11 @@ const dark: Record<string, V2ColorValue> = {
   "v2-background-bg-contrast": ref("v2-grey-700"),
   "v2-background-bg-button-neutral": ref("v2-alpha-light-6"),
   "v2-background-bg-accent": ref("v2-blue-600"),
-  "v2-background-bg-code-path": ref("v2-cyan-1200"),
   "v2-text-text-inverse": ref("v2-grey-1000"),
   "v2-text-text-contrast": ref("v2-grey-100"),
   "v2-text-text-accent": ref("v2-blue-400"),
   "v2-text-text-accent-hover": ref("v2-blue-300"),
   "v2-text-text-code-accent": ref("v2-blue-400"),
-  "v2-text-text-code-path": ref("v2-cyan-400"),
   "v2-border-border-muted": ref("v2-alpha-light-8"),
   "v2-border-border-base": ref("v2-alpha-light-10"),
   "v2-border-border-strong": ref("v2-alpha-light-20"),

package/src/v2/components/accordion-v2.css

@@ -0,0 +1,139 @@
+[data-component="accordion-v2"] {
+  --accordion-v2-fg: var(--v2-text-text-base);
+  --accordion-v2-icon: var(--v2-icon-icon-base);
+  --accordion-v2-border: var(--v2-border-border-strong);
+  --accordion-v2-bg: var(--v2-background-bg-base);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  width: 100%;
+  background: var(--accordion-v2-bg);
+  border-radius: 6px;
+  box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
+  overflow: hidden;
+
+  color: var(--accordion-v2-fg);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="accordion-v2-item"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  background: var(--accordion-v2-bg);
+  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
+}
+
+[data-component="accordion-v2-item"]:last-child {
+  box-shadow: none;
+}
+
+[data-slot="accordion-v2-header"] {
+  display: flex;
+  margin: 0;
+}
+
+[data-component="accordion-v2-trigger"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+
+  width: 100%;
+  min-height: 30px;
+  padding: 0 12px;
+
+  background: transparent;
+  border: 0;
+  outline: none;
+  cursor: default;
+  user-select: none;
+
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+  color: var(--accordion-v2-fg);
+  text-align: left;
+}
+
+[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-trigger-content"] {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  height: 30px;
+}
+
+[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-chevron"] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  color: var(--accordion-v2-icon);
+  transition: transform 150ms ease;
+}
+
+[data-component="accordion-v2-trigger"][data-expanded] [data-slot="accordion-v2-chevron"] {
+  transform: rotate(180deg);
+}
+
+[data-component="accordion-v2-item"][data-expanded] [data-component="accordion-v2-trigger"] {
+  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
+}
+
+[data-component="accordion-v2-trigger"][data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[data-component="accordion-v2-content"] {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 140%;
+  color: var(--accordion-v2-fg);
+}
+
+[data-component="accordion-v2-content"][data-expanded] {
+  animation: accordion-v2-down 180ms ease-out;
+}
+
+[data-component="accordion-v2-content"][data-closed] {
+  animation: accordion-v2-up 180ms ease-out;
+}
+
+[data-component="accordion-v2-content"] [data-slot="accordion-v2-content-inner"] {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  padding: 12px;
+}
+
+@keyframes accordion-v2-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-collapsible-content-height);
+  }
+}
+
+@keyframes accordion-v2-up {
+  from {
+    height: var(--kb-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/v2/components/accordion-v2.tsx

@@ -0,0 +1,86 @@
+import { Accordion as Kobalte } from "@kobalte/core/accordion"
+import { Show, splitProps, type Component, type ComponentProps, type ParentProps } from "solid-js"
+import "./accordion-v2.css"
+
+const ChevronDown: Component = () => (
+  <svg
+    data-slot="accordion-v2-chevron"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path d="M4 5.5L7 8.5L10 5.5" stroke="currentColor" />
+  </svg>
+)
+
+export interface AccordionV2Props extends ComponentProps<typeof Kobalte> {}
+export interface AccordionV2ItemProps extends ComponentProps<typeof Kobalte.Item> {}
+export interface AccordionV2HeaderProps extends ComponentProps<typeof Kobalte.Header> {}
+export interface AccordionV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+  hideChevron?: boolean
+}
+export interface AccordionV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
+function AccordionV2Root(props: ParentProps<AccordionV2Props>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return <Kobalte {...r} data-component="accordion-v2" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }} />
+}
+
+function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte.Item
+      {...r}
+      data-component="accordion-v2-item"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+function AccordionV2Header(props: ParentProps<AccordionV2HeaderProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Header {...r} data-slot="accordion-v2-header" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
+      {s.children}
+    </Kobalte.Header>
+  )
+}
+
+function AccordionV2Trigger(props: ParentProps<AccordionV2TriggerProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children", "hideChevron"])
+  return (
+    <Kobalte.Trigger
+      {...r}
+      data-component="accordion-v2-trigger"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <span data-slot="accordion-v2-trigger-content">{s.children}</span>
+      <Show when={!s.hideChevron}>
+        <ChevronDown />
+      </Show>
+    </Kobalte.Trigger>
+  )
+}
+
+function AccordionV2Content(props: ParentProps<AccordionV2ContentProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Content
+      {...r}
+      data-component="accordion-v2-content"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <div data-slot="accordion-v2-content-inner">{s.children}</div>
+    </Kobalte.Content>
+  )
+}
+
+export const AccordionV2 = Object.assign(AccordionV2Root, {
+  Item: AccordionV2Item,
+  Header: AccordionV2Header,
+  Trigger: AccordionV2Trigger,
+  Content: AccordionV2Content,
+})

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

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

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

@@ -31,22 +31,3 @@
   background: var(--v2-background-bg-accent);
   color: var(--v2-text-text-contrast);
 }
-
-[data-component="tag"][data-appearance="standard"] {
-  height: 18px;
-  padding: 0 6px;
-  border-radius: var(--radius-xs);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-small);
-  font-style: normal;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-large);
-  letter-spacing: var(--letter-spacing-normal);
-  font-variant-numeric: normal;
-}
-
-[data-component="tag"][data-appearance="standard"][data-variant="neutral"] {
-  border: 0.5px solid var(--border-weak-base);
-  background: var(--surface-raised-base);
-  color: var(--text-base);
-}

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

@@ -1,18 +1,16 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./badge.css"
+import "./badge-v2.css"
 
-export interface BadgeProps extends ComponentProps<"span"> {
-  appearance?: "standard" | "compact"
+export interface TagProps extends ComponentProps<"span"> {
   variant?: "neutral" | "accent"
 }
 
-export function Badge(props: BadgeProps) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children", "appearance", "variant"])
+export function Tag(props: TagProps) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "variant"])
   return (
     <span
       {...rest}
       data-component="tag"
-      data-appearance={split.appearance ?? "compact"}
       data-variant={split.variant ?? "neutral"}
       classList={{
         ...split.classList,

package/src/v2/components/button-v2.tsx

@@ -0,0 +1,35 @@
+import { Button as Kobalte } from "@kobalte/core/button"
+import { type ComponentProps, Show, createMemo, splitProps } from "solid-js"
+import { Icon, type IconProps } from "./icon"
+import "./button-v2.css"
+
+export interface ButtonV2Props
+  extends ComponentProps<typeof Kobalte>,
+    Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
+  size?: "small" | "normal" | "large"
+  variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading"
+  icon?: IconProps["name"]
+}
+
+export function ButtonV2(props: ButtonV2Props) {
+  const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
+  const resolvedIcon = createMemo(() => split.icon)
+  return (
+    <Kobalte
+      {...rest}
+      data-component="button-v2"
+      data-size={split.size || "normal"}
+      data-variant={split.variant || "neutral"}
+      data-icon={resolvedIcon()}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      <Show when={resolvedIcon()}>
+        <Icon name={resolvedIcon()!} />
+      </Show>
+      {props.children}
+    </Kobalte>
+  )
+}