beem-component 2.1.8 → 2.1.28

package/dist/components/text.js

@@ -3,28 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.span = exports.p = exports.input = exports.h6 = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
+exports.p = exports.input = exports.h6 = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
 var _typography = require("./typography");
 // 32px
-const h1 = exports.h1 = "font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const h1 = exports.h1 = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 24px
-const h2 = exports.h2 = "font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;");
+const h2 = exports.h2 = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;");
 
 // 18px
-const h3 = exports.h3 = "font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const h3 = exports.h3 = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 16px
-const h4 = exports.h4 = " font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.143rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const h4 = exports.h4 = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.143rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 14px
-const h5 = exports.h5 = " font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const h5 = exports.h5 = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 12px
-const h6 = exports.h6 = " font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: .857rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const h6 = exports.h6 = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: .857rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 14px
-const p = exports.p = "font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
-const input = exports.input = " font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
-const a = exports.a = "font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
-const span = exports.span = "font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const p = exports.p = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const input = exports.input = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const a = exports.a = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");

package/dist/components/typography.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.QuoteMark = exports.PullQuote = exports.PoppinsMedium = exports.Poppins = exports.P = exports.OpenSans = exports.Inter = exports.Hero = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Captions = void 0;
+exports.QuoteMark = exports.PullQuote = exports.PoppinsMedium = exports.Poppins = exports.P = exports.OpenSans = exports.Hero = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Captions = void 0;
 const H1 = exports.H1 = '2.286rem';
 const H2 = exports.H2 = '1.714rem';
 const H3 = exports.H3 = '1.286rem';
@@ -17,5 +17,4 @@ const Captions = exports.Captions = '0.714rem';
 const Hero = exports.Hero = '1rem';
 const PoppinsMedium = exports.PoppinsMedium = 'PoppinsMedium';
 const Poppins = exports.Poppins = 'Poppins';
-const OpenSans = exports.OpenSans = 'OpenSans';
-const Inter = exports.Inter = 'Inter';
+const OpenSans = exports.OpenSans = 'OpenSans';

package/nginx.conf

