From 99044c0042be68f41d570be79b9eac2f5e0ae550 Mon Sep 17 00:00:00 2001
From: fathima <fathima@keyvalue.systems>
Date: Mon, 21 Jul 2025 21:28:55 +0530
Subject: [PATCH] feat: add components to examples folder and its style files

---
 example/src/App.tsx                           |   6 +-
 {src => example/src}/components/DetailRow.tsx |   0
 .../src}/components/ExportDropdown.tsx        |   0
 .../src}/components/FilterDropdown.tsx        |   0
 {src => example/src}/components/Popup.tsx     |   0
 .../src}/components/RowDetailsPopup.tsx       |   5 +-
 {src => example/src}/components/SidePanel.tsx |  53 +-
 .../src}/components/SidePanelInput.tsx        |   1 -
 example/src/styles/ExportDropdown.css         |  43 ++
 example/src/styles/FilterDropdown.css         | 252 ++++++++
 example/src/styles/Popup.css                  | 155 +++++
 example/src/styles/RowDetailsPopup.css        | 184 ++++++
 example/src/styles/SidePanel.css              |  47 ++
 example/src/styles/SidePanelInput.css         |  41 ++
 example/src/styles/componentStyles.ts         | 544 ++++++++++++++++++
 example/src/styles/style.tsx                  | 157 +++++
 example/src/types/css.d.ts                    |   4 +
 example/src/types/theme.ts                    |  48 ++
 example/src/types/types.ts                    | 105 ++++
 rollup.config.js                              |   2 +-
 src/App.tsx                                   |   6 +-
 src/components/MultiLevelTable.tsx            |   6 +-
 src/index.ts                                  |   2 -
 23 files changed, 1617 insertions(+), 44 deletions(-)
 rename {src => example/src}/components/DetailRow.tsx (100%)
 rename {src => example/src}/components/ExportDropdown.tsx (100%)
 rename {src => example/src}/components/FilterDropdown.tsx (100%)
 rename {src => example/src}/components/Popup.tsx (100%)
 rename {src => example/src}/components/RowDetailsPopup.tsx (99%)
 rename {src => example/src}/components/SidePanel.tsx (79%)
 rename {src => example/src}/components/SidePanelInput.tsx (99%)
 create mode 100644 example/src/styles/ExportDropdown.css
 create mode 100644 example/src/styles/FilterDropdown.css
 create mode 100644 example/src/styles/Popup.css
 create mode 100644 example/src/styles/RowDetailsPopup.css
 create mode 100644 example/src/styles/SidePanel.css
 create mode 100644 example/src/styles/SidePanelInput.css
 create mode 100644 example/src/styles/componentStyles.ts
 create mode 100644 example/src/styles/style.tsx
 create mode 100644 example/src/types/css.d.ts
 create mode 100644 example/src/types/theme.ts
 create mode 100644 example/src/types/types.ts

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 01f13e6..3a60b55 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -2,9 +2,9 @@ import React, { useState } from "react";
 
 import { DeleteIcon, EditIcon } from "../../src/components/icons";
 import { MultiLevelTable } from "../../src/components/MultiLevelTable";
-import { Popup } from "../../src/components/Popup";
-import { RowDetailsPopup } from "../../src/components/RowDetailsPopup";
-import { SidePanel } from "../../src/components/SidePanel";
+import { Popup } from "./components/Popup";
+import { RowDetailsPopup } from "./components/RowDetailsPopup";
+import { SidePanel } from "./components/SidePanel";
 import { getStatusStyle, tableRowTypography } from "../../src/styles/style";
 import { darkTheme, lightTheme } from "../../src/themes";
 import type { ThemeProps } from "../../src/types/theme";
diff --git a/src/components/DetailRow.tsx b/example/src/components/DetailRow.tsx
similarity index 100%
rename from src/components/DetailRow.tsx
rename to example/src/components/DetailRow.tsx
diff --git a/src/components/ExportDropdown.tsx b/example/src/components/ExportDropdown.tsx
similarity index 100%
rename from src/components/ExportDropdown.tsx
rename to example/src/components/ExportDropdown.tsx
diff --git a/src/components/FilterDropdown.tsx b/example/src/components/FilterDropdown.tsx
similarity index 100%
rename from src/components/FilterDropdown.tsx
rename to example/src/components/FilterDropdown.tsx
diff --git a/src/components/Popup.tsx b/example/src/components/Popup.tsx
similarity index 100%
rename from src/components/Popup.tsx
rename to example/src/components/Popup.tsx
diff --git a/src/components/RowDetailsPopup.tsx b/example/src/components/RowDetailsPopup.tsx
similarity index 99%
rename from src/components/RowDetailsPopup.tsx
rename to example/src/components/RowDetailsPopup.tsx
index 3d9f0bf..7d5181b 100644
--- a/src/components/RowDetailsPopup.tsx
+++ b/example/src/components/RowDetailsPopup.tsx
@@ -1,10 +1,9 @@
 import React, { useEffect } from 'react';
 
 import { DetailRow } from './DetailRow';
-import { getStatusStyle, tableRowTypography } from '../styles/style';
-import type { ThemeProps } from '../types/theme';
 import type { DataItem } from '../types/types';
