From 887f97b966b8ab4f19eec97d93205076b1398f6b Mon Sep 17 00:00:00 2001
From: Ravi Suhag <suhag.ravi@gmail.com>
Date: Mon, 20 Jul 2026 21:33:43 +0530
Subject: [PATCH] chore: comment cleanup across components and docs

---
 apps/www/src/app/examples/page.tsx            | 73 +------------------
 apps/www/src/app/examples/table/page.tsx      | 35 ---------
 apps/www/src/components/datatable-demo.tsx    |  1 -
 .../www/src/components/demo/demo-controls.tsx |  3 -
 apps/www/src/components/docs/sidebar.tsx      |  7 --
 .../www/src/components/mdx/mdx-components.tsx |  7 --
 .../playground/skeleton-examples.tsx          |  5 --
 apps/www/src/components/toc/toc.tsx           |  2 -
 apps/www/src/lib/ai.ts                        |  9 +--
 apps/www/src/lib/prettier.ts                  |  4 +-
 apps/www/src/lib/remark.ts                    |  1 -
 apps/www/src/lib/utils.ts                     |  1 -
 .../raystack/components/amount/amount.tsx     | 55 ++------------
 .../calendar/__tests__/calendar.test.tsx      |  4 -
 .../components/code-block/code-block-code.tsx |  2 -
 .../__tests__/color-picker.test.tsx           | 18 -----
 .../color-picker/color-picker-area.tsx        |  4 +-
 .../raystack/components/color-picker/utils.ts | 24 ++----
 .../data-table/__tests__/data-table.test.tsx  | 10 ---
 .../components/data-table/data-table.tsx      |  9 +--
 .../data-table/utils/__tests__/index.test.tsx |  1 -
 .../data-table/utils/filter-operations.tsx    |  1 -
 .../components/data-table/utils/index.tsx     | 11 +--
 .../data-view/__tests__/data-view.test.tsx    |  3 -
 .../data-view/__tests__/debug.test.tsx        |  2 +-
 .../components/theme-provider/theme.tsx       | 10 +--
 .../components/tour-beta/tour-backdrop.tsx    |  3 +-
 .../raystack/hooks/useCopyToClipboard.tsx     | 13 ++--
 packages/raystack/hooks/useMouse.tsx          |  1 -
 packages/raystack/styles/typography.css       |  3 -
 packages/raystack/types/filters.tsx           |  2 -
 31 files changed, 37 insertions(+), 287 deletions(-)

diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx
index 01048209b..c3011750f 100644
--- a/apps/www/src/app/examples/page.tsx
+++ b/apps/www/src/app/examples/page.tsx
@@ -66,7 +66,6 @@ const Page = () => {
     to: dayjs('2027-12-10').toDate()
   });
 
-  // Sample options data with icons
   const selectOptions = [
     { value: 'dashboard', label: 'Dashboard', icon: <RadixBellIcon /> },
     { value: 'analytics', label: 'Analytics', icon: <MixerHorizontalIcon /> },
@@ -431,7 +430,6 @@ const Page = () => {
                     );
                   }
 
