@arkyn/components 3.0.1-beta.95 → 3.0.2

package/dist/modules/components/modal/modalContainer/index.js

@@ -0,0 +1,38 @@
+import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
+import { ModalProvider as t } from "../modalContext.js";
+/* empty css       */
+import { useEffect as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/modal/modalContainer/index.tsx
+function o(o) {
+	let { isVisible: s, makeInvisible: c, children: l, className: u = "", ...d } = o, [f, p] = r(s), [m, h] = r(!1);
+	n(() => {
+		s ? (p(!0), h(!1)) : f && h(!0);
+	}, [s, f]), e(s);
+	function g(e) {
+		e.target === e.currentTarget && m && (h(!1), p(!1), c());
+	}
+	return f ? /* @__PURE__ */ i(t, {
+		makeInvisible: () => h(!0),
+		children: /* @__PURE__ */ a("aside", {
+			className: [
+				"arkynModalContainer",
+				m ? "exiting" : "",
+				u
+			].filter(Boolean).join(" ").trim(),
+			...d,
+			children: [/* @__PURE__ */ i("div", {
+				className: "arkynModalContainerOverlay",
+				onClick: () => h(!0),
+				onAnimationEnd: g
+			}), /* @__PURE__ */ i("div", {
+				className: "arkynModalContainerContent",
+				children: l
+			})]
+		})
+	}) : null;
+}
+//#endregion
+export { o as ModalContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/modal/modalContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/modal/modalContainer/index.tsx"],"sourcesContent":["import {\n\ttype AnimationEvent,\n\ttype HTMLAttributes,\n\tuseEffect,\n\tuseState,\n} from \"react\";\n\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { ModalProvider } from \"../modalContext\";\nimport \"./styles.css\";\n\ntype ModalContainerProps = HTMLAttributes<HTMLElement> & {\n\t/** Controls whether the modal is visible. */\n\tisVisible: boolean;\n\t/** Callback invoked when the backdrop overlay is clicked. */\n\tmakeInvisible: () => void;\n};\n\n/**\n * ModalContainer — animated centered modal rendered over a backdrop overlay.\n *\n * Locks body scroll while open. Closes when the overlay is clicked.\n * Provides context consumed by `ModalHeader` (close button).\n *\n * @param props.isVisible - Whether the modal is open. Required.\n * @param props.makeInvisible - Called when the overlay is clicked. Required.\n *\n * **...Other valid HTML `<aside>` properties**\n *\n * @returns ModalContainer JSX element.\n *\n * @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n *\n * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>\n *   <ModalHeader><h2>Confirm deletion</h2></ModalHeader>\n *   <main><p>This action cannot be undone.</p></main>\n *   <ModalFooter>\n *     <Button onClick={() => setIsOpen(false)}>Cancel</Button>\n *     <Button scheme=\"danger\" onClick={handleDelete}>Delete</Button>\n *   </ModalFooter>\n * </ModalContainer>\n * ```\n */\n\nfunction ModalContainer(args: ModalContainerProps) {\n\tconst {\n\t\tisVisible,\n\t\tmakeInvisible,\n\t\tchildren,\n\t\tclassName: baseClassName = \"\",\n\t\t...rest\n\t} = args;\n\n\tconst [mounted, setMounted] = useState(isVisible);\n\tconst [isExiting, setIsExiting] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (isVisible) {\n\t\t\tsetMounted(true);\n\t\t\tsetIsExiting(false);\n\t\t} else if (mounted) {\n\t\t\tsetIsExiting(true);\n\t\t}\n\t}, [isVisible, mounted]);\n\n\tuseScrollLock(isVisible);\n\n\tfunction handleOverlayAnimationEnd(e: AnimationEvent<HTMLDivElement>) {\n\t\tif (e.target === e.currentTarget && isExiting) {\n\t\t\tsetIsExiting(false);\n\t\t\tsetMounted(false);\n\t\t\tmakeInvisible();\n\t\t}\n\t}\n\n\tif (!mounted) return null;\n\n\tconst className = [\n\t\t\"arkynModalContainer\",\n\t\tisExiting ? \"exiting\" : \"\",\n\t\tbaseClassName,\n\t]\n\t\t.filter(Boolean)\n\t\t.join(\" \");\n\n\treturn (\n\t\t<ModalProvider makeInvisible={() => setIsExiting(true)}>\n\t\t\t<aside className={className.trim()} {...rest}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"arkynModalContainerOverlay\"\n\t\t\t\t\tonClick={() => setIsExiting(true)}\n\t\t\t\t\tonAnimationEnd={handleOverlayAnimationEnd}\n\t\t\t\t/>\n\t\t\t\t<div className=\"arkynModalContainerContent\">{children}</div>\n\t\t\t</aside>\n\t\t</ModalProvider>\n\t);\n}\n\nexport { ModalContainer };\n"],"mappings":";;;;;;AA8CA,SAAS,EAAe,GAA2B;CAClD,IAAM,EACL,cACA,kBACA,aACA,WAAW,IAAgB,IAC3B,GAAG,MACA,GAEE,CAAC,GAAS,KAAc,EAAS,CAAS,GAC1C,CAAC,GAAW,KAAgB,EAAS,EAAK;CAWhD,AATA,QAAgB;EACf,AAAI,KACH,EAAW,EAAI,GACf,EAAa,EAAK,KACR,KACV,EAAa,EAAI;CAEnB,GAAG,CAAC,GAAW,CAAO,CAAC,GAEvB,EAAc,CAAS;CAEvB,SAAS,EAA0B,GAAmC;EACrE,AAAI,EAAE,WAAW,EAAE,iBAAiB,MACnC,EAAa,EAAK,GAClB,EAAW,EAAK,GAChB,EAAc;CAEhB;CAYA,OAVK,IAWJ,kBAAC,GAAD;EAAe,qBAAqB,EAAa,EAAI;YACpD,kBAAC,SAAD;GAAO,WAVS;IACjB;IACA,IAAY,YAAY;IACxB;GACD,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAIa,CAAA,CAAU,KAAK;GAAG,GAAI;aAAxC,CACC,kBAAC,OAAD;IACC,WAAU;IACV,eAAe,EAAa,EAAI;IAChC,gBAAgB;GAChB,CAAA,GACD,kBAAC,OAAD;IAAK,WAAU;IAA8B;GAAc,CAAA,CACrD;;CACO,CAAA,IApBK;AAsBtB"}

