hds-web 1.33.2 → 1.33.4

package/src/HDS/assets/icons/x-circle.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/x-close.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6L6 18M6 6L18 18"  stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/x-square.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 9L15 15M15 9L9 15M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/x.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 7L7 17M7 7L17 17"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/youtube.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5813 7.19989C21.4733 6.76846 21.2534 6.37318 20.9438 6.05395C20.6341 5.73473 20.2457 5.50287 19.8178 5.3818C18.2542 5 12 5 12 5C12 5 5.74578 5 4.18222 5.41816C3.75429 5.53923 3.36588 5.77109 3.05623 6.09031C2.74659 6.40954 2.52666 6.80482 2.41868 7.23625C2.13253 8.82303 1.99255 10.4327 2.00052 12.0451C1.99032 13.6696 2.1303 15.2916 2.41868 16.8903C2.53773 17.3083 2.76258 17.6886 3.0715 17.9943C3.38043 18.3 3.76299 18.5209 4.18222 18.6357C5.74578 19.0538 12 19.0538 12 19.0538C12 19.0538 18.2542 19.0538 19.8178 18.6357C20.2457 18.5146 20.6341 18.2827 20.9438 17.9635C21.2534 17.6443 21.4733 17.249 21.5813 16.8176C21.8653 15.2427 22.0052 13.6453 21.9995 12.0451C22.0097 10.4206 21.8697 8.79862 21.5813 7.19989Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.75 9.46533C9.75 8.98805 9.75 8.74941 9.84974 8.61618C9.93666 8.50008 10.0697 8.42744 10.2144 8.4171C10.3804 8.40525 10.5811 8.53429 10.9826 8.79239L14.9254 11.3271C15.2738 11.551 15.448 11.663 15.5082 11.8054C15.5607 11.9298 15.5607 12.0702 15.5082 12.1946C15.448 12.337 15.2738 12.449 14.9254 12.6729L10.9826 15.2076C10.5811 15.4657 10.3804 15.5948 10.2144 15.5829C10.0697 15.5726 9.93666 15.4999 9.84974 15.3838C9.75 15.2506 9.75 15.012 9.75 14.5347V9.46533Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/youtubecolor.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.54 6.42C22.4156 5.95196 22.1705 5.5248 21.8292 5.18127C21.4878 4.83773 21.0622 4.58988 20.595 4.4625C18.875 4 12 4 12 4C12 4 5.125 4 3.405 4.4625C2.93777 4.58988 2.51219 4.83773 2.17085 5.18127C1.82951 5.5248 1.58438 5.95196 1.46 6.42C1 8.1475 1 11.75 1 11.75C1 11.75 1 15.3525 1.46 17.08C1.58438 17.548 1.82951 17.9752 2.17085 18.3187C2.51219 18.6623 2.93777 18.9101 3.405 19.0375C5.125 19.5 12 19.5 12 19.5C12 19.5 18.875 19.5 20.595 19.0375C21.0622 18.9101 21.4878 18.6623 21.8292 18.3187C22.1705 17.9752 22.4156 17.548 22.54 17.08C23 15.3525 23 11.75 23 11.75C23 11.75 23 8.1475 22.54 6.42Z" fill="#FF0302"/>
+<path d="M9.75008 15.0213V8.47882L15.5001 11.7501L9.75008 15.0213Z" fill="#FEFEFE"/>
+</svg>

