@ioca/react 1.5.19 → 1.5.21

package/lib/es/components/datagrid/virtual.js

@@ -1,12 +1,90 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
-import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { memo, useMemo, useCallback, useRef, useState, useEffect } from 'react';
 import { getScrollbarSize, List } from 'react-window';
 import { useResizeObserver } from '../../js/hooks.js';
 import Loading from '../loading/loading.js';
 import Resize from './resize.js';
 import Sorter from './sorter.js';
 
+const VirtualCell = memo(function VirtualCell({ column, data, row, col, isHeader, cellEllipsis, sortBy, sortType, resizable, onWidthChange, }) {
+    const { id, fixed, justify, colSpan, render, title, sorter, renderHeader } = column;
+    const style = useMemo(() => ({
+        "--datagrid-justify": justify,
+        gridColumn: `${col + 1} / span ${colSpan ?? 1}`,
+        insetInline: `var(--datagrid-cell-inset-${col})`,
+        ...(isHeader ? { insetBlockStart: 0 } : null),
+        position: !isHeader && !fixed ? "static" : undefined,
+    }), [col, colSpan, fixed, isHeader, justify]);
+    const order = isHeader && sortBy === id ? sortType : "";
+    return (jsxs("div", { "data-col": id, className: classNames("i-datagrid-cell", {
+            [`i-datagrid-cell-fixed-${fixed}`]: fixed,
+            "i-datagrid-has-sorter": isHeader && sorter,
+        }), style: style, children: [isHeader
+                ? (renderHeader?.(column, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
+                        "i-datagrid-cell-content-ellipsis": cellEllipsis,
+                    }), children: title || id })))
+                : (render?.(data?.[id], data, row, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
+                        "i-datagrid-cell-content-ellipsis": cellEllipsis,
+                    }), children: data?.[id] }))), isHeader && sorter && jsx(Sorter, { type: order }), isHeader && resizable && (jsx(Resize, { index: col, onWidthChange: onWidthChange }))] }));
+});
+// ---------------------------------------------------------------------------
+// VirtualRow — memoised row rendered by react-window
+// ---------------------------------------------------------------------------
+const VirtualRow = memo(function VirtualRow({ index, style: itemStyle, ariaAttributes, rows, columns, columnById, columnIndexById, contentWidthPx, virtualRowHeight, header, striped, cellEllipsis, loaderNode, sortBy, sortType, resizable, onWidthChange, onRowClick, onCellClick, onCellDoubleClick, }) {
+    if (index >= rows.length) {
+        return (jsx("div", { ...ariaAttributes, style: {
+                ...itemStyle,
+                width: contentWidthPx,
+                minWidth: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }, children: loaderNode }));
+    }
+    const rowData = rows[index];
+    const rowNum = index + (header ? 1 : 0);
+    const bg = striped && index % 2 === 0 ? "var(--background-1)" : undefined;
+    const handleCellClick = useCallback((e) => {
+        if (!onCellClick)
+            return;
+        const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
+        const id = el?.dataset?.col;
+        if (!id)
+            return;
+        const column = columnById.get(id);
+        const col = columnIndexById.get(id);
+        if (!column || col == null)
+            return;
+        onCellClick(rowData, column, rowNum, col, e);
+    }, [columnById, columnIndexById, onCellClick, rowData, rowNum]);
+    const handleCellDoubleClick = useCallback((e) => {
+        if (!onCellDoubleClick)
+            return;
+        const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
+        const id = el?.dataset?.col;
+        if (!id)
+            return;
+        const column = columnById.get(id);
+        const col = columnIndexById.get(id);
+        if (!column || col == null)
+            return;
+        onCellDoubleClick(rowData, column, rowNum, col, e);
+    }, [columnById, columnIndexById, onCellDoubleClick, rowData, rowNum]);
+    const handleRowClick = useCallback(() => onRowClick?.(rowData, rowNum), [onRowClick, rowData, rowNum]);
+    return (jsx("div", { style: {
+            ...itemStyle,
+            width: contentWidthPx,
+            minWidth: "100%",
+            display: "grid",
+            gridTemplateColumns: "var(--grid-template-columns)",
+            height: virtualRowHeight,
+            "--datagrid-cell-background": bg,
+        }, className: 'i-datagrid-row', onClick: handleRowClick, onClickCapture: handleCellClick, onDoubleClickCapture: handleCellDoubleClick, children: columns.map((c, col) => (jsx(VirtualCell, { column: c, data: rowData, row: rowNum, col: col, cellEllipsis: cellEllipsis, sortBy: sortBy, sortType: sortType, resizable: resizable, onWidthChange: onWidthChange }, c.id))) }));
+});
+// ---------------------------------------------------------------------------
+// VirtualDatagrid
+// ---------------------------------------------------------------------------
 function VirtualDatagrid(props) {
     const { virtual, columns, rows, header, sortBy, sortType, height, loading, resizable, striped, cellEllipsis, empty, wrapRef, containerRef, onHeaderClick, onWidthChange, onRowClick, onCellClick, onCellDoubleClick, onScroll, } = props;
     const headerRef = useRef(null);
@@ -19,6 +97,7 @@ function VirtualDatagrid(props) {
     const rafRef = useRef({
         viewport: 0,
         contentWidth: 0,
+        scrollSync: 0,
     });
     const columnById = useMemo(() => {
         const map = new Map();
@@ -30,38 +109,6 @@ function VirtualDatagrid(props) {
         columns.forEach((c, i) => map.set(c.id, i));
         return map;
     }, [columns]);
-    const getVirtualCellStyle = useCallback(({ justify, col, colSpan = 1, }) => {
-        return {
-            "--datagrid-justify": justify,
-            gridColumn: `${col + 1} / span ${colSpan}`,
-            insetInline: `var(--datagrid-cell-inset-${col})`,
-        };
-    }, []);
-    const renderVirtualCell = useCallback(({ column, data, row, col, isHeader, }) => {
-        const { id, fixed, justify, colSpan, render, title, sorter, renderHeader, } = column;
-        const style = {
-            ...getVirtualCellStyle({ justify, col, colSpan }),
-            ...(isHeader ? { insetBlockStart: 0 } : null),
-        };
-        const order = isHeader && sortBy === id ? sortType : "";
-        return (jsxs("div", { "data-col": id, className: classNames("i-datagrid-cell", {
-                [`i-datagrid-cell-fixed-${fixed}`]: fixed,
-                "i-datagrid-has-sorter": isHeader && sorter,
-            }), style: style, children: [isHeader
-                    ? (renderHeader?.(column, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
-                            "i-datagrid-cell-content-ellipsis": cellEllipsis,
-                        }), children: title || id })))
-                    : (render?.(data?.[id], data, row, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
-                            "i-datagrid-cell-content-ellipsis": cellEllipsis,
-                        }), children: data?.[id] }))), isHeader && sorter && jsx(Sorter, { type: order }), isHeader && resizable && (jsx(Resize, { index: col, onWidthChange: onWidthChange }))] }, id));
-    }, [
-        cellEllipsis,
-        getVirtualCellStyle,
-        onWidthChange,
-        resizable,
-        sortBy,
-        sortType,
-    ]);
     const handleHeaderClick = useCallback((e) => {
         const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
         const id = el?.dataset?.col;
@@ -71,10 +118,17 @@ function VirtualDatagrid(props) {
         const el = e.currentTarget;
         if (!el)
             return;
-        if (headerRef.current &&
-            headerRef.current.scrollLeft !== el.scrollLeft) {
-            headerRef.current.scrollLeft = el.scrollLeft;
-        }
+        if (rafRef.current.scrollSync)
+            return;
+        rafRef.current.scrollSync = requestAnimationFrame(() => {
+            rafRef.current.scrollSync = 0;
+            if (!headerRef.current)
+                return;
+            const target = el.scrollLeft;
+            if (headerRef.current.scrollLeft !== target) {
+                headerRef.current.scrollLeft = target;
+            }
+        });
     }, []);
     const handleReachEnd = useCallback(() => {
         if (virtual.onReachEnd) {
@@ -104,32 +158,6 @@ function VirtualDatagrid(props) {
             listEl.scrollLeft = el.scrollLeft;
         }
     }, []);
-    const handleBodyClickCapture = useCallback((e, rowData, rowNum) => {
-        if (!onCellClick)
-            return;
-        const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
-        const id = el?.dataset?.col;
-        if (!id)
-            return;
-        const column = columnById.get(id);
-        const col = columnIndexById.get(id);
-        if (!column || col == null)
-            return;
-        onCellClick(rowData, column, rowNum, col, e);
-    }, [columnById, columnIndexById, onCellClick]);
-    const handleBodyDoubleClickCapture = useCallback((e, rowData, rowNum) => {
-        if (!onCellDoubleClick)
-            return;
-        const el = e.target?.closest?.(".i-datagrid-cell[data-col]");
-        const id = el?.dataset?.col;
-        if (!id)
-            return;
-        const column = columnById.get(id);
-        const col = columnIndexById.get(id);
-        if (!column || col == null)
-            return;
-        onCellDoubleClick(rowData, column, rowNum, col, e);
-    }, [columnById, columnIndexById, onCellDoubleClick]);
     useEffect(() => {
         const el = wrapRef.current;
         if (!el)
@@ -200,12 +228,14 @@ function VirtualDatagrid(props) {
     const contentWidthPx = measuredContentWidth
         ? `${measuredContentWidth}px`
         : "fit-content";
-    const headerCells = useMemo(() => columns.map((c, col) => renderVirtualCell({
-        column: c,
-        row: 0,
-        col,
-        isHeader: true,
-    })), [columns, renderVirtualCell]);
+    const headerCells = useMemo(() => columns.map((c, col) => (jsx(VirtualCell, { column: c, row: 0, col: col, isHeader: true, cellEllipsis: cellEllipsis, sortBy: sortBy, sortType: sortType, resizable: resizable, onWidthChange: onWidthChange }, c.id))), [
+        cellEllipsis,
+        columns,
+        onWidthChange,
+        resizable,
+        sortBy,
+        sortType,
+    ]);
     const headerInnerStyle = useMemo(() => ({
         display: "grid",
         gridTemplateColumns: "var(--grid-template-columns)",
@@ -225,51 +255,47 @@ function VirtualDatagrid(props) {
         }
         : undefined, [scrollbarSize]);
     const loaderNode = useMemo(() => virtual.loader ?? jsx(Loading, { className: 'my-12' }), [virtual.loader]);
-    const rowComponent = useCallback(({ index, style: itemStyle }) => {
-        if (index >= rows.length) {
-            return (jsx("div", { style: {
-                    ...itemStyle,
-                    width: contentWidthPx,
-                    minWidth: "100%",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                }, children: loaderNode }));
-        }
-        const rowData = rows[index];
-        const rowNum = index + (header ? 1 : 0);
-        const bg = striped && index % 2 === 0 ? "var(--background-1)" : undefined;
-        return (jsx("div", { style: {
-                ...itemStyle,
-                width: contentWidthPx,
-                minWidth: "100%",
-                display: "grid",
-                gridTemplateColumns: "var(--grid-template-columns)",
-                height: virtual.rowHeight,
-                "--datagrid-cell-background": bg,
-            }, className: 'i-datagrid-row', onClickCapture: (e) => handleBodyClickCapture(e, rowData, rowNum), onDoubleClickCapture: (e) => handleBodyDoubleClickCapture(e, rowData, rowNum), onClick: () => onRowClick?.(rowData, rowNum), children: columns.map((c, col) => renderVirtualCell({
-                column: c,
-                data: rowData,
-                row: rowNum,
-                col,
-            })) }));
-    }, [
+    // Stable row-component reference so react-window can memoise rows.
+    const rowProps = useMemo(() => ({
+        rows,
         columns,
+        columnById,
+        columnIndexById,
         contentWidthPx,
-        handleBodyClickCapture,
-        handleBodyDoubleClickCapture,
+        virtualRowHeight: virtual.rowHeight,
         header,
+        striped,
+        cellEllipsis,
         loaderNode,
+        sortBy,
+        sortType,
+        resizable,
+        onWidthChange,
         onRowClick,
-        renderVirtualCell,
+        onCellClick,
+        onCellDoubleClick,
+    }), [
         rows,
-        striped,
+        columns,
+        columnById,
+        columnIndexById,
+        contentWidthPx,
         virtual.rowHeight,
+        header,
+        striped,
+        cellEllipsis,
+        loaderNode,
+        sortBy,
+        sortType,
+        resizable,
+        onWidthChange,
+        onRowClick,
+        onCellClick,
+        onCellDoubleClick,
     ]);
     return (jsxs("div", { ref: containerRef, className: classNames("i-datagrid", {
             "i-datagrid-loading": loading,
-        }), style: { display: "block", width: "100%", maxWidth: "100%" }, children: [header && (jsx("div", { ref: headerRef, className: 'i-datagrid-virtual-header', onScroll: handleHeaderScroll, style: headerWrapStyle, children: jsx("div", { ref: headerInnerRef, className: 'i-datagrid-header i-datagrid-row', style: headerInnerStyle, onClick: handleHeaderClick, children: headerCells }) })), jsx(List, { listRef: listRef, rowCount: rows.length + (virtual.hasMore ? 1 : 0), rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: {}, style: listStyle, onScroll: handleBodyScroll, onRowsRendered: handleRowsRendered, rowComponent: rowComponent }), rows.length < 1 && !virtual.hasMore && empty] }));
+        }), style: { display: "block", width: "100%", maxWidth: "100%" }, children: [header && (jsx("div", { ref: headerRef, className: 'i-datagrid-virtual-header', onScroll: handleHeaderScroll, style: headerWrapStyle, children: jsx("div", { ref: headerInnerRef, className: 'i-datagrid-header i-datagrid-row', style: headerInnerStyle, onClick: handleHeaderClick, children: headerCells }) })), jsx(List, { listRef: listRef, rowCount: rows.length + (virtual.hasMore ? 1 : 0), rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: rowProps, style: listStyle, onScroll: handleBodyScroll, onRowsRendered: handleRowsRendered, rowComponent: VirtualRow }), rows.length < 1 && !virtual.hasMore && empty] }));
 }
 
 export { VirtualDatagrid as default };
-//# sourceMappingURL=virtual.js.map

package/lib/es/components/description/description.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { Fragment } from 'react';
+import './index.css';
 
 const Description = (props) => {
     const { data, colon, columns = 1, gap = ".5em", align, labelWidth, labelAlign, vertical, equally, style, className, } = props;
@@ -25,4 +26,3 @@ const Description = (props) => {
 };
 
 export { Description as default };
-//# sourceMappingURL=description.js.map

package/lib/es/components/description/index.js

@@ -3,4 +3,3 @@ import Description from './description.js';
 
 
 export { Description as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/drawer/drawer.js

@@ -4,6 +4,7 @@ import { useRef, useTransition, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useReactive, useKeydown } from '../../js/hooks.js';
 import Helpericon from '../utils/helpericon/helpericon.js';
+import './index.css';
 
 function Drawer(props) {
     const { visible, position = "left", header, footer, backdropClosable = true, hideCloseButton, keepDOM, className, disabledEsc, children, onVisibleChange, onClose, ...restProps } = props;
@@ -66,4 +67,3 @@ function Drawer(props) {
 }
 
 export { Drawer as default };
-//# sourceMappingURL=drawer.js.map

package/lib/es/components/drawer/index.js

@@ -3,4 +3,3 @@ import Drawer from './drawer.js';
 
 
 export { Drawer as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/dropdown/dropdown.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useEffect } from 'react';
 import List from '../list/list.js';
 import Popup from '../popup/popup.js';
+import './index.css';
 import Item from './item.js';
 
 const DropdownCloseCtx = createContext(null);
@@ -28,4 +29,3 @@ const Dropdown = (props) => {
 Dropdown.Item = Item;
 
 export { DropdownCloseCtx, Dropdown as default };
-//# sourceMappingURL=dropdown.js.map

package/lib/es/components/dropdown/index.js

@@ -3,4 +3,3 @@ import Dropdown from './dropdown.js';
 
 
 export { Dropdown as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/dropdown/item.js

@@ -31,4 +31,3 @@ const Item = (props) => {
 };
 
 export { Item as default };
-//# sourceMappingURL=item.js.map

package/lib/es/components/editor/controls.js

@@ -55,4 +55,3 @@ function getControls(options) {
 }
 
 export { getControls as default, exec, xssOptions };
-//# sourceMappingURL=controls.js.map

package/lib/es/components/editor/editor.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import xss from 'xss';
 import getControls, { xssOptions, exec } from './controls.js';
+import './index.css';
 import Memtion, { filterMemtionOptions, sanitizePlaintextOnMemtionHtml, getMemtionReplaceRange, insertMemtionOption, removeAdjacentMemtionTag, getMemtionText, getSelectionRect } from './memtion.js';
 
 const controlBtnProps = {
@@ -275,4 +276,3 @@ const Editor = (props) => {
 };
 
 export { Editor as default };
-//# sourceMappingURL=editor.js.map

package/lib/es/components/editor/index.js

@@ -3,4 +3,3 @@ import Editor from './editor.js';
 
 
 export { Editor as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/editor/memtion.js

@@ -287,4 +287,3 @@ const Memtion = (props) => {
 var Memtion$1 = memo(Memtion);
 
 export { MEMTION_TAG_CLASS_NAME, Memtion$1 as default, filterMemtionOptions, getMemtionReplaceRange, getMemtionText, getSelectionRect, insertMemtionOption, removeAdjacentMemtionTag, sanitizePlaintextOnMemtionHtml };
-//# sourceMappingURL=memtion.js.map

package/lib/es/components/flex/flex.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { useMemo } from 'react';
+import './index.css';
 
 const Flex = (props) => {
     const { as: Component = "div", align, justify, direction, wrap, gap, columns, className, style, ...restProps } = props;
@@ -25,4 +26,3 @@ const Flex = (props) => {
 };
 
 export { Flex as default };
-//# sourceMappingURL=flex.js.map

package/lib/es/components/flex/index.js

@@ -3,4 +3,3 @@ import Flex from './flex.js';
 
 
 export { Flex as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/form/context.js

@@ -3,4 +3,3 @@ import { createContext } from 'react';
 const Context = createContext({});
 
 export { Context as default };
-//# sourceMappingURL=context.js.map

package/lib/es/components/form/field.js

@@ -70,4 +70,3 @@ function Field(props) {
 }
 
 export { Field as default };
-//# sourceMappingURL=field.js.map

package/lib/es/components/form/form.js

@@ -5,6 +5,7 @@ import { crush } from 'radash';
 import { useMemo, useRef, useEffect } from 'react';
 import Context from './context.js';
 import Field from './field.js';
+import './index.css';
 import useConfig from './useConfig.js';
 import useForm from './useForm.js';
 
@@ -64,4 +65,3 @@ Form.Field = Field;
 Form.useConfig = useConfig;
 
 export { Form as default };
-//# sourceMappingURL=form.js.map

package/lib/es/components/form/index.js

@@ -3,4 +3,3 @@ import Form from './form.js';
 
 
 export { Form as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/form/useConfig.js

@@ -31,4 +31,3 @@ function useConfig(configs, formProps) {
 }
 
 export { useConfig as default };
-//# sourceMappingURL=useConfig.js.map

package/lib/es/components/form/useForm.js

@@ -71,7 +71,7 @@ class IFormInstance {
         const { id, rules, data } = this;
         if (!rules)
             return data;
-        const names = field ? [field] : Object.keys(this.cacheData);
+        const names = field ? [field] : [...new Set([...Object.keys(this.cacheData), ...Object.keys(rules)])];
         let isAllValid = true;
         names.forEach((name) => {
             const o = rules[name];
@@ -115,4 +115,3 @@ function useForm(form) {
 }
 
 export { IFormInstance, useForm as default };
-//# sourceMappingURL=useForm.js.map

package/lib/es/components/form/utils.js

@@ -26,4 +26,3 @@ function deleteDeep(obj, path) {
 }
 
 export { deleteDeep, getDeep, setDeep };
-//# sourceMappingURL=utils.js.map

package/lib/es/components/icon/icon.js

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { isValidElement, cloneElement } from 'react';
+import './index.css';
 
 const Icon = (props) => {
     const { ref, icon, size = "1.425em", rotate, style, className, ...restProps } = props;
@@ -20,4 +21,3 @@ const Icon = (props) => {
 };
 
 export { Icon as default };
-//# sourceMappingURL=icon.js.map

package/lib/es/components/icon/index.js

@@ -3,4 +3,3 @@ import Icon from './icon.js';
 
 
 export { Icon as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/image/image.js

@@ -4,6 +4,7 @@ import { memo, useRef, useCallback, useEffect, useMemo } from 'react';
 import { useReactive, useIntersectionObserver } from '../../js/hooks.js';
 import usePreview from '../../js/usePreview/index.js';
 import Loading from '../loading/loading.js';
+import './index.css';
 import List from './list.js';
 
 const STATUS_LOADING = "loading";
@@ -92,4 +93,3 @@ const MemoImage = memo(Image);
 MemoImage.List = List;
 
 export { MemoImage as default };
-//# sourceMappingURL=image.js.map

package/lib/es/components/image/index.js

@@ -3,4 +3,3 @@ import MemoImage from './image.js';
 
 
 export { MemoImage as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/image/list.js

@@ -40,4 +40,3 @@ function List(props) {
 }
 
 export { List as default };
-//# sourceMappingURL=list.js.map

package/lib/es/components/input/container.js

@@ -11,4 +11,3 @@ function InputContainer(props) {
 }
 
 export { InputContainer as default };
-//# sourceMappingURL=container.js.map

package/lib/es/components/input/index.js

@@ -3,4 +3,3 @@ import Input from './input.js';
 
 
 export { Input as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/input/input.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { VisibilityRound, VisibilityOffRound } from '@ricons/material';
 import classNames from 'classnames';
 import { useState, useMemo, useEffect } from 'react';
+import '../../css/input.css';
 import Helpericon from '../utils/helpericon/helpericon.js';
 import InputContainer from './container.js';
 import Number from './number.js';
@@ -74,4 +75,3 @@ Input.Number = Number;
 Input.Range = Range;
 
 export { Input as default };
-//# sourceMappingURL=input.js.map

package/lib/es/components/input/number.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { MinusRound, PlusRound, KeyboardDoubleArrowUpRound } from '@ricons/material';
 import classNames from 'classnames';
 import { useState, useEffect } from 'react';
+import '../../css/input.css';
 import { clamp, formatNumber } from '../../js/utils.js';
 import Helpericon from '../utils/helpericon/helpericon.js';
 import InputContainer from './container.js';
@@ -107,4 +108,3 @@ const Number = (props) => {
 };
 
 export { Number as default };
-//# sourceMappingURL=number.js.map

package/lib/es/components/input/range.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { MinusRound, PlusRound, SyncAltRound } from '@ricons/material';
 import classNames from 'classnames';
 import { useState, useEffect } from 'react';
+import '../../css/input.css';
 import { formatNumber, clamp } from '../../js/utils.js';
 import Helpericon from '../utils/helpericon/helpericon.js';
 import InputContainer from './container.js';
@@ -71,4 +72,3 @@ const Range = (props) => {
 };
 
 export { Range as default };
-//# sourceMappingURL=range.js.map

package/lib/es/components/input/textarea.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { useState, useRef, useEffect, useImperativeHandle } from 'react';
+import '../../css/input.css';
 import InputContainer from './container.js';
 
 const Textarea = (props) => {
@@ -53,4 +54,3 @@ const Textarea = (props) => {
 };
 
 export { Textarea as default };
-//# sourceMappingURL=textarea.js.map

package/lib/es/components/list/index.js

@@ -3,4 +3,3 @@ import List from './list.js';
 
 
 export { List as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/list/item.js

@@ -12,4 +12,3 @@ const Item = (props) => {
 };
 
 export { Item as default };
-//# sourceMappingURL=item.js.map

package/lib/es/components/list/list.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { forwardRef, Children, cloneElement } from 'react';
+import './index.css';
 import Item from './item.js';
 
 const List = forwardRef((props, ref) => {
@@ -22,4 +23,3 @@ const List = forwardRef((props, ref) => {
 List.Item = Item;
 
 export { List as default };
-//# sourceMappingURL=list.js.map

package/lib/es/components/loading/index.js

@@ -3,4 +3,3 @@ import Loading from './loading.js';
 
 
 export { Loading as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/loading/loading.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
+import './index.css';
 
 const Loading = (props) => {
     const { icon, text, size, absolute, style, className, ...restProps } = props;
@@ -15,4 +16,3 @@ const Loading = (props) => {
 };
 
 export { Loading as default };
-//# sourceMappingURL=loading.js.map

package/lib/es/components/message/index.js

@@ -3,4 +3,3 @@ import message, { MessageContainer } from './message.js';
 const Message = Object.assign(message, { Container: MessageContainer });
 
 export { MessageContainer, Message as default };
-//# sourceMappingURL=index.js.map

package/lib/es/components/message/message.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { uid } from 'radash';
 import { useRef, useEffect, isValidElement } from 'react';
 import { useReactive } from '../../js/hooks.js';
+import './index.css';
 
 const AlignMap = {
     left: "flex-start",
@@ -227,4 +228,3 @@ if (typeof document !== "undefined") {
 }
 
 export { MessageContainer, message as default };
-//# sourceMappingURL=message.js.map