hds-web 1.33.1 → 1.33.3

package/package.json

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

package/src/HDS/components/Banners/banners.js

@@ -1,25 +1,185 @@
 import React from 'react';
-export default function Banner() {
-  return (
-    <div className="flex items-center bg-neutral-100 pl-1 py-1 pr-[10px] sm:px-3.5 sm:before:flex-1 w-full rounded-full">
-      <p className="text-sm leading-6 text-white">
-      <a
-          href="#"
-          className="flex-none rounded-full bg-neutral-0 py-1 px-3.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
-        >
-          Register now 
-        </a>
-        <span className="">
-        We’ve just released a new feature <span aria-hidden="true">&#8599;</span>
-        </span>
-      </p>
-      <div className="flex flex-1 justify-end">
-        <button type="button" className="-m-3 p-3 focus-visible:outline-offset-[-4px]">
-          <span className="sr-only">Dismiss</span>
-          {/* <XMarkIcon className="h-5 w-5 text-white" aria-hidden="true" /> */}
-          x
-        </button>
+import {Typography} from '../../foundation/Typography';
+import { AnnouncementSM } from '../../HDS/components/Cards/Announcement';
+import { AnnouncementMd } from '../../HDS/components/Cards/Announcement';
+import { HDSButton } from "../../Buttons";
+import { useState } from "react";
+
+const Triangle = () => (
+  <svg
+    className="z-10 stroke-blue-500 fill-blue-500"
+    width="18"
+    height="22"
+    viewBox="0 0 18 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0.873058 10.959L0.873057 0.286119L17.9188 10.959L0.873064 21.6318L0.873058 10.959Z"
+      fill="#3970FD"
+    />
+  </svg>
+);
+export default function Banner(props) {
+  const data= props;
+  const HASURADARK = ['https://hasura.io/', 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1701437491/Hasura_Primary_27f9db919f.png'];
+  const HASURALIGHT= ['https://hasura.io/', 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1695988402/hasura_logo_dark_j8eavh_1e11221ebe.png'];
+
+  const HASURALINK = data.isDarkMode ? HASURADARK : HASURALIGHT;
+
+  const logos = (logoURL, LogoAlt) => (
+    <div
+      className="flex divide-x divide-neutral-0 items-center gap-[12px] pr-[74px] h-full">
+      <a href={HASURALINK[0]}>
+        <div
+          className=" tb:max-h-[17px]">
+          <img
+            className=" w-full h-full object-contain"
+            src={HASURALINK[1]}
+            alt="hasuraLogo"
+          />
+        </div>
+      </a>
+      <div
+        className="tb:max-h-[18px] pl-[11px] border-l border-neutral-0">
+        <img
+          className=" w-full h-full object-contain"
+          src={logoURL}
+          alt={LogoAlt}
+        />
       </div>
+
+    </div>
+  );
+  const [showVideo, setShowVideo] = useState(false);
+  const BUTTON_DATA = data.button;
+  const logoImgURL = data.bannerLogoImg?.data?.attributes?.url;
+  const logoImgALT = data?.bannerLogoImg?.data?.attributes?.alternativeText;
+  const bgImage = data.bannerIllustrationBgImg?.data?.attributes?.url;
+  const bgImageALT = data.bannerIllustrationBgImg?.data?.attributes?.alternativeText;
+  const bannerVideo = data.bannerVideo?.data?.attributes?.url;
+  const videoPoster = data.videoPosterImg?.data?.attributes?.url;
+  const videoPosterALT = data.videoPosterImg?.data?.attributes?.alternativeText;
+  const Banner = () => (
+    <div className={`pl-[38px] py-8 rounded-3xl`} style={{ backgroundColor: data?.bgColor }}>
+      {logoImgURL && <div>
+        {logos(logoImgURL, logoImgALT ?? 'bannerLogoAlt')}
+      </div>}
+      <div className="pt-4">
+        <img src={bgImage} alt={bgImageALT} className="" />
+      </div>
+      {titleCTA()}
+
     </div>
   )
+  const titleCTA = () => (
+    <div className="pr-8 overflow-clip">
+      <Typography
+        as="p"
+        textStyle="h4"
+        className={data.isDarkMode ? 'text-neutral-0' : 'text-neutral-1000'}
+      >
+        {data.bannerTitle}
+      </Typography>
+      {BUTTON_DATA && BUTTON_DATA.url &&
+        <a href={BUTTON_DATA.url} className="flex">
+          <HDSButton
+            label={BUTTON_DATA?.text}
+            type="secondaryLink"
+            leftIconVariant="none"
+            rightIconVariant="none"
+            state="default"
+            size="md"
+            rightAnimatedArrow={true}
+            btnTextHoverClass={'text-blue-600'}
+            animatedHoverStroke={data.isDarkMode ? 'group-hover:stroke-neutral-0' : 'group-hover:stroke-blue-600'}
+            rightAnimatedArrowColor={data.isDarkMode ? '#ffff' : '#3970FD'}
+            className="mt-4"
+            btnTextColorClass={data.isDarkMode ? 'text-neutral-0' : 'text-blue-600'}
+          />
+        </a>}
+    </div>
+  )
+  const videoBanner = () => (
+    <div className="bg-neutral-0 p-4 border rounded-3xl border-neutral-200">
+      <div className="relative self-end rounded-2xl">
+        {showVideo ? (
+          <video
+            id="hero_vid"
+            controls
+            autoPlay
+            muted
+            playsInline
+            poster={videoPoster}
+            width="500"
+            height="500"
+            className="tb:w-full w-full rounded-2xl"
+            src={bannerVideo}
+          ></video>
+        ) : (
+          <div className="relative">
+            {videoPoster && (
+              <img src={videoPoster} alt={videoPosterALT} />
+            )}
+            {bannerVideo && (
+              <div
+                className="w-14 h-14 cursor-pointer video-play-btn before:bg-neutral-0 after:bg-neutral-0 rounded-full flex items-center justify-center bg-neutral-0 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl"
+                onClick={() => setShowVideo(true)}
+              >
+                <Triangle />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+      <div className="p-[22px] pt-8">
+
+        {titleCTA()}
+      </div>
+
+    </div>
+  )
+
+  if (props.bannerStyle === 'card') {
+    if (bannerVideo && videoPoster && videoPosterALT) {
+      return videoBanner();
+    }
+    if (bgImage && bgImageALT) {
+      return Banner();
+    }
+    return (
+      <div className="p-4 border border-neutral-200 rounded-3xl">
+        {titleCTA()}
+      </div>
+    )
+  }
+
+  if (props.bannerStyle === 'AnnouncementSM') {
+    return (
+
+      <AnnouncementSM
+        // bgColorClass="bg-neutral-0"
+        linkText={data.bannerTitle}
+        linkTextColorClass={data.isDarkMode ? 'text-neutral-0' : 'text-neutral-1000'}
+        linkUrl="#"
+        tagColor="purple"
+        tagText="Just Released"
+      />
+    )
+  }
+  if (props.bannerStyle === 'AnnouncementMd') {
+    return (
+
+      <AnnouncementMd
+        //bgColorClass="bg-neutral-0"
+        iconBgColor="bg-blue-200"
+        iconVariant="cube02"
+        linkText={data.bannerTitle}
+        linkTextColorClass={data.isDarkMode ? 'text-neutral-0' : 'text-neutral-1000'}
+        linkUrl="#"
+      />
+    )
+  }
+
+  return <></>
 }

package/src/styles/tailwind.css

@@ -1,7 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,200&display=swap');
 
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
-
 /*
 ! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com
 */
@@ -894,10 +892,6 @@ select{
   left: -60%;
 }
 
-.-right-1{
-  right: -0.25rem;
-}
-
 .-right-\[44px\]{
   right: -44px;
 }
@@ -934,10 +928,6 @@ select{
   left: 50%;
 }
 
-.left-10{
-  left: 2.5rem;
-}
-
 .left-14{
   left: 3.5rem;
 }
@@ -950,10 +940,6 @@ select{
   left: 1rem;
 }
 
-.left-40{
-  left: 10rem;
-}
-
 .left-\[0px\]{
   left: 0px;
 }
@@ -1022,10 +1008,6 @@ select{
   top: 1.25rem;
 }
 
-.top-8{
-  top: 2rem;
-}
-
 .top-\[112px\]{
   top: 112px;
 }
@@ -1295,10 +1277,6 @@ select{
   margin-left: -0.375rem;
 }
 
-.-ml-2{
-  margin-left: -0.5rem;
-}
-
 .-ml-3{
   margin-left: -0.75rem;
 }
@@ -1327,10 +1305,6 @@ select{
   margin-top: -1.5rem;
 }
 
-.-mt-\[200px\]{
-  margin-top: -200px;
-}
-
 .-mt-\[81px\]{
   margin-top: -81px;
 }
@@ -1483,10 +1457,6 @@ select{
   margin-top: 0.75rem;
 }
 
-.mt-3\.5{
-  margin-top: 0.875rem;
-}
-
 .mt-4{
   margin-top: 1rem;
 }
@@ -1530,13 +1500,6 @@ select{
   -webkit-line-clamp: 3;
 }
 
-.line-clamp-5{
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 5;
-}
-
 .block{
   display: block;
 }
@@ -1661,22 +1624,10 @@ select{
   height: 130px;
 }
 
-.h-\[179px\]{
-  height: 179px;
-}
-
-.h-\[18px\]{
-  height: 18px;
-}
-
 .h-\[2px\]{
   height: 2px;
 }
 
-.h-\[336px\]{
-  height: 336px;
-}
-
 .h-\[338px\]{
   height: 338px;
 }
@@ -1717,8 +1668,8 @@ select{
   height: 700px;
 }
 
-.h-\[800px\]{
-  height: 800px;
+.h-\[718px\]{
+  height: 718px;
 }
 
 .h-\[80px\]{
@@ -1753,36 +1704,24 @@ select{
   height: 100vh;
 }
 
-.max-h-\[144px\]{
-  max-height: 144px;
-}
-
 .max-h-\[181px\]{
   max-height: 181px;
 }
 
-.max-h-\[200px\]{
-  max-height: 200px;
-}
-
 .max-h-\[20px\]{
   max-height: 20px;
 }
 
-.max-h-\[25px\]{
-  max-height: 25px;
-}
-
 .max-h-\[26\.25\]{
   max-height: 26.25;
 }
 
-.max-h-\[40px\]{
-  max-height: 40px;
+.max-h-\[28px\]{
+  max-height: 28px;
 }
 
-.max-h-\[44px\]{
-  max-height: 44px;
+.max-h-\[40px\]{
+  max-height: 40px;
 }
 
 .max-h-\[530px\]{
@@ -1837,10 +1776,6 @@ select{
   min-height: 64px;
 }
 
-.min-h-\[742px\]{
-  min-height: 742px;
-}
-
 .\!w-full{
   width: 100% !important;
 }
@@ -1933,22 +1868,10 @@ select{
   width: 147px;
 }
 
-.w-\[14px\]{
-  width: 14px;
-}
-
 .w-\[15px\]{
   width: 15px;
 }
 
-.w-\[18px\]{
-  width: 18px;
-}
-
-.w-\[21px\]{
-  width: 21px;
-}
-
 .w-\[22\.5rem\]{
   width: 22.5rem;
 }
@@ -1957,10 +1880,6 @@ select{
   width: 220px;
 }
 
-.w-\[223px\]{
-  width: 223px;
-}
-
 .w-\[290px\]{
   width: 290px;
 }
@@ -1969,14 +1888,6 @@ select{
   width: 300px;
 }
 
-.w-\[400px\]{
-  width: 400px;
-}
-
-.w-\[45px\]{
-  width: 45px;
-}
-
 .w-\[580px\]{
   width: 580px;
 }
@@ -2051,10 +1962,6 @@ select{
   min-width: 130px;
 }
 
-.min-w-\[152px\]{
-  min-width: 152px;
-}
-
 .min-w-\[18rem\]{
   min-width: 18rem;
 }
@@ -2157,8 +2064,8 @@ select{
   max-width: 242px;
 }
 
-.max-w-\[270px\]{
-  max-width: 270px;
+.max-w-\[280px\]{
+  max-width: 280px;
 }
 
 .max-w-\[29\.18rem\]{
@@ -2193,10 +2100,6 @@ select{
   max-width: 430px;
 }
 
-.max-w-\[435px\]{
-  max-width: 435px;
-}
-
 .max-w-\[44\.44rem\]{
   max-width: 44.44rem;
 }
@@ -2205,10 +2108,6 @@ select{
   max-width: 460px;
 }
 
-.max-w-\[518px\]{
-  max-width: 518px;
-}
-
 .max-w-\[583px\]{
   max-width: 583px;
 }
@@ -2351,12 +2250,6 @@ select{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-rotate-90{
-  --tw-rotate: -90deg;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .rotate-45{
   --tw-rotate: 45deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2370,13 +2263,6 @@ select{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.scale-75{
-  --tw-scale-x: .75;
-  --tw-scale-y: .75;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .transform{
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2576,10 +2462,6 @@ select{
   gap: 1.5rem;
 }
 
-.gap-8{
-  gap: 2rem;
-}
-
 .gap-\[11px\]{
   gap: 11px;
 }
@@ -2869,11 +2751,6 @@ select{
   border-bottom-left-radius: 1.5rem;
 }
 
-.rounded-l-full{
-  border-top-left-radius: 9999px;
-  border-bottom-left-radius: 9999px;
-}
-
 .rounded-l-md{
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -3643,11 +3520,6 @@ select{
   background-color: rgb(0 35 43 / var(--tw-bg-opacity));
 }
 
-.bg-discord{
-  --tw-bg-opacity: 1;
-  background-color: rgb(88 101 242 / var(--tw-bg-opacity));
-}
-
 .bg-green-100{
   --tw-bg-opacity: 1;
   background-color: rgb(218 255 244 / var(--tw-bg-opacity));
@@ -6490,11 +6362,6 @@ select{
   padding-bottom: 2.5rem;
 }
 
-.py-11{
-  padding-top: 2.75rem;
-  padding-bottom: 2.75rem;
-}
-
 .py-12{
   padding-top: 3rem;
   padding-bottom: 3rem;
@@ -6560,11 +6427,6 @@ select{
   padding-bottom: 2px;
 }
 
-.py-\[3\.5px\]{
-  padding-top: 3.5px;
-  padding-bottom: 3.5px;
-}
-
 .pb-0{
   padding-bottom: 0px;
 }
@@ -6665,10 +6527,6 @@ select{
   padding-left: 2rem;
 }
 
-.pl-\[18px\]{
-  padding-left: 18px;
-}
-
 .pl-\[30px\]{
   padding-left: 30px;
 }
@@ -6717,10 +6575,6 @@ select{
   padding-right: 10px;
 }
 
-.pr-\[3px\]{
-  padding-right: 3px;
-}
-
 .pt-0{
   padding-top: 0px;
 }
@@ -6789,10 +6643,6 @@ select{
   text-indent: 2rem;
 }
 
-.font-firaCode{
-  font-family: Fira Code, monospace;
-}
-
 .font-petrona{
   font-family: Petrona, serif;
 }
@@ -7073,13 +6923,6 @@ select{
   font-weight: 400;
 }
 
-.text-hds-t-h3{
-  font-size: 1.875rem;
-  line-height: 2.5rem;
-  letter-spacing: -0.02em;
-  font-weight: 700;
-}
-
 .text-sm{
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -7759,12 +7602,6 @@ select{
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.brightness-0{
-  --tw-brightness: brightness(0);
-  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .filter{
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -7804,14 +7641,6 @@ select{
   transition-duration: 0s;
 }
 
-.duration-100{
-  transition-duration: 100ms;
-}
-
-.duration-1000{
-  transition-duration: 1000ms;
-}
-
 .duration-150{
   transition-duration: 150ms;
 }
@@ -7828,10 +7657,6 @@ select{
   transition-duration: 500ms;
 }
 
-.duration-700{
-  transition-duration: 700ms;
-}
-
 .duration-\[1500ms\]{
   transition-duration: 1500ms;
 }
@@ -7848,10 +7673,6 @@ select{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.ease-linear{
-  transition-timing-function: linear;
-}
-
 .ease-out{
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
@@ -7916,7 +7737,7 @@ select{
 
 @media (min-width: 905px) {
   .hds-hidden-tbl {
-    display: none !important;
+    display: none;
   }
 }
 
@@ -7926,79 +7747,6 @@ select{
   }
 }
 
-.video-play-btn {
-  z-index: 10;
-}
-
-.video-play-btn:before {
-  content: "";
-  position: absolute;
-  z-index: 0;
-  left: 50%;
-  top: 50%;
-  -webkit-transform: translateX(-50%) translateY(-50%);
-          transform: translateX(-50%) translateY(-50%);
-  display: block;
-  width: 56px;
-  height: 56px;
-  /* background: #3970FD; */
-  border-radius: 50%;
-  -webkit-animation: pulse-border 1500ms ease-out infinite;
-          animation: pulse-border 1500ms ease-out infinite;
-}
-
-.video-play-btn:after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  left: 50%;
-  top: 50%;
-  -webkit-transform: translateX(-50%) translateY(-50%);
-          transform: translateX(-50%) translateY(-50%);
-  display: block;
-  width: 56px;
-  height: 56px;
-  /* background: #3970FD; */
-  border-radius: 50%;
-  transition: all 200ms;
-}
-
-.video-play-btn>div {
-  z-index: 2;
-}
-
-.video-play-btn svg {
-  fill: #fff;
-}
-
-@-webkit-keyframes pulse-border {
-  0% {
-    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
-            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
-            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
-    opacity: 0;
-  }
-}
-
-@keyframes pulse-border {
-  0% {
-    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
-            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
-    opacity: 1;
-  }
-
-  100% {
-    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
-            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
-    opacity: 0;
-  }
-}
-
 .search-results {
   width: calc(100% - 150px);
 }
@@ -9109,30 +8857,6 @@ select{
   z-index: 6;
 }
 
-.placeholder\:bg-neutral-0::-webkit-input-placeholder{
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.placeholder\:bg-neutral-0::placeholder{
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.placeholder\:text-hds-m-body3c::-webkit-input-placeholder{
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  letter-spacing: ;
-  font-weight: 400;
-}
-
-.placeholder\:text-hds-m-body3c::placeholder{
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  letter-spacing: ;
-  font-weight: 400;
-}
-
 .placeholder\:text-neutral-500::-webkit-input-placeholder{
   --tw-text-opacity: 1;
   color: rgb(108 115 127 / var(--tw-text-opacity));
@@ -9244,12 +8968,6 @@ select{
   background-color: rgb(13 65 198 / var(--tw-bg-opacity));
 }
 
-.before\:bg-blue-800::before{
-  content: var(--tw-content);
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 40 142 / var(--tw-bg-opacity));
-}
-
 .before\:bg-gradient-to-r::before{
   content: var(--tw-content);
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -9390,12 +9108,6 @@ select{
   background-color: rgb(13 65 198 / var(--tw-bg-opacity));
 }
 
-.after\:bg-blue-800::after{
-  content: var(--tw-content);
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 40 142 / var(--tw-bg-opacity));
-}
-
 .after\:bg-gradient-to-r::after{
   content: var(--tw-content);
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -9415,10 +9127,6 @@ select{
   border-bottom-left-radius: 9999px;
 }
 
-.first\:pt-0:first-child{
-  padding-top: 0px;
-}
-
 .last\:mb-0:last-child{
   margin-bottom: 0px;
 }
@@ -9440,10 +9148,6 @@ select{
   padding-bottom: 0px;
 }
 
-.visited\:bg-neutral-0:visited{
-  background-color: rgb(255 255 255 );
-}
-
 .checked\:border-blue-600:checked{
   --tw-border-opacity: 1;
   border-color: rgb(30 86 227 / var(--tw-border-opacity));
@@ -9613,6 +9317,11 @@ select{
   border-color: rgb(13 65 198 / var(--tw-border-opacity));
 }
 
+.hover\:border-neutral-0:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .hover\:border-neutral-300:hover{
   --tw-border-opacity: 1;
   border-color: rgb(210 214 219 / var(--tw-border-opacity));
@@ -9622,10 +9331,6 @@ select{
   --tw-border-opacity: 0;
 }
 
-.hover\:border-opacity-100:hover{
-  --tw-border-opacity: 1;
-}
-
 .hover\:bg-amber-100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(255 243 212 / var(--tw-bg-opacity));
@@ -9861,10 +9566,6 @@ select{
   background-color: rgb(108 115 127 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-neutral-500\/30:hover{
-  background-color: rgb(108 115 127 / 0.3);
-}
-
 .hover\:bg-neutral-600:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(77 87 97 / var(--tw-bg-opacity));
@@ -10169,12 +9870,6 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:brightness-100:hover{
-  --tw-brightness: brightness(1);
-  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .hover\:transition:hover{
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -10308,6 +10003,11 @@ select{
   color: rgb(30 86 227 / var(--tw-text-opacity));
 }
 
+.focus\:text-blue-700:focus{
+  --tw-text-opacity: 1;
+  color: rgb(13 65 198 / var(--tw-text-opacity));
+}
+
 .focus\:text-neutral-0:focus{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -10439,11 +10139,6 @@ select{
   background-color: rgb(30 86 227 / var(--tw-bg-opacity));
 }
 
-.active\:bg-neutral-0:active{
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .active\:bg-neutral-200:active{
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -10487,11 +10182,6 @@ select{
   color: rgb(108 115 127 / var(--tw-text-opacity));
 }
 
-.disabled\:ring-neutral-200:disabled{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
-}
-
 .group\/btn:hover .group-hover\/btn\:visible{
   visibility: visible;
 }
@@ -10500,10 +10190,6 @@ select{
   visibility: visible;
 }
 
-.group\/eventListing:hover .group-hover\/eventListing\:visible{
-  visibility: visible;
-}
-
 .group\/icon:hover .group-hover\/icon\:visible{
   visibility: visible;
 }
@@ -10532,12 +10218,6 @@ select{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.group\/eventListing:hover .group-hover\/eventListing\:translate-x-\[0\.15rem\]{
-  --tw-translate-x: 0.15rem;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .group\/icon:hover .group-hover\/icon\:translate-x-1{
   --tw-translate-x: 0.25rem;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -10574,19 +10254,6 @@ select{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.group\/badge:hover .group-hover\/badge\:border-opacity-0{
-  --tw-border-opacity: 0;
-}
-
-.group\/eventListing:hover .group-hover\/eventListing\:border-opacity-0{
-  --tw-border-opacity: 0;
-}
-
-.group\/badge:hover .group-hover\/badge\:bg-blue-500{
-  --tw-bg-opacity: 1;
-  background-color: rgb(57 112 253 / var(--tw-bg-opacity));
-}
-
 .group\/card:hover .group-hover\/card\:bg-blue-200{
   --tw-bg-opacity: 1;
   background-color: rgb(223 232 255 / var(--tw-bg-opacity));
@@ -10597,11 +10264,6 @@ select{
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.group\/icon:hover .group-hover\/icon\:bg-blue-200{
-  --tw-bg-opacity: 1;
-  background-color: rgb(223 232 255 / var(--tw-bg-opacity));
-}
-
 .group:hover .group-hover\:bg-amber-300{
   --tw-bg-opacity: 1;
   background-color: rgb(255 206 112 / var(--tw-bg-opacity));
@@ -10673,10 +10335,6 @@ select{
   stroke: #3970FD;
 }
 
-.group\/icon:hover .group-hover\/icon\:stroke-blue-600{
-  stroke: #1E56E3;
-}
-
 .group:hover .group-hover\:stroke-blue-500{
   stroke: #3970FD;
 }
@@ -10693,11 +10351,6 @@ select{
   stroke: #111927;
 }
 
-.group\/badge:hover .group-hover\/badge\:text-neutral-0{
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 .group\/btn:hover .group-hover\/btn\:text-blue-600{
   --tw-text-opacity: 1;
   color: rgb(30 86 227 / var(--tw-text-opacity));
@@ -10718,24 +10371,11 @@ select{
   color: rgb(0 6 21 / var(--tw-text-opacity));
 }
 
-.group:hover .group-hover\:text-neutral-0{
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 .group:hover .group-hover\:text-neutral-1000{
   --tw-text-opacity: 1;
   color: rgb(0 6 21 / var(--tw-text-opacity));
 }
 
-.group\/img:hover .group-hover\/img\:opacity-0{
-  opacity: 0;
-}
-
-.group\/img:hover .group-hover\/img\:opacity-100{
-  opacity: 1;
-}
-
 .group\/sc:hover .group-hover\/sc\:opacity-100{
   opacity: 1;
 }
@@ -10750,36 +10390,16 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.group:hover .group-hover\:brightness-100{
-  --tw-brightness: brightness(1);
-  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.group\/eventListing:hover .group-hover\/eventListing\:transition-all{
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .group:hover .group-hover\:transition-all{
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
-.group\/eventListing:hover .group-hover\/eventListing\:delay-100{
-  transition-delay: 100ms;
-}
-
 .group:hover .group-hover\:delay-100{
   transition-delay: 100ms;
 }
 
-.group\/eventListing:hover .group-hover\/eventListing\:duration-300{
-  transition-duration: 300ms;
-}
-
 .group:hover .group-hover\:duration-100{
   transition-duration: 100ms;
 }
@@ -10974,10 +10594,6 @@ select{
     margin-top: 2.5rem;
   }
 
-  .tb\:mt-12{
-    margin-top: 3rem;
-  }
-
   .tb\:mt-4{
     margin-top: 1rem;
   }
@@ -11090,8 +10706,8 @@ select{
     min-width: 150px;
   }
 
-  .tb\:min-w-\[186px\]{
-    min-width: 186px;
+  .tb\:min-w-\[182px\]{
+    min-width: 182px;
   }
 
   .tb\:min-w-\[18rem\]{
@@ -11142,10 +10758,6 @@ select{
     max-width: 393px;
   }
 
-  .tb\:max-w-\[420px\]{
-    max-width: 420px;
-  }
-
   .tb\:max-w-\[480px\]{
     max-width: 480px;
   }
@@ -11256,18 +10868,6 @@ select{
     row-gap: 4rem;
   }
 
-  .tb\:divide-x > :not([hidden]) ~ :not([hidden]){
-    --tw-divide-x-reverse: 0;
-    border-right-width: calc(1px * var(--tw-divide-x-reverse));
-    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
-  }
-
-  .tb\:divide-y-0 > :not([hidden]) ~ :not([hidden]){
-    --tw-divide-y-reverse: 0;
-    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
-    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
-  }
-
   .tb\:rounded-3xl{
     border-radius: 1.5rem;
   }
@@ -11368,26 +10968,11 @@ select{
     padding-right: 1rem;
   }
 
-  .tb\:px-6{
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
   .tb\:px-8{
     padding-left: 2rem;
     padding-right: 2rem;
   }
 
-  .tb\:py-0{
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
-  .tb\:py-1{
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-  }
-
   .tb\:py-12{
     padding-top: 3rem;
     padding-bottom: 3rem;
@@ -11431,10 +11016,6 @@ select{
     padding-right: 1rem;
   }
 
-  .tb\:pr-6{
-    padding-right: 1.5rem;
-  }
-
   .tb\:pt-0{
     padding-top: 0px;
   }
@@ -11742,20 +11323,6 @@ select{
     --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-
-  .placeholder\:tb\:text-hds-t-body3c::-webkit-input-placeholder{
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    letter-spacing: ;
-    font-weight: 400;
-  }
-
-  .placeholder\:tb\:text-hds-t-body3c::placeholder{
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    letter-spacing: ;
-    font-weight: 400;
-  }
 }
 
 @media (min-width: 640px){
@@ -11932,10 +11499,6 @@ select{
     justify-content: flex-start;
   }
 
-  .tb-m\:justify-center{
-    justify-content: center;
-  }
-
   .tb-m\:gap-16{
     gap: 4rem;
   }
@@ -12017,34 +11580,14 @@ select{
     display: none;
   }
 
-  .tb-l\:h-12{
-    height: 3rem;
-  }
-
-  .tb-l\:h-\[124px\]{
-    height: 124px;
-  }
-
   .tb-l\:h-full{
     height: 100%;
   }
 
-  .tb-l\:min-h-\[518px\]{
-    min-height: 518px;
-  }
-
   .tb-l\:w-1\/2{
     width: 50%;
   }
 
-  .tb-l\:w-12{
-    width: 3rem;
-  }
-
-  .tb-l\:w-\[170px\]{
-    width: 170px;
-  }
-
   .tb-l\:w-\[38\%\]{
     width: 38%;
   }
@@ -12083,10 +11626,6 @@ select{
     min-width: 700px;
   }
 
-  .tb-l\:max-w-7xl{
-    max-width: 80rem;
-  }
-
   .tb-l\:max-w-\[1240px\]{
     max-width: 1240px;
   }
@@ -12280,8 +11819,8 @@ select{
     padding-top: 0px;
   }
 
-  .tb-l\:pt-14{
-    padding-top: 3.5rem;
+  .tb-l\:pt-20{
+    padding-top: 5rem;
   }
 
   .tb-l\:text-left{
@@ -12293,16 +11832,6 @@ select{
   }
 }
 
-@media (min-width: 970px){
-  .tb-xl\:w-\[175px\]{
-    width: 175px;
-  }
-
-  .tb-xl\:w-\[223px\]{
-    width: 223px;
-  }
-}
-
 @media (min-width: 1024px){
   .lg\:flex{
     display: flex;
@@ -12377,8 +11906,8 @@ select{
     max-width: 540px;
   }
 
-  .db-s\:max-w-\[650px\]{
-    max-width: 650px;
+  .db-s\:max-w-\[717px\]{
+    max-width: 717px;
   }
 
   .db-s\:flex-row{
@@ -12455,10 +11984,6 @@ select{
     margin-top: 0px;
   }
 
-  .db\:mt-16{
-    margin-top: 4rem;
-  }
-
   .db\:block{
     display: block;
   }
@@ -12587,10 +12112,6 @@ select{
     row-gap: 0.5rem;
   }
 
-  .db\:overflow-visible{
-    overflow: visible;
-  }
-
   .db\:rounded-3xl{
     border-radius: 1.5rem;
   }
@@ -12944,20 +12465,6 @@ select{
     letter-spacing: -0.01em;
     font-weight: 400;
   }
-
-  .placeholder\:db\:text-hds-d-body3c::-webkit-input-placeholder{
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    letter-spacing: ;
-    font-weight: 400;
-  }
-
-  .placeholder\:db\:text-hds-d-body3c::placeholder{
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    letter-spacing: ;
-    font-weight: 400;
-  }
 }
 
 .\[\&\>\*\]\:mb-8>*{
@@ -12972,44 +12479,15 @@ select{
   display: inline-block;
 }
 
-.\[\&\>p\>a\:hover\]\:text-blue-800>p>a:hover{
-  --tw-text-opacity: 1;
-  color: rgb(0 40 142 / var(--tw-text-opacity));
-}
-
 .\[\&\>p\>a\]\:text-blue-600>p>a{
   --tw-text-opacity: 1;
   color: rgb(30 86 227 / var(--tw-text-opacity));
 }
 
-.\[\&\>p\>img\:nth-child\(2\)\]\:max-w-\[140px\]>p>img:nth-child(2){
-  max-width: 140px;
-}
-
-.\[\&\>p\>img\]\:mt-4>p>img{
-  margin-top: 1rem;
-}
-
-.\[\&\>p\>img\]\:w-full>p>img{
-  width: 100%;
-}
-
-.\[\&\>p\>img\]\:max-w-\[420px\]>p>img{
-  max-width: 420px;
-}
-
-.\[\&\>p\]\:pb-1>p{
-  padding-bottom: 0.25rem;
-}
-
 .\[\&\>p\]\:pb-2>p{
   padding-bottom: 0.5rem;
 }
 
-.\[\&\>p\]\:pb-4>p{
-  padding-bottom: 1rem;
-}
-
 .\[\&\>p\]\:text-neutral-600>p{
   --tw-text-opacity: 1;
   color: rgb(77 87 97 / var(--tw-text-opacity));
@@ -13031,28 +12509,14 @@ select{
   fill: #4D5761;
 }
 
-.\[\&\>ul\>li\>a\]\:text-blue-600>ul>li>a{
-  --tw-text-opacity: 1;
-  color: rgb(30 86 227 / var(--tw-text-opacity));
-}
-
 .\[\&\>ul\>li\]\:list-disc>ul>li{
   list-style-type: disc;
 }
 
-.\[\&\>ul\>li\]\:pb-1>ul>li{
-  padding-bottom: 0.25rem;
-}
-
 .\[\&\>ul\>li\]\:pb-2>ul>li{
   padding-bottom: 0.5rem;
 }
 
-.\[\&\>ul\>li\]\:text-neutral-600>ul>li{
-  --tw-text-opacity: 1;
-  color: rgb(77 87 97 / var(--tw-text-opacity));
-}
-
 .\[\&\>ul\>li\]\:last\:pb-0:last-child>ul>li{
   padding-bottom: 0px;
 }

package/README.md

@@ -1,82 +0,0 @@
-# Hasura Design System
-## **Integrate the hds-web in your project**
-<br> 
-
-Node version: 18.12.1
-React Version > 18
- 
-### Steps:
-`Step 1: npm install hds-web`
-
-`Step 2: In tailwind.config.js file have the following preset:`
-
-
-
-    module.exports = {
-    presets: [
-        require('hds-web/tailwind.config.js'),
-    ],
-    content: ["./src/**/*.{html,js}"],
-    theme: {
-        extend: {},
-    },
-    plugins: [],
-    }
-
-
-`Step 3: In you main css file:` 
-	
-	@import 'hds-web/dist/index.css';
-
-</br>
-
-## Storybook local setup:
-<br> Check node version 18.16.2 and run
-	
- 	npm install
-
-	npm run storybook 
-
-	open port 6006
-
-</br>
-
-## Contribution:
-
-
-- Pull the latest storyboook changes
-- Add your component in the library - `/src/HDS/components` and add the component story - `/src/stories` .
-- Build library ( locally or pipeline )
-- Publish package
-
-<br>
-
-
-## Chromatic release
-Pull the latest changes from main branch in your branch,
-Merge your branch to `release-chromatic`
-<br>
-
-## Publish
-
-The package can be published locally or via the pipeline. 
-<br> 
-<br>
-### For Local:
-	
->Note: The user must be registered as **Hasura**
-
-#### Run the below set of commands:
-
-	npm run build-lib
-	npm publish
-
-#### Note before publishing:	
->Make sure the build is successful with no error<br>
-All the components should be exported properly,<br>
-The branch is updated with the latest changes in main branch <br>
-The package version is upgraded before publishing<br>
-
-	
-
-</br>