@eloisallena/web_components 1.0.4 → 1.0.7

package/dist/{web-components.es.js → index.js}

@@ -196,22 +196,35 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 }, l = ({ children: e }) => /* @__PURE__ */ (0, o.jsx)("div", {
 	className: "bg-primary w-full max-w-sm rounded-lg shadow-md overflow-hidden",
 	children: e
-}), u = ({ children: e }) => /* @__PURE__ */ (0, o.jsx)("footer", {
+}), u = ({ title: e, description: t }) => /* @__PURE__ */ (0, o.jsxs)("div", {
+	className: "p-10",
+	children: [/* @__PURE__ */ (0, o.jsx)("h2", {
+		className: "text-lg font-bold mb-2 text-black",
+		children: e
+	}), /* @__PURE__ */ (0, o.jsx)("p", {
+		className: "text-gray text-sm font-normal",
+		children: t
+	})]
+}), d = ({ children: e }) => /* @__PURE__ */ (0, o.jsx)("div", {
+	className: "flex justify-end gap-4 w-full p-4",
+	children: e
+}), f = ({ alt: e, image: t, children: n }) => /* @__PURE__ */ (0, o.jsxs)("div", {
+	className: "relative w-full h-48",
+	children: [/* @__PURE__ */ (0, o.jsx)("img", {
+		src: t,
+		alt: e,
+		className: "w-full h-full object-cover"
+	}), n]
+}), p = ({ children: e }) => /* @__PURE__ */ (0, o.jsx)("footer", {
 	className: "\r\n        w-full\r\n        bg-gray\r\n        text-white\r\n      ",
 	children: /* @__PURE__ */ (0, o.jsx)("div", {
 		className: "\r\n          mx-auto\r\n          max-w-7xl\r\n          grid\r\n          grid-cols-1\r\n          gap-8\r\n          px-6\r\n          py-10\r\n          md:grid-cols-3\r\n        ",
 		children: e
 	})
-}), d = ({ children: e, description: t }) => /* @__PURE__ */ (0, o.jsxs)("div", {
-	className: "flex flex-col gap-4",
-	children: [e, /* @__PURE__ */ (0, o.jsx)("p", {
-		className: "\r\n          max-w-sm\r\n          text-sm\r\n          text-white\r\n        ",
-		children: t
-	})]
-}), f = ({ copyright: e }) => /* @__PURE__ */ (0, o.jsx)("div", {
+}), m = ({ copyright: e }) => /* @__PURE__ */ (0, o.jsx)("div", {
 	className: "\r\n        bg-gray\r\n        text-light-gray\r\n\r\n        border-t\r\n        border-gray\r\n\r\n        py-4\r\n\r\n        text-center\r\n        text-sm\r\n      ",
 	children: e
-}), p = ({ email: e, phone: t, socials: n }) => /* @__PURE__ */ (0, o.jsxs)("div", {
+}), h = ({ email: e, phone: t, socials: n }) => /* @__PURE__ */ (0, o.jsxs)("div", {
 	className: "text-white",
 	children: [
 		/* @__PURE__ */ (0, o.jsx)("h3", {
@@ -235,7 +248,13 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			}, e.id))
 		})
 	]
-}), m = ({ title: e, links: t, onItemClick: n }) => /* @__PURE__ */ (0, o.jsxs)("div", {
+}), g = ({ children: e, description: t }) => /* @__PURE__ */ (0, o.jsxs)("div", {
+	className: "flex flex-col gap-4",
+	children: [e, /* @__PURE__ */ (0, o.jsx)("p", {
+		className: "\r\n          max-w-sm\r\n          text-sm\r\n          text-white\r\n        ",
+		children: t
+	})]
+}), _ = ({ title: e, links: t, onItemClick: n }) => /* @__PURE__ */ (0, o.jsxs)("div", {
 	className: "text-white",
 	children: [/* @__PURE__ */ (0, o.jsx)("h3", {
 		className: "\r\n          mb-3\r\n          text-lg\r\n          font-semibold\r\n        ",
@@ -249,36 +268,13 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			children: e.label
 		}, e.id))
 	})]
