@sikka/hawa 0.30.24-next → 0.30.26-next

package/dist/breadcrumb/index.mjs

@@ -2,26 +2,50 @@
 
 // elements/breadcrumb/Breadcrumb.tsx
 import React from "react";
+
+// util/index.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// elements/breadcrumb/Breadcrumb.tsx
 var Breadcrumb = ({
   breadcrumbLinks,
-  separator = ">"
+  separator = ">",
+  size = "normal"
 }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm" }, breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ React.createElement(
+  const textStyles = {
+    normal: "",
+    small: "hawa-text-sm",
+    xs: "hawa-text-xs"
+  };
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
-      key: index,
-      className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2"
+      className: cn(
+        "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm",
+        textStyles[size]
+      )
     },
-    /* @__PURE__ */ React.createElement(
-      "a",
+    breadcrumbLinks.map((singleBreadcrumbLink, index) => /* @__PURE__ */ React.createElement(
+      "div",
       {
-        href: singleBreadcrumbLink.href,
-        className: index + 1 === breadcrumbLinks.length ? "hawa-pointer-events-none" : "hawa-underline-offset-4 hawa-transition-all hover:hawa-text-primary hover:hawa-underline hover:hawa-decoration-2"
+        key: index,
+        className: "hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2"
       },
-      singleBreadcrumbLink.label
-    ),
-    index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ React.createElement("div", null, separator) : /* @__PURE__ */ React.createElement("div", null, separator) : null
-  )));
+      /* @__PURE__ */ React.createElement(
+        "a",
+        {
+          href: singleBreadcrumbLink.href,
+          className: index + 1 === breadcrumbLinks.length ? "hawa-pointer-events-none" : "hawa-underline-offset-4 hawa-transition-all hover:hawa-text-primary hover:hawa-underline hover:hawa-decoration-2"
+        },
+        singleBreadcrumbLink.label
+      ),
+      index != breadcrumbLinks.length - 1 ? typeof separator == "string" ? /* @__PURE__ */ React.createElement("div", null, separator) : /* @__PURE__ */ React.createElement("div", null, separator) : null
+    ))
+  );
 };
 export {
   Breadcrumb

package/dist/breadcrumb/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../elements/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { FC, ReactNode } from \"react\";\n\ninterface BCTypes {\n  /** The array of crumbs, each one with a label and a href link */\n  breadcrumbLinks: { label: string; href: string }[];\n  /** The separator between each crumb, can be character or React Node. The default is \">\" */\n  separator?: string | ReactNode;\n}\n\nexport const Breadcrumb: FC<BCTypes> = ({\n  breadcrumbLinks,\n  separator = \">\"\n}) => {\n  return (\n    <div className=\"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm\">\n      {breadcrumbLinks.map((singleBreadcrumbLink, index) => (\n        <div\n          key={index}\n          className=\"hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2\"\n        >\n          <a\n            href={singleBreadcrumbLink.href}\n            className={\n              index + 1 === breadcrumbLinks.length\n                ? \"hawa-pointer-events-none\"\n                : \"hawa-underline-offset-4 hawa-transition-all hover:hawa-text-primary hover:hawa-underline hover:hawa-decoration-2\"\n            }\n          >\n            {singleBreadcrumbLink.label}\n          </a>\n          {index != breadcrumbLinks.length - 1 ? (\n            typeof separator == \"string\" ? (\n              <div>{separator}</div>\n            ) : (\n              <div>{separator}</div>\n            )\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,WAA8B;AAS9B,IAAM,aAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AACd,MAAM;AACJ,SACE,oCAAC,SAAI,WAAU,uEACZ,gBAAgB,IAAI,CAAC,sBAAsB,UAC1C;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA;AAAA,IAEV;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,qBAAqB;AAAA,QAC3B,WACE,QAAQ,MAAM,gBAAgB,SAC1B,6BACA;AAAA;AAAA,MAGL,qBAAqB;AAAA,IACxB;AAAA,IACC,SAAS,gBAAgB,SAAS,IACjC,OAAO,aAAa,WAClB,oCAAC,aAAK,SAAU,IAEhB,oCAAC,aAAK,SAAU,IAEhB;AAAA,EACN,CACD,CACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../elements/breadcrumb/Breadcrumb.tsx","../../util/index.ts"],"sourcesContent":["import React, { FC, ReactNode } from \"react\";\n\nimport { cn } from \"@util/index\";\n\nexport type BreadcrumbItemProps = {\n  label: string;\n  href: string;\n};\ninterface BCTypes {\n  /** The array of crumbs, each one with a label and a href link */\n  breadcrumbLinks: BreadcrumbItemProps[];\n  /** The separator between each crumb, can be character or React Node. The default is \">\" */\n  separator?: string | ReactNode;\n  size?: \"normal\" | \"small\" | \"xs\";\n}\n\nexport const Breadcrumb: FC<BCTypes> = ({\n  breadcrumbLinks,\n  separator = \">\",\n  size = \"normal\",\n}) => {\n  const textStyles = {\n    normal: \"\",\n    small: \"hawa-text-sm\",\n    xs: \"hawa-text-xs\",\n  };\n  return (\n    <div\n      className={cn(\n        \"hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm\",\n        textStyles[size],\n      )}\n    >\n      {breadcrumbLinks.map((singleBreadcrumbLink, index) => (\n        <div\n          key={index}\n          className=\"hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2\"\n        >\n          <a\n            href={singleBreadcrumbLink.href}\n            className={\n              index + 1 === breadcrumbLinks.length\n                ? \"hawa-pointer-events-none\"\n                : \"hawa-underline-offset-4 hawa-transition-all hover:hawa-text-primary hover:hawa-underline hover:hawa-decoration-2\"\n            }\n          >\n            {singleBreadcrumbLink.label}\n          </a>\n          {index != breadcrumbLinks.length - 1 ? (\n            typeof separator == \"string\" ? (\n              <div>{separator}</div>\n            ) : (\n              <div>{separator}</div>\n            )\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n};\n","import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\ntype Palette = {\n  name: string;\n  colors: {\n    [key: number]: string;\n  };\n};\ntype Rgb = {\n  r: number;\n  g: number;\n  b: number;\n};\nfunction hexToRgb(hex: string): Rgb | null {\n  const sanitizedHex = hex.replaceAll(\"##\", \"#\");\n  const colorParts = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(\n    sanitizedHex\n  );\n\n  if (!colorParts) {\n    return null;\n  }\n\n  const [, r, g, b] = colorParts;\n\n  return {\n    r: parseInt(r, 16),\n    g: parseInt(g, 16),\n    b: parseInt(b, 16)\n  } as Rgb;\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport function getTextColor(color: string): \"#FFF\" | \"#333\" {\n  const rgbColor = hexToRgb(color);\n\n  if (!rgbColor) {\n    return \"#333\";\n  }\n\n  const { r, g, b } = rgbColor;\n  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n\n  return luma < 120 ? \"#FFF\" : \"#333\";\n}\n\nfunction lighten(hex: string, intensity: number): string {\n  const color = hexToRgb(`#${hex}`);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r + (255 - color.r) * intensity);\n  const g = Math.round(color.g + (255 - color.g) * intensity);\n  const b = Math.round(color.b + (255 - color.b) * intensity);\n\n  return rgbToHex(r, g, b);\n}\n\nfunction darken(hex: string, intensity: number): string {\n  const color = hexToRgb(hex);\n\n  if (!color) {\n    return \"\";\n  }\n\n  const r = Math.round(color.r * intensity);\n  const g = Math.round(color.g * intensity);\n  const b = Math.round(color.b * intensity);\n\n  return rgbToHex(r, g, b);\n}\nconst parseColor = (color: any) => {\n  if (color.startsWith(\"#\")) {\n    // Convert hex to RGB\n    let r = parseInt(color.slice(1, 3), 16);\n    let g = parseInt(color.slice(3, 5), 16);\n    let b = parseInt(color.slice(5, 7), 16);\n    return [r, g, b];\n  } else if (color.startsWith(\"rgb\")) {\n    // Extract RGB values from rgb() format\n    return color.match(/\\d+/g).map(Number);\n  }\n  // Default to white if format is unrecognized\n  return [255, 255, 255];\n};\nexport const calculateLuminance = (color: any) => {\n  const [r, g, b] = parseColor(color)?.map((c: any) => {\n    c /= 255;\n    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nfunction getPallette(baseColor: string): Palette {\n  const name = baseColor;\n\n  const response: Palette = {\n    name,\n    colors: {\n      500: `#${baseColor}`.replace(\"##\", \"#\")\n    }\n  };\n\n  const intensityMap: {\n    [key: number]: number;\n  } = {\n    50: 0.95,\n    100: 0.9,\n    200: 0.75,\n    300: 0.6,\n    400: 0.3,\n    600: 0.9,\n    700: 0.75,\n    800: 0.6,\n    900: 0.49\n  };\n\n  [50, 100, 200, 300, 400].forEach((level) => {\n    response.colors[level] = lighten(baseColor, intensityMap[level]);\n  });\n  [600, 700, 800, 900].forEach((level) => {\n    response.colors[level] = darken(baseColor, intensityMap[level]);\n  });\n\n  return response as Palette;\n}\n\nexport { getPallette };\n\n// const hexToRgb = (hex) => {\n//   let d = hex?.split(\"#\")[1];\n//   var aRgbHex = d?.match(/.{1,2}/g);\n//   var aRgb = [\n//     parseInt(aRgbHex[0], 16),\n//     parseInt(aRgbHex[1], 16),\n//     parseInt(aRgbHex[2], 16)\n//   ];\n//   return aRgb;\n// };\n// const getTextColor = (backColor) => {\n//   let rgbArray = hexToRgb(backColor);\n//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {\n//     return \"#000000\";\n//   } else {\n//     return \"#ffffff\";\n//   }\n// };\n// const replaceAt = function (string, index, replacement) {\n//   // if (replacement == \"\" || replacement == \" \") {\n//   //   return (\n//   //     string.substring(0, index) +\n//   //     string.substring(index + replacement.length )\n//   //   );\n//   // }\n//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)\n//   return replaced\n// };\n\n// export { hexToRgb, getTextColor, replaceAt };\n"],"mappings":";;;AAAA,OAAO,WAA8B;;;ACArC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADWO,IAAM,aAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AACT,MAAM;AACJ,QAAM,aAAa;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,IAAI;AAAA,EACN;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,IAAI;AAAA,MACjB;AAAA;AAAA,IAEC,gBAAgB,IAAI,CAAC,sBAAsB,UAC1C;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA;AAAA,MAEV;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,qBAAqB;AAAA,UAC3B,WACE,QAAQ,MAAM,gBAAgB,SAC1B,6BACA;AAAA;AAAA,QAGL,qBAAqB;AAAA,MACxB;AAAA,MACC,SAAS,gBAAgB,SAAS,IACjC,OAAO,aAAa,WAClB,oCAAC,aAAK,SAAU,IAEhB,oCAAC,aAAK,SAAU,IAEhB;AAAA,IACN,CACD;AAAA,EACH;AAEJ;","names":[]}