package/src/HDS/assets/icons/zap-circle.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5.5L7.36159 12.2468C7.08236 12.6529 6.94275 12.856 6.95113 13.0248C6.95843 13.1718 7.03015 13.3082 7.14716 13.3975C7.28151 13.5 7.52794 13.5 8.02082 13.5H12V18.5L16.6384 11.7532C16.9176 11.3471 17.0573 11.144 17.0489 10.9752C17.0416 10.8282 16.9699 10.6918 16.8528 10.6025C16.7185 10.5 16.4721 10.5 15.9792 10.5H12V5.5Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/zap-fast.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 17.5H3.5M6.5 12H2M9 6.5H4M17 3L10.4036 12.235C10.1116 12.6438 9.96562 12.8481 9.97194 13.0185C9.97744 13.1669 10.0486 13.3051 10.1661 13.3958C10.3011 13.5 10.5522 13.5 11.0546 13.5H16L15 21L21.5964 11.765C21.8884 11.3562 22.0344 11.1519 22.0281 10.9815C22.0226 10.8331 21.9514 10.6949 21.8339 10.6042C21.6989 10.5 21.4478 10.5 20.9454 10.5H16L17 3Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/zap-off.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8L4.09346 12.6879C3.74465 13.1064 3.57024 13.3157 3.56758 13.4925C3.56526 13.6461 3.63373 13.7923 3.75326 13.8889C3.89075 14 4.16318 14 4.70803 14H12L11 22L16 16M15.65 10H19.292C19.8368 10 20.1093 10 20.2467 10.1111C20.3663 10.2077 20.4347 10.3539 20.4324 10.5075C20.4298 10.6843 20.2554 10.8936 19.9065 11.3121L18.5502 12.9397M10.5728 4.91265L13 2L12.4002 6.79771M21 21L3 3"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/zap-square.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 6L7.4336 12.2269C7.13256 12.6374 6.98205 12.8427 6.9869 13.0142C6.99113 13.1634 7.06185 13.303 7.17972 13.3947C7.31514 13.5 7.56967 13.5 8.07872 13.5H12V18L16.5664 11.7731C16.8674 11.3626 17.018 11.1573 17.0131 10.9858C17.0089 10.8366 16.9381 10.697 16.8203 10.6053C16.6849 10.5 16.4303 10.5 15.9213 10.5H12V6Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/zap.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9999 2L4.09332 12.6879C3.74451 13.1064 3.57011 13.3157 3.56744 13.4925C3.56512 13.6461 3.63359 13.7923 3.75312 13.8889C3.89061 14 4.16304 14 4.7079 14H11.9999L10.9999 22L19.9064 11.3121C20.2552 10.8936 20.4296 10.6843 20.4323 10.5075C20.4346 10.3539 20.3661 10.2077 20.2466 10.1111C20.1091 10 19.8367 10 19.2918 10H11.9999L12.9999 2Z" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/zoom-in.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 21L16.65 16.65M11 8V14M8 11H14M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/HDS/assets/icons/zoom-out.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 21L16.65 16.65M8 11H14M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,76 @@
+import React from 'react';
+export default function Example() {
+    return (
+      <>
+        <div className="flex -space-x-1 overflow-hidden">
+          <img
+            className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
+            src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+            alt=""
+          />
+          <img
+            className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
+            src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+            alt=""
+          />
+          <img
+            className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
+            src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+            alt=""
+          />
+          <img
+            className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
+            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+            alt=""
+          />
+        </div>
+  
+        <div className="flex -space-x-2 overflow-hidden">
+          <img
+            className="inline-block h-8 w-8 rounded-full ring-2 ring-white"
+            src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+            alt=""
+          />
+          <img
+            className="inline-block h-8 w-8 rounded-full ring-2 ring-white"
+            src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+            alt=""
+          />
+          <img
+            className="inline-block h-8 w-8 rounded-full ring-2 ring-white"
+            src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+            alt=""
+          />
+          <img
+            className="inline-block h-8 w-8 rounded-full ring-2 ring-white"
+            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+            alt=""
+          />
+        </div>
+  
+        <div className="flex -space-x-2 overflow-hidden">
+          <img
+            className="inline-block h-10 w-10 rounded-full ring-2 ring-white"
+            src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+            alt=""
+          />
+          <img
+            className="inline-block h-10 w-10 rounded-full ring-2 ring-white"
+            src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+            alt=""
+          />
+          <img
+            className="inline-block h-10 w-10 rounded-full ring-2 ring-white"
+            src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+            alt=""
+          />
+          <img
+            className="inline-block h-10 w-10 rounded-full ring-2 ring-white"
+            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+            alt=""
+          />
+        </div>
+      </>
+    )
+  }
+  

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Typography} from '../../foundation/Typography'
+
+export default function HasConAvatar({ name, designation, size, imageUrl }) {
+    const hasImageUrl = imageUrl && imageUrl.length > 0;
+    return (
+        <div className={`shadow group rounded-2xl tb:rounded-3xl flex flex-col-reverse mb-m:flex-row mb-m:flex mb-m:items-center mb-m:justify-between bg-neutral-0 tb:inline-flex tb:flex-col tb:max-w-[289px]  tb:min-w-[18rem]`}>
+
+            <div className="px-6 pb-6 pt-3 mb-m:px-5 mb-m:py-[30px] tb:p-0 text-left tb:flex-col mb-m:min-h-[120px] tb:flex tb:items-center tb:px-8 tb:pb-8 tb:mt-8 tb:ml-0 tb:text-center">
+                <div  className=' text-hds-m-body1c-bold tb:text-hds-t-h5 db:text-hds-d-h5 text-blue-400'>{name}</div>
+                <div  className=' text-hds-m-body3c-medium tb:text-hds-t-h7 db:text-hds-d-h7 text-blue-800 capitalize tb:uppercase'>{designation}</div>
+            </div>
+            <div className='relative pt-6 mb-m:pt-0 pl-6 mb-m:pl-0 mb-m:self-center'>
+                <img
+                    className={`inline-block max-[399px]:bg-blue-300  rounded-r-xl max-[399px]:rounded-full  w-[60px] mb-m:min-w-[144px] mb-m:w-[9rem] tb:min-w-[18rem] tb:rounded-3xl border-neutral-0`}
+                    src={imageUrl}
+                />
+                 {/* <div className="absolute tb-l:rounded-b-3xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div> */}
+            </div>
+
+
+        </div>
+    )
+}
+
+HasConAvatar.propTypes = {
+    name: PropTypes.string.isRequired,
+    designation: PropTypes.string.isRequired,
+};
+
+HasConAvatar.defaultProps = {
+    name: 'Names',
+    designation: 'Product Marketing, Hasura',
+    imageUrl: ``
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '../common-components/Icon';
+const sizeClasses = {
+  'xs': 'h-6 w-6 text-xs-medium',
+  'sm': 'h-8 w-8 text-sm-medium',
+  'md': 'h-10 w-10 text-md-medium',
+  'lg': 'h-12 w-12 text-lg-medium',
+  'xl': 'h-[60px] w-[60px] text-xl-medium'
+}
+const IconSizeClass = {
+  'xs': 'h-4',
+  'sm': 'h-5',
+  'md': 'h-6',
+  'lg': 'h-7',
+  'xl': 'h-9'
+}
+export default function IconAvatar({ size }) {
+  return (
+    <div>
+      <span
+        className={`${sizeClasses[`${size}`]} inline-flex items-center justify-center shadow rounded-full bg-neutral-100 border-[1.5px] border-neutral-0 overflow-hidden`}
+      >
+        {/* <Icon height={`${IconSizeClass[`${size}`]}`} variant={'user03'} strokeColor={'#1F2A37'} /> */}
+        <Icon height={`${IconSizeClass[`${size}`]}`} variant='user03' strokeColor={'#1F2A37'} />
+      </span>
+    </div>
+  )
+}
+IconAvatar.propTypes = {
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+};
+
+IconAvatar.defaultProps = {
+  size: 'sm',
+};

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

@@ -0,0 +1,32 @@
+import React from 'react';
+const AvatarFromImage = ({ imageFile, altText, size }) => {
+  const [imageUrl, setImageUrl] = React.useState('');
+
+  React.useEffect(() => {
+    const reader = new FileReader();
+    if (imageFile && imageFile.size > 0) {
+      reader.readAsDataURL(imageFile);
+      reader.onload = () => {
+        setImageUrl(reader.result);
+      };
+    }
+  }, [imageFile]);
+
+  // if (!imageFile) {
+  //   return <div>No image selected</div>;
+  // }
+
+  return (
+    <div className={`w-${`[${size}px]`} h-${`[${size}px]`} rounded-full overflow-hidden`}>
+      <img src={`https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0b1d8059-e01d-44c2-957c-35370511501b`} alt={altText} className={` rounded-full w-12 h-12} object-cover`} />
+    </div>
+  );
+};
+
+export default AvatarFromImage;
+
+
+AvatarFromImage.defaultProps = {
+  size: '12',
+ 
+};

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

@@ -0,0 +1,6 @@
+export {default as ImageAvatar} from './imageEditor';
+export {default as IconAvatar} from './iconAvatar';
+export {default as AvatarGroup} from './avatarGroup';
+export {default as InitialsAvatar} from './initialsAvatar';
+export {default as ProfileAvatar} from './profileAvatar';
+export {default as HasConAvatar} from './hasConAv';

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+const sizeClasses = {
+  xs: 'h-6 w-6 text-xs-medium',
+  sm: 'h-8 w-8 text-sm-medium',
+  md: 'h-10 w-10 text-md-medium',
+  lg: 'h-12 w-12 text-lg-medium',
+  xl: 'h-[60px] w-[60px] text-xl-medium',
+};
+
+export default function initialsAvatar({ size, text }) {
+  const formattedText = text.slice(0, 2);
+  return (
+    <>
+      <span
+        className={`${sizeClasses[size]} inline-flex items-center justify-center shadow rounded-full bg-neutral-100 border-[1.5px] border-neutral-0`}
+      >
+        <span className="text-neutral-800">{formattedText}</span>
+      </span>
+    </>
+  );
+}
+
+initialsAvatar.propTypes = {
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  text: PropTypes.string.isRequired,
+};
+
+initialsAvatar.defaultProps = {
+  size: 'sm',
+  text: 'AM',
+};

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '../common-components/Icon';
+import { Typography } from '../../foundation/Typography';
+import { HDSColor } from '../../foundation/ColorPalette';
+const imgSizes = {
+    'xs': 'h-8 w-8',
+    'sm': 'h-10 w-10',
+    'md': 'h-12 w-12 min-w-[48px]',
+    'lg': 'h-[60px] w-[60px]',
+    'xl': 'h-16 w-16 min-w-[64px] min-h-[64px]',
+}
+const AvatarVariant = {
+    'circular': 'shadow rounded-full ',
+    'square': 'rounded-lg',
+}
+
+const ProfileAvatarVariant = {
+    'default': {
+        'titleTextStyle': 'text-hds-m-body2c-bold tb:text-hds-t-body2c-bold db:text-hds-d-body2c-bold',
+        'desgnTextStyle': 'text-hds-m-body3c tb:text-hds-t-body3c db:text-hds-d-body3c'
+    },
+    'primary': {
+        'titleTextStyle': 'text-hds-m-body1-semi-bold tb:text-hds-t-body1-semi-bold db:text-hds-d-body1-semi-bold',
+        'desgnTextStyle': 'text-hds-m-body2 tb:text-hds-t-body2 db:text-hds-d-body2'
+    },
+    'secondary': {
+        'titleTextStyle': 'text-hds-m-sub2 tb:text-hds-t-sub2 db:text-hds-d-sub2',
+        'desgnTextStyle': 'text-hds-m-body2 tb:text-hds-t-body2 db:text-hds-d-body2'
+    }
+}
+
+export default function ProfileAvatar({avatarBgColor, name, designation, size, imageUrl, avatarVariant, avatarType }) {
+    const imgSizeClass = imgSizes[size] || imgSizes.md;
+    const avatarVariantClass = AvatarVariant[avatarVariant] || AvatarVariant.circular;
+    const defaultAvatarIcon = "user03";
+    const hasImageUrl = imageUrl && imageUrl.length > 0;
+    const AvType = avatarType || 'default';
+
+    return (
+        <div className="group block flex-shrink-0">
+            <div className="flex items-center">
+                <div>
+                    {hasImageUrl ? (
+                        <img
+                            className={`${imgSizeClass} ${avatarVariantClass} ${HDSColor(avatarBgColor)} rounded inline-block`}
+                            src={imageUrl}
+                            alt={name}
+                        />
+                    ) : (
+                        <Icon
+                            variant={defaultAvatarIcon}
+                            height={imgSizeClass}
+                            strokeColor={'#D2D6DB'}
+                        />
+                    )}
+                </div>
+                <div className="ml-3">
+                    <div className={`${ProfileAvatarVariant[AvType]['titleTextStyle']} text-neutral-800`}>{name}</div>
+                    <div className={`${ProfileAvatarVariant[AvType]['desgnTextStyle']} text-neutral-600`}>{designation}</div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+ProfileAvatar.propTypes = {
+    name: PropTypes.string.isRequired,
+    designation: PropTypes.string.isRequired,
+};
+
+ProfileAvatar.defaultProps = {
+    name: 'Names',
+    designation: 'Product Marketing, Hasura',
+    imageUrl: ``
+};

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '../common-components/Icon';
+import {Typography} from '../../foundation/Typography'
+import { HDSColor } from '../../foundation/ColorPalette';
+const sizeClasses = {
+  sm: 'py-0.5 px-3 hds-d-body3c',
+  default: 'py-1 px-3',
+};
+
+const iconClasses = {
+  sm: 'ml-2 mr-1',
+  default: '',
+};
+
+const colorVariants = {
+  blue: 'bg-blue-200 text-blue-800 group-hover:bg-blue-300  ',
+  grey: 'bg-neutral-200 text-neutral-800 group-hover:bg-neutral-300  ',
+  purple: 'bg-purple-200 text-purple-800 group-hover:bg-purple-300 ',
+  pink: 'bg-pink-200 text-pink-800 group-hover:bg-pink-300 ',
+  amber: 'bg-amber-200 text-amber-800 group-hover:bg-amber-300  ',
+  cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300   ',
+  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  ',
+  purple500: 'bg-purple-500 shadow-sm',
+  blue500:'bg-blue-500 shadow-sm',
+  green500:'bg-green-500 shadow-sm',
+  borderN400: 'border border-neutral-400 group-hover/badge:bg-blue-500 group-hover/badge:text-neutral-0 group-hover/badge:border-opacity-0 transition-all duration-100 ease-in-out'
+
+}
+
+export default function Badge({
+  leftIconVariant,
+  leftIconColor,
+  leftIconColorClass,
+  rightIconVariant,
+  rightIconColor,
+  rightIconColorClass,
+  size,
+  children,
+  color,
+  text_color,
+  onClick,
+  cursorClass
+}) {
+  const [isClicked, setIsClicked] = useState(false);
+  const handleClick = () => {
+    setIsClicked(!isClicked);
+    if (onClick) {
+      onClick();
+    }
+  };
+
+  return (
+    <button
+      className={` ${cursorClass ?? 'cursor-default'} ${sizeClasses[size]} ${
+        colorVariants[color]
+      } inline-flex items-center rounded-full`}
+      onClick={handleClick}
+      aria-pressed={isClicked}
+    >
+       {leftIconVariant && leftIconVariant !== 'none' && (
+          <div className='mr-1'>
+            <Icon height={'h-4 w-4 stroke-[1.5px]'} variant={leftIconVariant} strokeColor={leftIconColor} strokeClass={HDSColor(leftIconColorClass)} />
+          </div>
+        )}
+        <Typography textStyle='body3c' className={HDSColor(text_color)}>{children}</Typography>
+
+        {rightIconVariant && rightIconVariant !== 'none' && (
+          <div className='ml-1'>
+            <Icon height={'h-4 w-4 stroke-[1.5px]'} variant={rightIconVariant} strokeColor={rightIconColor} rightIconColorClass={HDSColor(rightIconColorClass)} />
+          </div>
+        )}
+    </button>
+  );
+}
+
+
+
+Badge.propTypes = {
+  size: PropTypes.oneOf(['sm', 'default']),
+  children: PropTypes.string.isRequired,
+};
+
+Badge.defaultProps = {
+  size: 'sm',
+  children: 'Label',
+  leftIconVariant: 'none',
+  leftIconVariant: 'none',
+  leftIconColor: '#80ff00',
+  rightIconColor: '#80ff00',
+  color: 'bg-blue-200'
+};

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+const sizeClasses = {
+  sm: 'py-0.5 px-1.5',
+  md: 'py-0.5 px-2',
+  lg: 'py-1 px-2.5',
+};
+
+const variant = {
+  A: 'bg-neutral-100 text-neutral-700',
+  B: 'bg-blue-100 text-blue-700',
+  C: 'bg-neutral-0 border border-neutral-300 text-neutral-700',
+};
+
+export default function Count({ size, countVariant, children }) {
+  return (
+    <span
+      className={`${sizeClasses[size]} ${variant[countVariant]} flex flex-row max-w-max justify-center items-center rounded-full`}
+    >
+      {children}
+    </span>
+  );
+}
+
+Count.propTypes = {
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  countVariant: PropTypes.oneOf(['A', 'B', 'C']),
+  children: PropTypes.string.isRequired,
+};
+
+Count.defaultProps = {
+  size: 'sm',
+  children: '24',
+  countVariant: 'A',
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '../common-components/Icon';
+import { Typography } from '../../foundation/Typography'
+import { HDSColor } from '../../foundation/ColorPalette';
+
+export default function EyeBrowText(props) {
+    const {
+        children,
+        eyebrow
+    } = props;
+    const ColorClass = HDSColor(props.eyebrowColorClass);
+    return (
+        <div>
+            <Typography textStyle="h6" className={`${ColorClass} uppercase ${props.className} `}>{eyebrow || children}</Typography>
+        </div>
+    );
+}
+
+EyeBrowText.defaultProps = {
+    statusText: "",
+    eyebrowColorClass: "text-blue-500",
+};

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

@@ -0,0 +1,4 @@
+export {default as Badges} from './badges';
+export {default as Count} from './count';
+export {default as LiveStatus} from './livestatus';
+export {default as EyeBrowText} from './eyebrow';

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '../common-components/Icon';
+import {Typography} from '../../foundation/Typography'
+import { HDSColor } from '../../foundation/ColorPalette';
+
+export default function LiveStatus(props) {
+  const bgColorClass = HDSColor(props.bgClass);
+  const textColorClass = HDSColor(props.statusTextClass);
+  const circleBgClass = HDSColor(props.statusCircleBgClass);
+  let blink = '';
+  if(props.blink){
+    blink = 'blinking'
+  }
+  return (
+    <div className={`${bgColorClass} px-3 py-1 rounded-full inline-flex items-center shadow`}>
+      <div className={`${circleBgClass} ${blink} mr-1 w-3 h-3 min-w-[12px] min-h-[12px] rounded-full`}></div>
+      <Typography textStyle="body3c-medium" className={`${textColorClass} `}>{props.statusText}</Typography>
+    </div>
+  );
+}
+
+LiveStatus.defaultProps = {
+  statusText: "Live Now",
+  statusTextClass: "text-neutral-0",
+  bgClass: "bg-neutral-700",
+  statusCircleBgClass: "bg-red-400"
+
+};