-}), h = ({ children: e }) => /* @__PURE__ */ (0, o.jsx)("form", {
-	className: "w-full max-w-sm",
-	children: /* @__PURE__ */ (0, o.jsx)("div", {
-		className: "flex flex-col gap-1 ",
-		children: e
-	})
-}), g = ({ children: e, style: t }) => /* @__PURE__ */ (0, o.jsx)("header", {
+}), v = ({ children: e, style: t }) => /* @__PURE__ */ (0, o.jsx)("header", {
 	className: `w-full bg-white border-b border-light-gray shadow-sm ${t}`,
 	children: /* @__PURE__ */ (0, o.jsx)("div", {
 		className: "flex items-center justify-between px-6 py-4",
 		children: e
 	})
-}), _ = ({ logo: e = "/logo.svg", title: t = "my Company", style: n, alt: r = "" }) => /* @__PURE__ */ (0, o.jsxs)("div", {
-	className: `
-        flex
-        items-center
-        gap-2
-        sm:gap-3
-        shrink-0
-        ${n || ""}
-      `,
-	children: [/* @__PURE__ */ (0, o.jsx)("img", {
-		src: e,
-		alt: r,
-		className: "\r\n          h-8\r\n          w-8\r\n          sm:h-10\r\n          sm:w-10\r\n          object-contain\r\n        "
-	}), /* @__PURE__ */ (0, o.jsx)("h1", {
-		className: "\r\n          text-sm\r\n          sm:text-lg\r\n          font-bold\r\n          text-blue\r\n        ",
-		children: t
-	})]
-}), v = ({ navDrawer: e = [], style: n, onItemClick: r }) => {
+}), y = ({ navDrawer: e = [], style: n, onItemClick: r }) => {
 	let [i, a] = t(!1);
 	return /* @__PURE__ */ (0, o.jsxs)(o.Fragment, { children: [
 		/* @__PURE__ */ (0, o.jsx)("button", {
@@ -348,7 +344,42 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			})]
 		})
 	] });
-}, y = ({ isOpen: e, onClose: t, title: n, children: r }) => e ? /* @__PURE__ */ (0, o.jsxs)(o.Fragment, { children: [/* @__PURE__ */ (0, o.jsx)("div", {
+}, b = ({ logo: e = "/logo.svg", title: t = "my Company", style: n, alt: r = "" }) => /* @__PURE__ */ (0, o.jsxs)("div", {
+	className: `
+    flex 
+    items-center 
+    gap-2 
+    sm:gap-3 
+    shrink-0 
+    ${n || ""}
+    `,
+	children: [/* @__PURE__ */ (0, o.jsx)("img", {
+		src: e,
+		alt: r,
+		className: "\r\n        h-8\r\n        w-8\r\n        sm:h-10\r\n        sm:w-10\r\n        object-contain"
+	}), /* @__PURE__ */ (0, o.jsx)("h1", {
+		className: "text-sm sm:text-lg font-bold text-blue",
+		children: t
+	})]
+}), x = ({ navBar: e = [], style: t, onItemClick: n }) => /* @__PURE__ */ (0, o.jsx)("nav", {
+	className: `
+        hidden
+        md:flex
+        gap-12
+        justify-center
+        items-center
+        absolute
+        left-1/2
+        -translate-x-1/2
+        ${t || ""}
+      `,
+	children: e.map((e) => /* @__PURE__ */ (0, o.jsx)("a", {
+		href: e.href || "#",
+		onClick: () => n?.(e.label),
+		className: "\r\n            text-lg\r\n            font-bold\r\n            text-black\r\n            hover:text-green\r\n            cursor-pointer\r\n          ",
+		children: e.label
+	}, e.id))
+}), S = ({ isOpen: e, onClose: t, title: n, children: r }) => e ? /* @__PURE__ */ (0, o.jsxs)(o.Fragment, { children: [/* @__PURE__ */ (0, o.jsx)("div", {
 	className: "fixed inset-0 z-40 bg-black/40",
 	onClick: t
 }), /* @__PURE__ */ (0, o.jsx)("div", {
@@ -385,7 +416,7 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			children: r
 		})]
 	})
-})] }) : null, b = ({ placeholder: e = "Search...", style: n, children: r }) => {
+})] }) : null, C = ({ placeholder: e = "Search...", style: n, children: r }) => {
 	let [i, a] = t(!1);
 	return /* @__PURE__ */ (0, o.jsxs)("div", {
 		className: `relative ${n || ""}`,
@@ -427,7 +458,7 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 					})
 				})
 			}),
