@laser-ui/components 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.1](https://github.com/laser-ui/laser-ui/compare/v0.4.0...v0.4.1) (2023-12-12)
+
+### Bug Fixes
+
+- **ui:** fix get window size ([c909d89](https://github.com/laser-ui/laser-ui/commit/c909d898d48d715758744d4201888824e1e09af4))
+
+# [0.4.0](https://github.com/laser-ui/laser-ui/compare/v0.3.0...v0.4.0) (2023-12-06)
+
+### Features
+
+- update `vite-plugin-svgr` to **v4** ([5d05979](https://github.com/laser-ui/laser-ui/commit/5d0597973f3f41968bf70542e96eb9318f439328))
+
 # [0.3.0](https://github.com/laser-ui/laser-ui/compare/v0.2.2...v0.3.0) (2023-11-03)
 
 **Note:** Version bump only for package @laser-ui/components

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="//laser-ui.surge.sh/" rel="noopener" target="_blank"><img width="150" src="apps/site/public/logo.png" alt="logo"></a>
+  <a href="//laser-ui.github.io/" rel="noopener" target="_blank"><img width="150" src="apps/site/public/logo.png" alt="logo"></a>
 </p>
 
 <h1 align="center">Laser UI</h1>
@@ -59,7 +59,7 @@ export default function App() {
 
 ## Links
 
-- [laser-ui.surge.sh](//laser-ui.surge.sh)
+- [laser-admin.surge.sh](//laser-admin.surge.sh)
 
 ## Contributing
 

package/accordion/Accordion.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
 import { isNull, isUndefined, nth } from 'lodash';
 import { useId } from 'react';
 import { CLASSES } from './vars';

package/alert/Alert.js

@@ -1,11 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
-import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CheckCircleOutlined from '@material-design-icons/svg/outlined/check_circle.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import HighlightOffOutlined from '@material-design-icons/svg/outlined/highlight_off.svg?react';
+import InfoOutlined from '@material-design-icons/svg/outlined/info.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { isUndefined } from 'lodash';
 import { CLASSES } from './vars';
 import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';

package/cascader/Cascader.js

@@ -2,10 +2,10 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
 import { findNested } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNull, isUndefined } from 'lodash';
 import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CascaderPanel } from './internal/CascaderPanel';

package/cascader/internal/CascaderPanel.js

@@ -2,7 +2,7 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEventCallback } from '@laser-ui/hooks';
 import { scrollIntoViewIfNeeded } from '@laser-ui/utils';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isNumber, isUndefined } from 'lodash';
 import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 import { Checkbox } from '../../checkbox';

package/date-picker/DatePicker.js

@@ -2,9 +2,9 @@ import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useEvent, useEventCallback, useForceUpdate, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CalendarTodayOutlined } from '@material-design-icons/svg/outlined/calendar_today.svg';
-import { ReactComponent as SwapHorizOutlined } from '@material-design-icons/svg/outlined/swap_horiz.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CalendarTodayOutlined from '@material-design-icons/svg/outlined/calendar_today.svg?react';
+import SwapHorizOutlined from '@material-design-icons/svg/outlined/swap_horiz.svg?react';
 import { isArray, isBoolean, isNull, isUndefined } from 'lodash';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { DatePickerPanel } from './internal/DatePickerPanel';

package/date-picker/internal/DatePickerPanel.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useEvent, useRefExtra } from '@laser-ui/hooks';
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
-import { ReactComponent as KeyboardDoubleArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg';
-import { ReactComponent as KeyboardDoubleArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
+import KeyboardDoubleArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg?react';
+import KeyboardDoubleArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg?react';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import dayjs from '../../dayjs';
 import { useTranslation } from '../../hooks';

package/drawer/DrawerHeader.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import { Children } from 'react';
 import { CLASSES } from './vars';
 import { Button } from '../button';

package/dropdown/internal/DropdownSub.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEventCallback } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isUndefined } from 'lodash';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useJSS, useTranslation } from '../../hooks';

package/fab/FabBacktop.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEvent, useIsomorphicLayoutEffect, useRefExtra, useResize } from '@laser-ui/hooks';
 import { scrollTo, toPx } from '@laser-ui/utils';