package/dist/{chunk-7LAUVLVZ.mjs → chunk-QDRFTC7W.mjs}

@@ -2811,6 +2811,8 @@ var Popover = ({
   ));
 };
 var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverPortal = PopoverPrimitive.Portal;
+var PopoverRoot = PopoverPrimitive.Root;
 
 // elements/scrollArea/ScrollArea.tsx
 import * as React12 from "react";
@@ -2853,9 +2855,46 @@ var ScrollBar = React12.forwardRef(({ className, orientation = "vertical", ...pr
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // elements/tabs/Tabs.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { tv } from "tailwind-variants";
+
+// elements/floatBox/FloatBox.tsx
+import * as React13 from "react";
+var FloatBox = ({
+  className,
+  open,
+  side = "bottom",
+  sideOffset = 40,
+  ...props
+}) => {
+  let widthStyles = {
+    trigger: "var(--radix-popover-trigger-width)",
+    default: "auto"
+  };
+  let sideOffsetStyles = {
+    bottom: { top: sideOffset },
+    top: { bottom: sideOffset },
+    right: { left: sideOffset },
+    left: { right: sideOffset }
+  };
+  return /* @__PURE__ */ React13.createElement(
+    "div",
+    {
+      className: cn(
+        "data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
+        sideOffsetStyles[side],
+        className
+      ),
+      style: { ...sideOffsetStyles[side] },
+      "data-side": side,
+      "data-floatbox-state": open ? "open" : "closed"
+    },
+    props.children
+  );
+};
+
+// elements/tabs/Tabs.tsx
 var tabsListVariant = tv({
   base: "",
   variants: {
@@ -2864,10 +2903,7 @@ var tabsListVariant = tv({
       underlined: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
       underlined_tabs: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
     },
-    orientation: {
-      horizontal: "",
-      vertical: ""
-    }
+    orientation: { horizontal: "", vertical: "" }
   },
   compoundVariants: [
     {
@@ -2881,10 +2917,7 @@ var tabsListVariant = tv({
       class: "hawa-border-b-2 hawa-border-b-primary"
     }
   ],
-  defaultVariants: {
-    variant: "default",
-    orientation: "horizontal"
-  }
+  defaultVariants: { variant: "default", orientation: "horizontal" }
 });
 var tabsTriggerVariant = tv({
   base: "",
@@ -2894,10 +2927,7 @@ var tabsTriggerVariant = tv({
       underlined: "hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
       underlined_tabs: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10"
     },
-    orientation: {
-      horizontal: "",
-      vertical: ""
-    }
+    orientation: { horizontal: "", vertical: "" }
   },
   compoundVariants: [
     {
@@ -2921,13 +2951,10 @@ var tabsTriggerVariant = tv({
       class: "hawa-rounded-e-none"
     }
   ],
-  defaultVariants: {
-    variant: "default",
-    orientation: "horizontal"
-  }
+  defaultVariants: { variant: "default", orientation: "horizontal" }
 });
-var TabsContext = React13.createContext({ orientation: "horizontal", variant: "default" });
-var Tabs = React13.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React13.createElement(
+var TabsContext = React14.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React14.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React14.createElement(
   TabsPrimitive.Root,
   {
     ref,
@@ -2938,12 +2965,11 @@ var Tabs = React13.forwardRef(({ className, orientation, variant = "default", ..
     ),
     ...props
   },
-  /* @__PURE__ */ React13.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+  /* @__PURE__ */ React14.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
 ));
-Tabs.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React13.forwardRef(({ className, ...props }, ref) => {
-  const { orientation, variant } = React13.useContext(TabsContext);
-  return /* @__PURE__ */ React13.createElement(
+var TabsList = React14.forwardRef(({ className, ...props }, ref) => {
+  const { orientation, variant } = React14.useContext(TabsContext);
+  return /* @__PURE__ */ React14.createElement(
     TabsPrimitive.List,
     {
       ref,
@@ -2956,22 +2982,25 @@ var TabsList = React13.forwardRef(({ className, ...props }, ref) => {
     }
   );
 });
-TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React13.forwardRef(({ className, chipProps, ...props }, ref) => {
-  const { orientation, variant } = React13.useContext(TabsContext);
-  return /* @__PURE__ */ React13.createElement(
+var TabsTrigger = React14.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React14.useContext(TabsContext);
+  return /* @__PURE__ */ React14.createElement(
     TabsPrimitive.Trigger,
     {
       ref,
-      className: cn(tabsTriggerVariant({ variant, orientation }), className),
+      className: cn(
+        tabsTriggerVariant({ variant, orientation }),
+        "hawa-relative",
+        className
+      ),
       ...props
     },
     props.children,
-    chipProps && /* @__PURE__ */ React13.createElement(Chip, { ...chipProps })
+    chipProps && /* @__PURE__ */ React14.createElement(Chip, { ...chipProps }),
+    /* @__PURE__ */ React14.createElement(FloatBox, { open: props.showPopover }, props.popoverContent)
   );
 });
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React13.createElement(
+var TabsContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React14.createElement(
   TabsPrimitive.Content,
   {
     ref,
@@ -2982,15 +3011,18 @@ var TabsContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
+Tabs.displayName = TabsPrimitive.Root.displayName;
+TabsList.displayName = TabsPrimitive.List.displayName;
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // elements/separator/Separator.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 var Separator = ({
   className,
   orientation = "horizontal",
   ...props
-}) => /* @__PURE__ */ React14.createElement(
+}) => /* @__PURE__ */ React15.createElement(
   "div",
   {
     className: cn(
@@ -3003,9 +3035,9 @@ var Separator = ({
 );
 
 // elements/progress/Progress.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-var Progress = React15.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React15.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React15.createElement(Label, { ...props.labelProps }, props.label), /* @__PURE__ */ React15.createElement(
+var Progress = React16.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React16.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React16.createElement(Label, { ...props.labelProps }, props.label), /* @__PURE__ */ React16.createElement(
   ProgressPrimitive.Root,
   {
     ref,
@@ -3015,7 +3047,7 @@ var Progress = React15.forwardRef(({ className, value, ...props }, ref) => /* @_
     ),
     ...props
   },
-  /* @__PURE__ */ React15.createElement(
+  /* @__PURE__ */ React16.createElement(
     ProgressPrimitive.Indicator,
     {
       className: "hawa-h-full hawa-w-full hawa-flex-1 hawa-bg-primary hawa-transition-all",
@@ -3026,8 +3058,8 @@ var Progress = React15.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // icons/Emojis.tsx
-import React16 from "react";
-var VeryGoodEmoji = () => /* @__PURE__ */ React16.createElement(
+import React17 from "react";
+var VeryGoodEmoji = () => /* @__PURE__ */ React17.createElement(
   "svg",
   {
     fill: "none",
@@ -3036,7 +3068,7 @@ var VeryGoodEmoji = () => /* @__PURE__ */ React16.createElement(
     width: "16",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ React16.createElement("g", { clipPath: "url(#clip0_53_166)" }, /* @__PURE__ */ React16.createElement(
+  /* @__PURE__ */ React17.createElement("g", { clipPath: "url(#clip0_53_166)" }, /* @__PURE__ */ React17.createElement(
     "path",
     {
       clipRule: "evenodd",
@@ -3044,7 +3076,7 @@ var VeryGoodEmoji = () => /* @__PURE__ */ React16.createElement(
       fill: "currentColor",
       fillRule: "evenodd"
     }
-  ), /* @__PURE__ */ React16.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     "path",
     {
       clipRule: "evenodd",
@@ -3054,7 +3086,7 @@ var VeryGoodEmoji = () => /* @__PURE__ */ React16.createElement(
     }
   ))
 );
-var GoodEmoji = () => /* @__PURE__ */ React16.createElement(
+var GoodEmoji = () => /* @__PURE__ */ React17.createElement(
   "svg",
   {
     fill: "none",
@@ -3063,7 +3095,7 @@ var GoodEmoji = () => /* @__PURE__ */ React16.createElement(
     width: "16",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ React16.createElement("g", { clipPath: "url(#clip0_53_167)" }, /* @__PURE__ */ React16.createElement(
+  /* @__PURE__ */ React17.createElement("g", { clipPath: "url(#clip0_53_167)" }, /* @__PURE__ */ React17.createElement(
     "path",
     {
       clipRule: "evenodd",
@@ -3073,7 +3105,7 @@ var GoodEmoji = () => /* @__PURE__ */ React16.createElement(
     }
   ))
 );
-var BadEmoji = () => /* @__PURE__ */ React16.createElement(
+var BadEmoji = () => /* @__PURE__ */ React17.createElement(
   "svg",
   {
     fill: "none",
@@ -3082,7 +3114,7 @@ var BadEmoji = () => /* @__PURE__ */ React16.createElement(
     width: "16",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ React16.createElement("g", { clipPath: "url(#clip0_53_152)" }, /* @__PURE__ */ React16.createElement(
+  /* @__PURE__ */ React17.createElement("g", { clipPath: "url(#clip0_53_152)" }, /* @__PURE__ */ React17.createElement(
     "path",
     {
       clipRule: "evenodd",
@@ -3092,7 +3124,7 @@ var BadEmoji = () => /* @__PURE__ */ React16.createElement(
     }
   ))
 );
-var VeryBadEmoji = () => /* @__PURE__ */ React16.createElement(
+var VeryBadEmoji = () => /* @__PURE__ */ React17.createElement(
   "svg",
   {
     fill: "none",
@@ -3101,13 +3133,13 @@ var VeryBadEmoji = () => /* @__PURE__ */ React16.createElement(
     width: "16",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ React16.createElement("g", { clipPath: "url(#clip0_53_151)" }, /* @__PURE__ */ React16.createElement(
+  /* @__PURE__ */ React17.createElement("g", { clipPath: "url(#clip0_53_151)" }, /* @__PURE__ */ React17.createElement(
     "path",
     {
       d: "M11.841 12.0225C12.7197 12.9324 12.7197 14.4077 11.841 15.3176C10.9623 16.2275 9.53769 16.2275 8.65901 15.3176C7.78033 14.4077 7.78033 12.9324 8.65901 12.0225L10.25 10.375L11.841 12.0225Z",
       fill: "#0070F3"
     }
-  ), /* @__PURE__ */ React16.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     "path",
     {
       clipRule: "evenodd",
@@ -3119,8 +3151,8 @@ var VeryBadEmoji = () => /* @__PURE__ */ React16.createElement(
 );
 
 // icons/InputIcons.tsx
-import React17 from "react";
-var EyeIcon = (props) => /* @__PURE__ */ React17.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ React17.createElement(
+import React18 from "react";
+var EyeIcon = (props) => /* @__PURE__ */ React18.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ React18.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3131,10 +3163,10 @@ var EyeIcon = (props) => /* @__PURE__ */ React17.createElement("div", { classNam
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ React17.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
-  /* @__PURE__ */ React17.createElement("circle", { cx: "12", cy: "12", r: "3" })
+  /* @__PURE__ */ React18.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+  /* @__PURE__ */ React18.createElement("circle", { cx: "12", cy: "12", r: "3" })
 ));
-var HiddenEyeIcon = (props) => /* @__PURE__ */ React17.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ React17.createElement(
+var HiddenEyeIcon = (props) => /* @__PURE__ */ React18.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ React18.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3145,20 +3177,20 @@ var HiddenEyeIcon = (props) => /* @__PURE__ */ React17.createElement("div", { cl
     strokeLinecap: "round",
     strokeLinejoin: "round"
   },
-  /* @__PURE__ */ React17.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
-  /* @__PURE__ */ React17.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
-  /* @__PURE__ */ React17.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
-  /* @__PURE__ */ React17.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+  /* @__PURE__ */ React18.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+  /* @__PURE__ */ React18.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+  /* @__PURE__ */ React18.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+  /* @__PURE__ */ React18.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
 ));
 
 // icons/CommonIcons.tsx
-import React18 from "react";
+import React19 from "react";
 var CheckMark = ({ size = "default", className }) => {
   let sizeStyles = {
     default: "hawa-h-5 hawa-w-5",
     sm: "hawa-h-3 hawa-w-3"
   };
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "svg",
     {
       className: cn(sizeStyles[size], className),
@@ -3166,7 +3198,7 @@ var CheckMark = ({ size = "default", className }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -3181,7 +3213,7 @@ var UncheckMark = ({ size = "default", className }) => {
     default: "hawa-h-5 hawa-w-5",
     sm: "hawa-h-3 hawa-w-3"
   };
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "svg",
     {
       className: cn(sizeStyles[size], className),
@@ -3189,7 +3221,7 @@ var UncheckMark = ({ size = "default", className }) => {
       fill: "currentColor",
       viewBox: "0 0 20 20"
     },
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -3222,6 +3254,8 @@ export {
   PopoverContent,
   Popover,
   PopoverTrigger,
+  PopoverPortal,
+  PopoverRoot,
   ScrollArea,
   ScrollBar,
   Tabs,