package/dist/modules/components/modal/modalContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynModalContainer{z-index:9999;justify-content:center;align-items:start;padding:10vh 0 2rem;display:flex;position:fixed;inset:0;overflow:auto}.arkynModalContainerOverlay{z-index:9997;background:#00000080;animation:.24s cubic-bezier(.22,1,.36,1) forwards modalOverlayIn;position:fixed;inset:0}.arkynModalContainerOverlay:hover{cursor:pointer}.arkynModalContainer.exiting>.arkynModalContainerOverlay{animation:.24s cubic-bezier(.22,1,.36,1) forwards modalOverlayOut}.arkynModalContainerContent{z-index:9999;background:var(--background-foreground,#fff);transform-origin:50%;will-change:transform, opacity;border-radius:8px;animation:.24s cubic-bezier(.22,1,.36,1) forwards modalContentIn;position:relative}.arkynModalContainer.exiting>.arkynModalContainerContent{animation:.24s cubic-bezier(.22,1,.36,1) forwards modalContentOut}@keyframes modalOverlayIn{0%{opacity:0}to{opacity:1}}@keyframes modalOverlayOut{0%{opacity:1}to{opacity:0}}@keyframes modalContentIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes modalContentOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.92)}}}

package/dist/modules/components/modal/modalContext.js

@@ -0,0 +1,18 @@
+import { createContext as e, useContext as t, useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/modal/modalContext.tsx
+var i = e({});
+function a(e) {
+	let t = n(() => ({ makeInvisible: e.makeInvisible }), [e.makeInvisible]);
+	return /* @__PURE__ */ r(i.Provider, {
+		value: t,
+		children: e.children
+	});
+}
+function o() {
+	return t(i);
+}
+//#endregion
+export { a as ModalProvider, o as useModal };
+
+//# sourceMappingURL=modalContext.js.map

package/dist/modules/components/modal/modalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalContext.js","names":[],"sources":["../../../../src/components/modal/modalContext.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useMemo } from \"react\";\n\ntype ModalContextProps = {\n\tmakeInvisible: () => void;\n};\n\ntype ModalProviderProps = {\n\tchildren: ReactNode;\n\tmakeInvisible: () => void;\n};\n\nconst modalContext = createContext({} as ModalContextProps);\n\nfunction ModalProvider(props: ModalProviderProps) {\n\tconst value = useMemo(\n\t\t() => ({ makeInvisible: props.makeInvisible }),\n\t\t[props.makeInvisible],\n\t);\n\n\treturn (\n\t\t<modalContext.Provider value={value}>\n\t\t\t{props.children}\n\t\t</modalContext.Provider>\n\t);\n}\n\nfunction useModal() {\n\treturn useContext(modalContext);\n}\n\nexport { ModalProvider, useModal };\n"],"mappings":";;;AAWA,IAAM,IAAe,EAAc,CAAC,CAAsB;AAE1D,SAAS,EAAc,GAA2B;CACjD,IAAM,IAAQ,SACN,EAAE,eAAe,EAAM,cAAc,IAC5C,CAAC,EAAM,aAAa,CACrB;CAEA,OACC,kBAAC,EAAa,UAAd;EAA8B;YAC5B,EAAM;CACe,CAAA;AAEzB;AAEA,SAAS,IAAW;CACnB,OAAO,EAAW,CAAY;AAC/B"}

package/dist/modules/components/modal/modalFooter/index.js

@@ -0,0 +1,14 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/modal/modalFooter/index.tsx
+function t(t) {
+	let { alignment: n = "right", className: r, ...i } = t;
+	return /* @__PURE__ */ e("footer", {
+		className: `arkynModalFooter ${n} ${r}`.trim(),
+		...i
+	});
+}
+//#endregion
+export { t as ModalFooter };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/modal/modalFooter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/modal/modalFooter/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport \"./styles.css\";\n\ntype ModalFooterProps = HTMLAttributes<HTMLElement> & {\n\t/**\n\t * Horizontal alignment of footer content.\n\t * - `left` / `center` / `right`: flex-start, center, flex-end.\n\t * - `between`: space-between.\n\t * - `around`: space-around.\n\t * @default \"right\"\n\t */\n\talignment?: \"left\" | \"center\" | \"right\" | \"between\" | \"around\";\n};\n\n/**\n * ModalFooter — action bar at the bottom of a modal dialog.\n *\n * @param props.alignment - Horizontal alignment of children. Default: `\"right\"`\n *\n * **...Other valid HTML `<footer>` properties**\n *\n * @returns ModalFooter JSX element.\n *\n * @example\n * ```tsx\n * // Confirm / cancel pattern (right-aligned by default)\n * <ModalFooter>\n *   <Button variant=\"ghost\" onClick={onClose}>Cancel</Button>\n *   <Button scheme=\"danger\" onClick={onConfirm}>Delete</Button>\n * </ModalFooter>\n *\n * // Space-between layout (e.g. back / next in a wizard)\n * <ModalFooter alignment=\"between\">\n *   <Button variant=\"outline\" onClick={onBack}>Back</Button>\n *   <Button onClick={onNext}>Next</Button>\n * </ModalFooter>\n * ```\n */\n\nfunction ModalFooter(args: ModalFooterProps) {\n\tconst { alignment = \"right\", className: baseClassName, ...rest } = args;\n\tconst className = `arkynModalFooter ${alignment} ${baseClassName}`;\n\n\treturn <footer className={className.trim()} {...rest} />;\n}\n\nexport { ModalFooter };\n"],"mappings":";;;AAuCA,SAAS,EAAY,GAAwB;CAC5C,IAAM,EAAE,eAAY,SAAS,WAAW,GAAe,GAAG,MAAS;CAGnE,OAAO,kBAAC,UAAD;EAAQ,WAAW,oBAFY,EAAU,GAAG,IAEf,KAAK;EAAG,GAAI;CAAO,CAAA;AACxD"}

