updated the example

Author: ramsrib

example/src/App.tsx

@@ -25,7 +25,7 @@ function App() {
     accentColor: '#14B8A6', // Default teal accent
     ctaButtonColor: '#000000', // Default black for buttons
     ctaButtonTextColor: '#ffffff', // Default white for button text
-    radius: 'large',
+    borderRadius: 'large',
     size: 'full',
     position: 'bottom-right',
     title: 'TALK WITH AI',
@@ -70,7 +70,7 @@ function App() {
       `accent-color="${config.accentColor}"`,
       `cta-button-color="${config.ctaButtonColor}"`,
       `cta-button-text-color="${config.ctaButtonTextColor}"`,
-      `radius="${config.radius}"`,
+      `border-radius="${config.borderRadius}"`,
       `size="${config.size}"`,
       `position="${config.position}"`,
       `title="${config.title}"`,
@@ -189,7 +189,7 @@ function App() {
             accentColor={config.accentColor}
             ctaButtonColor={config.ctaButtonColor}
             ctaButtonTextColor={config.ctaButtonTextColor}
-            radius={config.radius}
+            borderRadius={config.borderRadius}
             size={config.size}
             title={config.title}
             startButtonText={config.startButtonText}

example/src/components/WidgetPreview.tsx

@@ -73,7 +73,7 @@ const WidgetPreview: React.FC<WidgetPreviewProps> = ({ config }) => {
                   accentColor={config.accentColor}
                   ctaButtonColor={config.ctaButtonColor}
                   ctaButtonTextColor={config.ctaButtonTextColor}
-                  radius={config.radius}
+                  borderRadius={config.borderRadius}
                   size={config.size}
                   title={config.title}
                   ctaTitle={config.ctaTitle}
@@ -119,8 +119,10 @@ const WidgetPreview: React.FC<WidgetPreviewProps> = ({ config }) => {
                 </span>
               </div>
               <div className="flex justify-between py-1">
-                <span className="text-gray-600">Radius:</span>
-                <span className="font-medium capitalize">{config.radius}</span>
+                <span className="text-gray-600">Border Radius:</span>
+                <span className="font-medium capitalize">
+                  {config.borderRadius}
+                </span>
               </div>
               <div className="flex justify-between py-1">
                 <span className="text-gray-600">Consent:</span>

example/src/components/builder/LayoutSection.tsx

@@ -41,28 +41,28 @@ const LayoutSection: React.FC<LayoutSectionProps> = ({
     {/* Radius */}
     <div className="mb-6">
       <label className="block text-sm font-medium mb-3 text-gray-700">
-        Radius
+        Border Radius
       </label>
       <div className="flex gap-3">
         {(['none', 'small', 'medium', 'large'] as const).map((radius) => (
           <div
             key={radius}
             className={`flex-1 p-4 rounded-lg border cursor-pointer transition-all ${
-              config.radius === radius
+              config.borderRadius === radius
                 ? 'border-gray-700 bg-gray-50'
                 : 'border-gray-300 hover:border-gray-400 bg-white'
             }`}
-            onClick={() => updateConfig('radius', radius)}
+            onClick={() => updateConfig('borderRadius', radius)}
           >
             <div className="flex items-center gap-3">
               <div
                 className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
-                  config.radius === radius
+                  config.borderRadius === radius
                     ? 'border-teal-500'
                     : 'border-gray-400'
                 }`}
               >
-                {config.radius === radius && (
+                {config.borderRadius === radius && (
                   <div className="w-3 h-3 bg-teal-500 rounded-full"></div>
                 )}
               </div>

example/src/components/builder/LegalConsentSection.tsx

@@ -48,11 +48,6 @@ const LegalConsentSection: React.FC<LegalConsentSectionProps> = ({
             Terms Content
           </label>
           <div className="border rounded-md p-3 border-gray-300 bg-white">
-            <div className="flex items-center space-x-2 mb-3">
-              <span className="text-sm font-medium text-gray-700">
-                #### Terms and conditions
-              </span>
-            </div>
             <textarea
               id="terms-content"
               rows={3}

example/src/types/index.ts

@@ -5,7 +5,7 @@ export interface WidgetConfig {
   accentColor: string;
   ctaButtonColor: string;
   ctaButtonTextColor: string;
-  radius: 'none' | 'small' | 'medium' | 'large';
+  borderRadius: 'none' | 'small' | 'medium' | 'large';
   size: 'tiny' | 'compact' | 'full';
   position:
     | 'bottom-right'