@sikka/hawa 0.35.5-next → 0.35.6-next

package/dist/blocks/index.js

@@ -5683,7 +5683,7 @@ var ScrollBar = React34.forwardRef(({ className, orientation = "vertical", ...pr
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // elements/tabs/Tabs.tsx
-var React46 = __toESM(require("react"));
+var React45 = __toESM(require("react"));
 
 // hooks/useIsomorphicEffect.ts
 var import_react29 = require("react");
@@ -5766,8 +5766,8 @@ var useMeasureDirty = (ref) => {
   return rect;
 };
 
-// hooks/useOutsideClick.ts
-var import_react44 = __toESM(require("react"));
+// hooks/useClickOutside.ts
+var import_react44 = require("react");
 
 // elements/tabs/Tabs.tsx
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
@@ -5855,7 +5855,7 @@ var Chip = import_react45.default.forwardRef(
 );
 
 // elements/floatBox/FloatBox.tsx
-var React45 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var FloatBox = ({
   className,
   open,
@@ -5893,7 +5893,7 @@ var FloatBox = ({
     right: "hawa-arrow-default-left",
     left: "hawa-arrow-default-right"
   };
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React44.createElement(
     "div",
     {
       className: cn(
@@ -5904,8 +5904,8 @@ var FloatBox = ({
       "data-side": side,
       "data-floatbox-state": open ? "open" : "closed"
     },
-    withArrow && /* @__PURE__ */ React45.createElement("div", { className: cn(arrowDirection[side]) }),
-    /* @__PURE__ */ React45.createElement("span", null, props.children)
+    withArrow && /* @__PURE__ */ React44.createElement("div", { className: cn(arrowDirection[side]) }),
+    /* @__PURE__ */ React44.createElement("span", null, props.children)
   );
 };
 
@@ -5968,8 +5968,8 @@ var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
   ],
   defaultVariants: { variant: "default", orientation: "horizontal" }
 });
-var TabsContext = React46.createContext({ orientation: "horizontal", variant: "default" });
-var Tabs = React46.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React46.createElement(
+var TabsContext = React45.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React45.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React45.createElement(
   TabsPrimitive.Root,
   {
     ref,
@@ -5980,11 +5980,11 @@ var Tabs = React46.forwardRef(({ className, orientation, variant = "default", ..
     ),
     ...props
   },
-  /* @__PURE__ */ React46.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+  /* @__PURE__ */ React45.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
 ));
-var TabsList = React46.forwardRef(({ className, ...props }, ref) => {
-  const { orientation, variant } = React46.useContext(TabsContext);
-  return /* @__PURE__ */ React46.createElement(
+var TabsList = React45.forwardRef(({ className, ...props }, ref) => {
+  const { orientation, variant } = React45.useContext(TabsContext);
+  return /* @__PURE__ */ React45.createElement(
     TabsPrimitive.List,
     {
       ref,
@@ -5997,11 +5997,11 @@ var TabsList = React46.forwardRef(({ className, ...props }, ref) => {
     }
   );
 });
-var TabsTrigger = React46.forwardRef(({ className, chipProps, ...props }, ref) => {
-  const { orientation, variant } = React46.useContext(TabsContext);
-  const tabTriggerRef = React46.useRef(null);
+var TabsTrigger = React45.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React45.useContext(TabsContext);
+  const tabTriggerRef = React45.useRef(null);
   const { width } = useMeasureDirty(tabTriggerRef);
-  return /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React45.createElement(
     TabsPrimitive.Trigger,
     {
       ref: tabTriggerRef,
@@ -6013,8 +6013,8 @@ var TabsTrigger = React46.forwardRef(({ className, chipProps, ...props }, ref) =
       ...props
     },
     props.children,
-    chipProps && /* @__PURE__ */ React46.createElement(Chip, { ...chipProps }),
-    /* @__PURE__ */ React46.createElement(
+    chipProps && /* @__PURE__ */ React45.createElement(Chip, { ...chipProps }),
+    /* @__PURE__ */ React45.createElement(
       FloatBox,
       {
         withArrow: true,
@@ -6027,7 +6027,7 @@ var TabsTrigger = React46.forwardRef(({ className, chipProps, ...props }, ref) =
     )
   );
 });
-var TabsContent = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React46.createElement(
+var TabsContent = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React45.createElement(
   TabsPrimitive.Content,
   {
     ref,
@@ -6520,12 +6520,12 @@ var AdCard = ({
 var import_react56 = __toESM(require("react"));
 
 // elements/separator/Separator.tsx
-var React57 = __toESM(require("react"));
+var React56 = __toESM(require("react"));
 var Separator = ({
   className,
   orientation = "horizontal",
   ...props
-}) => /* @__PURE__ */ React57.createElement(
+}) => /* @__PURE__ */ React56.createElement(
   "div",
   {
     className: cn(
@@ -6663,14 +6663,14 @@ var PricingCard = ({
 var import_react58 = __toESM(require("react"));
 
 // elements/dropdownMenu/DropdownMenu.tsx
-var React59 = __toESM(require("react"));
+var React58 = __toESM(require("react"));
 var import_react57 = require("@headlessui/react");
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var DropdownMenuRoot = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React59.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React59.createElement(
+var DropdownMenuSubTrigger = React58.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React58.createElement(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -6681,9 +6681,9 @@ var DropdownMenuSubTrigger = React59.forwardRef(({ className, inset, children, .
     ),
     ...props
   },
-  /* @__PURE__ */ React59.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, children),
+  /* @__PURE__ */ React58.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2" }, children),
   " ",
-  /* @__PURE__ */ React59.createElement(
+  /* @__PURE__ */ React58.createElement(
     "svg",
     {
       "aria-label": "Chevron Right Icon",
@@ -6695,7 +6695,7 @@ var DropdownMenuSubTrigger = React59.forwardRef(({ className, inset, children, .
       width: "1em",
       className: cn(props.dir === "rtl" ? "hawa-rotate-180" : "")
     },
-    /* @__PURE__ */ React59.createElement(
+    /* @__PURE__ */ React58.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -6705,7 +6705,7 @@ var DropdownMenuSubTrigger = React59.forwardRef(({ className, inset, children, .
   )
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React59.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React59.createElement(
+var DropdownMenuSubContent = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React58.createElement(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -6717,7 +6717,7 @@ var DropdownMenuSubContent = React59.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React59.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React59.createElement(import_react57.Portal, null, /* @__PURE__ */ React59.createElement(
+var DropdownMenuContent = React58.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React58.createElement(import_react57.Portal, null, /* @__PURE__ */ React58.createElement(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -6730,8 +6730,8 @@ var DropdownMenuContent = React59.forwardRef(({ className, sideOffset = 4, ...pr
   }
 )));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React59.forwardRef(({ className, inset, badged, slug, LinkComponent, ...props }, ref) => {
-  return /* @__PURE__ */ React59.createElement(LinkComponent, { href: slug }, /* @__PURE__ */ React59.createElement(
+var DropdownMenuItem = React58.forwardRef(({ className, inset, badged, slug, LinkComponent, ...props }, ref) => {
+  return /* @__PURE__ */ React58.createElement(LinkComponent, { href: slug }, /* @__PURE__ */ React58.createElement(
     DropdownMenuPrimitive.Item,
     {
       disabled: props.disabled,
@@ -6744,14 +6744,14 @@ var DropdownMenuItem = React59.forwardRef(({ className, inset, badged, slug, Lin
       ),
       ...props
     },
-    /* @__PURE__ */ React59.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 " }, props.children),
+    /* @__PURE__ */ React58.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-2 " }, props.children),
     props.end && props.end,
-    !props.end && props.shortcut && /* @__PURE__ */ React59.createElement(DropdownMenuShortcut, null, props.shortcut),
-    !props.end && badged && /* @__PURE__ */ React59.createElement("div", { className: "hawa-h-3 hawa-w-3 hawa-rounded-full hawa-bg-red-500" })
+    !props.end && props.shortcut && /* @__PURE__ */ React58.createElement(DropdownMenuShortcut, null, props.shortcut),
+    !props.end && badged && /* @__PURE__ */ React58.createElement("div", { className: "hawa-h-3 hawa-w-3 hawa-rounded-full hawa-bg-red-500" })
   ));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React59.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React59.createElement(
+var DropdownMenuCheckboxItem = React58.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ React58.createElement(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -6762,7 +6762,7 @@ var DropdownMenuCheckboxItem = React59.forwardRef(({ className, children, checke
     checked,
     ...props
   },
-  /* @__PURE__ */ React59.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React59.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React59.createElement(
+  /* @__PURE__ */ React58.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React58.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React58.createElement(
     "svg",
     {
       "aria-label": "Check Mark",
@@ -6773,12 +6773,12 @@ var DropdownMenuCheckboxItem = React59.forwardRef(({ className, children, checke
       height: "0.60em",
       width: "0.60em"
     },
-    /* @__PURE__ */ React59.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
+    /* @__PURE__ */ React58.createElement("path", { d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" })
   ), " ")),
   children
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React59.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React59.createElement(
+var DropdownMenuRadioItem = React58.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React58.createElement(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -6788,7 +6788,7 @@ var DropdownMenuRadioItem = React59.forwardRef(({ className, children, ...props
     ),
     ...props
   },
-  /* @__PURE__ */ React59.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React59.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React59.createElement(
+  /* @__PURE__ */ React58.createElement("span", { className: "hawa-absolute hawa-left-2 hawa-flex hawa-h-3.5 hawa-w-3.5 hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React58.createElement(DropdownMenuPrimitive.ItemIndicator, null, /* @__PURE__ */ React58.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -6803,12 +6803,12 @@ var DropdownMenuRadioItem = React59.forwardRef(({ className, children, ...props
       strokeLinejoin: "round",
       className: "hawa-h-2 hawa-w-2 hawa-fill-current"
     },
-    /* @__PURE__ */ React59.createElement("circle", { cx: "12", cy: "12", r: "10" })
+    /* @__PURE__ */ React58.createElement("circle", { cx: "12", cy: "12", r: "10" })
   ))),
   children
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React59.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React59.createElement(
+var DropdownMenuLabel = React58.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React58.createElement(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -6821,7 +6821,7 @@ var DropdownMenuLabel = React59.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React59.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React59.createElement(
+var DropdownMenuSeparator = React58.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React58.createElement(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -6834,7 +6834,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React58.createElement(
     "span",
     {
       className: cn(
@@ -6875,10 +6875,10 @@ var DropdownMenu = ({
     default: "hawa-px-2 hawa-py-3 ",
     sm: "hawa-text-xs hawa-px-1.5 hawa-py-1.5 "
   };
-  let [values, setValues] = React59.useState(
+  let [values, setValues] = React58.useState(
     items.map((item) => item.currentOption)
   );
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React58.createElement(
     DropdownMenuRoot,
     {
       onOpenChange,
@@ -6886,7 +6886,7 @@ var DropdownMenu = ({
       modal: false,
       dir: direction
     },
-    /* @__PURE__ */ React59.createElement(
+    /* @__PURE__ */ React58.createElement(
       DropdownMenuTrigger,
       {
         asChild: true,
@@ -6895,7 +6895,7 @@ var DropdownMenu = ({
       },
       trigger
     ),
-    /* @__PURE__ */ React59.createElement(import_react57.Portal, null, /* @__PURE__ */ React59.createElement(
+    /* @__PURE__ */ React58.createElement(import_react57.Portal, null, /* @__PURE__ */ React58.createElement(
       DropdownMenuContent,
       {
         side,
@@ -6916,12 +6916,12 @@ var DropdownMenu = ({
         var _a;
         const ItemLinkComponent = item.slug ? LinkComponent : "a";
         if (item.itemType === "separator") {
-          return /* @__PURE__ */ React59.createElement(DropdownMenuSeparator, { key: index });
+          return /* @__PURE__ */ React58.createElement(DropdownMenuSeparator, { key: index });
         } else if (item.itemType === "label") {
-          return /* @__PURE__ */ React59.createElement(DropdownMenuLabel, { key: index }, item.label);
+          return /* @__PURE__ */ React58.createElement(DropdownMenuLabel, { key: index }, item.label);
         } else if (item.itemType === "radio") {
           let dd = item.currentOption;
-          return /* @__PURE__ */ React59.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React59.createElement(
+          return /* @__PURE__ */ React58.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React58.createElement(
             DropdownMenuSubTrigger,
             {
               dir: direction,
@@ -6929,7 +6929,7 @@ var DropdownMenu = ({
             },
             item.icon && item.icon,
             item.label && item.label
-          ), /* @__PURE__ */ React59.createElement(DropdownMenuSubContent, null, /* @__PURE__ */ React59.createElement(
+          ), /* @__PURE__ */ React58.createElement(DropdownMenuSubContent, null, /* @__PURE__ */ React58.createElement(
             DropdownMenuRadioGroup,
             {
               value: values[index],
@@ -6943,12 +6943,12 @@ var DropdownMenu = ({
                 }
               }
             },
-            (_a = item.options) == null ? void 0 : _a.map((opt, i) => /* @__PURE__ */ React59.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
+            (_a = item.options) == null ? void 0 : _a.map((opt, i) => /* @__PURE__ */ React58.createElement(DropdownMenuRadioItem, { key: i, value: opt.value }, opt.label))
           )));
         } else if (item.itemType === "custom") {
-          return /* @__PURE__ */ React59.createElement("div", { key: index }, item.content);
+          return /* @__PURE__ */ React58.createElement("div", { key: index }, item.content);
         } else {
-          return item.subitems ? /* @__PURE__ */ React59.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React59.createElement(
+          return item.subitems ? /* @__PURE__ */ React58.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React58.createElement(
             DropdownMenuSubTrigger,
             {
               dir: direction,
@@ -6956,9 +6956,9 @@ var DropdownMenu = ({
             },
             item.icon && item.icon,
             item.label && item.label
-          ), /* @__PURE__ */ React59.createElement(import_react57.Portal, null, /* @__PURE__ */ React59.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => {
+          ), /* @__PURE__ */ React58.createElement(import_react57.Portal, null, /* @__PURE__ */ React58.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => {
             const SubitemLinkComponent = subitem.slug ? LinkComponent : "a";
-            return /* @__PURE__ */ React59.createElement(
+            return /* @__PURE__ */ React58.createElement(
               DropdownMenuItem,
               {
                 key: subIndex,
@@ -6987,7 +6987,7 @@ var DropdownMenu = ({
               subitem.icon && subitem.icon,
               subitem.label && subitem.label
             );
-          })))) : /* @__PURE__ */ React59.createElement(
+          })))) : /* @__PURE__ */ React58.createElement(
             DropdownMenuItem,
             {
               LinkComponent: ItemLinkComponent,
@@ -7501,9 +7501,9 @@ var CardPrice = (props) => /* @__PURE__ */ import_react62.default.createElement(
 var import_react63 = __toESM(require("react"));
 
 // elements/progress/Progress.tsx
-var React65 = __toESM(require("react"));
+var React64 = __toESM(require("react"));
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var Progress = React65.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React65.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React65.createElement(Label, { ...props.labelProps }, props.label), /* @__PURE__ */ React65.createElement(
+var Progress = React64.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ React64.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React64.createElement(Label, { ...props.labelProps }, props.label), /* @__PURE__ */ React64.createElement(
   ProgressPrimitive.Root,
   {
     ref,
@@ -7513,7 +7513,7 @@ var Progress = React65.forwardRef(({ className, value, ...props }, ref) => /* @_
     ),
     ...props
   },
-  /* @__PURE__ */ React65.createElement(
+  /* @__PURE__ */ React64.createElement(
     ProgressPrimitive.Indicator,
     {
       className: "hawa-h-full hawa-w-full hawa-flex-1 hawa-bg-primary hawa-transition-all",

package/dist/blocks/index.mjs

@@ -1,12 +1,7 @@
 "use client";
 import {
   Alert,
-  BadEmoji,
-  CheckMark,
   Checkbox,
-  EyeIcon,
-  GoodEmoji,
-  HiddenEyeIcon,
   Input,
   PhoneInput,
   PinInput,
@@ -21,13 +16,11 @@ import {
   TabsContent,
   TabsList,
   TabsTrigger,
-  Textarea,
-  UncheckMark,
-  VeryBadEmoji,
-  VeryGoodEmoji
-} from "../chunk-TERP5K6R.mjs";
+  Textarea
+} from "../chunk-57EAKTAP.mjs";
 import "../chunk-OPYDG34F.mjs";
 import {
+  BadEmoji,
   Button,
   Card,
   CardContent,
@@ -35,16 +28,23 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
+  CheckMark,
   Chip,
   DropdownMenu,
+  EyeIcon,
+  GoodEmoji,
+  HiddenEyeIcon,
   Label,
   Loading,
   Logos,
   Skeleton,
   Tooltip,
+  UncheckMark,
+  VeryBadEmoji,
+  VeryGoodEmoji,
   cn
-} from "../chunk-G7JHUC5N.mjs";
-import "../chunk-545D35G6.mjs";
+} from "../chunk-ANXGMZXS.mjs";
+import "../chunk-SYGWSBJL.mjs";
 
 // blocks/auth/AuthButtons.tsx
 import React from "react";