package/dist/modules/components/modal/modalFooter/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynModalFooter{border-top:1px solid var(--border,#e2e8f0);align-items:center;gap:16px;padding:16px;display:flex}.arkynModalFooter.left{justify-content:flex-start}.arkynModalFooter.right{justify-content:flex-end}.arkynModalFooter.center{justify-content:center}.arkynModalFooter.between{justify-content:space-between}.arkynModalFooter.around{justify-content:space-around}}

package/dist/modules/components/modal/modalHeader/index.js

@@ -0,0 +1,23 @@
+import { useModal as e } from "../modalContext.js";
+/* empty css       */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { X as r } from "lucide-react";
+//#region src/components/modal/modalHeader/index.tsx
+function i(i) {
+	let { showCloseButton: a = !0, className: o, children: s, ...c } = i, { makeInvisible: l } = e();
+	return /* @__PURE__ */ n("header", {
+		className: `arkynModalHeader ${o}`.trim(),
+		...c,
+		children: [s, a && /* @__PURE__ */ t("button", {
+			type: "button",
+			onClick: l,
+			"aria-label": "Close modal button",
+			className: "arkynModalHeaderCloseButton",
+			children: /* @__PURE__ */ t(r, { size: 24 })
+		})]
+	});
+}
+//#endregion
+export { i as ModalHeader };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/modal/modalHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/modal/modalHeader/index.tsx"],"sourcesContent":["import { X } from \"lucide-react\";\nimport type { HTMLAttributes } from \"react\";\n\nimport { useModal } from \"../modalContext\";\nimport \"./styles.css\";\n\ntype ModalHeaderProps = HTMLAttributes<HTMLElement> & {\n\t/** Whether to render the X close button. @default true */\n\tshowCloseButton?: boolean;\n};\n\n/**\n * ModalHeader — header section for a `ModalContainer`, with an optional close button.\n *\n * The close button calls `makeInvisible` from the nearest `ModalContainer` context.\n * Must be rendered inside a `ModalContainer`.\n *\n * @param props.showCloseButton - Renders the X close button. Default: true\n *\n * **...Other valid HTML `<header>` properties**\n *\n * @returns ModalHeader JSX element.\n *\n * @example\n * ```tsx\n * <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>\n *   <ModalHeader>\n *     <h2>Edit profile</h2>\n *   </ModalHeader>\n *   <main>...</main>\n *   <ModalFooter><Button onClick={onSave}>Save</Button></ModalFooter>\n * </ModalContainer>\n * ```\n */\n\nfunction ModalHeader(args: ModalHeaderProps) {\n\tconst {\n\t\tshowCloseButton = true,\n\t\tclassName: baseClassName,\n\t\tchildren,\n\t\t...rest\n\t} = args;\n\n\tconst { makeInvisible } = useModal();\n\tconst className = `arkynModalHeader ${baseClassName}`;\n\n\treturn (\n\t\t<header className={className.trim()} {...rest}>\n\t\t\t{children}\n\n\t\t\t{showCloseButton && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={makeInvisible}\n\t\t\t\t\taria-label=\"Close modal button\"\n\t\t\t\t\tclassName=\"arkynModalHeaderCloseButton\"\n\t\t\t\t>\n\t\t\t\t\t<X size={24} />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</header>\n\t);\n}\n\nexport { ModalHeader };\n"],"mappings":";;;;;AAmCA,SAAS,EAAY,GAAwB;CAC5C,IAAM,EACL,qBAAkB,IAClB,WAAW,GACX,aACA,GAAG,MACA,GAEE,EAAE,qBAAkB,EAAS;CAGnC,OACC,kBAAC,UAAD;EAAQ,WAAW,oBAHkB,IAGR,KAAK;EAAG,GAAI;YAAzC,CACE,GAEA,KACA,kBAAC,UAAD;GACC,MAAK;GACL,SAAS;GACT,cAAW;GACX,WAAU;aAEV,kBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;EACP,CAAA,CAEF;;AAEV"}

