@ioca/react 1.5.17 → 1.5.18

package/lib/cjs/components/picker/dates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/dates/index.tsx"],"sourcesContent":["import { CalendarMonthTwotone } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat.js\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Popup from \"../../popup\";\nimport { IDatePicker } from \"../type\";\nimport \"./index.css\";\nimport Panel from \"./panel\";\n\ndayjs.extend(customParseFormat);\n\nconst FORMATTYPES = [\"YYYY-MM-DD\", \"YYYY-M-D\", \"YYYY/MM/DD\", \"YYYY/M/D\"];\nconst FORMAT = \"YYYY-MM-DD\";\n\nconst Datepicker = (props: IDatePicker) => {\n\tconst {\n\t\tname,\n\t\tvalue,\n\t\tweeks,\n\t\tformat = FORMAT,\n\t\tplaceholder = props.format ?? FORMAT,\n\t\tclassName,\n\t\trenderDate,\n\t\trenderMonth,\n\t\trenderYear,\n\t\tpopupProps,\n\t\tdisabledDate,\n\t\tonDateClick,\n\t\tonChange,\n\t\tonBlur,\n\t\t...restProps\n\t} = props;\n\n\tconst [inputValue, setInputValue] = useState(value);\n\n\tconst [active, setActive] = useState<boolean>(false);\n\n\tconst dayJsValue = useMemo(() => {\n\t\tif (!inputValue) return null;\n\n\t\tconst date = dayjs(inputValue as string, format, true);\n\n\t\tif (date.isValid()) return date;\n\n\t\treturn null;\n\t}, [inputValue, format]);\n\n\tconst handleDateClick = (date: Dayjs) => {\n\t\thandleChange(date.format(format));\n\t};\n\n\tconst handleChange = (v) => {\n\t\tsetInputValue(v);\n\t\tonChange?.(v);\n\t};\n\n\tconst handleSetDate = () => {\n\t\tif (!inputValue) return;\n\n\t\tconst date = dayjs(inputValue as string, FORMATTYPES, true);\n\n\t\tif (date.isValid()) {\n\t\t\thandleChange(date.format(format));\n\t\t\treturn;\n\t\t}\n\n\t\thandleChange(\"\");\n\t};\n\n\tconst handleBlur = (e) => {\n\t\tonBlur?.(e);\n\t\thandleSetDate();\n\t};\n\n\tconst handleVisibleChange = (v) => {\n\t\tpopupProps?.onVisibleChange?.(v);\n\t\tsetActive(v);\n\t};\n\n\tuseEffect(() => {\n\t\tsetInputValue(value);\n\t}, [value]);\n\n\treturn (\n\t\t<Popup\n\t\t\tvisible={active}\n\t\t\ttrigger='click'\n\t\t\tposition='bottom'\n\t\t\tarrow={false}\n\t\t\talign='start'\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\tcontent={\n\t\t\t\t<Panel\n\t\t\t\t\tvalue={dayJsValue}\n\t\t\t\t\tweeks={weeks}\n\t\t\t\t\trenderDate={renderDate}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\t\tonDateClick={handleDateClick}\n\t\t\t\t/>\n\t\t\t}\n\t\t\t{...popupProps}\n\t\t>\n\t\t\t<Input\n\t\t\t\tvalue={inputValue}\n\t\t\t\tappend={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<CalendarMonthTwotone />}\n\t\t\t\t\t\tclassName='i-datepicker-icon'\n\t\t\t\t\t\tsize='1em'\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tonEnter={handleSetDate}\n\t\t\t\tclassName={classNames(\"i-datepicker-label\", className)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n};\n\nexport default Datepicker;\n"],"names":["dayjs","customParseFormat","useState","useMemo","useEffect","_jsx","Popup","Panel","Input","Icon","CalendarMonthTwotone","classNames"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/dates/index.tsx"],"sourcesContent":["import { CalendarMonthTwotone } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat.js\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Popup from \"../../popup\";\nimport { IDatePicker } from \"../type\";\nimport \"./index.css\";\nimport Panel from \"./panel\";\n\ndayjs.extend(customParseFormat);\n\nconst FORMATTYPES = [\"YYYY-MM-DD\", \"YYYY-M-D\", \"YYYY/MM/DD\", \"YYYY/M/D\"];\nconst FORMAT = \"YYYY-MM-DD\";\n\nconst Datepicker = (props: IDatePicker) => {\n\tconst {\n\t\tname,\n\t\tvalue,\n\t\tweeks,\n\t\tformat = FORMAT,\n\t\tplaceholder = props.format ?? FORMAT,\n\t\tclassName,\n\t\trenderDate,\n\t\trenderMonth,\n\t\trenderYear,\n\t\tpopupProps,\n\t\tdisabledDate,\n\t\tonDateClick,\n\t\tonChange,\n\t\tonBlur,\n\t\tclear,\n\t\tonClear: onClearProp,\n\t\t...restProps\n\t} = props;\n\n\tconst [inputValue, setInputValue] = useState(value);\n\n\tconst [active, setActive] = useState<boolean>(false);\n\n\n\tconst dayJsValue = useMemo(() => {\n\t\tif (!inputValue) return null;\n\n\t\tconst date = dayjs(inputValue as string, format, true);\n\n\t\tif (date.isValid()) return date;\n\n\t\treturn null;\n\t}, [inputValue, format]);\n\n\tconst handleDateClick = (date: Dayjs) => {\n\t\thandleChange(date.format(format));\n\t};\n\n\tconst handleChange = (v) => {\n\t\tsetInputValue(v);\n\t\tonChange?.(v);\n\t};\n\n\tconst handleSetDate = () => {\n\t\tif (!inputValue) return;\n\n\t\tconst date = dayjs(inputValue as string, FORMATTYPES, true);\n\n\t\tif (date.isValid()) {\n\t\t\thandleChange(date.format(format));\n\t\t\treturn;\n\t\t}\n\n\t\thandleChange(\"\");\n\t};\n\n\tconst handleBlur = (e) => {\n\t\tonBlur?.(e);\n\t\thandleSetDate();\n\t};\n\n\tconst handleVisibleChange = (v) => {\n\t\tpopupProps?.onVisibleChange?.(v);\n\t\tsetActive(v);\n\t};\n\n\tconst handleClear = () => {\n\t\tsetActive(false);\n\t\tonClearProp?.();\n\t};\n\n\tuseEffect(() => {\n\t\tsetInputValue(value);\n\t}, [value]);\n\n\treturn (\n\t\t<Popup\n\t\t\tvisible={active}\n\t\t\ttrigger='click'\n\t\t\tposition='bottom'\n\t\t\tarrow={false}\n\t\t\talign='start'\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\tcontent={\n\t\t\t\t<Panel\n\t\t\t\t\tvalue={dayJsValue}\n\t\t\t\t\tweeks={weeks}\n\t\t\t\t\trenderDate={renderDate}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\t\tonDateClick={handleDateClick}\n\t\t\t\t/>\n\t\t\t}\n\t\t\t{...popupProps}\n\t\t>\n\t\t\t<Input\n\t\t\t\tvalue={inputValue}\n\t\t\t\tappend={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<CalendarMonthTwotone />}\n\t\t\t\t\t\tclassName='i-datepicker-icon'\n\t\t\t\t\t\tsize='1em'\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tclear={clear}\n\t\t\t\tonClear={handleClear}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tonEnter={handleSetDate}\n\t\t\t\tclassName={classNames(\"i-datepicker-label\", className)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n};\n\nexport default Datepicker;\n"],"names":["dayjs","customParseFormat","useState","useMemo","useEffect","_jsx","Popup","Panel","Input","Icon","CalendarMonthTwotone","classNames"],"mappings":"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"}

package/lib/cjs/components/picker/dates/panel.js

@@ -23,20 +23,20 @@ const YearMonth = (props) => {
     return (jsxRuntime.jsxs("a", { className: 'i-datepicker-action', "data-ripple": true, onClick: onClick, children: [jsxRuntime.jsx("span", { children: renderYear?.(value.year()) }), unitYear, jsxRuntime.jsx("span", { children: renderMonth?.(value.month() + 1) }), unitMonth] }));
 };
 const Panel = (props) => {
-    const { value, unitYear, unitMonth, renderDate, renderMonth = (m) => m, renderYear = (y) => y, disabledDate, onDateClick, } = props;
+    const { value, month: controlledMonth, rangeEnd, hoverDate, onDateHover, onOperateMonth: onOperateMonthProp, unitYear, unitMonth, renderDate, renderMonth = (m) => m, renderYear = (y) => y, disabledDate, onDateClick, } = props;
     const [today, setToday] = react.useState(value);
-    const [month, setMonth] = react.useState(value || dayjs__default());
+    const [month, setMonth] = react.useState(controlledMonth || value || dayjs__default());
     const [selectedYear, setSelectedYear] = react.useState(dayjs__default());
     const [years, setYears] = react.useState([]);
     const [selectable, setSelectable] = react.useState(false);
     const $years = react.useRef(null);
-    const handleOperateMonth = (next) => {
+    const handleOperateMonth = onOperateMonthProp || ((next) => {
         setMonth((m) => m[next ? "add" : "subtract"](1, "month"));
-    };
+    });
     const handleChangeDate = (date) => {
         if (date.isSame(today, "day"))
             return;
-        if (!date.isSame(month, "month")) {
+        if (controlledMonth === undefined && !date.isSame(month, "month")) {
             setMonth(date);
         }
         setToday(date);
@@ -60,20 +60,33 @@ const Panel = (props) => {
     }, [selectable, month]);
     react.useEffect(() => {
         setToday(value);
-        setMonth(value || dayjs__default());
-    }, [value]);
+        if (controlledMonth === undefined) {
+            setMonth(value || dayjs__default());
+        }
+    }, [value, controlledMonth]);
+    react.useEffect(() => {
+        const el = $years.current;
+        if (!el)
+            return;
+        const onWheel = (e) => {
+            e.preventDefault();
+            getMoreYears(e);
+        };
+        el.addEventListener("wheel", onWheel, { passive: false });
+        return () => el.removeEventListener("wheel", onWheel);
+    }, []);
     return (jsxRuntime.jsxs("div", { className: 'i-datepicker', children: [jsxRuntime.jsxs("div", { className: 'i-datepicker-units', children: [jsxRuntime.jsx(YearMonth, { value: month, unitYear: unitYear, unitMonth: unitMonth, renderMonth: renderMonth, renderYear: renderYear, onClick: () => setSelectable(true) }), jsxRuntime.jsx("a", { className: 'ml-auto i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(false), children: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.KeyboardArrowLeftRound, {}) }) }), jsxRuntime.jsx("a", { className: 'i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(true), children: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.KeyboardArrowRightRound, {}) }) })] }), jsxRuntime.jsxs("div", { className: classNames__default("i-datepicker-ym", {
                     "i-datepicker-active": selectable,
                 }), children: [jsxRuntime.jsx(helpericon.default, { active: true, className: 'i-datepicker-close', onClick: (e) => {
                             e.stopPropagation();
                             setSelectable(false);
-                        } }), jsxRuntime.jsx("div", { ref: $years, className: 'i-datepicker-years', onWheel: getMoreYears, children: years.map((y) => (jsxRuntime.jsx("a", { className: classNames__default("i-datepicker-year", {
+                        } }), jsxRuntime.jsx("div", { ref: $years, className: 'i-datepicker-years', children: years.map((y) => (jsxRuntime.jsx("a", { className: classNames__default("i-datepicker-year", {
                                 "i-datepicker-active": y === selectedYear.year(),
                             }), onClick: () => setSelectedYear((sy) => sy.year(y)), children: renderYear(y) }, y))) }), jsxRuntime.jsx("div", { className: 'i-datepicker-months', children: MONTHS.map((m) => {
                             return (jsxRuntime.jsx("a", { className: classNames__default("i-datepicker-month", {
                                     "i-datepicker-active": m === month.month() + 1,
                                 }), onClick: () => handleChangeMonth(m), children: renderMonth(m) }, m));
-                        }) })] }), jsxRuntime.jsx(dates.default, { value: today, month: month, disabledDate: disabledDate, onDateClick: handleChangeDate, renderDate: renderDate })] }));
+                        }) })] }), jsxRuntime.jsx(dates.default, { value: today, month: month, rangeEnd: rangeEnd, hoverDate: hoverDate, onDateHover: onDateHover, disabledDate: disabledDate, onDateClick: handleChangeDate, renderDate: renderDate })] }));
 };
 
 exports.default = Panel;

