From 812d8a3bb7fc778dc906a4db1625fe97b135fd7f Mon Sep 17 00:00:00 2001
From: americano98 <mr.nik.bazarov@gmail.com>
Date: Fri, 29 Nov 2024 16:02:55 +0300
Subject: [PATCH] chore: update imports, rm redudant files

---
 packages/canary/src/components/card.tsx       | 75 -------------------
 packages/canary/src/components/input-otp.tsx  | 72 ------------------
 packages/canary/src/index.ts                  |  2 -
 .../src/components/create-project-page.tsx    | 13 +++-
 .../src/components/forgot-password-page.tsx   | 16 +++-
 .../src/components/new-password-page.tsx      | 16 +++-
 .../playground/src/components/otp-page.tsx    | 16 ++--
 .../pull-request/pull-request-diff-viewer.tsx |  2 +-
 .../pull-request-timeline-item.tsx            |  3 +-
 .../playground/src/components/signin-page.tsx |  3 +-
 .../playground/src/components/signup-page.tsx |  7 +-
 .../src/layouts/PullRequestLayout.tsx         |  2 +-
 .../src/pages/repo-summary-page.tsx           |  2 +-
 .../src/components/create-project-page.tsx    | 13 +++-
 .../src/components/forgot-password-page.tsx   | 16 +++-
 .../src/components/new-password-page.tsx      | 16 +++-
 packages/views/src/components/otp-page.tsx    | 16 ++--
 .../pull-request/pull-request-diff-viewer.tsx |  2 +-
 .../pull-request-timeline-item.tsx            |  3 +-
 packages/views/src/components/signin-page.tsx | 16 +++-
 packages/views/src/components/signup-page.tsx |  7 +-
 packages/views/src/index.ts                   |  1 -
 .../src/layouts/Floating1ColumnLayout.tsx     | 30 --------
 .../views/src/layouts/PullRequestLayout.tsx   |  2 +-
 24 files changed, 119 insertions(+), 232 deletions(-)
 delete mode 100644 packages/canary/src/components/card.tsx
 delete mode 100644 packages/canary/src/components/input-otp.tsx
 delete mode 100644 packages/views/src/layouts/Floating1ColumnLayout.tsx

