@arkyn/components 3.0.2 → 3.0.3

package/dist/modules/components/datePicker/datePickerCalendarContainer/index.js

@@ -0,0 +1,25 @@
+import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
+/* empty css       */
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/datePicker/datePickerCalendarContainer/index.tsx
+function a(a) {
+	let { children: o, isFocused: s } = a, c = n(null), [l, u] = r("bottom");
+	return e(s), t(() => {
+		s && (() => {
+			if (!c.current) return;
+			let e = c.current.parentElement;
+			if (!e) return;
+			let t = e.getBoundingClientRect();
+			window.innerHeight - t.bottom < 420 && t.top > 420 ? u("top") : u("bottom");
+		})();
+	}, [s]), s ? /* @__PURE__ */ i("div", {
+		ref: c,
+		className: `arkynDatePickerCalendarContainer ${l}`,
+		children: o
+	}) : null;
+}
+//#endregion
+export { a as DatePickerCalendarContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/datePicker/datePickerCalendarContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerCalendarContainer/index.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useRef, useState } from \"react\";\n\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\n\nimport \"./styles.css\";\n\ntype DatePickerCalendarContainerProps = {\n\tisFocused: boolean;\n\tchildren: ReactNode;\n};\n\nfunction DatePickerCalendarContainer(props: DatePickerCalendarContainerProps) {\n\tconst { children, isFocused } = props;\n\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [position, setPosition] = useState<\"bottom\" | \"top\">(\"bottom\");\n\n\tuseScrollLock(isFocused);\n\n\tuseEffect(() => {\n\t\tif (!isFocused) return;\n\n\t\tconst checkContainerPosition = () => {\n\t\t\tif (!containerRef.current) return;\n\n\t\t\tconst parentElement = containerRef.current.parentElement;\n\t\t\tif (!parentElement) return;\n\n\t\t\tconst parentRect = parentElement.getBoundingClientRect();\n\t\t\tconst viewportHeight = window.innerHeight;\n\n\t\t\tconst estimatedContainerHeight = 420;\n\t\t\tconst spaceBelow = viewportHeight - parentRect.bottom;\n\n\t\t\tif (\n\t\t\t\tspaceBelow < estimatedContainerHeight &&\n\t\t\t\tparentRect.top > estimatedContainerHeight\n\t\t\t) {\n\t\t\t\tsetPosition(\"top\");\n\t\t\t} else {\n\t\t\t\tsetPosition(\"bottom\");\n\t\t\t}\n\t\t};\n\n\t\tcheckContainerPosition();\n\t}, [isFocused]);\n\n\tif (!isFocused) return null;\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={`arkynDatePickerCalendarContainer ${position}`}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { DatePickerCalendarContainer };\n"],"mappings":";;;;;AAWA,SAAS,EAA4B,GAAyC;CAC7E,IAAM,EAAE,aAAU,iBAAc,GAE1B,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAU,KAAe,EAA2B,QAAQ;CAkCnE,OAhCA,EAAc,CAAS,GAEvB,QAAgB;EACV,YAEgC;GACpC,IAAI,CAAC,EAAa,SAAS;GAE3B,IAAM,IAAgB,EAAa,QAAQ;GAC3C,IAAI,CAAC,GAAe;GAEpB,IAAM,IAAa,EAAc,sBAAsB;GAMvD,AALuB,OAAO,cAGM,EAAW,SAGjC,OACb,EAAW,MAAM,MAEjB,EAAY,KAAK,IAEjB,EAAY,QAAQ;EAEtB,EAEA,CAAuB;CACxB,GAAG,CAAC,CAAS,CAAC,GAET,IAGJ,kBAAC,OAAD;EACC,KAAK;EACL,WAAW,oCAAoC;EAE9C;CACG,CAAA,IARiB;AAUxB"}

package/dist/modules/components/datePicker/datePickerCalendarContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynDatePickerCalendarContainer{z-index:7;border-radius:8px;width:max-content;max-width:calc(100vw - 32px);position:absolute;left:0;box-shadow:0 4px 8px #0000001a}.arkynDatePickerCalendarContainer.bottom{top:calc(100% + 5px)}.arkynDatePickerCalendarContainer.top{bottom:calc(100% + 5px)}.arkynDatePickerCalendarContainer .arkynCalendarContainer{max-width:100%}}

package/dist/modules/components/datePicker/datePickerChevron/index.js

@@ -0,0 +1,21 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+import { ChevronDown as t } from "lucide-react";
+//#region src/components/datePicker/datePickerChevron/index.tsx
+function n(n) {
+	let { iconSize: r, isLoading: i, disabled: a, readOnly: o, isFocused: s } = n;
+	return i ? null : /* @__PURE__ */ e(t, {
+		className: `arkynDatePickerChevron ${a || o ? "notAnimate" : ""} ${s ? "focused" : ""}`,
+		strokeWidth: 2.5,
+		style: {
+			minWidth: r,
+			minHeight: r,
+			maxWidth: r,
+			maxHeight: r
+		}
+	});
+}
+//#endregion
+export { n as DatePickerChevron };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/datePicker/datePickerChevron/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerChevron/index.tsx"],"sourcesContent":["import { ChevronDown } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype DatePickerChevronProps = {\n\tisLoading: boolean;\n\ticonSize: number;\n\tdisabled: boolean;\n\treadOnly: boolean;\n\tisFocused: boolean;\n};\n\nfunction DatePickerChevron(props: DatePickerChevronProps) {\n\tconst { iconSize, isLoading, disabled, readOnly, isFocused } = props;\n\n\tconst notAnimate = disabled || readOnly ? \"notAnimate\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\tconst className = `arkynDatePickerChevron ${notAnimate} ${focused}`;\n\n\tif (isLoading) return null;\n\treturn (\n\t\t<ChevronDown\n\t\t\tclassName={className}\n\t\t\tstrokeWidth={2.5}\n\t\t\tstyle={{\n\t\t\t\tminWidth: iconSize,\n\t\t\t\tminHeight: iconSize,\n\t\t\t\tmaxWidth: iconSize,\n\t\t\t\tmaxHeight: iconSize,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nexport { DatePickerChevron };\n"],"mappings":";;;;AAWA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,aAAU,cAAW,aAAU,aAAU,iBAAc;CAQ/D,OADI,IAAkB,OAErB,kBAAC,GAAD;EACY,qCARM,KAAY,IAAW,eAAe,GAGF,GAFvC,IAAY,YAAY;EAQtC,aAAa;EACb,OAAO;GACN,UAAU;GACV,WAAW;GACX,UAAU;GACV,WAAW;EACZ;CACA,CAAA;AAEH"}