-			/* @__PURE__ */ (0, o.jsx)(y, {
+			/* @__PURE__ */ (0, o.jsx)(S, {
 				isOpen: i,
 				title: "Search",
 				onClose: () => a(!1),
@@ -455,45 +486,8 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			})
 		]
 	});
-}, x = ({ navBar: e = [], style: t, onItemClick: n }) => /* @__PURE__ */ (0, o.jsx)("nav", {
-	className: `
-        hidden
-        md:flex
-        gap-12
-        justify-center
-        items-center
-        absolute
-        left-1/2
-        -translate-x-1/2
-        ${t || ""}
-      `,
-	children: e.map((e) => /* @__PURE__ */ (0, o.jsx)("a", {
-		href: e.href || "#",
-		onClick: () => n?.(e.label),
-		className: "\r\n            text-lg\r\n            font-bold\r\n            text-black\r\n            hover:text-green\r\n            cursor-pointer\r\n          ",
-		children: e.label
-	}, e.id))
-}), S = "border-red", C = "text-red", w = "border-gray", T = ({ id: e, labelText: t, placeholder: n, type: r, error: i, helperText: a }) => /* @__PURE__ */ (0, o.jsxs)("div", {
-	className: "flex flex-col gap-1",
-	children: [
-		/* @__PURE__ */ (0, o.jsx)("label", {
-			htmlFor: e,
-			className: "text-sm font-medium text-gray",
-			children: t
-		}),
-		/* @__PURE__ */ (0, o.jsx)("input", {
-			id: e,
-			placeholder: n,
-			type: r,
-			className: `block w-full px-3 py-2.5 bg-neutral-secondary-medium border ${i ? S : w} text-heading text-sm rounded-base shadow-xs placeholder:text-body focus:ring-brand focus:border-brand`
-		}),
-		a && /* @__PURE__ */ (0, o.jsx)("p", {
-			className: `${i ? C : "text-light-gray"} text-xs`,
-			children: a
-		})
-	]
-}), E = ({ id: e, label: n, required: r, disabled: i, defaultChecked: a, error: s, helperText: c }) => {
-	let [l, u] = t(a || !1);
+}, w = ({ id: e, label: n, required: r, disabled: i, defaultChecked: a, error: s, helperText: c, onChange: l }) => {
+	let [u, d] = t(a || !1);
 	return /* @__PURE__ */ (0, o.jsxs)("div", {
 		className: "flex flex-col gap-1",
 		children: [/* @__PURE__ */ (0, o.jsxs)("div", {
@@ -501,24 +495,16 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			children: [/* @__PURE__ */ (0, o.jsx)("input", {
 				id: e,
 				type: "checkbox",
-				checked: l,
+				checked: u,
 				onChange: (e) => {
 					let t = e.target.checked;
-					u(t);
+					d(t), l?.(t);
 				},
 				disabled: i,
-				className: `
-            w-4 h-4 border rounded-xs
-            bg-neutral-secondary-medium
-            focus:ring-2 focus:ring-brand-soft
-            ${i ? "border-light cursor-not-allowed" : "border-default-medium hover:cursor-pointer"}
-          `
+				className: `w-4 h-4 border rounded-xs bg-neutral-secondary-medium focus:ring-2 focus:ring-brand-soft ${i ? "border-light cursor-not-allowed" : "border-default-medium hover:cursor-pointer"}`
 			}), /* @__PURE__ */ (0, o.jsxs)("label", {
 				htmlFor: e,
-				className: `
-            select-none ms-2 text-sm font-medium
-            ${i ? "text-fg-disabled text-light-gray" : "text-heading"}
-          `,
+				className: `select-none ms-2 text-sm font-medium ${i ? "text-light-gray" : "text-heading"}`,
 				children: [
 					n,
 					" ",
@@ -528,12 +514,12 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 					})
 				]
 			})]
-		}), /* @__PURE__ */ (0, o.jsx)("div", {
-			className: s ? "text-red text-sm font-medium" : "text-gray text-sm font-medium",
+		}), c && /* @__PURE__ */ (0, o.jsx)("div", {
+			className: `text-sm font-medium ${s ? "text-red" : "text-gray"}`,
 			children: c
 		})]
 	});