diff --git a/packages/canary/src/components/card.tsx b/packages/canary/src/components/card.tsx
deleted file mode 100644
index c1f87035e..000000000
--- a/packages/canary/src/components/card.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const cardVariants = cva('bg-card text-card-foreground rounded-lg border shadow', {
-  variants: {
-    variant: {
-      default: '',
-      plain: 'border-none bg-transparent shadow-none'
-    }
-  },
-  defaultVariants: {
-    variant: 'default'
-  }
-})
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
-  width?: 'auto' | 'full' | 'screen' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | string
-}
-
-const widthClasses = {
-  auto: 'w-auto',
-  full: 'w-full',
-  screen: 'w-screen',
-  xs: 'w-24',
-  sm: 'w-48',
-  md: 'w-64',
-  lg: 'w-72',
-  xl: 'w-80',
-  '2xl': 'w-96'
-}
-
-const Card = React.forwardRef<HTMLDivElement, CardProps>(({ variant, className, width = 'auto', ...props }, ref) => {
-  const widthClass = widthClasses[width as keyof typeof widthClasses] || width
-
-  return <div ref={ref} className={cn(cardVariants({ variant }), widthClass, className)} {...props} />
-})
-
-Card.displayName = 'Card'
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-  )
-)
-CardHeader.displayName = 'CardHeader'
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, children, ...props }, ref) => (
-    <h3 ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props}>
-      {children}
-    </h3>
-  )
-)
-CardTitle.displayName = 'CardTitle'
-
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
-  )
-)
-CardDescription.displayName = 'CardDescription'
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-)
-CardContent.displayName = 'CardContent'
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-)
-CardFooter.displayName = 'CardFooter'
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, cardVariants }
diff --git a/packages/canary/src/components/input-otp.tsx b/packages/canary/src/components/input-otp.tsx
deleted file mode 100644
index 656a2d218..000000000
--- a/packages/canary/src/components/input-otp.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-import { DashIcon } from '@radix-ui/react-icons'
-import { OTPInput, OTPInputContext } from 'input-otp'
-
-const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>(
-  ({ className, containerClassName, ...props }, ref) => (
-    <OTPInput
-      ref={ref}
-      containerClassName={cn('flex items-center gap-2 has-[:disabled]:opacity-50', containerClassName)}
-      className={cn('disabled:cursor-not-allowed', className)}
-      {...props}
-    />
-  )
-)
-InputOTP.displayName = 'InputOTP'
-
-const InputOTPGroup = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn('flex items-center', className)} {...props} />
-)
-InputOTPGroup.displayName = 'InputOTPGroup'
-
-interface InputOTPSlotProps extends React.ComponentPropsWithoutRef<'div'> {
-  index: number
-  size?: 'lg' | 'default'
-}
-
-const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(
-  ({ index, size = 'default', className, ...props }, ref) => {
-    const inputOTPContext = React.useContext(OTPInputContext)
-
-    if (!inputOTPContext?.slots?.[index]) {
-      console.error(`No slot data available for index ${index}`)
-      return null
-    }
-
-    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
-          { 'mx-1 h-12 w-10 rounded-md border-b border-l border-r border-t p-2 text-xl': size === 'lg' },
-          isActive && 'ring-ring z-10 ring-1',
-          className
-        )}
-        {...props}
-      >
-        {char}
-        {hasFakeCaret && (
-          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-            <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-          </div>
-        )}
-      </div>
-    )
-  }
-)
-InputOTPSlot.displayName = 'InputOTPSlot'
-
-const InputOTPSeparator = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>(
-  ({ ...props }, ref) => (
-    <div ref={ref} role="separator" {...props}>
-      <DashIcon />
-    </div>
-  )
-)
-InputOTPSeparator.displayName = 'InputOTPSeparator'
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/packages/canary/src/index.ts b/packages/canary/src/index.ts
index 56b35f3f6..b70aafde7 100644
--- a/packages/canary/src/index.ts
+++ b/packages/canary/src/index.ts
@@ -7,7 +7,6 @@ export * from './components/breadcrumb'
 export * from './components/button'
 export * from './components/split-button'
 export * from './components/calendar'
-export * from './components/card'
 export * from './components/carousel'
 export * from './components/checkbox'
 export * from './components/collapsible'
@@ -18,7 +17,6 @@ export * from './components/drawer'
 export * from './components/dropdown-menu'
 export * from './components/form'
 export * from './components/hover-card'
-export * from './components/input-otp'
 export * from './components/input'
 export * from './components/label'
 export * from './components/menubar'
diff --git a/packages/playground/src/components/create-project-page.tsx b/packages/playground/src/components/create-project-page.tsx
index 010493c13..1b8d6cc0a 100644
--- a/packages/playground/src/components/create-project-page.tsx
+++ b/packages/playground/src/components/create-project-page.tsx
@@ -3,7 +3,18 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, Icon, Input, Label, Spacer, Text } from '@harnessio/canary'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Icon,
+  Input,
+  Label,
+  Spacer,
+  Text
+} from '@harnessio/ui/components'
 
 import { SandboxLayout } from '..'
 