-import { ReactComponent as VerticalAlignTopOutlined } from '@material-design-icons/svg/outlined/vertical_align_top.svg';
+import VerticalAlignTopOutlined from '@material-design-icons/svg/outlined/vertical_align_top.svg?react';
 import { isString } from 'lodash';
 import { cloneElement, useRef, useState } from 'react';
 import { FabButton } from './FabButton';

package/fab/FabButton.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
+import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
 import { forwardRef } from 'react';
 import { BUTTON_CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';

package/form/FormItem.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CheckCircleFilled } from '@material-design-icons/svg/filled/check_circle.svg';
-import { ReactComponent as ErrorFilled } from '@material-design-icons/svg/filled/error.svg';
-import { ReactComponent as HelpOutlineOutlined } from '@material-design-icons/svg/outlined/help_outline.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CheckCircleFilled from '@material-design-icons/svg/filled/check_circle.svg?react';
+import ErrorFilled from '@material-design-icons/svg/filled/error.svg?react';
+import HelpOutlineOutlined from '@material-design-icons/svg/outlined/help_outline.svg?react';
 import { isBoolean, isFunction, isNull, isNumber, isString } from 'lodash';
 import { useContext, useId, useRef } from 'react';
 import { FormError } from './internal/FormError';

package/image/ImagePreview.js

@@ -2,12 +2,12 @@ import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEvent, useImmer, useRefExtra } from '@laser-ui/hooks';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
-import { ReactComponent as Rotate90DegreesCwOutlined } from '@material-design-icons/svg/outlined/rotate_90_degrees_cw.svg';
-import { ReactComponent as ZoomInOutlined } from '@material-design-icons/svg/outlined/zoom_in.svg';
-import { ReactComponent as ZoomOutOutlined } from '@material-design-icons/svg/outlined/zoom_out.svg';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
+import Rotate90DegreesCwOutlined from '@material-design-icons/svg/outlined/rotate_90_degrees_cw.svg?react';
+import ZoomInOutlined from '@material-design-icons/svg/outlined/zoom_in.svg?react';
+import ZoomOutOutlined from '@material-design-icons/svg/outlined/zoom_out.svg?react';
 import { isNull, isUndefined } from 'lodash';
 import { useRef, useState } from 'react';
 import { PREVIEW_CLASSES } from './vars';

package/input/Input.js

@@ -2,9 +2,9 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useForkRef } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as VisibilityOutlined } from '@material-design-icons/svg/outlined/visibility.svg';
-import { ReactComponent as VisibilityOffOutlined } from '@material-design-icons/svg/outlined/visibility_off.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import VisibilityOutlined from '@material-design-icons/svg/outlined/visibility.svg?react';
+import VisibilityOffOutlined from '@material-design-icons/svg/outlined/visibility_off.svg?react';
 import { useRef } from 'react';
 import { InputNumber } from './InputNumber';
 import { CLASSES } from './vars';

package/input/InputNumber.js

@@ -2,9 +2,9 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useEvent, useForceUpdate, useForkRef, useRefExtra } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
-import { ReactComponent as KeyboardArrowUpOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_up.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
+import KeyboardArrowUpOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_up.svg?react';
 import { isNull, isUndefined } from 'lodash';
 import { useRef } from 'react';
 import { CLASSES } from './vars';

package/modal/ModalAlert.js

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
-import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
-import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CheckCircleOutlined from '@material-design-icons/svg/outlined/check_circle.svg?react';
+import HighlightOffOutlined from '@material-design-icons/svg/outlined/highlight_off.svg?react';
+import InfoOutlined from '@material-design-icons/svg/outlined/info.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';
 import { Icon } from '../icon';

package/modal/ModalHeader.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import { Children } from 'react';
 import { CLASSES } from './vars';
 import { Button } from '../button';

package/notification/Notification.js

@@ -2,11 +2,11 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useMount } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
-import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CheckCircleOutlined from '@material-design-icons/svg/outlined/check_circle.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import HighlightOffOutlined from '@material-design-icons/svg/outlined/highlight_off.svg?react';
+import InfoOutlined from '@material-design-icons/svg/outlined/info.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { isUndefined } from 'lodash';
 import { useId, useRef } from 'react';
 import { CLASSES, TTANSITION_DURING } from './vars';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -26,8 +26,8 @@
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@laser-ui/hooks": "0.3.0",
-    "@laser-ui/utils": "0.3.0",
+    "@laser-ui/hooks": "0.4.1",
+    "@laser-ui/utils": "0.4.1",
     "@material-design-icons/svg": "^0.14.12",
     "jss": "^10.10.0",
     "jss-preset-default": "^10.10.0",
