@sikka/hawa
Version:
Modern UI Kit made with Tailwind
1,264 lines (1,220 loc) • 76.4 kB
JavaScript
"use client";
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// blocks/misc/index.ts
var misc_exports = {};
__export(misc_exports, {
Announcement: () => Announcement,
ContactForm: () => ContactForm,
EmptyState: () => EmptyState,
LeadGenerator: () => LeadGenerator,
LegalTexts: () => LegalTexts,
NoPermission: () => NoPermission,
NotFound: () => NotFound,
Testimonial: () => Testimonial
});
module.exports = __toCommonJS(misc_exports);
// blocks/misc/LegalTexts.tsx
var import_react21 = __toESM(require("react"));
// util/index.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// elements/scrollArea/ScrollArea.tsx
var React = __toESM(require("react"));
var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"));
var ScrollArea = React.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
const scrollAreaRef = React.useRef(null);
const isDragging = React.useRef(false);
const startPos = React.useRef({ x: 0, y: 0 });
const scrollPos = React.useRef({ top: 0, left: 0 });
const [showLeftFade, setShowLeftFade] = React.useState(false);
const [showRightFade, setShowRightFade] = React.useState(false);
const checkOverflow = () => {
if (scrollAreaRef.current) {
const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;
setShowLeftFade(scrollLeft > 0);
setShowRightFade(scrollLeft + clientWidth < scrollWidth);
}
};
const onMouseDown = (e) => {
isDragging.current = true;
startPos.current = { x: e.clientX, y: e.clientY };
if (scrollAreaRef.current) {
scrollPos.current = {
top: scrollAreaRef.current.scrollTop,
left: scrollAreaRef.current.scrollLeft
};
}
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
};
const onMouseMove = (e) => {
if (!isDragging.current || !scrollAreaRef.current) return;
const dx = e.clientX - startPos.current.x;
const dy = e.clientY - startPos.current.y;
if (orientation === "vertical") {
scrollAreaRef.current.scrollTop = scrollPos.current.top - dy;
} else {
scrollAreaRef.current.scrollLeft = scrollPos.current.left - dx;
checkOverflow();
}
};
const onMouseUp = () => {
isDragging.current = false;
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
};
React.useEffect(() => {
checkOverflow();
if (scrollAreaRef.current) {
scrollAreaRef.current.addEventListener("scroll", checkOverflow);
window.addEventListener("resize", checkOverflow);
}
return () => {
if (scrollAreaRef.current) {
scrollAreaRef.current.removeEventListener("scroll", checkOverflow);
}
window.removeEventListener("resize", checkOverflow);
};
}, []);
return /* @__PURE__ */ React.createElement(
ScrollAreaPrimitive.Root,
{
ref,
className: cn("hawa-relative hawa-overflow-hidden", className),
...props
},
/* @__PURE__ */ React.createElement(
"div",
{
className: cn(
"hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0 hawa-mask-fade-right",
showLeftFade ? "hawa-block" : "hawa-hidden"
)
}
),
/* @__PURE__ */ React.createElement(
"div",
{
className: cn(
"hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10",
showRightFade ? "hawa-block" : "hawa-hidden"
)
}
),
/* @__PURE__ */ React.createElement(
ScrollAreaPrimitive.Viewport,
{
ref: scrollAreaRef,
className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]",
onMouseDown
},
children
),
/* @__PURE__ */ React.createElement(ScrollBar, { orientation }),
/* @__PURE__ */ React.createElement(ScrollAreaPrimitive.Corner, null)
);
});
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
var ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React.createElement(
ScrollAreaPrimitive.ScrollAreaScrollbar,
{
ref,
orientation,
className: cn(
"hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors",
orientation === "vertical" && "hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]",
orientation === "horizontal" && "hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]",
className
),
...props
},
/* @__PURE__ */ React.createElement(
ScrollAreaPrimitive.ScrollAreaThumb,
{
className: cn(
"hawa-relative hawa-rounded-full hawa-bg-border",
orientation === "vertical" && "hawa-flex-1"
)
}
)
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
// elements/tabs/Tabs.tsx
var React11 = __toESM(require("react"));
// hooks/useIsomorphicEffect.ts
var import_react = require("react");
// hooks/useDiscloser.ts
var import_react2 = require("react");
// hooks/useHover.ts
var import_react3 = require("react");
// hooks/useToast.ts
var React4 = __toESM(require("react"));
// hooks/useCarousel.ts
var import_react4 = require("react");
// hooks/useDialogCarousel.ts
var import_react5 = require("react");
var import_embla_carousel_auto_height = __toESM(require("embla-carousel-auto-height"));
var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
// hooks/useDialogSteps.ts
var import_react6 = require("react");
// hooks/useClipboard.ts
var import_react7 = require("react");
// hooks/useBreakpoint.ts
var import_react8 = require("react");
// hooks/useWindowSize.ts
var import_react9 = require("react");
// hooks/useFocusWithin.ts
var import_react10 = require("react");
// hooks/useMediaQuery.ts
var import_react11 = require("react");
// hooks/useScrollPosition.ts
var import_react12 = require("react");
// hooks/useTable.ts
var import_react13 = require("react");
// hooks/useTabs.ts
var import_react14 = require("react");
// hooks/useMeasureDirty.ts
var import_react15 = require("react");
// hooks/useClickOutside.ts
var import_react16 = require("react");
// hooks/useShortcuts.ts
var import_react17 = require("react");
// hooks/useWindowEvent.ts
var import_react18 = require("react");
function useWindowEvent(type, listener, options) {
(0, import_react18.useEffect)(() => {
window.addEventListener(type, listener, options);
return () => window.removeEventListener(type, listener, options);
}, [type, listener]);
}
// hooks/useViewportSize.ts
var import_react19 = require("react");
var eventListerOptions = {
passive: true
};
function useViewportSize() {
const [windowSize, setWindowSize] = (0, import_react19.useState)({
width: 0,
height: 0
});
const setSize = (0, import_react19.useCallback)(() => {
setWindowSize({
width: window.innerWidth || 0,
height: window.innerHeight || 0
});
}, []);
useWindowEvent("resize", setSize, eventListerOptions);
useWindowEvent("orientationchange", setSize, eventListerOptions);
(0, import_react19.useEffect)(setSize, []);
return windowSize;
}
// elements/tabs/Tabs.tsx
var Popover = __toESM(require("@radix-ui/react-popover"));
var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
var import_tailwind_variants = require("tailwind-variants");
// elements/chip/Chip.tsx
var import_react20 = __toESM(require("react"));
var Chip = import_react20.default.forwardRef(
({
label,
size = "normal",
icon,
color,
radius = "inherit",
dot,
dotStatus = "none",
...rest
}, ref) => {
let defaultStyles = "hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center hawa-px-2.5 hawa-py-1 hawa-font-bold ";
let radiusStyles = {
inherit: " hawa-rounded",
full: "hawa-rounded-full",
none: "hawa-rounded-none"
};
let sizeStyles = {
small: "hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 ",
normal: "hawa-h-fit hawa-text-xs",
large: "hawa-text-base"
};
let dotStyles = {
small: "hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full",
normal: "hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full",
large: "hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full"
};
let dotStatusStyles = {
none: "hawa-bg-gray-500 dark:hawa-bg-gray-800",
available: "hawa-bg-green-500",
unavailable: "hawa-bg-red-500"
};
let colorStyles = {
green: "hawa-bg-green-200 hawa-text-green-700 dark:hawa-bg-green-700 dark:hawa-text-green-200",
blue: "hawa-bg-blue-200 hawa-text-blue-700 dark:hawa-bg-blue-700 dark:hawa-text-blue-100",
red: "hawa-bg-red-200 hawa-text-red-700 dark:hawa-bg-red-700 dark:hawa-text-red-100",
yellow: "hawa-bg-yellow-200 hawa-text-yellow-700 dark:hawa-bg-yellow-600 dark:hawa-text-black",
orange: "hawa-bg-orange-200 hawa-text-orange-700 dark:hawa-bg-orange-700 dark:hawa-text-orange-100",
purple: "hawa-bg-purple-200 hawa-text-purple-700 dark:hawa-bg-purple-700 dark:hawa-text-purple-100",
cyan: "hawa-bg-cyan-200 hawa-text-cyan-700 dark:hawa-bg-cyan-700 dark:hawa-text-cyan-100",
hyper: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
oceanic: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
};
if (label) {
return /* @__PURE__ */ import_react20.default.createElement(
"span",
{
...rest,
ref,
className: cn(
defaultStyles,
sizeStyles[size],
radiusStyles[radius],
color ? colorStyles[color] : "hawa-border hawa-bg-none",
rest.className
)
},
dot && /* @__PURE__ */ import_react20.default.createElement(
"span",
{
className: cn(dotStyles[size], dotStatusStyles[dotStatus])
}
),
icon && icon,
label
);
} else {
return /* @__PURE__ */ import_react20.default.createElement(
"span",
{
...rest,
ref,
className: cn(
"hawa-h-2 hawa-w-2 hawa-rounded-full",
color ? colorStyles[color] : "hawa-border hawa-bg-none"
)
}
);
}
}
);
// elements/tabs/Tabs.tsx
var tabsListVariant = (0, import_tailwind_variants.tv)({
base: "",
variants: {
variant: {
default: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground dark:hawa-border-primary/10",
underlined: "hawa-flex hawa-w-fit 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-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
},
orientation: { horizontal: "", vertical: "" }
},
compoundVariants: [
{
variant: "underlined_tabs",
orientation: "vertical",
class: "hawa-border-e-2 hawa-border-e-primary"
},
{
variant: "underlined_tabs",
orientation: "horizontal",
class: "hawa-border-b-2 hawa-border-b-primary"
}
],
defaultVariants: { variant: "default", orientation: "horizontal" }
});
var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
base: "",
variants: {
variant: {
default: "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-border 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 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm dark:hawa-border-primary/10",
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: "" }
},
compoundVariants: [
{
variant: "underlined",
orientation: "horizontal",
class: "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2"
},
{
variant: "underlined",
orientation: "vertical",
class: "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2"
},
{
variant: "underlined_tabs",
orientation: "horizontal",
class: "hawa-rounded-b-none"
},
{
variant: "underlined_tabs",
orientation: "vertical",
class: "hawa-rounded-e-none"
}
],
defaultVariants: { variant: "default", orientation: "horizontal" }
});
var TabsContext = React11.createContext({ orientation: "horizontal", variant: "default", scrollable: false });
var Tabs = React11.forwardRef(
({ className, orientation, scrollable, variant = "default", ...props }, ref) => /* @__PURE__ */ React11.createElement(
TabsPrimitive.Root,
{
ref,
className: cn(
"hawa-flex hawa-gap-2",
orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
className
),
...props
},
/* @__PURE__ */ React11.createElement(TabsContext.Provider, { value: { orientation, variant, scrollable } }, props.children)
)
);
var TabsList = React11.forwardRef(({ className, classNames, ...props }, ref) => {
const { orientation, variant, scrollable } = React11.useContext(TabsContext);
const { width } = useViewportSize();
if (scrollable && width < 768 && orientation === "horizontal") {
return /* @__PURE__ */ React11.createElement(ScrollArea, { orientation: "horizontal", className: classNames == null ? void 0 : classNames.scrollArea }, /* @__PURE__ */ React11.createElement(
TabsPrimitive.List,
{
ref,
className: cn(
tabsListVariant({ variant, orientation }),
"hawa-flex-row hawa-flex-nowrap",
className
),
...props
}
));
} else {
return /* @__PURE__ */ React11.createElement(
TabsPrimitive.List,
{
ref,
className: cn(
tabsListVariant({ variant, orientation }),
orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
"hawa-flex-wrap",
className
),
...props
}
);
}
});
var TabsTrigger = React11.forwardRef(
({ className, chipProps, withPopover = false, onPopoverClick, ...props }, ref) => {
const { orientation, variant } = React11.useContext(TabsContext);
if (withPopover) {
return /* @__PURE__ */ React11.createElement(Popover.Root, { open: props.showPopover }, /* @__PURE__ */ React11.createElement(Popover.Anchor, { asChild: true }, /* @__PURE__ */ React11.createElement(
TabsPrimitive.Trigger,
{
className: cn(
tabsTriggerVariant({ variant, orientation }),
"hawa-relative",
className
),
...props
},
props.children,
chipProps && /* @__PURE__ */ React11.createElement(Chip, { ...chipProps })
)), /* @__PURE__ */ React11.createElement(
Popover.Content,
{
onClick: onPopoverClick,
asChild: true,
className: cn(
"dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[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",
"hawa-arrow-default-top hawa-mt-2"
)
},
/* @__PURE__ */ React11.createElement("div", { className: "hawa-p-2" }, " ", props.popoverContent)
));
} else {
return /* @__PURE__ */ React11.createElement(
TabsPrimitive.Trigger,
{
className: cn(
tabsTriggerVariant({ variant, orientation }),
"hawa-relative",
className
),
...props
},
props.children,
chipProps && /* @__PURE__ */ React11.createElement(Chip, { ...chipProps })
);
}
}
);
var TabsContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
TabsPrimitive.Content,
{
ref,
className: cn(
"hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2",
className
),
...props
}
));
Tabs.displayName = TabsPrimitive.Root.displayName;
TabsList.displayName = TabsPrimitive.List.displayName;
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
TabsContent.displayName = TabsPrimitive.Content.displayName;
// blocks/misc/LegalTexts.tsx
var LegalTexts = ({ tabs, ...props }) => {
return /* @__PURE__ */ import_react21.default.createElement(
Tabs,
{
value: props.activeTab,
onValueChange: props.handleTabChange,
defaultValue: props.defaultTab || tabs[0].value,
dir: props.direction
},
/* @__PURE__ */ import_react21.default.createElement(TabsList, { className: "hawa-w-full" }, tabs.map((tab, index) => /* @__PURE__ */ import_react21.default.createElement(TabsTrigger, { key: index, value: tab.value }, tab.title))),
tabs.map((tab, index) => /* @__PURE__ */ import_react21.default.createElement(TabsContent, { key: index, value: tab.value }, /* @__PURE__ */ import_react21.default.createElement(
ScrollArea,
{
className: cn(
"hawa-rounded hawa-border hawa-bg-muted hawa-p-4",
props.scrollAreaClassName
)
},
tab.content
)))
);
};
// blocks/misc/EmptyState.tsx
var import_react25 = __toESM(require("react"));
// elements/button/Button.tsx
var React17 = __toESM(require("react"));
var import_class_variance_authority = require("class-variance-authority");
// elements/helperText/HelperText.tsx
var import_react22 = __toESM(require("react"));
var HelperText = ({ helperText }) => /* @__PURE__ */ import_react22.default.createElement(
"p",
{
className: cn(
"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
)
},
helperText
);
// elements/label/Label.tsx
var React15 = __toESM(require("react"));
// elements/tooltip/Tooltip.tsx
var import_react23 = __toESM(require("react"));
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
var TooltipContent = import_react23.default.forwardRef(({ className, sideOffset = 4, size = "default", ...props }, ref) => /* @__PURE__ */ import_react23.default.createElement(
TooltipPrimitive.Content,
{
ref,
sideOffset,
className: cn(
"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-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",
{
"hawa-text-xs": size === "small",
"hawa-text-xl": size === "large"
},
className
),
...props
}
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
var TooltipArrow = import_react23.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react23.default.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
var Tooltip = ({
side,
size,
open,
content,
children,
disabled,
defaultOpen,
onOpenChange,
triggerProps,
contentProps,
providerProps,
delayDuration = 300,
...props
}) => {
return /* @__PURE__ */ import_react23.default.createElement(
TooltipPrimitive.TooltipProvider,
{
delayDuration,
...providerProps
},
/* @__PURE__ */ import_react23.default.createElement(
TooltipPrimitive.Root,
{
open: !disabled && open,
defaultOpen,
onOpenChange,
...props
},
/* @__PURE__ */ import_react23.default.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
/* @__PURE__ */ import_react23.default.createElement(
TooltipContent,
{
size,
side,
align: "center",
...contentProps,
style: {
...contentProps == null ? void 0 : contentProps.style,
maxWidth: "var(--radix-tooltip-content-available-width)",
maxHeight: "var(--radix-tooltip-content-available-height)"
}
},
content
)
)
);
};
// elements/label/Label.tsx
var Label = React15.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React15.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React15.createElement(
"label",
{
ref,
className: cn(
"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
className
),
...props
},
children,
required && /* @__PURE__ */ React15.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
), hint && /* @__PURE__ */ React15.createElement(
Tooltip,
{
content: hint,
side: hintSide,
triggerProps: {
tabIndex: -1,
onClick: (event) => event.preventDefault()
}
},
/* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
className: "hawa-h-[14px] hawa-w-[14px] hawa-cursor-help",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
},
/* @__PURE__ */ React15.createElement("circle", { cx: "12", cy: "12", r: "10" }),
/* @__PURE__ */ React15.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
/* @__PURE__ */ React15.createElement("path", { d: "M12 17h.01" })
))
)));
Label.displayName = "Label";
// elements/loading/Loading.tsx
var import_react24 = __toESM(require("react"));
var Loading = ({
design = "spinner",
size = "normal",
themeMode = "light",
classNames,
color,
...props
}) => {
let sizeStyles = {
button: "hawa-h-4 hawa-w-4",
xs: "hawa-h-1 hawa-w-1",
sm: "hawa-h-6 hawa-w-6",
normal: "hawa-h-8 hawa-w-8",
lg: "hawa-h-14 hawa-w-14",
xl: "hawa-h-24 hawa-w-24"
};
let progressSizes = {
button: "hawa-h-1",
xs: "hawa-h-1 hawa-w-1",
sm: "hawa-h-6 hawa-w-6",
normal: "",
lg: "hawa-h-6",
xl: "hawa-h-10 hawa-w-64"
};
let animationStyles = {
pulse: "hawa-animate-in hawa-fade-in hawa-duration-1000",
bounce: "hawa-animate-bounce"
};
switch (design.split("-")[0]) {
case "dots":
return /* @__PURE__ */ import_react24.default.createElement(
"div",
{
className: cn(
"hawa-flex hawa-flex-row hawa-gap-2",
classNames == null ? void 0 : classNames.container
)
},
/* @__PURE__ */ import_react24.default.createElement(
"div",
{
className: cn(
"hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
animationStyles[design.split("-")[1]],
color ? color : "hawa-bg-primary"
)
}
),
/* @__PURE__ */ import_react24.default.createElement(
"div",
{
className: cn(
"hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
animationStyles[design.split("-")[1]],
color ? color : "hawa-bg-primary"
)
}
),
/* @__PURE__ */ import_react24.default.createElement(
"div",
{
className: cn(
"hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
animationStyles[design.split("-")[1]],
color ? color : "hawa-bg-primary"
)
}
)
);
case "square":
return /* @__PURE__ */ import_react24.default.createElement(
"svg",
{
className: cn(
"squircle-container",
sizeStyles[size],
classNames == null ? void 0 : classNames.container
),
viewBox: "0 0 35 35",
height: "35",
width: "35"
},
/* @__PURE__ */ import_react24.default.createElement(
"rect",
{
className: "squircle-track",
x: "2.5",
y: "2.5",
fill: "none",
strokeWidth: "5px",
width: "32.5",
height: "32.5"
}
),
/* @__PURE__ */ import_react24.default.createElement(
"rect",
{
className: "square-car",
x: "2.5",
y: "2.5",
fill: "none",
strokeWidth: "5px",
width: "32.5",
height: "32.5",
pathLength: "100"
}
)
);
case "squircle":
return /* @__PURE__ */ import_react24.default.createElement(
"svg",
{
x: "0px",
y: "0px",
viewBox: "0 0 37 37",
height: "37",
width: "37",
preserveAspectRatio: "xMidYMid meet",
className: cn(
"squircle-container",
sizeStyles[size],
classNames == null ? void 0 : classNames.container
)
},
/* @__PURE__ */ import_react24.default.createElement(
"path",
{
className: cn("squircle-track", classNames == null ? void 0 : classNames.track),
fill: "none",
strokeWidth: "5",
pathLength: "100",
d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
}
),
/* @__PURE__ */ import_react24.default.createElement(
"path",
{
className: cn("squircle-car", classNames == null ? void 0 : classNames.car),
fill: "none",
strokeWidth: "5",
pathLength: "100",
d: "M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5"
}
)
);
case "progress":
return /* @__PURE__ */ import_react24.default.createElement(
"div",
{
className: cn(
"progress-loading after:hawa-rounded hawa-rounded",
progressSizes[size],
classNames == null ? void 0 : classNames.container
)
}
);
case "orbit":
return /* @__PURE__ */ import_react24.default.createElement("div", { className: cn("orbit-container", classNames == null ? void 0 : classNames.container) });
default:
return /* @__PURE__ */ import_react24.default.createElement(
"svg",
{
viewBox: "0 0 40 40",
height: "40",
width: "40",
className: cn(
"circle-container",
sizeStyles[size],
classNames == null ? void 0 : classNames.container
)
},
/* @__PURE__ */ import_react24.default.createElement(
"circle",
{
className: cn(
"circle-track",
{
"hawa-stroke-primary-foreground": themeMode === "dark",
"hawa-stroke-primary": themeMode === "light"
},
classNames == null ? void 0 : classNames.track
),
cx: "20",
cy: "20",
r: "17.5",
fill: "none",
strokeWidth: "5px",
pathLength: "100"
}
),
/* @__PURE__ */ import_react24.default.createElement(
"circle",
{
className: cn(
"circle-car",
{
"hawa-stroke-primary-foreground": themeMode === "dark",
"hawa-stroke-primary": themeMode === "light"
},
classNames == null ? void 0 : classNames.car
),
cx: "20",
cy: "20",
r: "17.5",
fill: "none",
pathLength: "100",
strokeWidth: "5px"
}
)
);
}
};
// elements/button/Button.tsx
var buttonVariants = (0, import_class_variance_authority.cva)(
"hawa-inline-flex hawa-items-center hawa-select-none hawa-rounded-md hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-colors 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",
{
variants: {
variant: {
default: "hawa-bg-primary hawa-text-primary-foreground hover:hawa-bg-primary/90",
light: "hawa-bg-primary/20 hawa-text-primary hover:hawa-bg-primary/40",
destructive: "hawa-bg-destructive hawa-text-destructive-foreground hover:hawa-bg-destructive/90",
outline: "hawa-border hawa-border-input hawa-bg-transparent hover:hawa-bg-accent hover:hawa-text-accent-foreground",
secondary: "hawa-bg-secondary hawa-text-secondary-foreground hover:hawa-bg-secondary/80",
ghost: "hover:hawa-bg-accent hover:hawa-text-accent-foreground",
link: "hawa-text-primary hawa-underline-offset-4 hover:hawa-underline",
combobox: "hawa-bg-background hawa-border",
neoBrutalism: "neo-brutalism"
// "hawa-cursor-pointer hawa-transition-all hawa-uppercase hawa-font-mono dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active shadow-color-primary active:shadow-color-primary-active",
},
size: {
default: "hawa-h-10 hawa-px-4 hawa-py-2",
heightless: "hawa-px-4 hawa-py-4",
xs: "hawa-h-fit hawa-min-h-[25px] hawa-py-1 hawa-text-[10px] hawa-px-2 ",
sm: "hawa-h-9 hawa-text-[11px] hawa-rounded-md hawa-px-3",
lg: "hawa-h-11 hawa-rounded-md hawa-px-8",
xl: "hawa-h-14 hawa-rounded-md hawa-px-10",
icon: "hawa-h-10 hawa-w-10",
smallIcon: "hawa-h-7 hawa-w-7"
}
},
defaultVariants: { variant: "default", size: "default" }
}
);
var Button = React17.forwardRef(
({
className,
label,
variant,
size,
asChild = false,
centered = true,
isLoading,
children,
labelProps,
showHelperText = false,
asInput = false,
...props
}, ref) => {
const Comp = "button";
const loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "hawa-bg-primary" : "hawa-bg-primary-foreground";
if (asInput) {
return /* @__PURE__ */ React17.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, label && /* @__PURE__ */ React17.createElement(Label, { ...labelProps }, label), /* @__PURE__ */ React17.createElement(
Comp,
{
className: cn(
buttonVariants({ variant, size, className }),
centered && "hawa-justify-center"
),
ref,
...props
},
isLoading ? /* @__PURE__ */ React17.createElement(
Loading,
{
design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
themeMode: variant === "outline" ? "light" : "dark",
color: loadingColor,
size: size === "sm" || size === "xs" ? "xs" : "button"
}
) : children
), showHelperText && /* @__PURE__ */ React17.createElement(HelperText, { helperText: props.helperText }));
} else {
return /* @__PURE__ */ React17.createElement(
Comp,
{
className: cn(
buttonVariants({ variant, size, className }),
centered && "hawa-justify-center"
),
ref,
...props
},
isLoading ? /* @__PURE__ */ React17.createElement(
Loading,
{
design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
themeMode: variant === "outline" ? "light" : "dark",
color: loadingColor,
size: size === "sm" || size === "xs" ? "xs" : "button"
}
) : children
);
}
}
);
Button.displayName = "Button";
// elements/card/Card.tsx
var React18 = __toESM(require("react"));
var Card = React18.forwardRef(
({
className,
variant = "default",
clickable = false,
asContainer = false,
...props
}, ref) => {
let variantStyles = {
default: cn(
"hawa-rounded-lg hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm",
clickable && "hawa-cursor-pointer hawa-transition-all hover:hawa-drop-shadow-md dark:hover:dark-shadow"
),
neoBrutalism: cn(
"neo-brutalism",
// "hawa-transition-all hawa-uppercase hawa-font-mono dark:hawa-bg-black hawa-font-bold hawa-py-2 hawa-px-4 hawa-rounded hawa-border-2 hawa-border-primary hawa-shadow-color-primary hawa-transition-[hawa-transform_50ms, hawa-box-shadow_50ms] transition-all uppercase font-mono dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms]",
clickable && "hawa-cursor-pointer active:hawa-translate-x-0.5 active:hawa-translate-y-0.5 active:hawa-shadow-color-primary-active active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active"
)
};
return /* @__PURE__ */ React18.createElement(
"div",
{
ref,
className: cn(className, !asContainer && variantStyles[variant]),
...props
}
);
}
);
var CardHeader = React18.forwardRef(
({ className, ...props }, ref) => /* @__PURE__ */ React18.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, /* @__PURE__ */ React18.createElement(
"div",
{
ref,
className: cn(
"hawa-flex hawa-flex-col hawa-space-y-1.5 hawa-p-6",
className
),
...props
}
), props.actions && /* @__PURE__ */ React18.createElement("div", { className: "hawa-p-6" }, props.actions))
);
var CardTitle = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React18.createElement(
"h3",
{
ref,
className: cn("hawa-text-2xl hawa-font-semibold", className),
...props
}
));
var CardDescription = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React18.createElement(
"p",
{
ref,
className: cn("hawa-text-sm hawa-text-muted-foreground", className),
...props
}
));
var CardContent = React18.forwardRef(
({ headless, noPadding, className, ...props }, ref) => /* @__PURE__ */ React18.createElement(
"div",
{
ref,
className: cn(
noPadding ? "hawa-p-0" : "hawa-p-6",
headless ? "hawa-pt-6" : "hawa-pt-0",
className
),
...props
}
)
);
var CardFooter = React18.forwardRef(({ className, noPadding, ...props }, ref) => /* @__PURE__ */ React18.createElement(
"div",
{
ref,
className: cn(
noPadding ? "hawa-p-0" : "hawa-p-6",
"hawa-flex hawa-items-center hawa-pt-0",
className
),
...props
}
));
CardDescription.displayName = "CardDescription";
CardContent.displayName = "CardContent";
CardHeader.displayName = "CardHeader";
CardFooter.displayName = "CardFooter";
CardTitle.displayName = "CardTitle";
Card.displayName = "Card";
// blocks/misc/EmptyState.tsx
var EmptyState = ({ texts, onActionClick }) => {
return /* @__PURE__ */ import_react25.default.createElement(Card, null, /* @__PURE__ */ import_react25.default.createElement(CardContent, { headless: true }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center hawa-text-center" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "hawa-flex hawa-h-10 hawa-w-10 hawa-flex-col hawa-items-center hawa-justify-center hawa-rounded-3xl hawa-bg-primary hawa-text-6xl hawa-font-bold hawa-text-primary-foreground" }, /* @__PURE__ */ import_react25.default.createElement(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 512 512",
height: "0.35em",
width: "0.35em"
},
/* @__PURE__ */ import_react25.default.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__ */ import_react25.default.createElement("div", { className: "hawa-m-2 hawa-text-xl hawa-font-bold" }, (texts == null ? void 0 : texts.youreCaughtUp) || "You're all caught up"))), /* @__PURE__ */ import_react25.default.createElement(CardFooter, null, /* @__PURE__ */ import_react25.default.createElement(Button, { className: "hawa-w-full", onClick: () => onActionClick() }, (texts == null ? void 0 : texts.actionText) || "Go Home")));
};
// blocks/misc/Testimonial.tsx
var import_react26 = __toESM(require("react"));
var Testimonial = () => {
return /* @__PURE__ */ import_react26.default.createElement(Card, null, /* @__PURE__ */ import_react26.default.createElement(CardContent, { headless: true }, /* @__PURE__ */ import_react26.default.createElement("div", null, /* @__PURE__ */ import_react26.default.createElement("p", { className: "mb-4 max-w-sm" }, "The team at Sikka Software is simply amazing. The tech is easy to follow, easy to work with, and infinitely flexible. The solution opportunities created by Tines are endless.")), /* @__PURE__ */ import_react26.default.createElement("div", { className: "flex flex-row gap-4" }, /* @__PURE__ */ import_react26.default.createElement("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none" }, /* @__PURE__ */ import_react26.default.createElement("rect", { width: "48", height: "48", rx: "24", fill: "#45BE8B" }), /* @__PURE__ */ import_react26.default.createElement(
"path",
{
d: "M14.1412 22.4427L17.5803 16.5199C17.7671 16.1981 18.1112 16 18.4834 16H20.8581C21.653 16 22.1565 16.8528 21.7725 17.5488L19.3042 22.0225C19.2202 22.1747 19.1762 22.3458 19.1762 22.5196C19.1762 23.0879 19.6369 23.5486 20.2052 23.5486H21.5827C22.1594 23.5486 22.627 24.0162 22.627 24.5929V31.347C22.627 31.9237 22.1594 32.3913 21.5827 32.3913H15.0443C14.4676 32.3913 14 31.9237 14 31.347V22.9671C14 22.7829 14.0487 22.602 14.1412 22.4427Z",
fill: "#FFFFFF"
}
), /* @__PURE__ */ import_react26.default.createElement(
"path",
{
d: "M25.356 22.4427L28.7951 16.5199C28.982 16.1981 29.326 16 29.6982 16H32.0729C32.8679 16 33.3713 16.8528 32.9873 17.5488L30.5191 22.0225C30.4351 22.1747 30.391 22.3458 30.391 22.5196C30.391 23.0879 30.8518 23.5486 31.4201 23.5486H32.7975C33.3743 23.5486 33.8418 24.0162 33.8418 24.5929V31.347C33.8418 31.9237 33.3743 32.3913 32.7975 32.3913H26.2592C25.6824 32.3913 25.2148 31.9237 25.2148 31.347V22.9671C25.2148 22.7829 25.2636 22.602 25.356 22.4427Z",
fill: "#FFFFFF"
}
)), /* @__PURE__ */ import_react26.default.createElement("span", { className: "border border-l" }), " ", /* @__PURE__ */ import_react26.default.createElement("div", null, /* @__PURE__ */ import_react26.default.createElement("strong", null, "Brent Lassi"), /* @__PURE__ */ import_react26.default.createElement("div", null, " Chief Information Security Officer")))));
};
// blocks/misc/LeadGenerator.tsx
var import_react29 = __toESM(require("react"));
var import_react_hook_form = require("react-hook-form");
// elements/input/Input.tsx
var import_react28 = __toESM(require("react"));
// elements/skeleton/Skeleton.tsx
var import_react27 = __toESM(require("react"));
function Skeleton({
className,
content,
animation = "pulse",
fade,
...props
}) {
const animationStyles = {
none: "hawa-rounded hawa-bg-muted",
pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
};
const fadeStyle = {
bottom: "hawa-mask-fade-bottom",
top: "hawa-mask-fade-top",
right: "hawa-mask-fade-right",
left: "hawa-mask-fade-left "
};
return /* @__PURE__ */ import_react27.default.createElement(
"div",
{
className: cn(
animationStyles[animation],
content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
fade && fadeStyle[fade],
className
),
...props
},
content && content
);
}
// elements/input/Input.tsx
var Input = (0, import_react28.forwardRef)(
({
margin = "none",
width = "full",
preview = false,
forceHideHelperText = false,
labelProps,
placeholder,
showCount,
inputProps,
countPosition = "bottom",
...props
}, ref) => {
var _a;
let marginStyles = {
none: "hawa-mb-0",
normal: "hawa-mb-3",
large: "hawa-mb-5"
};
let widthStyles = {
small: "hawa-w-full hawa-max-w-2xs",
normal: "hawa-w-1/2",
full: "hawa-w-full",
auto: ""
};
let defaultStyle = "hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0";
let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm placeholder:hawa-text-muted-foreground";
const handleChange = (e) => {
let newValue = e.target.value;
if (props.prefixText) {
if (newValue.length < props.prefixText.length) {
newValue = props.prefixText;
} else {
const isSubstring = props.prefixText.startsWith(newValue);
if (!isSubstring && !newValue.startsWith(props.prefixText)) {
newValue = `${props.prefixText}${newValue}`;
}
}
}
if (props.onChange) {
const newEvent = { ...e, target: { ...e.target, value: newValue } };
props.onChange(newEvent);
}
};
return /* @__PURE__ */ import_react28.default.createElement(
"div",
{
className: cn(
defaultStyle,
marginStyles[margin],
widthStyles[width],
props.containerClassName,
"hawa-w-full hawa-gap-2"
)
},
props.label && /* @__PURE__ */ import_react28.default.createElement(Label, { ...labelProps }, props.label),
/* @__PURE__ */ import_react28.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-w-full hawa-items-center" }, props.outsidePrefix && /* @__PURE__ */ import_react28.default.createElement(
"span",
{
className: cn(
"hawa-me-2 hawa-opacity-90",
!forceHideHelperText && "hawa-mb-2"
)
},
props.outsidePrefix
), props.isLoading ? /* @__PURE__ */ import_react28.default.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ import_react28.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : props.isLoadingError ? /* @__PURE__ */ import_react28.default.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ import_react28.default.createElement(
Skeleton,
{
animation: "none",
className: "hawa-h-[40px] hawa-w-full !hawa-bg-destructive/[0.3]",
content: /* @__PURE__ */ import_react28.default.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ import_react28.default.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "hawa-text-destructive"
},
/* @__PURE__ */ import_react28.default.createElement("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
/* @__PURE__ */ import_react28.default.createElement("path", { d: "M12 9v4" }),
/* @__PURE__ */ import_react28.default.createElement("path", { d: "M12 17h.01" })
), /* @__PURE__ */ import_react28.default.createElement("span", null, /* @__PURE__ */ import_react28.default.createElement("span", { className: "hawa-text-destructive" }, props.loadingErrorMesssage || "Error loading data")))
}
)) : /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react28.default.createElement(
"div",
{
className: cn(
"hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800",
preview ? "hawa-opacity-100" : "hawa-opacity-0"
)
}
), /* @__PURE__ */ import_react28.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, /* @__PURE__ */ import_react28.default.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ import_react28.default.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.sta