diff --git a/packages/playground/src/components/forgot-password-page.tsx b/packages/playground/src/components/forgot-password-page.tsx
index 060bb3c99..4a108f1ce 100644
--- a/packages/playground/src/components/forgot-password-page.tsx
+++ b/packages/playground/src/components/forgot-password-page.tsx
@@ -4,9 +4,19 @@ import { Link } from 'react-router-dom'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, Icon, Input, Label, Spacer, Text } from '@harnessio/canary'
-
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Icon,
+  Input,
+  Label,
+  Spacer,
+  Text
+} from '@harnessio/ui/components'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 interface PageProps {
   isLoading?: boolean
diff --git a/packages/playground/src/components/new-password-page.tsx b/packages/playground/src/components/new-password-page.tsx
index d8789af80..fb06ddb04 100644
--- a/packages/playground/src/components/new-password-page.tsx
+++ b/packages/playground/src/components/new-password-page.tsx
@@ -4,9 +4,19 @@ import { Link } from 'react-router-dom'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, Icon, Input, Label, Spacer, Text } from '@harnessio/canary'
-
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Icon,
+  Input,
+  Label,
+  Spacer,
+  Text
+} from '@harnessio/ui/components'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 interface PageProps {
   isLoading?: boolean
diff --git a/packages/playground/src/components/otp-page.tsx b/packages/playground/src/components/otp-page.tsx
index 36e36b853..2144b9659 100644
--- a/packages/playground/src/components/otp-page.tsx
+++ b/packages/playground/src/components/otp-page.tsx
@@ -3,24 +3,22 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
+import { ButtonGroup, cn } from '@harnessio/canary'
 import {
   Button,
-  ButtonGroup,
   buttonVariants,
   Card,
   CardContent,
   CardHeader,
   CardTitle,
-  cn,
   Icon,
   InputOTP,
   InputOTPGroup,
   InputOTPSlot,
   Spacer,
   Text
-} from '@harnessio/canary'
-
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
+} from '@harnessio/ui/components'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 interface PageProps {
   handleResend?: () => void
@@ -65,10 +63,10 @@ export function OTPPage({ handleResend, isLoading, handleFormSubmit }: PageProps
           <form onSubmit={handleSubmit(onSubmit)}>
             <InputOTP maxLength={4}>
               <InputOTPGroup id="otp" className="mx-auto flex" {...register('otp')}>
-                <InputOTPSlot index={0} size="lg" />
-                <InputOTPSlot index={1} size="lg" />
-                <InputOTPSlot index={2} size="lg" />
-                <InputOTPSlot index={3} size="lg" />
+                <InputOTPSlot index={0} />
+                <InputOTPSlot index={1} />
+                <InputOTPSlot index={2} />
+                <InputOTPSlot index={3} />
               </InputOTPGroup>
             </InputOTP>
             <Spacer size={8} />
diff --git a/packages/playground/src/components/pull-request/pull-request-diff-viewer.tsx b/packages/playground/src/components/pull-request/pull-request-diff-viewer.tsx
index fe28b0592..9c9853969 100644
--- a/packages/playground/src/components/pull-request/pull-request-diff-viewer.tsx
+++ b/packages/playground/src/components/pull-request/pull-request-diff-viewer.tsx
@@ -5,7 +5,7 @@ import { DiffBlock } from 'diff2html/lib/types'
 import { debounce } from 'lodash-es'
 import { OverlayScrollbars } from 'overlayscrollbars'
 
-import { Card, Input, Text } from '@harnessio/canary'
+import { Card, Input, Text } from '@harnessio/ui/components'
 
 import constants from './constants'
 
diff --git a/packages/playground/src/components/pull-request/pull-request-timeline-item.tsx b/packages/playground/src/components/pull-request/pull-request-timeline-item.tsx
index f8a0aa963..87aa673b3 100644
--- a/packages/playground/src/components/pull-request/pull-request-timeline-item.tsx
+++ b/packages/playground/src/components/pull-request/pull-request-timeline-item.tsx
@@ -2,7 +2,8 @@ import { memo, useEffect, useState } from 'react'
 
 import cx from 'classnames'
 
-import { Button, Card, Input, NodeGroup, Text } from '@harnessio/canary'
+import { NodeGroup } from '@harnessio/canary'
+import { Button, Card, Input, Text } from '@harnessio/ui/components'
 
 interface TimelineItemProps {
   header: {
diff --git a/packages/playground/src/components/signin-page.tsx b/packages/playground/src/components/signin-page.tsx
index a8bc342f4..c5b1512d7 100644
--- a/packages/playground/src/components/signin-page.tsx
+++ b/packages/playground/src/components/signin-page.tsx
@@ -5,8 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
 import { Button, Card, CardContent, CardHeader, CardTitle, Icon, Input, Label, Spacer, Text } from '@harnessio/canary'
-
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 interface PageProps {
   handleSignIn: (data: DataProps) => void
diff --git a/packages/playground/src/components/signup-page.tsx b/packages/playground/src/components/signup-page.tsx
index d45fcd7a8..9837624ff 100644
--- a/packages/playground/src/components/signup-page.tsx
+++ b/packages/playground/src/components/signup-page.tsx
@@ -4,21 +4,20 @@ import { Link } from 'react-router-dom'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
+import { Dock } from '@harnessio/canary'
 import {
   Button,
   Card,
   CardContent,
   CardHeader,
   CardTitle,
-  Dock,
   Icon,
   Input,
   Label,
   Spacer,
   Text
-} from '@harnessio/canary'
-
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
+} from '@harnessio/ui/components'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 interface PageProps {
   isLoading?: boolean
diff --git a/packages/playground/src/layouts/PullRequestLayout.tsx b/packages/playground/src/layouts/PullRequestLayout.tsx
index 436e55e92..58e18355e 100644
--- a/packages/playground/src/layouts/PullRequestLayout.tsx
+++ b/packages/playground/src/layouts/PullRequestLayout.tsx
@@ -3,9 +3,9 @@
 import { NavLink, Outlet } from 'react-router-dom'
 
 import { Badge, Icon, Spacer, Tabs, TabsList, TabsTrigger } from '@harnessio/canary'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 import { PullRequestHeader } from '../components/pull-request/pull-request-conversation-header'
-import { Floating1ColumnLayout } from './Floating1ColumnLayout'
 
 const mockedPullRequest = {
   number: 1,
diff --git a/packages/playground/src/pages/repo-summary-page.tsx b/packages/playground/src/pages/repo-summary-page.tsx
index c065c4047..e993b590f 100644
--- a/packages/playground/src/pages/repo-summary-page.tsx
+++ b/packages/playground/src/pages/repo-summary-page.tsx
@@ -13,6 +13,7 @@ import {
   StackedList,
   Text
 } from '@harnessio/canary'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 import { BranchSelector } from '../components/branch-chooser'
 import { SkeletonList } from '../components/loaders/skeleton-list'
@@ -21,7 +22,6 @@ import { NoSearchResults } from '../components/no-search-results'
 import { Summary } from '../components/repo-summary'
 import { RepoSummaryPanel } from '../components/repo-summary-panel'
 import { mockFiles } from '../data/mockSummaryFiiles'
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
 import { FullWidth2ColumnLayout } from '../layouts/FullWidth2ColumnLayout'
 import { PlaygroundListSettings } from '../settings/list-settings'
 
diff --git a/packages/views/src/components/create-project-page.tsx b/packages/views/src/components/create-project-page.tsx
index 010493c13..1b8d6cc0a 100644
--- a/packages/views/src/components/create-project-page.tsx
+++ b/packages/views/src/components/create-project-page.tsx
@@ -3,7 +3,18 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, Icon, Input, Label, Spacer, Text } from '@harnessio/canary'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Icon,
+  Input,
+  Label,
+  Spacer,
+  Text
+} from '@harnessio/ui/components'
 
 import { SandboxLayout } from '..'
 
diff --git a/packages/views/src/components/forgot-password-page.tsx b/packages/views/src/components/forgot-password-page.tsx
index 060bb3c99..4a108f1ce 100644
--- a/packages/views/src/components/forgot-password-page.tsx
+++ b/packages/views/src/components/forgot-password-page.tsx
@@ -4,9 +4,19 @@ import { Link } from 'react-router-dom'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, Icon, Input, Label, Spacer, Text } from '@harnessio/canary'
-
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Icon,
+  Input,
+  Label,
+  Spacer,
+  Text
+} from '@harnessio/ui/components'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 interface PageProps {
   isLoading?: boolean
diff --git a/packages/views/src/components/new-password-page.tsx b/packages/views/src/components/new-password-page.tsx
index d8789af80..fb06ddb04 100644
--- a/packages/views/src/components/new-password-page.tsx
+++ b/packages/views/src/components/new-password-page.tsx
@@ -4,9 +4,19 @@ import { Link } from 'react-router-dom'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, Icon, Input, Label, Spacer, Text } from '@harnessio/canary'
-
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Icon,
+  Input,
+  Label,
+  Spacer,
+  Text
+} from '@harnessio/ui/components'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 interface PageProps {
   isLoading?: boolean
diff --git a/packages/views/src/components/otp-page.tsx b/packages/views/src/components/otp-page.tsx
index 338dab138..681787c44 100644
--- a/packages/views/src/components/otp-page.tsx
+++ b/packages/views/src/components/otp-page.tsx
@@ -3,9 +3,8 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
+import { Button, ButtonGroup } from '@harnessio/canary'
 import {
-  Button,
-  ButtonGroup,
   Card,
   CardContent,
   CardHeader,
@@ -16,9 +15,8 @@ import {
   InputOTPSlot,
   Spacer,
   Text
-} from '@harnessio/canary'
-
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
+} from '@harnessio/ui/components'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 interface PageProps {
   handleResend?: () => void
@@ -63,10 +61,10 @@ export function OTPPage({ handleResend, isLoading, handleFormSubmit }: PageProps
           <form onSubmit={handleSubmit(onSubmit)}>
             <InputOTP maxLength={4}>
               <InputOTPGroup id="otp" className="mx-auto flex" {...register('otp')}>
-                <InputOTPSlot index={0} size="lg" />
-                <InputOTPSlot index={1} size="lg" />
-                <InputOTPSlot index={2} size="lg" />
-                <InputOTPSlot index={3} size="lg" />
+                <InputOTPSlot index={0} />
+                <InputOTPSlot index={1} />
+                <InputOTPSlot index={2} />
+                <InputOTPSlot index={3} />
               </InputOTPGroup>
             </InputOTP>
             <Spacer size={8} />
diff --git a/packages/views/src/components/pull-request/pull-request-diff-viewer.tsx b/packages/views/src/components/pull-request/pull-request-diff-viewer.tsx
index 0cb07396a..7f5cca993 100644
--- a/packages/views/src/components/pull-request/pull-request-diff-viewer.tsx
+++ b/packages/views/src/components/pull-request/pull-request-diff-viewer.tsx
@@ -5,7 +5,7 @@ import { DiffBlock } from 'diff2html/lib/types'
 import { debounce } from 'lodash-es'
 import { OverlayScrollbars } from 'overlayscrollbars'
 
-import { Card, Input, Text } from '@harnessio/canary'
+import { Card, Input, Text } from '@harnessio/ui/components'
 
 import constants from './constants'
 
diff --git a/packages/views/src/components/pull-request/pull-request-timeline-item.tsx b/packages/views/src/components/pull-request/pull-request-timeline-item.tsx
index cdbf07002..44e9dcab7 100644
--- a/packages/views/src/components/pull-request/pull-request-timeline-item.tsx
+++ b/packages/views/src/components/pull-request/pull-request-timeline-item.tsx
@@ -2,7 +2,8 @@ import { memo, useState } from 'react'
 
 import cx from 'classnames'
 
-import { Button, Card, Input, NodeGroup, Text } from '@harnessio/canary'
+import { NodeGroup } from '@harnessio/canary'
+import { Button, Card, Input, Text } from '@harnessio/ui/components'
 
 interface TimelineItemProps {
   header: {
diff --git a/packages/views/src/components/signin-page.tsx b/packages/views/src/components/signin-page.tsx
index bacb69494..d7ae062d8 100644
--- a/packages/views/src/components/signin-page.tsx
+++ b/packages/views/src/components/signin-page.tsx
@@ -4,9 +4,19 @@ import { Link } from 'react-router-dom'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
-import { Button, Card, CardContent, CardHeader, CardTitle, Icon, Input, Label, Spacer, Text } from '@harnessio/canary'
-
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Icon,
+  Input,
+  Label,
+  Spacer,
+  Text
+} from '@harnessio/ui/components'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 interface PageProps {
   handleSignIn: (data: DataProps) => void
diff --git a/packages/views/src/components/signup-page.tsx b/packages/views/src/components/signup-page.tsx
index 4929f499e..18de65a93 100644
--- a/packages/views/src/components/signup-page.tsx
+++ b/packages/views/src/components/signup-page.tsx
@@ -4,21 +4,20 @@ import { Link } from 'react-router-dom'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
+import { Dock } from '@harnessio/canary'
 import {
   Button,
   Card,
   CardContent,
   CardHeader,
   CardTitle,
-  Dock,
   Icon,
   Input,
   Label,
   Spacer,
   Text
-} from '@harnessio/canary'
-
-import { Floating1ColumnLayout } from '../layouts/Floating1ColumnLayout'
+} from '@harnessio/ui/components'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 interface PageProps {
   isLoading?: boolean
diff --git a/packages/views/src/index.ts b/packages/views/src/index.ts
index 6de33ff92..da29e8766 100644
--- a/packages/views/src/index.ts
+++ b/packages/views/src/index.ts
@@ -125,7 +125,6 @@ export * from './layouts/SandboxSettings'
 // eslint-disable-next-line import/export
 export * from './configs/canary-outlets'
 export * from './layouts/PaddingListLayout'
-export * from './layouts/Floating1ColumnLayout'
 export * from './layouts/RootLayout'
 export * from './components/layout/container'
 export * from './components/layout/topbar'
diff --git a/packages/views/src/layouts/Floating1ColumnLayout.tsx b/packages/views/src/layouts/Floating1ColumnLayout.tsx
deleted file mode 100644
index 8ee50b8bf..000000000
--- a/packages/views/src/layouts/Floating1ColumnLayout.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { cn } from '@harnessio/canary'
-
-interface Floating1ColumnLayoutProps {
-  className?: string
-  children: React.ReactNode
-  maxWidth?: 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  verticalCenter?: boolean
-}
-
-export const Floating1ColumnLayout = ({
-  className,
-  maxWidth = 'default', // Default to 'default' key
-  verticalCenter = false,
-  children
-}: Floating1ColumnLayoutProps) => {
-  const widthClass = {
-    default: 'max-w-[1200px]',
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
-    '2xl': 'max-w-2xl'
-  }[maxWidth]
-
-  const verticalCenterClass = verticalCenter ? 'flex items-center justify-center min-h-screen' : ''
-
-  const computedClassName = cn('px-8 pb-8 mx-auto', widthClass, verticalCenterClass, className)
-
-  return <div className={computedClassName}>{children}</div>
-}
diff --git a/packages/views/src/layouts/PullRequestLayout.tsx b/packages/views/src/layouts/PullRequestLayout.tsx
index 436e55e92..58e18355e 100644
--- a/packages/views/src/layouts/PullRequestLayout.tsx
+++ b/packages/views/src/layouts/PullRequestLayout.tsx
@@ -3,9 +3,9 @@
 import { NavLink, Outlet } from 'react-router-dom'
 
 import { Badge, Icon, Spacer, Tabs, TabsList, TabsTrigger } from '@harnessio/canary'
+import { Floating1ColumnLayout } from '@harnessio/ui/views'
 
 import { PullRequestHeader } from '../components/pull-request/pull-request-conversation-header'
-import { Floating1ColumnLayout } from './Floating1ColumnLayout'
 
 const mockedPullRequest = {
   number: 1,