package/dist/modules/components/modal/modalHeader/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynModalHeader{height:56px;color:var(--text-heading,#09090b);border-bottom:1px solid var(--border,#e2e8f0);align-items:center;padding:16px;font-size:16px;font-weight:600;line-height:20px;display:flex}.arkynModalHeaderCloseButton{color:var(--text-body,#52525b);background:0 0;background-color:var(--background-foreground,#fff);border:none;border-radius:4px;justify-content:center;align-items:center;margin-left:auto;padding:2px;display:flex}.arkynModalHeaderCloseButton:hover{cursor:pointer;filter:brightness(.9);transition:all .15s ease-out}}

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

@@ -0,0 +1,118 @@
+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 { MultiSelectChevron as r } from "./multiSelectChevron/index.js";
+import { MultiSelectContainer as i } from "./multiSelectContainer/index.js";
+import { MultiSelectContent as a } from "./multiSelectContent/index.js";
+import { MultiSelectMark as o } from "./multiSelectMark/index.js";
+import { MultiSelectOption as s } from "./multiSelectOption/index.js";
+import { MultiSelectOptionsContainer as ee } from "./multiSelectOptionsContainer/index.js";
+import { MultiSelectOverlay as te } from "./multiSelectOverlay/index.js";
+import { MultiSelectSpinner as c } from "./multiSelectSpinner/index.js";
+import { useId as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/multiSelect/index.tsx
+function m(m) {
+	let { name: h, options: g, className: _ = "", placeholder: v = "Selecione...", closeOnSelect: y = !1, defaultValue: b = [], errorMessage: ne, isLoading: x = !1, readOnly: S = !1, isSearchable: re = !1, id: ie, label: ae, showAsterisk: oe, leftIcon: C, onSearch: w, onChange: T, onBlur: E, notFoundText: D = "Sem opções disponíveis", onFocus: O, disabled: k = !1, prefix: A, size: j = "md", value: M, variant: N = "solid", unShowFieldTemplate: P = !1, orientation: F = "vertical" } = m, { fieldErrors: I } = e(), L = u(null), R = l(), se = ie || R, z = ne || I?.[h], B = !!z, V = k || x || S, H = {
+		md: 20,
+		lg: 20
+	}[j], [U, W] = d(""), [G, K] = d(!1), [q, J] = d(b), Y = M || q;
+	function X(e) {
+		return Y.includes(e);
+	}
+	function ce(e) {
+		return g.find((t) => t.value === e)?.label || "";
+	}
+	function le() {
+		V || !L?.current || G || (K(!0), L.current.focus(), O?.());
+	}
+	function Z() {
+		K(!1), E && L.current && L.current.blur();
+	}
+	function ue(e) {
+		W(e), w && w(e);
+	}
+	function Q(e) {
+		X(e) ? (J(q.filter((t) => t !== e)), T && T(q.filter((t) => t !== e))) : (J([...q, e]), T && T([...q, e])), y && Z();
+	}
+	let $ = g.filter((e) => !!(m.onSearch || !m.isSearchable || e.label.toLowerCase().includes(U.toLowerCase())));
+	return /* @__PURE__ */ f(n, {
+		name: h,
+		label: ae,
+		showAsterisk: oe,
+		className: _,
+		errorMessage: z,
+		unShowFieldTemplate: P,
+		orientation: F,
+		children: /* @__PURE__ */ p(i, {
+			handleContainerFocus: le,
+			disabled: V,
+			isError: B,
+			isFocused: G,
+			isLoading: x,
+			readOnly: S,
+			size: j,
+			variant: N,
+			prefixExists: !!A,
+			id: se,
+			children: [
+				/* @__PURE__ */ f("input", {
+					ref: L,
+					name: h,
+					value: JSON.stringify(Y),
+					type: "hidden"
+				}),
+				/* @__PURE__ */ f(t, {
+					iconSize: H,
+					icon: A,
+					className: "prefix"
+				}),
+				C && /* @__PURE__ */ f(C, {
+					size: H,
+					strokeWidth: 2.5
+				}),
+				/* @__PURE__ */ p(a, {
+					size: j,
+					children: [Y.map((e) => /* @__PURE__ */ f(o, {
+						label: ce(e),
+						value: e,
+						handleChangeValue: Q,
+						disabled: V
+					}, e)), Y.length <= 0 && /* @__PURE__ */ f("p", { children: v })]
+				}),
+				/* @__PURE__ */ p(ee, {
+					isFocused: G,
+					isSearchable: re,
+					search: U,
+					onSearch: ue,
+					children: [$.map(({ label: e, value: t }) => /* @__PURE__ */ f(s, {
+						label: e,
+						value: t,
+						size: j,
+						handleChangeValue: Q,
+						optionHasSelected: X
+					}, t)), $.length <= 0 && /* @__PURE__ */ f("p", { children: D })]
+				}),
+				/* @__PURE__ */ f(r, {
+					disabled: V,
+					isFocused: G,
+					readOnly: S,
+					iconSize: H,
+					isLoading: x
+				}),
+				/* @__PURE__ */ f(c, {
+					iconSize: H,
+					isLoading: x
+				}),
+				/* @__PURE__ */ f(te, {
+					handleBlur: Z,
+					isFocused: G
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { m as MultiSelect };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/multiSelect/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 { MultiSelectChevron } from \"./multiSelectChevron\";\nimport { MultiSelectContainer } from \"./multiSelectContainer\";\nimport { MultiSelectContent } from \"./multiSelectContent\";\nimport { MultiSelectMark } from \"./multiSelectMark\";\nimport { MultiSelectOption } from \"./multiSelectOption\";\nimport { MultiSelectOptionsContainer } from \"./multiSelectOptionsContainer\";\nimport { MultiSelectOverlay } from \"./multiSelectOverlay\";\nimport { MultiSelectSpinner } from \"./multiSelectSpinner\";\n\ntype MultiSelectProps = {\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/** Array of selectable options. Required. */\n\toptions: { label: string; value: string }[];\n\t/** Optional HTML id for the underlying hidden input. */\n\tid?: string;\n\t/** Controlled array of selected values. */\n\tvalue?: string[];\n\t/** Uncontrolled default array of selected values. @default [] */\n\tdefaultValue?: 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 multiselect. */\n\tlabel?: string;\n\t/** Validation error message displayed below the multiselect. */\n\terrorMessage?: string;\n\t/** Placeholder text shown when no options are selected. @default \"Selecione...\" */\n\tplaceholder?: string;\n\t/** Text shown when no options match the search query. @default \"Sem opções disponíveis\" */\n\tnotFoundText?: 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 selection visible. @default false */\n\treadOnly?: boolean;\n\t/** Shows a loading spinner and disables interactions. @default false */\n\tisLoading?: boolean;\n\t/** Enables search/filter within the dropdown. @default false */\n\tisSearchable?: boolean;\n\t/** Closes the dropdown after an option is selected or deselected. @default false */\n\tcloseOnSelect?: boolean;\n\t/** Callback fired when the search query changes. Use for async option loading. */\n\tonSearch?: (value: string) => void;\n\t/** Callback fired when the selected values array changes. */\n\tonChange?: (value: string[]) => void;\n\t/** Callback fired when the multiselect gains focus. */\n\tonFocus?: () => void;\n\t/** Callback fired when the multiselect loses focus. */\n\tonBlur?: (e: FocusEvent<HTMLDivElement>) => void;\n\t/**\n\t * MultiSelect 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 select area. */\n\tprefix?: string | LucideIcon;\n\t/** Lucide icon rendered inside the select on the left. */\n\tleftIcon?: LucideIcon;\n\t/** Maximum height (in px) of the options dropdown. */\n\toptionMaxHeight?: number;\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 \"horizontal\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * MultiSelect — multi-option dropdown with optional search, label, validation, and form integration.\n *\n * Selected values are stored as a JSON array in a hidden `<input>` for form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.options - Array of selectable options (`{ label, value }`). Required.\n * @param props.value - Controlled array of selected values.\n * @param props.defaultValue - Uncontrolled default selection. Default: []\n * @param props.label - Label text displayed above the multiselect.\n * @param props.placeholder - Placeholder shown when nothing is selected. Default: \"Selecione...\"\n * @param props.errorMessage - Validation error message.\n * @param props.isSearchable - Enables search/filter within the dropdown. Default: false\n * @param props.isLoading - Shows a loading spinner and disables interactions. Default: false\n * @param props.closeOnSelect - Closes the dropdown after toggling an option. Default: false\n * @param props.onChange - Callback fired when the selection changes.\n * @param props.onSearch - Callback fired when the search query changes.\n * @param props.size - MultiSelect size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.orientation - Layout direction. Default: \"horizontal\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * @returns MultiSelect JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <MultiSelect\n *   name=\"categories\"\n *   options={[\n *     { label: \"Technology\", value: \"tech\" },\n *     { label: \"Design\", value: \"design\" },\n *   ]}\n * />\n *\n * // With label, validation, and searchable\n * <MultiSelect\n *   name=\"skills\"\n *   label=\"Skills\"\n *   showAsterisk\n *   isSearchable\n *   options={skillOptions}\n *   errorMessage={errors.skills}\n * />\n *\n * // Controlled with async search\n * <MultiSelect\n *   name=\"tags\"\n *   label=\"Tags\"\n *   value={selectedTags}\n *   onChange={setSelectedTags}\n *   onSearch={fetchTagOptions}\n *   isLoading={isLoadingTags}\n *   options={tagOptions}\n * />\n * ```\n */\n\nfunction MultiSelect(props: MultiSelectProps) {\n\tconst {\n\t\tname,\n\t\toptions,\n\t\tclassName: wrapperClassName = \"\",\n\t\tplaceholder = \"Selecione...\",\n\t\tcloseOnSelect = false,\n\t\tdefaultValue = [],\n\t\terrorMessage: baseErrorMessage,\n\t\tisLoading = false,\n\t\treadOnly = false,\n\t\tisSearchable = false,\n\t\tid,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\tleftIcon: LeftIcon,\n\t\tonSearch,\n\t\tonChange,\n\t\tonBlur,\n\t\tnotFoundText = \"Sem opções disponíveis\",\n\t\tonFocus,\n\t\tdisabled: baseDisabled = false,\n\t\tprefix,\n\t\tsize = \"md\",\n\t\tvalue,\n\t\tvariant = \"solid\",\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\n\tconst multiSelectRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst multiSelectId = 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 [search, setSearch] = useState(\"\");\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [selectedOptions, setSelectedOptions] = useState(defaultValue);\n\n\tconst forceSelectedOptions = value || selectedOptions;\n\n\tfunction optionHasSelected(value: string) {\n\t\treturn forceSelectedOptions.includes(value);\n\t}\n\n\tfunction getOptionLabel(value: string) {\n\t\tconst option = options.find((option) => option.value === value);\n\t\treturn option?.label || \"\";\n\t}\n\n\tfunction handleContainerFocus() {\n\t\tif (disabled || !multiSelectRef?.current || isFocused) return;\n\t\tsetIsFocused(true);\n\t\tmultiSelectRef.current.focus();\n\t\tonFocus?.();\n\t}\n\n\tfunction handleBlur() {\n\t\tsetIsFocused(false);\n\t\tif (onBlur && multiSelectRef.current) multiSelectRef.current.blur();\n\t}\n\n\tfunction handleSearch(value: string) {\n\t\tsetSearch(value);\n\t\tif (onSearch) onSearch(value);\n\t}\n\n\tfunction handleChangeValue(value: string) {\n\t\tif (optionHasSelected(value)) {\n\t\t\tsetSelectedOptions(selectedOptions.filter((v) => v !== value));\n\t\t\tif (onChange) onChange(selectedOptions.filter((v) => v !== value));\n\t\t} else {\n\t\t\tsetSelectedOptions([...selectedOptions, value]);\n\t\t\tif (onChange) onChange([...selectedOptions, value]);\n\t\t}\n\n\t\tif (closeOnSelect) handleBlur();\n\t}\n\n\tconst mappedOptions = options.filter((option) => {\n\t\tif (props.onSearch) return true;\n\t\tif (!props.isSearchable) return true;\n\t\tif (option.label.toLowerCase().includes(search.toLowerCase())) return true;\n\t\treturn false;\n\t});\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<MultiSelectContainer\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={multiSelectId}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tref={multiSelectRef}\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={JSON.stringify(forceSelectedOptions)}\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<MultiSelectContent size={size}>\n\t\t\t\t\t{forceSelectedOptions.map((value) => (\n\t\t\t\t\t\t<MultiSelectMark\n\t\t\t\t\t\t\tkey={value}\n\t\t\t\t\t\t\tlabel={getOptionLabel(value)}\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\thandleChangeValue={handleChangeValue}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{forceSelectedOptions.length <= 0 && <p>{placeholder}</p>}\n\t\t\t\t</MultiSelectContent>\n\n\t\t\t\t<MultiSelectOptionsContainer\n\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\tisSearchable={isSearchable}\n\t\t\t\t\tsearch={search}\n\t\t\t\t\tonSearch={handleSearch}\n\t\t\t\t>\n\t\t\t\t\t{mappedOptions.map(({ label, value }) => (\n\t\t\t\t\t\t<MultiSelectOption\n\t\t\t\t\t\t\tkey={value}\n\t\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\thandleChangeValue={handleChangeValue}\n\t\t\t\t\t\t\toptionHasSelected={optionHasSelected}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{mappedOptions.length <= 0 && <p>{notFoundText}</p>}\n\t\t\t\t</MultiSelectOptionsContainer>\n\n\t\t\t\t<MultiSelectChevron\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<MultiSelectSpinner iconSize={iconSize} isLoading={isLoading} />\n\t\t\t\t<MultiSelectOverlay handleBlur={handleBlur} isFocused={isFocused} />\n\t\t\t</MultiSelectContainer>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { MultiSelect };\n"],"mappings":";;;;;;;;;;;;;;AAgJA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,YACA,WAAW,IAAmB,IAC9B,iBAAc,gBACd,mBAAgB,IAChB,kBAAe,CAAC,GAChB,cAAc,IACd,eAAY,IACZ,cAAW,IACX,mBAAe,IACf,QACA,WACA,kBACA,UAAU,GACV,aACA,aACA,WACA,kBAAe,0BACf,YACA,UAAU,IAAe,IACzB,WACA,UAAO,MACP,UACA,aAAU,SACV,yBAAsB,IACtB,iBAAc,eACX,GAEE,EAAE,mBAAgB,EAAQ,GAE1B,IAAiB,EAAyB,IAAI,GAC9C,IAAc,EAAM,GACpB,KAAgB,MAAM,GAEtB,IAAe,MAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAW,KAAgB,KAAa,GAGxC,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU,IAErB,CAAC,GAAQ,KAAa,EAAS,EAAE,GACjC,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAiB,KAAsB,EAAS,CAAY,GAE7D,IAAuB,KAAS;CAEtC,SAAS,EAAkB,GAAe;EACzC,OAAO,EAAqB,SAAS,CAAK;CAC3C;CAEA,SAAS,GAAe,GAAe;EAEtC,OADe,EAAQ,MAAM,MAAW,EAAO,UAAU,CAClD,CAAA,EAAQ,SAAS;CACzB;CAEA,SAAS,KAAuB;EAC3B,KAAY,CAAC,GAAgB,WAAW,MAC5C,EAAa,EAAI,GACjB,EAAe,QAAQ,MAAM,GAC7B,IAAU;CACX;CAEA,SAAS,IAAa;EAErB,AADA,EAAa,EAAK,GACd,KAAU,EAAe,WAAS,EAAe,QAAQ,KAAK;CACnE;CAEA,SAAS,GAAa,GAAe;EAEpC,AADA,EAAU,CAAK,GACX,KAAU,EAAS,CAAK;CAC7B;CAEA,SAAS,EAAkB,GAAe;EASzC,AARI,EAAkB,CAAK,KAC1B,EAAmB,EAAgB,QAAQ,MAAM,MAAM,CAAK,CAAC,GACzD,KAAU,EAAS,EAAgB,QAAQ,MAAM,MAAM,CAAK,CAAC,MAEjE,EAAmB,CAAC,GAAG,GAAiB,CAAK,CAAC,GAC1C,KAAU,EAAS,CAAC,GAAG,GAAiB,CAAK,CAAC,IAG/C,KAAe,EAAW;CAC/B;CAEA,IAAM,IAAgB,EAAQ,QAAQ,MAGrC,GAFI,EAAM,YACN,CAAC,EAAM,gBACP,EAAO,MAAM,YAAY,CAAC,CAAC,SAAS,EAAO,YAAY,CAAC,EAE5D;CAED,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,GAAD;GACuB;GACZ;GACD;GACE;GACA;GACD;GACJ;GACG;GACT,cAAc,CAAC,CAAC;GAChB,IAAI;aAVL;IAYC,kBAAC,SAAD;KACC,KAAK;KACC;KACN,OAAO,KAAK,UAAU,CAAoB;KAC1C,MAAK;IACL,CAAA;IAED,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;IAEnE,KAAY,kBAAC,GAAD;KAAU,MAAM;KAAU,aAAa;IAAM,CAAA;IAE1D,kBAAC,GAAD;KAA0B;eAA1B,CACE,EAAqB,KAAK,MAC1B,kBAAC,GAAD;MAEC,OAAO,GAAe,CAAK;MACpB;MACY;MACT;KACV,GALK,CAKL,CACD,GAEA,EAAqB,UAAU,KAAK,kBAAC,KAAD,EAAA,UAAI,EAAe,CAAA,CACrC;;IAEpB,kBAAC,IAAD;KACY;KACG;KACN;KACR,UAAU;eAJX,CAME,EAAc,KAAK,EAAE,UAAO,eAC5B,kBAAC,GAAD;MAEQ;MACA;MACD;MACa;MACA;KACnB,GANK,CAML,CACD,GAEA,EAAc,UAAU,KAAK,kBAAC,KAAD,EAAA,UAAI,EAAgB,CAAA,CACtB;;IAE7B,kBAAC,GAAD;KACW;KACC;KACD;KACA;KACC;IACX,CAAA;IAED,kBAAC,GAAD;KAA8B;KAAqB;IAAY,CAAA;IAC/D,kBAAC,IAAD;KAAgC;KAAuB;IAAY,CAAA;GAC9C;;CACR,CAAA;AAEjB"}

package/dist/modules/components/multiSelect/multiSelectChevron/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/multiSelect/multiSelectChevron/index.tsx
+function n(n) {
+	let { iconSize: r, isLoading: i, disabled: a, readOnly: o, isFocused: s } = n;
+	return i ? null : /* @__PURE__ */ e(t, {
+		className: `arkynMultiSelectChevron ${a || o ? "notAnimate" : ""} ${s ? "focused" : ""}`,
+		strokeWidth: 2.5,
+		style: {
+			minWidth: r,
+			minHeight: r,
+			maxWidth: r,
+			maxHeight: r
+		}
+	});
+}
+//#endregion
+export { n as MultiSelectChevron };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectChevron/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectChevron/index.tsx"],"sourcesContent":["import { ChevronDown } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype MultiSelectChevronProps = {\n\tisLoading: boolean;\n\ticonSize: number;\n\tdisabled: boolean;\n\treadOnly: boolean;\n\tisFocused: boolean;\n};\n\nfunction MultiSelectChevron(props: MultiSelectChevronProps) {\n\tconst { iconSize, isLoading, disabled, readOnly, isFocused } = props;\n\n\tconst notAnimate = disabled || readOnly ? \"notAnimate\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\n\tconst className = `arkynMultiSelectChevron ${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 { MultiSelectChevron };\n"],"mappings":";;;;AAWA,SAAS,EAAmB,GAAgC;CAC3D,IAAM,EAAE,aAAU,cAAW,aAAU,aAAU,iBAAc;CAQ/D,OADI,IAAkB,OAErB,kBAAC,GAAD;EACY,sCARM,KAAY,IAAW,eAAe,GAGD,GAFxC,IAAY,YAAY;EAQtC,aAAa;EACb,OAAO;GACN,UAAU;GACV,WAAW;GACX,UAAU;GACV,WAAW;EACZ;CACA,CAAA;AAEH"}

package/dist/modules/components/multiSelect/multiSelectChevron/styles.css

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

package/dist/modules/components/multiSelect/multiSelectContainer/index.js

@@ -0,0 +1,16 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/multiSelect/multiSelectContainer/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: `arkynMultiSelectContainer ${p ? "hasPrefix" : ""} ${u} ${d} ${i || l || o ? "opacity" : ""} ${a ? "errored" : ""} ${s ? "focused" : ""} ${c}`,
+		onClick: r,
+		children: n
+	});
+}
+//#endregion
+export { t as MultiSelectContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectContainer/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype MultiSelectContainerProps = {\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 MultiSelectContainer(props: MultiSelectContainerProps) {\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={`arkynMultiSelectContainer ${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 { MultiSelectContainer };\n"],"mappings":";;;AAkBA,SAAS,EAAqB,GAAkC;CAC/D,IAAM,EACL,aACA,yBACA,aACA,YACA,cACA,cACA,cACA,aACA,YACA,SACA,OACA,oBACG;CAOJ,OACC,kBAAC,WAAD;EACK;EACJ,WAAW,6BARK,IAAe,cAAc,GAQK,GAAG,EAAQ,GAAG,EAAK,GANvD,KAAY,KAAY,IAAY,YAAY,GAMkB,GAPlE,IAAU,YAAY,GAOuD,GAL7E,IAAY,YAAY,GAKgE,GAAG;EACzG,SAAS;EAER;CACO,CAAA;AAEX"}

package/dist/modules/components/multiSelect/multiSelectContainer/styles.css

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

package/dist/modules/components/multiSelect/multiSelectContent/index.js

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

package/dist/modules/components/multiSelect/multiSelectContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectContent/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport \"./styles.css\";\n\ntype MultiSelectContentProps = {\n\tchildren: ReactNode;\n\tsize: \"md\" | \"lg\";\n};\n\nfunction MultiSelectContent(props: MultiSelectContentProps) {\n\tconst { children, size } = props;\n\tconst className = `arkynMultiSelectContent ${size}`;\n\treturn <div className={className}>{children}</div>;\n}\n\nexport { MultiSelectContent };\n"],"mappings":";;;AAQA,SAAS,EAAmB,GAAgC;CAC3D,IAAM,EAAE,aAAU,YAAS;CAE3B,OAAO,kBAAC,OAAD;EAAgB,WAAA,2BADsB;EACV;CAAc,CAAA;AAClD"}

package/dist/modules/components/multiSelect/multiSelectContent/styles.css

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

package/dist/modules/components/multiSelect/multiSelectMark/index.js

@@ -0,0 +1,22 @@
+/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { X as n } from "lucide-react";
+//#region src/components/multiSelect/multiSelectMark/index.tsx
+function r(r) {
+	let { label: i, value: a, disabled: o, handleChangeValue: s } = r;
+	return /* @__PURE__ */ t("div", {
+		className: "arkynMultiSelectMark",
+		children: [i, /* @__PURE__ */ e("button", {
+			disabled: o,
+			type: "button",
+			onClick: (e) => {
+				e.stopPropagation(), s(a);
+			},
+			children: /* @__PURE__ */ e(n, {})
+		})]
+	});
+}
+//#endregion
+export { r as MultiSelectMark };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectMark/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectMark/index.tsx"],"sourcesContent":["import { X } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype MultiSelectMarkProps = {\n\tlabel: string;\n\tdisabled: boolean;\n\tvalue: string;\n\thandleChangeValue: (value: string) => void;\n};\n\nfunction MultiSelectMark(props: MultiSelectMarkProps) {\n\tconst { label, value, disabled, handleChangeValue } = props;\n\n\treturn (\n\t\t<div className=\"arkynMultiSelectMark\">\n\t\t\t{label}\n\n\t\t\t<button\n\t\t\t\tdisabled={disabled}\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={(e) => {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\thandleChangeValue(value);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<X />\n\t\t\t</button>\n\t\t</div>\n\t);\n}\n\nexport { MultiSelectMark };\n"],"mappings":";;;;AAUA,SAAS,EAAgB,GAA6B;CACrD,IAAM,EAAE,UAAO,UAAO,aAAU,yBAAsB;CAEtD,OACC,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,GAED,kBAAC,UAAD;GACW;GACV,MAAK;GACL,UAAU,MAAM;IAEf,AADA,EAAE,gBAAgB,GAClB,EAAkB,CAAK;GACxB;aAEA,kBAAC,GAAD,CAAI,CAAA;EACG,CAAA,CACJ;;AAEP"}

package/dist/modules/components/multiSelect/multiSelectMark/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynMultiSelectMark{background:var(--background,#f4f4f5);color:var(--text-body,#52525b);text-align:left;z-index:6;-webkit-user-select:none;user-select:none;border-radius:4px;align-items:center;gap:4px;padding:2px 6px;font-size:14px;font-weight:400;line-height:19.07px;display:flex}.arkynMultiSelectMark button{background:inherit;border:none;justify-content:center;align-items:center;width:15px;height:15px;display:flex}.arkynMultiSelectMark button:disabled{cursor:not-allowed}.arkynMultiSelectMark button:hover:not(:disabled){cursor:pointer;filter:brightness(.9)}.arkynMultiSelectMark button svg{min-width:10px;min-height:10px;color:var(--text-muted,#a1a1aa)}}

package/dist/modules/components/multiSelect/multiSelectOption/index.js

@@ -0,0 +1,20 @@
+/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Check as n } from "lucide-react";
+//#region src/components/multiSelect/multiSelectOption/index.tsx
+function r(r) {
+	let { label: i, optionHasSelected: a, handleChangeValue: o, value: s, size: c } = r;
+	return /* @__PURE__ */ t("div", {
+		onClick: () => o(s),
+		className: `arkynMultiSelectOption ${c} ${a(s) ? "active" : ""}`,
+		children: [
+			i,
+			" ",
+			/* @__PURE__ */ e(n, {})
+		]
+	});
+}
+//#endregion
+export { r as MultiSelectOption };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectOption/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectOption/index.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport \"./styles.css\";\n\ntype MultiSelectOptionProps = {\n\tvalue: string;\n\tlabel: string;\n\tsize: \"md\" | \"lg\";\n\toptionHasSelected: (value: string) => boolean;\n\thandleChangeValue: (value: string) => void;\n};\n\nfunction MultiSelectOption(props: MultiSelectOptionProps) {\n\tconst { label, optionHasSelected, handleChangeValue, value, size } = props;\n\n\tconst hasActive = optionHasSelected(value) ? \"active\" : \"\";\n\tconst className = `arkynMultiSelectOption ${size} ${hasActive}`;\n\n\treturn (\n\t\t<div onClick={() => handleChangeValue(value)} className={className}>\n\t\t\t{label} <Check />\n\t\t</div>\n\t);\n}\n\nexport { MultiSelectOption };\n"],"mappings":";;;;AAWA,SAAS,EAAkB,GAA+B;CACzD,IAAM,EAAE,UAAO,sBAAmB,sBAAmB,UAAO,YAAS;CAKrE,OACC,kBAAC,OAAD;EAAK,eAAe,EAAkB,CAAK;EAAc,WAAA,0BAHd,EAAK,GAD/B,EAAkB,CAAK,IAAI,WAAW;YAIvD;GACE;GAAM;GAAC,kBAAC,GAAD,CAAQ,CAAA;EACZ;;AAEP"}

package/dist/modules/components/multiSelect/multiSelectOption/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynMultiSelectOption{color:var(--text-body,#52525b);-webkit-user-select:none;user-select:none;background-color:var(--background-foreground,#fff);justify-content:space-between;align-items:center;font-weight:400;line-height:21.79px;display:flex}.arkynMultiSelectOption.md{padding:8px 16px;font-size:14px}.arkynMultiSelectOption.lg{padding:8px 16px;font-size:16px}.arkynMultiSelectOption svg{width:20px;height:20px;color:rgb(var(--spotlight-primary,17, 109, 220));display:none}.arkynMultiSelectOption:hover{cursor:pointer;filter:brightness(.95)}.arkynMultiSelectOption.active{color:var(--text-heading,#09090b);filter:brightness(.95);font-weight:600}.arkynMultiSelectOption.active svg{display:unset}}

package/dist/modules/components/multiSelect/multiSelectOptionsContainer/index.js

@@ -0,0 +1,38 @@
+import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
+import { Input as t } from "../../input/index.js";
+/* empty css       */
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Search as s } from "lucide-react";
+//#region src/components/multiSelect/multiSelectOptionsContainer/index.tsx
+function c(c) {
+	let { children: l, isFocused: u, isSearchable: d, search: f, onSearch: p } = c, m = r(null), [h, g] = i("bottom");
+	e(u), n(() => {
+		u && (() => {
+			if (!m.current) return;
+			let e = m.current.parentElement;
+			if (!e) return;
+			let t = e.getBoundingClientRect();
+			window.innerHeight - t.bottom < 300 && t.top > 300 ? g("top") : g("bottom");
+		})();
+	}, [u]);
+	function _(e) {
+		d && p(e.target.value);
+	}
+	return u ? /* @__PURE__ */ o("div", {
+		ref: m,
+		className: `arkynMultiSelectOptionsContainer ${h}`,
+		children: [d && /* @__PURE__ */ a(t, {
+			type: "search",
+			name: "search-select",
+			variant: "underline",
+			leftIcon: s,
+			value: f,
+			onChange: _
+		}), l]
+	}) : null;
+}
+//#endregion
+export { c as MultiSelectOptionsContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectOptionsContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectOptionsContainer/index.tsx"],"sourcesContent":["import { Search } from \"lucide-react\";\nimport {\n\ttype ChangeEvent,\n\ttype ReactNode,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { Input } from \"../../input\";\n\nimport \"./styles.css\";\n\ntype MultiSelectOptionsContainerProps = {\n\tisFocused: boolean;\n\tisSearchable: boolean;\n\tchildren: ReactNode;\n\tsearch: string;\n\tonSearch: (value: string) => void;\n};\n\nfunction MultiSelectOptionsContainer(props: MultiSelectOptionsContainerProps) {\n\tconst { children, isFocused, isSearchable, search, onSearch } = 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 = 300;\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\tfunction handleSearch(e: ChangeEvent<HTMLInputElement>) {\n\t\tif (!isSearchable) return;\n\t\tonSearch(e.target.value);\n\t}\n\n\tif (!isFocused) return null;\n\n\treturn (\n\t\t<div\n\t\t\tref={containerRef}\n\t\t\tclassName={`arkynMultiSelectOptionsContainer ${position}`}\n\t\t>\n\t\t\t{isSearchable && (\n\t\t\t\t<Input\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tname=\"search-select\"\n\t\t\t\t\tvariant=\"underline\"\n\t\t\t\t\tleftIcon={Search}\n\t\t\t\t\tvalue={search}\n\t\t\t\t\tonChange={handleSearch}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { MultiSelectOptionsContainer };\n"],"mappings":";;;;;;;AAsBA,SAAS,EAA4B,GAAyC;CAC7E,IAAM,EAAE,aAAU,cAAW,iBAAc,WAAQ,gBAAa,GAE1D,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAU,KAAe,EAA2B,QAAQ;CAInE,AAFA,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;CAEd,SAAS,EAAa,GAAkC;EAClD,KACL,EAAS,EAAE,OAAO,KAAK;CACxB;CAIA,OAFK,IAGJ,kBAAC,OAAD;EACC,KAAK;EACL,WAAW,oCAAoC;YAFhD,CAIE,KACA,kBAAC,GAAD;GACC,MAAK;GACL,MAAK;GACL,SAAQ;GACR,UAAU;GACV,OAAO;GACP,UAAU;EACV,CAAA,GAGD,CACG;MAnBiB;AAqBxB"}

package/dist/modules/components/multiSelect/multiSelectOptionsContainer/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynMultiSelectOptionsContainer{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}.arkynMultiSelectOptionsContainer.bottom{top:calc(100% + 5px)}.arkynMultiSelectOptionsContainer.top{bottom:calc(100% + 5px)}.arkynMultiSelectOptionsContainer>p{text-align:center;color:var(--text-body,#52525b);padding:16px;font-size:14px;font-weight:400;line-height:21.79px}}

package/dist/modules/components/multiSelect/multiSelectOverlay/index.js

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

package/dist/modules/components/multiSelect/multiSelectOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/multiSelect/multiSelectOverlay/index.tsx"],"sourcesContent":["import \"./styles.css\";\n\ntype MultiSelectOverlayProps = {\n\tisFocused: boolean;\n\thandleBlur: () => void;\n};\n\nfunction MultiSelectOverlay(props: MultiSelectOverlayProps) {\n\tconst { isFocused, handleBlur } = props;\n\tif (!isFocused) return null;\n\treturn <aside className=\"arkynMultiSelectOverlay\" onClick={handleBlur} />;\n}\n\nexport { MultiSelectOverlay };\n"],"mappings":";;;AAOA,SAAS,EAAmB,GAAgC;CAC3D,IAAM,EAAE,cAAW,kBAAe;CAElC,OADK,IACE,kBAAC,SAAD;EAAO,WAAU;EAA0B,SAAS;CAAa,CAAA,IADjD;AAExB"}

package/dist/modules/components/multiSelect/multiSelectOverlay/styles.css

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

package/dist/modules/components/multiSelect/multiSelectSpinner/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/multiSelect/multiSelectSpinner/index.tsx
+function n(n) {
+	let { iconSize: r, isLoading: i } = n;
+	return i ? /* @__PURE__ */ e(t, {
+		className: "arkynMultiSelectSpinner",
+		size: r,
+		strokeWidth: 2.5
+	}) : null;
+}
+//#endregion
+export { n as MultiSelectSpinner };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/multiSelect/multiSelectSpinner/index.js.map

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

package/dist/modules/components/multiSelect/multiSelectSpinner/styles.css

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

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

@@ -0,0 +1,31 @@
+@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{.arkynMultiSelectChevron{color:var(--text-muted,#a1a1aa);transition:all .15s ease-in-out}.arkynMultiSelectChevron:not(.notAnimate).focused{transform:rotate(180deg)}}
+
+@layer arkyn{.arkynMultiSelectContainer{border:1px solid #0000;border-radius:8px;outline:1px solid #0000;align-items:center;gap:8px;width:min-content;padding:0 16px;display:flex;position:relative}.arkynMultiSelectContainer:hover{cursor:pointer}.arkynMultiSelectContainer.opacity{opacity:.5}.arkynMultiSelectContainer .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}.arkynMultiSelectContainer>svg{color:var(--text-muted,#a1a1aa)}.arkynMultiSelectContainer.errored>svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynMultiSelectContainer:not(.opacity).focused>svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynMultiSelectContainer.solid{border-color:var(--border,#e2e8f0);background-color:var(--input-background,#fafafa)}.arkynMultiSelectContainer.solid.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynMultiSelectContainer:not(.opacity).solid.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynMultiSelectContainer.outline{border-color:var(--border,#e2e8f0);background-color:var(--background-foreground,#fff)}.arkynMultiSelectContainer.outline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynMultiSelectContainer:not(.opacity).outline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220));outline-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynMultiSelectContainer.underline{border-top:none;border-left:none;border-right:none;border-color:var(--border,#e2e8f0);border-radius:0;outline:none}.arkynMultiSelectContainer.underline .prefix{display:none}.arkynMultiSelectContainer.underline:before{content:" ";background:0 0;height:1px;position:absolute;bottom:-2px;left:0;right:0}.arkynMultiSelectContainer.underline.errored{border-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynMultiSelectContainer.underline.errored:before{background:rgb(var(--spotlight-danger,244, 63, 94))}.arkynMultiSelectContainer:not(.opacity).underline.focused{border-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynMultiSelectContainer:not(.opacity).underline.focused:before{background:rgb(var(--spotlight-primary,17, 109, 220))}.arkynMultiSelectContainer.md{min-height:40px}.arkynMultiSelectContainer.md.hasPrefix{padding-left:60px}.arkynMultiSelectContainer.md .prefix{width:44px;height:40px;font-size:14px}.arkynMultiSelectContainer.lg{min-height:44px}.arkynMultiSelectContainer.lg .prefix{width:48px;height:44px;font-size:16px}.arkynMultiSelectContainer.lg.hasPrefix{padding-left:64px}}
+
+@layer arkyn{.arkynMultiSelectContent{flex-wrap:wrap;flex:1;align-items:start;gap:4px;display:flex}.arkynMultiSelectContent>p{color:var(--text-muted,#a1a1aa);-webkit-user-select:none;user-select:none;font-weight:400}.arkynMultiSelectContent.md>p{font-size:14px;line-height:14px}.arkynMultiSelectContent.lg>p{font-size:16px;line-height:16px}}
+
+@layer arkyn{.arkynMultiSelectMark{background:var(--background,#f4f4f5);color:var(--text-body,#52525b);text-align:left;z-index:6;-webkit-user-select:none;user-select:none;border-radius:4px;align-items:center;gap:4px;padding:2px 6px;font-size:14px;font-weight:400;line-height:19.07px;display:flex}.arkynMultiSelectMark button{background:inherit;border:none;justify-content:center;align-items:center;width:15px;height:15px;display:flex}.arkynMultiSelectMark button:disabled{cursor:not-allowed}.arkynMultiSelectMark button:hover:not(:disabled){cursor:pointer;filter:brightness(.9)}.arkynMultiSelectMark button svg{min-width:10px;min-height:10px;color:var(--text-muted,#a1a1aa)}}
+
+@layer arkyn{.arkynMultiSelectOption{color:var(--text-body,#52525b);-webkit-user-select:none;user-select:none;background-color:var(--background-foreground,#fff);justify-content:space-between;align-items:center;font-weight:400;line-height:21.79px;display:flex}.arkynMultiSelectOption.md{padding:8px 16px;font-size:14px}.arkynMultiSelectOption.lg{padding:8px 16px;font-size:16px}.arkynMultiSelectOption svg{width:20px;height:20px;color:rgb(var(--spotlight-primary,17, 109, 220));display:none}.arkynMultiSelectOption:hover{cursor:pointer;filter:brightness(.95)}.arkynMultiSelectOption.active{color:var(--text-heading,#09090b);filter:brightness(.95);font-weight:600}.arkynMultiSelectOption.active svg{display:unset}}
+
+@layer arkyn{.arkynMultiSelectOptionsContainer{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}.arkynMultiSelectOptionsContainer.bottom{top:calc(100% + 5px)}.arkynMultiSelectOptionsContainer.top{bottom:calc(100% + 5px)}.arkynMultiSelectOptionsContainer>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{.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{.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{.arkynMultiSelectOverlay{z-index:5;position:fixed;inset:0}}
+
+@layer arkyn{.arkynMultiSelectSpinner{animation:2s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}