-}, D = ({ label: e, options: t, required: n, disabled: r, helperText: i, error: a, value: s, onChange: c }) => /* @__PURE__ */ (0, o.jsxs)("div", {
+}, T = ({ label: e, options: t, required: n, disabled: r, helperText: i, error: a, value: s, onChange: c }) => /* @__PURE__ */ (0, o.jsxs)("div", {
 	className: "w-full flex flex-col gap-1",
 	children: [
 		/* @__PURE__ */ (0, o.jsxs)("label", {
@@ -545,15 +531,10 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			]
 		}),
 		/* @__PURE__ */ (0, o.jsx)("select", {
-			className: `h-10 border-r-8 border-transparent px-4 outline outline-neutral-700 block w-full p-2 bg-neutral-secondary-medium
-         border border-default-medium text-heading text-sm font-normal rounded-base focus:ring-brand focus:border-brand shadow-xs 
-         placeholder:text-body
-         ${r ? "cursor-not-allowed" : "hover:cursor-pointer"}`,
+			className: `h-10 px-4 w-full bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base shadow-xs focus:ring-brand focus:border-brand ${r ? "cursor-not-allowed" : "hover:cursor-pointer"}`,
 			disabled: r,
-			onChange: (e) => {
-				c && c(e.target.value);
-			},
 			value: s,
+			onChange: (e) => c?.(e.target.value),
 			children: t.map((e) => /* @__PURE__ */ (0, o.jsx)("option", {
 				value: e.name,
 				children: e.value
@@ -564,7 +545,34 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			children: i
 		})
 	]
-}), O = ({ id: e, title: t, children: n, style: r }) => /* @__PURE__ */ (0, o.jsx)("section", {
+}), E = "border-red", D = "text-red", O = "border-gray", k = ({ id: e, labelText: t, placeholder: n, type: r, error: i, helperText: a }) => /* @__PURE__ */ (0, o.jsxs)("div", {
+	className: "flex flex-col gap-1",
+	children: [
+		/* @__PURE__ */ (0, o.jsx)("label", {
+			htmlFor: e,
+			className: "text-sm font-medium text-gray",
+			children: t
+		}),
+		/* @__PURE__ */ (0, o.jsx)("input", {
+			id: e,
+			placeholder: n,
+			type: r,
+			className: `block w-full px-3 py-2.5 bg-neutral-secondary-medium border ${i ? E : O} text-heading text-sm rounded-base shadow-xs placeholder:text-body focus:ring-brand focus:border-brand`
+		}),
+		a && /* @__PURE__ */ (0, o.jsx)("p", {
+			className: `${i ? D : "text-light-gray"} text-xs`,
+			children: a
+		})
+	]
+}), A = ({ children: e, onSubmit: t, className: n = "", ...r }) => /* @__PURE__ */ (0, o.jsx)("form", {
+	onSubmit: t,
+	className: `w-full max-w-sm ${n}`,
+	...r,
+	children: /* @__PURE__ */ (0, o.jsx)("div", {
+		className: "flex flex-col gap-1",
+		children: e
+	})
+}), j = ({ id: e, title: t, children: n, style: r }) => /* @__PURE__ */ (0, o.jsx)("section", {
 	id: e,
 	className: `
         min-h-screen
@@ -584,7 +592,87 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			children: t
 		}), n]
 	})
-}), k = ({ items: e }) => /* @__PURE__ */ (0, o.jsx)("nav", {
+}), M = ({ children: e, style: t, maxRows: n = 5 }) => /* @__PURE__ */ (0, o.jsx)("div", {
+	className: `
+        w-full
+        overflow-hidden
+        rounded-md
+        bg-white
+       shadow-lg
+        ${t || ""}
+      `,
+	children: /* @__PURE__ */ (0, o.jsx)("div", {
+		className: "overflow-auto",
+		style: { maxHeight: `${n * 56}px` },
+		children: /* @__PURE__ */ (0, o.jsx)("table", {
+			className: "w-full border-separate border-spacing-0",
+			children: e
+		})
+	})
+}), N = ({ children: e, style: t }) => /* @__PURE__ */ (0, o.jsx)("tbody", {
+	className: t,
+	children: e
+}), P = ({ children: e, align: t = "left", style: n }) => /* @__PURE__ */ (0, o.jsx)("td", {
+	className: `
+        px-4 
+        py-3
+        text-sm
+        ${t === "center" ? "text-center" : ""}
+        ${t === "right" ? "text-right" : ""}
+        ${t === "left" ? "text-left" : ""}
+        ${n || ""}
+      `,
+	children: e
+}), F = {
+	left: "text-left",
+	center: "text-center",
+	right: "text-right"
+}, I = ({ rowData: e }) => /* @__PURE__ */ (0, o.jsx)("thead", { children: /* @__PURE__ */ (0, o.jsx)("tr", {
+	className: "\r\n          sticky\r\n          top-0\r\n          z-10\r\n          bg-white\r\n        ",
+	children: e.map((e) => /* @__PURE__ */ (0, o.jsx)("th", {
+		className: `
+              px-3 sm:px-4 md:px-6
+              py-2 md:py-4
+              text-xs sm:text-sm
+              text-gray
+              font-semibold
+
+              border-b
+              border-light-gray
+              ${F[e.align || "left"]}
+              ${e.style || ""}
+            `,
+		children: e.value
+	}, e.key))
+}) }), L = ({ rowData: e, style: t }) => /* @__PURE__ */ (0, o.jsx)("tr", {
+	className: `
+
+        transition-colors
+        hover:bg-gray-50
+          [&:last-child_td]:border-b-0
+
+       
+        ${t || ""}
+      `,
+	children: e.map((e) => /* @__PURE__ */ (0, o.jsx)("td", {
+		className: `
+            px-3 sm:px-4 md:px-6
+            py-2 md:py-4
+            text-xs sm:text-sm
+            text-gray
+            whitespace-nowrap
+
+            border-b
+            border-light-gray
+          
+        
+            
+            ${F[e.align || "left"]}
+            ${e.style || ""}
+          `,
+		children: e.value
+	}, e.key))
+}), R = ({ items: e }) => /* @__PURE__ */ (0, o.jsx)("nav", {
 	"aria-label": "Breadcrumb",
 	children: /* @__PURE__ */ (0, o.jsx)("ol", {
 		className: "\r\n          flex\r\n          flex-wrap\r\n          items-center\r\n          gap-2\r\n          text-sm\r\n        ",
@@ -606,7 +694,7 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			}, t.id);
 		})
 	})
-}), A = ({ children: t }) => {
+}), z = ({ children: t }) => {
 	let [n, r] = e.useState("Home"), i = [
 		{
 			id: 1,
@@ -634,9 +722,9 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		children: [
 			/* @__PURE__ */ (0, o.jsx)("div", {
 				className: "sticky top-0 z-50 bg-white",
-				children: /* @__PURE__ */ (0, o.jsxs)(g, { children: [/* @__PURE__ */ (0, o.jsxs)("div", {
+				children: /* @__PURE__ */ (0, o.jsxs)(v, { children: [/* @__PURE__ */ (0, o.jsxs)("div", {
 					className: "flex items-center gap-4 lg:gap-10",
-					children: [/* @__PURE__ */ (0, o.jsx)(_, {
+					children: [/* @__PURE__ */ (0, o.jsx)(b, {
 						logo: "/icon.svg",
 						title: "QTEK"
 					}), /* @__PURE__ */ (0, o.jsx)(x, {
@@ -645,7 +733,7 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 					})]
 				}), /* @__PURE__ */ (0, o.jsxs)("div", {
 					className: "flex shrink-0 items-center gap-2 sm:gap-3",
-					children: [/* @__PURE__ */ (0, o.jsx)(b, {}), /* @__PURE__ */ (0, o.jsx)(v, {
+					children: [/* @__PURE__ */ (0, o.jsx)(C, {}), /* @__PURE__ */ (0, o.jsx)(y, {
 						navDrawer: i,
 						onItemClick: r
 					})]
@@ -653,30 +741,30 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			}),
 			/* @__PURE__ */ (0, o.jsx)("div", {
 				className: " \r\n            mx-auto\r\n            max-w-full\r\n            px-6\r\n            py-4\r\n            sticky\r\n            z-40\r\n            top-16\r\n            bg-light-gray",
-				children: /* @__PURE__ */ (0, o.jsx)(k, { items: [{
+				children: /* @__PURE__ */ (0, o.jsx)(R, { items: [{
 					id: 1,
 					label: n,
 					href: "#"
 				}] })
 			}),
 			t,
-			/* @__PURE__ */ (0, o.jsxs)(u, { children: [
-				/* @__PURE__ */ (0, o.jsx)(d, {
+			/* @__PURE__ */ (0, o.jsxs)(p, { children: [
+				/* @__PURE__ */ (0, o.jsx)(g, {
 					description: "Building modern and scalable digital solutions.",
 					children: /* @__PURE__ */ (0, o.jsx)("div", {
 						className: "scale-150 origin-left",
-						children: /* @__PURE__ */ (0, o.jsx)(_, {
+						children: /* @__PURE__ */ (0, o.jsx)(b, {
 							logo: "/icon.svg",
 							title: "QTEK"
 						})
 					})
 				}),
-				/* @__PURE__ */ (0, o.jsx)(m, {
+				/* @__PURE__ */ (0, o.jsx)(_, {
 					title: "Quick Links",
 					links: i,
 					onItemClick: r
 				}),
-				/* @__PURE__ */ (0, o.jsx)(p, {
+				/* @__PURE__ */ (0, o.jsx)(h, {
 					email: "hello@qtek.com",
 					phone: "+63 900 000 0000",
 					socials: [
@@ -697,90 +785,10 @@ var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 						}
 					]
 				}),
-				/* @__PURE__ */ (0, o.jsx)(f, { copyright: "© 2026 QTEK. All rights reserved." })
+				/* @__PURE__ */ (0, o.jsx)(m, { copyright: "© 2026 QTEK. All rights reserved." })
 			] })
 		]
 	});
-}, j = ({ children: e, style: t, maxRows: n = 5 }) => /* @__PURE__ */ (0, o.jsx)("div", {
-	className: `
-        w-full
-        overflow-hidden
-        rounded-md
-        bg-white
-       shadow-lg
-        ${t || ""}
-      `,
-	children: /* @__PURE__ */ (0, o.jsx)("div", {
-		className: "overflow-auto",
-		style: { maxHeight: `${n * 56}px` },
-		children: /* @__PURE__ */ (0, o.jsx)("table", {
-			className: "w-full border-separate border-spacing-0",
-			children: e
-		})
-	})
-}), M = {
-	left: "text-left",
-	center: "text-center",
-	right: "text-right"
-}, N = ({ rowData: e }) => /* @__PURE__ */ (0, o.jsx)("thead", { children: /* @__PURE__ */ (0, o.jsx)("tr", {
-	className: "\r\n          sticky\r\n          top-0\r\n          z-10\r\n          bg-white\r\n        ",
-	children: e.map((e) => /* @__PURE__ */ (0, o.jsx)("th", {
-		className: `
-              px-3 sm:px-4 md:px-6
-              py-2 md:py-4
-              text-xs sm:text-sm
-              text-gray
-              font-semibold
-
-              border-b
-              border-light-gray
-              ${M[e.align || "left"]}
-              ${e.style || ""}
-            `,
-		children: e.value
-	}, e.key))
-}) }), P = ({ children: e, style: t }) => /* @__PURE__ */ (0, o.jsx)("tbody", {
-	className: t,
-	children: e
-}), F = ({ rowData: e, style: t }) => /* @__PURE__ */ (0, o.jsx)("tr", {
-	className: `
-
-        transition-colors
-        hover:bg-gray-50
-          [&:last-child_td]:border-b-0
-
-       
-        ${t || ""}
-      `,
-	children: e.map((e) => /* @__PURE__ */ (0, o.jsx)("td", {
-		className: `
-            px-3 sm:px-4 md:px-6
-            py-2 md:py-4
-            text-xs sm:text-sm
-            text-gray
-            whitespace-nowrap
-
-            border-b
-            border-light-gray
-          
-        
-            
-            ${M[e.align || "left"]}
-            ${e.style || ""}
-          `,
-		children: e.value
-	}, e.key))
-}), I = ({ children: e, align: t = "left", style: n }) => /* @__PURE__ */ (0, o.jsx)("td", {
-	className: `
-        px-4 
-        py-3
-        text-sm
-        ${t === "center" ? "text-center" : ""}
-        ${t === "right" ? "text-right" : ""}
-        ${t === "left" ? "text-left" : ""}
-        ${n || ""}
-      `,
-	children: e
-});
+};
 //#endregion
-export { k as Breadcrumbs, c as Button, l as Card, u as Cfooter, h as Cform, g as Cheader, E as CheckBox, j as Ctable, v as Drawer, f as FooterBottom, p as FooterContact, d as FooterIcon, _ as Icon, A as LandingLayout, s as Loader, y as Modal, x as NavBar, m as QuickLink, b as SearchBar, O as Section, D as Select, P as TableBody, I as TableCell, N as TableHead, F as TableRow, T as TextField };
+export { R as Breadcrumbs, c as Button, l as Card, u as CardContent, d as CardFooter, f as CardImage, p as Cfooter, A as Cform, v as Cheader, w as CheckBox, M as Ctable, y as Drawer, m as FooterBottom, h as FooterContact, g as FooterIcon, b as Icon, z as LandingLayout, s as Loader, S as Modal, x as NavBar, _ as QuickLink, C as SearchBar, j as Section, T as Select, N as TableBody, P as TableCell, I as TableHead, L as TableRow, k as TextField, F as alignment };

package/dist/src/component/breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-interface BreadcrumbsProps {
+export interface BreadcrumbsProps {
     items: {
         id: number;
         label: string;
@@ -6,4 +6,3 @@ interface BreadcrumbsProps {
     }[];
 }
 export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
-export {};

package/dist/src/component/breadcrumbs/index.d.ts

@@ -1 +1,2 @@
 export { Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbsProps } from './Breadcrumbs';

package/dist/src/component/button/index.d.ts

@@ -1 +1,2 @@
 export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/src/component/card/Card.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-interface CardProps {
+export interface CardProps {
     children?: React.ReactNode;
 }
 export declare const Card: React.FC<CardProps>;
-export {};

package/dist/src/component/card/CardContent.d.ts

@@ -1,6 +1,5 @@
-interface CardContentProps {
+export interface CardContentProps {
     title: string;
     description: string;
 }
 export declare const CardContent: React.FC<CardContentProps>;
-export {};

package/dist/src/component/card/CardFooter.d.ts

@@ -1,5 +1,4 @@
-interface CardFooterProps {
+export interface CardFooterProps {
     children?: React.ReactNode;
 }
 export declare const CardFooter: React.FC<CardFooterProps>;
-export {};

package/dist/src/component/card/CardImage.d.ts

@@ -1,7 +1,7 @@
-interface CardImageProps {
+import { default as React } from 'react';
+export interface CardImageProps {
     alt: string;
     image: string;
     children?: React.ReactNode;
 }
 export declare const CardImage: React.FC<CardImageProps>;
-export {};

package/dist/src/component/card/index.d.ts

@@ -1,4 +1,8 @@
 export { Card } from './Card';
+export type { CardProps } from './Card';
 export { CardContent } from './CardContent';
-export { CardImage } from './CardImage';
+export type { CardContentProps } from './CardContent';
 export { CardFooter } from './CardFooter';
+export type { CardFooterProps } from './CardFooter';
+export { CardImage } from './CardImage';
+export type { CardImageProps } from './CardImage';

package/dist/src/component/footer/Cfooter.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-interface CfooterProps {
+export interface CfooterProps {
     children?: ReactNode;
 }
 export declare const Cfooter: ({ children }: CfooterProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/component/footer/FooterBottom.d.ts

@@ -1,5 +1,4 @@
-interface FooterBottomProps {
+export interface FooterBottomProps {
     copyright: string;
 }
 export declare const FooterBottom: React.FC<FooterBottomProps>;
-export {};

package/dist/src/component/footer/FooterContact.d.ts

@@ -1,4 +1,4 @@
-interface FooterContactProps {
+export interface FooterContactProps {
     email: string;
     phone: string;
     socials: {
@@ -8,4 +8,3 @@ interface FooterContactProps {
     }[];
 }
 export declare const FooterContact: ({ email, phone, socials, }: FooterContactProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/component/footer/FooterIcon.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
-interface FooterIconProps {
+export interface FooterIconProps {
     children?: ReactNode;
     description: string;
 }
 export declare const FooterIcon: ({ children, description, }: FooterIconProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/component/footer/QuickLink.d.ts

@@ -1,4 +1,4 @@
-interface QuickLinkProps {
+export interface QuickLinkProps {
     title: string;
     links: {
         id: number;
@@ -8,4 +8,3 @@ interface QuickLinkProps {
     onItemClick?: (label: string) => void;
 }
 export declare const QuickLink: ({ title, links, onItemClick, }: QuickLinkProps) => import("react/jsx-runtime").JSX.Element;
-export {};