refactor: update components to CoreUI 4

src/containers/TheContent.js

@@ -4,11 +4,12 @@ import {
   Route,
   Switch
 } from 'react-router-dom'
-import { CContainer, CFade } from '@coreui/react'
+import { CFade } from '@coreui/react'
+import { CContainer } from '@coreui/react-ts'
 
 // routes config
 import routes from '../routes'
-  
+
 const loading = (
   <div className="pt-3 text-center">
     <div className="sk-spinner sk-spinner-pulse"></div>

src/containers/TheHeaderDropdownMssg.js

@@ -5,6 +5,8 @@ import {
   CDropdownItem,
   CDropdownMenu,
   CDropdownToggle,
+} from '@coreui/react-ts'
+import {
   CImg
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
@@ -17,7 +19,7 @@ const TheHeaderDropdownMssg = () => {
       direction="down"
     >
       <CDropdownToggle className="c-header-nav-link" caret={false}>
-        <CIcon name="cil-envelope-open" /><CBadge shape="pill" color="info">{itemsCount}</CBadge>
+        <CIcon name="cil-envelope-open" /><CBadge shape="rounded-pill" color="info">{itemsCount}</CBadge>
       </CDropdownToggle>
       <CDropdownMenu className="pt-0" placement="bottom-end">
         <CDropdownItem

src/containers/TheHeaderDropdownNotif.js

@@ -17,7 +17,7 @@ const TheHeaderDropdownNotif = () => {
     >
       <CDropdownToggle className="c-header-nav-link" caret={false}>
         <CIcon name="cil-bell"/>
-        <CBadge shape="pill" color="danger">{itemsCount}</CBadge>
+        <CBadge shape="rounded-pill" color="danger">{itemsCount}</CBadge>
       </CDropdownToggle>
       <CDropdownMenu  placement="bottom-end" className="pt-0">
         <CDropdownItem

src/containers/TheHeaderDropdownTasks.js

@@ -17,7 +17,7 @@ const TheHeaderDropdownTasks = () => {
     >
       <CDropdownToggle>
         <CIcon name="cil-list" />
-        <CBadge shape="pill" color="warning">{itemsCount}</CBadge>
+        <CBadge shape="rounded-pill" color="warning">{itemsCount}</CBadge>
       </CDropdownToggle>
       <CDropdownMenu placement="bottom-end" className="pt-0">
         <CDropdownItem

src/containers/_nav.js

@@ -8,7 +8,7 @@ const _nav =  [
     as: NavLink,
     anchor: 'Dashboard',
     to: '/dashboard',
-    icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
+    icon: <CIcon name="cil-speedometer" customClasses="nav-icon"/>,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -23,14 +23,14 @@ const _nav =  [
     as: NavLink,
     anchor: 'Colors',
     to: '/theme/colors',
-    icon: 'cil-drop',
+    icon: <CIcon name="cil-drop" customClasses="nav-icon"/>,
   },
   {
     _component: 'CNavItem',
     as: NavLink,
     anchor: 'Typography',
     to: '/theme/typography',
-    icon: 'cil-pencil',
+    icon: <CIcon name="cil-pencil" customClasses="nav-icon"/>,
   },
   {
     _component: 'CNavTitle',
@@ -41,7 +41,7 @@ const _nav =  [
     as: NavLink,
     anchor: 'Base',
     to: '/to',
-    icon: 'cil-puzzle',
+    icon: <CIcon name="cil-puzzle" customClasses="nav-icon"/>,
     items: [
       {
         _component: 'CNavItem',
@@ -145,7 +145,7 @@ const _nav =  [
     _component: 'CNavGroup',
     anchor: 'Buttons',
     // route: '/buttons',
-    icon: 'cil-cursor',
+    icon: <CIcon name="cil-cursor" customClasses="nav-icon"/>,
     items: [
       {
         _component: 'CNavItem',
@@ -178,13 +178,13 @@ const _nav =  [
     as: NavLink,
     anchor: 'Charts',
     to: '/charts',
-    icon: 'cil-chart-pie'
+    icon: <CIcon name="cil-chart-pie" customClasses="nav-icon"/>
   },
   {
     _component: 'CNavGroup',
     anchor: 'Icons',
     // route: '/icons',
-    icon: 'cil-star',
+    icon: <CIcon name="cil-star" customClasses="nav-icon"/>,
     items: [
       {
         _component: 'CNavItem',
@@ -214,7 +214,7 @@ const _nav =  [
     _component: 'CNavGroup',
     anchor: 'Notifications',
     // route: '/notifications',
-    icon: 'cil-bell',
+    icon: <CIcon name="cil-bell" customClasses="nav-icon"/>,
     items: [
       {
         _component: 'CNavItem',
@@ -247,7 +247,7 @@ const _nav =  [
     as: NavLink,
     anchor: 'Widgets',
     to: '/widgets',
-    icon: 'cil-calculator',
+    icon: <CIcon name="cil-calculator" customClasses="nav-icon"/>,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -263,7 +263,7 @@ const _nav =  [
   {
     _component: 'CNavGroup',
     anchor: 'Pages',
-    icon: 'cil-star',
+    icon: <CIcon name="cil-star" customClasses="nav-icon"/>,
     items: [
       {
         _component: 'CNavItem',
@@ -294,7 +294,7 @@ const _nav =  [
   // {
   //   _component: 'CNavItem',
   //   anchor: 'Disabled',
-  //   icon: 'cil-ban',
+  //   icon: <CIcon name="cil-ban" customClasses="nav-icon"/>,
   //   badge: {
   //     color: 'secondary',
   //     text: 'NEW',
@@ -315,7 +315,7 @@ const _nav =  [
   //   anchor: 'Label danger',
   //   to: '',
   //   icon: {
-  //     anchor: 'cil-star',
+  //     anchor: <CIcon name="cil-star" customClasses="nav-icon"/>,
   //     classanchor: 'text-danger'
   //   },
   //   label: true
@@ -325,7 +325,7 @@ const _nav =  [
   //   anchor: 'Label info',
   //   to: '',
   //   icon: {
-  //     anchor: 'cil-star',
+  //     anchor: <CIcon name="cil-star" customClasses="nav-icon"/>,
   //     classanchor: 'text-info'
   //   },
   //   label: true
@@ -335,7 +335,7 @@ const _nav =  [
   //   anchor: 'Label warning',
   //   to: '',
   //   icon: {
-  //     anchor: 'cil-star',
+  //     anchor: <CIcon name="cil-star" customClasses="nav-icon"/>,
   //     classanchor: 'text-warning'
   //   },
   //   label: true

src/views/base/cards/Cards.js

@@ -88,7 +88,7 @@ const Cards = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Card with label
-              <CBadge shape="pill" color="danger" className="float-end">42</CBadge>
+              <CBadge shape="rounded-pill" color="danger" className="float-end">42</CBadge>
             </CCardHeader>
             <CCardBody>
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

src/views/base/carousels/Carousels.js

@@ -11,7 +11,7 @@ import {
   CCarouselItem,
   CCol,
   CRow
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const slides = [

src/views/base/collapses/Collapses.js

@@ -7,8 +7,10 @@ import {
   CCardHeader,
   CCol,
   CCollapse,
-  CFade,
   CRow
+} from '@coreui/react-ts';
+import {
+  CFade,
 } from '@coreui/react';
 import { DocsLink } from 'src/reusable'
 

src/views/base/forms/BasicForms.js

@@ -309,20 +309,20 @@ const BasicForms = () => {
                       className="me-1"
                       color="danger"
                       defaultChecked
-                      shape="pill"
+                      shape="rounded-pill"
                     />
                     <CSwitch
                       className="me-1"
                       color="info"
                       defaultChecked
-                      shape="pill"
+                      shape="rounded-pill"
                       variant="outline"
                     />
                     <CSwitch
                       className="me-1"
                       color="dark"
                       defaultChecked
-                      shape="pill"
+                      shape="rounded-pill"
                       variant="opposite"
                     />
                   </CCol>

src/views/base/jumbotrons/Jumbotrons.js

@@ -1,4 +1,9 @@
 import React from 'react'
+import {
+  CJumbotron,
+  CEmbed,
+  CEmbedItem
+} from '@coreui/react'
 import {
   CButton,
   CCard,
@@ -6,11 +11,8 @@ import {
   CCardHeader,
   CCol,
   CContainer,
-  CJumbotron,
   CRow,
-  CEmbed,
+} from '@coreui/react-ts'
-  CEmbedItem
-} from '@coreui/react'
 import { DocsLink } from 'src/reusable'
 
 const Jumbotrons = () => {

src/views/base/list-groups/ListGroups.js

@@ -159,15 +159,15 @@ const ListGroups = () => {
               <CListGroup>
                 <CListGroupItem className="justify-content-between">
                   Cras justo odio
-                  <CBadge className="float-end" shape="pill" color="primary">14</CBadge>
+                  <CBadge className="float-end" shape="rounded-pill" color="primary">14</CBadge>
                 </CListGroupItem>
                 <CListGroupItem className="justify-content-between">
                   Dapibus ac facilisis in
-                  <CBadge className="float-end" shape="pill" color="primary">2</CBadge>
+                  <CBadge className="float-end" shape="rounded-pill" color="primary">2</CBadge>
                 </CListGroupItem>
                 <CListGroupItem className="justify-content-between">
                   Morbi leo risus
-                  <CBadge className="float-end" shape="pill" color="primary">1</CBadge>
+                  <CBadge className="float-end" shape="rounded-pill" color="primary">1</CBadge>
                 </CListGroupItem>
               </CListGroup>
             </CCardBody>

src/views/base/paginations/Pagnations.js

@@ -3,8 +3,9 @@ import {
   CCard,
   CCardBody,
   CCardHeader,
-  CPagination
+  CPagination,
-} from '@coreui/react'
+  CPaginationItem
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 
@@ -20,11 +21,13 @@ const Paginations = () => {
         </CCardHeader>
         <CCardBody>
           <h6>Default</h6>
-          <CPagination
+          <CPagination>
-            activePage={currentPage}
+            <CPaginationItem>Previous</CPaginationItem>
-            pages={10}
+            <CPaginationItem>1</CPaginationItem>
-            onActivePageChange={setCurrentPage}
+            <CPaginationItem>2</CPaginationItem>
-          />
+            <CPaginationItem>3</CPaginationItem>
+            <CPaginationItem>Next</CPaginationItem>
+          </CPagination>
           <br></br>
 
           <h6>Small</h6>

src/views/base/popovers/Popovers.js

@@ -4,11 +4,11 @@ import {
   CCard,
   CCardBody,
   CCardHeader,
+  CLink,
   CPopover,
   CRow,
   CCol,
 } from '@coreui/react-ts'
-import { CLink } from '@coreui/react'
 import { DocsLink } from 'src/reusable'
 
 const Popovers = () => {

src/views/base/tables/Tables.js

@@ -1,13 +1,15 @@
 import React from 'react'
+import {
+  CDataTable,
+} from '@coreui/react'
 import {
   CBadge,
   CCard,
   CCardBody,
   CCardHeader,
   CCol,
-  CDataTable,
   CRow
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 import usersData from '../../users/UsersData'

src/views/base/tooltips/Tooltips.js

@@ -4,13 +4,11 @@ import {
   CCard,
   CCardBody,
   CCardHeader,
+  CLink,
   CTooltip,
   CRow,
   CCol,
 } from '@coreui/react-ts'
-import {
-  CLink
-} from '@coreui/react'
 import { DocsLink } from 'src/reusable'
 
 const Tooltips = () => {

src/views/buttons/brand-buttons/BrandButtons.js

@@ -6,7 +6,7 @@ import {
   CCardHeader,
   CCol,
   CRow
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
 const BrandButtons = () => {

src/views/buttons/button-groups/ButtonGroups.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import {
   CButton,
+  CCallout,
   CDropdown,
   CButtonGroup,
+  CButtonToolbar,
   CCard,
   CCardBody,
   CCardHeader,
@@ -15,10 +17,6 @@ import {
   CInputGroupText,
   CRow,
 } from '@coreui/react-ts'
-import {
-  CButtonToolbar,
-  CCallout
-} from '@coreui/react'
 import { DocsLink } from 'src/reusable'
 
 const ButtonGroups = () => {

src/views/buttons/buttons/Buttons.js

@@ -436,31 +436,31 @@ const Buttons = () => {
               Normal
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="primary">Primary</CButton>
+              <CButton shape="rounded-pill" color="primary">Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="secondary">Secondary</CButton>
+              <CButton shape="rounded-pill" color="secondary">Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="success">Success</CButton>
+              <CButton shape="rounded-pill" color="success">Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="warning">Warning</CButton>
+              <CButton shape="rounded-pill" color="warning">Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="danger">Danger</CButton>
+              <CButton shape="rounded-pill" color="danger">Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="info">Info</CButton>
+              <CButton shape="rounded-pill" color="info">Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="light">Light</CButton>
+              <CButton shape="rounded-pill" color="light">Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="dark">Dark</CButton>
+              <CButton shape="rounded-pill" color="dark">Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="link">Link</CButton>
+              <CButton shape="rounded-pill" color="link">Link</CButton>
             </CCol>
           </CRow>
           <CRow className="align-items-center mt-3">
@@ -468,31 +468,31 @@ const Buttons = () => {
               Active State
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active shape="pill" color="primary" aria-pressed="true">Primary</CButton>
+              <CButton active shape="rounded-pill" color="primary" aria-pressed="true">Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active shape="pill" color="secondary" aria-pressed="true">Secondary</CButton>
+              <CButton active shape="rounded-pill" color="secondary" aria-pressed="true">Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active shape="pill" color="success" aria-pressed="true">Success</CButton>
+              <CButton active shape="rounded-pill" color="success" aria-pressed="true">Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active shape="pill" color="warning" aria-pressed="true">Warning</CButton>
+              <CButton active shape="rounded-pill" color="warning" aria-pressed="true">Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active shape="pill" color="danger" aria-pressed="true">Danger</CButton>
+              <CButton active shape="rounded-pill" color="danger" aria-pressed="true">Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active shape="pill" color="info" aria-pressed="true">Info</CButton>
+              <CButton active shape="rounded-pill" color="info" aria-pressed="true">Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active shape="pill" color="light" aria-pressed="true">Light</CButton>
+              <CButton active shape="rounded-pill" color="light" aria-pressed="true">Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active shape="pill" color="dark" aria-pressed="true">Dark</CButton>
+              <CButton active shape="rounded-pill" color="dark" aria-pressed="true">Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton active shape="pill" color="link" aria-pressed="true">Link</CButton>
+              <CButton active shape="rounded-pill" color="link" aria-pressed="true">Link</CButton>
             </CCol>
           </CRow>
           <CRow className="align-items-center mt-3">
@@ -500,31 +500,31 @@ const Buttons = () => {
               Disabled
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="primary" disabled>Primary</CButton>
+              <CButton shape="rounded-pill" color="primary" disabled>Primary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="secondary" disabled>Secondary</CButton>
+              <CButton shape="rounded-pill" color="secondary" disabled>Secondary</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="success" disabled>Success</CButton>
+              <CButton shape="rounded-pill" color="success" disabled>Success</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="warning" disabled>Warning</CButton>
+              <CButton shape="rounded-pill" color="warning" disabled>Warning</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="danger" disabled>Danger</CButton>
+              <CButton shape="rounded-pill" color="danger" disabled>Danger</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="info" disabled>Info</CButton>
+              <CButton shape="rounded-pill" color="info" disabled>Info</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="light" disabled>Light</CButton>
+              <CButton shape="rounded-pill" color="light" disabled>Light</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="dark" disabled>Dark</CButton>
+              <CButton shape="rounded-pill" color="dark" disabled>Dark</CButton>
             </CCol>
             <CCol col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
-              <CButton shape="pill" color="link" disabled>Link</CButton>
+              <CButton shape="rounded-pill" color="link" disabled>Link</CButton>
             </CCol>
           </CRow>
         </CCardBody>
@@ -553,7 +553,7 @@ const Buttons = () => {
               <CButton shape="square" color="warning" size="sm">Square Button</CButton>
             </CCol>
             <CCol col="2" className="mb-3 mb-xl-0 text-center">
-              <CButton shape="pill" color="danger" size="sm">Pill Button</CButton>
+              <CButton shape="rounded-pill" color="danger" size="sm">Pill Button</CButton>
             </CCol>
           </CRow>
           <CRow className="align-items-center mt-3">
@@ -573,7 +573,7 @@ const Buttons = () => {
               <CButton shape="square" color="warning">Square Button</CButton>
             </CCol>
             <CCol col="2" className="mb-3 mb-xl-0 text-center">
-              <CButton shape="pill" color="danger">Pill Button</CButton>
+              <CButton shape="rounded-pill" color="danger">Pill Button</CButton>
             </CCol>
           </CRow>
           <CRow className="align-items-center mt-3">
@@ -593,7 +593,7 @@ const Buttons = () => {
               <CButton shape="square" color="warning" size="lg">Square Button</CButton>
             </CCol>
             <CCol col="2" className="mb-3 mb-xl-0 text-center">
-              <CButton shape="pill" color="danger" size="lg">Pill Button</CButton>
+              <CButton shape="rounded-pill" color="danger" size="lg">Pill Button</CButton>
             </CCol>
           </CRow>
         </CCardBody>
@@ -626,7 +626,7 @@ const Buttons = () => {
               </CButton>
             </CCol>
             <CCol col="2" className="text-center mt-3">
-              <CButton shape="pill" color="danger">
+              <CButton shape="rounded-pill" color="danger">
                 <CIcon name="cil-lightbulb" />Pill Button
               </CButton>
             </CCol>

src/views/charts/Charts.js

@@ -4,7 +4,7 @@ import {
   CCardBody,
   CCardGroup,
   CCardHeader
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import {
   CChartBar,
   CChartLine,

src/views/dashboard/Dashboard.js

@@ -1,13 +1,11 @@
 import React, { lazy } from 'react'
-import {
-  CCallout
-} from '@coreui/react'
 
 import {
   CAvatar,
   CBadge,
   CButton,
   CButtonGroup,
+  CCallout,
   CCard,
   CCardBody,
   CCardFooter,
@@ -221,10 +219,10 @@ const Dashboard = () => {
                   </div>
                   <div className="legend text-center">
                     <small>
-                      <sup className="px-1"><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
+                      <sup className="px-1"><CBadge shape="rounded-pill" color="info">&nbsp;</CBadge></sup>
                       New clients
                       &nbsp;
-                      <sup className="px-1"><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
+                      <sup className="px-1"><CBadge shape="rounded-pill" color="danger">&nbsp;</CBadge></sup>
                       Recurring clients
                     </small>
                   </div>

src/views/notifications/alerts/Alerts.js

@@ -1,7 +1,4 @@
 import React from 'react'
-import {
-  CLink,
-} from '@coreui/react'
 import {
   CAlert,
   CAlertHeading,
@@ -10,6 +7,7 @@ import {
   CCardBody,
   CCardHeader,
   CCol,
+  CLink,
   CProgress,
   CRow,
 } from '@coreui/react-ts'

src/views/notifications/badges/Badges.js

@@ -30,7 +30,7 @@ const Badges = () => {
           </CCardBody>
           <CCardFooter>
             <CButton color="secondary">
-              Notifications <CBadge color="primary" shape="pill" style={{ position: 'static' }}>9</CBadge>
+              Notifications <CBadge color="primary" shape="rounded-pill" style={{ position: 'static' }}>9</CBadge>
             </CButton>
           </CCardFooter>
         </CCard>

src/views/pages/page404/Page404.js

@@ -3,13 +3,11 @@ import {
   CButton,
   CCol,
   CContainer,
-  CInput,
+  CFormControl,
   CInputGroup,
-  CInputGroupPrepend,
-  CInputGroupAppend,
   CInputGroupText,
-  CRow
+  CRow,
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
 const Page404 = () => {
@@ -24,15 +22,13 @@ const Page404 = () => {
               <p className="text-muted float-start">The page you are looking for was not found.</p>
             </div>
             <CInputGroup className="input-prepend">
-              <CInputGroupPrepend>
+              <CInputGroupText>
-                <CInputGroupText>
+                <CIcon name="cil-magnifying-glass" />
-                  <CIcon name="cil-magnifying-glass" />
+              </CInputGroupText>
-                </CInputGroupText>
+              <CFormControl size="16" type="text" placeholder="What are you looking for?" />
-              </CInputGroupPrepend>
+              <CInputGroupText>
-              <CInput size="16" type="text" placeholder="What are you looking for?" />
-              <CInputGroupAppend>
                 <CButton color="info">Search</CButton>
-              </CInputGroupAppend>
+              </CInputGroupText>
             </CInputGroup>
           </CCol>
         </CRow>

src/views/pages/page500/Page500.js

@@ -3,13 +3,11 @@ import {
   CButton,
   CCol,
   CContainer,
-  CInput,
+  CFormControl,
   CInputGroup,
-  CInputGroupAppend,
-  CInputGroupPrepend,
   CInputGroupText,
   CRow
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
 const Page500 = () => {
@@ -24,15 +22,13 @@ const Page500 = () => {
               <p className="text-muted float-start">The page you are looking for is temporarily unavailable.</p>
             </span>
             <CInputGroup className="input-prepend">
-              <CInputGroupPrepend>
+              <CInputGroupText>
-                <CInputGroupText>
+                <CIcon name="cil-magnifying-glass" />
-                  <CIcon name="cil-magnifying-glass" />
+              </CInputGroupText>
-                </CInputGroupText>
+              <CFormControl size="16" type="text" placeholder="What are you looking for?" />
-              </CInputGroupPrepend>
+              <CInputGroupText>
-              <CInput size="16" type="text" placeholder="What are you looking for?" />
-              <CInputGroupAppend>
                 <CButton color="info">Search</CButton>
-              </CInputGroupAppend>
+              </CInputGroupText>
             </CInputGroup>
           </CCol>
         </CRow>

src/views/theme/colors/Colors.js

@@ -6,7 +6,7 @@ import {
   CCard,
   CCardHeader,
   CCardBody
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import { rgbToHex } from '@coreui/utils'
 import { DocsLink } from 'src/reusable'
 

src/views/theme/typography/Typography.js

@@ -3,7 +3,7 @@ import {
   CCard,
   CCardHeader,
   CCardBody
-} from '@coreui/react'
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const Typography = () => {

src/views/users/User.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
+import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
 import usersData from './UsersData'

src/views/widgets/Widgets.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import {
   CCardFooter,
+  CCardGroup,
   CCol,
+  CLink,
   CRow,
   CProgress
 } from '@coreui/react-ts'
 
 import {
-  CCardGroup,
-  CLink,
   CWidgetProgress,
   CWidgetIcon,
   CWidgetProgressIcon,