@@ -45,5 +45,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "4fe0b462c868d1b30b645af80d9e9690f3cefb5c"
+  "gitHead": "83ceac5bb361608b2886a6697fc0943d49f520cc"
 }

package/pagination/Pagination.js

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
-import { ReactComponent as KeyboardDoubleArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg';
-import { ReactComponent as KeyboardDoubleArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg';
-import { ReactComponent as MoreHorizOutlined } from '@material-design-icons/svg/outlined/more_horiz.svg';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
+import KeyboardDoubleArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg?react';
+import KeyboardDoubleArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg?react';
+import MoreHorizOutlined from '@material-design-icons/svg/outlined/more_horiz.svg?react';
 import { isNull, isNumber } from 'lodash';
 import { Fragment, cloneElement, useRef, useState } from 'react';
 import { buttonProps } from './utils';

package/popover/PopoverHeader.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import { Children } from 'react';
 import { CLASSES } from './vars';
 import { Button } from '../button';

package/progress/Progress.js

@@ -1,12 +1,12 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CheckCircleFilled } from '@material-design-icons/svg/filled/check_circle.svg';
-import { ReactComponent as WarningFilled } from '@material-design-icons/svg/filled/warning.svg';
-import { ReactComponent as CheckOutlined } from '@material-design-icons/svg/outlined/check.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CheckCircleFilled from '@material-design-icons/svg/filled/check_circle.svg?react';
+import WarningFilled from '@material-design-icons/svg/filled/warning.svg?react';
+import CheckOutlined from '@material-design-icons/svg/outlined/check.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { isUndefined } from 'lodash';
 import { useId } from 'react';
 import { CLASSES } from './vars';

package/rating/Rating.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as StarFilled } from '@material-design-icons/svg/filled/star.svg';
+import StarFilled from '@material-design-icons/svg/filled/star.svg?react';
 import { isFunction } from 'lodash';
 import { useId, useState } from 'react';
 import { RatingStar } from './internal/RatingStar';

package/root/Root.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEvent, useRefExtra } from '@laser-ui/hooks';
 import { isString, set } from 'lodash';
 import { useStore } from 'rcl-store';
@@ -7,10 +7,32 @@ import { ROOT_DATA, RootContext, Store } from './vars';
 import dayjs from '../dayjs';
 import { Portal } from '../internal/portal';
 import resources from '../resources.json';
+function WindowSize() {
+    const windowSizeRef = useRef(null);
+    useEffect(() => {
+        if (windowSizeRef.current) {
+            const observer = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                ROOT_DATA.windowSize = { width: entry.contentRect.width, height: entry.contentRect.height };
+            });
+            observer.observe(windowSizeRef.current);
+            return () => {
+                observer.disconnect();
+            };
+        }
+    });
+    return (_jsx("div", { ref: windowSizeRef, style: {
+            position: 'fixed',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            pointerEvents: 'none',
+        } }));
+}
 export function Root(props) {
     const { context: contextProp, children } = props;
     const windowRef = useRefExtra(() => window);
-    const windowSizeRef = useRef(null);
     const [{ dialogs }] = useStore(Store, ['dialogs']);
     useEvent(windowRef, 'click', (e) => {
         // Check if click by keydown
@@ -25,18 +47,6 @@ export function Root(props) {
             }
         }
     }, { capture: true });
