@g4rcez/components 0.0.9 → 0.0.10

package/dist/components/table/index.js

@@ -0,0 +1,82 @@
+import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+import Linq from "linq-arrays";
+import React, { Fragment, useMemo } from "react";
+import { TableVirtuoso } from "react-virtuoso";
+import { Is } from "sidekicker";
+import { useReducer } from "use-typed-reducer";
+import { path } from "~/lib/fns";
+import { Metadata } from "./metadata";
+import { multiSort } from "./sort";
+import { createOptionCols } from "./table-lib";
+import { TableHeader } from "./thead";
+const TableBody = React.forwardRef((props, ref) => {
+    var _a;
+    return (_jsx("tbody", Object.assign({}, props, { className: `divide-y divide-table-row ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ref: ref, children: _jsx(AnimatePresence, { children: props.children }) })));
+});
+const VirtualTable = React.forwardRef((props, ref) => {
+    var _a;
+    return (_jsx("table", Object.assign({}, props, { ref: ref, className: `table min-w-full divide-y divide-table-border table-auto text-left ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` })));
+});
+const Thead = React.forwardRef((props, ref) => _jsx("thead", Object.assign({}, props, { className: "bg-content-bg shadow-xs group:sticky top-0", ref: ref })));
+const TRow = React.forwardRef((props, ref) => { var _a; return _jsx("tr", Object.assign({}, props, { ref: ref, className: `table-row ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` })); });
+const components = {
+    TableHead: Thead,
+    Table: VirtualTable,
+    TableBody: TableBody,
+    TableRow: TRow,
+};
+const loadingArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+const InnerTable = (_a) => {
+    var { filters, setCols, setFilters, sorters, cols, setSorters } = _a, props = __rest(_a, ["filters", "setCols", "setFilters", "sorters", "cols", "setSorters"]);
+    const rows = useMemo(() => {
+        if (props.loading)
+            return loadingArray;
+        const linq = new Linq(props.rows);
+        if (filters.length > 0) {
+            filters.forEach((x) => (x.value === "" || Number.isNaN(x.value) ? undefined : linq.Where(x.name, x.operation.symbol, x.value)));
+        }
+        if (sorters.length === 0)
+            return linq.Select();
+        return multiSort(linq.Select(), sorters);
+    }, [props.rows, filters, sorters, props.loading]);
+    return (_jsx("div", { className: "group border border-table-border rounded-lg px-1 min-w-full", children: _jsx(TableVirtuoso, { data: rows, totalCount: rows.length, useWindowScroll: true, components: components, fixedHeaderContent: () => (_jsx(TableHeader, { sorters: sorters, setSorters: setSorters, filters: filters, setFilters: setFilters, headers: cols, setCols: setCols })), itemContent: (index, row) => cols.map((col, colIndex) => {
+                const matrix = `${colIndex},${index}`;
+                const value = path(row, col.id);
+                const Component = col.Element;
+                return (_createElement("td", Object.assign({}, col.cellProps, { "data-matrix": matrix, key: `accessor-${index}-${colIndex}`, className: "px-2 h-14 border-none first:table-cell hidden md:table-cell" }), props.loading ? (_jsx("div", { className: "animate-pulse h-2 bg-table-border rounded" })) : Component ? (_jsx(Component, { row: row, matrix: matrix, col: col, rowIndex: index, value: value })) : (_jsx(Fragment, { children: Is.nil(value) ? "" : value }))));
+            }) }) }));
+};
+const dispatcherFun = (prev, setter) => typeof setter === "function" ? setter(prev) : setter;
+export const Table = (props) => {
+    var _a, _b, _c;
+    const optionCols = useMemo(() => createOptionCols(props.cols), [props.cols]);
+    const [state, dispatch] = useReducer({
+        cols: props.cols,
+        filters: ((_a = props.filters) !== null && _a !== void 0 ? _a : []),
+        groups: ((_b = props.groups) !== null && _b !== void 0 ? _b : []),
+        sorters: ((_c = props.sorters) !== null && _c !== void 0 ? _c : []),
+    }, (get) => {
+        const create = (key) => (arg) => {
+            const state = get.state();
+            return Object.assign(Object.assign({}, state), { [key]: dispatcherFun(state[key], arg) });
+        };
+        return {
+            cols: create("cols"),
+            filters: create("filters"),
+            groups: create("groups"),
+            sorters: create("sorters"),
+        };
+    }, {
+        interceptor: [
+            (state) => {
+                var _a;
+                (_a = props.set) === null || _a === void 0 ? void 0 : _a.call(props, state);
+                return state;
+            },
+        ],
+    });
+    return (_jsxs("div", { className: "relative min-w-full", children: [_jsx(Metadata, { setCols: dispatch.cols, rows: props.rows, cols: state.cols, filters: state.filters, groups: state.groups, options: optionCols, setFilters: dispatch.filters, setGroups: dispatch.groups, setSorters: dispatch.sorters, sorters: state.sorters }), state.groups.length === 0 ? (_jsx(InnerTable, Object.assign({}, props, { cols: state.cols, filters: state.filters, groups: state.groups, index: 0, optionCols: optionCols, options: optionCols, setCols: dispatch.cols, setFilters: dispatch.filters, setGroups: dispatch.groups, setSorters: dispatch.sorters, sorters: state.sorters }))) : (_jsx("div", { className: "flex flex-wrap gap-4", children: state.groups.map((group, index) => (_jsx(motion.div, { className: "min-w-full", children: _jsx(InnerTable, Object.assign({}, props, { cols: state.cols, filters: state.filters, group: group, groups: state.groups, index: index, optionCols: optionCols, options: optionCols, rows: group.rows, setCols: dispatch.cols, setFilters: dispatch.filters, setGroups: dispatch.groups, setSorters: dispatch.sorters, sorters: state.sorters })) }, `group-${group.groupId}`))) }))] }));
+};

package/dist/components/table/metadata.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Filter } from "./filter";
+import { Group } from "./group";
+import { Sort } from "./sort";
+import { valueFromType } from "./table-lib";
+export const Metadata = (props) => (_jsx("header", { className: "min-w-full mb-1", children: _jsxs("div", { className: "flex flex-wrap min-w-full items-center justify-between gap-x-4 gap-y-1", children: [_jsxs("div", { className: "flex w-fit items-centeend gap-4 whitespace-nowrap py-2", children: [_jsx("p", { children: _jsx(Filter, { cols: props.cols, options: props.options, filters: props.filters, set: props.setFilters }) }), _jsx("p", { children: _jsx(Sort, { options: props.options, cols: props.cols, sorters: props.sorters, set: props.setSorters }) }), _jsx("p", { children: _jsx(Group, { rows: props.rows, groups: props.groups, setGroups: props.setGroups, options: props.options, cols: props.cols }) })] }), _jsx("ul", { className: "flex flex-wrap w-full flex-1 flex-grow flex-row items-center md:justify-end gap-4", children: props.filters.map((x) => (_jsxs("li", { className: "flex gap-1 items-center rounded-xl border border-card-border px-4 py-0.5", children: [_jsxs("span", { children: [_jsx("span", { className: "size-3 mr-2 aspect-square bg-primary inline-block rounded-full", "aria-hidden": "true" }), x.label, " ", x.operation.label.toLowerCase(), ":"] }), _jsxs("div", { className: "relative w-min min-w-[1ch]", children: [_jsx("span", { "aria-hidden": "true", className: "invisible whitespace-pre p-0", children: x.value || " " }), _jsx("input", { type: x.type, value: x.value, className: "absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-none [appearance:textfield] after:empty:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", onChange: (e) => {
+                                        const value = valueFromType(e.target);
+                                        props.setFilters((prev) => prev.map((item) => x.id === item.id
+                                            ? Object.assign(Object.assign({}, item), { value }) : item));
+                                    } })] })] }, `filter-table-${x.id}`))) })] }) }));

package/dist/components/table/sort.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, PlusIcon, SortAscIcon, Trash2Icon } from "lucide-react";
+import { Fragment, useEffect, useState } from "react";
+import { Dropdown } from "~/components/floating/dropdown";
+import { Select } from "~/components/form/select";
+import { uuid } from "~/lib/fns";
+var Order;
+(function (Order) {
+    Order["Asc"] = "asc";
+    Order["Desc"] = "desc";
+    Order["Undefined"] = "undefined";
+})(Order || (Order = {}));
+const createSorterFn = (fields) => (a, b) => fields.reduce((acc, x) => {
+    const reverse = x.type === "desc" ? -1 : 1;
+    const property = x.value;
+    const p = a[property] > b[property] ? reverse : a[property] < b[property] ? -reverse : 0;
+    return acc !== 0 ? acc : p;
+}, 0);
+export const multiSort = (array, fields) => array.sort(createSorterFn(fields));
+const orders = {
+    asc: { label: "Ascending", value: Order.Asc },
+    desc: { label: "Descending", value: Order.Desc },
+};
+const orderOptions = [orders.asc, orders.desc];
+const createSorter = (col, order = Order.Asc) => ({
+    id: uuid(),
+    type: order,
+    value: col.id,
+    label: orders[Order.Asc].label,
+});
+export const Sort = (props) => {
+    const onAddSorter = () => {
+        const col = props.cols[0];
+        if (col)
+            props.set((prev) => [...prev, createSorter(col)]);
+    };
+    const onSetSorter = (id) => (e) => {
+        const value = e.target.value;
+        props.set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { value: value }) : x)));
+    };
+    const onSortOrderType = (id) => (e) => {
+        const type = e.target.value;
+        props.set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { type: type }) : x)));
+    };
+    const onDelete = (e) => {
+        const id = e.currentTarget.dataset.id || "";
+        props.set((prev) => prev.filter((x) => x.id !== id));
+    };
+    return (_jsx(Fragment, { children: _jsx(Dropdown, { arrow: false, title: "Order By", trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums text-foreground-description", children: [_jsx(SortAscIcon, { size: 14 }), "Order by ", props.sorters.length === 0 ? "" : ` (${props.sorters.length})`] }), children: _jsxs("ul", { className: "mt-4 space-y-2", children: [props.sorters.map((sorter) => {
+                        return (_jsxs("li", { className: "flex flex-nowrap gap-3", children: [_jsx(Select, { onChange: onSetSorter(sorter.id), options: props.options, placeholder: "Selecione um campo...", value: sorter.value }), _jsx(Select, { onChange: onSortOrderType(sorter.id), value: sorter.type, options: orderOptions, placeholder: "Opera\u00E7\u00E3o..." }), _jsx("button", { className: "mt-4", "data-id": sorter.id, onClick: onDelete, children: _jsx(Trash2Icon, { className: "text-danger", size: 14 }) })] }, `sorter-select-${sorter.id}`));
+                    }), _jsx("li", { children: _jsxs("button", { onClick: onAddSorter, className: "text-primary flex items-center gap-1", children: [_jsx(PlusIcon, { size: 14 }), " Adicionar ordena\u00E7\u00E3o"] }) })] }) }) }));
+};
+export const SorterHead = (props) => {
+    const sorter = props.sorters.find((sort) => sort.id === props.col.id);
+    const [status, setStatus] = useState(sorter ? sorter.type : Order.Undefined);
+    const onClick = () => setStatus((prev) => (prev === Order.Undefined ? Order.Asc : prev === Order.Asc ? Order.Desc : Order.Undefined));
+    useEffect(() => {
+        props.setSorters((prev) => {
+            if (status === Order.Undefined)
+                return prev.filter((x) => x.value !== props.col.id);
+            const findIndex = prev.findIndex((p) => p.value === props.col.id);
+            if (findIndex === -1)
+                return [...prev, createSorter(props.col, status)];
+            prev[findIndex] = createSorter(props.col, status);
+            return [...prev];
+        });
+    }, [status, props.col]);
+    return (_jsxs("button", { className: "isolate flex items-center", onClick: onClick, children: [status === Order.Asc ? _jsx(ChevronDownIcon, { size: 14 }) : null, status === Order.Desc ? _jsx(ChevronUpIcon, { size: 14 }) : null, status === Order.Undefined ? _jsx(SortAscIcon, { size: 14 }) : null] }));
+};

package/dist/components/table/table-lib.js

@@ -0,0 +1,51 @@
+"use client";
+import { LocalStorage } from "storage-manager-js";
+import { useReducer } from "use-typed-reducer";
+import { isSsr } from "~/lib/fns";
+export const getLabel = (col) => { var _a, _b; return (_b = (_a = col.headerLabel) !== null && _a !== void 0 ? _a : col.thead) !== null && _b !== void 0 ? _b : col.id; };
+export const createOptionCols = (cols) => cols.map((opt) => {
+    var _a, _b;
+    return ({
+        value: opt.id,
+        label: ((_b = (_a = opt.thead) !== null && _a !== void 0 ? _a : opt.headerLabel) !== null && _b !== void 0 ? _b : opt.id),
+    });
+});
+export var ColType;
+(function (ColType) {
+    ColType["Boolean"] = "boolean";
+    ColType["Number"] = "number";
+    ColType["Select"] = "select";
+    ColType["Text"] = "text";
+})(ColType || (ColType = {}));
+export const valueFromType = (input) => (input.type === "number" ? input.valueAsNumber : input.value);
+const cols = () => (id, thead, options) => (Object.assign(Object.assign({}, options), { id, thead }));
+export const createColumns = (callback) => {
+    let items = [];
+    const add = (id, thead, options) => items.push(Object.assign(Object.assign({}, options), { id, thead }));
+    const remove = (id) => (items = items.filter((x) => x.id !== id));
+    callback({ add, remove });
+    return items;
+};
+const noop = {};
+export const useTablePreferences = (name, options = noop) => {
+    const init = isSsr() ? null : LocalStorage.get(`@unamed/table-${name}`) || null;
+    const [state, dispatch] = useReducer({
+        name,
+        groups: options.groups || (init === null || init === void 0 ? void 0 : init.groups) || [],
+        sorters: options.sorters || (init === null || init === void 0 ? void 0 : init.sorters) || [],
+        filters: options.filters || (init === null || init === void 0 ? void 0 : init.filters) || [],
+        cols: options.cols || (init === null || init === void 0 ? void 0 : init.cols) || [],
+    }, (get) => {
+        const intercept = (partial) => {
+            const prev = get.state();
+            const result = Object.assign(Object.assign({}, prev), partial);
+            if (!isSsr())
+                LocalStorage.set(`@unamed/table-${prev.name}`, result);
+            return result;
+        };
+        return {
+            set: (getters) => intercept(getters),
+        };
+    });
+    return Object.assign(Object.assign(Object.assign({}, state), dispatch), { name });
+};

package/dist/components/table/thead.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, Reorder } from "framer-motion";
+import { PlusIcon, SearchIcon } from "lucide-react";
+import { Dropdown } from "~/components/floating/dropdown";
+import { useReactive } from "~/hooks/use-reactive";
+import { ColumnHeaderFilter, createFilterFromCol } from "./filter";
+import { SorterHead } from "./sort";
+import { getLabel } from "./table-lib";
+const targetTransitionAnimate = { opacity: 1 };
+const whileDrag = { opacity: 0.75, backgroundColor: "#a1a1aa" };
+const exit = { opacity: 0, transition: { duration: 0.4, type: "spring" } };
+const HeaderChild = (props) => {
+    var _a, _b;
+    const ownFilters = props.filters.filter((x) => x.name === props.header.id);
+    return (_jsx(Reorder.Item, Object.assign({}, props.header.thProps, { as: "th", exit: exit, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, value: props.header, whileDrag: whileDrag, animate: targetTransitionAnimate, className: `hidden px-2 py-4 first:table-cell md:table-cell ${(_b = (_a = props.header.thProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ""}`, children: _jsx("span", { className: "flex items-center justify-between", children: _jsxs("span", { className: "flex items-center gap-1", children: [_jsxs(Dropdown, { arrow: true, trigger: _jsx(SearchIcon, { size: 14 }), onChange: (opened) => {
+                            if (!opened)
+                                return;
+                            props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, {})));
+                        }, children: ["Filter by: ", getLabel(props.header), (ownFilters.length === 0) === null ? null : (_jsxs("ul", { children: [ownFilters.map((filter) => (_jsx("li", { className: "my-1", children: _jsx(ColumnHeaderFilter, { filter: filter, set: props.setFilters }) }, `thead-filter-${filter.id}`))), _jsx("li", { children: _jsxs("button", { onClick: () => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header))), className: "text-primary-muted flex items-center", children: [_jsx(PlusIcon, { size: 14 }), " Add"] }) })] }))] }), _jsx("span", { className: "pointer-events-auto text-balance text-base", children: props.header.thead }), _jsx(SorterHead, { col: props.header, setSorters: props.setSorters, sorters: props.sorters })] }) }) })));
+};
+export const TableHeader = (props) => {
+    const [headers, setHeaders] = useReactive(props.headers);
+    const onPointerUp = () => props.setCols(headers);
+    return (_jsx(Reorder.Group, { as: "tr", axis: "x", drag: true, layout: true, layoutRoot: true, layoutScroll: true, initial: false, values: headers, onReorder: setHeaders, onPointerUp: onPointerUp, className: "bg-table-background border-none text-lg", children: _jsx(AnimatePresence, { children: headers.map((header) => (_jsx(HeaderChild, { setFilters: props.setFilters, filters: props.filters, setSorters: props.setSorters, sorters: props.sorters, header: header }, `header-child-item-${header.id}`))) }) }));
+};

package/dist/hooks/use-form.js

@@ -0,0 +1,126 @@
+import { __rest } from "tslib";
+import { parse } from "qs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Is, setPath } from "sidekicker";
+import { ZodArray, ZodNumber } from "zod";
+import { formReset } from "~/components/form/form";
+const sort = (a, b) => a.localeCompare(b);
+const options = {
+    sort,
+    allowDots: true,
+    charset: "utf-8",
+    parseArrays: true,
+    plainObjects: true,
+    charsetSentinel: true,
+    allowPrototypes: false,
+    depth: Number.MAX_SAFE_INTEGER,
+    arrayLimit: Number.MAX_SAFE_INTEGER,
+    parameterLimit: Number.MAX_SAFE_INTEGER,
+};
+export const formToJson = (form) => {
+    const formData = new FormData(form);
+    const urlSearchParams = new URLSearchParams(formData);
+    return parse(urlSearchParams.toString(), options);
+};
+export const convertPath = (path) => path.replace("[", ".").replace("]", "").split(".");
+export const getSchemaShape = (name, schema) => convertPath(name).reduce((acc, el) => {
+    var _a;
+    if (el === "")
+        return acc;
+    const shape = ((_a = acc.shape) === null || _a === void 0 ? void 0 : _a[el]) || acc;
+    return shape instanceof ZodArray ? shape.element : shape;
+}, schema);
+const getValueByType = (e) => {
+    if (e.type === "checkbox")
+        return e.checked;
+    if (e.type === "number")
+        return e.valueAsNumber;
+    return e.value;
+};
+export const useForm = (schema) => {
+    const [errors, setErrors] = useState(null);
+    const ref = useRef({});
+    const select = (name, props) => {
+        const validator = getSchemaShape(name, schema);
+        return Object.assign(Object.assign({}, props), { name, id: name, error: errors === null || errors === void 0 ? void 0 : errors[name], ref: (e) => {
+                if (e === null)
+                    return;
+                ref.current[name] = { element: e, schema: validator };
+            } });
+    };
+    const input = (name, props) => {
+        var _a;
+        const validator = getSchemaShape(name, schema);
+        return Object.assign(Object.assign({}, props), { name, id: name, type: Is.instance(validator, ZodNumber) ? "number" : (_a = props === null || props === void 0 ? void 0 : props.type) !== null && _a !== void 0 ? _a : "text", error: errors === null || errors === void 0 ? void 0 : errors[name], ref: (e) => {
+                if (e === null)
+                    return;
+                ref.current[name] = { element: e, schema: validator };
+            } });
+    };
+    useEffect(() => {
+        const events = Object.values(ref.current).map((input) => {
+            const validation = input.schema.safeParse(getValueByType(input.element));
+            const onBlurField = (e) => {
+                const validation = input.schema.safeParse(getValueByType(e.target));
+                const html = input.element;
+                const name = html.name;
+                if (validation.success) {
+                    html.setCustomValidity("");
+                    return setErrors((prev) => {
+                        const _a = prev || {}, _b = name, removed = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                        return rest === null || Is.empty(rest) ? null : rest;
+                    });
+                }
+                if (html.required) {
+                    const errorMessage = validation.error.issues[0].message;
+                    html.setCustomValidity(errorMessage);
+                    setErrors((prev) => (Object.assign(Object.assign({}, prev), { [name]: errorMessage })));
+                }
+            };
+            const event = input.element.tagName === "INPUT" ? "blur" : "change";
+            input.element.addEventListener(event, onBlurField);
+            return {
+                input,
+                hasInitialError: input.element.required ? !validation.success : false,
+                unsubscribe: () => input.element.removeEventListener(event, onBlurField),
+            };
+        });
+        const hasErrors = events.some((x) => x.hasInitialError);
+        if (hasErrors)
+            setErrors((prev) => (prev === null ? {} : prev));
+        return () => events.forEach((item) => item.unsubscribe());
+    });
+    const onInvalid = useCallback((exec) => (event) => {
+        event.preventDefault();
+        const form = event.currentTarget;
+        const validationErrors = Object.values(ref.current).reduce((acc, input) => {
+            const field = input.element;
+            const validation = input.schema.safeParse(getValueByType(field));
+            if (validation.success)
+                return acc;
+            const errorMessage = validation.error.issues[0].message;
+            field.setAttribute("data-initialized", "true");
+            return Object.assign(Object.assign({}, acc), { [field.name]: errorMessage });
+        }, {});
+        const e = Is.empty(validationErrors) ? null : {};
+        setErrors(e);
+        exec === null || exec === void 0 ? void 0 : exec({ form, errors: e || {} });
+    }, []);
+    const onSubmit = useCallback((exec) => (event) => {
+        event.preventDefault();
+        const form = event.currentTarget;
+        let json = formToJson(form);
+        Array.from(form.elements).forEach((field) => {
+            if (field.tagName === "SELECT") {
+                const input = field;
+                json = setPath(json, input.name, input.value);
+            }
+            if (field.tagName === "INPUT") {
+                const input = field;
+                json = setPath(json, input.name, getValueByType(input));
+            }
+        });
+        exec({ form, json, event, reset: () => formReset(form) });
+    }, []);
+    return { input, select, onSubmit, errors, onInvalid, disabled: errors !== null };
+};

package/dist/hooks/use-previous.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from "react";
+export const usePrevious = (value) => {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+};

package/dist/hooks/use-reactive.js

@@ -0,0 +1,8 @@
+import { useEffect, useState } from "react";
+export const useReactive = (t, initial) => {
+    const [state, setState] = useState(() => (initial ? initial : t));
+    useEffect(() => {
+        setState(t);
+    }, [t]);
+    return [state, setState];
+};

package/dist/index.css

@@ -1 +1 @@
-/*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.right-0{right:0}.top-0{top:0}.isolate{isolation:isolate}.z-floating{z-index:10}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.ml-3{margin-left:.75rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-row{display:table-row}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.size-3{width:.75rem;height:.75rem}.size-5{width:1.25rem;height:1.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-full{height:100%}.h-screen{height:100vh}.w-11{width:2.75rem}.w-3{width:.75rem}.w-4{width:1rem}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-min{width:-moz-min-content;width:min-content}.min-w-\[1ch\]{min-width:1ch}.min-w-full{min-width:100%}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.table-auto{table-layout:auto}.origin-\[top_center\]{transform-origin:top center}.translate-x-0{--tw-translate-x:0px}.transform,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.list-none{list-style-type:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-table-border>:not([hidden])~:not([hidden]){border-color:var(--table-border)}.divide-table-row>:not([hidden])~:not([hidden]){border-color:var(--table-row)}.overflow-auto{overflow:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.text-balance{text-wrap:balance}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-b-lg{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-r-2{border-right-width:2px}.border-none{border-style:none}.border-card-border{border-color:var(--card-border)}.border-floating-border{border-color:var(--floating-border)}.border-input-border{border-color:var(--input-border)}.border-table-border{border-color:var(--table-border)}.border-tooltip-border{border-color:var(--tooltip-border)}.border-transparent{border-color:#0000}.bg-background{background-color:var(--background)}.bg-card-background{background-color:var(--card-background)}.bg-disabled{background-color:var(--disabled)}.bg-floating-background{background-color:var(--floating-background)}.bg-primary{background-color:var(--primary-DEFAULT)}.bg-primary-subtle{background-color:var(--primary-subtle)}.bg-table-background{background-color:var(--table-background)}.bg-table-border{background-color:var(--table-border)}.bg-tooltip-background{background-color:var(--tooltip-background)}.bg-transparent{background-color:initial}.fill-floating-background{fill:var(--floating-background)}.fill-tooltip-background{fill:var(--tooltip-background)}.stroke-floating-border{stroke:var(--floating-border)}.stroke-tooltip-border{stroke:var(--tooltip-border)}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pe-12{padding-inline-end:3rem}.pe-4{padding-inline-end:1rem}.pl-2{padding-left:.5rem}.pr-1{padding-right:.25rem}.ps-4{padding-inline-start:1rem}.ps-8{padding-inline-start:2rem}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.text-2xl{font-size:1.5rem;line-height:2rem}.text-7xl{font-size:4.5rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.proportional-nums{--tw-numeric-spacing:proportional-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-snug{line-height:1.375}.tracking-tight{letter-spacing:-.025em}.text-danger{color:var(--danger-DEFAULT)}.text-foreground{color:var(--foreground)}.text-primary{color:var(--primary-DEFAULT)}.text-primary-foreground{color:var(--primary-foreground)}.text-opacity-70{--tw-text-opacity:0.7}.underline{text-decoration-line:underline}.placeholder-input-placeholder::-moz-placeholder{color:var(--input-placeholder)}.placeholder-input-placeholder::placeholder{color:var(--input-placeholder)}.opacity-0{opacity:0}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-floating{--tw-shadow:#0f0f0f1a 0px 0px 0px 1px,#0f0f0f33 0px 3px 6px,#0f0f0f66 0px 9px 24px;--tw-shadow-colored:0px 0px 0px 1px var(--tw-shadow-color),0px 3px 6px var(--tw-shadow-color),0px 9px 24px var(--tw-shadow-color)}.shadow-floating,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid #0000;outline-offset:2px}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(1,.43,.36,.67);transition-duration:375ms}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(1,.43,.36,.67);transition-duration:375ms}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(1,.43,.36,.67);transition-duration:375ms}.\[appearance\:textfield\]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}select.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;padding-right:2.5rem}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,select:focus,textarea{font-size:1rem;line-height:1.5rem}.first\:table-cell:first-child{display:table-cell}.last\:border-r-0:last-child{border-right-width:0}.empty\:hidden:empty{display:none}.hover\:bg-primary-hover:hover{background-color:var(--primary-hover)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-primary:focus{--tw-ring-color:var(--primary-DEFAULT)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\:outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus-visible\:ring-2:focus-visible,.focus-visible\:ring-4:focus-visible{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-4:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-opacity-50:disabled{--tw-bg-opacity:0.5}.disabled\:text-opacity-60:disabled{--tw-text-opacity:0.6}.disabled\:text-opacity-80:disabled{--tw-text-opacity:0.8}.group:focus-within .group-focus-within\:border-primary{border-color:var(--primary-DEFAULT)}.group:focus-within .group-focus-within\:text-primary{color:var(--primary-DEFAULT)}.group:hover .group-hover\:border-primary{border-color:var(--primary-DEFAULT)}.group:hover .group-hover\:text-primary{color:var(--primary-DEFAULT)}.data-\[checked\=true\]\:translate-x-5[data-checked=true]{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[active\=true\]\:border-solid[data-active=true]{border-style:solid}.data-\[active\=false\]\:border-dashed[data-active=false]{border-style:dashed}.data-\[active\=true\]\:bg-card-background[data-active=true]{background-color:var(--card-background)}.data-\[checked\=false\]\:bg-disabled[data-checked=false]{background-color:var(--disabled)}.data-\[checked\=false\]\:bg-input-switch-bg[data-checked=false]{background-color:var(--input-switch-bg)}.data-\[checked\=true\]\:bg-input-switch[data-checked=true]{background-color:var(--input-switch)}.data-\[checked\=true\]\:bg-primary[data-checked=true]{background-color:var(--primary-DEFAULT)}.data-\[selected\=false\]\:text-input-placeholder[data-selected=false]{color:var(--input-placeholder)}.link\:text-danger:active,.link\:text-danger:hover{color:var(--danger-DEFAULT)}.group:valid:has(.input:valid:not(:-moz-placeholder-shown)) .group-assert\:block{display:block}.group:valid:has(.input:valid:not(:placeholder-shown)) .group-assert\:block{display:block}.group:valid:has(.input:valid:not(:-moz-placeholder-shown)) .group-assert\:text-success{color:var(--success-DEFAULT)}.group:valid:has(.input:valid:not(:placeholder-shown)) .group-assert\:text-success{color:var(--success-DEFAULT)}.group:valid:has(.input:valid:not(:-moz-placeholder-shown)) .group-assert\:opacity-100{opacity:1}.group:valid:has(.input:valid:not(:placeholder-shown)) .group-assert\:opacity-100{opacity:1}.group:invalid:has(.input:not(:focus):invalid[data-initialized=true]) .group-error\:block{display:block}.group:invalid:has(.input:not(:focus):invalid[data-initialized=true]) .group-error\:border-danger{border-color:var(--danger-DEFAULT)}.group:invalid:has(.input:not(:focus):invalid[data-initialized=true]) .group-error\:text-danger{color:var(--danger-DEFAULT)}.group:invalid:has(.input:not(:focus):invalid[data-initialized=true]) .group-error\:placeholder-input-mask-error::-moz-placeholder{color:var(--input-mask-error)}.group:invalid:has(.input:not(:focus):invalid[data-initialized=true]) .group-error\:placeholder-input-mask-error::placeholder{color:var(--input-mask-error)}.group:invalid:has(.input:not(:focus):invalid[data-initialized=true]) .group-error\:opacity-100{opacity:1}@media (min-width:768px){.md\:table-cell{display:table-cell}.md\:justify-end{justify-content:flex-end}}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button,.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none}
+/*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.right-0{right:0}.top-0{top:0}.isolate{isolation:isolate}.z-floating{z-index:10}.m-0{margin:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.ml-3{margin-left:.75rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-row{display:table-row}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.size-3{width:.75rem;height:.75rem}.size-5{width:1.25rem;height:1.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-6{height:1.5rem}.w-11{width:2.75rem}.w-3{width:.75rem}.w-4{width:1rem}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-min{width:-moz-min-content;width:min-content}.min-w-\[1ch\]{min-width:1ch}.min-w-full{min-width:100%}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.table-auto{table-layout:auto}.origin-\[top_center\]{transform-origin:top center}.translate-x-0{--tw-translate-x:0px}.transform,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.list-none{list-style-type:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-table-border>:not([hidden])~:not([hidden]){border-color:var(--table-border)}.divide-table-row>:not([hidden])~:not([hidden]){border-color:var(--table-row)}.overflow-auto{overflow:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.text-balance{text-wrap:balance}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-b-lg{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-r-2{border-right-width:2px}.border-none{border-style:none}.border-card-border{border-color:var(--card-border)}.border-floating-border{border-color:var(--floating-border)}.border-input-border{border-color:var(--input-border)}.border-table-border{border-color:var(--table-border)}.border-tooltip-border{border-color:var(--tooltip-border)}.border-transparent{border-color:#0000}.bg-card-background{background-color:var(--card-background)}.bg-disabled{background-color:var(--disabled)}.bg-floating-background{background-color:var(--floating-background)}.bg-primary{background-color:var(--primary-DEFAULT)}.bg-primary-subtle{background-color:var(--primary-subtle)}.bg-table-background{background-color:var(--table-background)}.bg-table-border{background-color:var(--table-border)}.bg-tooltip-background{background-color:var(--tooltip-background)}.bg-transparent{background-color:initial}.fill-floating-background{fill:var(--floating-background)}.fill-tooltip-background{fill:var(--tooltip-background)}.stroke-floating-border{stroke:var(--floating-border)}.stroke-tooltip-border{stroke:var(--tooltip-border)}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pe-12{padding-inline-end:3rem}.pe-4{padding-inline-end:1rem}.pl-2{padding-left:.5rem}.pr-1{padding-right:.25rem}.ps-4{padding-inline-start:1rem}.ps-8{padding-inline-start:2rem}.text-left{text-align:left}.align-middle{vertical-align:middle}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.proportional-nums{--tw-numeric-spacing:proportional-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-snug{line-height:1.375}.tracking-tight{letter-spacing:-.025em}.text-danger{color:var(--danger-DEFAULT)}.text-foreground{color:var(--foreground)}.text-primary{color:var(--primary-DEFAULT)}.text-primary-foreground{color:var(--primary-foreground)}.text-opacity-70{--tw-text-opacity:0.7}.underline{text-decoration-line:underline}.placeholder-input-placeholder::-moz-placeholder{color:var(--input-placeholder)}.placeholder-input-placeholder::placeholder{color:var(--input-placeholder)}.opacity-0{opacity:0}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-floating{--tw-shadow:#0f0f0f1a 0px 0px 0px 1px,#0f0f0f33 0px 3px 6px,#0f0f0f66 0px 9px 24px;--tw-shadow-colored:0px 0px 0px 1px var(--tw-shadow-color),0px 3px 6px var(--tw-shadow-color),0px 9px 24px var(--tw-shadow-color)}.shadow-floating,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid #0000;outline-offset:2px}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(1,.43,.36,.67);transition-duration:375ms}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(1,.43,.36,.67);transition-duration:375ms}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(1,.43,.36,.67);transition-duration:375ms}.\[appearance\:textfield\]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}select.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;padding-right:2.5rem}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,select:focus,textarea{font-size:1rem;line-height:1.5rem}.first\:table-cell:first-child{display:table-cell}.last\:border-r-0:last-child{border-right-width:0}.empty\:hidden:empty{display:none}.hover\:bg-primary-hover:hover{background-color:var(--primary-hover)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-primary:focus{--tw-ring-color:var(--primary-DEFAULT)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\:outline-none:focus-visible{outline:2px solid #0000;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus-visible\:ring-2:focus-visible,.focus-visible\:ring-4:focus-visible{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-4:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-opacity-50:disabled{--tw-bg-opacity:0.5}.disabled\:text-opacity-60:disabled{--tw-text-opacity:0.6}.disabled\:text-opacity-80:disabled{--tw-text-opacity:0.8}.group:focus-within .group-focus-within\:border-primary{border-color:var(--primary-DEFAULT)}.group:focus-within .group-focus-within\:text-primary{color:var(--primary-DEFAULT)}.group:hover .group-hover\:border-primary{border-color:var(--primary-DEFAULT)}.group:hover .group-hover\:text-primary{color:var(--primary-DEFAULT)}.data-\[checked\=true\]\:translate-x-5[data-checked=true]{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[active\=true\]\:border-solid[data-active=true]{border-style:solid}.data-\[active\=false\]\:border-dashed[data-active=false]{border-style:dashed}.data-\[active\=true\]\:bg-card-background[data-active=true]{background-color:var(--card-background)}.data-\[checked\=false\]\:bg-disabled[data-checked=false]{background-color:var(--disabled)}.data-\[checked\=false\]\:bg-input-switch-bg[data-checked=false]{background-color:var(--input-switch-bg)}.data-\[checked\=true\]\:bg-input-switch[data-checked=true]{background-color:var(--input-switch)}.data-\[checked\=true\]\:bg-primary[data-checked=true]{background-color:var(--primary-DEFAULT)}.data-\[selected\=false\]\:text-input-placeholder[data-selected=false]{color:var(--input-placeholder)}.link\:text-danger:active,.link\:text-danger:hover{color:var(--danger-DEFAULT)}.group:valid:has(.input:valid:not(:-moz-placeholder-shown)) .group-assert\:block{display:block}.group:valid:has(.input:valid:not(:placeholder-shown)) .group-assert\:block{display:block}.group:valid:has(.input:valid:not(:-moz-placeholder-shown)) .group-assert\:text-success{color:var(--success-DEFAULT)}.group:valid:has(.input:valid:not(:placeholder-shown)) .group-assert\:text-success{color:var(--success-DEFAULT)}.group:valid:has(.input:valid:not(:-moz-placeholder-shown)) .group-assert\:opacity-100{opacity:1}.group:valid:has(.input:valid:not(:placeholder-shown)) .group-assert\:opacity-100{opacity:1}.group:invalid:has(.input:not(:focus):invalid[data-initialized=true]) .group-error\:block{display:block}.group:invalid:has(.input:not(:focus):invalid[data-initialized=true]) .group-error\:border-danger{border-color:var(--danger-DEFAULT)}.group:invalid:has(.input:not(:focus):invalid[data-initialized=true]) .group-error\:text-danger{color:var(--danger-DEFAULT)}.group:invalid:has(.input:not(:focus):invalid[data-initialized=true]) .group-error\:placeholder-input-mask-error::-moz-placeholder{color:var(--input-mask-error)}.group:invalid:has(.input:not(:focus):invalid[data-initialized=true]) .group-error\:placeholder-input-mask-error::placeholder{color:var(--input-mask-error)}.group:invalid:has(.input:not(:focus):invalid[data-initialized=true]) .group-error\:opacity-100{opacity:1}@media (min-width:768px){.md\:table-cell{display:table-cell}.md\:justify-end{justify-content:flex-end}}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button,.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none}