@@ -1,31 +1,17 @@
-# server {
-#     listen 8085;
-#     root   /usr/share/nginx/html;
+server {
+    listen 8085;
+    root   /usr/share/nginx/html;
 
-#     index  index.html index.htm;
+    index  index.html index.htm;
     
-#     include /etc/nginx/mime.types;
+    include /etc/nginx/mime.types;
     
-#     gzip on;
-#     gzip_min_length 1000;
-#     gzip_proxied expired no-cache no-store private auth;
-#     gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; 
+    gzip on;
+    gzip_min_length 1000;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; 
     
-#     location / {
-#         try_files $uri $uri/ /index.html;
-#     }
-# }
-
-
-# nginx.conf
-server {
-  listen 3000;
-  server_name localhost;
-
-  root /usr/share/nginx/html;
-  index index.html;
-
-  location / {
-    try_files $uri $uri/ /index.html;
-  }
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "2.1.8",
+  "version": "2.1.28",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/public/index.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />

package/src/App.js

@@ -4,14 +4,12 @@
 import React, { useState } from 'react';
 // import AbcIcon from '@mui/icons-material/Abc';
 // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
-// import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import PersonIcon from '@mui/icons-material/Person';
-import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
-import CheckIcon from '@mui/icons-material/Check';
+// import PersonIcon from '@mui/icons-material/Person';
 // import { Tooltip } from '@mui/material';
 import PeopleIcon from '@mui/icons-material/People';
-// import BusinessIcon from '@mui/icons-material/Business';
+import BusinessIcon from '@mui/icons-material/Business';
 
 import {
   BmChat,
@@ -35,9 +33,7 @@ import {
   BmButton,
   BmSelectionNotice,
   BmSelector,
-  BmCustomCardTitle,
 } from './lib/components';
-import AlertBox from './lib/components/Alert/Alert';
 // import ProgressIndicator from './lib/components/newProgress';
 
 // const datsa = JSON.stringify({
@@ -944,7 +940,7 @@ const Chat = () => {
   };
   const slots = [
     {
-      id: 'slot-1', // ⚠️ id is required
+      id: 'slot-1',
       label: '10:00 AM - 10:30 AM',
       value: { startDate: '10:00 AM', endDate: '10:30 AM' },
     },
@@ -953,56 +949,6 @@ const Chat = () => {
       label: '10:30 AM - 11:10 AM',
       value: { startDate: '10:30 AM', endDate: '11:10 AM' },
     },
-    {
-      id: 'slot-3',
-      label: '11:10 AM - 11:50 AM',
-      value: { startDate: '11:10 AM', endDate: '11:50 AM' },
-    },
-    {
-      id: 'slot-4',
-      label: '11:50 AM - 12:30 PM',
-      value: { startDate: '11:50 AM', endDate: '12:30 PM' },
-    },
-    {
-      id: 'slot-5',
-      label: '12:30 PM - 1:10 PM',
-      value: { startDate: '12:30 PM', endDate: '1:10 PM' },
-    },
-    {
-      id: 'slot-6',
-      label: '1:10 PM - 1:50 PM',
-      value: { startDate: '1:10 PM', endDate: '1:50 PM' },
-    },
-    {
-      id: 'slot-7',
-      label: '1:50 PM - 2:30 PM',
-      value: { startDate: '1:50 PM', endDate: '2:30 PM' },
-    },
-    {
-      id: 'slot-8',
-      label: '2:30 PM - 3:10 PM',
-      value: { startDate: '2:30 PM', endDate: '3:10 PM' },
-    },
-    {
-      id: 'slot-9',
-      label: '3:10 PM - 3:50 PM',
-      value: { startDate: '3:10 PM', endDate: '3:50 PM' },
-    },
-    {
-      id: 'slot-10',
-      label: '3:50 PM - 4:30 PM',
-      value: { startDate: '3:50 PM', endDate: '4:30 PM' },
-    },
-    {
-      id: 'slot-11',
-      label: '4:30 PM - 5:10 PM',
-      value: { startDate: '4:30 PM', endDate: '5:10 PM' },
-    },
-    {
-      id: 'slot-12',
-      label: '5:10 PM - 5:50 PM',
-      value: { startDate: '5:10 PM', endDate: '5:50 PM' },
-    },
   ];
 
   const [selectedSlotId, setSelectedSlotId] = useState(null);
@@ -1010,48 +956,14 @@ const Chat = () => {
   return (
     <>
       <GlobalStyle />
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-        <div>
-          <BmInfoPanel.SectionSummary
-            iconColor="#33B1BA"
-            textColor="#fcba03"
-            icon={CalendarTodayOutlinedIcon}
-            title={formData.departmentName}
-            subtitle="Department"
-            // iconBackgroundColor
-          />
-          <AlertBox
-            icon={AccessTimeIcon}
-            themeColor="#DC2626"
-            title="Payment Error"
-            description="We couldn't process your payment. Please try again later or contact support."
-          />
-          <BmCustomCardTitle
-            icon={CalendarTodayOutlinedIcon}
-            themeColor="#33B1BA"
-            title="Book Your Medical Appointment"
-            description="Schedule a 30-minute consultation with our healThcare specialists"
-            variant="booking"
-            withStripe
-          />
-        </div>
-        <div>
-          <BmInfoPanel.Section
-            title="Appointment Details"
-            icon={CalendarTodayOutlinedIcon}
-            backgroundColor="#fcba03"
-            iconColor="#fcba03"
-          />
-          <BmCustomCardTitle
-            icon={CheckIcon}
-            themeColor="#33B1BA"
-            title="Appointment Confirmed!"
-            description="Your booking has been successfully scheduled"
-            variant="confirmation"
-            withStripe
-          />
-        </div>
-      </div>
+      <BmSelector
+        data={slots}
+        selectedDataId={selectedSlotId}
+        onChange={setSelectedSlotId}
+        icon={AccessTimeIcon}
+        themeColor="#33B1BA"
+      />
+
       <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
         <div style={{ padding: '2rem' }}>
           <h1>Progress Indicator Demo</h1>
@@ -1088,20 +1000,13 @@ const Chat = () => {
             </BmCardv2.Description>
           </BmCardv2.Header>
           <BmCardv2.Content>
-            <BmSelector
-              data={slots}
-              selectedDataId={selectedSlotId}
-              onChange={setSelectedSlotId}
-              icon={AccessTimeIcon}
-              themeColor="#33B1BA"
-            />
-            {/* <BmInfoPanel>
-              // <BmInfoPanel.Section
-              //   title="Appointment Details"
-              //   icon={CalendarTodayIcon}
-              //   backgroundColor="#fcba03"
-              //   iconColor="#fcba03"
-              // >
+            <BmInfoPanel>
+              <BmInfoPanel.Section
+                title="Appointment Details"
+                icon={CalendarTodayIcon}
+                backgroundColor="#fcba03"
+                iconColor="#fcba03"
+              >
                 <BmInfoPanel.SectionSummary
                   iconColor="#33B1BA"
                   textColor="#fcba03"
@@ -1116,20 +1021,52 @@ const Chat = () => {
                   subtitle="Department"
                 />
               </BmInfoPanel.Section>
-            </BmInfoPanel> */}
-            <BmInfoPanel.Section
-              title="Personal Information"
-              icon={PersonIcon}
-              showDivider
-              dividerColor="#33b1ba"
-              dividerWitdh="2px"
-              dividerType="solid"
-              dividerOpacity="0.5"
-            >
-              <BmInfoPanel.Row label="Name" value={formData.name} />
-              <BmInfoPanel.Row label="Phone" value={formData.phone} />
-              <BmInfoPanel.Row label="Email" value={formData.email} />
-            </BmInfoPanel.Section>
+            </BmInfoPanel>
+            <BmInfoPanel>
+              {/* <BmInfoPanel.Section
+                title="Appointment Details"
+                icon={CalendarTodayIcon}
+                background_color="rgba(51, 177, 186, 0.05)"
+              >
+                <BmInfoPanel.Row label="Type" value={appointmentDetails.title} />
+                <BmInfoPanel.Row
+                  label="Department"
+                  value={formData.departmentName}
+                />
+                <BmInfoPanel.Row label="Resource" value={formData.resourceName} />
+                <BmInfoPanel.Row
+                  label="Duration"
+                  value={appointmentDetails.duration}
+                />
+                <BmInfoPanel.Row
+                  label="Date"
+                  value={formData.date.toDateString()}
+                />
+                <BmInfoPanel.Row
+                  label="Time"
+                  value={formData.timeSlot.split(' - ')[1]}
+                />
+              </BmInfoPanel.Section> */}
+
+              {/* <BmInfoPanel.Section
+                title="Personal Information"
+                icon={PersonIcon}
+                showDivider
+              >
+                <BmInfoPanel.Row label="Name" value={formData.name} />
+                <BmInfoPanel.Row label="Phone" value={formData.phone} />
+                <BmInfoPanel.Row label="Email" value={formData.email} />
+              </BmInfoPanel.Section>
+              <BmInfoPanel.Section
+                title="Personal Information"
+                icon={PersonIcon}
+                showDivider
+              >
+                <BmInfoPanel.Row label="Name" value={formData.name} />
+                <BmInfoPanel.Row label="Phone" value={formData.phone} />
+                <BmInfoPanel.Row label="Email" value={formData.email} />
+              </BmInfoPanel.Section> */}
+            </BmInfoPanel>
           </BmCardv2.Content>
           <BmCardv2.Footer>
             <BmButton

package/src/fonts.scss

@@ -25,10 +25,4 @@
 @font-face {
     font-family: 'OpenSans';
     src: url('../src/fonts/OpenSans-Regular.ttf');
-}
-
-
-@font-face {
-    font-family: 'Inter';
-    src: url('../src/fonts/Inter-regular.woff2')format('woff2'),url('../src/fonts/Inter-Bold.woff2')format('woff2'),url('../src/fonts/Inter-ExtraBold.woff2')format('woff2'),url('../src/fonts/Inter-ExtraLight.woff2')format('woff2'),url('../src/fonts/Inter-medium.woff2')format('woff2'),url('../src/fonts/Inter-SemiBold.woff2')format('woff2');
 }

package/src/lib/components/BmSelector/BmSelector.js

@@ -1,25 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-
-const hexToRgba = (hex, opacity = 0.6) => {
-  try {
-    const normalizedHex = hex?.replace('#', '');
-    if (
-      !normalizedHex ||
-      normalizedHex.length !== 6 ||
-      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
-    ) {
-      throw new Error('Invalid hex');
-    }
-
-    const r = parseInt(normalizedHex.slice(0, 2), 16);
-    const g = parseInt(normalizedHex.slice(2, 4), 16);
-    const b = parseInt(normalizedHex.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  } catch (e) {
-    return `rgba(0, 0, 0, ${opacity})`;
-  }
-};
+import hexToRgba from '../../../util/convertToRGBA';
 
 const CustomRadio = styled.span`
   display: inline-block;
@@ -120,24 +101,11 @@ const BmSelector = ({
   textColor,
   fontWeight,
   name = 'selection',
-  useFormik = false,
 }) => {
   return (
     <RadioGroupWrapper>
       {data.map((item) => {
         const isSelected = selectedDataId === item.id;
-        const handleChange = () => {
-          if (useFormik) {
-            onChange({
-              target: {
-                name,
-                value: item.id,
-              },
-            });
-          } else {
-            onChange(item.id);
-          }
-        };
 
         return (
           <label key={item.id} htmlFor={item.id}>
@@ -146,7 +114,7 @@ const BmSelector = ({
               name={name}
               value={item.id}
               checked={isSelected}
-              onChange={handleChange}
+              onChange={() => onChange(item.id)}
             />
             <TimeSlotCard selected={isSelected} themeColor={themeColor}>
               <CustomRadio selected={isSelected} themeColor={themeColor} />

package/src/lib/components/BmSelector/BmSelector.stories.jsx

@@ -44,10 +44,6 @@ export default {
         },
       ],
     },
-    useFormik: {
-      control: { type: 'boolean' },
-      defaultValue: false,
-    },
   },
 };
 
@@ -93,7 +89,6 @@ Default.args = {
       value: { startDate: '09:00 AM', endDate: '09:30 AM' },
     },
   ],
-  useFormik: false,
 
   themeColor: '#33B1BA',
   textColor: '#33B1BA',
@@ -115,13 +110,9 @@ export const Example = () => {
     },
   ];
 
-  // When you use useFormik as true then you need to pass handleChange func and the name [name="time"].
-  // so that is works accordingly
-
   const [selectedDataId, setSelectedDataId] = useState(null);
   return (
     <BmSelector
-      name="time"
       data={slots}
       selectedDataId={selectedDataId}
       onChange={setSelectedDataId}
@@ -129,7 +120,6 @@ export const Example = () => {
       themeColor="#33B1BA"
       textColor="#33B1BA"
       fontWeight="600"
-      useFormik="false"
     />
   );
 };

package/src/lib/components/Card_v2/Card.js

@@ -2,25 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const hexToRgba = (hex, opacity = 0.6) => {
-  try {
-    const normalizedHex = hex?.replace('#', '');
-    if (
-      !normalizedHex ||
-      normalizedHex.length !== 6 ||
-      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
-    ) {
-      throw new Error('Invalid hex');
-    }
-
-    const r = parseInt(normalizedHex.slice(0, 2), 16);
-    const g = parseInt(normalizedHex.slice(2, 4), 16);
-    const b = parseInt(normalizedHex.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  } catch (e) {
-    return `rgba(0, 0, 0, ${opacity})`;
-  }
-};
+import hexToRgba from '../../../util/convertToRGBA';
 
 const StyledCard = styled.div`
   background-color: var(--card, #fff);
@@ -54,31 +36,11 @@ const Description = styled.p`
 `;
 
 const Content = styled.div`
-  min-height: 180px;
   padding: 0 1.5rem;
-  max-height: calc(100vh - 28.5714rem);
-  overflow-y: auto;
-
-  scrollbar-width: thin;
-  scrollbar-color: ${() => hexToRgba('#33b1ba', 0.2)} transparent;
-
-  &::-webkit-scrollbar-thumb {
-    background: ${() => hexToRgba('#33b1ba', 0.3)};
-    border-radius: 0.6429rem;
-    transition: background 0.2s ease;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: ${() => hexToRgba('#33b1ba', 0.3)};
-  }
 
   &:last-child {
     padding-bottom: 1.5rem;
   }
-
-  @media (max-width: 54.8571rem) {
-    max-height: calc(100vh - 17.8572rem);
-  }
 `;
 
 const Footer = styled.div`

package/src/lib/components/InfoPanel/InfoPanel.js

@@ -1,25 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-
-const hexToRgba = (hex, opacity = 0.6) => {
-  try {
-    const normalizedHex = hex?.replace('#', '');
-    if (
-      !normalizedHex ||
-      normalizedHex.length !== 6 ||
-      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
-    ) {
-      throw new Error('Invalid hex');
-    }
-
-    const r = parseInt(normalizedHex.slice(0, 2), 16);
-    const g = parseInt(normalizedHex.slice(2, 4), 16);
-    const b = parseInt(normalizedHex.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  } catch (e) {
-    return `rgba(0, 0, 0, ${opacity})`;
-  }
-};
+import hexToRgba from '../../../util/convertToRGBA';
 
 const Panel = styled.div`
   border: 0.0714rem solid rgba(51, 177, 186, 0.1);
@@ -53,8 +34,8 @@ const IconBox = styled.div`
     color: ${({ iconColor }) => iconColor || '#00000'};
 
     @media (min-width: 45.7143rem) {
-      height: 1.4rem;
-      width: 1.4rem;
+      height: 1.5rem;
+      width: 1.5rem;
     }
   }
 `;
@@ -81,7 +62,7 @@ const SummarySubtitle = styled.p`
 `;
 
 const SectionContainer = styled.div`
-  padding: 0.6rem 1rem;
+  padding: 0.75rem 1rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -134,7 +115,8 @@ const RowContainer = styled.div`
 `;
 
 const Label = styled.span`
-  color: ${({ labelTextColor }) => hexToRgba(labelTextColor || '#000000', 0.6)};
+  color: rgba(0, 0, 0, 0.6);
+
   @media (max-width: 42.8571rem) {
     font-size: 0.75rem;
   }
@@ -142,7 +124,7 @@ const Label = styled.span`
 
 const Value = styled.span`
   font-weight: 500;
-  color: ${({ valueTextColor }) => hexToRgba(valueTextColor || '#000000', 1)};
+
   @media (max-width: 42.8571rem) {
     font-size: 0.75rem;
   }
@@ -150,20 +132,7 @@ const Value = styled.span`
 
 const Divider = styled.hr`
   border: none;
-  border-top: ${({
-    showDivider,
-    dividerColor = '#33b1ba',
-    dividerType = 'dashed',
-    dividerWitdh = '1px',
-    dividerOpacity = '0.2',
-  }) => {
-    if (showDivider) {
-      return `${dividerWitdh} ${dividerType} ${hexToRgba(
-        dividerColor,
-        dividerOpacity
-      )}`;
-    }
-  }};
+  border-top: 0.0714rem dashed rgba(51, 177, 186, 0.2);
   margin: 1rem auto;
   max-width: 97%;
   @media (max-width: 42.8571rem) {
@@ -201,21 +170,9 @@ const Section = ({
   backgroundColor,
   iconColor,
   iconBackgroundColor,
-  dividerColor,
-  dividerWitdh,
-  dividerType,
-  dividerOpacity,
 }) => (
   <>
-    {showDivider && (
-      <Divider
-        dividerColor={dividerColor}
-        showDivider={showDivider}
-        dividerWitdh={dividerWitdh}
-        dividerType={dividerType}
-        dividerOpacity={dividerOpacity}
-      />
-    )}
+    {showDivider && <Divider />}
     <SectionContainer backgroundColor={backgroundColor}>
       {Icon && (
         <IconBox
@@ -231,10 +188,10 @@ const Section = ({
   </>
 );
 
-const Row = ({ label, value, labelTextColor, valueTextColor }) => (
+const Row = ({ label, value }) => (
   <RowContainer>
-    <Label labelTextColor={labelTextColor}>{label}:</Label>
-    <Value valueTextColor={valueTextColor}>{value}</Value>
+    <Label>{label}:</Label>
+    <Value>{value}</Value>
   </RowContainer>
 );