-    useEffect(() => {
-        if (windowSizeRef.current) {
-            const observer = new ResizeObserver(() => {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                ROOT_DATA.windowSize = { width: windowSizeRef.current.clientWidth, height: windowSizeRef.current.clientHeight };
-            });
-            observer.observe(windowSizeRef.current);
-            return () => {
-                observer.disconnect();
-            };
-        }
-    });
     const context = useMemo(() => {
         var _a, _b;
         const { i18n } = contextProp !== null && contextProp !== void 0 ? contextProp : {};
@@ -74,12 +84,5 @@ export function Root(props) {
         default:
             break;
     }
-    return (_jsxs(RootContext.Provider, { value: context, children: [children, dialogs.map(({ type, key, props }) => createElement(type, Object.assign({ key }, props))), _jsx(Portal, { selector: () => document.body, children: _jsx("div", { ref: windowSizeRef, style: {
-                        position: 'fixed',
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                        left: 0,
-                        pointerEvents: 'none',
-                    } }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(RootContext.Provider, { value: context, children: [children, dialogs.map(({ type, key, props }) => createElement(type, Object.assign({ key }, props)))] }), _jsx(Portal, { selector: () => document.body, children: _jsx(WindowSize, {}) })] }));
 }

package/select/Select.js

@@ -3,11 +3,11 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
 import { findNested, scrollIntoViewIfNeeded } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNull, isNumber, isUndefined } from 'lodash';
 import { createElement, forwardRef, useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CLASSES, IS_CREATED } from './vars';

package/slides/Slides.js

@@ -2,8 +2,8 @@ import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { useAsync, useEvent, useRefExtra } from '@laser-ui/hooks';
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isBoolean, isNumber, isUndefined, nth } from 'lodash';
 import { useEffect, useId, useRef, useState } from 'react';
 import { CLASSES } from './vars';

package/stepper/Stepper.js

@@ -2,8 +2,8 @@ import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckOutlined } from '@material-design-icons/svg/outlined/check.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import CheckOutlined from '@material-design-icons/svg/outlined/check.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import { isNumber, isUndefined } from 'lodash';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';

package/table/TableFilter.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { CLASSES } from './vars';
 import { Button } from '../button';
 import { useComponentProps, useStyled, useTranslation } from '../hooks';

package/tabs/Tabs.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { useEventCallback, useIsomorphicLayoutEffect, useResize } from '@laser-ui/hooks';
 import { checkScrollEnd, findNested } from '@laser-ui/utils';
-import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as MoreHorizOutlined } from '@material-design-icons/svg/outlined/more_horiz.svg';
+import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import MoreHorizOutlined from '@material-design-icons/svg/outlined/more_horiz.svg?react';
 import { isUndefined, nth } from 'lodash';
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
 import { CLASSES } from './vars';

package/time-picker/TimePicker.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useEvent, useEventCallback, useForceUpdate, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as AccessTimeOutlined } from '@material-design-icons/svg/outlined/access_time.svg';
-import { ReactComponent as SwapHorizOutlined } from '@material-design-icons/svg/outlined/swap_horiz.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import AccessTimeOutlined from '@material-design-icons/svg/outlined/access_time.svg?react';
+import SwapHorizOutlined from '@material-design-icons/svg/outlined/swap_horiz.svg?react';
 import { isNull, isUndefined } from 'lodash';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { TimePickerPanel } from './internal/TimePickerPanel';

package/toast/Toast.js

@@ -2,11 +2,11 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useMount } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
-import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CheckCircleOutlined from '@material-design-icons/svg/outlined/check_circle.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import HighlightOffOutlined from '@material-design-icons/svg/outlined/highlight_off.svg?react';
+import InfoOutlined from '@material-design-icons/svg/outlined/info.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { isUndefined } from 'lodash';
 import { useId, useRef } from 'react';
 import { CLASSES, TTANSITION_DURING } from './vars';

package/transfer/Transfer.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isUndefined } from 'lodash';
 import { useMemo } from 'react';
 import { TransferPanel } from './internal/TransferPanel';

package/transfer/internal/TransferPanel.js

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNumber } from 'lodash';
 import { useCallback, useId, useMemo, useRef } from 'react';
 import { Checkbox } from '../../checkbox';

package/tree/internal/TreePanel.js