package/lib/cjs/components/picker/dates/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sources":["../../../../../packages/components/picker/dates/panel.tsx"],"sourcesContent":["import {\n\tKeyboardArrowLeftRound,\n\tKeyboardArrowRightRound,\n} from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport { throttle } from \"radash\";\nimport { ReactNode, useEffect, useRef, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Helpericon from \"../../utils/helpericon\";\nimport { IBaseDates } from \"../type\";\nimport Dates from \"./dates\";\n\nconst MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n\nconst YearMonth = (\n\tprops: IBaseDates & {\n\t\tonClick?: () => void;\n\t}\n) => {\n\tconst {\n\t\tvalue,\n\t\tunitMonth = \"月\",\n\t\tunitYear = \"年\",\n\t\trenderYear,\n\t\trenderMonth,\n\t\tonClick,\n\t} = props;\n\n\treturn (\n\t\t<a className='i-datepicker-action' data-ripple onClick={onClick}>\n\t\t\t<span>{renderYear?.(value.year())}</span>\n\t\t\t{unitYear}\n\t\t\t<span>{renderMonth?.(value.month() + 1)}</span>\n\t\t\t{unitMonth}\n\t\t</a>\n\t);\n};\n\nconst Panel = (props: IBaseDates) => {\n\tconst {\n\t\tvalue,\n\t\tunitYear,\n\t\tunitMonth,\n\t\trenderDate,\n\t\trenderMonth = (m: ReactNode) => m,\n\t\trenderYear = (y: ReactNode) => y,\n\t\tdisabledDate,\n\t\tonDateClick,\n\t} = props;\n\n\tconst [today, setToday] = useState(value);\n\tconst [month, setMonth] = useState(value || dayjs());\n\tconst [selectedYear, setSelectedYear] = useState(dayjs());\n\tconst [years, setYears] = useState<number[]>([]);\n\tconst [selectable, setSelectable] = useState(false);\n\n\tconst $years = useRef<HTMLDivElement>(null);\n\n\tconst handleOperateMonth = (next: boolean) => {\n\t\tsetMonth((m) => m[next ? \"add\" : \"subtract\"](1, \"month\"));\n\t};\n\n\tconst handleChangeDate = (date: Dayjs) => {\n\t\tif (date.isSame(today, \"day\")) return;\n\n\t\tif (!date.isSame(month, \"month\")) {\n\t\t\tsetMonth(date);\n\t\t}\n\n\t\tsetToday(date);\n\t\tonDateClick?.(date);\n\t};\n\n\tconst handleChangeMonth = (month: number) => {\n\t\tsetMonth((m) => m.year(selectedYear.year()).month(month - 1));\n\t\tsetSelectable(false);\n\t};\n\n\tconst getMoreYears = throttle({ interval: 100 }, (e) => {\n\t\tconst isUp = e.deltaY < 0;\n\n\t\tsetYears((ys) => ys.map((y) => y + (isUp ? -1 : 1)));\n\t});\n\n\tuseEffect(() => {\n\t\tif (!selectable) return;\n\n\t\tsetSelectedYear(month);\n\t\tconst y = month.year();\n\t\tconst nextYears = Array.from({ length: 7 }).map((_, i) => y - 3 + i);\n\n\t\tsetYears([...nextYears]);\n\t}, [selectable, month]);\n\n\tuseEffect(() => {\n\t\tsetToday(value);\n\t\tsetMonth(value || dayjs());\n\t}, [value]);\n\n\treturn (\n\t\t<div className='i-datepicker'>\n\t\t\t<div className='i-datepicker-units'>\n\t\t\t\t<YearMonth\n\t\t\t\t\tvalue={month}\n\t\t\t\t\tunitYear={unitYear}\n\t\t\t\t\tunitMonth={unitMonth}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tonClick={() => setSelectable(true)}\n\t\t\t\t/>\n\t\t\t\t<a\n\t\t\t\t\tclassName='ml-auto i-datepicker-action'\n\t\t\t\t\tdata-ripple\n\t\t\t\t\tonClick={() => handleOperateMonth(false)}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={<KeyboardArrowLeftRound />} />\n\t\t\t\t</a>\n\t\t\t\t<a\n\t\t\t\t\tclassName='i-datepicker-action'\n\t\t\t\t\tdata-ripple\n\t\t\t\t\tonClick={() => handleOperateMonth(true)}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={<KeyboardArrowRightRound />} />\n\t\t\t\t</a>\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-datepicker-ym\", {\n\t\t\t\t\t\"i-datepicker-active\": selectable,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<Helpericon\n\t\t\t\t\tactive\n\t\t\t\t\tclassName='i-datepicker-close'\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tsetSelectable(false);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={$years}\n\t\t\t\t\tclassName='i-datepicker-years'\n\t\t\t\t\tonWheel={getMoreYears}\n\t\t\t\t>\n\t\t\t\t\t{years.map((y) => (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tkey={y}\n\t\t\t\t\t\t\tclassName={classNames(\"i-datepicker-year\", {\n\t\t\t\t\t\t\t\t\"i-datepicker-active\":\n\t\t\t\t\t\t\t\t\ty === selectedYear.year(),\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tonClick={() => setSelectedYear((sy) => sy.year(y))}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{renderYear(y)}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\n\t\t\t\t<div className='i-datepicker-months'>\n\t\t\t\t\t{MONTHS.map((m) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\tkey={m}\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-datepicker-month\", {\n\t\t\t\t\t\t\t\t\t\"i-datepicker-active\":\n\t\t\t\t\t\t\t\t\t\tm === month.month() + 1,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\tonClick={() => handleChangeMonth(m)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderMonth(m)}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<Dates\n\t\t\t\tvalue={today}\n\t\t\t\tmonth={month}\n\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\tonDateClick={handleChangeDate}\n\t\t\t\trenderDate={renderDate}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Panel;\n"],"names":["_jsxs","_jsx","useState","dayjs","useRef","throttle","useEffect","Icon","KeyboardArrowLeftRound","KeyboardArrowRightRound","classNames","Helpericon","Dates"],"mappings":"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"}
+{"version":3,"file":"panel.js","sources":["../../../../../packages/components/picker/dates/panel.tsx"],"sourcesContent":["import {\n\tKeyboardArrowLeftRound,\n\tKeyboardArrowRightRound,\n} from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport { throttle } from \"radash\";\nimport { ReactNode, useEffect, useRef, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Helpericon from \"../../utils/helpericon\";\nimport { IBaseDates } from \"../type\";\nimport Dates from \"./dates\";\n\nconst MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n\nconst YearMonth = (\n\tprops: IBaseDates & {\n\t\tonClick?: () => void;\n\t}\n) => {\n\tconst {\n\t\tvalue,\n\t\tunitMonth = \"月\",\n\t\tunitYear = \"年\",\n\t\trenderYear,\n\t\trenderMonth,\n\t\tonClick,\n\t} = props;\n\n\treturn (\n\t\t<a className='i-datepicker-action' data-ripple onClick={onClick}>\n\t\t\t<span>{renderYear?.(value.year())}</span>\n\t\t\t{unitYear}\n\t\t\t<span>{renderMonth?.(value.month() + 1)}</span>\n\t\t\t{unitMonth}\n\t\t</a>\n\t);\n};\n\nconst Panel = (props: IBaseDates & {\n\tmonth?: Dayjs;\n\trangeEnd?: Dayjs | null;\n\thoverDate?: Dayjs | null;\n\tonDateHover?: (date: Dayjs | null) => void;\n\tonOperateMonth?: (next: boolean) => void;\n}) => {\n\tconst {\n\t\tvalue,\n\t\tmonth: controlledMonth,\n\t\trangeEnd,\n\t\thoverDate,\n\t\tonDateHover,\n\t\tonOperateMonth: onOperateMonthProp,\n\t\tunitYear,\n\t\tunitMonth,\n\t\trenderDate,\n\t\trenderMonth = (m: ReactNode) => m,\n\t\trenderYear = (y: ReactNode) => y,\n\t\tdisabledDate,\n\t\tonDateClick,\n\t} = props;\n\n\tconst [today, setToday] = useState(value);\n\tconst [month, setMonth] = useState(controlledMonth || value || dayjs());\n\tconst [selectedYear, setSelectedYear] = useState(dayjs());\n\tconst [years, setYears] = useState<number[]>([]);\n\tconst [selectable, setSelectable] = useState(false);\n\n\tconst $years = useRef<HTMLDivElement>(null);\n\n\tconst handleOperateMonth = onOperateMonthProp || ((next: boolean) => {\n\t\tsetMonth((m) => m[next ? \"add\" : \"subtract\"](1, \"month\"));\n\t});\n\n\tconst handleChangeDate = (date: Dayjs) => {\n\t\tif (date.isSame(today, \"day\")) return;\n\n\t\tif (controlledMonth === undefined && !date.isSame(month, \"month\")) {\n\t\t\tsetMonth(date);\n\t\t}\n\n\t\tsetToday(date);\n\t\tonDateClick?.(date);\n\t};\n\n\tconst handleChangeMonth = (month: number) => {\n\t\tsetMonth((m) => m.year(selectedYear.year()).month(month - 1));\n\t\tsetSelectable(false);\n\t};\n\n\tconst getMoreYears = throttle({ interval: 100 }, (e) => {\n\t\tconst isUp = e.deltaY < 0;\n\n\t\tsetYears((ys) => ys.map((y) => y + (isUp ? -1 : 1)));\n\t});\n\n\tuseEffect(() => {\n\t\tif (!selectable) return;\n\n\t\tsetSelectedYear(month);\n\t\tconst y = month.year();\n\t\tconst nextYears = Array.from({ length: 7 }).map((_, i) => y - 3 + i);\n\n\t\tsetYears([...nextYears]);\n\t}, [selectable, month]);\n\n\tuseEffect(() => {\n\t\tsetToday(value);\n\t\tif (controlledMonth === undefined) {\n\t\t\tsetMonth(value || dayjs());\n\t\t}\n\t}, [value, controlledMonth]);\n\n\tuseEffect(() => {\n\t\tconst el = $years.current;\n\t\tif (!el) return;\n\n\t\tconst onWheel = (e: WheelEvent) => {\n\t\t\te.preventDefault();\n\t\t\tgetMoreYears(e);\n\t\t};\n\n\t\tel.addEventListener(\"wheel\", onWheel, { passive: false });\n\n\t\treturn () => el.removeEventListener(\"wheel\", onWheel);\n\t}, []);\n\n\treturn (\n\t\t<div className='i-datepicker'>\n\t\t\t<div className='i-datepicker-units'>\n\t\t\t\t<YearMonth\n\t\t\t\t\tvalue={month}\n\t\t\t\t\tunitYear={unitYear}\n\t\t\t\t\tunitMonth={unitMonth}\n\t\t\t\t\trenderMonth={renderMonth}\n\t\t\t\t\trenderYear={renderYear}\n\t\t\t\t\tonClick={() => setSelectable(true)}\n\t\t\t\t/>\n\t\t\t\t<a\n\t\t\t\t\tclassName='ml-auto i-datepicker-action'\n\t\t\t\t\tdata-ripple\n\t\t\t\t\tonClick={() => handleOperateMonth(false)}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={<KeyboardArrowLeftRound />} />\n\t\t\t\t</a>\n\t\t\t\t<a\n\t\t\t\t\tclassName='i-datepicker-action'\n\t\t\t\t\tdata-ripple\n\t\t\t\t\tonClick={() => handleOperateMonth(true)}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={<KeyboardArrowRightRound />} />\n\t\t\t\t</a>\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-datepicker-ym\", {\n\t\t\t\t\t\"i-datepicker-active\": selectable,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<Helpericon\n\t\t\t\t\tactive\n\t\t\t\t\tclassName='i-datepicker-close'\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tsetSelectable(false);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={$years}\n\t\t\t\t\tclassName='i-datepicker-years'\n\t\t\t\t>\n\t\t\t\t\t{years.map((y) => (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tkey={y}\n\t\t\t\t\t\t\tclassName={classNames(\"i-datepicker-year\", {\n\t\t\t\t\t\t\t\t\"i-datepicker-active\":\n\t\t\t\t\t\t\t\t\ty === selectedYear.year(),\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tonClick={() => setSelectedYear((sy) => sy.year(y))}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{renderYear(y)}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\n\t\t\t\t<div className='i-datepicker-months'>\n\t\t\t\t\t{MONTHS.map((m) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\tkey={m}\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-datepicker-month\", {\n\t\t\t\t\t\t\t\t\t\"i-datepicker-active\":\n\t\t\t\t\t\t\t\t\t\tm === month.month() + 1,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\tonClick={() => handleChangeMonth(m)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderMonth(m)}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<Dates\n\t\t\t\tvalue={today}\n\t\t\t\tmonth={month}\n\t\t\t\trangeEnd={rangeEnd}\n\t\t\t\thoverDate={hoverDate}\n\t\t\t\tonDateHover={onDateHover}\n\t\t\t\tdisabledDate={disabledDate}\n\t\t\t\tonDateClick={handleChangeDate}\n\t\t\t\trenderDate={renderDate}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Panel;\n"],"names":["_jsxs","_jsx","useState","dayjs","useRef","throttle","useEffect","Icon","KeyboardArrowLeftRound","KeyboardArrowRightRound","classNames","Helpericon","Dates"],"mappings":"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"}

package/lib/cjs/components/picker/time/index.js