-
+import type { ThemeProps } from '../types/theme';
+import { getStatusStyle, tableRowTypography } from '../styles/style';
 import '../styles/RowDetailsPopup.css';
 
 interface RowDetailsPopupProps {
diff --git a/src/components/SidePanel.tsx b/example/src/components/SidePanel.tsx
similarity index 79%
rename from src/components/SidePanel.tsx
rename to example/src/components/SidePanel.tsx
index 036e09c..5b2fa4c 100644
--- a/src/components/SidePanel.tsx
+++ b/example/src/components/SidePanel.tsx
@@ -1,11 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { SidePanelInput } from './SidePanelInput';
-import { createComponentStyles } from '../styles/componentStyles';
-import { getStatusStyle } from '../styles/style';
-import type { ThemeProps } from '../types/theme';
 import type { DataItem } from '../types/types';
-
+import type { ThemeProps } from '../types/theme';
+import { componentStyles, getStatusStyle } from '../styles/style';
 import '../styles/SidePanel.css';
 
 interface SidePanelProps {
@@ -31,7 +29,6 @@ export const SidePanel: React.FC<SidePanelProps> = ({
   isStatusEditable = false, // Status is typically not editable
 }) => {
   const [formData, setFormData] = useState<Partial<DataItem>>({});
-  const styles = createComponentStyles(theme);
 
   // Prevent body scroll when side panel is open
   useEffect(() => {
@@ -89,7 +86,7 @@ export const SidePanel: React.FC<SidePanelProps> = ({
     
     return (
       <span style={{ 
-        ...styles.statusBadge.base,
+        ...componentStyles.statusBadge.base,
         ...style
       }}>
         {status}
@@ -104,22 +101,22 @@ export const SidePanel: React.FC<SidePanelProps> = ({
     const firstLetter = value.charAt(0).toUpperCase();
     
     return (
-      <div style={styles.resourceTypeDisplay.container}>
+      <div style={componentStyles.resourceTypeDisplay.container}>
         <div style={{
-          ...styles.resourceTypeDisplay.icon,
-          ...(imageURL ? styles.resourceTypeDisplay.iconWithImage : styles.resourceTypeDisplay.iconWithoutImage)
+          ...componentStyles.resourceTypeDisplay.icon,
+          ...(imageURL ? componentStyles.resourceTypeDisplay.iconWithImage : componentStyles.resourceTypeDisplay.iconWithoutImage)
         }}>
           {imageURL ? (
             <img 
               src={imageURL} 
               alt={value}
-              style={styles.resourceTypeDisplay.image}
+              style={componentStyles.resourceTypeDisplay.image}
             />
           ) : (
             firstLetter
           )}
         </div>
-        <span style={styles.resourceTypeDisplay.text}>{value}</span>
+        <span style={componentStyles.resourceTypeDisplay.text}>{value}</span>
       </div>
     );
   };
@@ -130,36 +127,36 @@ export const SidePanel: React.FC<SidePanelProps> = ({
       <div 
         className="side-panel-overlay"
         onClick={onClose}
-        style={styles.sidePanel.overlay}
+        style={componentStyles.sidePanel.overlay}
       />
       
       {/* Side Panel */}
       <div 
         className="side-panel"
         style={{
-          ...styles.sidePanel.container,
+          ...componentStyles.sidePanel.container,
           transform: isOpen ? 'translateX(0)' : 'translateX(100%)',
           transition: 'transform 0.3s ease-in-out',
         }}
       >
         {/* Header */}
-        <div style={styles.sidePanel.header}>
-          <h2 style={styles.sidePanel.title}>
+        <div style={componentStyles.sidePanel.header}>
+          <h2 style={componentStyles.sidePanel.title}>
             Resource Details
           </h2>
           <button
             onClick={onClose}
-            style={styles.sidePanel.closeButton}
+            style={componentStyles.sidePanel.closeButton}
           >
             ×
           </button>
         </div>
 
         {/* Content */}
-        <div style={styles.sidePanel.content}>
+        <div style={componentStyles.sidePanel.content}>
           {/* Resource Type */}
-          <div style={styles.sidePanel.fieldContainer}>
-            <label style={styles.sidePanel.label}>
+          <div style={componentStyles.sidePanel.fieldContainer}>
+            <label style={componentStyles.sidePanel.label}>
               Resource Type
             </label>
             <ResourceTypeDisplay 
@@ -169,11 +166,11 @@ export const SidePanel: React.FC<SidePanelProps> = ({
           </div>
 
           {/* ID */}
-          <div style={styles.sidePanel.fieldContainer}>
-            <label style={styles.sidePanel.label}>
+          <div style={componentStyles.sidePanel.fieldContainer}>
+            <label style={componentStyles.sidePanel.label}>
               ID *
             </label>
-            <div style={styles.sidePanel.idField}>
+            <div style={componentStyles.sidePanel.idField}>
               {item.id}
             </div>
           </div>
@@ -199,8 +196,8 @@ export const SidePanel: React.FC<SidePanelProps> = ({
           />
 
           {/* Status */}
-          <div style={styles.sidePanel.fieldContainer}>
-            <label style={styles.sidePanel.label}>
+          <div style={componentStyles.sidePanel.fieldContainer}>
+            <label style={componentStyles.sidePanel.label}>
               Status
             </label>
             {isStatusEditable ? (
@@ -229,13 +226,13 @@ export const SidePanel: React.FC<SidePanelProps> = ({
         </div>
 
         {/* Footer with Save Changes Button */}
-        <div style={styles.sidePanel.footer}>
+        <div style={componentStyles.sidePanel.footer}>
           <button
             onClick={handleSaveChanges}
             disabled={!hasChanges}
             style={{
-              ...styles.sidePanel.saveButton,
-              ...(hasChanges ? styles.sidePanel.saveButtonEnabled : styles.sidePanel.saveButtonDisabled),
+              ...componentStyles.sidePanel.saveButton,
+              ...(hasChanges ? componentStyles.sidePanel.saveButtonEnabled : componentStyles.sidePanel.saveButtonDisabled),
             }}
             onMouseEnter={(e) => {
               if (hasChanges) 
diff --git a/src/components/SidePanelInput.tsx b/example/src/components/SidePanelInput.tsx
similarity index 99%
rename from src/components/SidePanelInput.tsx
rename to example/src/components/SidePanelInput.tsx
index e30fe29..20ada15 100644
--- a/src/components/SidePanelInput.tsx
+++ b/example/src/components/SidePanelInput.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
 import type { ThemeProps } from '../types/theme';
-
 import '../styles/SidePanelInput.css';
 
 interface SidePanelInputProps {
diff --git a/example/src/styles/ExportDropdown.css b/example/src/styles/ExportDropdown.css
new file mode 100644
index 0000000..719f49e
--- /dev/null
+++ b/example/src/styles/ExportDropdown.css
@@ -0,0 +1,43 @@
+.export-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 180px;
+  background-color: #ffffff;
+  border: 1px solid #F0F0F0;
+  border-radius: 8px;
+  box-shadow: 0px 0px 1px 0px #00000033, 0px 8px 24px -6px #00000014;
+  z-index: 1000;
+  overflow: hidden;
+  font-family: 'DM Sans', sans-serif;
+}
+
+.export-dropdown-content {
+  padding: 8px 0;
+}
+
+.export-option {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 12px 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  gap: 12px;
+  transition: background-color 0.2s ease;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: left;
+}
+
+.export-option:hover {
+  background-color: #f5f5f5;
+}
+
+.export-icon {
+  font-size: 16px;
+  width: 20px;
+  text-align: center;
+} 
\ No newline at end of file
diff --git a/example/src/styles/FilterDropdown.css b/example/src/styles/FilterDropdown.css
new file mode 100644
index 0000000..4868bcc
--- /dev/null
+++ b/example/src/styles/FilterDropdown.css
@@ -0,0 +1,252 @@
+.filter-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 400px;
+  max-width: 500px;
+  max-height: 500px;
+  background-color: #ffffff;
+  border: 1px solid #F0F0F0;
+  border-radius: 8px;
+  box-shadow: 0px 0px 1px 0px #00000033, 0px 8px 24px -6px #00000014;
+  z-index: 1000;
+  overflow: hidden;
+  font-family: 'DM Sans', sans-serif;
+}
+
+.filter-dropdown-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #d9d9d9;
+  font-weight: 600;
+}
+
+.filter-dropdown-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-count {
+  background: #5D5FEF;
+  color: #FFFFFF;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.filter-dropdown-content {
+  padding: 8px 0;
+  max-height: 350px;
+  overflow-y: auto;
+}
+
+
+
+/* Two-section layout */
+.filter-sections-container {
+  display: flex;
+  gap: 0;
+  min-height: 200px;
+}
+
+.filter-section {
+  flex: 1;
+  border-right: 1px solid #d9d9d9;
+}
+
+.filter-section:last-child {
+  border-right: none;
+}
+
+.filter-section-header {
+  padding: 8px 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.filter-section-content {
+  padding: 8px 0;
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+/* Categories section */
+.categories-section .category-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  cursor: default;
+  transition: background-color 0.2s ease;
+}
+
+.categories-section .category-item:hover {
+  background-color: #f5f5f5;
+}
+
+.category-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #262626;
+}
+
+.category-count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background-color: #5D5FEF;
+  color: white;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: 600;
+  min-width: 20px;
+}
+
+/* Filters section */
+.filters-section .filter-dropdown-option {
+  padding: 8px 16px;
+}
+
+.filter-dropdown-option {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  cursor: pointer;
+  user-select: none;
+  gap: 8px;
+  transition: background-color 0.2s ease;
+}
+
+.filter-dropdown-option:hover {
+  background-color: #f5f5f5;
+}
+
+.select-all-option {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: default;
+}
+
+.select-all-option:hover {
+  background-color: transparent;
+}
+
+.filter-section-header .filter-dropdown-option:hover {
+  background-color: transparent;
+}
+
+.filter-dropdown-option input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  border: 1px solid #BFBFBF;
+  background: #fff;
+  appearance: none;
+  -webkit-appearance: none;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.filter-dropdown-option input[type="checkbox"]:checked {
+  background: #5D5FEF;
+  border: 1.2px solid #5D5FEF;
+  border-radius: 2px;
+}
+
+.filter-dropdown-option input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 2.5px;
+  width: 4px;
+  height: 8px;
+  border: solid #ffffff;
+  border-width: 0 2px 2px 0;
+  border-radius: 1px;
+  transform: rotate(45deg);
+  display: block;
+  box-sizing: border-box;
+}
+
+.filter-dropdown-option span {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.filter-dropdown-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  border-top: 1px solid #d9d9d9;
+  min-height: 50px;
+}
+
+.filter-reset-btn {
+  background: none;
+  border: none;
+  color: #8C8C8C;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.2s ease;
+}
+
+.filter-reset-btn:hover {
+  color: #666666;
+}
+
+.filter-action-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.filter-cancel-btn {
+  background: #F0F0F0;
+  color: #262626;
+  border: none;
+  border-radius: 8px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.filter-cancel-btn:hover {
+  background: #e0e0e0;
+}
+
+.filter-apply-btn {
+  background: #5D5FEF;
+  color: #FFFFFF;
+  border: none;
+  border-radius: 8px;
+  height: 36px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.filter-apply-btn:hover {
+  background: #4a4bdf;
+} 
\ No newline at end of file
diff --git a/example/src/styles/Popup.css b/example/src/styles/Popup.css
new file mode 100644
index 0000000..7f3302f
--- /dev/null
+++ b/example/src/styles/Popup.css
@@ -0,0 +1,155 @@
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  padding: 20px;
+}
+
+.popup-container {
+  background-color: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0px 0px 1px 0px #00000033, 0px 8px 24px -6px #00000014;
+  max-width: 400px;
+  width: 100%;
+  overflow: hidden;
+  font-family: 'DM Sans', sans-serif;
+  animation: popup-fade-in 0.2s ease-out;
+}
+
+@keyframes popup-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.popup-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 24px 16px 24px;
+  text-align: center;
+}
+
+.popup-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+  color: #dc3545;
+}
+
+.popup-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.popup-content {
+  padding: 0 24px 24px 24px;
+  text-align: center;
+}
+
+.popup-text {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.5;
+  color: #666666;
+}
+
+.popup-footer {
+  display: flex;
+  gap: 12px;
+  padding: 0 24px 24px 24px;
+  justify-content: center;
+}
+
+.popup-button {
+  padding: 12px 24px;
+  border-radius: 8px;
+  border: 1px solid;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 100px;
+}
+
+.popup-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.popup-button:active {
+  transform: translateY(0);
+}
+
+.popup-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.popup-button-primary {
+  background-color: #dc3545;
+  color: #ffffff;
+  border-color: #dc3545;
+}
+
+.popup-button-primary:hover {
+  background-color: #c82333;
+  border-color: #c82333;
+}
+
+.popup-button-secondary {
+  background-color: #ffffff;
+  color: #666666;
+  border-color: #d9d9d9;
+}
+
+.popup-button-secondary:hover {
+  background-color: #f8f9fa;
+  border-color: #adb5bd;
+}
+
+/* Responsive design */
+@media (max-width: 480px) {
+  .popup-overlay {
+    padding: 16px;
+  }
+  
+  .popup-container {
+    max-width: 100%;
+  }
+  
+  .popup-header {
+    padding: 20px 20px 12px 20px;
+  }
+  
+  .popup-content {
+    padding: 0 20px 20px 20px;
+  }
+  
+  .popup-footer {
+    padding: 0 20px 20px 20px;
+    flex-direction: column;
+  }
+  
+  .popup-button {
+    width: 100%;
+  }
+} 
\ No newline at end of file
diff --git a/example/src/styles/RowDetailsPopup.css b/example/src/styles/RowDetailsPopup.css
new file mode 100644
index 0000000..b231d5c
--- /dev/null
+++ b/example/src/styles/RowDetailsPopup.css
@@ -0,0 +1,184 @@
+.row-details-popup-overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.row-details-popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  z-index: 1001;
+  max-width: 500px;
+  width: 90%;
+  max-height: 80vh;
+  overflow: hidden;
+  font-family: 'DM Sans', sans-serif;
+}
+
+.row-details-popup-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.row-details-popup-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333333;
+  font-family: 'DM Sans', sans-serif;
+}
+
+.row-details-popup-close-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #333333;
+  padding: 0.25rem;
+  font-family: 'DM Sans', sans-serif;
+}
+
+.row-details-popup-content {
+  padding: 1.5rem;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.row-details-popup-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.row-details-popup-close-action {
+  padding: 0.5rem 1rem;
+  background-color: transparent;
+  color: #666666;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: 'DM Sans', sans-serif;
+  transition: all 0.2s;
+}
+
+.row-details-popup-close-action:hover {
+  background-color: #f5f5f5;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 0;
+}
+
+.detail-row-label {
+  font-size: 16px;
+  font-weight: 500;
+  color: #666666;
+  font-family: 'DM Sans', sans-serif;
+}
+
+.detail-row-value {
+  font-size: 16px;
+  color: #333333;
+  font-family: 'DM Sans', sans-serif;
+  text-align: right;
+  flex: 1;
+  margin-left: 1rem;
+}
+
+.detail-row-value-monospace {
+  font-family: monospace;
+  font-size: 0.875rem;
+  color: #666666;
+}
+
+.detail-row-value-small {
+  font-size: 0.875rem;
+  color: #666666;
+}
+
+.detail-row-value-status {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.detail-row-value-status-yes {
+  color: #28a745;
+}
+
+.detail-row-value-status-no {
+  color: #dc3545;
+}
+
+.status-badge {
+  font-size: 12px;
+  font-weight: 400;
+  padding: 4px 8px;
+  border-radius: 12px;
+}
+
+.resource-type-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.resource-type-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  border: 2px solid;
+}
+
+.resource-type-icon-with-image {
+  background-color: transparent;
+  color: transparent;
+  border: none;
+}
+
+.resource-type-icon-without-image {
+  background-color: #E3F2FD;
+  color: #5D5FEF;
+  border-color: #BBDEFB;
+}
+
+.resource-type-image {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center;
+} 
+
+/* Disable background scroll when popup is open */
+body.popup-open {
+  overflow: hidden;
+} 
\ No newline at end of file
diff --git a/example/src/styles/SidePanel.css b/example/src/styles/SidePanel.css
new file mode 100644
index 0000000..b90dc64
--- /dev/null
+++ b/example/src/styles/SidePanel.css
@@ -0,0 +1,47 @@
+.side-panel-overlay {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.side-panel {
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Ensure the side panel is above other content */
+.side-panel {
+  z-index: 1001;
+}
+
+/* Smooth transition for the overlay */
+.side-panel-overlay {
+  transition: opacity 0.3s ease-in-out;
+}
+
+/* Prevent body scroll when side panel is open */
+body.side-panel-open {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+}
+
+/* Prevent scrolling on all table containers when side panel is open */
+body.side-panel-open .table-wrapper,
+body.side-panel-open .table-container,
+body.side-panel-open .app-content,
+body.side-panel-open .app {
+  overflow: hidden !important;
+  pointer-events: none;
+}
+
+/* Allow scrolling only within the side panel */
+body.side-panel-open .side-panel {
+  pointer-events: auto;
+} 
\ No newline at end of file
diff --git a/example/src/styles/SidePanelInput.css b/example/src/styles/SidePanelInput.css
new file mode 100644
index 0000000..2329305
--- /dev/null
+++ b/example/src/styles/SidePanelInput.css
@@ -0,0 +1,41 @@
+.side-panel-input-container {
+  margin-bottom: 1.5rem;
+}
+
+.side-panel-input-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #333333;
+  margin-bottom: 0.5rem;
+  font-family: 'DM Sans', sans-serif;
+}
+
+.side-panel-input-field {
+  width: 100%;
+  font-size: 1rem;
+  color: #333333;
+  padding: 0.75rem;
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-family: 'DM Sans', sans-serif;
+  box-sizing: border-box;
+}
+
+.side-panel-input-field:focus {
+  outline: none;
+  border-color: #5D5FEF;
+}
+
+.side-panel-input-display {
+  font-size: 1rem;
+  color: #333333;
+  padding: 0.75rem;
+  background-color: #f5f5f5;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-family: 'DM Sans', sans-serif;
+  cursor: not-allowed;
+  opacity: 0.7;
+} 
\ No newline at end of file
diff --git a/example/src/styles/componentStyles.ts b/example/src/styles/componentStyles.ts
new file mode 100644
index 0000000..22bc321
--- /dev/null
+++ b/example/src/styles/componentStyles.ts
@@ -0,0 +1,544 @@
+import type { ThemeProps } from '../types/theme';
+
+export const createComponentStyles = (colors: any, theme: ThemeProps = {}) => {
+  const table = theme.table || {};
+  
+  return {
+    // SidePanel styles
+    sidePanel: {
+      overlay: {
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        position: 'fixed' as const,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 1000,
+      },
+      container: {
+        position: 'fixed' as const,
+        top: 0,
+        right: 0,
+        width: '400px',
+        height: '100vh',
+        backgroundColor: colors.background || '#ffffff',
+        borderLeft: `1px solid ${colors.borderColor || '#e0e0e0'}`,
+        zIndex: 1001,
+        overflowY: 'auto' as const,
+        fontFamily: 'DM Sans, sans-serif',
+        display: 'flex',
+        flexDirection: 'column' as const,
+      },
+      header: {
+        padding: '1.5rem',
+        borderBottom: `1px solid ${colors.borderColor || '#e0e0e0'}`,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      },
+      title: {
+        margin: 0,
+        fontSize: '1.25rem',
+        fontWeight: 600,
+        color: colors.textColor || '#333333',
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      closeButton: {
+        background: 'none',
+        border: 'none',
+        fontSize: '1.5rem',
+        cursor: 'pointer',
+        color: colors.textColor || '#333333',
+        padding: '0.25rem',
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      content: {
+        padding: '1.5rem',
+        flex: 1,
+      },
+      fieldContainer: {
+        marginBottom: '1.5rem',
+      },
+      label: {
+        display: 'block',
+        fontSize: '0.875rem',
+        fontWeight: 500,
+        color: colors.textColor || '#333333',
+        marginBottom: '0.5rem',
+      },
+      idField: {
+        fontSize: '1rem',
+        color: colors.textColor || '#666666',
+        padding: '0.75rem',
+        backgroundColor: colors.background || '#f5f5f5',
+        border: `1px solid ${colors.borderColor || '#e0e0e0'}`,
+        borderRadius: '4px',
+        fontFamily: 'monospace',
+        cursor: 'not-allowed',
+        opacity: 0.7,
+      },
+      footer: {
+        padding: '1.5rem',
+        borderTop: `1px solid ${colors.borderColor || '#e0e0e0'}`,
+      },
+      saveButton: {
+        width: '100%',
+        padding: '0.75rem 1rem',
+        border: 'none',
+        borderRadius: '4px',
+        fontSize: '1rem',
+        fontWeight: 500,
+        fontFamily: 'DM Sans, sans-serif',
+        transition: 'background-color 0.2s',
+      },
+      saveButtonEnabled: {
+        backgroundColor: colors.primaryColor || '#1976d2',
+        color: '#ffffff',
+        cursor: 'pointer',
+      },
+      saveButtonDisabled: {
+        backgroundColor: '#e0e0e0',
+        color: '#666666',
+        cursor: 'not-allowed',
+      },
+    },
+
+    // RowDetailsPopup styles
+    rowDetailsPopup: {
+      overlay: {
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        position: 'fixed' as const,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 1000,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      container: {
+        position: 'fixed' as const,
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        backgroundColor: colors.background || '#ffffff',
+        borderRadius: '8px',
+        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',
+        zIndex: 1001,
+        maxWidth: '500px',
+        width: '90%',
+        maxHeight: '80vh',
+        overflow: 'hidden',
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      header: {
+        padding: '1.5rem',
+        borderBottom: `1px solid ${colors.borderColor || '#e0e0e0'}`,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      },
+      title: {
+        margin: 0,
+        fontSize: '1.25rem',
+        fontWeight: 600,
+        color: colors.textColor || '#333333',
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      closeButton: {
+        background: 'none',
+        border: 'none',
+        fontSize: '1.5rem',
+        cursor: 'pointer',
+        color: colors.textColor || '#333333',
+        padding: '0.25rem',
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      content: {
+        padding: '1.5rem',
+        maxHeight: '60vh',
+        overflowY: 'auto' as const,
+      },
+      footer: {
+        padding: '1rem 1.5rem',
+        borderTop: `1px solid ${colors.borderColor || '#e0e0e0'}`,
+        display: 'flex',
+        justifyContent: 'flex-end',
+        gap: '0.75rem',
+      },
+      closeAction: {
+        padding: '0.5rem 1rem',
+        backgroundColor: 'transparent',
+        color: colors.textColor || '#666666',
+        border: `1px solid ${colors.borderColor || '#e0e0e0'}`,
+        borderRadius: '4px',
+        fontSize: '0.875rem',
+        fontWeight: 500,
+        cursor: 'pointer',
+        fontFamily: 'DM Sans, sans-serif',
+        transition: 'all 0.2s',
+      },
+    },
+
+    // FilterDropdown styles
+    filterDropdown: {
+      container: {
+        backgroundColor: colors.background || '#FFFFFF',
+        color: colors.textColor || '#333333',
+        borderColor: table.filter?.borderColor || '#E5E7EB',
+      },
+      selectedCountContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px',
+      },
+      selectedCountBadge: {
+        backgroundColor: '#F3F3FF',
+        color: '#5D5FEF',
+        padding: '2px 8px',
+        borderRadius: '12px',
+        fontSize: '16px',
+        fontWeight: '400',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px',
+      },
+      selectedCountNumber: {
+        backgroundColor: '#5D5FEF',
+        color: 'white',
+        padding: '2px 6px',
+        borderRadius: '8px',
+        fontSize: '11px',
+        fontWeight: '400',
+      },
+      categoryItem: {
+        cursor: 'pointer',
+        borderRadius: '4px',
+        padding: '8px',
+        transition: 'background-color 0.2s ease',
+      },
+      categoryItemSelected: {
+        backgroundColor: '#F3F3FF',
+      },
+      categoryItemUnselected: {
+        backgroundColor: 'transparent',
+      },
+      categoryName: {
+        fontFamily: 'Typeface/family/text',
+        fontWeight: 400,
+        fontStyle: 'Regular',
+        fontSize: '16px',
+      },
+      categoryNameSelected: {
+        color: '#5D5FEF',
+      },
+      categoryNameUnselected: {
+        color: 'inherit',
+      },
+      checkbox: {
+        borderColor: table.filter?.borderColor || '#E5E7EB',
+      },
+      filterOption: {
+        fontFamily: 'Typeface/family/text',
+        fontWeight: 400,
+        fontStyle: 'Regular',
+        fontSize: 'Typeface/Size/lg',
+        lineHeight: 'Typeface/line-height/line-height-500',
+        letterSpacing: 'Typeface/letter-spacing/-normal',
+        color: colors.textColor || '#333333',
+      },
+      sectionHeader: {
+        borderBottom: 'none',
+      },
+      sectionHeaderRight: {
+        borderBottom: 'none',
+        display: 'flex',
+        justifyContent: 'flex-end',
+      },
+      filterSectionContent: {
+        height: '300px',
+        overflowY: 'auto' as const,
+      },
+    },
+
+    // ButtonGroup styles
+    buttonGroup: {
+      container: {
+        display: 'flex',
+        gap: '0.5rem',
+        flexShrink: 0,
+      },
+      buttonContainer: {
+        position: 'relative',
+      },
+    },
+
+    // MultiLevelTable styles
+    multiLevelTable: {
+      container: {
+        backgroundColor: colors.background,
+      },
+      searchBarContainer: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '1rem',
+        borderBottom: `1px solid ${colors.borderColor || '#e0e0e0'}`,
+      },
+      searchBarLeft: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '1rem',
+      },
+      searchBarRight: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+      },
+      tableTitle: {
+        margin: 0,
+        fontSize: '1.5rem',
+        fontWeight: 600,
+        color: colors.textColor || '#333333',
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      tableSubtitle: {
+        margin: '0.25rem 0 0 0',
+        fontSize: '0.875rem',
+        color: colors.textColor || '#666666',
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      searchInputContainer: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+      },
+      searchInput: {
+        padding: '0.5rem 0.75rem 0.5rem 2.5rem',
+        border: `1px solid ${colors.borderColor || '#e0e0e0'}`,
+        borderRadius: '4px',
+        fontSize: '0.875rem',
+        backgroundColor: colors.background || '#ffffff',
+        color: colors.textColor || '#333333',
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      searchIcon: {
+        position: 'absolute',
+        left: '0.75rem',
+        color: colors.textColor || '#666666',
+      },
+      table: {
+        borderColor: table.cell?.borderColor || '#e0e0e0',
+      },
+    },
+
+    // Pagination styles
+    pagination: {
+      container: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '1rem',
+        borderTop: `1px solid ${colors.borderColor || '#e0e0e0'}`,
+        position: 'relative' as const,
+      },
+      contentContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '24px',
+        position: 'absolute',
+        left: '50%',
+        transform: 'translateX(-50%)',
+      },
+      totalItems: {
+        fontSize: '0.875rem',
+        color: colors.textColor || '#666666',
+        fontFamily: 'DM Sans, sans-serif',
+        position: 'static' as const,
+      },
+      navigation: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+      },
+      arrowButton: {
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '0.25rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '4px',
+        transition: 'background-color 0.2s',
+      },
+      pageButton: {
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '0.5rem 0.75rem',
+        borderRadius: '4px',
+        fontSize: '0.875rem',
+        fontFamily: 'DM Sans, sans-serif',
+        transition: 'all 0.2s',
+      },
+      pageButtonSelected: {
+        backgroundColor: colors.primaryColor || '#5D5FEF',
+        color: '#ffffff',
+      },
+      pageButtonUnselected: {
+        backgroundColor: 'transparent',
+        color: colors.textColor || '#333333',
+      },
+      pageSizeSelect: {
+        position: 'relative',
+        border: '1px solid #E5E5E5',
+        borderRadius: '4px',
+        padding: '4px 8px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        fontSize: '0.875rem',
+        color: colors.textColor || '#333333',
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      pageSizeSelectDropdown: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        opacity: 0,
+        width: '100%',
+        height: '100%',
+        cursor: 'pointer',
+      },
+    },
+
+    // Popup styles
+    popup: {
+      overlay: {
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        position: 'fixed' as const,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 1000,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      container: {
+        backgroundColor: colors.background || '#ffffff',
+        borderRadius: '8px',
+        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',
+        maxWidth: '400px',
+        width: '90%',
+        padding: '2rem',
+        textAlign: 'center' as const,
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      title: {
+        color: colors.textColor || '#333333',
+        margin: '0 0 1rem 0',
+        fontSize: '1.25rem',
+        fontWeight: 600,
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      text: {
+        color: colors.textColor || '#333333',
+        margin: '0 0 1.5rem 0',
+        fontSize: '1rem',
+        lineHeight: 1.5,
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      buttonContainer: {
+        display: 'flex',
+        gap: '0.75rem',
+        justifyContent: 'center',
+      },
+    },
+
+    // DetailRow styles
+    detailRow: {
+      container: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '0.75rem 0',
+      },
+      label: {
+        fontSize: '16px',
+        fontWeight: 500,
+        color: colors.textColor || '#666666',
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      value: {
+        fontSize: '16px',
+        color: colors.textColor || '#333333',
+        fontFamily: 'DM Sans, sans-serif',
+        textAlign: 'right' as const,
+        flex: 1,
+        marginLeft: '1rem',
+      },
+    },
+
+    // StatusBadge styles
+    statusBadge: {
+      base: {
+        fontSize: '12px',
+        fontWeight: '400',
+        padding: '4px 8px',
+        borderRadius: '12px',
+        display: 'inline-flex',
+        alignItems: 'center',
+      },
+    },
+
+    // ResourceTypeDisplay styles
+    resourceTypeDisplay: {
+      container: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        fontSize: '14px',
+        fontWeight: '500',
+        fontFamily: 'DM Sans, sans-serif',
+      },
+      icon: {
+        width: '36px',
+        height: '36px',
+        borderRadius: '50%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '14px',
+        fontWeight: '600',
+        border: '2px solid',
+      },
+      iconWithImage: {
+        backgroundColor: 'transparent',
+        color: 'transparent',
+        border: 'none',
+      },
+      iconWithoutImage: {
+        backgroundColor: '#E3F2FD',
+        color: '#5D5FEF',
+        borderColor: '#BBDEFB',
+      },
+      image: {
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        objectFit: 'cover' as const,
+        objectPosition: 'center' as const,
+      },
+      text: {
+        fontSize: '14px',
+        fontWeight: '500',
+        color: colors.textColor || '#333333',
+        fontFamily: 'DM Sans, sans-serif',
+      },
+    },
+  };
+}; 
\ No newline at end of file
diff --git a/example/src/styles/style.tsx b/example/src/styles/style.tsx
new file mode 100644
index 0000000..253676a
--- /dev/null
+++ b/example/src/styles/style.tsx
@@ -0,0 +1,157 @@
+import { createComponentStyles } from './componentStyles';
+
+// Typography System
+export const typography = {
+  fontFamily: "'DM Sans', system-ui, sans-serif",
+  lineHeight: {
+    lineHeight500: "1.5",
+    lineHeight600: "1.6"
+  },
+  letterSpacing: {
+    dense: "-0.025em",
+    normal: "normal"
+  },
+  fontSize: {
+    xs: "12px",
+    sm: "14px",
+    md: "16px",
+    lg: "18px",
+    xl: "20px",
+    "2xl": "24px",
+    "3xl": "30px"
+  },
+  fontWeight: {
+    light: "300",
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700"
+  }
+};
+
+// Color System
+export const colors = {
+  // Text Colors
+  textDefault: "#262626",
+  textPrimary: "#101828",
+  textSecondary: "#667085",
+  textMuted: "#8C8C8C",
+  
+  // Background Colors
+  backgroundLight: "#F3F3FF",
+  backgroundWhite: "#FFFFFF",
+  backgroundGray: "#F5F5F5",
+  
+  // Status Colors
+  status: {
+    active: {
+      background: "#05A557",
+      text: "#FFFFFF"
+    },
+    inactive: {
+      background: "#D9D9D9",
+      text: "#1F1F1F"
+    },
+    pending: {
+      background: "#FFEFCF",
+      text: "#1F1F1F"
+    },
+    processing: {
+      background: "#B8D9FF",
+      text: "#1F1F1F"
+    },
+    provisioning: {
+      background: "#FFEFCF",
+      text: "#1F1F1F"
+    }
+  },
+  
+  // Border Colors
+  borderLight: "#D9D9D9",
+  borderMedium: "#E2E8F0",
+  borderDark: "#262626",
+  borderFilter: "#F0F0F0",
+  
+  // Theme Colors
+  primary: "#5D5FEF",
+  secondary: "#E3F2FD",
+  accent: "#BBDEFB",
+  
+  // Specific UI Colors
+  tableTitle: "#101828",
+  tableHeader: "#000000",
+  tableHeaderText: "#000000",
+  pageTotal: "#000000",
+  selectedPage: "#5D5FEF",
+  filterSelected: "#5D5FEF",
+  resetFilter: "#8C8C8C",
+  searchBorder: "#D9D9D9"
+};
+
+// Component Styles
+export const componentStyles = createComponentStyles(colors);
+
+// Layout Styles
+export const layoutStyles = {
+  flexCenter: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  flexBetween: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  flexStart: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-start"
+  },
+  flexEnd: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end"
+  }
+};
+
+// Utility Functions
+export const getStatusStyle = (status: string) => {
+  switch (status) {
+    case 'Active':
+      return { backgroundColor: colors.status.active.background, color: colors.status.active.text };
+    case 'Inactive':
+      return { backgroundColor: colors.status.inactive.background, color: colors.status.inactive.text };
+    case 'Pending':
+      return { backgroundColor: colors.status.pending.background, color: colors.status.pending.text };
+    case 'Processing':
+      return { backgroundColor: colors.status.processing.background, color: colors.status.processing.text };
+    case 'Provisioning':
+      return { backgroundColor: colors.status.provisioning.background, color: colors.status.provisioning.text };
+    default:
+      return { backgroundColor: colors.backgroundGray, color: colors.textMuted };
+  }
+};
+
+// Typography styles for table row texts
+export const tableRowTypography = {
+  fontFamily: 'DM Sans, sans-serif',
+  fontWeight: 400,
+  fontStyle: 'normal',
+  fontSize: '16px', // lg size
+  lineHeight: '24px', // line-height-500
+  letterSpacing: '0px', // normal letter spacing
+  verticalAlign: 'middle',
+  color: '#262626'
+};
+
+// Style Objects for Direct Use
+export const styles = {
+  typography,
+  colors,
+  componentStyles,
+  layoutStyles,
+  getStatusStyle
+};
+
+export default styles; 
\ No newline at end of file
diff --git a/example/src/types/css.d.ts b/example/src/types/css.d.ts
new file mode 100644
index 0000000..e9f28dd
--- /dev/null
+++ b/example/src/types/css.d.ts
@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+} 
\ No newline at end of file
diff --git a/example/src/types/theme.ts b/example/src/types/theme.ts
new file mode 100644
index 0000000..c72c0b6
--- /dev/null
+++ b/example/src/types/theme.ts
@@ -0,0 +1,48 @@
+export interface ThemeProps {
+  colors?: {
+    background?: string;
+    primaryColor?: string;
+    textColor?: string;
+    borderColor?: string;
+  };
+  table?: {
+    header?: {
+      background?: string;
+      textColor?: string;
+      borderColor?: string;
+    };
+    cell?: {
+      textColor?: string;
+      borderColor?: string;
+      nestedPadding?: string;
+    };
+    row?: {
+      levelColors?: {background: string}[];
+    };
+    filter?: {
+      background?: string;
+      textColor?: string;
+      borderColor?: string;
+      focusBorderColor?: string;
+      placeholderColor?: string;
+    };
+  };
+  pagination?: {
+    button?: {
+      background?: string;
+      textColor?: string;
+      disabledOpacity?: string;
+    };
+    select?: {
+      background?: string;
+      textColor?: string;
+      borderColor?: string;
+    };
+    info?: {
+      textColor?: string;
+    };
+  };
+  expandIcon?: {
+    color?: string;
+  };
+} 
\ No newline at end of file
diff --git a/example/src/types/types.ts b/example/src/types/types.ts
new file mode 100644
index 0000000..1e053bc
--- /dev/null
+++ b/example/src/types/types.ts
@@ -0,0 +1,105 @@
+import type React from 'react';
+
+import type { Row, TableInstance, TableState } from 'react-table';
+
+export interface FilterOption {
+  label: string;
+  value: string | number;
+}
+
+export interface Column {
+  key: string;
+  title: string | React.ReactNode;
+  filterable?: boolean;
+  filterOptions?: FilterOption[];
+  render?: (value: string | number, item: DataItem) => React.ReactNode;
+  sortable?: boolean;
+  customSortFn?: (rowA: DataItem, rowB: DataItem, columnId: string) => number;
+}
+
+export interface DataItem {
+  id: number;
+  resourceType: string;
+  name: string;
+  dateTime: string;
+  status: 'Active' | 'Inactive' | 'Pending' | 'Processing' | 'Provisioning';
+  orchestration: string;
+  imageURL?: string;
+  subtext?: string;
+  showActionButtons?: boolean;
+  children?: DataItem[];
+}
+
+export interface TableStateWithPagination<T extends object> extends TableState<T> {
+  pageIndex: number;
+  pageSize: number;
+  sortBy: Array<{ id: string; desc: boolean }>;
+  filters: Array<{ id: string; value: string }>;
+}
+
+export interface TableInstanceWithHooks<T extends object> extends TableInstance<T> {
+  page: Row<T>[];
+  canPreviousPage: boolean;
+  canNextPage: boolean;
+  pageOptions: number[];
+  pageCount: number;
+  gotoPage: (updater: number | ((pageIndex: number) => number)) => void;
+  nextPage: () => void;
+  previousPage: () => void;
+  setPageSize: (pageSize: number) => void;
+  state: TableStateWithPagination<T>;
+}
+
+export interface SelectionState {
+  selectedRows: Set<string | number>;
+  isAllSelected: boolean;
+}
+
+import type { ThemeProps } from './theme';
+
+export interface DropdownProps {
+  isOpen?: boolean;
+  onClose: () => void;
+  onToggle?: (isOpen: boolean) => void;
+  selectedValues?: Set<string | number>;
+  onFilterChange?: (values: Set<string | number>) => void;
+  options?: FilterOption[];
+  theme?: ThemeProps;
+  // Common filter props
+  tempSelectedValues?: Set<string | number>;
+  selectedCategory?: string | null;
+  categories?: Array<{
+    key: string;
+    title: string;
+    count: number;
+  }>;
+  categoryFilterOptions?: FilterOption[];
+  onApply?: (values: Set<string | number>) => void;
+  onCancel?: () => void;
+  onReset?: () => void;
+  onCategoryChange?: (categoryKey: string) => void;
+  onSelectAll?: () => void;
+  onOptionChange?: (value: string | number) => void;
+  // Export props
+  handleExportCSV?: () => void;
+  // Additional properties
+  [key: string]: unknown;
+}
+
+export interface ButtonConfig {
+  id: string;
+  icon: React.ComponentType<{ width?: number; height?: number }>;
+  text: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  iconPosition?: 'left' | 'right';
+  badge?: {
+    count: number;
+  };
+  badgeStyle?: React.CSSProperties;
+  customStyle?: React.CSSProperties;
+  dropdown?: {
+    component: React.ComponentType<any>;
+    props: Record<string, unknown>;
+  };
+} 
\ No newline at end of file
diff --git a/rollup.config.js b/rollup.config.js
index a9c6d4a..9e54969 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -68,7 +68,7 @@ export default defineConfig([
     external
   },
   {
-    input: 'dist/types/index.d.ts',
+    input: 'dist/types/src/index.d.ts',
     output: [{ file: 'dist/index.d.ts', format: 'esm' }],
     plugins: [
       postcss({
diff --git a/src/App.tsx b/src/App.tsx
index b68a15c..158be81 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,13 +2,13 @@ import React, { useState } from "react";
 
 import { DeleteIcon, EditIcon } from "./components/icons";
 import { MultiLevelTable } from "./components/MultiLevelTable";
-import { Popup } from "./components/Popup";
-import { RowDetailsPopup } from "./components/RowDetailsPopup";
-import { SidePanel } from "./components/SidePanel";
 import { getStatusStyle, tableRowTypography } from "./styles/style";
 import { darkTheme, lightTheme } from "./themes";
 import type { ThemeProps } from "./types/theme";
 import type { ButtonConfig, Column, DataItem } from "./types/types";
+import { Popup } from "../example/src/components/Popup";
+import { RowDetailsPopup } from "../example/src/components/RowDetailsPopup";
+import { SidePanel } from "../example/src/components/SidePanel";
 
 import "./App.css";
 import "./styles/App.css";
diff --git a/src/components/MultiLevelTable.tsx b/src/components/MultiLevelTable.tsx
index f4c2c19..b9a227c 100644
--- a/src/components/MultiLevelTable.tsx
+++ b/src/components/MultiLevelTable.tsx
@@ -10,14 +10,14 @@ import {
 } from "react-table";
 
 import { ButtonGroup } from './ButtonGroup';
-import { ExportDropdown } from './ExportDropdown';
-import { FilterDropdown } from './FilterDropdown';
 import { DeleteIcon, ExportIcon, FilterIcon, SearchIcon } from "./icons";
 import { Pagination } from "./Pagination";
 import type { PaginationProps } from "./Pagination";
-import { Popup } from './Popup';
 import { TableHeader } from "./TableHeader";
 import { TableRow } from "./TableRow";
+import { ExportDropdown } from '../../example/src/components/ExportDropdown';
+import { FilterDropdown } from '../../example/src/components/FilterDropdown';
+import { Popup } from '../../example/src/components/Popup';
 import { SortType } from "../constants/sort";
 import { defaultTheme } from "../constants/theme";
 import { mergeThemeProps } from "../mergeThemeProps";
diff --git a/src/index.ts b/src/index.ts
index e7ef692..39e61f8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,8 +2,6 @@ export { MultiLevelTable } from './components/MultiLevelTable';
 export type { MultiLevelTableProps } from './components/MultiLevelTable'; 
 export { Button } from './components/Button';
 export { ButtonGroup } from './components/ButtonGroup';
-export { Popup } from './components/Popup';
-export { SidePanel } from './components/SidePanel';
 export type { DataItem } from './types/types';
 export type { Column } from './types/types';
 export type { TableStateWithPagination } from './types/types';