@@ -3,9 +3,9 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEventCallback } from '@laser-ui/hooks';
 import { scrollIntoViewIfNeeded } from '@laser-ui/utils';
-import { ReactComponent as AddBoxOutlined } from '@material-design-icons/svg/outlined/add_box.svg';
-import { ReactComponent as ArrowRightOutlined } from '@material-design-icons/svg/outlined/arrow_right.svg';
-import { ReactComponent as IndeterminateCheckBoxOutlined } from '@material-design-icons/svg/outlined/indeterminate_check_box.svg';
+import AddBoxOutlined from '@material-design-icons/svg/outlined/add_box.svg?react';
+import ArrowRightOutlined from '@material-design-icons/svg/outlined/arrow_right.svg?react';
+import IndeterminateCheckBoxOutlined from '@material-design-icons/svg/outlined/indeterminate_check_box.svg?react';
 import { isUndefined } from 'lodash';
 import { cloneElement, forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 import { Checkbox } from '../../checkbox';

package/tree-select/TreeSelect.js

@@ -2,10 +2,10 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
 import { findNested } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNull, isNumber, isUndefined } from 'lodash';
 import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { TreeSelectSearchPanel } from './internal/TreeSelectSearchPanel';

package/upload/UploadAction.js

@@ -1,8 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { saveFile } from '@laser-ui/utils';
-import { ReactComponent as DeleteOutlineOutlined } from '@material-design-icons/svg/outlined/delete_outline.svg';
-import { ReactComponent as FileDownloadOutlined } from '@material-design-icons/svg/outlined/file_download.svg';
+import DeleteOutlineOutlined from '@material-design-icons/svg/outlined/delete_outline.svg?react';
+import FileDownloadOutlined from '@material-design-icons/svg/outlined/file_download.svg?react';
 import { isUndefined } from 'lodash';
 import { forwardRef } from 'react';
 import { ACTION_CLASSES } from './vars';

package/upload/UploadButton.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
-import { ReactComponent as InsertDriveFileTwoTone } from '@material-design-icons/svg/two-tone/insert_drive_file.svg';
+import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
+import InsertDriveFileTwoTone from '@material-design-icons/svg/two-tone/insert_drive_file.svg?react';
 import { Children, cloneElement, forwardRef } from 'react';
 import { UploadAction } from './UploadAction';
 import { UploadPreviewAction } from './UploadPreviewAction';

package/upload/UploadList.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImmer } from '@laser-ui/hooks';
-import { ReactComponent as AttachFileOutlined } from '@material-design-icons/svg/outlined/attach_file.svg';
+import AttachFileOutlined from '@material-design-icons/svg/outlined/attach_file.svg?react';
 import { isNumber, isUndefined } from 'lodash';
 import { Children, cloneElement, useContext } from 'react';
 import { UploadAction } from './UploadAction';

package/upload/UploadPicture.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImmer } from '@laser-ui/hooks';
-import { ReactComponent as InsertDriveFileTwoTone } from '@material-design-icons/svg/two-tone/insert_drive_file.svg';
+import InsertDriveFileTwoTone from '@material-design-icons/svg/two-tone/insert_drive_file.svg?react';
 import { isNumber } from 'lodash';
 import { Children, cloneElement, useContext } from 'react';
 import { UploadAction } from './UploadAction';

package/upload/UploadPictureList.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImmer } from '@laser-ui/hooks';
-import { ReactComponent as InsertDriveFileTwoTone } from '@material-design-icons/svg/two-tone/insert_drive_file.svg';
+import InsertDriveFileTwoTone from '@material-design-icons/svg/two-tone/insert_drive_file.svg?react';
 import { isNumber, isUndefined } from 'lodash';
 import { Children, cloneElement, useContext } from 'react';
 import { UploadAction } from './UploadAction';

package/upload/UploadPreviewAction.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ReactComponent as VisibilityOutlinedIcon } from '@material-design-icons/svg/outlined/visibility.svg';
+import VisibilityOutlinedIcon from '@material-design-icons/svg/outlined/visibility.svg?react';
 import { isUndefined } from 'lodash';
 import { forwardRef } from 'react';
 import { ACTION_CLASSES } from './vars';