@@ -17,7 +17,7 @@ var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
 
 const FORMAT = "hh:mm:ss";
 function TimePicker(props) {
-    const { name, value, format = FORMAT, periods, placeholder = props.format ?? FORMAT, className, renderItem, onChange, onBlur, popupProps, ...restProps } = props;
+    const { name, value, format = FORMAT, periods, placeholder = props.format ?? FORMAT, className, renderItem, onChange, onBlur, popupProps, clear, onClear: onClearProp, ...restProps } = props;
     const [timeValue, setTimeValue] = react.useState(value);
     const [safeValue, setSafeValue] = react.useState(undefined);
     const [active, setActive] = react.useState(false);
@@ -41,10 +41,14 @@ function TimePicker(props) {
         popupProps?.onVisibleChange?.(v);
         setActive(v);
     };
+    const handleClear = () => {
+        setActive(false);
+        onClearProp?.();
+    };
     react.useEffect(() => {
         setTimeValue(value);
     }, [value]);
-    return (jsxRuntime.jsx(popup.default, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', ...popupProps, onVisibleChange: handleVisibleChange, content: jsxRuntime.jsx(panel.default, { value: timeValue, format: format, periods: periods, renderItem: renderItem, onChange: handleChange, onFallback: handleFallback }), children: jsxRuntime.jsx(input.default, { value: timeValue, placeholder: placeholder, append: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.AccessTimeRound, {}), className: 'i-timepicker-icon', size: '1em' }), onChange: handleChange, onBlur: handleBlur, className: classNames__default("i-timepicker-label", className), ...restProps }) }));
+    return (jsxRuntime.jsx(popup.default, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', ...popupProps, onVisibleChange: handleVisibleChange, content: jsxRuntime.jsx(panel.default, { value: timeValue, format: format, periods: periods, renderItem: renderItem, onChange: handleChange, onFallback: handleFallback }), children: jsxRuntime.jsx(input.default, { value: timeValue, placeholder: placeholder, append: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.AccessTimeRound, {}), className: 'i-timepicker-icon', size: '1em' }), clear: clear, onClear: handleClear, onChange: handleChange, onBlur: handleBlur, className: classNames__default("i-timepicker-label", className), ...restProps }) }));
 }
 
 exports.default = TimePicker;

package/lib/cjs/components/picker/time/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/time/index.tsx"],"sourcesContent":["import { AccessTimeRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { useEffect, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Popup from \"../../popup\";\nimport { ITimePicker } from \"../type\";\nimport Panel from \"./panel\";\n\nconst FORMAT = \"hh:mm:ss\";\n\nexport default function TimePicker(props: ITimePicker) {\n\tconst {\n\t\tname,\n\t\tvalue,\n\t\tformat = FORMAT,\n\t\tperiods,\n\t\tplaceholder = props.format ?? FORMAT,\n\t\tclassName,\n\t\trenderItem,\n\t\tonChange,\n\t\tonBlur,\n\t\tpopupProps,\n\t\t...restProps\n\t} = props;\n\tconst [timeValue, setTimeValue] = useState(value);\n\tconst [safeValue, setSafeValue] = useState(undefined);\n\tconst [active, setActive] = useState<boolean>(false);\n\n\tconst handleChange = (v) => {\n\t\tsetTimeValue(v);\n\t\tonChange?.(v);\n\t};\n\n\tconst handleFallback = (v) => {\n\t\tsetSafeValue(v);\n\t};\n\n\tconst handleValidTime = () => {\n\t\tif (!timeValue) return;\n\n\t\tsetTimeValue(safeValue);\n\t};\n\n\tconst handleBlur = (e) => {\n\t\tonBlur?.(e);\n\t\thandleValidTime();\n\t};\n\n\tconst handleVisibleChange = (v) => {\n\t\tpopupProps?.onVisibleChange?.(v);\n\t\tsetActive(v);\n\t};\n\n\tuseEffect(() => {\n\t\tsetTimeValue(value);\n\t}, [value]);\n\n\treturn (\n\t\t<Popup\n\t\t\tvisible={active}\n\t\t\ttrigger='click'\n\t\t\tposition='bottom'\n\t\t\tarrow={false}\n\t\t\talign='start'\n\t\t\t{...popupProps}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\tcontent={\n\t\t\t\t<Panel\n\t\t\t\t\tvalue={timeValue}\n\t\t\t\t\tformat={format}\n\t\t\t\t\tperiods={periods}\n\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonFallback={handleFallback}\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<Input\n\t\t\t\tvalue={timeValue}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tappend={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<AccessTimeRound />}\n\t\t\t\t\t\tclassName='i-timepicker-icon'\n\t\t\t\t\t\tsize='1em'\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tclassName={classNames(\"i-timepicker-label\", className)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n}\n"],"names":["useState","useEffect","_jsx","Popup","Panel","Input","Icon","AccessTimeRound","classNames"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,MAAM,GAAG,UAAU;AAEX,SAAU,UAAU,CAAC,KAAkB,EAAA;AACpD,IAAA,MAAM,EACL,IAAI,EACJ,KAAK,EACL,MAAM,GAAG,MAAM,EACf,OAAO,EACP,WAAW,GAAG,KAAK,CAAC,MAAM,IAAI,MAAM,EACpC,SAAS,EACT,UAAU,EACV,QAAQ,EACR,MAAM,EACN,UAAU,EACV,GAAG,SAAS,EACZ,GAAG,KAAK;IACT,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,SAAS,CAAC;IACrD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAQ,CAAU,KAAK,CAAC;AAEpD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,KAAI;QAC1B,YAAY,CAAC,CAAC,CAAC;AACf,QAAA,QAAQ,GAAG,CAAC,CAAC;AACd,IAAA,CAAC;AAED,IAAA,MAAM,cAAc,GAAG,CAAC,CAAC,KAAI;QAC5B,YAAY,CAAC,CAAC,CAAC;AAChB,IAAA,CAAC;IAED,MAAM,eAAe,GAAG,MAAK;AAC5B,QAAA,IAAI,CAAC,SAAS;YAAE;QAEhB,YAAY,CAAC,SAAS,CAAC;AACxB,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,CAAC,KAAI;AACxB,QAAA,MAAM,GAAG,CAAC,CAAC;AACX,QAAA,eAAe,EAAE;AAClB,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAI;AACjC,QAAA,UAAU,EAAE,eAAe,GAAG,CAAC,CAAC;QAChC,SAAS,CAAC,CAAC,CAAC;AACb,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;QACd,YAAY,CAAC,KAAK,CAAC;AACpB,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACCC,cAAA,CAACC,aAAK,EAAA,EACL,OAAO,EAAE,MAAM,EACf,OAAO,EAAC,OAAO,EACf,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,OAAO,EAAA,GACT,UAAU,EACd,eAAe,EAAE,mBAAmB,EACpC,OAAO,EACND,cAAA,CAACE,aAAK,IACL,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,cAAc,EAAA,CACzB,EAAA,QAAA,EAGHF,cAAA,CAACG,aAAK,EAAA,EACL,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EACLH,cAAA,CAACI,YAAI,EAAA,EACJ,IAAI,EAAEJ,cAAA,CAACK,wBAAe,EAAA,EAAA,CAAG,EACzB,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAC,KAAK,EAAA,CACT,EAEH,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAEC,mBAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAAA,GAClD,SAAS,EAAA,CACZ,EAAA,CACK;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/time/index.tsx"],"sourcesContent":["import { AccessTimeRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { useEffect, useState } from \"react\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Popup from \"../../popup\";\nimport { ITimePicker } from \"../type\";\nimport Panel from \"./panel\";\n\nconst FORMAT = \"hh:mm:ss\";\n\nexport default function TimePicker(props: ITimePicker) {\n\tconst {\n\t\tname,\n\t\tvalue,\n\t\tformat = FORMAT,\n\t\tperiods,\n\t\tplaceholder = props.format ?? FORMAT,\n\t\tclassName,\n\t\trenderItem,\n\t\tonChange,\n\t\tonBlur,\n\t\tpopupProps,\n\t\tclear,\n\t\tonClear: onClearProp,\n\t\t...restProps\n\t} = props;\n\tconst [timeValue, setTimeValue] = useState(value);\n\tconst [safeValue, setSafeValue] = useState(undefined);\n\tconst [active, setActive] = useState<boolean>(false);\n\n\n\tconst handleChange = (v) => {\n\t\tsetTimeValue(v);\n\t\tonChange?.(v);\n\t};\n\n\tconst handleFallback = (v) => {\n\t\tsetSafeValue(v);\n\t};\n\n\tconst handleValidTime = () => {\n\t\tif (!timeValue) return;\n\n\t\tsetTimeValue(safeValue);\n\t};\n\n\tconst handleBlur = (e) => {\n\t\tonBlur?.(e);\n\t\thandleValidTime();\n\t};\n\n\tconst handleVisibleChange = (v) => {\n\t\tpopupProps?.onVisibleChange?.(v);\n\t\tsetActive(v);\n\t};\n\n\tconst handleClear = () => {\n\t\tsetActive(false);\n\t\tonClearProp?.();\n\t};\n\n\tuseEffect(() => {\n\t\tsetTimeValue(value);\n\t}, [value]);\n\n\treturn (\n\t\t<Popup\n\t\t\tvisible={active}\n\t\t\ttrigger='click'\n\t\t\tposition='bottom'\n\t\t\tarrow={false}\n\t\t\talign='start'\n\t\t\t{...popupProps}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\tcontent={\n\t\t\t\t<Panel\n\t\t\t\t\tvalue={timeValue}\n\t\t\t\t\tformat={format}\n\t\t\t\t\tperiods={periods}\n\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonFallback={handleFallback}\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t<Input\n\t\t\t\tvalue={timeValue}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tappend={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<AccessTimeRound />}\n\t\t\t\t\t\tclassName='i-timepicker-icon'\n\t\t\t\t\t\tsize='1em'\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tclear={clear}\n\t\t\t\tonClear={handleClear}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tclassName={classNames(\"i-timepicker-label\", className)}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</Popup>\n\t);\n}\n"],"names":["useState","useEffect","_jsx","Popup","Panel","Input","Icon","AccessTimeRound","classNames"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,MAAM,GAAG,UAAU;AAEX,SAAU,UAAU,CAAC,KAAkB,EAAA;AACpD,IAAA,MAAM,EACL,IAAI,EACJ,KAAK,EACL,MAAM,GAAG,MAAM,EACf,OAAO,EACP,WAAW,GAAG,KAAK,CAAC,MAAM,IAAI,MAAM,EACpC,SAAS,EACT,UAAU,EACV,QAAQ,EACR,MAAM,EACN,UAAU,EACV,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,SAAS,EACZ,GAAG,KAAK;IACT,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,SAAS,CAAC;IACrD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAQ,CAAU,KAAK,CAAC;AAGpD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,KAAI;QAC1B,YAAY,CAAC,CAAC,CAAC;AACf,QAAA,QAAQ,GAAG,CAAC,CAAC;AACd,IAAA,CAAC;AAED,IAAA,MAAM,cAAc,GAAG,CAAC,CAAC,KAAI;QAC5B,YAAY,CAAC,CAAC,CAAC;AAChB,IAAA,CAAC;IAED,MAAM,eAAe,GAAG,MAAK;AAC5B,QAAA,IAAI,CAAC,SAAS;YAAE;QAEhB,YAAY,CAAC,SAAS,CAAC;AACxB,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,CAAC,KAAI;AACxB,QAAA,MAAM,GAAG,CAAC,CAAC;AACX,QAAA,eAAe,EAAE;AAClB,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAI;AACjC,QAAA,UAAU,EAAE,eAAe,GAAG,CAAC,CAAC;QAChC,SAAS,CAAC,CAAC,CAAC;AACb,IAAA,CAAC;IAED,MAAM,WAAW,GAAG,MAAK;QACxB,SAAS,CAAC,KAAK,CAAC;QAChB,WAAW,IAAI;AAChB,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;QACd,YAAY,CAAC,KAAK,CAAC;AACpB,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACCC,cAAA,CAACC,aAAK,EAAA,EACL,OAAO,EAAE,MAAM,EACf,OAAO,EAAC,OAAO,EACf,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,OAAO,EAAA,GACT,UAAU,EACd,eAAe,EAAE,mBAAmB,EACpC,OAAO,EACND,cAAA,CAACE,aAAK,EAAA,EACL,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,cAAc,EAAA,CACzB,EAAA,QAAA,EAGHF,eAACG,aAAK,EAAA,EACL,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EACLH,cAAA,CAACI,YAAI,EAAA,EACJ,IAAI,EAAEJ,cAAA,CAACK,wBAAe,EAAA,EAAA,CAAG,EACzB,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAC,KAAK,EAAA,CACT,EAEH,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAEC,mBAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAAA,GAClD,SAAS,EAAA,CACZ,EAAA,CACK;AAEV;;;;"}

package/lib/cjs/components/popconfirm/popconfirm.js

@@ -3,11 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var material = require('@ricons/material');
 var hooks = require('../../js/hooks.js');
 var button = require('../button/button.js');
 var flex = require('../flex/flex.js');
-var icon = require('../icon/icon.js');
 var popup = require('../popup/popup.js');
 
 const defaultOk = {
@@ -18,7 +16,7 @@ const defaultCancel = {
     flat: true,
 };
 const Popconfirm = (props) => {
-    const { trigger = "click", visible, icon: icon$1 = jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.InfoOutlined, {}), className: "error", size: "1.2em" }), content, okButtonProps, cancelButtonProps, children, align, position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
+    const { trigger = "click", visible, icon, content, okButtonProps, cancelButtonProps, children, align, position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
     const state = hooks.useReactive({
         loading: false,
         visible,
@@ -49,7 +47,7 @@ const Popconfirm = (props) => {
         await onClose?.();
         state.visible = false;
     };
-    const popconfirmContent = (jsxRuntime.jsxs("div", { className: "i-popconfirm", children: [jsxRuntime.jsxs(flex.default, { gap: ".5em", children: [icon$1, jsxRuntime.jsx("div", { className: "i-popconfirm-content", children: content })] }), jsxRuntime.jsxs(flex.default, { gap: 12, justify: "flex-end", className: "i-popconfirm-footer", children: [cancelButtonProps !== null && (jsxRuntime.jsx(button.default, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsxRuntime.jsx(button.default, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
+    const popconfirmContent = (jsxRuntime.jsxs("div", { className: "i-popconfirm", children: [jsxRuntime.jsxs(flex.default, { gap: ".5em", children: [icon, jsxRuntime.jsx("div", { className: "i-popconfirm-content", children: content })] }), jsxRuntime.jsxs(flex.default, { gap: 12, justify: "flex-end", className: "i-popconfirm-footer", children: [cancelButtonProps !== null && (jsxRuntime.jsx(button.default, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsxRuntime.jsx(button.default, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
     return (jsxRuntime.jsx(popup.default, { content: popconfirmContent, ...restProps, trigger: trigger, visible: state.visible, align: align, offset: offset, position: position, onVisibleChange: handleVisibleChange, children: children }));
 };
 

package/lib/cjs/components/popconfirm/popconfirm.js.map

@@ -1 +1 @@
-{"version":3,"file":"popconfirm.js","sources":["../../../../packages/components/popconfirm/popconfirm.tsx"],"sourcesContent":["import { InfoOutlined } from \"@ricons/material\";\nimport { MouseEvent } from \"react\";\nimport { useReactive } from \"../../js/hooks\";\nimport Button from \"../button\";\nimport { IButton } from \"../button/type\";\nimport Flex from \"../flex\";\nimport Icon from \"../icon\";\nimport Popup from \"../popup\";\nimport \"./index.css\";\nimport { IPopconfirm } from \"./type\";\n\nconst defaultOk = {\n    children: \"确定\",\n};\n\nconst defaultCancel = {\n    children: \"取消\",\n    flat: true,\n};\n\nconst Popconfirm = (props: IPopconfirm) => {\n    const {\n        trigger = \"click\",\n        visible,\n        icon = <Icon icon={<InfoOutlined />} className=\"error\" size=\"1.2em\" />,\n        content,\n        okButtonProps,\n        cancelButtonProps,\n        children,\n        align,\n        position = \"top\",\n        offset = 12,\n        extra,\n        onOk,\n        onClose,\n        ...restProps\n    } = props;\n\n    const state = useReactive({\n        loading: false,\n        visible,\n    });\n\n    const ok: IButton = okButtonProps\n        ? Object.assign({}, defaultOk, okButtonProps)\n        : defaultOk;\n    const cancel: IButton = cancelButtonProps\n        ? Object.assign({}, defaultCancel, cancelButtonProps)\n        : defaultCancel;\n\n    const handleVisibleChange = (v: boolean) => {\n        state.visible = v;\n        restProps.onVisibleChange?.(v);\n    };\n\n    const handleOk = async (e: MouseEvent<HTMLElement>) => {\n        state.loading = true;\n        ok.onClick?.(e);\n        try {\n            await onOk?.();\n            state.visible = false;\n        } finally {\n            state.loading = false;\n        }\n    };\n\n    const handleCancel = async (e: MouseEvent<HTMLElement>) => {\n        cancel.onClick?.(e);\n        await onClose?.();\n        state.visible = false;\n    };\n\n    const popconfirmContent = (\n        <div className=\"i-popconfirm\">\n            <Flex gap=\".5em\">\n                {icon}\n                <div className=\"i-popconfirm-content\">{content}</div>\n            </Flex>\n\n            <Flex gap={12} justify=\"flex-end\" className=\"i-popconfirm-footer\">\n                {cancelButtonProps !== null && (\n                    <Button {...cancel} onClick={handleCancel} />\n                )}\n                {extra}\n                {okButtonProps !== null && (\n                    <Button\n                        loading={state.loading}\n                        {...ok}\n                        onClick={handleOk}\n                    />\n                )}\n            </Flex>\n        </div>\n    );\n\n    return (\n        <Popup\n            content={popconfirmContent}\n            {...restProps}\n            trigger={trigger}\n            visible={state.visible}\n            align={align}\n            offset={offset}\n            position={position}\n            onVisibleChange={handleVisibleChange}\n        >\n            {children}\n        </Popup>\n    );\n};\n\nexport default Popconfirm;\n"],"names":["icon","_jsx","Icon","InfoOutlined","useReactive","_jsxs","Flex","Button","Popup"],"mappings":";;;;;;;;;;;;AAWA,MAAM,SAAS,GAAG;AACd,IAAA,QAAQ,EAAE,IAAI;CACjB;AAED,MAAM,aAAa,GAAG;AAClB,IAAA,QAAQ,EAAE,IAAI;AACd,IAAA,IAAI,EAAE,IAAI;CACb;AAED,MAAM,UAAU,GAAG,CAAC,KAAkB,KAAI;IACtC,MAAM,EACF,OAAO,GAAG,OAAO,EACjB,OAAO,QACPA,MAAI,GAAGC,cAAA,CAACC,YAAI,EAAA,EAAC,IAAI,EAAED,cAAA,CAACE,qBAAY,EAAA,EAAA,CAAG,EAAE,SAAS,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,CAAG,EACtE,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,EAAE,EACX,KAAK,EACL,IAAI,EACJ,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;IAET,MAAM,KAAK,GAAGC,iBAAW,CAAC;AACtB,QAAA,OAAO,EAAE,KAAK;QACd,OAAO;AACV,KAAA,CAAC;IAEF,MAAM,EAAE,GAAY;UACd,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,aAAa;UAC1C,SAAS;IACf,MAAM,MAAM,GAAY;UAClB,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,aAAa,EAAE,iBAAiB;UAClD,aAAa;AAEnB,IAAA,MAAM,mBAAmB,GAAG,CAAC,CAAU,KAAI;AACvC,QAAA,KAAK,CAAC,OAAO,GAAG,CAAC;AACjB,QAAA,SAAS,CAAC,eAAe,GAAG,CAAC,CAAC;AAClC,IAAA,CAAC;AAED,IAAA,MAAM,QAAQ,GAAG,OAAO,CAA0B,KAAI;AAClD,QAAA,KAAK,CAAC,OAAO,GAAG,IAAI;AACpB,QAAA,EAAE,CAAC,OAAO,GAAG,CAAC,CAAC;AACf,QAAA,IAAI;YACA,MAAM,IAAI,IAAI;AACd,YAAA,KAAK,CAAC,OAAO,GAAG,KAAK;QACzB;gBAAU;AACN,YAAA,KAAK,CAAC,OAAO,GAAG,KAAK;QACzB;AACJ,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG,OAAO,CAA0B,KAAI;AACtD,QAAA,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC;QACnB,MAAM,OAAO,IAAI;AACjB,QAAA,KAAK,CAAC,OAAO,GAAG,KAAK;AACzB,IAAA,CAAC;AAED,IAAA,MAAM,iBAAiB,IACnBC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CACzBA,eAAA,CAACC,YAAI,IAAC,GAAG,EAAC,MAAM,EAAA,QAAA,EAAA,CACXN,MAAI,EACLC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,YAAE,OAAO,EAAA,CAAO,IAClD,EAEPI,eAAA,CAACC,YAAI,EAAA,EAAC,GAAG,EAAE,EAAE,EAAE,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAA,CAC5D,iBAAiB,KAAK,IAAI,KACvBL,eAACM,cAAM,EAAA,EAAA,GAAK,MAAM,EAAE,OAAO,EAAE,YAAY,GAAI,CAChD,EACA,KAAK,EACL,aAAa,KAAK,IAAI,KACnBN,cAAA,CAACM,cAAM,EAAA,EACH,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,GAClB,EAAE,EACN,OAAO,EAAE,QAAQ,EAAA,CACnB,CACL,CAAA,EAAA,CACE,CAAA,EAAA,CACL,CACT;AAED,IAAA,QACIN,cAAA,CAACO,aAAK,EAAA,EACF,OAAO,EAAE,iBAAiB,EAAA,GACtB,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,mBAAmB,YAEnC,QAAQ,EAAA,CACL;AAEhB;;;;"}
+{"version":3,"file":"popconfirm.js","sources":["../../../../packages/components/popconfirm/popconfirm.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\nimport { useReactive } from \"../../js/hooks\";\nimport Button from \"../button\";\nimport { IButton } from \"../button/type\";\nimport Flex from \"../flex\";\nimport Popup from \"../popup\";\nimport \"./index.css\";\nimport { IPopconfirm } from \"./type\";\n\nconst defaultOk = {\n    children: \"确定\",\n};\n\nconst defaultCancel = {\n    children: \"取消\",\n    flat: true,\n};\n\nconst Popconfirm = (props: IPopconfirm) => {\n    const {\n        trigger = \"click\",\n        visible,\n        icon,\n        content,\n        okButtonProps,\n        cancelButtonProps,\n        children,\n        align,\n        position = \"top\",\n        offset = 12,\n        extra,\n        onOk,\n        onClose,\n        ...restProps\n    } = props;\n\n    const state = useReactive({\n        loading: false,\n        visible,\n    });\n\n    const ok: IButton = okButtonProps\n        ? Object.assign({}, defaultOk, okButtonProps)\n        : defaultOk;\n    const cancel: IButton = cancelButtonProps\n        ? Object.assign({}, defaultCancel, cancelButtonProps)\n        : defaultCancel;\n\n    const handleVisibleChange = (v: boolean) => {\n        state.visible = v;\n        restProps.onVisibleChange?.(v);\n    };\n\n    const handleOk = async (e: MouseEvent<HTMLElement>) => {\n        state.loading = true;\n        ok.onClick?.(e);\n        try {\n            await onOk?.();\n            state.visible = false;\n        } finally {\n            state.loading = false;\n        }\n    };\n\n    const handleCancel = async (e: MouseEvent<HTMLElement>) => {\n        cancel.onClick?.(e);\n        await onClose?.();\n        state.visible = false;\n    };\n\n    const popconfirmContent = (\n        <div className=\"i-popconfirm\">\n            <Flex gap=\".5em\">\n                {icon}\n                <div className=\"i-popconfirm-content\">{content}</div>\n            </Flex>\n\n            <Flex gap={12} justify=\"flex-end\" className=\"i-popconfirm-footer\">\n                {cancelButtonProps !== null && (\n                    <Button {...cancel} onClick={handleCancel} />\n                )}\n                {extra}\n                {okButtonProps !== null && (\n                    <Button\n                        loading={state.loading}\n                        {...ok}\n                        onClick={handleOk}\n                    />\n                )}\n            </Flex>\n        </div>\n    );\n\n    return (\n        <Popup\n            content={popconfirmContent}\n            {...restProps}\n            trigger={trigger}\n            visible={state.visible}\n            align={align}\n            offset={offset}\n            position={position}\n            onVisibleChange={handleVisibleChange}\n        >\n            {children}\n        </Popup>\n    );\n};\n\nexport default Popconfirm;\n"],"names":["useReactive","_jsxs","Flex","_jsx","Button","Popup"],"mappings":"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"}

package/lib/cjs/index.js

@@ -18,12 +18,13 @@ var image = require('./components/image/image.js');
 var input = require('./components/input/input.js');
 var list = require('./components/list/list.js');
 var loading = require('./components/loading/loading.js');
-var message = require('./components/message/message.js');
+var index$2 = require('./components/message/index.js');
 var modal = require('./components/modal/modal.js');
 var pagination = require('./components/pagination/pagination.js');
 var index = require('./components/picker/colors/index.js');
 var index$1 = require('./components/picker/dates/index.js');
-var index$2 = require('./components/picker/time/index.js');
+var index$3 = require('./components/picker/time/index.js');
+var daterange = require('./components/picker/daterange/daterange.js');
 var popconfirm = require('./components/popconfirm/popconfirm.js');
 var popup = require('./components/popup/popup.js');
 var progress = require('./components/progress/progress.js');
@@ -40,8 +41,8 @@ var text = require('./components/text/text.js');
 var tree = require('./components/tree/tree.js');
 var upload = require('./components/upload/upload.js');
 var video = require('./components/video/video.js');
-var index$3 = require('./js/usePreview/index.js');
-var index$4 = require('./js/useTheme/index.js');
+var index$4 = require('./js/usePreview/index.js');
+var index$5 = require('./js/useTheme/index.js');
 
 
 
@@ -63,12 +64,13 @@ exports.Image = image.default;
 exports.Input = input.default;
 exports.List = list.default;
 exports.Loading = loading.default;
-exports.Message = message.default;
+exports.Message = index$2.default;
 exports.Modal = modal.default;
 exports.Pagination = pagination.default;
 exports.ColorPicker = index.default;
 exports.DatePicker = index$1.default;
-exports.TimePicker = index$2.default;
+exports.TimePicker = index$3.default;
+exports.DateRange = daterange.default;
 exports.Popconfirm = popconfirm.default;
 exports.Popup = popup.default;
 exports.Progress = progress.default;
@@ -85,6 +87,6 @@ exports.Text = text.default;
 exports.Tree = tree.default;
 exports.Upload = upload.default;
 exports.Video = video.default;
-exports.usePreview = index$3.default;
-exports.useTheme = index$4.default;
+exports.usePreview = index$4.default;
+exports.useTheme = index$5.default;
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/css/colors.css

@@ -41,9 +41,9 @@
     --error: #ff4545;
     --error-0: #ffdbdb;
     --error-1: #f13636;
-    --success: #78f359;
+    --success: #a3ff8c;
     --success-0: #acf899;
-    --success-1: #64dd45;
+    --success-1: #8dfa72;
 
     --color-0: #020202;
     --color-1: #1b1b1b;

package/lib/css/index.css

@@ -1,2 +1,2 @@
-@import "@rc-component/color-picker/assets/index.css";@import "./tokens.css";@import "./reset.css";@import "./input.css";@import "./colors.css";@import "./utilities.css";.i-affix{display:flex;flex-direction:column;gap:.5em;position:fixed;transition:var(--transition);z-index:50}.i-affix:not(.i-affix-visible)>.i-affix-target{opacity:0;pointer-events:none}.i-ripple-container{border-radius:inherit;contain:strict;inset:0;overflow:hidden;pointer-events:none;position:absolute;.i-ripple{background:var(--color);border-radius:50%;opacity:.15;position:absolute;transform:translate(-50%,-50%) scale(.25);transform-origin:50%}.i-ripple-active{opacity:0;transform:translate(-50%,-50%) scale(1)}}.i-loading-container{backdrop-filter:blur(2px);border-radius:inherit;contain:paint;flex-direction:column;font-size:inherit;gap:.5em;transform:translateZ(0)}.i-loading-container,.i-loading-icon{align-items:center;display:flex;justify-content:center}.i-loading-icon{pointer-events:none;transition:var(--transition);z-index:1}.i-loading-icon:after,.i-loading-icon:before{border-radius:1em;content:"\20";flex-shrink:0;height:1em;margin:auto -.25em;transform:scale(0);width:1em}.i-loading-icon:before{animation:ioca-loading 1s linear infinite;background-color:var(--color);margin-left:auto;opacity:.6}.i-loading-icon:after{animation:ioca-loading 1s linear .15s infinite;background-color:var(--color);margin-right:auto}@keyframes ioca-loading{50%{transform:scale(1)}}.i-btn{--gap:0.25em;--background:var(--color-main);--background-hover:var(--color-main-1);--color:var(--color-main-reverse);align-items:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);cursor:pointer;display:inline-flex;flex-shrink:0;font-size:.94em;font-weight:500;gap:var(--gap);height:2.25em;justify-content:center;line-height:1;outline:none;padding:0 .6em;position:relative;transition:var(--transition);user-select:none;white-space:nowrap;.i-ripple-container{inset:-2px}}.i-btn-toggle{overflow:hidden}.i-btn-toggle-content{align-items:center;display:inline-flex;gap:var(--gap);transform:scale(.4);&.i-btn-toggle-active{transform:none;transition:var(--transition)}}.i-btn-block{width:100%}.i-btn-large{font-size:1.25em}.i-btn-extreme{font-size:2em;height:2em}.i-btn-small{font-size:.86em;height:2em;line-height:2;padding:0 .4em}.i-btn-mini{font-size:.8em;height:1.4em;line-height:1;padding:0 .2em}.i-btn-square{padding:0;width:2.25em;&.i-btn-extreme,&.i-btn-small{width:2em}}.i-btn:hover{--background:var(--background-hover);--color:var(--color-hover,var(--color-main-reverse))}.i-btn-secondary{--background-hover:var(--color-main-0);--background:var(--color-main-0);--color:var(--color-main);--color-hover:var(--color-main-1)}.i-btn-flat{--background-hover:var(--color-main-0);--background:transparent;--color:var(--color-main);--color-hover:var(--color-main-1)}.i-btn-outline{--background-hover:var(--color-main-0);--color:var(--color-main);--color-hover:var(--color-main-1);&.i-btn{--background:transparent;border-color:var(--color)}}.i-btn.i-btn-flat:hover,.i-btn.i-btn-outline:hover,.i-btn.i-btn-secondary:hover{--background:var(--background-hover)}.i-btn-content{display:contents}.i-btn-loading{cursor:default;opacity:.628}.i-btn-group-horizonal{display:flex;.i-btn{&:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}&:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}}}.i-btn-group-vertical{display:flex;flex-direction:column;.i-btn{&:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}&:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}}}.icon{vertical-align:middle}.i-badge{align-self:center;border-radius:var(--radius);display:inline-flex;flex-shrink:0;position:relative}.i-badge-content{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:inherit;box-shadow:var(--shadow);font-size:.86em;inset:0 0 auto auto;padding:.2em .5em;pointer-events:none;position:absolute;transform:translate(50%,-50%) scale(1);transition:all .16s;z-index:1;&.i-badge-dot{border-radius:1em;color:transparent;height:1em;overflow:hidden;padding:0;width:1em}&.i-badge-hidden,&:empty{transform:translate(50%,-50%) scale(0)}}.i-card{--card-padding:8px 12px;backdrop-filter:var(--blur);background:var(--background-opacity-2);border-radius:var(--radius);display:flex;flex-direction:column;overflow:auto}.i-card-bordered{border:1px solid var(--color-8)}.i-card-header{align-items:center;display:flex;gap:.25em;padding:var(--card-padding)}.i-card-content{flex:1}.i-card-footer{align-items:center;display:flex;gap:.25em;margin-top:auto;padding:var(--card-padding)}.i-input-label{align-content:flex-start;align-items:baseline;border-radius:var(--radius);display:flex;flex-wrap:wrap;gap:.5em;max-width:100%;position:relative;width:100%;&:has(.i-input-success){--color:var(--green)}&:has(.i-input-warning){--color:var(--yellow)}&:has(.i-input-error){--color:var(--error)}}.i-input-inline{flex-wrap:nowrap;.i-input-item,.i-radio-options,.i-upload-inner{flex:1 1 auto}.i-input-message{backdrop-filter:var(--blur);background:var(--background-opacity);padding:.2em .5em;position:absolute;right:12%;top:-.8em}}.i-input-label-text{border-radius:inherit;flex:0 0 var(--label-width);font-weight:500;text-align:var(--label-align);transition:all .12s}.i-input-item{--input-border-width:2px;--invert-input-border-width:calc(var(--input-border-width)*-1);align-items:baseline;border:var(--input-border-width) solid var(--background-opacity-2);border-radius:inherit;display:flex;flex:1 1 100%;max-width:100%;transition:var(--transition);.i-btn{align-self:stretch}&.i-input-focus,&:focus-within,&:hover{background-color:transparent;border-color:var(--color-8)}&.i-input-success{border-color:var(--green-0)}&.i-input-warning{border-color:var(--yellow-0)}&.i-input-error{border-color:var(--error-0)}}.i-input-borderless{background:var(--background-opacity-2);border-color:transparent}.i-input-underline{background:transparent;border-color:var(--background-opacity-2);border-radius:0;border-width:0 0 var(--input-border-width) 0}.i-input{background:transparent;border-radius:inherit;color:inherit;flex:1;outline:none;padding:var(--padding);text-align:inherit;transition:var(--transition);width:100%;&[type=number]::-webkit-inner-spin-button,&[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}&[readonly]{caret-color:transparent}&[type=password]{font-family:math}&:disabled{background:var(--background-opacity-1);cursor:not-allowed}}.i-input-message{--color:var(--color-5);align-self:center;border-radius:var(--radius);color:var(--color);flex:1 1 auto;font-size:.8em;pointer-events:none;z-index:1}.i-input-success{--color:var(--green)}.i-input-warning{--color:var(--yellow)}.i-input-error{--color:var(--error)}.i-textarea{display:block;max-width:100%;min-height:2.14em;transition:var(--transition),width 0s,height 0s}.i-input-append,.i-input-prepend{align-self:stretch;display:flex;margin:var(--invert-input-border-width);place-items:center;.i-btn{border-radius:inherit;height:unset}}.i-input-prepend{border-bottom-left-radius:inherit;border-top-left-radius:inherit;margin-right:0}.i-input-append{border-bottom-right-radius:inherit;border-top-right-radius:inherit;margin-left:0}.i-options-block{&>.i-checkbox-item,&>.i-radio-item{flex:1 1 100%}}.i-input-number{padding:var(--padding);padding-inline:0;text-align:center}.i-checkbox{gap:1em}.i-checkbox-item{align-items:baseline;align-self:flex-start;border-radius:var(--radius);display:inline-flex;gap:.25em;&:hover{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--color-5)}.i-checkbox-switch{box-shadow:inset 0 0 0 2px var(--color-8)}.i-checkbox-partof{box-shadow:none}}.i-checkbox-input{&:checked{box-shadow:none}}}.i-checkbox-options{align-self:baseline;display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.625em;position:relative}.i-checkbox-text{border-radius:inherit;color:var(--color-3);display:inline-flex;transition:var(--transition);user-select:none;&:empty{display:none}}.i-checkbox-input{align-self:center;appearance:none;border-radius:inherit;cursor:inherit;display:flex;height:1.125em;outline:0;overflow:hidden;position:relative;transition:var(--transition);width:1.125em}.i-checkbox-custom{height:0;width:0}.i-checkbox-switch{background:var(--color-9);border-radius:2.4em;box-shadow:inset 0 0 0 2px var(--color-9);height:1.125em;overflow:unset;width:2.2em;&:hover{&:after{background-color:var(--color-main-0);box-shadow:0 0 0 2px var(--color-7)}}}.i-checkbox-default{border-radius:2px;box-shadow:inset 0 0 0 2px var(--color-7)}.i-checkbox-button{display:none}.i-checkbox-default:after,.i-checkbox-partof:after,.i-checkbox-switch:after,.i-checkbox-switch:before{content:"\20";position:absolute;transition:var(--transition)}.i-checkbox-default:after{border-bottom:2px solid var(--color-main-reverse);border-radius:1px;border-right:2px solid var(--color-main-reverse);height:50%;left:34%;top:16%;transform:rotate(90deg) scale(0);width:20%}.i-checkbox-switch{&:after{background-color:var(--background);border-radius:1em;box-shadow:0 0 0 2px var(--color-8);height:1em;left:0;top:50%;transform:translateY(-50%);transition:var(--transition);width:1em}&:active{&:after{width:1.5em}&:checked:after{left:-.5em}}}.i-checkbox-input:checked{&.i-checkbox-default{background-color:var(--color-main);&:after{transform:rotate(45deg)}}&.i-checkbox-switch{background-color:var(--color-main);&:after{background-color:var(--background);box-shadow:0 0 0 2px var(--color-main);transform:translate(1.2em,-50%)}}&+.i-checkbox-text{color:var(--color-main)}}.i-checkbox-button{&+.i-checkbox-text{align-items:center;border:1.5px solid var(--color-9);border-radius:2em;display:flex;font-size:.9em;line-height:1.8;padding:0 1em;white-space:nowrap}&:hover+.i-checkbox-text{background-color:var(--color-9);border-color:var(--color-8)}&:checked+.i-checkbox-text{background-color:var(--color-main-0);border-color:var(--color-main);color:var(--color-main)}}.i-checkbox-partof{background-color:var(--color-main);border-radius:2px;&:after{background-color:var(--color-main-reverse);border-radius:var(--radius);height:2px;left:50%;top:50%;transform:translate(-50%,-50%);width:.5em}}.i-checkbox-message{align-self:flex-start;font-size:.8em;margin-top:.5em;pointer-events:none}.i-checkbox-success{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--success-0);&:checked{background-color:var(--success-0)}}.i-checkbox-message{color:var(--success)}}.i-checkbox-warning{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--warning-0);&:checked{background-color:var(--warning-0)}}.i-checkbox-message{color:var(--warning)}}.i-checkbox-error{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--error-0);&:checked{background-color:var(--error-0)}}.i-checkbox-message{color:var(--error)}}.i-helpericon{align-items:center;align-self:center;border-radius:var(--radius);color:var(--color-7);display:flex;font-size:.8em;justify-content:center;margin:.25em;min-height:1.675em;min-width:1.675em;padding:.125em;position:relative;transition:var(--transition);&:hover{background:var(--background-opacity-1);color:var(--color-3)}}.i-collapse{border-radius:var(--radius)}.i-collapse-bordered{border:1px solid var(--color-8);.i-collapse-item+.i-collapse-item{border-top:1px solid var(--color-8)}}.i-collapse-header,.i-collapse-item{border-radius:var(--radius)}.i-collapse-header{align-items:center;display:flex;font-weight:500;justify-content:space-between;padding:.5em;transition:var(--transition);&:hover{background-color:var(--background-opacity-2)}}.i-collapse-toggle{display:flex;margin:0;user-select:none}.i-collapse-content{border-radius:var(--radius);height:0;overflow:hidden;padding:0 .5em;transition:var(--transition)}.i-collapse-active>.i-collapse-header,.i-collapse-header:hover{opacity:1}.i-collapse-active>.i-collapse-content{height:unset;padding:.5em}.i-collapse-disabled{opacity:.4;pointer-events:none;>.i-collapse-content{height:0;overflow:hidden;padding:0 .5em}}.i-empty{color:var(--color-7);height:3em;margin:auto;width:3em}.i-datagrid-container{border-radius:var(--radius);overflow:auto;&:has(.i-datagrid-loading){overflow:hidden!important;position:relative}}.i-datagrid-loading{overflow:hidden!important;user-select:none;.i-datagrid{max-height:100%;max-width:100%}.i-loading-container{backdrop-filter:blur(2px);background:var(--background-opacity);inset:0;position:absolute;z-index:10}}.i-datagrid{contain:content;content-visibility:auto;display:grid;grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);min-width:100%;width:fit-content;.i-empty{grid-column:1/-1;margin:1em auto}}.i-datagrid-bordered{--datagrid-border-color:var(--color-9);outline:1px solid var(--datagrid-border-color);.i-datagrid-virtual-header{padding-bottom:1px}.i-datagrid-cell{outline:1px solid var(--datagrid-border-color)}}.i-datagrid-striped{.i-datagrid-row{--datagrid-border-color:var(--color-8);&:nth-child(odd){--datagrid-cell-background:var(--background-1)}}}.i-datagrid .i-datagrid-row{--datagrid-cell-background:var(--background);display:contents;&:hover{--datagrid-cell-background:var(--background);.i-datagrid-cell{z-index:1}[class*=" i-datagrid-cell-fixed"]{z-index:3}}}.i-datagrid-cell{align-items:center;background:var(--datagrid-cell-background);display:flex;gap:4px;justify-content:var(--datagrid-justify);overflow:hidden;padding:var(--cell-padding);position:sticky;transition:background-color .12s}[class*=" i-datagrid-cell-fixed"]{z-index:2}.i-datagrid-cell-fixed-right{box-shadow:-2px 0 4px var(--color-9)}.i-datagrid-cell-fixed-left{box-shadow:2px 0 4px var(--color-9)}.i-datagrid-cell-content{display:inherit;flex:1 1 auto;gap:inherit;justify-content:inherit;min-width:0;overflow:hidden;white-space:nowrap}.i-datagrid-cell-content-ellipsis{display:block;text-align:var(--datagrid-justify);text-overflow:ellipsis}.i-datagrid-header{.i-datagrid-cell{--datagrid-cell-background:var(--background);line-height:1;text-overflow:ellipsis;user-select:none;white-space:nowrap;z-index:3}[class*=" i-datagrid-cell-fixed"]{z-index:4}}.i-datagrid-resizor{cursor:ew-resize;inset:0 0 0 auto;position:absolute;transition:.12s;width:4px;&:hover{background-color:var(--color-5)}}.i-datagrid-has-sorter{cursor:pointer;&:hover{--datagrid-cell-background:var(--color-9)}}.i-datagrid-sorter{color:var(--color-7);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;width:.8em}.i-datagrid-sorter-caret{&:first-child{margin-bottom:-.4em;transform:rotate(-90deg)}&:last-child{transform:rotate(90deg)}}.i-datagrid-sorter-asc{.i-datagrid-sorter-caret:first-child{color:var(--color-main)}}.i-datagrid-sorter-desc{.i-datagrid-sorter-caret:last-child{color:var(--color-main)}}.i-datagrid-virtual-header{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;&::-webkit-scrollbar{display:none}}.i-description{display:grid}.i-description-item{display:flex;gap:.5em}.i-description-item-vertical{flex-direction:column}.i-description-label{color:var(--color-5);flex-shrink:0;width:var(--description-label-width)}.i-description-value{flex:1}.i-backdrop-drawer{backdrop-filter:var(--blur);background:var(--color-backdrop);contain:paint;display:flex;inset:0;opacity:0;pointer-events:none;position:fixed;transition:var(--transition);z-index:100;&.i-active{opacity:1;pointer-events:unset}}.i-drawer{backdrop-filter:var(--blur);background:var(--background);box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:100%;max-width:100%;overflow:auto;position:absolute;transition:var(--transition)}.i-drawer-left{inset:0 auto 0 0;transform:translate3d(-100%,0,0)}.i-drawer-top{inset:0 0 auto;transform:translate3d(0,-100%,0)}.i-drawer-right{inset:0 0 0 auto;transform:translate3d(100%,0,0)}.i-drawer-bottom{inset:auto 0 0;transform:translate3d(0,100%,0)}.i-active>.i-drawer{opacity:1;pointer-events:unset;transform:none}.i-drawer-footer,.i-drawer-header{align-items:center;display:flex;padding:12px;&:empty{display:none}}.i-drawer-content{flex:1;overflow-x:hidden}.i-drawer-close{align-self:flex-start;border-radius:var(--radius);display:flex;margin:0 0 0 auto}.i-list{--gap:0.5em;overflow:auto}.i-list-item{border-radius:var(--radius);display:flex;gap:var(--gap);padding:var(--padding);transition:var(--transition)}.i-list-item-bordered{box-shadow:inset 0 0 0 1px var(--color-8);&+.i-list-item-bordered{margin-top:-1px}&:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}&:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}&:hover{box-shadow:inset 0 0 0 1px var(--color-7);z-index:1}}.i-list-option{cursor:pointer;justify-content:space-between;position:relative;user-select:none;white-space:nowrap;&:hover{background-color:var(--background-opacity-2)}&.i-list-item-active{background-color:var(--color-main-0)}}.i-list-item-label{align-self:flex-start}.i-popup{background:var(--background);border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;transform:translateY(2px);will-change:left,top,opacity,transform;z-index:100}.i-popup,.i-popup-arrow{position:absolute;transition:all .12s}.i-popup-arrow{color:unset;height:24px;pointer-events:none;width:8px;path{fill:var(--background)}}.i-dropdown-content{border-radius:inherit;gap:2px;max-height:40vh;overflow-x:hidden;padding:8px}.i-dropdown-content,.i-editor{display:flex;flex-direction:column}.i-editor{position:relative;&:focus-within,&:hover{>.i-editor-content,>.i-editor-controls{border-color:var(--color-8)}}}.i-editor-borderless{border-radius:var(--radius);&>.i-editor-content,&>.i-editor-controls{border:none}}.i-editor-controls{border:2px solid var(--color-9);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;display:flex;gap:2px;padding:2px;transition:var(--transition);.i-btn{--color:var(--color-5);&:hover{--color:var(--color);.i-editor-control-tip{opacity:1}}}}.i-editor-control-tip{backdrop-filter:var(--blur);border-radius:4px;left:50%;line-height:1;opacity:0;padding:4px;pointer-events:none;position:absolute;top:100%;transform:translate(-50%);transition:var(--transition);z-index:1}.i-editor-content{word-wrap:break-word;border:2px solid var(--color-9);border-radius:0 0 var(--radius) var(--radius);flex:1;outline:none;overflow:auto;padding:var(--padding);tab-size:1em;transition:var(--transition);white-space:pre-wrap;word-break:break-all;&:first-child{border-radius:var(--radius)}&:focus,&:hover{border-color:var(--color-8)}a{color:var(--blue)}img{margin:0}&:empty:before{color:var(--color-5);content:attr(data-placeholder);pointer-events:none}}.i-editor-memtion{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);margin:4px 0 0;max-width:240px;min-width:120px;overflow:auto;padding:4px;z-index:1000;.i-list-item{color:var(--color-5)}.i-list-item-active{color:var(--color-main)}}.i-memtion-tag{align-items:center;display:inline-flex;max-width:100%;user-select:none;vertical-align:baseline}.i-form{display:grid;max-width:100%}.i-form-inline{--label-inline:nowrap;.i-input-label{flex-wrap:nowrap}}.i-modal-container{display:flex;inset:0;opacity:0;overflow:hidden;padding:12px;pointer-events:none;position:fixed;transition:var(--transition);z-index:100;&.i-modal-active{opacity:1}}.i-modal-backdrop{backdrop-filter:blur(4px);background:var(--color-backdrop);contain:paint;&.i-modal-active{pointer-events:unset}}.i-modal-customized{overflow:unset}.i-modal{background:var(--background);border-radius:var(--radius);display:flex;flex-direction:column;line-height:normal;margin:auto;max-height:100%;max-width:100%;overflow-x:hidden;position:relative;transform:translateY(12px);transition:var(--transition);&.bounced{animation:bounce .4s ease-in-out 0s}}.i-modal-active>.i-modal{opacity:1;pointer-events:all;transform:none}.i-modal-footer,.i-modal-header{align-items:center;display:flex;gap:12px;padding:12px;position:relative;&:empty{display:none}}.i-modal-header>b{display:contents}.i-modal-footer{justify-content:center}.i-modal-content{flex:1;line-height:1.5;max-height:100%;overflow-x:hidden}.i-modal{.i-modal-close{align-self:flex-start;border-radius:var(--radius);display:flex;margin:0 0 0 auto}}.i-text-gradient{-webkit-text-fill-color:transparent}.i-text-gradient-wave{animation:text-wave 1.2s linear 0s infinite;background-position:0 0;background-size:200% 100%}@keyframes text-wave{to{background-position:-100% 0}}.i-progress{background:var(--background-1);border-radius:var(--radius);cursor:pointer;display:flex;flex:1 1 100%;position:relative}.i-progress-vertical{height:100%;&>.i-progress-bar{align-self:flex-end;height:100%}}.i-progress-bar{background:var(--color-main);border-radius:var(--radius);position:relative;transform-origin:left;transition:var(--transition);width:100%}.i-progress-cursor{border-radius:inherit;box-shadow:var(--shadow);display:flex;min-height:120%;min-width:1em;overflow:hidden;position:absolute;right:0;top:50%;transform:translate(50%,-50%) scale(0);transition:var(--transition);user-select:none}.i-progress:hover .i-progress-cursor,.no-transition>.i-progress-cursor{transform:translate(50%,-50%) scale(1)}.i-progress-circle{position:relative}.i-progress-circle-path{border-radius:50px;transition:var(--transition)}.i-progress-circle-value{align-items:flex-end;display:flex;font-size:1.5em;gap:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.i-video{background:#000;border-radius:var(--radius);overflow:hidden;position:relative;video{height:100%;width:100%}}.i-video-controls{align-items:center;backdrop-filter:var(--blur);background:var(--background-opacity);bottom:-1px;display:flex;font-size:.9em;gap:4px;left:0;padding:4px;position:absolute;right:0;transition:var(--transition);user-select:none;white-space:nowrap;.i-btn{flex-shrink:0}.i-icon{font-size:1.2em}&:hover{opacity:1;pointer-events:unset}}.i-video-controls-hidden{opacity:0;pointer-events:none}.i-video-control,.i-video-times{align-items:center;display:flex}.i-video-times{gap:4px;margin-inline:8px}.i-video-volume{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);bottom:100%;left:50%;opacity:0;padding:8px;pointer-events:none;position:absolute;transform:translate(-50%,4px);transition:var(--transition);z-index:1}.i-video-control-volume{position:relative;&:hover{& .i-video-volume{opacity:1;pointer-events:unset}}}.i-preview{padding:0;.i-modal{background:transparent;height:100%;overflow:unset;pointer-events:none!important;position:static;transform:none;width:100%}.i-preview-container{height:100%;position:relative;width:100%}.i-preview-content{align-items:center;display:flex;height:100%;justify-content:center;pointer-events:none;transition:var(--transition);width:100%;will-change:transform;*{pointer-events:all}}.i-preview-controls{align-items:center;background:var(--background-opacity);border-radius:var(--radius);display:flex;font-size:.9em;gap:1px;padding:4px;pointer-events:all;position:fixed;right:.5em;top:.5em;transition:all .24s ease-out;z-index:10;&:hover{opacity:1}}.i-preview-controls-hidden{opacity:0}.i-preview-unknown{align-items:center;background:var(--background);border-radius:var(--radius);display:flex;flex-direction:column;padding:.5em 1em}}.i-image{align-items:center;align-self:center;backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);display:inline-flex;flex-shrink:0;justify-content:center;overflow:hidden;position:relative;vertical-align:middle;.i-loading-container{backdrop-filter:var(--blur);z-index:1}&>img{border-radius:inherit;height:100%;object-fit:cover;width:100%}}.i-image-cover{align-items:center;backdrop-filter:var(--blur);background:var(--background-opacity);inset:0;position:absolute}.i-image-cover,.i-messages{display:flex;justify-content:center}.i-messages{cursor:default;flex-direction:column;inset:12px;pointer-events:none;position:fixed;z-index:10000}.i-message,.i-messages{transition:var(--transition)}.i-message{backdrop-filter:var(--blur);background:var(--background-opacity-2);border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;padding:.625em 1em;pointer-events:all;position:absolute;transform:translate(80px) scale(.86) skew(-40deg);&.i-message-active{opacity:1;transform:translate(0)}}.i-pagination{align-items:center;display:flex;gap:.2em}.i-page{--background:transparent;--color:var(--color-7);align-items:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);cursor:pointer;display:inline-flex;height:2.25em;justify-content:center;min-width:2.25em;outline:none;padding:0 .32em;position:relative;transition:var(--transition);user-select:none;white-space:nowrap;.i-ripple-container{inset:-2px}.i-loading-container{backdrop-filter:var(--blur);background:var(--background-opacity);contain:paint;inset:0;position:absolute;z-index:1}&:hover{--background:var(--background-opacity-2)}&.i-page-active{--background:var(--color-main);--color:var(--color-main-reverse);cursor:default}&.i-page-loading{--background:unset;cursor:default}}.i-select{display:flex;gap:.25em}.i-select-multiple{flex-wrap:wrap;padding:.225em .628em;.i-tag{background:var(--background-opacity-1);line-height:1.425em;padding:0 .5em;position:relative}}.i-select-options{--gap:0.25em;border-radius:inherit;display:flex;flex-direction:column;gap:2px;max-height:40vh;overflow-x:hidden;padding:4px;.i-list-item{align-items:center;color:var(--color-5);justify-content:unset;&.i-list-item-active{background:var(--color-main-0);color:var(--color-main);.i-select-option-check{opacity:1}}&.disabled{pointer-events:none}}}.i-select-options-multiple{.i-list-item{&.i-list-item-active{background:transparent}}}.i-select-option-check{opacity:0}.i-select-filter{backdrop-filter:var(--blur);background:var(--background-opacity);border-bottom:1px solid var(--background-opacity-1);display:flex;flex-wrap:wrap;position:sticky;top:0;z-index:1;&:empty{display:none}}.i-tag{--background:var(--color-9);--color:var(--color-1);align-items:center;align-self:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);display:inline-flex;font-size:.81em;gap:.5em;justify-content:center;line-height:1;padding:.25em .5em;position:relative;transition:var(--transition);.i-tag-close{background:var(--error);color:var(--white);font-size:.81em;margin:0;position:absolute;right:0;top:0;transform:translate(50%,-50%);transition:all .16s;z-index:1;&:hover{background:var(--error-1);color:var(--white)}}&:hover{.i-tag-hover-close{opacity:1;transform:translate(50%,-50%) scale(1)}}}.i-tag-large{font-size:1em}.i-tag-extreme{font-size:1.5em;height:2em}.i-tag-small{font-size:.72em;padding:.125em .4em}.i-tag-dot{background-color:var(--color);border-radius:50%;box-shadow:0 -1px 1px 0 rgba(var(--color),.3);content:"\20";flex-shrink:0;height:.385em;transition:inherit;width:.385em}.i-tag-outline{--background:transparent;border-color:var(--color)}.i-tag-hover-close{opacity:0;transform:translate(50%,-50%) scale(0)}.i-tag-clickable{cursor:pointer;&:hover{background:var(--background-hover);color:var(--color-hover,var(--color))}}.i-colorpicker{display:inline-flex;width:fit-content}.i-colorpicker-handle{align-items:center;align-self:center;display:inline-flex;font-size:.8em;gap:.25em;position:relative}.i-colorpicker-square{border:2px solid var(--color-9);border-radius:var(--radius);cursor:pointer;display:inline-block;height:1.8em;transition:var(--transition);width:1.8em;&:hover{border-color:var(--color-8)}}.i-colorpicker-footer{display:flex;font-size:.8em;gap:4px}.i-colorpicker-text{background:var(--color-9);border-radius:var(--radius);cursor:pointer;padding:.25em .5em;transition:var(--transition);&:hover{background:var(--color-8)}}.rc-color-picker-panel{background:inherit;box-shadow:none}.i-datepicker-label{position:unset}.i-datepicker{padding:8px;.i-datepicker-item{cursor:pointer}}.i-datepicker-dates,.i-datepicker-weeks{display:grid;gap:2px;grid-template-columns:repeat(7,1fr)}.i-datepicker-item,.i-datepicker-week{display:flex;justify-content:center;padding:.32em .5em}.i-datepicker-week{color:var(--color-5)}.i-datepicker-item{--background:transparent;background:var(--background);border-radius:var(--radius);color:var(--color);opacity:.4;transition:all .12s;&:hover{--background:var(--color-main-0);opacity:1}&.i-datepicker-same-month{opacity:.8}&.i-datepicker-today{--background:var(--color-main-0)}&.i-datepicker-active{--background:var(--color-main);--color:var(--color-main-reverse);opacity:1}&.i-datepicker-disabled{cursor:not-allowed;opacity:.2}}.i-datepicker-units{align-items:center;color:var(--color-6);display:flex;font-size:.9em;gap:.125em;margin-bottom:.5em}.i-datepicker-action{align-items:baseline;border-radius:var(--radius);display:flex;gap:.25em;padding:.125em .5em;position:relative;user-select:none;>span{color:var(--color);font-size:1.15em}&:hover{background:var(--color-main-0)}}.i-datepicker-icon{margin-right:.4em;opacity:.5;pointer-events:none}.i-datepicker-ym{backdrop-filter:var(--blur);background:var(--background);display:flex;gap:.5em;inset:0;opacity:0;padding:8px;pointer-events:none;position:absolute;transition:var(--transition);z-index:1;&.i-datepicker-active{opacity:1;pointer-events:unset}}.i-datepicker-years{display:flex;flex-direction:column;gap:.25em;max-height:100%;overflow-x:hidden;width:5em}.i-datepicker-months{display:grid;flex:1;gap:.25em;grid-template-columns:repeat(3,1fr);margin-top:1.5em}.i-datepicker-year{flex:1}.i-datepicker-month,.i-datepicker-year{align-items:center;border-radius:var(--radius);display:flex;justify-content:center;padding:2px;user-select:none;&:hover{background-color:var(--background-opacity-2)}&.i-datepicker-active{background:var(--color-main);color:var(--color-main-reverse);opacity:1}}.i-datepicker-close{position:absolute;right:0;top:0}.i-timepicker-label{position:unset}.i-timepicker{display:flex}.i-timepicker-list{display:flex;flex-direction:column;gap:2px;max-height:12.2em;min-width:3em;overflow:auto;padding:4px;scrollbar-width:none;text-align:center;&::-webkit-scrollbar{display:none}&:not(:last-child){border-right:1px solid var(--color-9)}}.i-timepicker-item{border-radius:var(--radius);display:block;opacity:.5;padding:.32em .5em;&:hover{background-color:var(--color-9);opacity:1}&.i-timepicker-item-active{background:var(--color-main);bottom:0;color:var(--color-main-reverse);opacity:1;position:sticky;top:0;z-index:1}}.i-timepicker-icon{margin-right:.4em;opacity:.5;pointer-events:none}.i-popconfirm{padding:1rem}.i-popconfirm-footer{margin-top:1rem}.i-radio{display:inline-flex;flex-wrap:wrap;gap:1em;position:relative}.i-radio-label{font-weight:500;text-align:var(--label-align);width:var(--label-width)}.i-radio-item{align-items:baseline;border-radius:var(--radius);display:inline-flex;&:hover{.i-radio-input{background-color:var(--color-main-0);box-shadow:inset 0 0 0 3px var(--color-7)}}}.i-radio-item-custom{>.i-radio-input{height:0;width:0}}.i-input-success .i-radio-input{box-shadow:inset 0 0 0 3px var(--green-0)}.i-input-warning .i-radio-input{box-shadow:inset 0 0 0 3px var(--yellow-0)}.i-input-error .i-radio-input{box-shadow:inset 0 0 0 3px var(--error-0)}.i-radio-options{align-self:baseline;display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.625em;position:relative}.i-radio-options-button{flex:none}.i-radio-text{border-radius:inherit;color:var(--color-3);display:inline-flex;margin-left:.4em;transition:var(--transition);user-select:none}.i-radio-input{align-self:center;appearance:none;border-radius:50%;box-shadow:inset 0 0 0 3px var(--color-8);cursor:inherit;display:flex;flex-shrink:0;height:1.125em;outline:0;overflow:hidden;position:relative;transition:all .15s;width:1.125em}.i-radio-default{border:0 solid transparent}.i-radio-input:checked{&.i-radio-default{background:var(--color-main-reverse);border-color:var(--color-main);border-width:.4em;box-shadow:none;&+.i-radio-text{color:var(--color-main)}}}.i-radio-default:active{transform:scale(1.1)}.i-radio-button{display:none;&+.i-radio-text{border:1.5px solid var(--color-9);font-size:.94em;line-height:1.8;margin-left:0;padding:0 .628em;white-space:nowrap;&:hover{background-color:var(--color-main-0);border-color:var(--color-8)}}&:checked+.i-radio-text{background:var(--color-main-0);border-color:var(--color-main);color:var(--color-main)}}.i-radio-message{align-self:flex-start;font-size:.8em;margin-top:.5em;pointer-events:none}.i-radio-success{.i-radio-input{box-shadow:inset 0 0 0 3px var(--success-0)}.i-radio-message{color:var(--success)}}.i-radio-warning{.i-radio-input{box-shadow:inset 0 0 0 3px var(--warning-0)}.i-radio-message{color:var(--warning)}}.i-radio-error{.i-radio-input{box-shadow:inset 0 0 0 3px var(--error-0)}.i-radio-message{color:var(--error)}}.i-resizable{display:flex;overflow:hidden}.i-resizable-vertical{flex-direction:column;&>.i-resizable-line{cursor:ns-resize;height:2px;width:100%}}.i-resizable-a{overflow:auto}.i-resizable-b{flex:1;overflow:auto}.i-resizable-line{align-items:center;background:var(--color-9);cursor:ew-resize;display:flex;height:100%;justify-content:center;outline:1px solid transparent;position:relative;touch-action:none;transition:var(--transition);user-select:none;width:2px;&.i-resizable-resizing,&:hover{outline-color:var(--color-8);&>.i-resizable-line-node{opacity:1}}}.i-resizable-line-node{background:inherit;border-radius:var(--radius);display:flex;font-size:.8em;opacity:0;pointer-events:none;position:relative;transition:var(--transition);z-index:1}.i-river{overflow:hidden}.i-river-track{display:inline-flex;will-change:transform}.i-river-item{flex-shrink:0}.i-scroll{-webkit-overflow-scrolling:touch;overflow:hidden;user-select:none}.i-step{display:flex;flex-wrap:wrap;gap:.5em;overflow:hidden}.i-step-vertical{flex-direction:column;.i-step-item{flex-direction:row;&:not(:last-child){.i-step-item-right{padding-bottom:1em}}}}.i-step-item{display:flex;flex:1 1 auto;flex-direction:column;gap:.5em;transition:var(--transition);&:last-child{flex:none;.i-step-divider{display:none}}&.i-step-item-finished{opacity:.4;.i-step-divider{border-style:solid}}&.i-step-item-pending{opacity:.4}&:hover{opacity:1}}.i-step-item-index{align-items:center;background:var(--color-4);border-radius:1.5em;color:var(--background);display:flex;flex-shrink:0;justify-content:center;line-height:1.5em;width:1.5em}.i-step-divider{align-self:center;border:1px dashed var(--color-7);flex:1}.i-step-item-title{white-space:nowrap}.i-step-item-left,.i-step-item-title{align-items:center;display:flex;gap:.5em}.i-step-item-left,.i-step-item-right{flex-direction:column}.i-step-item-right{display:flex;gap:.5em}.i-swiper{max-width:100%;position:relative;user-select:none;&:hover{.i-swiper-arrow{opacity:.72}}.i-swiper-arrow:hover{opacity:1}}.i-swiper-track{overflow:hidden;position:relative;touch-action:pan-x}.i-swiper-list{display:flex;will-change:transform}.i-swiper-fade{>.i-swiper-item{opacity:0}>.i-swiper-active{opacity:1}}.i-swiper-vertical{.i-swiper-track{height:100%;touch-action:pan-y}.i-swiper-list{flex-direction:column}.i-swiper-item{width:100%}.i-swiper-arrow{left:unset;right:.5em}.i-swiper-prev{bottom:50%;top:unset;transform:translateY(-6px)}.i-swiper-next{transform:translateY(6px)}}.i-swiper-item{display:flex;flex:1;flex-shrink:0;overflow:hidden}.i-swiper-arrow,.i-swiper-item{align-items:center;justify-content:center;transition:var(--transition)}.i-swiper-arrow{border-radius:var(--radius);display:inline-flex;opacity:0;position:absolute;top:50%;transform:translateY(-50%)}.i-swiper-prev{left:.5em}.i-swiper-next{right:.5em}.i-swiper-indicators{display:flex;gap:.5em;justify-content:center;margin:.5em 0}.i-swiper-indicators-fixed{bottom:0;left:50%;position:absolute;transform:translate(-50%)}.i-swiper-indicator{background:var(--color);border-radius:50%;flex-shrink:0;height:8px;opacity:.25;width:8px;&:hover{opacity:.8}&.i-indicator-active{opacity:1}}.i-tabs{gap:.5em;max-width:100%}.i-tabs-line{.i-tab-navs{gap:1em}.i-tab-nav{padding:.4em 0;&.i-tab-active{--color:var(--color-main)}}.i-tab-navs-bar{background:var(--color-main)}.i-tab-navs-vertical>.i-tab-navs{gap:.5em;>.i-tab-nav{padding:.25em 1em}}}.i-tab-navs-container{align-items:center;border-radius:var(--radius);display:flex;gap:4px;scroll-behavior:smooth}.i-tab-navs-vertical{align-items:flex-end;flex-direction:column}.i-tab-navs{display:flex;flex:1;flex-direction:inherit;gap:1px;overflow:auto;position:relative;scroll-behavior:unset;scrollbar-width:none;user-select:none}.i-tab-navs::-webkit-scrollbar{display:none}.i-tabs-pane{.i-tab-navs-container{position:relative;&:before{border-top:1px solid var(--color-8);bottom:0;content:"";left:0;position:absolute;right:0;width:100%;z-index:1}}.i-tab-navs{gap:4px;.i-tab-nav{border:1px solid transparent;border-radius:var(--radius) var(--radius) 0 0;&:hover{border-color:var(--color-8);border-bottom-color:var(--background)}}.i-tab-active{background:transparent;border-color:var(--color-8);border-bottom:1px solid var(--background);box-shadow:1px 2px 0 1px var(--color-8);z-index:2;&:hover{background-color:transparent}}}.i-tab-navs-vertical{&:before{border-right:1px solid var(--color-8);border-top:none;height:100%;left:unset;top:0;width:unset}.i-tab-navs{.i-tab-nav{border:1px solid transparent;border-radius:var(--radius) 0 0 var(--radius);&:hover{border-color:var(--color-8);border-right-color:var(--background)}}.i-tab-active{border-color:var(--color-7);border-right:1px solid var(--background);&:hover{background-color:transparent}}}}}.i-tab-nav{--color:var(--color-7);align-items:center;border-radius:var(--radius);color:var(--color);display:flex;flex-shrink:0;gap:.25em;justify-content:center;padding:.4em .5em;position:relative;user-select:none;z-index:1;&:hover{--color:var(--color-3)}&.i-tab-active{--color:var(--color-main)}}.i-tabs-morelist{.i-tab-nav{white-space:nowrap}.i-tab-active{background:var(--color-main-0)}}.i-tab-closable{.i-tab-nav{border-radius:var(--radius) var(--radius) 0 0;padding-right:0;&.i-tab-active{background-color:var(--background);box-shadow:2px 0 8px #0000000d}}}.i-tab-nav:hover{.i-tab-nav-close{opacity:1}}.i-tab-navs-bar{background:var(--background-opacity-2);border-radius:4px;bottom:0;height:0;left:0;pointer-events:none;position:absolute;transition:var(--transition)}.i-tab-navs-vertical{>.i-tab-navs{gap:1px;>.i-tab-navs-bar{bottom:unset;left:unset;right:0;top:0;width:0}}}.i-tab-contents{flex:1;position:relative}.i-tab-content{display:none;&.i-tab-active{display:block}}.i-tabs{.i-tab-nav-close{background:var(--background);font-size:.7em;margin:0;opacity:0;padding:0;position:absolute;right:4px;&:hover{background:var(--background);color:var(--error)}}}.i-tree{--tree-gap:2px;color:var(--color-2);display:flex;flex-direction:column;gap:var(--tree-gap)}.i-tree-group-title{display:flex;font-size:1em;font-size:.9em;font-style:italic;font-weight:300;position:relative;&:after{align-self:center;background:var(--color-8);content:"\20";flex:1;height:1px;margin-left:.5em}}.i-tree-item-header{align-items:center;border-radius:var(--radius);color:var(--color-6);display:flex;gap:.25em;overflow:hidden;padding:.4em;position:relative;user-select:none;&.i-tree-item-round{border-radius:100px}&.i-tree-item-selected,&:hover{background:var(--color-main-0);color:var(--color-main)}}.i-tree-round{--radius:100px}.i-tree-item-icon{display:flex}.i-tree-checkbox{align-self:center}.i-tree-toggle{border-radius:inherit;color:var(--color-6);margin-left:auto;transition:var(--transition);&:hover{background:var(--background-opacity);color:var(--color-3)}}.i-tree-item-content{display:flex;flex-direction:column;gap:var(--tree-gap);max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(0,1,0,1)}.i-tree-expand{>.i-tree-item-content{margin-top:var(--tree-gap);max-height:2000px;transition:max-height .25s cubic-bezier(1,0,1,0)}>.i-tree-item-header{color:var(--color-main);opacity:1;>.i-tree-toggle{transform:rotateX(180deg)}}}.i-input-label-file{display:flex;width:unset;&:has(.i-upload-list:empty){align-items:center}}.i-input-file-hidden{display:none}.i-upload-inner{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.5em}.i-upload-card{&:has(.i-upload-list:not(:empty)){align-self:flex-start}.i-upload-list{display:contents}}.i-upload-list{display:flex;flex-wrap:wrap;gap:inherit;user-select:none;width:100%;&:empty{display:none}}.i-upload-delete{box-shadow:var(--shadow);margin:0;opacity:0;right:-.825em;top:-.825em;z-index:1}.i-upload-btn{align-self:center}.i-upload-card-btn{background:var(--background-opacity);border-style:dashed;font-size:1em;height:var(--upload-card-size);opacity:.6;width:var(--upload-card-size);&:hover{opacity:1}}.i-upload-item{align-items:center;background:var(--background-opacity);border:2px solid var(--background-opacity-1);border-radius:var(--radius);display:inline-flex;font-size:.8em;gap:.25em;padding:.25em .4em;position:relative;transition:var(--transition);.i-upload-delete{background-color:var(--error);color:#fff;position:absolute;&:hover{background-color:var(--error);color:#fff}}&:hover{background-color:var(--background-opacity-1);.i-upload-delete{opacity:1}}}.i-upload-item-card{align-items:center;background:var(--background-opacity);border-radius:var(--radius);cursor:pointer;display:flex;gap:.25em;height:var(--upload-card-size);justify-content:center;position:relative;.i-image,video{height:100%;object-fit:cover;width:100%}.i-upload-file-name{font-size:.8em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-upload-delete{background-color:var(--error);color:#fff;font-size:.72em;position:absolute;&:hover{background-color:var(--error);color:#fff}}&:hover{.i-upload-delete,.i-upload-tip{opacity:1}}}.i-upload-size{color:var(--color-6);font-size:.8em}.i-upload-item-dragged{z-index:1000}.i-upload-tip{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);font-size:.86em;left:50%;opacity:0;pointer-events:none;position:absolute;top:100%;transform:translate(-50%,.5em);transition:opacity .12s;white-space:pre;z-index:1}.i-upload-dropbox{align-items:center;border:2px dashed var(--color-5);border-radius:var(--radius);color:var(--color-5);cursor:pointer;display:flex;gap:.5em;justify-content:center;padding:1em;transition:var(--transition);width:100%;&:hover{border-color:var(--color-main);color:var(--color-main)}}.i-upload-dropbox-active{background:var(--background-opacity-1);border-color:var(--color-main);color:var(--color-main)}
+@import "@rc-component/color-picker/assets/index.css";@import "./tokens.css";@import "./reset.css";@import "./input.css";@import "./colors.css";@import "./utilities.css";.i-affix{display:flex;flex-direction:column;gap:.5em;position:fixed;transition:var(--transition);z-index:50}.i-affix:not(.i-affix-visible)>.i-affix-target{opacity:0;pointer-events:none}.i-ripple-container{border-radius:inherit;contain:strict;inset:0;overflow:hidden;pointer-events:none;position:absolute;.i-ripple{background:var(--color);border-radius:50%;opacity:.15;position:absolute;transform:translate(-50%,-50%) scale(.25);transform-origin:50%}.i-ripple-active{opacity:0;transform:translate(-50%,-50%) scale(1)}}.i-loading-container{backdrop-filter:blur(2px);border-radius:inherit;contain:paint;flex-direction:column;font-size:inherit;gap:.5em;transform:translateZ(0)}.i-loading-container,.i-loading-icon{align-items:center;display:flex;justify-content:center}.i-loading-icon{pointer-events:none;transition:var(--transition);z-index:1}.i-loading-icon:after,.i-loading-icon:before{border-radius:1em;content:"\20";flex-shrink:0;height:1em;margin:auto -.25em;transform:scale(0);width:1em}.i-loading-icon:before{animation:ioca-loading 1s linear infinite;background-color:var(--color);margin-left:auto;opacity:.6}.i-loading-icon:after{animation:ioca-loading 1s linear .15s infinite;background-color:var(--color);margin-right:auto}@keyframes ioca-loading{50%{transform:scale(1)}}.i-btn{--gap:0.25em;--background:var(--color-main);--background-hover:var(--color-main-1);--color:var(--color-main-reverse);align-items:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);cursor:pointer;display:inline-flex;flex-shrink:0;font-size:.94em;font-weight:500;gap:var(--gap);height:2.25em;justify-content:center;line-height:1;outline:none;padding:0 .6em;position:relative;transition:var(--transition);user-select:none;white-space:nowrap;.i-ripple-container{inset:-2px}}.i-btn-toggle{overflow:hidden}.i-btn-toggle-content{align-items:center;display:inline-flex;gap:var(--gap);transform:scale(.4);&.i-btn-toggle-active{transform:none;transition:var(--transition)}}.i-btn-block{width:100%}.i-btn-large{font-size:1.25em}.i-btn-extreme{font-size:2em;height:2em}.i-btn-small{font-size:.86em;height:2em;line-height:2;padding:0 .4em}.i-btn-mini{font-size:.8em;height:1.4em;line-height:1;padding:0 .2em}.i-btn-square{padding:0;width:2.25em;&.i-btn-extreme,&.i-btn-small{width:2em}}.i-btn:hover{--background:var(--background-hover);--color:var(--color-hover,var(--color-main-reverse))}.i-btn-secondary{--background-hover:var(--color-main-0);--background:var(--color-main-0);--color:var(--color-main);--color-hover:var(--color-main-1)}.i-btn-flat{--background-hover:var(--color-main-0);--background:transparent;--color:var(--color-main);--color-hover:var(--color-main-1)}.i-btn-outline{--background-hover:var(--color-main-0);--color:var(--color-main);--color-hover:var(--color-main-1);&.i-btn{--background:transparent;border-color:var(--color)}}.i-btn.i-btn-flat:hover,.i-btn.i-btn-outline:hover,.i-btn.i-btn-secondary:hover{--background:var(--background-hover)}.i-btn-content{display:contents}.i-btn-loading{cursor:default;opacity:.628}.i-btn-group-horizonal{display:flex;.i-btn{&:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}&:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}}}.i-btn-group-vertical{display:flex;flex-direction:column;.i-btn{&:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}&:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}}}.icon{vertical-align:middle}.i-badge{align-self:center;border-radius:var(--radius);display:inline-flex;flex-shrink:0;position:relative}.i-badge-content{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:inherit;box-shadow:var(--shadow);font-size:.86em;inset:0 0 auto auto;padding:.2em .5em;pointer-events:none;position:absolute;transform:translate(50%,-50%) scale(1);transition:all .16s;z-index:1;&.i-badge-dot{border-radius:1em;color:transparent;height:1em;overflow:hidden;padding:0;width:1em}&.i-badge-hidden,&:empty{transform:translate(50%,-50%) scale(0)}}.i-card{--card-padding:8px 12px;backdrop-filter:var(--blur);background:var(--background-opacity-2);border-radius:var(--radius);display:flex;flex-direction:column;overflow:auto}.i-card-bordered{border:1px solid var(--color-8)}.i-card-header{align-items:center;display:flex;gap:.25em;padding:var(--card-padding)}.i-card-content{flex:1}.i-card-footer{align-items:center;display:flex;gap:.25em;margin-top:auto;padding:var(--card-padding)}.i-input-label{align-content:flex-start;align-items:baseline;border-radius:var(--radius);display:flex;flex-wrap:wrap;gap:.5em;max-width:100%;position:relative;width:100%;&:has(.i-input-success){--color:var(--green)}&:has(.i-input-warning){--color:var(--yellow)}&:has(.i-input-error){--color:var(--error)}}.i-input-inline{flex-wrap:nowrap;.i-input-item,.i-radio-options,.i-upload-inner{flex:1 1 auto}.i-input-message{backdrop-filter:var(--blur);background:var(--background-opacity);padding:.2em .5em;position:absolute;right:12%;top:-.8em}}.i-input-label-text{border-radius:inherit;flex:0 0 var(--label-width);font-weight:500;text-align:var(--label-align);transition:all .12s}.i-input-item{--input-border-width:2px;--invert-input-border-width:calc(var(--input-border-width)*-1);align-items:baseline;border:var(--input-border-width) solid var(--background-opacity-2);border-radius:inherit;display:flex;flex:1 1 100%;max-width:100%;transition:var(--transition);.i-btn{align-self:stretch}&.i-input-focus,&:focus-within,&:hover{background-color:transparent;border-color:var(--color-8)}&.i-input-success{border-color:var(--green-0)}&.i-input-warning{border-color:var(--yellow-0)}&.i-input-error{border-color:var(--error-0)}}.i-input-borderless{background:var(--background-opacity-2);border-color:transparent}.i-input-underline{background:transparent;border-color:var(--background-opacity-2);border-radius:0;border-width:0 0 var(--input-border-width) 0}.i-input{background:transparent;border-radius:inherit;color:inherit;flex:1;outline:none;padding:var(--padding);text-align:inherit;transition:var(--transition);width:100%;&[type=number]::-webkit-inner-spin-button,&[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}&[readonly]{caret-color:transparent}&[type=password]{font-family:math}&:disabled{background:var(--background-opacity-1);cursor:not-allowed}}.i-input-message{--color:var(--color-5);align-self:center;border-radius:var(--radius);color:var(--color);flex:1 1 auto;font-size:.8em;pointer-events:none;z-index:1}.i-input-success{--color:var(--green)}.i-input-warning{--color:var(--yellow)}.i-input-error{--color:var(--error)}.i-textarea{display:block;max-width:100%;min-height:2.14em;transition:var(--transition),width 0s,height 0s}.i-input-append,.i-input-prepend{align-self:stretch;display:flex;margin:var(--invert-input-border-width);place-items:center;.i-btn{border-radius:inherit;height:unset}}.i-input-prepend{border-bottom-left-radius:inherit;border-top-left-radius:inherit;margin-right:0}.i-input-append{border-bottom-right-radius:inherit;border-top-right-radius:inherit;margin-left:0}.i-helpericon.i-helpericon-clear,.i-input-clearable:hover .i-input-append{display:none}.i-input-item:hover .i-helpericon-clear{display:flex}.i-options-block{&>.i-checkbox-item,&>.i-radio-item{flex:1 1 100%}}.i-input-number{padding:var(--padding);padding-inline:0;text-align:center}.i-checkbox{gap:1em}.i-checkbox-item{align-items:baseline;align-self:flex-start;border-radius:var(--radius);display:inline-flex;gap:.25em;&:hover{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--color-5)}.i-checkbox-switch{box-shadow:inset 0 0 0 2px var(--color-8)}.i-checkbox-partof{box-shadow:none}}.i-checkbox-input{&:checked{box-shadow:none}}}.i-checkbox-options{align-self:baseline;display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.625em;position:relative}.i-checkbox-text{border-radius:inherit;color:var(--color-3);display:inline-flex;transition:var(--transition);user-select:none;&:empty{display:none}}.i-checkbox-input{align-self:center;appearance:none;border-radius:inherit;cursor:inherit;display:flex;height:1.125em;outline:0;overflow:hidden;position:relative;transition:var(--transition);width:1.125em}.i-checkbox-custom{height:0;width:0}.i-checkbox-switch{background:var(--color-9);border-radius:2.4em;box-shadow:inset 0 0 0 2px var(--color-9);height:1.125em;overflow:unset;width:2.2em;&:hover{&:after{background-color:var(--color-main-0);box-shadow:0 0 0 2px var(--color-7)}}}.i-checkbox-default{border-radius:2px;box-shadow:inset 0 0 0 2px var(--color-7)}.i-checkbox-button{display:none}.i-checkbox-default:after,.i-checkbox-partof:after,.i-checkbox-switch:after,.i-checkbox-switch:before{content:"\20";position:absolute;transition:var(--transition)}.i-checkbox-default:after{border-bottom:2px solid var(--color-main-reverse);border-radius:1px;border-right:2px solid var(--color-main-reverse);height:50%;left:34%;top:16%;transform:rotate(90deg) scale(0);width:20%}.i-checkbox-switch{&:after{background-color:var(--background);border-radius:1em;box-shadow:0 0 0 2px var(--color-8);height:1em;left:0;top:50%;transform:translateY(-50%);transition:var(--transition);width:1em}&:active{&:after{width:1.5em}&:checked:after{left:-.5em}}}.i-checkbox-input:checked{&.i-checkbox-default{background-color:var(--color-main);&:after{transform:rotate(45deg)}}&.i-checkbox-switch{background-color:var(--color-main);&:after{background-color:var(--background);box-shadow:0 0 0 2px var(--color-main);transform:translate(1.2em,-50%)}}&+.i-checkbox-text{color:var(--color-main)}}.i-checkbox-button{&+.i-checkbox-text{align-items:center;border:1.5px solid var(--color-9);border-radius:2em;display:flex;font-size:.9em;line-height:1.8;padding:0 1em;white-space:nowrap}&:hover+.i-checkbox-text{background-color:var(--color-9);border-color:var(--color-8)}&:checked+.i-checkbox-text{background-color:var(--color-main-0);border-color:var(--color-main);color:var(--color-main)}}.i-checkbox-partof{background-color:var(--color-main);border-radius:2px;&:after{background-color:var(--color-main-reverse);border-radius:var(--radius);height:2px;left:50%;top:50%;transform:translate(-50%,-50%);width:.5em}}.i-checkbox-message{align-self:flex-start;font-size:.8em;margin-top:.5em;pointer-events:none}.i-checkbox-success{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--success-0);&:checked{background-color:var(--success-0)}}.i-checkbox-message{color:var(--success)}}.i-checkbox-warning{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--warning-0);&:checked{background-color:var(--warning-0)}}.i-checkbox-message{color:var(--warning)}}.i-checkbox-error{.i-checkbox-input{box-shadow:inset 0 0 0 2px var(--error-0);&:checked{background-color:var(--error-0)}}.i-checkbox-message{color:var(--error)}}.i-helpericon{align-items:center;align-self:center;border-radius:var(--radius);color:var(--color-7);display:flex;font-size:.8em;justify-content:center;margin:.25em;min-height:1.675em;min-width:1.675em;padding:.125em;position:relative;transition:var(--transition);&:hover{background:var(--background-opacity-1);color:var(--color-3)}}.i-collapse{border-radius:var(--radius)}.i-collapse-bordered{border:1px solid var(--color-8);.i-collapse-item+.i-collapse-item{border-top:1px solid var(--color-8)}}.i-collapse-header,.i-collapse-item{border-radius:var(--radius)}.i-collapse-header{align-items:center;display:flex;font-weight:500;justify-content:space-between;padding:.5em;transition:var(--transition);&:hover{background-color:var(--background-opacity-2)}}.i-collapse-toggle{display:flex;margin:0;user-select:none}.i-collapse-content{border-radius:var(--radius);height:0;overflow:hidden;padding:0 .5em;transition:var(--transition)}.i-collapse-active>.i-collapse-header,.i-collapse-header:hover{opacity:1}.i-collapse-active>.i-collapse-content{height:unset;padding:.5em}.i-collapse-disabled{opacity:.4;pointer-events:none;>.i-collapse-content{height:0;overflow:hidden;padding:0 .5em}}.i-empty{color:var(--color-7);height:3em;margin:auto;width:3em}.i-datagrid-container{border-radius:var(--radius);overflow:auto;&:has(.i-datagrid-loading){overflow:hidden!important;position:relative}}.i-datagrid-loading{overflow:hidden!important;user-select:none;.i-datagrid{max-height:100%;max-width:100%}.i-loading-container{backdrop-filter:blur(2px);background:var(--background-opacity);inset:0;position:absolute;z-index:10}}.i-datagrid{contain:content;content-visibility:auto;display:grid;grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);min-width:100%;width:fit-content;.i-empty{grid-column:1/-1;margin:1em auto}}.i-datagrid-bordered{--datagrid-border-color:var(--color-9);outline:1px solid var(--datagrid-border-color);.i-datagrid-virtual-header{padding-bottom:1px}.i-datagrid-cell{outline:1px solid var(--datagrid-border-color)}}.i-datagrid-striped{.i-datagrid-row{--datagrid-border-color:var(--color-8);&:nth-child(odd){--datagrid-cell-background:var(--background-1)}}}.i-datagrid .i-datagrid-row{--datagrid-cell-background:var(--background);display:contents;&:hover{--datagrid-cell-background:var(--background);.i-datagrid-cell{z-index:1}[class*=" i-datagrid-cell-fixed"]{z-index:3}}}.i-datagrid-cell{align-items:center;background:var(--datagrid-cell-background);display:flex;gap:4px;justify-content:var(--datagrid-justify);overflow:hidden;padding:var(--cell-padding);position:sticky;transition:background-color .12s}[class*=" i-datagrid-cell-fixed"]{z-index:2}.i-datagrid-cell-fixed-right{box-shadow:-2px 0 4px var(--color-9)}.i-datagrid-cell-fixed-left{box-shadow:2px 0 4px var(--color-9)}.i-datagrid-cell-content{display:inherit;flex:1 1 auto;gap:inherit;justify-content:inherit;min-width:0;overflow:hidden;white-space:nowrap}.i-datagrid-cell-content-ellipsis{display:block;text-align:var(--datagrid-justify);text-overflow:ellipsis}.i-datagrid-header{.i-datagrid-cell{--datagrid-cell-background:var(--background);line-height:1;text-overflow:ellipsis;user-select:none;white-space:nowrap;z-index:3}[class*=" i-datagrid-cell-fixed"]{z-index:4}}.i-datagrid-resizor{cursor:ew-resize;inset:0 0 0 auto;position:absolute;transition:.12s;width:4px;&:hover{background-color:var(--color-5)}}.i-datagrid-has-sorter{cursor:pointer;&:hover{--datagrid-cell-background:var(--color-9)}}.i-datagrid-sorter{color:var(--color-7);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;width:.8em}.i-datagrid-sorter-caret{&:first-child{margin-bottom:-.4em;transform:rotate(-90deg)}&:last-child{transform:rotate(90deg)}}.i-datagrid-sorter-asc{.i-datagrid-sorter-caret:first-child{color:var(--color-main)}}.i-datagrid-sorter-desc{.i-datagrid-sorter-caret:last-child{color:var(--color-main)}}.i-datagrid-virtual-header{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;&::-webkit-scrollbar{display:none}}.i-description{display:grid}.i-description-item{display:flex;gap:.5em}.i-description-item-vertical{flex-direction:column}.i-description-label{color:var(--color-5);flex-shrink:0;width:var(--description-label-width)}.i-description-value{flex:1}.i-backdrop-drawer{backdrop-filter:var(--blur);background:var(--color-backdrop);contain:paint;display:flex;inset:0;opacity:0;pointer-events:none;position:fixed;transition:var(--transition);z-index:100;&.i-active{opacity:1;pointer-events:unset}}.i-drawer{backdrop-filter:var(--blur);background:var(--background);box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:100%;max-width:100%;overflow:auto;position:absolute;transition:var(--transition)}.i-drawer-left{inset:0 auto 0 0;transform:translate3d(-100%,0,0)}.i-drawer-top{inset:0 0 auto;transform:translate3d(0,-100%,0)}.i-drawer-right{inset:0 0 0 auto;transform:translate3d(100%,0,0)}.i-drawer-bottom{inset:auto 0 0;transform:translate3d(0,100%,0)}.i-active>.i-drawer{opacity:1;pointer-events:unset;transform:none}.i-drawer-footer,.i-drawer-header{align-items:center;display:flex;padding:12px;&:empty{display:none}}.i-drawer-content{flex:1;overflow-x:hidden}.i-drawer-close{align-self:flex-start;border-radius:var(--radius);display:flex;margin:0 0 0 auto}.i-list{--gap:0.5em;overflow:auto}.i-list-item{border-radius:var(--radius);display:flex;gap:var(--gap);padding:var(--padding);transition:var(--transition)}.i-list-item-bordered{box-shadow:inset 0 0 0 1px var(--color-8);&+.i-list-item-bordered{margin-top:-1px}&:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}&:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}&:hover{box-shadow:inset 0 0 0 1px var(--color-7);z-index:1}}.i-list-option{cursor:pointer;justify-content:space-between;position:relative;user-select:none;white-space:nowrap;&:hover{background-color:var(--background-opacity-2)}&.i-list-item-active{background-color:var(--color-main-0)}}.i-list-item-label{align-self:flex-start}.i-popup{background:var(--background);border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;transform:translateY(2px);will-change:left,top,opacity,transform;z-index:100}.i-popup,.i-popup-arrow{position:absolute;transition:all .12s}.i-popup-arrow{color:unset;height:24px;pointer-events:none;width:8px;path{fill:var(--background)}}.i-dropdown-content{border-radius:inherit;gap:2px;max-height:40vh;overflow-x:hidden;padding:8px}.i-dropdown-content,.i-editor{display:flex;flex-direction:column}.i-editor{position:relative;&:focus-within,&:hover{>.i-editor-content,>.i-editor-controls{border-color:var(--color-8)}}}.i-editor-borderless{border-radius:var(--radius);&>.i-editor-content,&>.i-editor-controls{border:none}}.i-editor-controls{border:2px solid var(--color-9);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;display:flex;gap:2px;padding:2px;transition:var(--transition);.i-btn{--color:var(--color-5);&:hover{--color:var(--color);.i-editor-control-tip{opacity:1}}}}.i-editor-control-tip{backdrop-filter:var(--blur);border-radius:4px;left:50%;line-height:1;opacity:0;padding:4px;pointer-events:none;position:absolute;top:100%;transform:translate(-50%);transition:var(--transition);z-index:1}.i-editor-content{word-wrap:break-word;border:2px solid var(--color-9);border-radius:0 0 var(--radius) var(--radius);flex:1;outline:none;overflow:auto;padding:var(--padding);tab-size:1em;transition:var(--transition);white-space:pre-wrap;word-break:break-all;&:first-child{border-radius:var(--radius)}&:focus,&:hover{border-color:var(--color-8)}a{color:var(--blue)}img{margin:0}&:empty:before{color:var(--color-5);content:attr(data-placeholder);pointer-events:none}}.i-editor-memtion{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);margin:4px 0 0;max-width:240px;min-width:120px;overflow:auto;padding:4px;z-index:1000;.i-list-item{color:var(--color-5)}.i-list-item-active{color:var(--color-main)}}.i-memtion-tag{align-items:center;display:inline-flex;max-width:100%;user-select:none;vertical-align:baseline}.i-form{display:grid;max-width:100%}.i-form-inline{--label-inline:nowrap;.i-input-label{flex-wrap:nowrap}}.i-modal-container{display:flex;inset:0;opacity:0;overflow:hidden;padding:12px;pointer-events:none;position:fixed;transition:var(--transition);z-index:100;&.i-modal-active{opacity:1}}.i-modal-backdrop{backdrop-filter:blur(4px);background:var(--color-backdrop);contain:paint;&.i-modal-active{pointer-events:unset}}.i-modal-customized{overflow:unset}.i-modal{background:var(--background);border-radius:var(--radius);display:flex;flex-direction:column;line-height:normal;margin:auto;max-height:100%;max-width:100%;overflow-x:hidden;position:relative;transform:translateY(12px);transition:var(--transition);&.bounced{animation:bounce .4s ease-in-out 0s}}.i-modal-active>.i-modal{opacity:1;pointer-events:all;transform:none}.i-modal-footer,.i-modal-header{align-items:center;display:flex;gap:12px;padding:12px;position:relative;&:empty{display:none}}.i-modal-header>b{display:contents}.i-modal-footer{justify-content:center}.i-modal-content{flex:1;line-height:1.5;max-height:100%;overflow-x:hidden}.i-modal{.i-modal-close{align-self:flex-start;border-radius:var(--radius);display:flex;margin:0 0 0 auto}}.i-text-gradient{-webkit-text-fill-color:transparent}.i-text-gradient-wave{animation:text-wave 1.2s linear 0s infinite;background-position:0 0;background-size:200% 100%}@keyframes text-wave{to{background-position:-100% 0}}.i-progress{background:var(--background-1);border-radius:var(--radius);cursor:pointer;display:flex;flex:1 1 100%;position:relative}.i-progress-vertical{height:100%;&>.i-progress-bar{align-self:flex-end;height:100%}}.i-progress-bar{background:var(--color-main);border-radius:var(--radius);position:relative;transform-origin:left;transition:var(--transition);width:100%}.i-progress-cursor{border-radius:inherit;box-shadow:var(--shadow);display:flex;min-height:120%;min-width:1em;overflow:hidden;position:absolute;right:0;top:50%;transform:translate(50%,-50%) scale(0);transition:var(--transition);user-select:none}.i-progress:hover .i-progress-cursor,.no-transition>.i-progress-cursor{transform:translate(50%,-50%) scale(1)}.i-progress-circle{position:relative}.i-progress-circle-path{border-radius:50px;transition:var(--transition)}.i-progress-circle-value{align-items:flex-end;display:flex;font-size:1.5em;gap:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.i-video{background:#000;border-radius:var(--radius);overflow:hidden;position:relative;video{height:100%;width:100%}}.i-video-controls{align-items:center;backdrop-filter:var(--blur);background:var(--background-opacity);bottom:-1px;display:flex;font-size:.9em;gap:4px;left:0;padding:4px;position:absolute;right:0;transition:var(--transition);user-select:none;white-space:nowrap;.i-btn{flex-shrink:0}.i-icon{font-size:1.2em}&:hover{opacity:1;pointer-events:unset}}.i-video-controls-hidden{opacity:0;pointer-events:none}.i-video-control,.i-video-times{align-items:center;display:flex}.i-video-times{gap:4px;margin-inline:8px}.i-video-volume{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);bottom:100%;left:50%;opacity:0;padding:8px;pointer-events:none;position:absolute;transform:translate(-50%,4px);transition:var(--transition);z-index:1}.i-video-control-volume{position:relative;&:hover{& .i-video-volume{opacity:1;pointer-events:unset}}}.i-preview{padding:0;.i-modal{background:transparent;height:100%;overflow:unset;pointer-events:none!important;position:static;transform:none;width:100%}.i-preview-container{height:100%;position:relative;width:100%}.i-preview-content{align-items:center;display:flex;height:100%;justify-content:center;pointer-events:none;transition:var(--transition);width:100%;will-change:transform;*{pointer-events:all}}.i-preview-controls{align-items:center;background:var(--background-opacity);border-radius:var(--radius);display:flex;font-size:.9em;gap:1px;padding:4px;pointer-events:all;position:fixed;right:.5em;top:.5em;transition:all .24s ease-out;z-index:10;&:hover{opacity:1}}.i-preview-controls-hidden{opacity:0}.i-preview-unknown{align-items:center;background:var(--background);border-radius:var(--radius);display:flex;flex-direction:column;padding:.5em 1em}}.i-image{align-items:center;align-self:center;backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);display:inline-flex;flex-shrink:0;justify-content:center;overflow:hidden;position:relative;vertical-align:middle;.i-loading-container{backdrop-filter:var(--blur);z-index:1}&>img{border-radius:inherit;height:100%;object-fit:cover;width:100%}}.i-image-cover{align-items:center;backdrop-filter:var(--blur);background:var(--background-opacity);display:flex;inset:0;justify-content:center;position:absolute}.i-messages{cursor:default;display:flex;flex-direction:column;inset:0;pointer-events:none;position:fixed;z-index:10000}.i-message,.i-messages{transition:var(--transition)}.i-message{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;padding:.625em 1em;pointer-events:all;position:absolute;transform:translate(80px) scale(.86) skew(-40deg);&.i-message-active{opacity:1;transform:translate(0)}}.i-pagination{align-items:center;display:flex;gap:.2em}.i-page{--background:transparent;--color:var(--color-7);align-items:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);cursor:pointer;display:inline-flex;height:2.25em;justify-content:center;min-width:2.25em;outline:none;padding:0 .32em;position:relative;transition:var(--transition);user-select:none;white-space:nowrap;.i-ripple-container{inset:-2px}.i-loading-container{backdrop-filter:var(--blur);background:var(--background-opacity);contain:paint;inset:0;position:absolute;z-index:1}&:hover{--background:var(--background-opacity-2)}&.i-page-active{--background:var(--color-main);--color:var(--color-main-reverse);cursor:default}&.i-page-loading{--background:unset;cursor:default}}.i-select{display:flex;gap:.25em}.i-select-multiple{flex-wrap:wrap;padding:.225em .628em;.i-tag{background:var(--background-opacity-1);line-height:1.425em;padding:0 .5em;position:relative}}.i-select-options{--gap:0.25em;border-radius:inherit;display:flex;flex-direction:column;gap:2px;max-height:40vh;overflow-x:hidden;padding:4px;.i-list-item{align-items:center;color:var(--color-5);justify-content:unset;&.i-list-item-active{background:var(--color-main-0);color:var(--color-main);.i-select-option-check{opacity:1}}&.disabled{pointer-events:none}}}.i-select-options-multiple{.i-list-item{&.i-list-item-active{background:transparent}}}.i-select-option-check{opacity:0}.i-select-filter{backdrop-filter:var(--blur);background:var(--background-opacity);border-bottom:1px solid var(--background-opacity-1);display:flex;flex-wrap:wrap;position:sticky;top:0;z-index:1;&:empty{display:none}}.i-tag{--background:var(--color-9);--color:var(--color-1);align-items:center;align-self:center;background:var(--background);border:2px solid transparent;border-radius:var(--radius);color:var(--color);display:inline-flex;font-size:.81em;gap:.5em;justify-content:center;line-height:1;padding:.25em .5em;position:relative;transition:var(--transition);.i-tag-close{background:var(--error);color:var(--white);font-size:.81em;margin:0;position:absolute;right:0;top:0;transform:translate(50%,-50%);transition:all .16s;z-index:1;&:hover{background:var(--error-1);color:var(--white)}}&:hover{.i-tag-hover-close{opacity:1;transform:translate(50%,-50%) scale(1)}}}.i-tag-large{font-size:1em}.i-tag-extreme{font-size:1.5em;height:2em}.i-tag-small{font-size:.72em;padding:.125em .4em}.i-tag-dot{background-color:var(--color);border-radius:50%;box-shadow:0 -1px 1px 0 rgba(var(--color),.3);content:"\20";flex-shrink:0;height:.385em;transition:inherit;width:.385em}.i-tag-outline{--background:transparent;border-color:var(--color)}.i-tag-hover-close{opacity:0;transform:translate(50%,-50%) scale(0)}.i-tag-clickable{cursor:pointer;&:hover{background:var(--background-hover);color:var(--color-hover,var(--color))}}.i-colorpicker{display:inline-flex;width:fit-content}.i-colorpicker-handle{align-items:center;align-self:center;display:inline-flex;font-size:.8em;gap:.25em;position:relative}.i-colorpicker-square{border:2px solid var(--color-9);border-radius:var(--radius);cursor:pointer;display:inline-block;height:1.8em;transition:var(--transition);width:1.8em;&:hover{border-color:var(--color-8)}}.i-colorpicker-footer{display:flex;font-size:.8em;gap:4px}.i-colorpicker-text{background:var(--color-9);border-radius:var(--radius);cursor:pointer;padding:.25em .5em;transition:var(--transition);&:hover{background:var(--color-8)}}.rc-color-picker-panel{background:inherit;box-shadow:none}.i-datepicker-label{position:unset}.i-datepicker{padding:8px;user-select:none;.i-datepicker-item{cursor:pointer}}.i-datepicker-dates,.i-datepicker-weeks{display:grid;gap:2px;grid-template-columns:repeat(7,1fr)}.i-datepicker-item,.i-datepicker-week{display:flex;justify-content:center;padding:.32em .5em}.i-datepicker-week{color:var(--color-5)}.i-datepicker-item{--background:transparent;background:var(--background);border-radius:var(--radius);color:var(--color);opacity:.4;transition:all .12s;&:hover{--background:var(--color-main-0);opacity:1}&.i-datepicker-same-month{opacity:.8}&.i-datepicker-today{--background:var(--color-main-0)}&.i-datepicker-active{--background:var(--color-main);--color:var(--color-main-reverse);opacity:1}&.i-datepicker-disabled{cursor:not-allowed;opacity:.2}}.i-datepicker-units{align-items:center;color:var(--color-6);display:flex;font-size:.9em;gap:.125em;margin-bottom:.5em}.i-datepicker-action{align-items:baseline;border-radius:var(--radius);display:flex;gap:.25em;padding:.125em .5em;position:relative;user-select:none;>span{color:var(--color);font-size:1.15em}&:hover{background:var(--color-main-0)}}.i-datepicker-icon{margin-right:.4em;opacity:.5;pointer-events:none}.i-datepicker-ym{backdrop-filter:var(--blur);background:var(--background);display:flex;gap:.5em;inset:0;opacity:0;padding:8px;pointer-events:none;position:absolute;transition:var(--transition);z-index:1;&.i-datepicker-active{opacity:1;pointer-events:unset}}.i-datepicker-years{display:flex;flex-direction:column;gap:.25em;max-height:100%;overflow-x:hidden;width:5em}.i-datepicker-months{display:grid;flex:1;gap:.25em;grid-template-columns:repeat(3,1fr);margin-top:1.5em}.i-datepicker-year{flex:1}.i-datepicker-month,.i-datepicker-year{align-items:center;border-radius:var(--radius);display:flex;justify-content:center;padding:2px;user-select:none;&:hover{background-color:var(--background-opacity-2)}&.i-datepicker-active{background:var(--color-main);color:var(--color-main-reverse);opacity:1}}.i-datepicker-close{position:absolute;right:0;top:0}.i-timepicker-label{position:unset}.i-timepicker{display:flex}.i-timepicker-list{display:flex;flex-direction:column;gap:2px;max-height:12.2em;min-width:3em;overflow:auto;padding:4px;scrollbar-width:none;text-align:center;&::-webkit-scrollbar{display:none}&:not(:last-child){border-right:1px solid var(--color-9)}}.i-timepicker-item{border-radius:var(--radius);display:block;opacity:.5;padding:.32em .5em;&:hover{background-color:var(--color-9);opacity:1}&.i-timepicker-item-active{background:var(--color-main);bottom:0;color:var(--color-main-reverse);opacity:1;position:sticky;top:0;z-index:1}}.i-timepicker-icon{margin-right:.4em;opacity:.5;pointer-events:none}.i-daterange-grids{display:flex;.i-datepicker-ym{justify-content:center}.i-datepicker-months{margin-top:0;max-width:160px}}.i-daterange-col{flex:1;min-width:0}.i-daterange-between{--background:var(--background-opacity-1);opacity:1}.i-popconfirm{padding:1rem}.i-popconfirm-footer{margin-top:1rem}.i-radio{display:inline-flex;flex-wrap:wrap;gap:1em;position:relative}.i-radio-label{font-weight:500;text-align:var(--label-align);width:var(--label-width)}.i-radio-item{align-items:baseline;border-radius:var(--radius);display:inline-flex;&:hover{.i-radio-input{background-color:var(--color-main-0);box-shadow:inset 0 0 0 3px var(--color-7)}}}.i-radio-item-custom{>.i-radio-input{height:0;width:0}}.i-input-success .i-radio-input{box-shadow:inset 0 0 0 3px var(--green-0)}.i-input-warning .i-radio-input{box-shadow:inset 0 0 0 3px var(--yellow-0)}.i-input-error .i-radio-input{box-shadow:inset 0 0 0 3px var(--error-0)}.i-radio-options{align-self:baseline;display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.625em;position:relative}.i-radio-options-button{flex:none}.i-radio-text{border-radius:inherit;color:var(--color-3);display:inline-flex;margin-left:.4em;transition:var(--transition);user-select:none}.i-radio-input{align-self:center;appearance:none;border-radius:50%;box-shadow:inset 0 0 0 3px var(--color-8);cursor:inherit;display:flex;flex-shrink:0;height:1.125em;outline:0;overflow:hidden;position:relative;transition:all .15s;width:1.125em}.i-radio-default{border:0 solid transparent}.i-radio-input:checked{&.i-radio-default{background:var(--color-main-reverse);border-color:var(--color-main);border-width:.4em;box-shadow:none;&+.i-radio-text{color:var(--color-main)}}}.i-radio-default:active{transform:scale(1.1)}.i-radio-button{display:none;&+.i-radio-text{border:1.5px solid var(--color-9);font-size:.94em;line-height:1.8;margin-left:0;padding:0 .628em;white-space:nowrap;&:hover{background-color:var(--color-main-0);border-color:var(--color-8)}}&:checked+.i-radio-text{background:var(--color-main-0);border-color:var(--color-main);color:var(--color-main)}}.i-radio-message{align-self:flex-start;font-size:.8em;margin-top:.5em;pointer-events:none}.i-radio-success{.i-radio-input{box-shadow:inset 0 0 0 3px var(--success-0)}.i-radio-message{color:var(--success)}}.i-radio-warning{.i-radio-input{box-shadow:inset 0 0 0 3px var(--warning-0)}.i-radio-message{color:var(--warning)}}.i-radio-error{.i-radio-input{box-shadow:inset 0 0 0 3px var(--error-0)}.i-radio-message{color:var(--error)}}.i-resizable{display:flex;overflow:hidden}.i-resizable-vertical{flex-direction:column;&>.i-resizable-line{cursor:ns-resize;height:2px;width:100%}}.i-resizable-a{overflow:auto}.i-resizable-b{flex:1;overflow:auto}.i-resizable-line{align-items:center;background:var(--color-9);cursor:ew-resize;display:flex;height:100%;justify-content:center;outline:1px solid transparent;position:relative;touch-action:none;transition:var(--transition);user-select:none;width:2px;&.i-resizable-resizing,&:hover{outline-color:var(--color-8);&>.i-resizable-line-node{opacity:1}}}.i-resizable-line-node{background:inherit;border-radius:var(--radius);display:flex;font-size:.8em;opacity:0;pointer-events:none;position:relative;transition:var(--transition);z-index:1}.i-river{overflow:hidden}.i-river-track{display:inline-flex;will-change:transform}.i-river-item{flex-shrink:0}.i-scroll{-webkit-overflow-scrolling:touch;overflow:hidden;user-select:none}.i-step{display:flex;flex-wrap:wrap;gap:.5em;overflow:hidden}.i-step-vertical{flex-direction:column;.i-step-item{flex-direction:row;&:not(:last-child){.i-step-item-right{padding-bottom:1em}}}}.i-step-item{display:flex;flex:1 1 auto;flex-direction:column;gap:.5em;transition:var(--transition);&:last-child{flex:none;.i-step-divider{display:none}}&.i-step-item-finished{opacity:.4;.i-step-divider{border-style:solid}}&.i-step-item-pending{opacity:.4}&:hover{opacity:1}}.i-step-item-index{align-items:center;background:var(--color-4);border-radius:1.5em;color:var(--background);display:flex;flex-shrink:0;justify-content:center;line-height:1.5em;width:1.5em}.i-step-divider{align-self:center;border:1px dashed var(--color-7);flex:1}.i-step-item-title{white-space:nowrap}.i-step-item-left,.i-step-item-title{align-items:center;display:flex;gap:.5em}.i-step-item-left,.i-step-item-right{flex-direction:column}.i-step-item-right{display:flex;gap:.5em}.i-swiper{max-width:100%;position:relative;user-select:none;&:hover{.i-swiper-arrow{opacity:.72}}.i-swiper-arrow:hover{opacity:1}}.i-swiper-track{overflow:hidden;position:relative;touch-action:pan-x}.i-swiper-list{display:flex;will-change:transform}.i-swiper-fade{>.i-swiper-item{opacity:0}>.i-swiper-active{opacity:1}}.i-swiper-vertical{.i-swiper-track{height:100%;touch-action:pan-y}.i-swiper-list{flex-direction:column}.i-swiper-item{width:100%}.i-swiper-arrow{left:unset;right:.5em}.i-swiper-prev{bottom:50%;top:unset;transform:translateY(-6px)}.i-swiper-next{transform:translateY(6px)}}.i-swiper-item{display:flex;flex:1;flex-shrink:0;overflow:hidden}.i-swiper-arrow,.i-swiper-item{align-items:center;justify-content:center;transition:var(--transition)}.i-swiper-arrow{border-radius:var(--radius);display:inline-flex;opacity:0;position:absolute;top:50%;transform:translateY(-50%)}.i-swiper-prev{left:.5em}.i-swiper-next{right:.5em}.i-swiper-indicators{display:flex;gap:.5em;justify-content:center;margin:.5em 0}.i-swiper-indicators-fixed{bottom:0;left:50%;position:absolute;transform:translate(-50%)}.i-swiper-indicator{background:var(--color);border-radius:50%;flex-shrink:0;height:8px;opacity:.25;width:8px;&:hover{opacity:.8}&.i-indicator-active{opacity:1}}.i-tabs{gap:.5em;max-width:100%}.i-tabs-line{.i-tab-navs{gap:1em}.i-tab-nav{padding:.4em 0;&.i-tab-active{--color:var(--color-main)}}.i-tab-navs-bar{background:var(--color-main)}.i-tab-navs-vertical>.i-tab-navs{gap:.5em;>.i-tab-nav{padding:.25em 1em}}}.i-tab-navs-container{align-items:center;border-radius:var(--radius);display:flex;gap:4px;scroll-behavior:smooth}.i-tab-navs-vertical{align-items:flex-end;flex-direction:column}.i-tab-navs{display:flex;flex:1;flex-direction:inherit;gap:1px;overflow:auto;position:relative;scroll-behavior:unset;scrollbar-width:none;user-select:none}.i-tab-navs::-webkit-scrollbar{display:none}.i-tabs-pane{.i-tab-navs-container{position:relative;&:before{border-top:1px solid var(--color-8);bottom:0;content:"";left:0;position:absolute;right:0;width:100%;z-index:1}}.i-tab-navs{gap:4px;.i-tab-nav{border:1px solid transparent;border-radius:var(--radius) var(--radius) 0 0;&:hover{border-color:var(--color-8);border-bottom-color:var(--background)}}.i-tab-active{background:transparent;border-color:var(--color-8);border-bottom:1px solid var(--background);box-shadow:1px 2px 0 1px var(--color-8);z-index:2;&:hover{background-color:transparent}}}.i-tab-navs-vertical{&:before{border-right:1px solid var(--color-8);border-top:none;height:100%;left:unset;top:0;width:unset}.i-tab-navs{.i-tab-nav{border:1px solid transparent;border-radius:var(--radius) 0 0 var(--radius);&:hover{border-color:var(--color-8);border-right-color:var(--background)}}.i-tab-active{border-color:var(--color-7);border-right:1px solid var(--background);&:hover{background-color:transparent}}}}}.i-tab-nav{--color:var(--color-7);align-items:center;border-radius:var(--radius);color:var(--color);display:flex;flex-shrink:0;gap:.25em;justify-content:center;padding:.4em .5em;position:relative;user-select:none;z-index:1;&:hover{--color:var(--color-3)}&.i-tab-active{--color:var(--color-main)}}.i-tabs-morelist{.i-tab-nav{white-space:nowrap}.i-tab-active{background:var(--color-main-0)}}.i-tab-closable{.i-tab-nav{border-radius:var(--radius) var(--radius) 0 0;padding-right:0;&.i-tab-active{background-color:var(--background);box-shadow:2px 0 8px #0000000d}}}.i-tab-nav:hover{.i-tab-nav-close{opacity:1}}.i-tab-navs-bar{background:var(--background-opacity-2);border-radius:4px;bottom:0;height:0;left:0;pointer-events:none;position:absolute;transition:var(--transition)}.i-tab-navs-vertical{>.i-tab-navs{gap:1px;>.i-tab-navs-bar{bottom:unset;left:unset;right:0;top:0;width:0}}}.i-tab-contents{flex:1;position:relative}.i-tab-content{display:none;&.i-tab-active{display:block}}.i-tabs{.i-tab-nav-close{background:var(--background);font-size:.7em;margin:0;opacity:0;padding:0;position:absolute;right:4px;&:hover{background:var(--background);color:var(--error)}}}.i-tree{--tree-gap:2px;color:var(--color-2);display:flex;flex-direction:column;gap:var(--tree-gap)}.i-tree-group-title{display:flex;font-size:1em;font-size:.9em;font-style:italic;font-weight:300;position:relative;&:after{align-self:center;background:var(--color-8);content:"\20";flex:1;height:1px;margin-left:.5em}}.i-tree-item-header{align-items:center;border-radius:var(--radius);color:var(--color-6);display:flex;gap:.25em;overflow:hidden;padding:.4em;position:relative;user-select:none;&.i-tree-item-round{border-radius:100px}&.i-tree-item-selected,&:hover{background:var(--color-main-0);color:var(--color-main)}}.i-tree-round{--radius:100px}.i-tree-item-icon{display:flex}.i-tree-checkbox{align-self:center}.i-tree-toggle{border-radius:inherit;color:var(--color-6);margin-left:auto;transition:var(--transition);&:hover{background:var(--background-opacity);color:var(--color-3)}}.i-tree-item-content{display:flex;flex-direction:column;gap:var(--tree-gap);max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(0,1,0,1)}.i-tree-expand{>.i-tree-item-content{margin-top:var(--tree-gap);max-height:2000px;transition:max-height .25s cubic-bezier(1,0,1,0)}>.i-tree-item-header{color:var(--color-main);opacity:1;>.i-tree-toggle{transform:rotateX(180deg)}}}.i-input-label-file{display:flex;width:unset;&:has(.i-upload-list:empty){align-items:center}}.i-input-file-hidden{display:none}.i-upload-inner{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.5em}.i-upload-card{&:has(.i-upload-list:not(:empty)){align-self:flex-start}.i-upload-list{display:contents}}.i-upload-list{display:flex;flex-wrap:wrap;gap:inherit;user-select:none;width:100%;&:empty{display:none}}.i-upload-delete{box-shadow:var(--shadow);margin:0;opacity:0;right:-.825em;top:-.825em;z-index:1}.i-upload-btn{align-self:center}.i-upload-card-btn{background:var(--background-opacity);border-style:dashed;font-size:1em;height:var(--upload-card-size);opacity:.6;width:var(--upload-card-size);&:hover{opacity:1}}.i-upload-item{align-items:center;background:var(--background-opacity);border:2px solid var(--background-opacity-1);border-radius:var(--radius);display:inline-flex;font-size:.8em;gap:.25em;padding:.25em .4em;position:relative;transition:var(--transition);.i-upload-delete{background-color:var(--error);color:#fff;position:absolute;&:hover{background-color:var(--error);color:#fff}}&:hover{background-color:var(--background-opacity-1);.i-upload-delete{opacity:1}}}.i-upload-item-card{align-items:center;background:var(--background-opacity);border-radius:var(--radius);cursor:pointer;display:flex;gap:.25em;height:var(--upload-card-size);justify-content:center;position:relative;.i-image,video{height:100%;object-fit:cover;width:100%}.i-upload-file-name{font-size:.8em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i-upload-delete{background-color:var(--error);color:#fff;font-size:.72em;position:absolute;&:hover{background-color:var(--error);color:#fff}}&:hover{.i-upload-delete,.i-upload-tip{opacity:1}}}.i-upload-size{color:var(--color-6);font-size:.8em}.i-upload-item-dragged{z-index:1000}.i-upload-tip{backdrop-filter:var(--blur);background:var(--background-opacity);border-radius:var(--radius);box-shadow:var(--shadow);font-size:.86em;left:50%;opacity:0;pointer-events:none;position:absolute;top:100%;transform:translate(-50%,.5em);transition:opacity .12s;white-space:pre;z-index:1}.i-upload-dropbox{align-items:center;border:2px dashed var(--color-5);border-radius:var(--radius);color:var(--color-5);cursor:pointer;display:flex;gap:.5em;justify-content:center;padding:1em;transition:var(--transition);width:100%;&:hover{border-color:var(--color-main);color:var(--color-main)}}.i-upload-dropbox-active{background:var(--background-opacity-1);border-color:var(--color-main);color:var(--color-main)}
 /*# sourceMappingURL=index.css.map */