@rimelight/ui 0.0.34 → 0.0.36

package/src/themes/kbd.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createKbdTheme = (colors: string[] = defaultColors) =>
+export const createKbdTheme = (colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root"],
     base: {
@@ -11,7 +11,7 @@ export const createKbdTheme = (colors: string[] = defaultColors) =>
       color: {
         ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
         neutral: { root: "" }
-      },
+      } as Record<string, { root: string }>,
       variant: {
         solid: { root: "" },
         outline: { root: "" },
@@ -24,7 +24,6 @@ export const createKbdTheme = (colors: string[] = defaultColors) =>
         lg: { root: "h-6 min-w-[24px] text-[12px]" }
       },
       theme: {
-        flat: { root: "rl-flat" },
         light: { root: "rl-light" },
         dark: { root: "rl-dark" }
       }

package/src/themes/label.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createLabelTheme = (colors: string[] = defaultColors) =>
+export const createLabelTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root"],
     base: {

package/src/themes/layout-grid.theme.ts

@@ -0,0 +1,16 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createLayoutGridTheme = () =>
+  defineTheme({
+    slots: ["root", "overlay", "container", "columns"],
+    base: {
+      root: "",
+      overlay: "fixed top-0 left-0 w-full h-full pointer-events-none",
+      container: "h-full mx-auto",
+      columns: "grid h-full"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createLayoutGridTheme()

package/src/themes/link-group.theme.ts

@@ -12,10 +12,6 @@ export const createLinkGroupTheme = () =>
     },
     variants: {
       theme: {
-        flat: {
-          link: "text-white hover:text-accent-foreground",
-          title: "text-white"
-        },
         dark: {
           link: "text-white hover:text-accent-foreground",
           title: "text-white"

package/src/themes/marquee.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createMarqueeTheme = (colors: string[] = defaultColors) =>
+export const createMarqueeTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "track"],
     base: {

package/src/themes/modal.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createModalTheme = (colors: string[] = defaultColors) =>
+export const createModalTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: [
       "root",

package/src/themes/navigation-menu.theme.ts

@@ -13,11 +13,11 @@ export const createNavigationMenuTheme = () =>
       content:
         "absolute left-0 top-full z-50 mt-1.5 w-56 rounded-md border bg-popover p-1 text-popover-foreground shadow-md origin-top-left",
       viewportWrapper: "absolute left-0 top-full flex justify-center w-full",
-      viewport: "relative mt-1.5 h-auto w-full origin-[top_center] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90"
+      viewport:
+        "relative mt-1.5 h-auto w-full origin-[top_center] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90"
     },
     variants: {
       theme: {
-        flat: { link: "rl-flat", trigger: "rl-flat" },
         light: { link: "rl-light", trigger: "rl-light" },
         dark: { link: "rl-dark", trigger: "rl-dark" }
       },

package/src/themes/page-section.theme.ts

@@ -20,7 +20,8 @@ export const createPageSectionTheme = () =>
     base: {
       root: "relative isolate",
       background: "absolute inset-0 -z-1 overflow-hidden",
-      container: "mx-auto w-full max-w-90rem px-md flex flex-col lg:grid",
+      container:
+        "mx-auto w-full max-w-[1440px] px-xs sm:px-md md:px-xl lg:px-xl flex flex-col lg:grid",
       wrapper: "",
       header: "",
       leading: "flex items-center mb-6",
@@ -55,7 +56,8 @@ export const createPageSectionTheme = () =>
         },
         cta: {
           root: "rounded-xl overflow-hidden",
-          container: "lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16",
+          container:
+            "mx-auto w-full max-w-[1440px] px-xs sm:px-md md:px-xl lg:px-xl lg:grid py-12 sm:py-24 lg:py-24 gap-8 sm:gap-16",
           title: "text-3xl sm:text-4xl",
           description: "text-base sm:text-lg",
           body: "mt-8",

package/src/themes/pagination.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createPaginationTheme = (colors: string[] = defaultColors) =>
+export const createPaginationTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "list", "item", "link", "ellipsis"],
     base: {

package/src/themes/pin-input.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createPinInputTheme = (colors: string[] = defaultColors) =>
+export const createPinInputTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root"],
     base: {

package/src/themes/popover.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createPopoverTheme = (colors: string[] = defaultColors) =>
+export const createPopoverTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "trigger", "content"],
     base: {

package/src/themes/post.theme.ts

@@ -2,11 +2,21 @@ import { defineTheme } from "../utils/defineTheme"
 
 export const createPostTheme = () =>
   defineTheme({
-    slots: ["root", "imageWrapper", "image", "content", "title", "description", "date", "footer"],
+    slots: [
+      "root",
+      "imageWrapper",
+      "image",
+      "content",
+      "title",
+      "description",
+      "badge",
+      "date",
+      "footer"
+    ],
     base: {
-      root: "group relative flex flex-col overflow-hidden transition-all duration-300",
+      root: "group relative flex overflow-hidden transition-all duration-300",
       imageWrapper: "relative overflow-hidden aspect-video",
-      image: "w-full h-full object-cover transition-transform duration-500",
+      image: "absolute inset-0 w-full h-full object-cover transition-transform duration-500",
       content: "flex-1 p-4",
       title: "font-bold text-xl line-clamp-2",
       description: "text-neutral-500 text-sm mt-1 line-clamp-3",
@@ -14,6 +24,15 @@ export const createPostTheme = () =>
       footer: "p-4 border-t border-neutral-100"
     },
     variants: {
+      orientation: {
+        vertical: {
+          root: "flex-col"
+        },
+        horizontal: {
+          root: "flex-col md:flex-row",
+          imageWrapper: "w-full md:w-80 md:shrink-0 md:aspect-auto"
+        }
+      },
       variant: {
         soft: {
           root: "bg-white rounded-2xl shadow-xl hover:shadow-2xl border border-neutral-100",
@@ -26,6 +45,7 @@ export const createPostTheme = () =>
       }
     },
     defaultVariants: {
+      orientation: "vertical",
       variant: "soft"
     }
   })

package/src/themes/progress.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createProgressTheme = (colors: string[] = defaultColors) =>
+export const createProgressTheme = (colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "indicator"],
     base: {
@@ -24,7 +24,6 @@ export const createProgressTheme = (colors: string[] = defaultColors) =>
         lg: { root: "h-5" }
       },
       theme: {
-        flat: { root: "rl-flat" },
         light: { root: "rl-light" },
         dark: { root: "rl-dark" }
       }

package/src/themes/scroll-to-top.theme.ts

@@ -1,11 +1,11 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export const createScrollToTopTheme = (colors: string[] = ["primary", "secondary"]) =>
+export const createScrollToTopTheme = (colors: readonly string[] = ["primary", "secondary"]) =>
   defineTheme({
     slots: ["root", "button", "progressBase", "svg", "iconContainer", "icon"],
     base: {
       root: "fixed bottom-6 right-6 z-50",
-      button: "size-14 lg:size-12 p-0 rounded-full",
+      button: "size-14 lg:size-12 p-0 rounded-full bg-black/85",
       progressBase: "progress-circle-base size-full",
       svg: "size-full",
       iconContainer: "absolute inset-0 flex items-center justify-center text-center",
@@ -25,7 +25,6 @@ export const createScrollToTopTheme = (colors: string[] = ["primary", "secondary
         ])
       ),
       theme: {
-        flat: { root: "rl-flat" },
         light: { root: "rl-light" },
         dark: { root: "rl-dark" }
       }

package/src/themes/search.theme.ts

@@ -0,0 +1,64 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createSearchTheme = () =>
+  defineTheme({
+    slots: [
+      "root",
+      "trigger",
+      "triggerIcon",
+      "triggerLabel",
+      "triggerKbd",
+      "modal",
+      "dialog",
+      "header",
+      "headerIcon",
+      "input",
+      "close",
+      "closeIcon",
+      "results",
+      "resultItem",
+      "resultHeader",
+      "resultTitle",
+      "resultBadge",
+      "resultSnippet",
+      "empty",
+      "footer",
+      "footerHint"
+    ],
+    base: {
+      root: "relative inline-block",
+      trigger:
+        "flex items-center gap-xs text-neutral-400 hover:text-white transition-colors bg-neutral-900 border border-neutral-800 rounded-full px-3 py-1.5 text-sm cursor-pointer",
+      triggerIcon: "i-lucide-search w-4 h-4",
+      triggerLabel: "hidden lg:inline text-xs opacity-60",
+      triggerKbd:
+        "hidden lg:inline-flex items-center gap-0.5 text-[10px] bg-neutral-800 border border-neutral-700 px-1.5 py-0.5 rounded font-sans text-neutral-400",
+      modal:
+        "fixed inset-0 z-[1000] hidden items-start justify-center pt-[10vh] px-4 bg-black/70 backdrop-blur-sm",
+      dialog:
+        "bg-neutral-900 border border-neutral-800 rounded-xl w-full max-w-xl shadow-2xl overflow-hidden flex flex-col",
+      header: "flex items-center border-b border-neutral-800 px-4 py-3",
+      headerIcon: "i-lucide-search text-neutral-400 w-5 h-5 mr-3",
+      input:
+        "bg-transparent text-white placeholder-neutral-500 focus:outline-none flex-1 text-base border-none p-0",
+      close:
+        "text-neutral-400 hover:text-white transition-colors bg-transparent border-0 cursor-pointer p-0 flex items-center justify-center",
+      closeIcon: "i-lucide-x w-5 h-5",
+      results: "max-h-[350px] overflow-y-auto p-2 empty:hidden flex flex-col gap-1",
+      resultItem:
+        "flex flex-col gap-1 p-3 hover:bg-neutral-800 rounded-lg transition-colors border border-transparent hover:border-neutral-700 text-left decoration-none",
+      resultHeader: "flex items-center justify-between",
+      resultTitle: "text-sm font-semibold text-white",
+      resultBadge:
+        "text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-neutral-800 text-neutral-400 font-mono",
+      resultSnippet: "text-xs text-neutral-400 line-clamp-2 m-0",
+      empty: "p-6 text-center text-neutral-500 text-sm hidden",
+      footer:
+        "bg-neutral-950 border-t border-neutral-800 px-4 py-2 flex items-center justify-between text-[11px] text-neutral-500",
+      footerHint: "flex items-center gap-1"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createSearchTheme()

package/src/themes/separator.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createSeparatorTheme = (colors: string[] = defaultColors) =>
+export const createSeparatorTheme = (colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "border", "container", "icon", "avatar", "avatarSize", "label"],
     base: {

package/src/themes/slideover.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createSlideoverTheme = (colors: string[] = defaultColors) =>
+export const createSlideoverTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: [
       "root",

package/src/themes/slider.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createSliderTheme = (colors: string[] = defaultColors) =>
+export const createSliderTheme = (colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "track", "range", "thumb"],
     base: {
@@ -23,7 +23,6 @@ export const createSliderTheme = (colors: string[] = defaultColors) =>
         ])
       ),
       theme: {
-        flat: { root: "rl-flat" },
         light: { root: "rl-light" },
         dark: { root: "rl-dark" }
       }

package/src/themes/spinner.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createSpinnerTheme = (colors: string[] = defaultColors) =>
+export const createSpinnerTheme = (colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root"],
     base: {
@@ -20,7 +20,6 @@ export const createSpinnerTheme = (colors: string[] = defaultColors) =>
         ...colors.map((color) => [color, { root: "rl-color-" + color + " text-[var(--rl-text)]" }])
       ]),
       theme: {
-        flat: { root: "rl-flat" },
         light: { root: "rl-light" },
         dark: { root: "rl-dark" }
       }

package/src/themes/{megamenu.theme.ts → steps.theme.ts}

@@ -1,13 +1,13 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export const createMegamenuTheme = () =>
+export const createStepsTheme = () =>
   defineTheme({
     slots: ["root"],
     base: {
-      root: ""
+      root: "w-full"
     },
     variants: {},
     defaultVariants: {}
   })
 
-export default createMegamenuTheme()
+export default createStepsTheme()

package/src/themes/sticky-surface.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createStickySurfaceTheme = (colors: string[] = defaultColors) =>
+export const createStickySurfaceTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root"],
     base: {

package/src/themes/switch.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createSwitchTheme = (colors: string[] = defaultColors) =>
+export const createSwitchTheme = (colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "input", "track", "thumb", "label"],
     base: {
@@ -35,7 +35,6 @@ export const createSwitchTheme = (colors: string[] = defaultColors) =>
         false: { thumb: "translate-x-0" }
       },
       theme: {
-        flat: { root: "rl-flat" },
         light: { root: "rl-light" },
         dark: { root: "rl-dark" }
       }

package/src/themes/table-of-contents.theme.ts

@@ -2,9 +2,28 @@ import { defineTheme } from "../utils/defineTheme"
 
 export const createTableOfContentsTheme = () =>
   defineTheme({
-    slots: ["root", "media", "header", "title", "description", "content", "footer", "overlay"],
+    slots: [
+      "root",
+      "container",
+      "top",
+      "bottom",
+      "trigger",
+      "title",
+      "trailing",
+      "trailingIcon",
+      "content",
+      "list",
+      "listWithChildren",
+      "item",
+      "itemWithChildren",
+      "link",
+      "linkText",
+      "indicator",
+      "indicatorLine",
+      "indicatorActive"
+    ],
     base: {
-      root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]",
+      root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 xl:mx-0 overflow-y-auto overflow-x-hidden max-h-[calc(100vh-var(--ui-header-height))]",
       container:
         "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
       top: "",

package/src/themes/timeline.theme.ts

@@ -2,9 +2,14 @@ import { defineTheme } from "../utils/defineTheme"
 
 export const createTimelineTheme = () =>
   defineTheme({
-    slots: ["root"],
+    slots: ["root", "node", "dot", "dotInner", "header", "content"],
     base: {
-      root: ""
+      root: "relative flex flex-col pl-6 border-l-2 border-gray-800 ml-2 py-2",
+      node: "relative timeline-node",
+      dot: "absolute -left-[33px] top-[2px] flex h-4 w-4 items-center justify-center rounded-full bg-gray-950 ring-2 ring-gray-800",
+      dotInner: "h-2 w-2 rounded-full bg-primary-500",
+      header: "flex items-center justify-between gap-4 mb-3",
+      content: "space-y-2 text-sm text-gray-400"
     },
     variants: {},
     defaultVariants: {}

package/src/themes/toast.theme.ts

@@ -4,7 +4,7 @@ export const createToastTheme = () =>
   defineTheme({
     slots: ["root", "title", "description", "action", "close"],
     base: {
-      root: "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all border-border bg-background text-foreground",
+      root: "group pointer-events-auto relative flex w-full items-start justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all border-border bg-background text-foreground",
       title: "text-sm font-semibold",
       description: "text-xs opacity-90",
       action:

package/src/types/components/accordion.ts

@@ -1,8 +1,37 @@
+export interface AccordionItem {
+  label?: string
+  icon?: string
+  trailingIcon?: string
+  content?: string
+  disabled?: boolean
+  slot?: string
+  class?: any
+  ui?: any
+  [key: string]: unknown
+}
+
 export interface AccordionProps {
   /**
-   * The summary text displayed when the accordion is collapsed.
+   * An array of accordion items to render.
+   */
+  items?: AccordionItem[]
+  /**
+   * The summary text displayed when the accordion is collapsed (for single-item usage).
+   */
+  summary?: string
+  /**
+   * Determines whether multiple items can be open at the same time. If false, uses HTML5 details
+   * 'name' attribute to group them. Defaults to false (single open at a time).
+   */
+  multiple?: boolean
+  /**
+   * The icon displayed on the right side of the trigger. Defaults to 'i-lucide-chevron-down'.
    */
-  summary: string
+  trailingIcon?: string
+  /**
+   * When true, prevents user interaction with all items.
+   */
+  disabled?: boolean
   /**
    * Slot-specific CSS class overrides.
    */
@@ -11,5 +40,9 @@ export interface AccordionProps {
    * Additional CSS classes to apply to the root element.
    */
   class?: any
+  /**
+   * A unique name to group accordion items when multiple is false.
+   */
+  name?: string
   [key: string]: unknown
 }

package/src/types/components/avatar.ts

@@ -48,6 +48,22 @@ export interface AvatarProps {
   sizes?: string
   srcset?: string
   usemap?: string
+  /**
+   * Compact initials displayed inside the avatar circle (alias for fallback)
+   */
+  initials?: string
+  /**
+   * Display name rendered adjacent to the avatar (e.g. "Daniel Marchi")
+   */
+  title?: string
+  /**
+   * Secondary description rendered below the title (e.g. "Lead Developer")
+   */
+  subtitle?: string
+  /**
+   * Accessible aria-label fallback for screen readers when avatar is purely visual
+   */
+  label?: string
   /**
    * Slot-specific CSS class overrides.
    */

package/src/types/components/banner.ts

@@ -1,4 +1,46 @@
+export interface BannerAction {
+  label: string
+  href?: string
+  variant?: string
+  color?: string
+  size?: string
+  class?: string
+  [key: string]: unknown
+}
+
 export interface BannerProps {
+  /**
+   * Whether to contain the banner content within a max-width container.
+   */
+  contain?: boolean
+  /**
+   * Whether the banner should be sticky at the top of the viewport.
+   */
+  sticky?: boolean
+  /**
+   * Whether the banner should be fixed at the top of the viewport.
+   */
+  fixed?: boolean
+  /**
+   * The z-index stack position of the banner.
+   */
+  stackIndex?: number
+  /**
+   * Whether to hide the banner when scrolling down and show it when scrolling up.
+   */
+  hideOnScroll?: boolean
+  /**
+   * Whether the banner can be closed by the user. Closes permanently via localStorage.
+   */
+  dismissable?: boolean
+  /**
+   * Key used for localStorage dismissal persistence. Defaults to auto-generated id.
+   */
+  dismissId?: string
+  /**
+   * List of action buttons to render in the banner.
+   */
+  actions?: BannerAction[]
   /**
    * Slot-specific CSS class overrides.
    */

package/src/types/components/button.ts

@@ -4,7 +4,7 @@ export interface ButtonProps {
   /**
    * The visual style variant of the button
    */
-  variant?: "solid" | "outline" | "ghost" | "link" | "soft"
+  variant?: "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"
   /**
    * The color scheme applied to the button
    */
@@ -52,12 +52,11 @@ export interface ButtonProps {
   /**
    * Color used when button is in active state
    */
-  activeColor?:
-    | ThemeColor
+  activeColor?: ThemeColor
   /**
    * Variant used when button is in active state
    */
-  activeVariant?: "solid" | "outline" | "ghost" | "link" | "soft"
+  activeVariant?: "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"
   /**
    * Theme mode override — pins colors to flat, light, or dark mode.
    */

package/src/types/components/{alert.ts → callout.ts}

@@ -1,20 +1,20 @@
 import type { Theme, ThemeColor } from "../theme"
 
-export interface AlertProps {
+export interface CalloutProps {
   /**
-   * The visual variant of the alert.
+   * The visual variant of the callout.
    */
-  variant?: "default" | "destructive" | "outline" | "solid"
+  variant?: "default" | "destructive" | "outline" | "solid" | "soft" | "subtle"
   /**
-   * The color scheme of the alert.
+   * The color scheme of the callout.
    */
   color?: ThemeColor
   /**
-   * The main title text of the alert.
+   * The main title text of the callout.
    */
   title?: string
   /**
-   * The secondary description text of the alert.
+   * The secondary description text of the callout.
    */
   description?: string
   /**