hds-web 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/Avatars/profileAvatar.js

@@ -33,7 +33,7 @@ export default function ProfileAvatar({ name, designation, size, imageUrl, avata
     const defaultAvatarIcon = "user03";
     const hasImageUrl = imageUrl && imageUrl.length > 0;
     return (
-        <a href="#" className="group block flex-shrink-0">
+        <div className="group block flex-shrink-0">
             <div className="flex items-center">
                 <div>
                     {hasImageUrl ? (
@@ -61,7 +61,7 @@ export default function ProfileAvatar({ name, designation, size, imageUrl, avata
                     </p>
                 </div>
             </div>
-        </a>
+        </div>
     )
 }
 

package/src/HDS/components/BadgesCaption/badges.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../common-components/Icon';
+import {Typography} from '../../foundation/Typography'
 const sizeClasses = {
   sm: 'py-0.5 px-2 hds-d-body3c',
   default: 'py-1 px-3',
@@ -13,17 +14,16 @@ const iconClasses = {
 };
 
 const colorVariants = {
-  blue: 'bg-blue-600 text-blue-800 hover:bg-blue-300 dark:bg-blue-500 dark:text-blue-100 dark:hover:bg-blue-600',
-  grey: 'bg-neutral-600 text-neutral-800 hover:bg-neutral-300 dark:bg-neutral-500 dark:text-neutral-100 dark:hover:bg-neutral-600',
-  purple: 'bg-purple-600 text-purple-800 hover:bg-purple-300 dark:bg-purple-500 dark:text-purple-100 dark:hover:bg-purple-600',
-  pink: 'bg-pink-600 text-pink-800 hover:bg-pink-300 dark:bg-pink-500 dark:text-pink-100 dark:hover:bg-pink-600',
-  amber: 'bg-amber-600 text-amber-800 hover:bg-amber-300 dark:bg-amber-500 dark:text-amber-100 dark:hover:bg-amber-600',
-  cyan: 'bg-cyan-600 text-cyan-800 hover:bg-cyan-300 dark:bg-cyan-500 dark:text-cyan-100 dark:hover:bg-cyan-600',
-  green: 'bg-green-600 text-green-800 hover:bg-green-300 dark:bg-green-500 dark:text-green-100 dark:hover:bg-green-600',
+  blue: 'bg-blue-200 text-blue-800 group-hover:bg-blue-300 border border-blue-400 ',
+  grey: 'bg-neutral-200 text-neutral-800 group-hover:bg-neutral-300 border border-neutral-400  ',
+  purple: 'bg-purple-200 text-purple-800 group-hover:bg-purple-300 border border-purple-400 ',
+  pink: 'bg-pink-200 text-pink-800 group-hover:bg-pink-300 border border-pink-400 ',
+  amber: 'bg-amber-200 text-amber-800 group-hover:bg-amber-300 border border-amber-400 ',
+  cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300 border border-cyan-400 ',
+  cyan200: 'bg-cyan-200 text-cyan-600 border border-cyan-400 border border-cyan-400 ',
+  green: 'bg-green-200 text-green-800 group-hover:bg-green-300 border border-green-400 ',
 }
 
-
-
 export default function Badge({
   leftIconVariant,
   leftIconColor,
@@ -55,7 +55,7 @@ export default function Badge({
             <Icon height={'h-4 w-4'} variant={leftIconVariant} strokeColor={leftIconColor} />
           </div>
         )}
-        {children}
+        <Typography textStyle='h6'>{children}</Typography>
 
         {rightIconVariant && rightIconVariant !== 'none' && (
           <div className='ml-1'>

package/src/HDS/components/Cards/Misc/talkCard.js

@@ -10,8 +10,8 @@ export default function TalkCard(props) {
 
         <div className=" ">
 
-            <div className="grid rounded-3xl shadow bg-neutral-0  grid-cols-2  border border-neutral-200 min-w-[882px] ">
-                <div className="px-8 py-6 border-r border-r-neutral-150" >
+            <div className="grid rounded-3xl shadow bg-neutral-0 grid-cols-1 tb:grid-cols-2  border border-neutral-200 w-full max-w-[882px] ">
+                <div className="px-8 py-6 border-b border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" >
 
 
                     <Badges
@@ -22,25 +22,29 @@ export default function TalkCard(props) {
                         children={props.badges.label}
                     />
 
-                    <Typography className='my-2 text-neutral-800' textStyle='h5'>{props.title}</Typography>
-                    <Typography className='my-2 text-neutral-600' textStyle='body1'>{props.para}</Typography>
+                    <Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
+                    <Typography className='my-2 text-neutral-700' textStyle='body1'>{props.para}</Typography>
                 </div>
 
-                <div className="flex flex-col pt-[2.875rem] justify-between">
-                    <div className="pl-6 flex gap-6 mb-9 flex-col ">
-                        {props.speakerSet.map((value, i) => (
-                            <div key={i} className="">
+                <div className="flex flex-col pt-0 tb:pt-[2.875rem] justify-between">
+                    {
+                      props.speakerSet && (
+                        <div className="pl-6 flex gap-6 mt-9 tb:mt-0 mb-9 flex-col ">
+                            {props.speakerSet.map((value, i) => (
+                                <div key={i} className="">
 
-                                <ProfileAvatar
-                                    name={value.name}
-                                    size='md'
-                                    designation={value.designation}
-                                    imageUrl={value.imageUrl}
-                                />
-                            </div>
+                                    <ProfileAvatar
+                                        name={value.name}
+                                        size='md'
+                                        designation={value.designation}
+                                        imageUrl={value.imageUrl}
+                                    />
+                                </div>
 
-                        ))}
-                    </div>
+                            ))}
+                        </div>
+                      )
+                    }
                     <div className=" w-full border-t border-t-neutral-150 p-6 flex flex-row justify-between items-center">
                         <Typography textStyle='h6' className='text-blue-800'>{props.eventTime}</Typography>
                         <HDSButton
@@ -50,7 +54,7 @@ export default function TalkCard(props) {
                             state='default'
                             size='sm'
                             type="iconOnly"
-
+                            label=''
                         />
                     </div>
                 </div>

package/src/HDS/components/Hero/h1.js

@@ -31,7 +31,6 @@ export default function Hero({ heroData, logo, scrollArrow, fontSize }) {
                 {
                   heroData.tag_line && (
                     <div
-
                     >
                       <Typography textStyle="h6" as="h6" className={"pb-6 uppercase text-center db:text-left font-normal tb-l:text-left " + ((heroData.tag_line_color) ? heroData.tag_line_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}
                       >

package/src/HDS/components/Hero/h2.js

@@ -137,8 +137,8 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
   const imageCard = (heroData) => (
     heroData.imageUrl && (
-      <div className="px-20 py-20">
-        <img src={heroData.imageUrl} alt={heroData.imageAlt} />
+      <div className="">
+        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-[560px] h-[580px] rounded-b-3xl' />
       </div>
     )
   )
@@ -150,7 +150,7 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
         <div className={"max-w-7xl mx-auto rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
           <div className="w-full">
             <div className={"db:flex db:w-full tb-l:flex block" + ((heroData.video_url) ? " tb:block" : " tb:flex")}>
-              <div className={"db:px-20 db:py-20 db:pr-0 tb-l:self-center tb-l:min-w-[400px] mx-auto db:ml-0 db:max-w-[625px] db:min-w-[625px] p-5 pt-10 z-[1] tb:p-16 tb-l:py-12" + ((heroData.video_url) ? " tb:max-w-[530px]" : " tb:ml-0 tb:max-w-[290px] tb:min-w-[310px] tb:pr-0")}
+              <div className={("w-full")}
               >
                 {
                   heroData.tag_line && (

package/src/HDS/components/Tables/tableB.js

@@ -1,20 +1,21 @@
 import React from 'react';
+import { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { Typography } from '../../foundation/Typography'
+import { Icon } from '../common-components/Icon'
+import { Tab } from '../Tabs'
 
-const test = (TABLE_HEADER) => (
-    console.log(TABLE_HEADER[0]['title']),
-    Object.keys(TABLE_HEADER[0]).map((key, value) => (
-      
-        <th
-            key={key}
-            scope="col"
-            className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
-        >
-            {key}
-        </th>
-    ))
-)
+const tabs = [
+    { name: 'My Account', href: '', current: false },
+    { name: 'Company', href: '', current: false },
+    { name: 'Team Members', href: '', current: true },
+    { name: 'Billing', href: '', current: false },
+]
+
+function handleTabClick(tab) {
+    console.log(`Tab "${tab.name}" updatedTabs`);
+    // Perform any other actions based on the clicked tab
+}
 
 export default function TableB(props) {
     const {
@@ -23,57 +24,215 @@ export default function TableB(props) {
         TABLE_VALUE,
         TABLE_HEADER,
         children
-
     } = props;
-    test(TABLE_HEADER);
+    const [activeTab, setActiveTab] = useState(0);
     return (
-        <div className="px-4 sm:px-6 lg:px-8 ">
-            <div className="sm:flex sm:items-center ">
-                <div className="sm:flex-auto flex flex-col items-center">
-                    {title && (
-                        <Typography
-                            textStyle='h2'>
-                            {title}
-                        </Typography>
-                    )
-                    }
-                    {description && (
+        <div className=" max-w-7xl">
+            <div className="sm:flex sm:items-center flex justify-around ">
+
+                <div className="w-full items-center flex justify-around md:flex md:flex-col md:items-center">
+                    <div>
+
+
+                        {title && (
+                            <Typography
+                                textStyle='h3'>
+                                {title}
+                            </Typography>
+                        )
+                        }
+                        {/* {description && (
                         <Typography
                             textStyle='body1c'>
                             {description}
                         </Typography>
                     )
-                    }
+                    } */}
+                    </div>
+                    <div className=''>
+                        <Tab onTabClick={handleTabClick} tabs={tabs} />
+                    </div>
                 </div>
             </div>
 
-            <div>
-                <div className="-mx-4 mt-8 sm:-mx-0">
-                    <table className="min-w-full divide-y divide-gray-300 border">
+            {/* <div className=''>
+            <div className="-mx-4 mt-8 sm:-mx-0 bg-neutral-0 rounded-3xl ">
+                    <table className="min-w-full  shadow rounded-3xl ">
+                        <thead>
+                            <tr className='divide-x divide-neutral-200 text-center rounded-t-3xl'>
+                                    <th
+                                        key={activeTab}
+                                        scope="col"
+                                        className="px-8 py-6 sm:table-cell"
+                                    >
+                                        <div className=''>
+                                            <div className='flex flex-col justify-center items-center text-center'>
+                                                <div className={'flex items-center gap-2'}>
+                                                    {TABLE_HEADER[activeTab]['icon'] &&
+                                                        (
+                                                            <Icon
+                                                                height='h-6 w-6'
+                                                                variant={TABLE_HEADER[activeTab]['icon']}
+                                                                strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
+                                                        )
+                                                    }
+                                                    {
+                                                        TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
+                                                            <Typography
+                                                                textStyle='h5'
+                                                                className={TABLE_HEADER[activeTab]['title_text_color']}>
+                                                                {TABLE_HEADER[activeTab]['title']}
+                                                            </Typography>)
+                                                    }
+                                                    {
+                                                        TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
+                                                            <Typography
+                                                                textStyle='h5'
+                                                                className={TABLE_HEADER[activeTab]['title_text_color']}>
+                                                                {TABLE_HEADER[activeTab]['title']}
+                                                            </Typography>)
+                                                    }
+
+
+                                                </div>
+                                                <div className=' max-w-[10rem]'>
+                                                    {TABLE_HEADER[activeTab]['descr'] && (
+                                                        <Typography
+                                                            textStyle='body1'
+                                                            className={TABLE_HEADER[activeTab]['descr_text_color']}>
+                                                            {TABLE_HEADER[activeTab]['descr']}
+                                                        </Typography>)}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </th>
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-neutral-200 rounded-b-3xl">
+                            {TABLE_VALUE.map((value) => (
+                                <tr className='divide-x divide-neutral-200' key={uuidv4()}>
+                                    {Object.keys(value).map((key) => (
+                                        <React.Fragment key={uuidv4()}>
+                                            {key === 'rowTitle' && (<td
+                                                key={uuidv4()}
+                                                className="px-8 py-7 w-[22.5rem] whitespace-pre-line "
+                                            >
+                                                <Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'>{value[key]}</Typography>
+
+                                            </td>)}
+
+                                            {key !== 'rowTitle' && (
+                                                <td
+                                                    key={uuidv4()}
+                                                    className="px-8 py-7 text-center"
+                                                >
+                                                    {value[key]['text'] && (
+                                                        <Typography className='text-neutral-700' textStyle='body1c'>{value[key]['text']}</Typography>
+
+                                                    )}
+                                                    {!value[key]['text'] && (
+                                                        <div className='flex justify-center'>
+                                                            <Icon height='h-5 w-5' variant={value[key]['iconVariant']} strokeClass={value[key]['iconStrokeClass']} />
+                                                        </div>
+                                                    )}
+
+
+                                                </td>)}
+                                        </React.Fragment>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div> */}
+
+            <div className='hidden md:block' >
+                <div className="-mx-4 mt-8 sm:-mx-0 bg-neutral-0 rounded-3xl ">
+                    <table className="min-w-full  shadow rounded-3xl ">
                         <thead>
-                            <tr>
-                                {Object.keys(TABLE_HEADER[0]).map((key, value) => (
+                            <tr className='divide-x divide-neutral-200 text-center rounded-t-3xl'>
+                                {Object.keys(TABLE_HEADER).map((key, value) => (
                                     <th
                                         key={key}
                                         scope="col"
-                                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+                                        className="px-8 py-6 sm:table-cell"
                                     >
-                                        {}
+                                        <div className=''>
+                                            <div className='flex flex-col justify-center items-center text-center'>
+                                                <div className={'flex items-center gap-2'}>
+                                                    {TABLE_HEADER[key]['icon'] &&
+                                                        (
+                                                            <Icon
+                                                                height='h-6 w-6'
+                                                                variant={TABLE_HEADER[key]['icon']}
+                                                                strokeClass={TABLE_HEADER[key]['iconStrokeClass']} />
+                                                        )
+                                                    }
+                                                    {
+                                                        TABLE_HEADER[key]['title'] && key == 0 && (
+                                                            <Typography
+                                                                textStyle='h5'
+                                                                className={TABLE_HEADER[key]['title_text_color']}>
+                                                                {TABLE_HEADER[key]['title']}
+                                                            </Typography>)
+                                                    }
+                                                    {
+                                                        TABLE_HEADER[key]['title'] && key != 0 && (
+                                                            <Typography
+                                                                textStyle='h5'
+                                                                className={TABLE_HEADER[key]['title_text_color']}>
+                                                                {TABLE_HEADER[key]['title']}
+                                                            </Typography>)
+                                                    }
+
+
+                                                </div>
+                                                <div className=' max-w-[10rem]'>
+                                                    {TABLE_HEADER[key]['descr'] && (
+                                                        <Typography
+                                                            textStyle='body1'
+                                                            className={TABLE_HEADER[key]['descr_text_color']}>
+                                                            {TABLE_HEADER[key]['descr']}
+                                                        </Typography>)}
+                                                </div>
+                                            </div>
+                                        </div>
                                     </th>
                                 ))}
                             </tr>
                         </thead>
-                        <tbody className="divide-y divide-gray-200 bg-white">
+                        <tbody className="divide-y divide-neutral-200 rounded-b-3xl">
                             {TABLE_VALUE.map((value) => (
-                                <tr key={uuidv4()}>
+                                <tr className='divide-x divide-neutral-200' key={uuidv4()}>
                                     {Object.keys(value).map((key) => (
-                                        <td
-                                            key={uuidv4()}
-                                            className=" py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-3"
-                                        >
-                                            {``}{value[key]}
+                                        <React.Fragment key={uuidv4()}>
+                                            {key === 'rowTitle' && (<td
+                                                key={uuidv4()}
+                                                className="px-8 py-7 w-[22.5rem] whitespace-pre-line "
+                                            >
+                                                <Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'>{value[key]}</Typography>
+
+                                            </td>)}
+
+                                            {key !== 'rowTitle' && (
+                                                <td
+                                                    key={uuidv4()}
+                                                    className="px-8 py-7 text-center"
+                                                >
+                                                    {value[key]['text'] && (
+                                                        <Typography className='text-neutral-700' textStyle='body1c'>{value[key]['text']}</Typography>
+
+                                                    )}
+                                                    {!value[key]['text'] && (
+                                                        <div className='flex justify-center'>
+                                                            <Icon height='h-5 w-5' variant={value[key]['iconVariant']} strokeClass={value[key]['iconStrokeClass']} />
+                                                        </div>
+                                                    )}
+
 
-                                        </td>
+                                                </td>)}
+                                        </React.Fragment>
                                     ))}
                                 </tr>
                             ))}

package/src/HDS/components/Tabs/import React, { useState, useRef } from .js

@@ -0,0 +1,61 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+export default function Tab(props) {
+  const { tabs, onTabClick } = props;
+  const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
+  const pillRef = useRef(null);
+  const activeTabRef = useRef(null);
+
+  const handleTabClick = (event, clickedTab) => {
+    event.preventDefault();
+    setActiveTab(clickedTab);
+    if (onTabClick) {
+      onTabClick(clickedTab);
+    }
+  };
+
+  useEffect(() => {
+    // Update the pill position and height when activeTab changes
+    const pill = pillRef.current;
+    const activeTabElement = activeTabRef.current;
+
+    if (pill && activeTabElement) {
+      const pillWidth = activeTabElement.offsetWidth;
+      const pillHeight = activeTabElement.offsetHeight;
+      const pillOffset = activeTabElement.offsetLeft;
+
+      pill.style.transform = `translateX(${pillOffset}px)`;
+      pill.style.width = `${pillWidth}px`;
+      pill.style.height = `${pillHeight}px`;
+    }
+  }, [activeTab]);
+
+  return (
+    <div>
+      <div className="hidden md:block">
+        <nav className="relative inline-flex bg-neutral-0 p-2 rounded-full" aria-label="Tabs">
+          {tabs.map((tab, index) => (
+            <a
+              key={tab.name}
+              href="#"
+              className={`relative px-3 py-1 font-medium text-sm rounded-full ${
+                activeTab === tab
+                  ? 'bg-blue-600 text-neutral-0 z-10' // Increase z-index for active tab
+                  : 'text-neutral-500 bg-neutral-0 hover:bg-neutral-100 flex-nowrap transition-all duration-500'
+              }`}
+              aria-current={activeTab === tab ? 'page' : undefined}
+              onClick={(event) => handleTabClick(event, tab)}
+              ref={activeTab === tab ? activeTabRef : null}
+            >
+              {tab.name}
+            </a>
+          ))}
+          <span
+            ref={pillRef}
+            className="absolute bg-blue-600 rounded-full transition-all duration-500 z-0 -mt-px" // Add negative margin to counteract the gap
+          />
+        </nav>
+      </div>
+    </div>
+  );
+}

package/src/HDS/components/Tabs/tab.js

@@ -1,47 +1,61 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
+import { Typography } from '../../foundation/Typography'
 
-function classNames(...classes) {
-    return classes.filter(Boolean).join(' ')
-  }
-  
-export default function Tab(props){
-    const tabs = Array.isArray(props.tabs) ? props.tabs : [];
-    return (
-      <div>
-        <div className="tab:hidden">
-          <label htmlFor="tabs" className="sr-only">
-            Select a tab
-          </label >
-          {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
-          <select
-            id="tabs"
-            name="tabs"
-            className="block w-full rounded-md border-pink-300 focus:border-pink-500 focus:ring-pink-500"
-            defaultValue={tabs.length && tabs.find((tab) => tab.current).name}
-          >
-            {tabs.length && tabs.map((tab) => (
-              <option key={tab.name}>{tab.name}</option>
-            ))}
-          </select>
-        </div>
-        <div className="hidden tab:block">
-          <nav className="inline-flex gap-2 bg-neutral-0 p-2 rounded-full" aria-label="Tabs">
-          {tabs.length && tabs.map((tab) => (
-              <a
-                key={tab.name}
-                href={tab.href}
-                className={classNames(
-                  tab.current ? 'bg-blue-600 text-neutral-0' : 'text-neutral-500 bg-neutral-0 hover:bg-neutral-100 hover:transition-all hover: delay-100 flex-nowrap ',
-                  'px-3 py-1 font-medium text-sm rounded-full'
-                )}
-                aria-current={tab.current ? 'page' : undefined}
-              >
-                {tab.name}
-              </a>
-            ))}
-          </nav>
-        </div>
+export default function Tab(props) {
+  const { tabs, onTabClick } = props;
+  const [activeTab, setActiveTab] = useState(tabs.find(tab => tab.current) || tabs[0]);
+  const pillRef = useRef(null);
+
+  const handleTabClick = (event, clickedTab) => {
+    event.preventDefault();
+    setActiveTab(clickedTab);
+    if (onTabClick) {
+      onTabClick(clickedTab);
+    }
+
+    // Move the pill indicator to the clicked tab
+    const pill = pillRef.current;
+    if (pill) {
+      const pillWidth = event.currentTarget.offsetWidth;
+      const clickedTabOffset = event.currentTarget.offsetLeft;
+      const pillOffset = pill.parentElement.offsetLeft;
+      const translateX = clickedTabOffset ;
+
+      pill.style.transform = `translateX(${translateX}px)`;
+      pill.style.width = `${pillWidth}px`;
+    }
+  };
+
+  return (
+    <div>
+      <div className="block">
+        <nav className="relative inline-flex gap-2  p-2 rounded-full" aria-label="Tabs">
+          {tabs.map(tab => (
+            <a
+              key={tab.name}
+              href="#"
+              className={`px-3 py-1 font-medium text-sm rounded-full ${
+                activeTab === tab
+                  ? 'bg-blue-600 text-neutral-0'
+                  : 'text-neutral-500 bg-neutral-0 hover:bg-neutral-100 flex-nowrap transition-all duration-500'
+              }`}
+              aria-current={activeTab === tab ? 'page' : undefined}
+              onClick={(event) => handleTabClick(event, tab)}
+            >
+              <Typography className='z-10 whitespace-nowrap' textStyle='body3c-medium'>{tab.name}</Typography>
+            </a>
+          ))}
+          <span
+            ref={pillRef}
+            className="absolute left-0 -z-10 bg-blue-600 rounded-full transition-all ease-in-out duration-500"
+            style={{
+              left: `${activeTab.index * 100}%`,
+              width: `${activeTab.width}px`, // Use the width of the clicked tab
+              height: '28px' // Add desired height to make the pill visible
+            }}
+          />
+        </nav>
       </div>
-    )
-  }
-  
+    </div>
+  );
+}

package/src/HDS/components/common-components/Icon/IconMap.js

@@ -2353,7 +2353,7 @@ const iconReferenceMap = {
     HasuraBlueLogo: HasuraBlueLogoIcon,
 };
 export default function Icon ({ variant, height, strokeColor, strokeClass, className }){
-    const CurrentActiveIcon = iconReferenceMap[variant];
+    const CurrentActiveIcon = iconReferenceMap[variant] ;
     const IconStrokeCLass = HDSColor(strokeClass);
     return (
         <div style={{ stroke: `${strokeColor}` }}>
@@ -2367,8 +2367,3 @@ Icon.propTypes = {
     fillColor: PropTypes.string,
     strokeColor: PropTypes.string,
 };
-
-Icon.defaultProps = {
-    strokeClass: 'stroke-neutral-0',
-    height: 'h-6 w-6'
-};

package/src/HDS/components/index.js

@@ -11,4 +11,5 @@ export * from './InputFields';
 export * from './Snippet';
 export * from './Tabs';
 export * from './Tooltip';
-export * from './Hero';
+export * from './Hero';
+export * from './Tables';