From 4c59af3a252e5a46b2cc7df2909d8ed6a22934ee Mon Sep 17 00:00:00 2001
From: Theodore Li <theo@sim.ai>
Date: Thu, 30 Apr 2026 14:48:11 -0700
Subject: [PATCH 1/5] fix(ui): Add warning for organization-wide settings

---
 .../components/data-retention-settings.tsx               | 9 ++++++---
 .../whitelabeling/components/whitelabeling-settings.tsx  | 6 +++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/sim/ee/data-retention/components/data-retention-settings.tsx b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
index 0f257f3e469..f5644224ce3 100644
--- a/apps/sim/ee/data-retention/components/data-retention-settings.tsx
+++ b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
@@ -3,7 +3,9 @@
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
+import { Info } from 'lucide-react'
 import { Button, Combobox, toast } from '@/components/emcn'
+
 import { useSession } from '@/lib/auth/auth-client'
 import { isBillingEnabled } from '@/lib/core/config/feature-flags'
 import { getUserRole } from '@/lib/workspaces/organization/utils'
@@ -169,10 +171,11 @@ export function DataRetentionSettings() {
 
   return (
     <div className='flex flex-col gap-8'>
+      <div className='flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-1.5'>
+        <Info className='h-3.5 w-3.5 flex-shrink-0 text-[var(--text-muted)]' />
+        <p className='text-[12px] text-[var(--text-muted)]'>Applies organization-wide</p>
+      </div>
       <section>
-        <h3 className='mb-4 font-medium text-[15px] text-[var(--text-primary)]'>
-          Retention Periods
-        </h3>
         <div className='flex flex-col gap-5'>
           <SettingRow
             label='Log retention'
diff --git a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
index c42b210bea7..b34e2a158c4 100644
--- a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
+++ b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { Loader2, X } from 'lucide-react'
+import { Info, Loader2, X } from 'lucide-react'
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
 import { Button, Input, Label, Skeleton, toast } from '@/components/emcn'
@@ -318,6 +318,10 @@ export function WhitelabelingSettings() {
 
   return (
     <div className='flex flex-col gap-8'>
+      <div className='flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-1.5'>
+        <Info className='h-3.5 w-3.5 flex-shrink-0 text-[var(--text-muted)]' />
+        <p className='text-[12px] text-[var(--text-muted)]'>Applies organization-wide</p>
+      </div>
       <section>
         <SectionTitle>Brand Identity</SectionTitle>
         <div className='flex flex-col gap-5'>

From 2ed4f52fbd218af4d1923f33676fa0205c32a8f8 Mon Sep 17 00:00:00 2001
From: Theodore Li <theo@sim.ai>
Date: Thu, 30 Apr 2026 14:59:22 -0700
Subject: [PATCH 2/5] Create emcn component

---
 .../emcn/components/callout/callout.tsx       | 60 +++++++++++++++++++
 apps/sim/components/emcn/components/index.ts  |  1 +
 .../components/data-retention-settings.tsx    |  9 +--
 .../components/whitelabeling-settings.tsx     |  9 +--
 4 files changed, 66 insertions(+), 13 deletions(-)
 create mode 100644 apps/sim/components/emcn/components/callout/callout.tsx

diff --git a/apps/sim/components/emcn/components/callout/callout.tsx b/apps/sim/components/emcn/components/callout/callout.tsx
new file mode 100644
index 00000000000..739d78752cf
--- /dev/null
+++ b/apps/sim/components/emcn/components/callout/callout.tsx
@@ -0,0 +1,60 @@
+import type * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { AlertTriangle, CheckCircle2, Info } from 'lucide-react'
+import { cn } from '@/lib/core/utils/cn'
+
+const calloutVariants = cva('flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-[12px]', {
+  variants: {
+    variant: {
+      default: 'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-muted)]',
+      info: 'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-muted)]',
+      success:
+        'border-[color-mix(in_srgb,var(--badge-success-text)_30%,transparent)] bg-[var(--badge-success-bg)] text-[var(--badge-success-text)]',
+      warning:
+        'border-[color-mix(in_srgb,var(--badge-amber-text)_30%,transparent)] bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]',
+      destructive:
+        'border-[color-mix(in_srgb,var(--text-error)_40%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)]',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+const DEFAULT_ICONS = {
+  default: Info,
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  destructive: AlertTriangle,
+} as const
+
+export interface CalloutProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof calloutVariants> {
+  /** Icon component shown before the content. Pass `null` to hide. Defaults per variant. */
+  icon?: React.ComponentType<{ className?: string }> | null
+}
+
+/**
+ * Inline note used to highlight short pieces of context inside a page or section.
+ *
+ * @example
+ * ```tsx
+ * <Callout>Applies organization-wide</Callout>
+ * <Callout variant='warning'>This action is irreversible</Callout>
+ * ```
+ */
+function Callout({ className, variant, icon, children, ...props }: CalloutProps) {
+  const variantKey = (variant ?? 'default') as keyof typeof DEFAULT_ICONS
+  const Icon = icon === null ? null : (icon ?? DEFAULT_ICONS[variantKey])
+
+  return (
+    <div className={cn(calloutVariants({ variant }), className)} {...props}>
+      {Icon && <Icon className='h-3.5 w-3.5 flex-shrink-0' />}
+      <p>{children}</p>
+    </div>
+  )
+}
+
+export { Callout, calloutVariants }
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index 70c7a6b383c..15b6cefd77f 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -18,6 +18,7 @@ export {
   buttonGroupItemVariants,
   buttonGroupVariants,
 } from './button-group/button-group'
+export { Callout, type CalloutProps, calloutVariants } from './callout/callout'
 export {
   Checkbox,
   type CheckboxProps,
diff --git a/apps/sim/ee/data-retention/components/data-retention-settings.tsx b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
index f5644224ce3..e04bb0caca6 100644
--- a/apps/sim/ee/data-retention/components/data-retention-settings.tsx
+++ b/apps/sim/ee/data-retention/components/data-retention-settings.tsx
@@ -3,9 +3,7 @@
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { Info } from 'lucide-react'
-import { Button, Combobox, toast } from '@/components/emcn'
-
+import { Button, Callout, Combobox, toast } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { isBillingEnabled } from '@/lib/core/config/feature-flags'
 import { getUserRole } from '@/lib/workspaces/organization/utils'
@@ -171,10 +169,7 @@ export function DataRetentionSettings() {
 
   return (
     <div className='flex flex-col gap-8'>
-      <div className='flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-1.5'>
-        <Info className='h-3.5 w-3.5 flex-shrink-0 text-[var(--text-muted)]' />
-        <p className='text-[12px] text-[var(--text-muted)]'>Applies organization-wide</p>
-      </div>
+      <Callout>Applies organization-wide</Callout>
       <section>
         <div className='flex flex-col gap-5'>
           <SettingRow
diff --git a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
index ee88901cd3a..f1af9f3d090 100644
--- a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
+++ b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
@@ -3,10 +3,10 @@
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { Info, X } from 'lucide-react'
+import { X } from 'lucide-react'
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
-import { Button, Input, Label, Loader, Skeleton, toast } from '@/components/emcn'
+import { Button, Callout, Input, Label, Loader, Skeleton, toast } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client/utils'
 import { HEX_COLOR_REGEX } from '@/lib/branding'
@@ -318,10 +318,7 @@ export function WhitelabelingSettings() {
 
   return (
     <div className='flex flex-col gap-8'>
-      <div className='flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-1.5'>
-        <Info className='h-3.5 w-3.5 flex-shrink-0 text-[var(--text-muted)]' />
-        <p className='text-[12px] text-[var(--text-muted)]'>Applies organization-wide</p>
-      </div>
+      <Callout>Applies organization-wide</Callout>
       <section>
         <SectionTitle>Brand Identity</SectionTitle>
         <div className='flex flex-col gap-5'>

From e5ecb0277dc10cc17e381e990ffff41ee3523bdc Mon Sep 17 00:00:00 2001
From: Theodore Li <theo@sim.ai>
Date: Thu, 30 Apr 2026 15:01:38 -0700
Subject: [PATCH 3/5] Bump up text padding a tad

---
 apps/sim/components/emcn/components/callout/callout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/sim/components/emcn/components/callout/callout.tsx b/apps/sim/components/emcn/components/callout/callout.tsx
index 739d78752cf..8279ad6c52f 100644
--- a/apps/sim/components/emcn/components/callout/callout.tsx
+++ b/apps/sim/components/emcn/components/callout/callout.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { AlertTriangle, CheckCircle2, Info } from 'lucide-react'
 import { cn } from '@/lib/core/utils/cn'
 
-const calloutVariants = cva('flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-[12px]', {
+const calloutVariants = cva('flex items-center gap-2 rounded-lg border px-2.5 py-2.5 text-[12px]', {
   variants: {
     variant: {
       default: 'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-muted)]',

From f79f600f69573b986383e5ea931c96f8cb527ea6 Mon Sep 17 00:00:00 2001
From: Theodore Li <theo@sim.ai>
Date: Thu, 30 Apr 2026 15:02:28 -0700
Subject: [PATCH 4/5] apply emcn-design-review

---
 apps/sim/components/emcn/components/callout/callout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/sim/components/emcn/components/callout/callout.tsx b/apps/sim/components/emcn/components/callout/callout.tsx
index 8279ad6c52f..3495c84f8bd 100644
--- a/apps/sim/components/emcn/components/callout/callout.tsx
+++ b/apps/sim/components/emcn/components/callout/callout.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { AlertTriangle, CheckCircle2, Info } from 'lucide-react'
 import { cn } from '@/lib/core/utils/cn'
 
-const calloutVariants = cva('flex items-center gap-2 rounded-lg border px-2.5 py-2.5 text-[12px]', {
+const calloutVariants = cva('flex items-center gap-2 rounded-lg border p-2.5 text-[12px]', {
   variants: {
     variant: {
       default: 'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-muted)]',
@@ -51,7 +51,7 @@ function Callout({ className, variant, icon, children, ...props }: CalloutProps)
 
   return (
     <div className={cn(calloutVariants({ variant }), className)} {...props}>
-      {Icon && <Icon className='h-3.5 w-3.5 flex-shrink-0' />}
+      {Icon && <Icon className='h-[14px] w-[14px] shrink-0' />}
       <p>{children}</p>
     </div>
   )

From 906d737f3cc5404b8d8b179ce0d1e75b24fff01e Mon Sep 17 00:00:00 2001
From: Theodore Li <theo@sim.ai>
Date: Thu, 30 Apr 2026 15:35:45 -0700
Subject: [PATCH 5/5] Address greptile comments

---
 apps/sim/components/emcn/components/callout/callout.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/sim/components/emcn/components/callout/callout.tsx b/apps/sim/components/emcn/components/callout/callout.tsx
index 3495c84f8bd..f22473541e9 100644
--- a/apps/sim/components/emcn/components/callout/callout.tsx
+++ b/apps/sim/components/emcn/components/callout/callout.tsx
@@ -45,14 +45,14 @@ export interface CalloutProps
  * <Callout variant='warning'>This action is irreversible</Callout>
  * ```
  */
-function Callout({ className, variant, icon, children, ...props }: CalloutProps) {
+function Callout({ className, variant, icon, children, role = 'note', ...props }: CalloutProps) {
   const variantKey = (variant ?? 'default') as keyof typeof DEFAULT_ICONS
   const Icon = icon === null ? null : (icon ?? DEFAULT_ICONS[variantKey])
 
   return (
-    <div className={cn(calloutVariants({ variant }), className)} {...props}>
+    <div role={role} className={cn(calloutVariants({ variant }), className)} {...props}>
       {Icon && <Icon className='h-[14px] w-[14px] shrink-0' />}
-      <p>{children}</p>
+      <span>{children}</span>
     </div>
   )
 }