@eloisallena/web_components 1.0.6 → 1.0.7

package/dist/index.js

@@ -1,26 +1,794 @@
-export { Button } from './component/button';
-export { Card } from './component/card';
-export { Cfooter } from './component/footer';
-export { FooterIcon } from './component/footer';
-export { FooterBottom } from './component/footer';
-export { FooterContact } from './component/footer';
-export { QuickLink } from './component/footer';
-export { Cform } from './component/form';
-export { Cheader } from './component/header';
-export { Icon } from './component/header';
-export { Drawer } from './component/header';
-export { SearchBar } from './component/header';
-export { NavBar } from './component/header';
-export { Modal } from './component/modal';
-export { TextField } from "./component/input";
-export { CheckBox } from "./component/input";
-export { Select } from "./component/input";
-export { Section } from './component/section';
-export { Loader } from './component/spinner';
-export { LandingLayout } from './component/stories';
-export { Ctable } from './component/table';
-export { TableBody } from './component/table';
-export { TableCell } from './component/table';
-export { TableHead } from './component/table';
-export { TableRow } from './component/table';
-export { Breadcrumbs } from './component/breadcrumbs';
+import e, { useState as t } from "react";
+//#region \0rolldown/runtime.js
+var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), r = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+}), i = /* @__PURE__ */ n(((e) => {
+	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+	function r(e, n, r) {
+		var i = null;
+		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
+		else r = n;
+		return n = r.ref, {
+			$$typeof: t,
+			type: e,
+			key: i,
+			ref: n === void 0 ? null : n,
+			props: r
+		};
+	}
+	e.Fragment = n, e.jsx = r, e.jsxs = r;
+})), a = /* @__PURE__ */ n(((e) => {
+	process.env.NODE_ENV !== "production" && (function() {
+		function t(e) {
+			if (e == null) return null;
+			if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
+			if (typeof e == "string") return e;
+			switch (e) {
+				case v: return "Fragment";
+				case b: return "Profiler";
+				case y: return "StrictMode";
+				case w: return "Suspense";
+				case T: return "SuspenseList";
+				case O: return "Activity";
+			}
+			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
+				case _: return "Portal";
+				case S: return e.displayName || "Context";
+				case x: return (e._context.displayName || "Context") + ".Consumer";
+				case C:
+					var n = e.render;
+					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
+				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
+				case D:
+					n = e._payload, e = e._init;
+					try {
+						return t(e(n));
+					} catch {}
+			}
+			return null;
+		}
+		function n(e) {
+			return "" + e;
+		}
+		function i(e) {
+			try {
+				n(e);
+				var t = !1;
+			} catch {
+				t = !0;
+			}
+			if (t) {
+				t = console;
+				var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+				return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
+			}
+		}
+		function a(e) {
+			if (e === v) return "<>";
+			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
+			try {
+				var n = t(e);
+				return n ? "<" + n + ">" : "<...>";
+			} catch {
+				return "<...>";
+			}
+		}
+		function o() {
+			var e = A.A;
+			return e === null ? null : e.getOwner();
+		}
+		function s() {
+			return Error("react-stack-top-frame");
+		}
+		function c(e) {
+			if (j.call(e, "key")) {
+				var t = Object.getOwnPropertyDescriptor(e, "key").get;
+				if (t && t.isReactWarning) return !1;
+			}
+			return e.key !== void 0;
+		}
+		function l(e, t) {
+			function n() {
+				P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
+			}
+			n.isReactWarning = !0, Object.defineProperty(e, "key", {
+				get: n,
+				configurable: !0
+			});
+		}
+		function u() {
+			var e = t(this.type);
+			return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
+		}
+		function d(e, t, n, r, i, a) {
+			var o = n.ref;
+			return e = {
+				$$typeof: g,
+				type: e,
+				key: t,
+				props: n,
+				_owner: r
+			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				value: null
+			}) : Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				get: u
+			}), e._store = {}, Object.defineProperty(e._store, "validated", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: 0
+			}), Object.defineProperty(e, "_debugInfo", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: null
+			}), Object.defineProperty(e, "_debugStack", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: i
+			}), Object.defineProperty(e, "_debugTask", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: a
+			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+		}
+		function f(e, n, r, a, s, u) {
+			var f = n.children;
+			if (f !== void 0) if (a) if (M(f)) {
+				for (a = 0; a < f.length; a++) p(f[a]);
+				Object.freeze && Object.freeze(f);
+			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+			else p(f);
+			if (j.call(n, "key")) {
+				f = t(e);
+				var m = Object.keys(n).filter(function(e) {
+					return e !== "key";
+				});
+				a = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + a] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", a, f, m, f), R[f + a] = !0);
+			}
+			if (f = null, r !== void 0 && (i(r), f = "" + r), c(n) && (i(n.key), f = "" + n.key), "key" in n) for (var h in r = {}, n) h !== "key" && (r[h] = n[h]);
+			else r = n;
+			return f && l(r, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, r, o(), s, u);
+		}
+		function p(e) {
+			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+		}
+		function m(e) {
+			return typeof e == "object" && !!e && e.$$typeof === g;
+		}
+		var h = r("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
+			return null;
+		};
+		h = { react_stack_bottom_frame: function(e) {
+			return e();
+		} };
+		var P, F = {}, I = h.react_stack_bottom_frame.bind(h, s)(), L = N(a(s)), R = {};
+		e.Fragment = v, e.jsx = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(a(e)) : L);
+		}, e.jsxs = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(a(e)) : L);
+		};
+	})();
+})), o = (/* @__PURE__ */ n(((e, t) => {
+	process.env.NODE_ENV === "production" ? t.exports = i() : t.exports = a();
+})))(), s = () => /* @__PURE__ */ (0, o.jsx)("span", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white" }), c = ({ variant: e = "primary", label: t, isLoading: n = !1, disabled: r = !1, onClick: i }) => {
+	let a = {
+		primary: "bg-primary-button text-primary",
+		secondary: "bg-secondary-button text-primary",
+		restore: "bg-restore-button text-primary",
+		delete: "bg-delete-button text-primary",
+		disabled: "bg-disabled-button text-primary"
+	}, c = n ? /* @__PURE__ */ (0, o.jsx)(s, {}) : null, l = r || n;
+	return /* @__PURE__ */ (0, o.jsx)("div", { children: /* @__PURE__ */ (0, o.jsxs)("button", {
+		className: `${a[e]} flex items-center gap-3 px-4 py-2 rounded-2xl text-sm font-medium w-full justify-center md:w-70 lg:w-25
+       ${l ? "cursor-not-allowed opacity-50" : "hover:cursor-pointer"}`,
+		disabled: l,
+		onClick: i,
+		children: [c, 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 = ({ 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
+	})
+}), 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
+}), h = ({ email: e, phone: t, socials: 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        ",
+			children: "Contact"
+		}),
+		/* @__PURE__ */ (0, o.jsxs)("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ (0, o.jsx)("p", { children: e }), /* @__PURE__ */ (0, o.jsx)("p", { children: t })]
+		}),
+		/* @__PURE__ */ (0, o.jsx)("h4", {
+			className: "\r\n          mt-5\r\n          mb-2\r\n          font-medium\r\n        ",
+			children: "Follow Us"
+		}),
+		/* @__PURE__ */ (0, o.jsx)("div", {
+			className: "flex flex-wrap gap-3",
+			children: n.map((e) => /* @__PURE__ */ (0, o.jsx)("a", {
+				href: e.href,
+				className: "hover:underline",
+				children: e.label
+			}, e.id))
+		})
+	]
+}), 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        ",
+		children: e
+	}), /* @__PURE__ */ (0, o.jsx)("div", {
+		className: "flex flex-col gap-2",
+		children: t.map((e) => /* @__PURE__ */ (0, o.jsx)("a", {
+			href: e.href,
+			onClick: () => n?.(e.label),
+			className: "hover:underline",
+			children: e.label
+		}, e.id))
+	})]
+}), 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
+	})
+}), 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", {
+			onClick: () => a(!0),
+			className: " flex md:hidden items-center justify-center h-10 w-10 rounded-md hover:bg-gray-100",
+			children: /* @__PURE__ */ (0, o.jsx)("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 24 24",
+				fill: "currentColor",
+				className: "\r\n            h-6\r\n            w-6\r\n            text-gray-700\r\n          ",
+				children: /* @__PURE__ */ (0, o.jsx)("path", {
+					fillRule: "evenodd",
+					d: "M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z",
+					clipRule: "evenodd"
+				})
+			})
+		}),
+		i && /* @__PURE__ */ (0, o.jsx)("div", {
+			onClick: () => a(!1),
+			className: "fixed inset-0 z-40 bg-black/40 md:hidden"
+		}),
+		/* @__PURE__ */ (0, o.jsxs)("aside", {
+			className: `
+          fixed top-0 
+          left-0 z-50 
+          h-screen w-65
+           bg-white 
+           shadow-lg 
+          transition-transform duration-300
+
+          ${i ? "translate-x-0" : "-translate-x-full"}
+
+          md:hidden
+
+          ${n || ""}
+        `,
+			children: [/* @__PURE__ */ (0, o.jsxs)("div", {
+				className: "\r\n            flex\r\n            items-center\r\n            justify-between\r\n\r\n            border-b\r\n            border-light-gray\r\n\r\n            px-5\r\n            py-4\r\n          ",
+				children: [/* @__PURE__ */ (0, o.jsx)("h2", {
+					className: "text-lg font-semibold",
+					children: "Menu"
+				}), /* @__PURE__ */ (0, o.jsx)("button", {
+					onClick: () => a(!1),
+					className: "\r\n              flex\r\n              items-center\r\n              justify-center\r\n\r\n              h-10\r\n              w-10\r\n\r\n              rounded-md\r\n\r\n              hover:bg-gray-100\r\n            ",
+					children: /* @__PURE__ */ (0, o.jsx)("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						viewBox: "0 0 24 24",
+						fill: "currentColor",
+						className: "\r\n                h-6\r\n                w-6\r\n\r\n                text-gray-700\r\n              ",
+						children: /* @__PURE__ */ (0, o.jsx)("path", {
+							fillRule: "evenodd",
+							d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 01-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06Z",
+							clipRule: "evenodd"
+						})
+					})
+				})]
+			}), /* @__PURE__ */ (0, o.jsx)("div", {
+				className: "flex flex-col p-4",
+				children: e.map((e) => /* @__PURE__ */ (0, o.jsx)("a", {
+					href: e.href || "#",
+					onClick: () => {
+						r?.(e.label), a(!1);
+					},
+					className: "\r\n                rounded-md\r\n                px-4\r\n                py-3\r\n                hover:bg-gray-100\r\n              ",
+					children: e.label
+				}, e.id))
+			})]
+		})
+	] });
+}, 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", {
+	className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+	children: /* @__PURE__ */ (0, o.jsxs)("div", {
+		className: "w-full max-w-md bg-white shadow-lg",
+		role: "dialog",
+		"aria-modal": "true",
+		children: [/* @__PURE__ */ (0, o.jsxs)("div", {
+			className: "flex items-center justify-between border-b border-gray-200 px-5 py-4",
+			children: [/* @__PURE__ */ (0, o.jsx)("h2", {
+				className: "text-lg font-semibold",
+				children: n
+			}), /* @__PURE__ */ (0, o.jsx)("button", {
+				onClick: t,
+				className: "flex h-10 w-10 items-center justify-center hover:bg-gray-100 rounded-md",
+				"aria-label": "Close modal",
+				children: /* @__PURE__ */ (0, o.jsx)("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					strokeWidth: 2,
+					stroke: "currentColor",
+					className: "h-5 w-5",
+					children: /* @__PURE__ */ (0, o.jsx)("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						d: "M6 18L18 6M6 6l12 12"
+					})
+				})
+			})]
+		}), /* @__PURE__ */ (0, o.jsx)("div", {
+			className: "p-5",
+			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 || ""}`,
+		children: [
+			/* @__PURE__ */ (0, o.jsxs)("div", {
+				className: "hidden md:block relative",
+				children: [/* @__PURE__ */ (0, o.jsx)("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					strokeWidth: 2,
+					className: "\r\n            absolute\r\n            left-3\r\n            top-1/2\r\n            h-4\r\n            w-4\r\n            -translate-y-1/2\r\n            text-gray-400\r\n          ",
+					children: /* @__PURE__ */ (0, o.jsx)("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						d: "M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z"
+					})
+				}), /* @__PURE__ */ (0, o.jsx)("input", {
+					type: "text",
+					placeholder: e,
+					className: "\r\n            w-27.5\r\n            sm:w-40\r\n            md:w-50\r\n            lg:w-60\r\n            rounded-md\r\n            border\r\n            border-light-gray\r\n            bg-white\r\n            px-3\r\n            py-2\r\n            pl-9\r\n            text-xs\r\n            sm:text-sm\r\n            focus:outline-none\r\n            focus:ring-2\r\n            focus:ring-blue\r\n          "
+				})]
+			}),
+			/* @__PURE__ */ (0, o.jsx)("button", {
+				onClick: () => a(!0),
+				className: "\r\n          flex\r\n          md:hidden\r\n          items-center\r\n          justify-center\r\n          h-10\r\n          w-10\r\n          rounded-md\r\n          hover:bg-gray-100\r\n        ",
+				children: /* @__PURE__ */ (0, o.jsx)("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					strokeWidth: 2,
+					className: "\r\n            h-6\r\n            w-6\r\n            text-gray-700\r\n          ",
+					children: /* @__PURE__ */ (0, o.jsx)("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						d: "M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z"
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, o.jsx)(S, {
+				isOpen: i,
+				title: "Search",
+				onClose: () => a(!1),
+				children: r || /* @__PURE__ */ (0, o.jsxs)("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ (0, o.jsx)("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						strokeWidth: 2,
+						className: "\r\n                absolute\r\n                left-3\r\n                top-1/2\r\n                h-4\r\n                w-4\r\n                -translate-y-1/2\r\n                text-gray-400\r\n              ",
+						children: /* @__PURE__ */ (0, o.jsx)("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							d: "M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z"
+						})
+					}), /* @__PURE__ */ (0, o.jsx)("input", {
+						autoFocus: !0,
+						type: "text",
+						placeholder: e,
+						className: "\r\n                w-full\r\n                rounded-md\r\n                border\r\n                border-light-gray\r\n                bg-white\r\n                px-3\r\n                py-2\r\n                pl-9\r\n                text-sm\r\n                focus:outline-none\r\n                focus:ring-2\r\n                focus:ring-blue\r\n              "
+					})]
+				})
+			})
+		]
+	});
+}, 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", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ (0, o.jsx)("input", {
+				id: e,
+				type: "checkbox",
+				checked: u,
+				onChange: (e) => {
+					let t = e.target.checked;
+					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"}`
+			}), /* @__PURE__ */ (0, o.jsxs)("label", {
+				htmlFor: e,
+				className: `select-none ms-2 text-sm font-medium ${i ? "text-light-gray" : "text-heading"}`,
+				children: [
+					n,
+					" ",
+					r && /* @__PURE__ */ (0, o.jsx)("span", {
+						className: "text-red",
+						children: "*"
+					})
+				]
+			})]
+		}), c && /* @__PURE__ */ (0, o.jsx)("div", {
+			className: `text-sm font-medium ${s ? "text-red" : "text-gray"}`,
+			children: c
+		})]
+	});
+}, 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", {
+			className: "text-sm font-medium text-gray",
+			children: [
+				e,
+				" ",
+				n && "*"
+			]
+		}),
+		/* @__PURE__ */ (0, o.jsx)("select", {
+			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,
+			value: s,
+			onChange: (e) => c?.(e.target.value),
+			children: t.map((e) => /* @__PURE__ */ (0, o.jsx)("option", {
+				value: e.name,
+				children: e.value
+			}, e.key))
+		}),
+		i && a && /* @__PURE__ */ (0, o.jsx)("div", {
+			className: "text-red text-sm font-normal",
+			children: i
+		})
+	]
+}), 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
+        w-full
+        px-6
+        py-6
+        scroll-mt-32
+        md:px-10
+        lg:px-16
+
+        ${r || ""}
+      `,
+	children: /* @__PURE__ */ (0, o.jsxs)("div", {
+		className: "mx-auto flex w-full max-w-7xl flex-col gap-10",
+		children: [t && /* @__PURE__ */ (0, o.jsx)("h2", {
+			className: "\r\n              text-3xl\r\n              font-bold\r\n              md:text-4xl\r\n            ",
+			children: t
+		}), n]
+	})
+}), 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        ",
+		children: e.map((t, n) => {
+			let r = n === e.length - 1;
+			return /* @__PURE__ */ (0, o.jsxs)("li", {
+				className: "\r\n                flex\r\n                items-center\r\n                gap-2\r\n              ",
+				children: [r ? /* @__PURE__ */ (0, o.jsx)("span", {
+					className: "\r\n                    font-semibold\r\n                    text-gray-900\r\n                  ",
+					children: t.label
+				}) : /* @__PURE__ */ (0, o.jsx)("a", {
+					href: t.href,
+					className: "\r\n                    text-gray-600\r\n                    transition-colors\r\n                    hover:text-blue-600\r\n                    hover:underline\r\n                  ",
+					children: t.label
+				}), !r && /* @__PURE__ */ (0, o.jsx)("span", {
+					className: "text-gray-400",
+					children: ">"
+				})]
+			}, t.id);
+		})
+	})
+}), z = ({ children: t }) => {
+	let [n, r] = e.useState("Home"), i = [
+		{
+			id: 1,
+			href: "#home",
+			label: "Home"
+		},
+		{
+			id: 2,
+			href: "#about",
+			label: "About"
+		},
+		{
+			id: 3,
+			href: "#services",
+			label: "Services"
+		},
+		{
+			id: 4,
+			href: "#contact",
+			label: "Contact"
+		}
+	];
+	return /* @__PURE__ */ (0, o.jsxs)("div", {
+		className: "w-full scroll-smooth",
+		children: [
+			/* @__PURE__ */ (0, o.jsx)("div", {
+				className: "sticky top-0 z-50 bg-white",
+				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)(b, {
+						logo: "/icon.svg",
+						title: "QTEK"
+					}), /* @__PURE__ */ (0, o.jsx)(x, {
+						navBar: i,
+						onItemClick: r
+					})]
+				}), /* @__PURE__ */ (0, o.jsxs)("div", {
+					className: "flex shrink-0 items-center gap-2 sm:gap-3",
+					children: [/* @__PURE__ */ (0, o.jsx)(C, {}), /* @__PURE__ */ (0, o.jsx)(y, {
+						navDrawer: i,
+						onItemClick: r
+					})]
+				})] })
+			}),
+			/* @__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)(R, { items: [{
+					id: 1,
+					label: n,
+					href: "#"
+				}] })
+			}),
+			t,
+			/* @__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)(b, {
+							logo: "/icon.svg",
+							title: "QTEK"
+						})
+					})
+				}),
+				/* @__PURE__ */ (0, o.jsx)(_, {
+					title: "Quick Links",
+					links: i,
+					onItemClick: r
+				}),
+				/* @__PURE__ */ (0, o.jsx)(h, {
+					email: "hello@qtek.com",
+					phone: "+63 900 000 0000",
+					socials: [
+						{
+							id: 1,
+							label: "Facebook",
+							href: "#"
+						},
+						{
+							id: 2,
+							label: "LinkedIn",
+							href: "#"
+						},
+						{
+							id: 3,
+							label: "GitHub",
+							href: "#"
+						}
+					]
+				}),
+				/* @__PURE__ */ (0, o.jsx)(m, { copyright: "© 2026 QTEK. All rights reserved." })
+			] })
+		]
+	});
+};
+//#endregion
+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 };