@sikka/hawa 0.19.28-next → 0.19.29-next

package/dist/index.css

@@ -1428,6 +1428,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-\[48px\] {
   height: 48px;
 }
+.hawa-h-\[70dvh\] {
+  height: 70dvh;
+}
 .hawa-h-\[72px\] {
   height: 72px;
 }
@@ -1879,6 +1882,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
+.hawa-grid-cols-\[1fr_repeat\(3\,_minmax\(0\,_1fr\)\)\] {
+  grid-template-columns: 1fr repeat(3, minmax(0, 1fr));
+}
 .hawa-flex-row {
   flex-direction: row;
 }
@@ -4258,10 +4264,6 @@ body {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .md\:hawa-grid-cols-\[1fr_repeat\(3\2c _minmax\(0\2c _1fr\)\)\] {
-    grid-template-columns: 1fr repeat(3, minmax(0, 1fr));
-  }
-
   .md\:hawa-flex-row {
     flex-direction: row;
   }

package/dist/index.js

@@ -11126,7 +11126,7 @@ var ComparingPlans = (props) => {
       )
     )
   );
-  return /* @__PURE__ */ import_react70.default.createElement("div", { id: "detailed-pricing", className: "hawa-w-full hawa-overflow-x-auto" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ import_react70.default.createElement(
+  return /* @__PURE__ */ import_react70.default.createElement("div", { id: "detailed-pricing", className: "hawa-w-full " }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-sticky hawa-top-4 hawa-z-20" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ import_react70.default.createElement(
     Radio,
     {
       design: "tabs",
@@ -11154,25 +11154,23 @@ var ComparingPlans = (props) => {
         }
       }
     }
-  )), /* @__PURE__ */ import_react70.default.createElement("div", { className: " hawa-overflow-hidden hawa-rounded" }, /* @__PURE__ */ import_react70.default.createElement(
+  )), /* @__PURE__ */ import_react70.default.createElement(
     "div",
     {
       className: cn(
-        "hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border-b hawa-border-t hawa-p-4 hawa-text-sm hawa-font-medium",
-        "hawa-bg-primary/5"
-        // "hawa-border-gray-200 hawa-bg-gray-100 hawa-text-gray-900",
-        // "dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-white"
+        "hawa-sticky hawa-top-0 hawa-z-10 hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border-b hawa-border-t hawa-p-4 hawa-text-sm hawa-font-medium hawa-rounded-t",
+        "hawa-bg-primary-foreground"
       )
     },
     /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-items-center" }),
     props.plans.map((plan, i) => /* @__PURE__ */ import_react70.default.createElement("div", { key: i, className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-md hawa-font-bold " }, plan.texts.title), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-md  hawa-font-normal hawa-text-muted-foreground " }, plan.texts.subtitle)), /* @__PURE__ */ import_react70.default.createElement("div", { className: " hawa-flex hawa-items-baseline  " }, /* @__PURE__ */ import_react70.default.createElement(import_react70.default.Fragment, null, /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, plan.price), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ import_react70.default.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal " }, "/ ", plan.texts.cycleText))))
-  ), uniqueFeatures.map((featureText, featureIndex) => {
+  )), /* @__PURE__ */ import_react70.default.createElement(ScrollArea, { className: "hawa-h-[70dvh] hawa-rounded" }, uniqueFeatures.map((featureText, featureIndex) => {
     var _a, _b;
     return /* @__PURE__ */ import_react70.default.createElement(
       "div",
       {
         key: featureIndex,
-        className: "hawa-grid hawa-grid-cols-1 md:hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-border-b hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white dark:hawa-border-gray-700"
+        className: "hawa-grid  hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-border-b hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white dark:hawa-border-gray-700"
       },
       /* @__PURE__ */ import_react70.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-foreground" }, featureText, props.plans.some(
         (plan) => plan.features.some(

package/dist/index.mjs

@@ -10910,7 +10910,7 @@ var ComparingPlans = (props) => {
       )
     )
   );
-  return /* @__PURE__ */ React96.createElement("div", { id: "detailed-pricing", className: "hawa-w-full hawa-overflow-x-auto" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React96.createElement("div", { id: "detailed-pricing", className: "hawa-w-full " }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-sticky hawa-top-4 hawa-z-20" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-mb-2 hawa-flex hawa-w-full hawa-justify-between" }, /* @__PURE__ */ React96.createElement(
     Radio,
     {
       design: "tabs",
@@ -10938,25 +10938,23 @@ var ComparingPlans = (props) => {
         }
       }
     }
-  )), /* @__PURE__ */ React96.createElement("div", { className: " hawa-overflow-hidden hawa-rounded" }, /* @__PURE__ */ React96.createElement(
+  )), /* @__PURE__ */ React96.createElement(
     "div",
     {
       className: cn(
-        "hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border-b hawa-border-t hawa-p-4 hawa-text-sm hawa-font-medium",
-        "hawa-bg-primary/5"
-        // "hawa-border-gray-200 hawa-bg-gray-100 hawa-text-gray-900",
-        // "dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-white"
+        "hawa-sticky hawa-top-0 hawa-z-10 hawa-grid hawa-grid-cols-4 hawa-gap-x-2 hawa-border-b hawa-border-t hawa-p-4 hawa-text-sm hawa-font-medium hawa-rounded-t",
+        "hawa-bg-primary-foreground"
       )
     },
     /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-items-center" }),
     props.plans.map((plan, i) => /* @__PURE__ */ React96.createElement("div", { key: i, className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-md hawa-font-bold " }, plan.texts.title), /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-md  hawa-font-normal hawa-text-muted-foreground " }, plan.texts.subtitle)), /* @__PURE__ */ React96.createElement("div", { className: " hawa-flex hawa-items-baseline  " }, /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement("span", { className: "hawa-text-5xl hawa-font-extrabold hawa-tracking-tight" }, plan.price), /* @__PURE__ */ React96.createElement("span", { className: "hawa-mx-1 hawa-text-sm hawa-font-semibold" }, plan.texts.currencyText)), /* @__PURE__ */ React96.createElement("span", { className: "hawa-ml-1 hawa-text-xl hawa-font-normal " }, "/ ", plan.texts.cycleText))))
-  ), uniqueFeatures.map((featureText, featureIndex) => {
+  )), /* @__PURE__ */ React96.createElement(ScrollArea, { className: "hawa-h-[70dvh] hawa-rounded" }, uniqueFeatures.map((featureText, featureIndex) => {
     var _a, _b;
     return /* @__PURE__ */ React96.createElement(
       "div",
       {
         key: featureIndex,
-        className: "hawa-grid hawa-grid-cols-1 md:hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-border-b hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white dark:hawa-border-gray-700"
+        className: "hawa-grid  hawa-grid-cols-[1fr_repeat(3,_minmax(0,_1fr))] hawa-gap-x-16 hawa-border-b hawa-border-gray-200 hawa-px-4 hawa-py-5 hawa-text-sm hawa-text-gray-700 dark:text-white dark:hawa-border-gray-700"
       },
       /* @__PURE__ */ React96.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-foreground" }, featureText, props.plans.some(
         (plan) => plan.features.some(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.19.28-next",
+  "version": "0.19.29-next",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",