package/dist/modules/components/datePicker/datePickerChevron/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynDatePickerChevron{color:var(--text-muted,#a1a1aa);transition:all .15s ease-in-out}.arkynDatePickerChevron:not(.notAnimate).focused{transform:rotate(180deg)}}

package/dist/modules/components/datePicker/datePickerContainer/index.js

@@ -0,0 +1,16 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/datePicker/datePickerContainer/index.tsx
+function t(t) {
+	let { children: n, handleContainerFocus: r, disabled: i, isError: a, isLoading: o, isFocused: s, className: c, readOnly: l, variant: u, size: d, id: f, prefixExists: p } = t;
+	return /* @__PURE__ */ e("section", {
+		id: f,
+		className: `arkynDatePickerContainer ${p ? "hasPrefix" : ""} ${u} ${d} ${i || l || o ? "opacity" : ""} ${a ? "errored" : ""} ${s ? "focused" : ""} ${c}`,
+		onClick: r,
+		children: n
+	});
+}
+//#endregion
+export { t as DatePickerContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/datePicker/datePickerContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerContainer/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype DatePickerContainerProps = {\n\tchildren: ReactNode;\n\thandleContainerFocus: () => void;\n\tprefixExists: boolean;\n\tisError: boolean;\n\tdisabled: boolean;\n\treadOnly: boolean;\n\tisLoading: boolean;\n\tisFocused: boolean;\n\tclassName?: string;\n\tid: string;\n\tvariant: \"solid\" | \"outline\" | \"underline\";\n\tsize: \"md\" | \"lg\";\n};\n\nfunction DatePickerContainer(props: DatePickerContainerProps) {\n\tconst {\n\t\tchildren,\n\t\thandleContainerFocus,\n\t\tdisabled,\n\t\tisError,\n\t\tisLoading,\n\t\tisFocused,\n\t\tclassName,\n\t\treadOnly,\n\t\tvariant,\n\t\tsize,\n\t\tid,\n\t\tprefixExists,\n\t} = props;\n\n\tconst hasPrefix = prefixExists ? \"hasPrefix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = disabled || readOnly || isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\treturn (\n\t\t<section\n\t\t\tid={id}\n\t\t\tclassName={`arkynDatePickerContainer ${hasPrefix} ${variant} ${size} ${opacity} ${errored} ${focused} ${className}`}\n\t\t\tonClick={handleContainerFocus}\n\t\t>\n\t\t\t{children}\n\t\t</section>\n\t);\n}\n\nexport { DatePickerContainer };\n"],"mappings":";;;AAkBA,SAAS,EAAoB,GAAiC;CAC7D,IAAM,EACL,aACA,yBACA,aACA,YACA,cACA,cACA,cACA,aACA,YACA,SACA,OACA,oBACG;CAOJ,OACC,kBAAC,WAAD;EACK;EACJ,WAAW,4BARK,IAAe,cAAc,GAQI,GAAG,EAAQ,GAAG,EAAK,GANtD,KAAY,KAAY,IAAY,YAAY,GAMiB,GAPjE,IAAU,YAAY,GAOsD,GAL5E,IAAY,YAAY,GAK+D,GAAG;EACxG,SAAS;EAER;CACO,CAAA;AAEX"}

package/dist/modules/components/datePicker/datePickerContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynDatePickerContainer{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynDatePickerContainer:hover{cursor:pointer}.arkynDatePickerContainer.opacity{opacity:.5}.arkynDatePickerContainer .prefix{color:var(--text-body,#52525b);background:var(--border,#e2e8f0);border-right:1px solid var(--border,#e2e8f0);border-radius:5px 0 0 5px;justify-content:center;align-items:center;font-weight:400;display:flex;position:absolute;top:0;bottom:0;left:0}.arkynDatePickerContainer>svg{color:var(--text-muted,#a1a1aa)}.arkynDatePickerContainer.errored>svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).focused>svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynDatePickerContainer.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynDatePickerContainer.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynDatePickerContainer.underline .prefix{display:none}.arkynDatePickerContainer.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynDatePickerContainer.underline.errored{border-color:rgba(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer.underline.errored:before{background:rgba(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).underline.focused{border-color:rgba(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer:not(.opacity).underline.focused:before{background:rgba(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.md{min-height:40px}.arkynDatePickerContainer.md.hasPrefix{padding-left:60px}.arkynDatePickerContainer.md .prefix{width:44px;height:40px;font-size:14px}.arkynDatePickerContainer.lg{min-height:44px}.arkynDatePickerContainer.lg .prefix{width:48px;height:44px;font-size:16px}.arkynDatePickerContainer.lg.hasPrefix{padding-left:64px}}

package/dist/modules/components/datePicker/datePickerContent/index.js

@@ -0,0 +1,14 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/datePicker/datePickerContent/index.tsx
+function t(t) {
+	let { children: n, size: r } = t;
+	return /* @__PURE__ */ e("div", {
+		className: `arkynDatePickerContent ${r}`,
+		children: n
+	});
+}
+//#endregion
+export { t as DatePickerContent };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/datePicker/datePickerContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerContent/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype DatePickerContentProps = {\n\tchildren: ReactNode;\n\tsize: \"md\" | \"lg\";\n};\n\nfunction DatePickerContent(props: DatePickerContentProps) {\n\tconst { children, size } = props;\n\tconst className = `arkynDatePickerContent ${size}`;\n\treturn <div className={className}>{children}</div>;\n}\n\nexport { DatePickerContent };\n"],"mappings":";;;AAQA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,aAAU,YAAS;CAE3B,OAAO,kBAAC,OAAD;EAAgB,WAAA,0BADqB;EACT;CAAc,CAAA;AAClD"}

package/dist/modules/components/datePicker/datePickerContent/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynDatePickerContent{flex-wrap:wrap;flex:1;align-items:start;gap:4px;display:flex}.arkynDatePickerContent>p{color:var(--text-muted,#a1a1aa);-webkit-user-select:none;user-select:none;font-weight:400}.arkynDatePickerContent>p.hasValue{color:var(--text-body,#52525b)}.arkynDatePickerContent.md>p{font-size:14px;line-height:14px}.arkynDatePickerContent.lg>p{font-size:16px;line-height:16px}}

package/dist/modules/components/datePicker/datePickerOverlay/index.js

@@ -0,0 +1,14 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/datePicker/datePickerOverlay/index.tsx
+function t(t) {
+	let { isFocused: n, handleBlur: r } = t;
+	return n ? /* @__PURE__ */ e("aside", {
+		className: "arkynDatePickerOverlay",
+		onClick: r
+	}) : null;
+}
+//#endregion
+export { t as DatePickerOverlay };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/datePicker/datePickerOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerOverlay/index.tsx"],"sourcesContent":["import \"./styles.css\";\n\ntype DatePickerOverlayProps = {\n\tisFocused: boolean;\n\thandleBlur: () => void;\n};\n\nfunction DatePickerOverlay(props: DatePickerOverlayProps) {\n\tconst { isFocused, handleBlur } = props;\n\tif (!isFocused) return null;\n\treturn <aside className=\"arkynDatePickerOverlay\" onClick={handleBlur} />;\n}\n\nexport { DatePickerOverlay };\n"],"mappings":";;;AAOA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,cAAW,kBAAe;CAElC,OADK,IACE,kBAAC,SAAD;EAAO,WAAU;EAAyB,SAAS;CAAa,CAAA,IADhD;AAExB"}

package/dist/modules/components/datePicker/datePickerOverlay/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynDatePickerOverlay{z-index:5;position:fixed;inset:0}}

package/dist/modules/components/datePicker/datePickerSpinner/index.js

@@ -0,0 +1,16 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+import { Loader2 as t } from "lucide-react";
+//#region src/components/datePicker/datePickerSpinner/index.tsx
+function n(n) {
+	let { iconSize: r, isLoading: i } = n;
+	return i ? /* @__PURE__ */ e(t, {
+		className: "arkynDatePickerSpinner",
+		size: r,
+		strokeWidth: 2.5
+	}) : null;
+}
+//#endregion
+export { n as DatePickerSpinner };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/datePicker/datePickerSpinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/datePicker/datePickerSpinner/index.tsx"],"sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype DatePickerSpinnerProps = {\n\ticonSize: number;\n\tisLoading: boolean;\n};\n\nfunction DatePickerSpinner(props: DatePickerSpinnerProps) {\n\tconst { iconSize, isLoading } = props;\n\n\tif (!isLoading) return null;\n\treturn (\n\t\t<Loader2\n\t\t\tclassName=\"arkynDatePickerSpinner\"\n\t\t\tsize={iconSize}\n\t\t\tstrokeWidth={2.5}\n\t\t/>\n\t);\n}\n\nexport { DatePickerSpinner };\n"],"mappings":";;;;AAQA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,aAAU,iBAAc;CAGhC,OADK,IAEJ,kBAAC,GAAD;EACC,WAAU;EACV,MAAM;EACN,aAAa;CACb,CAAA,IANqB;AAQxB"}

package/dist/modules/components/datePicker/datePickerSpinner/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynDatePickerSpinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}

package/dist/modules/components/datePicker/index.js

@@ -0,0 +1,194 @@
+import { useForm as e } from "../../hooks/useForm.js";
+import { IconRenderer as t } from "../../services/iconRenderer.js";
+import { FieldTemplate as n } from "../../services/fieldTemplate.js";
+import { Calendar as r } from "../calendar/index.js";
+import { DatePickerCalendarContainer as i } from "./datePickerCalendarContainer/index.js";
+import { DatePickerChevron as a } from "./datePickerChevron/index.js";
+import { DatePickerContainer as o } from "./datePickerContainer/index.js";
+import { DatePickerContent as s } from "./datePickerContent/index.js";
+import { DatePickerOverlay as c } from "./datePickerOverlay/index.js";
+import { DatePickerSpinner as l } from "./datePickerSpinner/index.js";
+import { useId as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/datePicker/index.tsx
+function h(e) {
+	let t = (e) => String(e).padStart(2, "0");
+	return `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())}`;
+}
+function g(e) {
+	return e.toLocaleDateString("pt-BR");
+}
+function _(_) {
+	let { name: v, className: y = "", placeholder: b = "Selecione uma data...", errorMessage: ee, isLoading: x = !1, readOnly: S = !1, id: C, label: w, showAsterisk: T, leftIcon: E, onFocus: te, onBlur: D, disabled: O = !1, prefix: k, size: A = "md", value: j, variant: M = "solid", orientation: N = "vertical", unShowFieldTemplate: P = !1, calendarVariant: F = "complete" } = _, I = _.closeOnSelect ?? _.type === "single", { fieldErrors: L } = e(), R = d(null), z = u(), B = C || z, V = ee || L?.[v], H = !!V, U = O || x || S, W = {
+		md: 20,
+		lg: 20
+	}[A], [G, K] = f(!1), [q, J] = f(_.type === "single" ? _.defaultValue : void 0), [Y, X] = f(_.type === "range" ? _.defaultValue : void 0);
+	function Z() {
+		U || !R?.current || G || (K(!0), R.current.focus(), te?.());
+	}
+	function Q() {
+		K(!1), D && R.current && R.current.blur();
+	}
+	function ne(e) {
+		j === void 0 && J(e), _.type === "single" && _.onChange?.(e), I && Q();
+	}
+	function re(e) {
+		j === void 0 && X(e), _.type === "range" && _.onChange?.(e), I && Q();
+	}
+	if (_.type === "range") {
+		let e = _.rangeSeparator ?? " até ", u = j === void 0 ? Y : j, d = u ? JSON.stringify([h(u[0]), h(u[1])]) : "";
+		return /* @__PURE__ */ p(n, {
+			name: v,
+			label: w,
+			showAsterisk: T,
+			className: y,
+			errorMessage: V,
+			unShowFieldTemplate: P,
+			orientation: N,
+			children: /* @__PURE__ */ m(o, {
+				handleContainerFocus: Z,
+				disabled: U,
+				isError: H,
+				isFocused: G,
+				isLoading: x,
+				readOnly: S,
+				size: A,
+				variant: M,
+				prefixExists: !!k,
+				id: B,
+				children: [
+					/* @__PURE__ */ p("input", {
+						ref: R,
+						name: v,
+						value: d,
+						type: "hidden"
+					}),
+					/* @__PURE__ */ p(t, {
+						iconSize: W,
+						icon: k,
+						className: "prefix"
+					}),
+					E && /* @__PURE__ */ p(E, {
+						size: W,
+						strokeWidth: 2.5
+					}),
+					/* @__PURE__ */ p(s, {
+						size: A,
+						children: u ? /* @__PURE__ */ m("p", {
+							className: "hasValue",
+							children: [
+								g(u[0]),
+								e,
+								g(u[1])
+							]
+						}) : /* @__PURE__ */ p("p", { children: b })
+					}),
+					/* @__PURE__ */ p(i, {
+						isFocused: G,
+						children: /* @__PURE__ */ p(r, {
+							type: "range",
+							variant: F,
+							value: u,
+							onChange: re,
+							viewValue: _.viewValue,
+							defaultViewValue: _.defaultViewValue,
+							onChangeView: _.onChangeView
+						})
+					}),
+					/* @__PURE__ */ p(a, {
+						disabled: U,
+						isFocused: G,
+						readOnly: S,
+						iconSize: W,
+						isLoading: x
+					}),
+					/* @__PURE__ */ p(l, {
+						iconSize: W,
+						isLoading: x
+					}),
+					/* @__PURE__ */ p(c, {
+						handleBlur: Q,
+						isFocused: G
+					})
+				]
+			})
+		});
+	}
+	let $ = j === void 0 ? q : j, ie = $ ? h($) : "";
+	return /* @__PURE__ */ p(n, {
+		name: v,
+		label: w,
+		showAsterisk: T,
+		className: y,
+		errorMessage: V,
+		unShowFieldTemplate: P,
+		orientation: N,
+		children: /* @__PURE__ */ m(o, {
+			handleContainerFocus: Z,
+			disabled: U,
+			isError: H,
+			isFocused: G,
+			isLoading: x,
+			readOnly: S,
+			size: A,
+			variant: M,
+			prefixExists: !!k,
+			id: B,
+			children: [
+				/* @__PURE__ */ p("input", {
+					ref: R,
+					name: v,
+					value: ie,
+					type: "hidden"
+				}),
+				/* @__PURE__ */ p(t, {
+					iconSize: W,
+					icon: k,
+					className: "prefix"
+				}),
+				E && /* @__PURE__ */ p(E, {
+					size: W,
+					strokeWidth: 2.5
+				}),
+				/* @__PURE__ */ p(s, {
+					size: A,
+					children: $ ? /* @__PURE__ */ p("p", {
+						className: "hasValue",
+						children: g($)
+					}) : /* @__PURE__ */ p("p", { children: b })
+				}),
+				/* @__PURE__ */ p(i, {
+					isFocused: G,
+					children: /* @__PURE__ */ p(r, {
+						type: "single",
+						variant: F,
+						value: $,
+						onChange: ne,
+						viewValue: _.viewValue,
+						defaultViewValue: _.defaultViewValue,
+						onChangeView: _.onChangeView
+					})
+				}),
+				/* @__PURE__ */ p(a, {
+					disabled: U,
+					isFocused: G,
+					readOnly: S,
+					iconSize: W,
+					isLoading: x
+				}),
+				/* @__PURE__ */ p(l, {
+					iconSize: W,
+					isLoading: x
+				}),
+				/* @__PURE__ */ p(c, {
+					handleBlur: Q,
+					isFocused: G
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { _ as DatePicker };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/datePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/datePicker/index.tsx"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport { type FocusEvent, useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { IconRenderer } from \"../../services/iconRenderer\";\n\nimport { Calendar } from \"../calendar\";\n\nimport { DatePickerCalendarContainer } from \"./datePickerCalendarContainer\";\nimport { DatePickerChevron } from \"./datePickerChevron\";\nimport { DatePickerContainer } from \"./datePickerContainer\";\nimport { DatePickerContent } from \"./datePickerContent\";\nimport { DatePickerOverlay } from \"./datePickerOverlay\";\nimport { DatePickerSpinner } from \"./datePickerSpinner\";\n\nfunction toInputDateValue(date: Date) {\n\tconst pad = (value: number) => String(value).padStart(2, \"0\");\n\treturn `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n}\n\nfunction toDisplayDateValue(date: Date) {\n\treturn date.toLocaleDateString(\"pt-BR\");\n}\n\ntype BaseDatePickerProps = {\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/** Optional HTML id for the underlying hidden input. */\n\tid?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Optional label text displayed above the date picker. */\n\tlabel?: string;\n\t/** Validation error message displayed below the date picker. */\n\terrorMessage?: string;\n\t/** Placeholder text shown when no date is selected. @default \"Selecione uma data...\" */\n\tplaceholder?: string;\n\t/** Additional CSS class applied to the wrapper element. */\n\tclassName?: string;\n\t/** Disables all interactions. @default false */\n\tdisabled?: boolean;\n\t/** Prevents value changes while keeping the current value visible. @default false */\n\treadOnly?: boolean;\n\t/** Shows a loading spinner and disables interactions. @default false */\n\tisLoading?: boolean;\n\t/**\n\t * Closes the calendar after a date is picked.\n\t * @default true for `single`, `false` for `range`.\n\t */\n\tcloseOnSelect?: boolean;\n\t/** Callback fired when the date picker gains focus. */\n\tonFocus?: () => void;\n\t/** Callback fired when the date picker loses focus. */\n\tonBlur?: (e: FocusEvent<HTMLDivElement>) => void;\n\t/**\n\t * DatePicker size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * - `underline`: bottom border only.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"underline\";\n\t/** Text or icon rendered at the far left, outside the date picker area. */\n\tprefix?: string | LucideIcon;\n\t/** Lucide icon rendered inside the date picker on the left. */\n\tleftIcon?: LucideIcon;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"vertical\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n\t/**\n\t * Visual/behavioral variant forwarded to the internal `Calendar`.\n\t * @default \"complete\"\n\t */\n\tcalendarVariant?: \"basic\" | \"complete\";\n};\n\n/**\n * Props for DatePicker single-date selection mode.\n */\ntype SingleDatePickerProps = BaseDatePickerProps & {\n\t/** Sets single-date selection mode. */\n\ttype: \"single\";\n\t/** Controlled selected date. */\n\tvalue?: Date;\n\t/** Uncontrolled default selected date. */\n\tdefaultValue?: Date;\n\t/** Callback fired when the selected date changes. */\n\tonChange?: (date: Date) => void;\n\t/** Currently focused calendar view date. */\n\tviewValue?: Date;\n\t/** Initial focused calendar view date. */\n\tdefaultViewValue?: Date;\n\t/** Callback fired when the calendar view (month/year) changes. */\n\tonChangeView?: (date: Date) => void;\n};\n\n/**\n * Props for DatePicker range selection mode.\n */\ntype RangeDatePickerProps = BaseDatePickerProps & {\n\t/** Sets range selection mode. */\n\ttype: \"range\";\n\t/** Controlled selected range in `[start, end]` format. */\n\tvalue?: [Date, Date];\n\t/** Uncontrolled default range in `[start, end]` format. */\n\tdefaultValue?: [Date, Date];\n\t/** Callback fired when the selected range changes. */\n\tonChange?: (date: [Date, Date]) => void;\n\t/** Currently focused calendar view date. */\n\tviewValue?: Date;\n\t/** Initial focused calendar view date. */\n\tdefaultViewValue?: Date;\n\t/** Callback fired when the calendar view (month/year) changes. */\n\tonChangeView?: (date: Date) => void;\n\t/** Text placed between the start and end dates. @default \" até \" */\n\trangeSeparator?: string;\n};\n\n/**\n * Discriminated union of DatePicker props.\n */\ntype DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;\n\n/**\n * DatePicker — date input field with a popover `Calendar`, supporting single-date\n * (`single`) and range (`range`) selection modes.\n *\n * Opens the calendar on click, the same way `Select` opens its options list, flipping\n * upward or downward depending on the available viewport space so it never renders\n * off-screen. Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.type - Selection mode (`single` | `range`). Required.\n * @param props.value - Controlled selected date (`single`) or range (`range`).\n * @param props.defaultValue - Uncontrolled default date or range.\n * @param props.label - Label text displayed above the date picker.\n * @param props.placeholder - Placeholder shown when nothing is selected. Default: \"Selecione uma data...\"\n * @param props.errorMessage - Validation error message.\n * @param props.isLoading - Shows a loading spinner and disables interactions. Default: false\n * @param props.closeOnSelect - Closes the calendar after picking. Default: `true` for `single`, `false` for `range`.\n * @param props.onChange - Callback fired when the selected date/range changes.\n * @param props.calendarVariant - Visual/behavioral variant of the internal `Calendar`. Default: \"complete\"\n * @param props.size - DatePicker size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.orientation - Layout direction. Default: \"vertical\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * @returns DatePicker JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Single date\n * <DatePicker\n *   type=\"single\"\n *   name=\"birthDate\"\n *   label=\"Data de nascimento\"\n *   onChange={(date) => console.log(\"Selected date:\", date)}\n * />\n *\n * // Range\n * <DatePicker\n *   type=\"range\"\n *   name=\"stay\"\n *   label=\"Período da estadia\"\n *   calendarVariant=\"basic\"\n *   onChange={([start, end]) => console.log(\"Range:\", start, end)}\n * />\n * ```\n */\nfunction DatePicker(props: DatePickerProps) {\n\tconst {\n\t\tname,\n\t\tclassName: wrapperClassName = \"\",\n\t\tplaceholder = \"Selecione uma data...\",\n\t\terrorMessage: baseErrorMessage,\n\t\tisLoading = false,\n\t\treadOnly = false,\n\t\tid,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\tleftIcon: LeftIcon,\n\t\tonFocus,\n\t\tonBlur,\n\t\tdisabled: baseDisabled = false,\n\t\tprefix,\n\t\tsize = \"md\",\n\t\tvalue,\n\t\tvariant = \"solid\",\n\t\torientation = \"vertical\",\n\t\tunShowFieldTemplate = false,\n\t\tcalendarVariant = \"complete\",\n\t} = props;\n\n\tconst closeOnSelect = props.closeOnSelect ?? props.type === \"single\";\n\n\tconst { fieldErrors } = useForm();\n\n\tconst datePickerRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst datePickerId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst disabled = baseDisabled || isLoading || readOnly;\n\n\tconst iconSizes = { md: 20, lg: 20 };\n\tconst iconSize = iconSizes[size];\n\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [internalSingleValue, setInternalSingleValue] = useState<\n\t\tDate | undefined\n\t>(props.type === \"single\" ? props.defaultValue : undefined);\n\tconst [internalRangeValue, setInternalRangeValue] = useState<\n\t\t[Date, Date] | undefined\n\t>(props.type === \"range\" ? props.defaultValue : undefined);\n\n\tfunction handleContainerFocus() {\n\t\tif (disabled || !datePickerRef?.current || isFocused) return;\n\t\tsetIsFocused(true);\n\t\tdatePickerRef.current.focus();\n\t\tonFocus?.();\n\t}\n\n\tfunction handleBlur() {\n\t\tsetIsFocused(false);\n\t\tif (onBlur && datePickerRef.current) datePickerRef.current.blur();\n\t}\n\n\tfunction handleChangeSingleDate(date: Date) {\n\t\tif (value === undefined) setInternalSingleValue(date);\n\t\tif (props.type === \"single\") props.onChange?.(date);\n\t\tif (closeOnSelect) handleBlur();\n\t}\n\n\tfunction handleChangeRangeDate(range: [Date, Date]) {\n\t\tif (value === undefined) setInternalRangeValue(range);\n\t\tif (props.type === \"range\") props.onChange?.(range);\n\t\tif (closeOnSelect) handleBlur();\n\t}\n\n\tif (props.type === \"range\") {\n\t\tconst rangeSeparator = props.rangeSeparator ?? \" até \";\n\t\tconst forceValue =\n\t\t\tvalue !== undefined ? (value as [Date, Date]) : internalRangeValue;\n\n\t\tconst hiddenInputValue = forceValue\n\t\t\t? JSON.stringify([\n\t\t\t\t\ttoInputDateValue(forceValue[0]),\n\t\t\t\t\ttoInputDateValue(forceValue[1]),\n\t\t\t\t])\n\t\t\t: \"\";\n\n\t\treturn (\n\t\t\t<FieldTemplate\n\t\t\t\tname={name}\n\t\t\t\tlabel={label}\n\t\t\t\tshowAsterisk={showAsterisk}\n\t\t\t\tclassName={wrapperClassName}\n\t\t\t\terrorMessage={errorMessage}\n\t\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\t\torientation={orientation}\n\t\t\t>\n\t\t\t\t<DatePickerContainer\n\t\t\t\t\thandleContainerFocus={handleContainerFocus}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tisError={isError}\n\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tprefixExists={!!prefix}\n\t\t\t\t\tid={datePickerId}\n\t\t\t\t>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={datePickerRef}\n\t\t\t\t\t\tname={name}\n\t\t\t\t\t\tvalue={hiddenInputValue}\n\t\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t\t{LeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}\n\n\t\t\t\t\t<DatePickerContent size={size}>\n\t\t\t\t\t\t{forceValue ? (\n\t\t\t\t\t\t\t<p className=\"hasValue\">\n\t\t\t\t\t\t\t\t{toDisplayDateValue(forceValue[0])}\n\t\t\t\t\t\t\t\t{rangeSeparator}\n\t\t\t\t\t\t\t\t{toDisplayDateValue(forceValue[1])}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<p>{placeholder}</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DatePickerContent>\n\n\t\t\t\t\t<DatePickerCalendarContainer isFocused={isFocused}>\n\t\t\t\t\t\t<Calendar\n\t\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t\tvariant={calendarVariant}\n\t\t\t\t\t\t\tvalue={forceValue}\n\t\t\t\t\t\t\tonChange={handleChangeRangeDate}\n\t\t\t\t\t\t\tviewValue={props.viewValue}\n\t\t\t\t\t\t\tdefaultViewValue={props.defaultViewValue}\n\t\t\t\t\t\t\tonChangeView={props.onChangeView}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</DatePickerCalendarContainer>\n\n\t\t\t\t\t<DatePickerChevron\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<DatePickerSpinner iconSize={iconSize} isLoading={isLoading} />\n\t\t\t\t\t<DatePickerOverlay handleBlur={handleBlur} isFocused={isFocused} />\n\t\t\t\t</DatePickerContainer>\n\t\t\t</FieldTemplate>\n\t\t);\n\t}\n\n\tconst forceValue =\n\t\tvalue !== undefined ? (value as Date) : internalSingleValue;\n\n\tconst hiddenInputValue = forceValue ? toInputDateValue(forceValue) : \"\";\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<DatePickerContainer\n\t\t\t\thandleContainerFocus={handleContainerFocus}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisError={isError}\n\t\t\t\tisFocused={isFocused}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tsize={size}\n\t\t\t\tvariant={variant}\n\t\t\t\tprefixExists={!!prefix}\n\t\t\t\tid={datePickerId}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tref={datePickerRef}\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={hiddenInputValue}\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t{LeftIcon && <LeftIcon size={iconSize} strokeWidth={2.5} />}\n\n\t\t\t\t<DatePickerContent size={size}>\n\t\t\t\t\t{forceValue ? (\n\t\t\t\t\t\t<p className=\"hasValue\">{toDisplayDateValue(forceValue)}</p>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<p>{placeholder}</p>\n\t\t\t\t\t)}\n\t\t\t\t</DatePickerContent>\n\n\t\t\t\t<DatePickerCalendarContainer isFocused={isFocused}>\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\ttype=\"single\"\n\t\t\t\t\t\tvariant={calendarVariant}\n\t\t\t\t\t\tvalue={forceValue}\n\t\t\t\t\t\tonChange={handleChangeSingleDate}\n\t\t\t\t\t\tviewValue={props.viewValue}\n\t\t\t\t\t\tdefaultViewValue={props.defaultViewValue}\n\t\t\t\t\t\tonChangeView={props.onChangeView}\n\t\t\t\t\t/>\n\t\t\t\t</DatePickerCalendarContainer>\n\n\t\t\t\t<DatePickerChevron\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t/>\n\n\t\t\t\t<DatePickerSpinner iconSize={iconSize} isLoading={isLoading} />\n\t\t\t\t<DatePickerOverlay handleBlur={handleBlur} isFocused={isFocused} />\n\t\t\t</DatePickerContainer>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { DatePicker };\n"],"mappings":"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"}

package/dist/modules/components/datePicker/styles.css

@@ -0,0 +1,79 @@
+@layer arkyn{.arkynFieldError{color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:12px}}
+
+@layer arkyn{.arkynFieldLabel{color:var(--text-body,#52525b);font-size:14px;font-weight:600;line-height:19.07px}.arkynFieldLabel.asteriskTrue:before{content:"* ";text-align:left;color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:16.34px}}
+
+@layer arkyn{.arkynFieldWrapper{gap:6px;height:max-content;display:flex}.arkynFieldWrapper.horizontal{flex-direction:row;align-items:center}.arkynFieldWrapper.horizontalReverse{flex-direction:row-reverse;align-items:center;margin-right:auto}.arkynFieldWrapper.vertical{flex-direction:column;align-items:flex-start}}
+
+@layer arkyn{.arkynCalendarContainer{border:1px solid var(--border,#e2e8f0);background-color:var(--background-foreground,#fff);border-radius:8px;flex-direction:column;gap:32px;max-width:400px;padding:16px;display:flex}}
+
+@layer arkyn{.arkynCalendarHeader{justify-content:space-between;align-items:center;gap:16px;display:flex}.arkynCalendarHeader>p{color:var(--text-body,#52525b);font-size:14px;font-weight:500}.arkynCalendarHeader .arkynCalendarButton{border:unset;background-color:unset;color:var(--text-muted,#a1a1aa);cursor:pointer;align-items:center;gap:4px;display:flex}.arkynCalendarHeader .arkynCalendarButton:hover svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCalendarHeader>div{align-items:center;gap:12px;display:flex}.arkynCalendarHeader div .arkynSelectContainer{padding:unset;min-width:70px;min-height:24px}}
+
+@layer arkyn{.arkynFieldError{color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:12px}}
+
+@layer arkyn{.arkynFieldLabel{color:var(--text-body,#52525b);font-size:14px;font-weight:600;line-height:19.07px}.arkynFieldLabel.asteriskTrue:before{content:"* ";text-align:left;color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:16.34px}}
+
+@layer arkyn{.arkynFieldWrapper{gap:6px;height:max-content;display:flex}.arkynFieldWrapper.horizontal{flex-direction:row;align-items:center}.arkynFieldWrapper.horizontalReverse{flex-direction:row-reverse;align-items:center;margin-right:auto}.arkynFieldWrapper.vertical{flex-direction:column;align-items:flex-start}}
+
+@layer arkyn{.arkynSelectChevron{color:var(--text-muted,#a1a1aa);transition:all .15s ease-in-out}.arkynSelectChevron:not(.notAnimate).focused{transform:rotate(180deg)}}
+
+@layer arkyn{.arkynSelectContainer{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynSelectContainer:hover{cursor:pointer}.arkynSelectContainer.opacity{opacity:.5}.arkynSelectContainer .prefix{color:var(--text-body,#52525b);background:var(--border,#e2e8f0);border-right:1px solid var(--border,#e2e8f0);border-radius:5px 0 0 5px;justify-content:center;align-items:center;font-weight:400;display:flex;position:absolute;top:0;bottom:0;left:0}.arkynSelectContainer>svg{color:var(--text-muted,#a1a1aa)}.arkynSelectContainer.errored>svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).focused>svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynSelectContainer.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynSelectContainer.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynSelectContainer.underline .prefix{display:none}.arkynSelectContainer.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynSelectContainer.underline.errored{border-color:rgba(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer.underline.errored:before{background:rgba(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).underline.focused{border-color:rgba(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer:not(.opacity).underline.focused:before{background:rgba(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.md{min-height:40px}.arkynSelectContainer.md.hasPrefix{padding-left:60px}.arkynSelectContainer.md .prefix{width:44px;height:40px;font-size:14px}.arkynSelectContainer.lg{min-height:44px}.arkynSelectContainer.lg .prefix{width:48px;height:44px;font-size:16px}.arkynSelectContainer.lg.hasPrefix{padding-left:64px}}
+
+@layer arkyn{.arkynSelectContent{flex-wrap:wrap;flex:1;align-items:start;gap:4px;display:flex}.arkynSelectContent>p{color:var(--text-muted,#a1a1aa);-webkit-user-select:none;user-select:none;font-weight:400}.arkynSelectContent>p.hasValue{color:var(--text-body,#52525b)}.arkynSelectContent.md>p{font-size:14px;line-height:14px}.arkynSelectContent.lg>p{font-size:16px;line-height:16px}}
+
+@layer arkyn{.arkynSelectOption{color:var(--text-body,#52525b);background-color:inherit;-webkit-user-select:none;user-select:none;border:none;justify-content:space-between;align-items:center;font-weight:400;line-height:21.79px;display:flex}.arkynSelectOption.md{padding:8px 16px;font-size:14px}.arkynSelectOption.lg{padding:8px 16px;font-size:16px}.arkynSelectOption svg{width:20px;height:20px;color:rgb(var(--spotlight-primary,17, 109, 220));display:none}.arkynSelectOption:hover{cursor:pointer;filter:brightness(.98)}.arkynSelectOption.active{color:var(--text-heading,#09090b);filter:brightness(.95);font-weight:600}.arkynSelectOption.active svg{display:unset}html.dark .arkynSelectOption:hover,html.dark .arkynSelectOption.active{filter:brightness(1.2)}}
+
+@layer arkyn{.arkynSelectOptionsContainer{z-index:7;border:1px solid var(--border,#e2e8f0);background-color:var(--background-foreground,#fff);border-radius:6px;flex-direction:column;flex:1;height:max-content;max-height:300px;list-style:none;display:flex;position:absolute;left:-2px;right:-2px;overflow:auto;box-shadow:0 4px 8px #0000001a}.arkynSelectOptionsContainer.bottom{top:calc(100% + 5px)}.arkynSelectOptionsContainer.top{bottom:calc(100% + 5px)}.arkynSelectOptionsContainer>p{text-align:center;color:var(--text-body,#52525b);padding:16px;font-size:14px;font-weight:400;line-height:21.79px}}
+
+@layer arkyn{.arkynInput{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynInput:hover{cursor:text}.arkynInput input{width:100%;color:var(--text-heading,#09090b);background:0 0;border:none;outline:none;line-height:100%}.arkynInput input:disabled{-webkit-user-select:none;user-select:none}.arkynInput .prefix,.arkynInput .suffix{color:var(--text-body,#52525b);background:var(--border,#e2e8f0);justify-content:center;align-items:center;font-weight:400;line-height:100%;display:flex;position:absolute}.arkynInput .prefix{border-right:1px solid var(--border,#e2e8f0);border-radius:7px 0 0 7px;top:0;bottom:0;left:0}.arkynInput .suffix{border-left:1px solid var(--border,#e2e8f0);border-radius:0 7px 7px 0;top:0;bottom:0;right:0}.arkynInput input::placeholder{color:var(--text-muted,#a1a1aa);line-height:100%}.arkynInput svg{color:var(--text-muted,#a1a1aa)}.arkynInput.errored svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).focused svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.opacity{opacity:.5}.arkynInput.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynInput.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynInput.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynInput.underline .suffix,.arkynInput.underline .prefix{display:none}.arkynInput.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynInput.underline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput.underline.errored:before{background:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).underline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput:not(.opacity).underline.focused:before{background:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.md input{min-height:38px;max-height:38px;font-size:14px;font-weight:400;line-height:14px}.arkynInput.md input::placeholder{font-size:14px;font-weight:400;line-height:14px}.arkynInput.md.hasPrefix{padding-left:60px}.arkynInput.md.hasSuffix{padding-right:60px}.arkynInput.md .prefix,.arkynInput.md .suffix{width:44px;height:38px;font-size:14px}.arkynInput.lg input{min-height:44px;max-height:44px;font-size:16px;font-weight:400;line-height:16px}.arkynInput.lg input::placeholder{font-size:16px;font-weight:400;line-height:16px}.arkynInput.lg .prefix,.arkynInput.lg .suffix{width:48px;height:44px;font-size:16px}.arkynInput.lg.hasPrefix{padding-left:64px}.arkynInput.lg.hasSuffix{padding-right:64px}.arkynInput .spinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}
+
+@layer arkyn{.arkynSelectOverlay{z-index:5;position:fixed;inset:0}}
+
+@layer arkyn{.arkynSelectSpinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}
+
+@layer arkyn{.arkynCalendarTableBody{border-collapse:collapse;border-spacing:0}.arkynCalendarTableBody td p{text-align:center;padding:16px;font-size:14px}.arkynCalendarTableBody tr:first-child td{padding-top:8px}}
+
+@layer arkyn{.arkynCalendarTableTd{-webkit-user-select:none;user-select:none;cursor:pointer}.arkynCalendarTableTd p{text-align:center;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;margin:auto;font-size:14px;display:flex}.arkynCalendarTableTd.previous p,.arkynCalendarTableTd.next p{color:var(--text-muted,#a1a1aa)}.arkynCalendarTableTd.current p{color:var(--text-body,#52525b)}.arkynCalendarTableTd:hover p{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCalendarTableTd.today:not(.checkedDay) p{color:var(--text-body,#52525b);background-color:var(--background-underground,#fafafa);filter:brightness(.97);font-weight:500}.arkynCalendarTableTd .textGroup{width:40px;height:40px;margin:auto;position:relative}.arkynCalendarTableTd.checkedDay .textGroup span{content:" ";background-color:rgb(var(--spotlight-primary,17, 109, 220));z-index:2;border-radius:8px;position:absolute;inset:0}.arkynCalendarTableTd.checkedDay .textGroup p{color:var(--white,#fff);z-index:3;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arkynCalendarTableTd.middleDay .textGroup span{content:" ";background-color:var(--background-underground,#fafafa);filter:brightness(.95);z-index:1;position:absolute;inset:0 -15px}.arkynCalendarTableTd:first-child.middleDay .textGroup span{border-top-left-radius:6px;border-bottom-left-radius:6px;left:0;right:-15px}.arkynCalendarTableTd:last-child.middleDay .textGroup span{border-top-right-radius:6px;border-bottom-right-radius:6px;left:-15px;right:0}.arkynCalendarTableTd.middleDay .textGroup p{color:var(--text-muted,#a1a1aa);z-index:2;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arkynCalendarTableTd.current.middleDay .textGroup p{color:var(--text-body,#52525b)}}
+
+@layer arkyn{.arkynCalendarTableContainer{border-collapse:collapse;border-spacing:0}}
+
+@layer arkyn{.arkynCalendarTableHeader th{color:var(--text-muted,#a1a1aa);padding-bottom:8px;font-size:14px;font-weight:500}.arkynCalendarTableHeader{border-bottom:1px solid var(--border,#e2e8f0)}}
+
+@layer arkyn{.arkynCalendarContainer{border:1px solid var(--border,#e2e8f0);background-color:var(--background-foreground,#fff);border-radius:8px;flex-direction:column;gap:32px;max-width:400px;padding:16px;display:flex}}
+
+@layer arkyn{.arkynCalendarHeader{justify-content:space-between;align-items:center;gap:16px;display:flex}.arkynCalendarHeader>p{color:var(--text-body,#52525b);font-size:14px;font-weight:500}.arkynCalendarHeader .arkynCalendarButton{border:unset;background-color:unset;color:var(--text-muted,#a1a1aa);cursor:pointer;align-items:center;gap:4px;display:flex}.arkynCalendarHeader .arkynCalendarButton:hover svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCalendarHeader>div{align-items:center;gap:12px;display:flex}.arkynCalendarHeader div .arkynSelectContainer{padding:unset;min-width:70px;min-height:24px}}
+
+@layer arkyn{.arkynSelectChevron{color:var(--text-muted,#a1a1aa);transition:all .15s ease-in-out}.arkynSelectChevron:not(.notAnimate).focused{transform:rotate(180deg)}}
+
+@layer arkyn{.arkynSelectContainer{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynSelectContainer:hover{cursor:pointer}.arkynSelectContainer.opacity{opacity:.5}.arkynSelectContainer .prefix{color:var(--text-body,#52525b);background:var(--border,#e2e8f0);border-right:1px solid var(--border,#e2e8f0);border-radius:5px 0 0 5px;justify-content:center;align-items:center;font-weight:400;display:flex;position:absolute;top:0;bottom:0;left:0}.arkynSelectContainer>svg{color:var(--text-muted,#a1a1aa)}.arkynSelectContainer.errored>svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).focused>svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynSelectContainer.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynSelectContainer.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynSelectContainer.underline .prefix{display:none}.arkynSelectContainer.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynSelectContainer.underline.errored{border-color:rgba(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer.underline.errored:before{background:rgba(var(--spotlight-danger,244, 63, 94))}.arkynSelectContainer:not(.opacity).underline.focused{border-color:rgba(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer:not(.opacity).underline.focused:before{background:rgba(var(--spotlight-primary,17, 109, 220))}.arkynSelectContainer.md{min-height:40px}.arkynSelectContainer.md.hasPrefix{padding-left:60px}.arkynSelectContainer.md .prefix{width:44px;height:40px;font-size:14px}.arkynSelectContainer.lg{min-height:44px}.arkynSelectContainer.lg .prefix{width:48px;height:44px;font-size:16px}.arkynSelectContainer.lg.hasPrefix{padding-left:64px}}
+
+@layer arkyn{.arkynSelectContent{flex-wrap:wrap;flex:1;align-items:start;gap:4px;display:flex}.arkynSelectContent>p{color:var(--text-muted,#a1a1aa);-webkit-user-select:none;user-select:none;font-weight:400}.arkynSelectContent>p.hasValue{color:var(--text-body,#52525b)}.arkynSelectContent.md>p{font-size:14px;line-height:14px}.arkynSelectContent.lg>p{font-size:16px;line-height:16px}}
+
+@layer arkyn{.arkynSelectOption{color:var(--text-body,#52525b);background-color:inherit;-webkit-user-select:none;user-select:none;border:none;justify-content:space-between;align-items:center;font-weight:400;line-height:21.79px;display:flex}.arkynSelectOption.md{padding:8px 16px;font-size:14px}.arkynSelectOption.lg{padding:8px 16px;font-size:16px}.arkynSelectOption svg{width:20px;height:20px;color:rgb(var(--spotlight-primary,17, 109, 220));display:none}.arkynSelectOption:hover{cursor:pointer;filter:brightness(.98)}.arkynSelectOption.active{color:var(--text-heading,#09090b);filter:brightness(.95);font-weight:600}.arkynSelectOption.active svg{display:unset}html.dark .arkynSelectOption:hover,html.dark .arkynSelectOption.active{filter:brightness(1.2)}}
+
+@layer arkyn{.arkynSelectOptionsContainer{z-index:7;border:1px solid var(--border,#e2e8f0);background-color:var(--background-foreground,#fff);border-radius:6px;flex-direction:column;flex:1;height:max-content;max-height:300px;list-style:none;display:flex;position:absolute;left:-2px;right:-2px;overflow:auto;box-shadow:0 4px 8px #0000001a}.arkynSelectOptionsContainer.bottom{top:calc(100% + 5px)}.arkynSelectOptionsContainer.top{bottom:calc(100% + 5px)}.arkynSelectOptionsContainer>p{text-align:center;color:var(--text-body,#52525b);padding:16px;font-size:14px;font-weight:400;line-height:21.79px}}
+
+@layer arkyn{.arkynInput{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynInput:hover{cursor:text}.arkynInput input{width:100%;color:var(--text-heading,#09090b);background:0 0;border:none;outline:none;line-height:100%}.arkynInput input:disabled{-webkit-user-select:none;user-select:none}.arkynInput .prefix,.arkynInput .suffix{color:var(--text-body,#52525b);background:var(--border,#e2e8f0);justify-content:center;align-items:center;font-weight:400;line-height:100%;display:flex;position:absolute}.arkynInput .prefix{border-right:1px solid var(--border,#e2e8f0);border-radius:7px 0 0 7px;top:0;bottom:0;left:0}.arkynInput .suffix{border-left:1px solid var(--border,#e2e8f0);border-radius:0 7px 7px 0;top:0;bottom:0;right:0}.arkynInput input::placeholder{color:var(--text-muted,#a1a1aa);line-height:100%}.arkynInput svg{color:var(--text-muted,#a1a1aa)}.arkynInput.errored svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).focused svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.opacity{opacity:.5}.arkynInput.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynInput.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynInput.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynInput.underline .suffix,.arkynInput.underline .prefix{display:none}.arkynInput.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynInput.underline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput.underline.errored:before{background:rgb(var(--spotlight-danger,244, 63, 94))}.arkynInput:not(.opacity).underline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput:not(.opacity).underline.focused:before{background:rgb(var(--spotlight-primary,17, 109, 220))}.arkynInput.md input{min-height:38px;max-height:38px;font-size:14px;font-weight:400;line-height:14px}.arkynInput.md input::placeholder{font-size:14px;font-weight:400;line-height:14px}.arkynInput.md.hasPrefix{padding-left:60px}.arkynInput.md.hasSuffix{padding-right:60px}.arkynInput.md .prefix,.arkynInput.md .suffix{width:44px;height:38px;font-size:14px}.arkynInput.lg input{min-height:44px;max-height:44px;font-size:16px;font-weight:400;line-height:16px}.arkynInput.lg input::placeholder{font-size:16px;font-weight:400;line-height:16px}.arkynInput.lg .prefix,.arkynInput.lg .suffix{width:48px;height:44px;font-size:16px}.arkynInput.lg.hasPrefix{padding-left:64px}.arkynInput.lg.hasSuffix{padding-right:64px}.arkynInput .spinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}
+
+@layer arkyn{.arkynSelectOverlay{z-index:5;position:fixed;inset:0}}
+
+@layer arkyn{.arkynSelectSpinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}
+
+@layer arkyn{.arkynCalendarTableBody{border-collapse:collapse;border-spacing:0}.arkynCalendarTableBody td p{text-align:center;padding:16px;font-size:14px}.arkynCalendarTableBody tr:first-child td{padding-top:8px}}
+
+@layer arkyn{.arkynCalendarTableTd{-webkit-user-select:none;user-select:none;cursor:pointer}.arkynCalendarTableTd p{text-align:center;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;margin:auto;font-size:14px;display:flex}.arkynCalendarTableTd.previous p,.arkynCalendarTableTd.next p{color:var(--text-muted,#a1a1aa)}.arkynCalendarTableTd.current p{color:var(--text-body,#52525b)}.arkynCalendarTableTd:hover p{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynCalendarTableTd.today:not(.checkedDay) p{color:var(--text-body,#52525b);background-color:var(--background-underground,#fafafa);filter:brightness(.97);font-weight:500}.arkynCalendarTableTd .textGroup{width:40px;height:40px;margin:auto;position:relative}.arkynCalendarTableTd.checkedDay .textGroup span{content:" ";background-color:rgb(var(--spotlight-primary,17, 109, 220));z-index:2;border-radius:8px;position:absolute;inset:0}.arkynCalendarTableTd.checkedDay .textGroup p{color:var(--white,#fff);z-index:3;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arkynCalendarTableTd.middleDay .textGroup span{content:" ";background-color:var(--background-underground,#fafafa);filter:brightness(.95);z-index:1;position:absolute;inset:0 -15px}.arkynCalendarTableTd:first-child.middleDay .textGroup span{border-top-left-radius:6px;border-bottom-left-radius:6px;left:0;right:-15px}.arkynCalendarTableTd:last-child.middleDay .textGroup span{border-top-right-radius:6px;border-bottom-right-radius:6px;left:-15px;right:0}.arkynCalendarTableTd.middleDay .textGroup p{color:var(--text-muted,#a1a1aa);z-index:2;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arkynCalendarTableTd.current.middleDay .textGroup p{color:var(--text-body,#52525b)}}
+
+@layer arkyn{.arkynCalendarTableContainer{border-collapse:collapse;border-spacing:0}}
+
+@layer arkyn{.arkynCalendarTableHeader th{color:var(--text-muted,#a1a1aa);padding-bottom:8px;font-size:14px;font-weight:500}.arkynCalendarTableHeader{border-bottom:1px solid var(--border,#e2e8f0)}}
+
+@layer arkyn{.arkynDatePickerCalendarContainer{z-index:7;border-radius:8px;width:max-content;max-width:calc(100vw - 32px);position:absolute;left:0;box-shadow:0 4px 8px #0000001a}.arkynDatePickerCalendarContainer.bottom{top:calc(100% + 5px)}.arkynDatePickerCalendarContainer.top{bottom:calc(100% + 5px)}.arkynDatePickerCalendarContainer .arkynCalendarContainer{max-width:100%}}
+
+@layer arkyn{.arkynDatePickerChevron{color:var(--text-muted,#a1a1aa);transition:all .15s ease-in-out}.arkynDatePickerChevron:not(.notAnimate).focused{transform:rotate(180deg)}}
+
+@layer arkyn{.arkynDatePickerContainer{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:100%;padding:0 16px;display:flex;position:relative}.arkynDatePickerContainer:hover{cursor:pointer}.arkynDatePickerContainer.opacity{opacity:.5}.arkynDatePickerContainer .prefix{color:var(--text-body,#52525b);background:var(--border,#e2e8f0);border-right:1px solid var(--border,#e2e8f0);border-radius:5px 0 0 5px;justify-content:center;align-items:center;font-weight:400;display:flex;position:absolute;top:0;bottom:0;left:0}.arkynDatePickerContainer>svg{color:var(--text-muted,#a1a1aa)}.arkynDatePickerContainer.errored>svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).focused>svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynDatePickerContainer.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynDatePickerContainer.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynDatePickerContainer.underline .prefix{display:none}.arkynDatePickerContainer.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynDatePickerContainer.underline.errored{border-color:rgba(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer.underline.errored:before{background:rgba(var(--spotlight-danger,244, 63, 94))}.arkynDatePickerContainer:not(.opacity).underline.focused{border-color:rgba(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer:not(.opacity).underline.focused:before{background:rgba(var(--spotlight-primary,17, 109, 220))}.arkynDatePickerContainer.md{min-height:40px}.arkynDatePickerContainer.md.hasPrefix{padding-left:60px}.arkynDatePickerContainer.md .prefix{width:44px;height:40px;font-size:14px}.arkynDatePickerContainer.lg{min-height:44px}.arkynDatePickerContainer.lg .prefix{width:48px;height:44px;font-size:16px}.arkynDatePickerContainer.lg.hasPrefix{padding-left:64px}}
+
+@layer arkyn{.arkynDatePickerContent{flex-wrap:wrap;flex:1;align-items:start;gap:4px;display:flex}.arkynDatePickerContent>p{color:var(--text-muted,#a1a1aa);-webkit-user-select:none;user-select:none;font-weight:400}.arkynDatePickerContent>p.hasValue{color:var(--text-body,#52525b)}.arkynDatePickerContent.md>p{font-size:14px;line-height:14px}.arkynDatePickerContent.lg>p{font-size:16px;line-height:16px}}
+
+@layer arkyn{.arkynDatePickerOverlay{z-index:5;position:fixed;inset:0}}
+
+@layer arkyn{.arkynDatePickerSpinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}