Try using wizard modal

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/tables/components/import-csv-dialog/import-csv-dialog.tsx

@@ -363,7 +363,7 @@ export function ImportCsvDialog({
             <div className='flex flex-col gap-4'>
               <div className='flex items-center justify-between gap-3 rounded-sm border border-[var(--border)] p-2'>
                 <div className='flex min-w-0 flex-col'>
-                  <span className='truncate text-caption text-[var(--text-primary)]'>
+                  <span className='truncate text-[var(--text-primary)] text-caption'>
                     {parsed.file.name}
                   </span>
                   <span className='text-[var(--text-tertiary)] text-xs'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/checkbox-list/checkbox-list.tsx

@@ -1,48 +1,58 @@
-import { Checkbox, Label } from '@/components/emcn'
+import { Info } from 'lucide-react'
+import { Checkbox, Label, Tooltip } from '@/components/emcn'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 
+interface CheckboxListOption {
+  label: string
+  id: string
+  defaultChecked?: boolean
+  description?: string
+}
+
 interface CheckboxListProps {
   blockId: string
   subBlockId: string
   title: string
-  options: { label: string; id: string }[]
+  options: CheckboxListOption[]
   isPreview?: boolean
   subBlockValues?: Record<string, any>
   disabled?: boolean
 }
 
 interface CheckboxItemProps {
   blockId: string
-  option: { label: string; id: string }
+  option: CheckboxListOption
   isPreview: boolean
   subBlockValues?: Record<string, any>
   disabled: boolean
 }
 
 /**
- * Individual checkbox item component that calls useSubBlockValue hook at top level
+ * Individual checkbox item component that calls useSubBlockValue hook at top level.
+ *
+ * @remarks
+ * A `null` store value means the user has never toggled the checkbox, in which
+ * case we fall back to `option.defaultChecked` for the displayed state. Any
+ * explicit boolean (including `false`) takes precedence over the default.
  */
 function CheckboxItem({ blockId, option, isPreview, subBlockValues, disabled }: CheckboxItemProps) {
-  const [storeValue, setStoreValue] = useSubBlockValue(blockId, option.id)
+  const [storeValue, setStoreValue] = useSubBlockValue<boolean>(blockId, option.id)
 
-  // Get preview value for this specific option
   const previewValue = isPreview && subBlockValues ? subBlockValues[option.id]?.value : undefined
-
-  // Use preview value when in preview mode, otherwise use store value
-  const value = isPreview ? previewValue : storeValue
+  const rawValue = isPreview ? previewValue : storeValue
+  const effectiveValue = rawValue ?? option.defaultChecked ?? false
 
   const handleChange = (checked: boolean) => {
-    // Only update store when not in preview mode or disabled
     if (!isPreview && !disabled) {
       setStoreValue(checked)
     }
   }
 
   return (
-    <div className='flex items-center space-x-2'>
+    <div className='flex items-center gap-2'>
       <Checkbox
         id={`${blockId}-${option.id}`}
-        checked={Boolean(value)}
+        checked={Boolean(effectiveValue)}
         onCheckedChange={handleChange}
         disabled={isPreview || disabled}
       />
@@ -52,21 +62,29 @@ function CheckboxItem({ blockId, option, isPreview, subBlockValues, disabled }:
       >
         {option.label}
       </Label>
+      {option.description && (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Info className='h-[14px] w-[14px] cursor-default text-[var(--text-muted)]' />
+          </Tooltip.Trigger>
+          <Tooltip.Content side='top' align='start' className='max-w-xs'>
+            <p>{option.description}</p>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      )}
     </div>
   )
 }
 
 export function CheckboxList({
   blockId,
-  subBlockId,
-  title,
   options,
   isPreview = false,
   subBlockValues,
   disabled = false,
 }: CheckboxListProps) {
   return (
-    <div className='grid grid-cols-1 gap-4 pt-1'>
+    <div className='flex flex-col gap-y-2.5 pt-1'>
       {options.map((option) => (
         <CheckboxItem
           key={option.id}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts

@@ -22,7 +22,7 @@ export { ScheduleInfo } from './schedule-info/schedule-info'
 export { SelectorInput, type SelectorOverrides } from './selector-input/selector-input'
 export { ShortInput } from './short-input/short-input'
 export { SkillInput } from './skill-input/skill-input'
-export { SlackManifestGenerator } from './slack-manifest-generator/slack-manifest-generator'
+export { SlackSetupWizard } from './slack-setup-wizard/slack-setup-wizard'
 export { SliderInput } from './slider-input/slider-input'
 export { SortBuilder } from './sort-builder/sort-builder'
 export { InputFormat } from './starter/input-format'