refactor(radix) - remove duplicated deps

example/package.json

@@ -14,6 +14,9 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-radio-group": "^1.3.8",

example/src/App.tsx

@@ -4,17 +4,15 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
+  cn,
+} from '@remoteoss/remote-flows/internals';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './components/ui/tabs';
+import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-  Button,
-  cn,
-} from '@remoteoss/remote-flows/internals';
-
+} from './components/ui/collapsible';
+import { Button } from './components/ui/button';
 import { Check, Copy, ChevronRight, ChevronDown } from 'lucide-react';
 
 import { useState } from 'react';

example/src/ContractorOnboarding.tsx

@@ -19,12 +19,8 @@
   eorProductIdentifier,
   $TSFixMe,
 } from '@remoteoss/remote-flows';
-import {
-  Card,
-  Tabs,
-  TabsTrigger,
-  TabsList,
-} from '@remoteoss/remote-flows/internals';
+import { Card } from '@remoteoss/remote-flows/internals';
+import { Tabs, TabsTrigger, TabsList } from './components/ui/tabs';
 import Flag from 'react-flagpack';
 import React, { useState } from 'react';
 import { RemoteFlows } from './RemoteFlows';
@@ -163,10 +159,10 @@
         <div className='contractor-onboarding-form-layout'>
           <SelectCountryStep
             onSubmit={(payload: SelectCountryFormPayload) =>
               console.log('payload', payload)
             }
             onSuccess={(response: SelectCountrySuccess) =>
               console.log('response', response)
             }
             onError={({
               error,
@@ -188,7 +184,7 @@
         <div className='contractor-onboarding-form-layout'>
           <BasicInformationStep
             onSubmit={(payload: BasicInformationFormPayload) =>
               console.log('payload', payload)
             }
             onSuccess={(data: EmploymentCreationResponse) =>
               console.log('data', data)

example/src/CostCalculatorWithPremiumBenefits.tsx

@@ -20,15 +20,14 @@ import {
   convertFromCents,
   ZendeskTriggerButton,
 } from '@remoteoss/remote-flows';
+import { Card, cn } from '@remoteoss/remote-flows/internals';
 import {
   Drawer,
   DrawerContent,
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-  Card,
-  cn,
-} from '@remoteoss/remote-flows/internals';
+} from './components/ui/drawer';
 import { ButtonHTMLAttributes, useState, isValidElement } from 'react';
 import { RemoteFlows } from './RemoteFlows';
 import { components } from './CostCalculatorComponents';

example/src/OffboardingRequestModal.tsx

@@ -1,13 +1,13 @@
 import { TerminationDialogInfoContent } from '@remoteoss/remote-flows';
+import { Button } from './components/ui/button';
 import {
   Dialog,
   DialogTrigger,
   DialogContent,
   DialogHeader,
   DialogTitle,
-  Button,
-  ScrollArea,
-} from '@remoteoss/remote-flows/internals';
+} from './components/ui/dialog';
+import { ScrollArea } from './components/ui/scroll-area';
 
 export function OffboardingRequestModal({
   employee,

example/src/ReviewContractorOnboardingStep.tsx

@@ -4,7 +4,7 @@ import {
   NormalizedFieldError,
   useMagicLink,
 } from '@remoteoss/remote-flows';
-import { Button } from '@remoteoss/remote-flows/internals';
+import { Button } from './components/ui/button';
 import { InfoIcon } from 'lucide-react';
 import { InviteSection, ReviewMeta } from './ReviewOnboardingStep';
 import { AlertError } from './AlertError';

example/src/TerminationReasonsDialog.tsx

@@ -3,9 +3,9 @@ import {
   DialogContent,
   DialogHeader,
   DialogTrigger,
-  ScrollArea,
   DialogTitle,
-} from '@remoteoss/remote-flows/internals';
+} from './components/ui/dialog';
+import { ScrollArea } from './components/ui/scroll-area';
 import { TerminationReasonsDetailContent } from '@remoteoss/remote-flows';
 
 export function TerminationReasonsDialog() {

example/src/ZendeskDialog.tsx

@@ -5,9 +5,9 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  ScrollArea,
   DialogTrigger,
-} from '@remoteoss/remote-flows/internals';
+} from './components/ui/dialog';
+import { ScrollArea } from './components/ui/scroll-area';
 import type { ZendeskDrawerComponentProps } from '@remoteoss/remote-flows';
 
 export function ZendeskDialog({

example/src/components/PricingPlanModals.tsx

@@ -1,3 +1,4 @@
+import { Button } from './ui/button';
 import {
   Dialog,
   DialogTrigger,
@@ -6,8 +7,7 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-  Button,
-} from '@remoteoss/remote-flows/internals';
+} from './ui/dialog';
 import {
   onboardingWorkflows,
   corProductIdentifier,

src/components/ui/scroll-area.tsx → example/src/components/ui/scroll-area.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
-import { cn } from '@/src/lib/utils';
+import { cn } from '@remoteoss/remote-flows/internals';
 
 const ScrollArea = React.forwardRef<
   HTMLDivElement,

src/components/ui/tabs.tsx → example/src/components/ui/tabs.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-import { cn } from '@/src/lib/utils';
+import { cn } from '@remoteoss/remote-flows/internals';
 
 function Tabs({
   className,