-                  // Show info on 15th of any month
                   if (date.getDate() === 15) {
                     return (
                       <Flex
@@ -452,7 +450,6 @@ const Page = () => {
                     );
                   }
 
-                  // Show info for today
                   if (isToday) {
                     return (
                       <Flex
@@ -511,7 +508,6 @@ const Page = () => {
                 <Input size='small' />
               </Flex>
 
-              {/* Button Examples */}
               <Text
                 size='large'
                 weight='medium'
@@ -520,11 +516,9 @@ const Page = () => {
                 Button Examples - All Combinations
               </Text>
 
-              {/* Solid Variant */}
               <Flex direction='column' gap={4} style={{ marginBottom: '32px' }}>
                 <Text weight='medium'>Solid Variant</Text>
 
-                {/* Normal Size */}
                 <Flex direction='column' gap={2}>
                   <Text size='small'>Normal Size:</Text>
                   <Flex gap={2} wrap='wrap'>
@@ -582,7 +576,6 @@ const Page = () => {
                   </Flex>
                 </Flex>
 
-                {/* Small Size */}
                 <Flex direction='column' gap={2}>
                   <Text size='small'>Small Size:</Text>
                   <Flex gap={2} wrap='wrap'>
@@ -695,11 +688,9 @@ const Page = () => {
                 </Flex>
               </Flex>
 
-              {/* Outline Variant */}
               <Flex direction='column' gap={4} style={{ marginBottom: '32px' }}>
                 <Text weight='medium'>Outline Variant</Text>
 
-                {/* Normal Size */}
                 <Flex direction='column' gap={2}>
                   <Text size='small'>Normal Size:</Text>
                   <Flex gap={2} wrap='wrap'>
@@ -757,7 +748,6 @@ const Page = () => {
                   </Flex>
                 </Flex>
 
-                {/* Small Size */}
                 <Flex direction='column' gap={2}>
                   <Text size='small'>Small Size:</Text>
                   <Flex gap={2} wrap='wrap'>
@@ -880,11 +870,9 @@ const Page = () => {
                 </Flex>
               </Flex>
 
-              {/* Ghost Variant */}
               <Flex direction='column' gap={4} style={{ marginBottom: '32px' }}>
                 <Text weight='medium'>Ghost Variant</Text>
 
-                {/* Normal Size */}
                 <Flex direction='column' gap={2}>
                   <Text size='small'>Normal Size:</Text>
                   <Flex gap={2} wrap='wrap'>
@@ -942,7 +930,6 @@ const Page = () => {
                   </Flex>
                 </Flex>
 
-                {/* Small Size */}
                 <Flex direction='column' gap={2}>
                   <Text size='small'>Small Size:</Text>
                   <Flex gap={2} wrap='wrap'>
@@ -1055,11 +1042,9 @@ const Page = () => {
                 </Flex>
               </Flex>
 
-              {/* Text Variant */}
               <Flex direction='column' gap={4} style={{ marginBottom: '32px' }}>
                 <Text weight='medium'>Text Variant</Text>
 
-                {/* Normal Size */}
                 <Flex direction='column' gap={2}>
                   <Text size='small'>Normal Size:</Text>
                   <Flex gap={2} wrap='wrap'>
@@ -1117,7 +1102,6 @@ const Page = () => {
                   </Flex>
                 </Flex>
 
-                {/* Small Size */}
                 <Flex direction='column' gap={2}>
                   <Text size='small'>Small Size:</Text>
                   <Flex gap={2} wrap='wrap'>
@@ -1238,7 +1222,6 @@ const Page = () => {
               </Text>
 
               <Flex direction='column' gap={6}>
-                {/* Solid Variant */}
                 <Flex direction='column' gap={3}>
                   <Text weight='medium'>Solid Variant (Inverted Spinner)</Text>
                   <Flex gap={4} align='center'>
@@ -1254,7 +1237,6 @@ const Page = () => {
                   </Flex>
                 </Flex>
 
-                {/* Outline Variant */}
                 <Flex direction='column' gap={3}>
                   <Text weight='medium'>
                     Outline Variant (Matching Color Spinner)
@@ -1272,7 +1254,6 @@ const Page = () => {
                   </Flex>
                 </Flex>
 
-                {/* Ghost Variant */}
                 <Flex direction='column' gap={3}>
                   <Text weight='medium'>
                     Ghost Variant (Matching Color Spinner for colored)
@@ -1290,7 +1271,6 @@ const Page = () => {
                   </Flex>
                 </Flex>
 
-                {/* Text Variant */}
                 <Flex direction='column' gap={3}>
                   <Text weight='medium'>
                     Text Variant (Matching Color Spinner for colored)
@@ -1311,7 +1291,6 @@ const Page = () => {
                   </Flex>
                 </Flex>
 
-                {/* Size Variants */}
                 <Flex direction='column' gap={3}>
                   <Text weight='medium'>Size Variants</Text>
                   <Flex gap={4} align='center'>
@@ -1345,7 +1324,6 @@ const Page = () => {
                   </Flex>
                 </Flex>
 
-                {/* Loading with and without text */}
                 <Flex direction='column' gap={3}>
                   <Text weight='medium'>Loading With/Without Text</Text>
                   <Flex gap={4} align='center'>
@@ -1374,7 +1352,6 @@ const Page = () => {
                   </Flex>
                 </Flex>
 
-                {/* Disabled Loading State */}
                 <Flex direction='column' gap={3}>
                   <Text weight='medium'>Disabled Loading State</Text>
                   <Flex gap={4} align='center'>
@@ -1429,7 +1406,6 @@ const Page = () => {
               />
             </Flex>
 
-            {/* Select component examples */}
             <Text
               size='large'
               weight='medium'
@@ -1453,7 +1429,6 @@ const Page = () => {
             <TextArea />
 
             <Flex direction='column' gap={4} style={{ maxWidth: '550px' }}>
-              {/* Normal size select with icons */}
               <Flex direction='column' gap={2}>
                 <Select
                   value={selectValue}
@@ -1496,7 +1471,6 @@ const Page = () => {
             </Flex>
 
             <Flex direction='column' gap={4} style={{ maxWidth: '550px' }}>
-              {/* Normal size select with icons */}
               <Flex direction='column' gap={2}>
                 <Select
                   value={selectValue}
@@ -1537,7 +1511,6 @@ const Page = () => {
                 </Select>
               </Flex>
 
-              {/* Small size select with icons */}
               <Flex direction='column' gap={2}>
                 <Text size='small'>Small size:</Text>
                 <Select value={selectValue2} onValueChange={setSelectValue2}>
@@ -1879,7 +1852,6 @@ const Page = () => {
             </Text>
 
             <Flex direction='column' gap={4} style={{ maxWidth: '300px' }}>
-              {/* Select Examples */}
               <Flex direction='column' gap={2}>
                 <Text size='small'>Disabled Select:</Text>
                 <Select
@@ -1928,37 +1900,13 @@ const Page = () => {
                     ))}
                   </Select.Content>
                 </Select>
-                {/* <Select
-              value={selectValue}
-              onValueChange={value => {
-                console.log(value);
-                setSelectValue(value);
-              }}>
-              <Select.Trigger size="small" variant="outline">
-                <Select.Value placeholder="Choose an option" />
-              </Select.Trigger>
-              <Select.Content>
-                {selectOptions.map(option => (
-                  <Select.Item
-                    key={option.value}
-                    value={option.value}
-                    leadingIcon={option.icon}>
-                    {option.label}
-                  </Select.Item>
-                ))}
-              </Select.Content>
-            </Select> */}
                 <Select value={selectValue} onValueChange={setSelectValue}>
                   <Select.Trigger size='small'>
                     <Select.Value placeholder='Choose an options' />
                   </Select.Trigger>
                   <Select.Content>
                     {selectOptions.map(option => (
-                      <Select.Item
-                        key={option.value}
-                        value={option.value}
-                        // leadingIcon={option.icon}
-                      >
+                      <Select.Item key={option.value} value={option.value}>
                         {option.label}
                       </Select.Item>
                     ))}
@@ -1988,7 +1936,6 @@ const Page = () => {
             </Text>
 
             <Flex direction='column' gap={6}>
-              {/* Basic Amount Examples */}
               <Flex direction='column' gap={3}>
                 <Text size='small'>Basic Amount (Minor Units):</Text>
                 <Flex gap={4}>
@@ -2004,7 +1951,6 @@ const Page = () => {
                 </Flex>
               </Flex>
 
-              {/* Major Units Example */}
               <Flex direction='column' gap={3}>
                 <Text size='small'>Major Units (valueInMinorUnits=false):</Text>
                 <Flex gap={4}>
@@ -2035,7 +1981,6 @@ const Page = () => {
                 </Flex>
               </Flex>
 
-              {/* Currency Display Formats */}
               <Flex direction='column' gap={3}>
                 <Text size='small'>Currency Display Formats:</Text>
                 <Flex gap={4}>
@@ -2066,7 +2011,6 @@ const Page = () => {
                 </Flex>
               </Flex>
 
-              {/* Localization Example */}
               <Flex direction='column' gap={3}>
                 <Text size='small'>Different Locales:</Text>
                 <Flex gap={4}>
@@ -2082,7 +2026,6 @@ const Page = () => {
                 </Flex>
               </Flex>
 
-              {/* Decimal Control */}
               <Flex direction='column' gap={3}>
                 <Text size='small'>Decimal Control:</Text>
                 <Flex gap={4}>
@@ -2109,7 +2052,6 @@ const Page = () => {
                 </Flex>
               </Flex>
 
-              {/* Grouping Control */}
               <Flex direction='column' gap={3}>
                 <Text size='small'>Grouping Control:</Text>
                 <Flex gap={4}>
@@ -2127,7 +2069,6 @@ const Page = () => {
                 </Flex>
               </Flex>
 
-              {/* Error Handling */}
               <Flex direction='column' gap={3}>
                 <Text size='small'>Error Handling (Invalid Currency):</Text>
                 <Flex gap={4}>
@@ -2672,7 +2613,6 @@ const Page = () => {
             </Text>
 
             <Flex direction='column' gap={6}>
-              {/* Basic Vertical ScrollArea */}
               <Flex direction='column' gap={3}>
                 <Text size='small'>Basic Vertical ScrollArea:</Text>
                 <ScrollArea
@@ -2689,7 +2629,6 @@ const Page = () => {
                 </ScrollArea>
               </Flex>
 
-              {/* Basic Horizontal ScrollArea */}
               <Flex direction='column' gap={3}>
                 <Text size='small'>Basic Horizontal ScrollArea:</Text>
                 <ScrollArea style={{ height: '150px', width: '300px' }}>
@@ -2713,7 +2652,6 @@ const Page = () => {
                 </ScrollArea>
               </Flex>
 
-              {/* Both Vertical and Horizontal Scrollbars */}
               <Flex direction='column' gap={3}>
                 <Text size='small'>
                   Both Vertical and Horizontal Scrollbars (Corner auto-added):
@@ -2741,7 +2679,6 @@ const Page = () => {
                 </ScrollArea>
               </Flex>
 
-              {/* Auto Scroll (default) */}
               <Flex direction='column' gap={3}>
                 <Text size='small'>Auto Scroll (default):</Text>
                 <ScrollArea style={{ height: '250px', width: '400px' }}>
@@ -2772,7 +2709,6 @@ const Page = () => {
             </Text>
 
             <Flex direction='column' gap={6} style={{ maxWidth: '600px' }}>
-              {/* Types */}
               <Flex direction='column' gap={3}>
                 <Text size='small' variant='secondary'>
                   Types
@@ -2802,7 +2738,6 @@ const Page = () => {
                 </Flex>
               </Flex>
 
-              {/* Outline */}
               <Flex direction='column' gap={3}>
                 <Text size='small' variant='secondary'>
                   Outline
@@ -2815,7 +2750,6 @@ const Page = () => {
                 </Callout>
               </Flex>
 
-              {/* High contrast */}
               <Flex direction='column' gap={3}>
                 <Text size='small' variant='secondary'>
                   High contrast
@@ -2831,7 +2765,6 @@ const Page = () => {
                 </Callout>
               </Flex>
 
-              {/* Custom icon */}
               <Flex direction='column' gap={3}>
                 <Text size='small' variant='secondary'>
                   Custom icon
@@ -2844,7 +2777,6 @@ const Page = () => {
                 </Callout>
               </Flex>
 
-              {/* With action */}
               <Flex direction='column' gap={3}>
                 <Text size='small' variant='secondary'>
                   With action
@@ -2862,7 +2794,6 @@ const Page = () => {
                 </Callout>
               </Flex>
 
-              {/* Dismissible (controlled) */}
               <Flex direction='column' gap={3}>
                 <Text size='small' variant='secondary'>
                   Dismissible (controlled — consumer removes it in onDismiss)
@@ -2886,7 +2817,6 @@ const Page = () => {
                 )}
               </Flex>
 
-              {/* Custom width */}
               <Flex direction='column' gap={3}>
                 <Text size='small' variant='secondary'>
                   Custom width
@@ -2899,7 +2829,6 @@ const Page = () => {
                 </Callout>
               </Flex>
 
-              {/*Figma replicas*/}
               <Flex direction='column' gap={3}>
                 <Text size='small' variant='secondary'>
                   Figma replicas
diff --git a/apps/www/src/app/examples/table/page.tsx b/apps/www/src/app/examples/table/page.tsx
index 67b2737f1..0055552ea 100644
--- a/apps/www/src/app/examples/table/page.tsx
+++ b/apps/www/src/app/examples/table/page.tsx
@@ -89,7 +89,6 @@ export const columns: DataTableColumnDef<Payment, unknown>[] = [
     header: 'Amount',
     cell: ({ row }) => {
       const amount = parseFloat(row.getValue('amount'));
-      // Format the amount as a dollar amount
       const formatted = new Intl.NumberFormat('en-US', {
         style: 'currency',
         currency: 'USD'
@@ -144,40 +143,6 @@ const Page = () => {
       direction='column'
       gap={8}
     >
-      {/* <Flex direction='column' gap={4}>
-        <DataTable
-          data={filteredData}
-          mode='server'
-          columns={columns}
-          query={tableQuery}
-          onTableQueryChange={setTableQuery}
-          defaultSort={{ name: 'email', order: 'asc' }}
-        >
-          <DataTable.Filters
-            trigger={({ appliedFilters }) =>
-              appliedFilters.size > 0 ? (
-                <IconButton size={4}>
-                  <FilterIcon />
-                </IconButton>
-              ) : (
-                <Button
-                  variant='outline'
-                  size='small'
-                  leadingIcon={<FilterIcon />}
-                  color='neutral'
-                >
-                  Filter
-                </Button>
-              )
-            }
-          />
-          {filteredData.map(item => (
-            <div
-              key={item.id}
-            >{`${item.email} - ${item.amount} - ${item.status}`}</div>
-          ))}
-        </DataTable>
-      </Flex> */}
       <Flex direction='row' gap={4}>
         <DataTable
           data={filteredData}
diff --git a/apps/www/src/components/datatable-demo.tsx b/apps/www/src/components/datatable-demo.tsx
index c2bcf7e9d..b68b8eea3 100644
--- a/apps/www/src/components/datatable-demo.tsx
+++ b/apps/www/src/components/datatable-demo.tsx
@@ -91,7 +91,6 @@ export const columns: DataTableColumnDef<Payment, unknown>[] = [
     header: 'Amount',
     cell: ({ row }) => {
       const amount = parseFloat(row.getValue('amount'));
-      // Format the amount as a dollar amount
       const formatted = new Intl.NumberFormat('en-US', {
         style: 'currency',
         currency: 'USD'
diff --git a/apps/www/src/components/demo/demo-controls.tsx b/apps/www/src/components/demo/demo-controls.tsx
index a94e194f2..0aeb35a3d 100644
--- a/apps/www/src/components/demo/demo-controls.tsx
+++ b/apps/www/src/components/demo/demo-controls.tsx
@@ -53,7 +53,6 @@ export default function DemoControls({
         const isIcon = control.type === 'icon';
         const isIconOptional = control.isIconOptional ?? true;
 
-        // For checkbox and icon types, render in a special container
         if (isCheckbox || isIcon) {
           return (
             <div key={prop} className={styles.controlSection}>
@@ -112,7 +111,6 @@ export default function DemoControls({
           );
         }
 
-        // For select type
         if (control.type === 'select') {
           const selectValue =
             propValue !== undefined && propValue !== null
@@ -150,7 +148,6 @@ export default function DemoControls({
           );
         }
 
-        // For text and number types
         return (
           <Field key={prop} label={propLabel} className={styles.inputLabel}>
             <Input
diff --git a/apps/www/src/components/docs/sidebar.tsx b/apps/www/src/components/docs/sidebar.tsx
index 49f0daa9d..75af9c070 100644
--- a/apps/www/src/components/docs/sidebar.tsx
+++ b/apps/www/src/components/docs/sidebar.tsx
@@ -18,7 +18,6 @@ type Props = {
 };
 
 function renderNode(node: Node, pathname: string): ReactNode {
-  // Handle folders with both children and index
   if (
     node.type === 'folder' &&
     node.index &&
@@ -35,15 +34,12 @@ function renderNode(node: Node, pathname: string): ReactNode {
           label: styles.label
         }}
       >
-        {/* Render index item first */}
         {renderNode(node.index, pathname)}
-        {/* Recursively render all children */}
         {node.children.map(child => renderNode(child, pathname))}
       </Sidebar.Group>
     );
   }
 
-  // Handle folders with index but no children
   if (
     node.type === 'folder' &&
     node.index &&
@@ -52,7 +48,6 @@ function renderNode(node: Node, pathname: string): ReactNode {
     return renderNode(node.index, pathname);
   }
 
-  // Handle folders normally
   if (node.type === 'folder') {
     return (
       <Sidebar.Group
@@ -69,12 +64,10 @@ function renderNode(node: Node, pathname: string): ReactNode {
     );
   }
 
-  // Handle page items
   if (node.type === 'page') {
     return <SidebarItem item={node} pathname={pathname} key={node.url} />;
   }
 
-  // Handle separators (if needed)
   if (node.type === 'separator') {
     return null;
   }
diff --git a/apps/www/src/components/mdx/mdx-components.tsx b/apps/www/src/components/mdx/mdx-components.tsx
index 383dbfa2c..c53d4df9b 100644
--- a/apps/www/src/components/mdx/mdx-components.tsx
+++ b/apps/www/src/components/mdx/mdx-components.tsx
@@ -125,11 +125,4 @@ const mdxComponents = {
   Demo
 };
 
-// export const createRelativeLink: typeof import('./mdx.server').createRelativeLink =
-//   () => {
-//     throw new Error(
-//       '`createRelativeLink` is only supported in Node.js environment',
-//     );
-//   };
-
 export { mdxComponents };
diff --git a/apps/www/src/components/playground/skeleton-examples.tsx b/apps/www/src/components/playground/skeleton-examples.tsx
index 0647d5c62..16e3aca73 100644
--- a/apps/www/src/components/playground/skeleton-examples.tsx
+++ b/apps/www/src/components/playground/skeleton-examples.tsx
@@ -7,13 +7,10 @@ export function SkeletonExamples() {
   return (
     <PlaygroundLayout title='Skeleton'>
       <Flex direction='column' gap={9}>
-        {/* Basic Usage */}
         <Skeleton width={200} height={20} />
 
-        {/* Multiple Lines */}
         <Skeleton width={200} height={20} count={3} />
 
-        {/* Custom Colors */}
         <Skeleton
           width={200}
           height={20}
@@ -21,13 +18,11 @@ export function SkeletonExamples() {
           highlightColor='var(--rs-color-background-accent-emphasis)'
         />
 
-        {/* Animation Control */}
         <Flex direction='column' gap={5}>
           <Skeleton width={200} height={20} duration={2.5} />
           <Skeleton width={200} height={20} enableAnimation={false} />
         </Flex>
 
-        {/* Card Layout Example */}
         <Flex direction='column' gap={5} style={{ width: '300px' }}>
           <Skeleton height={200} /> {/* Image placeholder */}
           <Skeleton height={20} width='80%' /> {/* Title placeholder */}
diff --git a/apps/www/src/components/toc/toc.tsx b/apps/www/src/components/toc/toc.tsx
index 70ce2f1cf..099d5f147 100644
--- a/apps/www/src/components/toc/toc.tsx
+++ b/apps/www/src/components/toc/toc.tsx
@@ -306,8 +306,6 @@ export default function TableOfContents({
               style={{
                 // Center label vertically on tick (label height ~12px, so offset by half)
                 top: `${h.yPosition - 6}px`,
-                // Indent based on heading level (h2 furthest right, h4 closest to bar)
-                // right: `${(3 - h.level) * 4 + 28}px`,
                 right: '24px',
                 zIndex: 10 * (h.level < 4 ? 1 : 0),
                 transitionDelay: `${50 * i}ms`
diff --git a/apps/www/src/lib/ai.ts b/apps/www/src/lib/ai.ts
index aef6849ff..88fd099a9 100644
--- a/apps/www/src/lib/ai.ts
+++ b/apps/www/src/lib/ai.ts
@@ -1,11 +1,11 @@
 import { promises as fs } from 'fs';
-import path from 'path';
-import { docs } from '@/lib/source';
 import type { InferPageType } from 'fumadocs-core/source';
 import { remarkAutoTypeTable } from 'fumadocs-typescript';
+import path from 'path';
 import { remark } from 'remark';
 import remarkGfm from 'remark-gfm';
 import remarkMdx from 'remark-mdx';
+import { docs } from '@/lib/source';
 import { remarkTypeTableToMd } from './remark';
 
 const processor = remark()
@@ -21,7 +21,6 @@ const REGEX = {
   PLAYGROUND: /export const playground\s*=\s*{/g
 };
 
-// Inline the demo examples into the content
 function inlineDemoComponents(content: string, demo: string): string {
   const demoMap: Record<string, string[]> = {};
   const formattedDemo = removePlaygroundExportBlock(demo);
@@ -69,11 +68,10 @@ function inlineDemoComponents(content: string, demo: string): string {
   return result;
 }
 
-// Remove the playground export block from the demo file
 function removePlaygroundExportBlock(content: string): string {
   const match = REGEX.PLAYGROUND.exec(content);
 
-  if (!match) return content; // nothing to remove
+  if (!match) return content;
 
   const start = match.index;
   let i = REGEX.PLAYGROUND.lastIndex - 1; // start at opening `{`
@@ -95,7 +93,6 @@ function removePlaygroundExportBlock(content: string): string {
 
 // Remove the frontmatter, import statements, and code blocks from the content
 function formatContent(content: string) {
-  // remove frontmatter values
   let processedContent = content.replace(REGEX.FRONTMATTER, '');
 
   // remove import statements outside of code blocks
diff --git a/apps/www/src/lib/prettier.ts b/apps/www/src/lib/prettier.ts
index 6cb83ae44..afcce4abc 100644
--- a/apps/www/src/lib/prettier.ts
+++ b/apps/www/src/lib/prettier.ts
@@ -11,11 +11,11 @@ export const getFormattedCode = (code: string) => {
     return prettier
       .format(`(${code})`, prettierOptions)
       .trim()
-      .replace(/;\s*$/, ''); //remove trailing semicolon
+      .replace(/;\s*$/, '');
   } catch (e) {
     return prettier
       .format(`${code}`, prettierOptions)
       .trim()
-      .replace(/;\s*$/, ''); //remove trailing semicolon
+      .replace(/;\s*$/, '');
   }
 };
diff --git a/apps/www/src/lib/remark.ts b/apps/www/src/lib/remark.ts
index f44044187..c7562d41e 100644
--- a/apps/www/src/lib/remark.ts
+++ b/apps/www/src/lib/remark.ts
@@ -73,7 +73,6 @@ export function remarkTypeTableToMd() {
           entry.description || ''
         ]);
 
-        // Build MDAST table node with correct types
         const tableNode: Table = {
           type: 'table',
           align: [],
diff --git a/apps/www/src/lib/utils.ts b/apps/www/src/lib/utils.ts
index 1c41ea836..1bf87cfc0 100644
--- a/apps/www/src/lib/utils.ts
+++ b/apps/www/src/lib/utils.ts
@@ -39,7 +39,6 @@ export function isActiveUrl(
  * Format: /docs/folder-name/file-name or docs/folder-name/file-name
  */
 export const getFolderFromUrl = (url: string): string => {
-  // Remove leading slash if present and split by "/"
   const parts = url.replace(/^\//, '').split('/').filter(Boolean);
 
   // Expected structure: ["docs", folderName?, fileName]
diff --git a/packages/raystack/components/amount/amount.tsx b/packages/raystack/components/amount/amount.tsx
index c30f1e2ac..b66027256 100644
--- a/packages/raystack/components/amount/amount.tsx
+++ b/packages/raystack/components/amount/amount.tsx
@@ -10,11 +10,7 @@ export interface AmountProps extends ComponentProps<'span'> {
    *   - a `bigint` — integer-only; treated as already in major units, so
    *     `valueInMinorUnits` is ignored when value is a bigint
    * @default 0
-   * @example
-   * valueInMinorUnits=true: 1299 => "$12.99"
-   * valueInMinorUnits=false: 12.99 => "$12.99"
-   * Large strings: "999999999999999" => "$9,999,999,999,999.99"
-   * BigInt: 1299n => "$1,299.00" (always major units)
+   * @example 1299 => "$12.99"
    */
   value: number | string | bigint;
 
@@ -29,10 +25,7 @@ export interface AmountProps extends ComponentProps<'span'> {
    * If true, the value will be converted based on the currency's decimal places
    * If false, the value will be used as is
    * @default true
-   * @example
-   * USD: 1299 => $12.99 (2 decimals)
-   * JPY: 1299 => ¥1,299 (0 decimals)
-   * BHD: 1299 => BHD 1.299 (3 decimals)
+   * @example USD: 1299 => $12.99, JPY: 1299 => ¥1,299
    */
   valueInMinorUnits?: boolean;
 
@@ -85,9 +78,6 @@ export interface AmountProps extends ComponentProps<'span'> {
   hideCurrency?: boolean;
 }
 
-/**
- * Get the number of decimal places for a currency
- */
 function getCurrencyDecimals(currency: string): number {
   try {
     const formatter = new Intl.NumberFormat('en', {
@@ -95,19 +85,14 @@ function getCurrencyDecimals(currency: string): number {
       currency: currency.toUpperCase()
     });
 
-    // Format a number and count the decimal places
-    const formatted = formatter.format(1); // Get string representation of 1 unit with currency symbol
-    const match = formatted.match(/\.([\d]+)/); // Extract the decimal part
+    const formatted = formatter.format(1);
+    const match = formatted.match(/\.([\d]+)/);
     return match ? match[1].length : 0;
   } catch {
-    // Default to 2 decimal places
     return 2;
   }
 }
 
-/**
- * Check if a currency is valid
- */
 function isValidCurrency(currency: string): boolean {
   try {
     new Intl.NumberFormat('en', {
@@ -126,37 +111,7 @@ function isValidCurrency(currency: string): boolean {
  * Inherits styling from parent Text component.
  *
  * @example
- * ```tsx
- * // Basic usage
- * <Text>
- *   Total: <Amount value={1299} />  // Shows as "$12.99"
- * </Text>
- *
- * // With different currency and locale
- * <Text>
- *   Prix: <Amount value={1299} currency="EUR" locale="fr-FR" />  // Shows as "12,99 €"
- * </Text>
- *
- * // Without decimals
- * <Text>
- *   Price: <Amount value={1299} hideDecimals />  // Shows as "$12"
- * </Text>
- *
- * // With currency code
- * <Text>
- *   Amount: <Amount value={1299} currencyDisplay="code" />  // Shows as "USD 12.99"
- * </Text>
- *
- * // With value in major units
- * <Text>
- *   Amount: <Amount value={12.99} valueInMinorUnits={false} />  // Shows as "$12.99"
- * </Text>
- *
- * // With groupDigits (default is true)
- * <Text>
- *   Amount: <Amount value={129999999} groupDigits />  // Shows as "$129,999,999.99"
- * </Text>
- * ```
+ * <Amount value={1299} />  // Shows as "$12.99"
  */
 export const Amount = ({
   value = 0,
diff --git a/packages/raystack/components/calendar/__tests__/calendar.test.tsx b/packages/raystack/components/calendar/__tests__/calendar.test.tsx
index 4e33ae419..a8f74c3f5 100644
--- a/packages/raystack/components/calendar/__tests__/calendar.test.tsx
+++ b/packages/raystack/components/calendar/__tests__/calendar.test.tsx
@@ -146,7 +146,6 @@ describe('Calendar', () => {
         />
       );
 
-      // The component should be rendered in the calendar
       expect(
         container.querySelector('[data-testid="custom-date-info"]')
       ).toBeInTheDocument();
@@ -178,7 +177,6 @@ describe('Calendar', () => {
         />
       );
 
-      // Should only have one date with info
       const dateInfos = container.querySelectorAll('[data-testid="date-info"]');
       expect(dateInfos.length).toBeGreaterThanOrEqual(0);
     });
@@ -206,7 +204,6 @@ describe('Calendar', () => {
       const { container } = render(
         <Calendar
           dateInfo={date => {
-            // Show info only on Sundays
             if (date.getDay() === 0) {
               return <div data-testid='sunday-info'>Sunday</div>;
             }
@@ -228,7 +225,6 @@ describe('Calendar', () => {
       const { container } = render(
         <Calendar
           dateInfo={date => {
-            // Show info only for today
             if (
               date.getDate() === today.getDate() &&
               date.getMonth() === today.getMonth() &&
diff --git a/packages/raystack/components/code-block/code-block-code.tsx b/packages/raystack/components/code-block/code-block-code.tsx
index 162bbb019..4af48b6ed 100644
--- a/packages/raystack/components/code-block/code-block-code.tsx
+++ b/packages/raystack/components/code-block/code-block-code.tsx
@@ -31,9 +31,7 @@ export const CodeBlockCode = ({
   const content = children.trim();
 
   useIsomorphicLayoutEffect(() => {
-    // if value is not defined, set the value
     if (!isContextValueDefined) setValue(language);
-    // if should render, store the code
     if (shouldRender) setCode(content);
   }, [
     content,
diff --git a/packages/raystack/components/color-picker/__tests__/color-picker.test.tsx b/packages/raystack/components/color-picker/__tests__/color-picker.test.tsx
index b002ceaac..96c2a32c1 100644
--- a/packages/raystack/components/color-picker/__tests__/color-picker.test.tsx
+++ b/packages/raystack/components/color-picker/__tests__/color-picker.test.tsx
@@ -7,20 +7,6 @@ vi.mock('~/hooks/useCopyToClipboard', () => ({
   useCopyToClipboard: () => ({ copy: mockCopy })
 }));
 
-// // Mock ResizeObserver for tests
-// const originalResizeObserver = global.ResizeObserver;
-// beforeAll(() => {
-//   global.ResizeObserver = vi.fn().mockImplementation(() => ({
-//     observe: vi.fn(),
-//     unobserve: vi.fn(),
-//     disconnect: vi.fn()
-//   }));
-// });
-
-// afterAll(() => {
-//   global.ResizeObserver = originalResizeObserver;
-// });
-
 describe('ColorPicker', () => {
   describe('ColorPicker Root', () => {
     it('renders color picker root with children', () => {
@@ -173,7 +159,6 @@ describe('ColorPicker', () => {
       const hueSlider = screen.getByTestId('hue-slider');
       expect(hueSlider).toBeInTheDocument();
 
-      // Check that the slider has child elements (track and thumb)
       expect(hueSlider.children.length).toBeGreaterThan(0);
     });
   });
@@ -214,7 +199,6 @@ describe('ColorPicker', () => {
       const alphaSlider = screen.getByTestId('alpha-slider');
       expect(alphaSlider).toBeInTheDocument();
 
-      // Check that the slider has child elements (track and thumb)
       expect(alphaSlider.children.length).toBeGreaterThan(0);
     });
   });
@@ -435,7 +419,6 @@ describe('ColorPicker', () => {
         </ColorPicker>
       );
 
-      // All components should render without errors
       expect(screen.getByTestId('area')).toBeInTheDocument();
       expect(screen.getByTestId('hue')).toBeInTheDocument();
       expect(screen.getByTestId('alpha')).toBeInTheDocument();
@@ -454,7 +437,6 @@ describe('ColorPicker', () => {
         </ColorPicker>
       );
 
-      // All components should render without errors
       expect(screen.getByTestId('area')).toBeInTheDocument();
       expect(screen.getByTestId('hue')).toBeInTheDocument();
       expect(screen.getByTestId('alpha')).toBeInTheDocument();
diff --git a/packages/raystack/components/color-picker/color-picker-area.tsx b/packages/raystack/components/color-picker/color-picker-area.tsx
index b414c4f7f..2f8a6cb80 100644
--- a/packages/raystack/components/color-picker/color-picker-area.tsx
+++ b/packages/raystack/components/color-picker/color-picker-area.tsx
@@ -177,10 +177,10 @@ const OklchArea = ({ className, ...props }: ColorPickerAreaProps) => {
           y += STEP_LARGE;
           break;
         case 'Home':
-          x = 0; // no chroma
+          x = 0;
           break;
         case 'End':
-          x = 1; // max chroma
+          x = 1;
           break;
         default:
           return; // let other keys (Tab, etc.) pass through
diff --git a/packages/raystack/components/color-picker/utils.ts b/packages/raystack/components/color-picker/utils.ts
index b85395e43..0a8d57239 100644
--- a/packages/raystack/components/color-picker/utils.ts
+++ b/packages/raystack/components/color-picker/utils.ts
@@ -70,27 +70,17 @@ const formatOklchString = (color: ColorObject): string => {
 };
 
 /**
- * Convert any CSS color string to the requested format.
+ * Convert any CSS color string to the requested format. Returns `null` for
+ * unparseable input.
  *
  * Wide-gamut OKLCH inputs are gamut-mapped into sRGB for `hex`/`rgb`/`hsl`
- * outputs (chroma reduced, lightness and hue preserved), so the result is
- * the closest sRGB representation of the requested color rather than a
- * per-channel-clipped one that would distort hue. `oklch` output preserves
- * the full color, since OKLCH can express the wide gamut natively.
- *
- * Hex is uppercase; uses 8-digit form when alpha < 1. RGB/HSL produce
- * `rgb()`/`rgba()` and `hsl()`/`hsla()`. OKLCH matches the design system's
- * token format (4-decimal L/C, 2-decimal H, hue pinned to 0 when achromatic).
- *
- * Returns `null` for unparseable input.
+ * outputs (chroma reduced, lightness and hue preserved), so the result is the
+ * closest sRGB color rather than a per-channel-clipped one that would distort
+ * hue. `oklch` output preserves the full color, since OKLCH expresses the wide
+ * gamut natively.
  *
  * @example
- *   formatColor('oklch(0.5438 0.191 267.01)', 'hex')   // '#3E63DD'
- *   formatColor('oklch(0.7 0.32 30)', 'hex')           // '#FF5843'
- *   formatColor('red', 'rgb')                          // 'rgb(255, 0, 0)'
- *   formatColor('rgba(255, 0, 0, 0.5)', 'hsl')         // 'hsla(0, 100%, 50%, 0.5)'
- *   formatColor('#FF0000', 'oklch')                    // 'oklch(0.6279 0.2577 29.23)'
- *   formatColor('not a color', 'hex')                  // null
+ *   formatColor('red', 'rgb') // 'rgb(255, 0, 0)'
  */
 export const formatColor = (
   value: string,
diff --git a/packages/raystack/components/data-table/__tests__/data-table.test.tsx b/packages/raystack/components/data-table/__tests__/data-table.test.tsx
index f1b6d83d3..27c485676 100644
--- a/packages/raystack/components/data-table/__tests__/data-table.test.tsx
+++ b/packages/raystack/components/data-table/__tests__/data-table.test.tsx
@@ -60,7 +60,6 @@ describe('DataTable', () => {
         </DataTable>
       );
 
-      // Table should be rendered
       expect(screen.getByRole('table')).toBeInTheDocument();
     });
 
@@ -109,7 +108,6 @@ describe('DataTable', () => {
         </DataTable>
       );
 
-      // Check if data is displayed
       expect(screen.getByText('John Doe')).toBeInTheDocument();
       expect(screen.getByText('john@example.com')).toBeInTheDocument();
       expect(screen.getByText('Jane Smith')).toBeInTheDocument();
@@ -304,11 +302,9 @@ describe('DataTable', () => {
         </DataTable>
       );
 
-      // After applying filter with no matches, empty state should show
       expect(screen.getByTestId('empty-state')).toBeInTheDocument();
       expect(screen.getByText(emptyStateText)).toBeInTheDocument();
       expect(screen.queryByTestId('zero-state')).not.toBeInTheDocument();
-      // Data should not be visible
       expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
     });
 
@@ -405,7 +401,6 @@ describe('DataTable', () => {
         </DataTable>
       );
 
-      // Should show emptyState as fallback
       expect(screen.getByTestId('empty-state')).toBeInTheDocument();
       expect(screen.getByText(emptyStateText)).toBeInTheDocument();
     });
@@ -422,7 +417,6 @@ describe('DataTable', () => {
         </DataTable>
       );
 
-      // Should show default empty state
       expect(screen.getByText('No Data')).toBeInTheDocument();
     });
 
@@ -444,7 +438,6 @@ describe('DataTable', () => {
         </DataTable>
       );
 
-      // Should show matching data, not empty state
       expect(screen.getByText('John Doe')).toBeInTheDocument();
       expect(screen.queryByTestId('empty-state')).not.toBeInTheDocument();
       expect(screen.queryByTestId('zero-state')).not.toBeInTheDocument();
@@ -570,11 +563,9 @@ describe('DataTable', () => {
         </DataTable>
       );
 
-      // Open Display popover and click reset
       await user.click(screen.getByText('Display'));
       await user.click(screen.getByText('Reset to default'));
 
-      // Verify onTableQueryChange was called with default sort and no group
       expect(onTableQueryChange).toHaveBeenLastCalledWith(
         expect.objectContaining({
           sort: [{ name: 'name', order: 'asc' }],
@@ -602,7 +593,6 @@ describe('DataTable', () => {
         </DataTable>
       );
 
-      // Data should still be visible, not zero/empty state
       expect(screen.getByText('John Doe')).toBeInTheDocument();
       expect(screen.queryByTestId('zero-state')).not.toBeInTheDocument();
       expect(screen.queryByTestId('empty-state')).not.toBeInTheDocument();
diff --git a/packages/raystack/components/data-table/data-table.tsx b/packages/raystack/components/data-table/data-table.tsx
index adb714634..5ea02d7c6 100644
--- a/packages/raystack/components/data-table/data-table.tsx
+++ b/packages/raystack/components/data-table/data-table.tsx
@@ -166,10 +166,8 @@ function DataTableRoot<TData, TValue>({
     }
   }, [searchQuery]);
 
-  // Determine if filters should be visible
-  // Filters should be visible if there is data OR if filters are applied (empty state)
-  // Filters should NOT be visible if no data AND no filters (zero state)
-  // Note: Search alone does not show the filter bar
+  // Show filters when there is data or filters are applied; hide in the zero state.
+  // Search alone does not show the filter bar.
   const shouldShowFilters = useMemo(() => {
     const hasFilters = tableQuery?.filters && tableQuery.filters.length > 0;
 
@@ -178,8 +176,7 @@ function DataTableRoot<TData, TValue>({
       const hasData = (rowModel?.rows?.length ?? 0) > 0;
       return hasData || hasFilters;
     } catch {
-      // If table is not ready yet, check if we have initial data
-      // If no filters and no data, don't show filters
+      // Table not ready yet, so fall back to the initial data.
       return hasFilters || data.length > 0;
     }
   }, [table, tableQuery, data.length]);
diff --git a/packages/raystack/components/data-table/utils/__tests__/index.test.tsx b/packages/raystack/components/data-table/utils/__tests__/index.test.tsx
index 7fa39325b..7d738e10d 100644
--- a/packages/raystack/components/data-table/utils/__tests__/index.test.tsx
+++ b/packages/raystack/components/data-table/utils/__tests__/index.test.tsx
@@ -24,7 +24,6 @@ import {
   transformToDataTableQuery
 } from '../index';
 
-// Mock data for tests
 const mockColumns: DataTableColumnDef<unknown, unknown>[] = [
   {
     accessorKey: 'name',
diff --git a/packages/raystack/components/data-table/utils/filter-operations.tsx b/packages/raystack/components/data-table/utils/filter-operations.tsx
index 169e74d9c..c0c794aa7 100644
--- a/packages/raystack/components/data-table/utils/filter-operations.tsx
+++ b/packages/raystack/components/data-table/utils/filter-operations.tsx
@@ -270,7 +270,6 @@ export const getFilterValue = ({
     return { numberValue: value as number, value };
   }
 
-  // Handle string-based types
   return handleStringBasedTypes(filterType, value, operator);
 };
 
diff --git a/packages/raystack/components/data-table/utils/index.tsx b/packages/raystack/components/data-table/utils/index.tsx
index 299093d42..e440b0d07 100644
--- a/packages/raystack/components/data-table/utils/index.tsx
+++ b/packages/raystack/components/data-table/utils/index.tsx
@@ -250,8 +250,7 @@ export function transformToDataTableQuery(
   };
 }
 
-// Transform DataTableQuery to InternalQuery
-// This reverses the transformation done by transformToDataTableQuery
+// Reverses the transformation done by transformToDataTableQuery.
 export function dataTableQueryToInternal(query: DataTableQuery): InternalQuery {
   const { filters, ...rest } = query;
 
@@ -259,7 +258,6 @@ export function dataTableQueryToInternal(query: DataTableQuery): InternalQuery {
     return rest;
   }
 
-  // Convert DataTableFilter[] to InternalFilter[]
   const internalFilters: InternalFilter[] = filters.map(filter => {
     const {
       operator,
@@ -284,17 +282,17 @@ export function dataTableQueryToInternal(query: DataTableQuery): InternalQuery {
       if (stringValue.startsWith('%') && stringValue.endsWith('%')) {
         transformedFilter = {
           operator: 'contains',
-          value: stringValue.slice(1, -1) // Remove % from both ends
+          value: stringValue.slice(1, -1)
         };
       } else if (stringValue.endsWith('%')) {
         transformedFilter = {
           operator: 'starts_with',
-          value: stringValue.slice(0, -1) // Remove % from end
+          value: stringValue.slice(0, -1)
         };
       } else if (stringValue.startsWith('%')) {
         transformedFilter = {
           operator: 'ends_with',
-          value: stringValue.slice(1) // Remove % from start
+          value: stringValue.slice(1)
         };
       } else {
         // Default to contains if no wildcards (shouldn't happen normally)
@@ -348,7 +346,6 @@ export function getDefaultTableQuery(
   defaultSort?: DataTableSort,
   oldQuery: DataTableQuery = {}
 ): InternalQuery {
-  // Convert DataTableQuery to InternalQuery
   const internalQuery = dataTableQueryToInternal(oldQuery);
 
   return {
diff --git a/packages/raystack/components/data-view/__tests__/data-view.test.tsx b/packages/raystack/components/data-view/__tests__/data-view.test.tsx
index 011df6145..0fcc02f46 100644
--- a/packages/raystack/components/data-view/__tests__/data-view.test.tsx
+++ b/packages/raystack/components/data-view/__tests__/data-view.test.tsx
@@ -363,9 +363,7 @@ describe('DataView', () => {
           <DataView.List variant='table' columns={mockColumns} />
         </DataView>
       );
-      // Search input
       expect(screen.getByRole('textbox')).toBeInTheDocument();
-      // Filter button
       expect(
         screen.getByRole('button', { name: /filter/i })
       ).toBeInTheDocument();
@@ -476,7 +474,6 @@ describe('DataView', () => {
           <DataView.List name='list' variant='list' columns={mockColumns} />
         </DataView>
       );
-      // Two active rows visible in table
       expect(screen.getByText('John Doe')).toBeInTheDocument();
       expect(screen.queryByText('Jane Smith')).not.toBeInTheDocument();
 
diff --git a/packages/raystack/components/data-view/__tests__/debug.test.tsx b/packages/raystack/components/data-view/__tests__/debug.test.tsx
index 14ba18061..4bab3e54a 100644
--- a/packages/raystack/components/data-view/__tests__/debug.test.tsx
+++ b/packages/raystack/components/data-view/__tests__/debug.test.tsx
@@ -1,6 +1,6 @@
 import { describe, it } from 'vitest';
 
-// placeholder — was used for bisecting Filter trigger render issue.
+// placeholder
 describe.skip('debug', () => {
   it('noop', () => {});
 });
diff --git a/packages/raystack/components/theme-provider/theme.tsx b/packages/raystack/components/theme-provider/theme.tsx
index 12e42ed85..800a1e72b 100644
--- a/packages/raystack/components/theme-provider/theme.tsx
+++ b/packages/raystack/components/theme-provider/theme.tsx
@@ -127,7 +127,6 @@ const Scoped = ({
     }
   }, [isPersistent, storageKey, stored]);
 
-  // Cross-tab sync.
   useEffect(() => {
     if (!isPersistent) return;
     const onStorage = (e: StorageEvent) => {
@@ -234,7 +233,6 @@ const Root = ({
       let resolved = theme;
       if (!resolved) return;
 
-      // If theme is system, resolve it before setting theme
       if (theme === 'system' && enableSystem) {
         resolved = getSystemTheme();
       }
@@ -291,11 +289,10 @@ const Root = ({
       if (theme === undefined) return;
       setThemeState(theme);
 
-      // Save to storage
       try {
         localStorage.setItem(storageKey, theme);
       } catch (e) {
-        // Unsupported
+        // unsupported (private mode, quota exceeded)
       }
     },
     [storageKey]
@@ -313,7 +310,6 @@ const Root = ({
     [theme, forcedTheme, enableSystem, applyTheme]
   );
 
-  // Always listen to System preference
   useEffect(() => {
     const media = window.matchMedia(MEDIA);
 
@@ -323,7 +319,6 @@ const Root = ({
     return () => media.removeEventListener('change', handleMediaQuery);
   }, [handleMediaQuery]);
 
-  // localStorage event handling
   useEffect(() => {
     const handleStorage = (e: StorageEvent) => {
       if (e.key !== storageKey) {
@@ -548,14 +543,13 @@ const ThemeScript = memo(
   () => true
 );
 
-// Helpers
 const getTheme = (key: string, fallback?: string) => {
   if (isServer) return undefined;
   let theme;
   try {
     theme = localStorage.getItem(key) || undefined;
   } catch (e) {
-    // Unsupported
+    // unsupported (private mode, quota exceeded)
   }
   return theme || fallback;
 };
diff --git a/packages/raystack/components/tour-beta/tour-backdrop.tsx b/packages/raystack/components/tour-beta/tour-backdrop.tsx
index 3a54a7736..5f13ffec1 100644
--- a/packages/raystack/components/tour-beta/tour-backdrop.tsx
+++ b/packages/raystack/components/tour-beta/tour-backdrop.tsx
@@ -1,5 +1,4 @@
-// Superseded by tour-overlay.tsx (the part is named Tour.Overlay now that
-// the API sticks to the "overlay" term). Safe to delete this file.
+// Back-compat alias: the part was renamed Tour.Overlay.
 export {
   TourOverlay as TourBackdrop,
   type TourOverlayProps as TourBackdropProps
diff --git a/packages/raystack/hooks/useCopyToClipboard.tsx b/packages/raystack/hooks/useCopyToClipboard.tsx
index 71444f7db..72dd0c483 100644
--- a/packages/raystack/hooks/useCopyToClipboard.tsx
+++ b/packages/raystack/hooks/useCopyToClipboard.tsx
@@ -1,24 +1,23 @@
-import { useState } from "react";
+import { useState } from 'react';
 
 type CopyFn = (text: string) => Promise<boolean>; // Return success
 
 export const useCopyToClipboard = () => {
-  const [copiedText, setCopiedText] = useState("");
+  const [copiedText, setCopiedText] = useState('');
 
-  const copy: CopyFn = async (text) => {
+  const copy: CopyFn = async text => {
     if (!navigator?.clipboard) {
-      console.warn("Clipboard not supported");
+      console.warn('Clipboard not supported');
       return false;
     }
 
-    // Try to save to clipboard then save it in the state if worked
     try {
       await navigator.clipboard.writeText(text);
       setCopiedText(text);
       return true;
     } catch (error) {
-      console.warn("Copy failed", error);
-      setCopiedText("");
+      console.warn('Copy failed', error);
+      setCopiedText('');
       return false;
     }
   };
diff --git a/packages/raystack/hooks/useMouse.tsx b/packages/raystack/hooks/useMouse.tsx
index 5d9020d63..3d54755e5 100644
--- a/packages/raystack/hooks/useMouse.tsx
+++ b/packages/raystack/hooks/useMouse.tsx
@@ -22,7 +22,6 @@ export function useMouse<T extends HTMLElement = HTMLElement>(
   const [value, setValue] = useState<UseMouseValue | null>(null);
   const elementRef = useRef<T | null>(null);
 
-  // Handle mouse movement using native MouseEvent
   const handleMouseMove = useCallback(
     (event: MouseEvent) => {
       if (!enabled) return;
diff --git a/packages/raystack/styles/typography.css b/packages/raystack/styles/typography.css
index 3142c03b8..30d2a96e3 100644
--- a/packages/raystack/styles/typography.css
+++ b/packages/raystack/styles/typography.css
@@ -96,10 +96,8 @@
 }
 
 body {
-  /* Default Font */
   font-family: var(--rs-font-body);
 
-  /* Font Smoothing */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
@@ -137,7 +135,6 @@ h4 {
   text-wrap: balance;
 }
 
-/* CSS for the text cursor */
 input,
 textarea {
   caret-color: var(--rs-color-border-accent-emphasis);
diff --git a/packages/raystack/types/filters.tsx b/packages/raystack/types/filters.tsx
index 29702fe86..80895799a 100644
--- a/packages/raystack/types/filters.tsx
+++ b/packages/raystack/types/filters.tsx
@@ -12,9 +12,7 @@ export type FilterValueType = 'string' | 'number' | 'boolean';
 
 export interface FilterValue {
   value?: FilterValueType;
-  // values?: Array<string | number>;
   date?: Date;
-  // dateRange?: DateRange;
 }
 
 export type FilterOperation = {