@canvas-components/react-components 0.1.4 → 0.1.5

package/dist/index.cjs

@@ -1,9 +1,29 @@
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
   if (!css || typeof document === "undefined") return;
@@ -39,7 +59,7 @@ var REACT_COMPONENT_PREFIX = "canvas-react";
 
 // src/components/checkbox/style.css
 styleInject('@import "../../styles/variables.css";\n.canvas-react-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  cursor: pointer;\n  user-select: none;\n}\n.canvas-react-checkbox-disabled {\n  opacity: 0.56;\n  cursor: not-allowed;\n}\n.canvas-react-checkbox-input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n.canvas-react-checkbox-box {\n  position: relative;\n  flex: none;\n  width: 16px;\n  height: 16px;\n  box-sizing: border-box;\n  border: 1px solid var(--canvas-react-color-border-strong);\n  border-radius: 4px;\n  background: var(--canvas-react-color-bg);\n  transition:\n    border-color 0.2s ease,\n    background-color 0.2s ease,\n    box-shadow 0.2s ease;\n}\n.canvas-react-checkbox:hover .canvas-react-checkbox-box {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-checkbox-input:focus-visible + .canvas-react-checkbox-box {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-checkbox-checked .canvas-react-checkbox-box,\n.canvas-react-checkbox-indeterminate .canvas-react-checkbox-box {\n  border-color: var(--canvas-react-color-primary);\n  background: var(--canvas-react-color-primary);\n}\n.canvas-react-checkbox-box::after {\n  position: absolute;\n  content: "";\n  opacity: 0;\n  box-sizing: border-box;\n  transform: scale(0);\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n.canvas-react-checkbox-checked .canvas-react-checkbox-box::after {\n  top: 50%;\n  left: 22%;\n  width: 5.5px;\n  height: 9px;\n  border-right: 2px solid #fff;\n  border-bottom: 2px solid #fff;\n  transform: translateY(-58%) rotate(45deg) scale(1);\n  transform-origin: center;\n  opacity: 1;\n}\n.canvas-react-checkbox-indeterminate .canvas-react-checkbox-box::after {\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  border-bottom: 2px solid #fff;\n  transform: translate(-50%, -50%);\n  opacity: 1;\n}\n.canvas-react-checkbox-label {\n  min-width: 0;\n}\n');
-var ReactCheckbox = react.forwardRef(
+var ReactCheckbox = React.forwardRef(
   function ReactCheckbox2(props, ref) {
     const {
       checked,
@@ -50,14 +70,14 @@ var ReactCheckbox = react.forwardRef(
       style,
       ...restProps
     } = props;
-    const inputRef = react.useRef(null);
-    react.useEffect(() => {
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
       if (!inputRef.current) {
         return;
       }
       inputRef.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    react.useImperativeHandle(ref, () => ({
+    React.useImperativeHandle(ref, () => ({
       focus: () => inputRef.current?.focus(),
       blur: () => inputRef.current?.blur(),
       input: inputRef.current
@@ -95,7 +115,7 @@ var ReactCheckbox = react.forwardRef(
 
 // src/components/input/style.css
 styleInject('@import "../../styles/variables.css";\n.canvas-react-input-affix-wrapper {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-input-affix-wrapper:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-affix-wrapper:focus-within {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-affix-wrapper-disabled {\n  background: #fafafa;\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-input {\n  box-sizing: border-box;\n  flex: 1 1 auto;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n  border: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  outline: none;\n}\n.canvas-react-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-input-suffix {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding-right: var(--canvas-react-control-padding-inline, 11px);\n}\n.canvas-react-input-clear {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: #9ca3af;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transition:\n    color 0.2s ease,\n    opacity 0.2s ease,\n    transform 0.18s ease;\n}\n.canvas-react-input-affix-wrapper:hover .canvas-react-input-clear,\n.canvas-react-input-affix-wrapper:focus-within .canvas-react-input-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-input-clear:hover {\n  color: #6b7280;\n  transform: rotate(90deg);\n}\n.canvas-react-input-clear-icon,\n.canvas-react-input-clear-icon::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 1.25px;\n  margin-top: -0.625px;\n  margin-left: -4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-input-clear-icon {\n  transform: rotate(45deg);\n}\n.canvas-react-input-clear-icon::before {\n  transform: rotate(90deg);\n}\n');
-var ReactInput = react.forwardRef(
+var ReactInput = React.forwardRef(
   function ReactInput2(props, ref) {
     const {
       allowClear = true,
@@ -179,17 +199,17 @@ var ReactInput = react.forwardRef(
 var DEFAULT_CONTENT_SCALE = {
   scale: 1
 };
-var ReactContentScaleContext = react.createContext(DEFAULT_CONTENT_SCALE);
+var ReactContentScaleContext = React.createContext(DEFAULT_CONTENT_SCALE);
 function ReactContentScaleProvider(props) {
   const { children, scale = 1 } = props;
-  const value = react.useMemo(() => {
+  const value = React.useMemo(() => {
     const nextScale = typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : 1;
     return { scale: nextScale };
   }, [scale]);
   return /* @__PURE__ */ jsxRuntime.jsx(ReactContentScaleContext.Provider, { value, children });
 }
 function useReactContentScale() {
-  return react.useContext(ReactContentScaleContext);
+  return React.useContext(ReactContentScaleContext);
 }
 function toContentLayoutSize(size, scale) {
   const nextScale = typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : 1;
@@ -207,15 +227,15 @@ function useReactTransition(options) {
   } = options;
   const enterDuration = resolveDuration(duration, "enter");
   const leaveDuration = resolveDuration(duration, "leave");
-  const previousShowRef = react.useRef(show);
-  const [rendered, setRendered] = react.useState(show);
-  const [phase, setPhase] = react.useState(() => {
+  const previousShowRef = React.useRef(show);
+  const [rendered, setRendered] = React.useState(show);
+  const [phase, setPhase] = React.useState(() => {
     if (!show) {
       return "leave-to";
     }
     return appear ? "enter-from" : "entered";
   });
-  react.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (previousShowRef.current === show) {
       return;
     }
@@ -227,7 +247,7 @@ function useReactTransition(options) {
     }
     setPhase("leave-from");
   }, [show]);
-  react.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     let firstFrameId = null;
     let secondFrameId = null;
     let timerId = null;
@@ -308,9 +328,9 @@ function ReactPopup(props) {
     show: open
   });
   const { rendered } = transition;
-  const [position, setPosition] = react.useState(null);
-  const surfaceRef = react.useRef(null);
-  react.useLayoutEffect(() => {
+  const [position, setPosition] = React.useState(null);
+  const surfaceRef = React.useRef(null);
+  React.useLayoutEffect(() => {
     if (!rendered) {
       return;
     }
@@ -362,7 +382,7 @@ function ReactPopup(props) {
     rendered,
     placement
   ]);
-  react.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (!rendered || !position || !surfaceRef.current) {
       return;
     }
@@ -406,7 +426,7 @@ function ReactPopup(props) {
     placement,
     position
   ]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!rendered) {
       return;
     }
@@ -621,7 +641,7 @@ var PRESET_COLORS = [
   "#8c8c8c",
   "#ffffff"
 ];
-var ReactColorPicker = react.forwardRef(function ReactColorPicker2(props, ref) {
+var ReactColorPicker = React.forwardRef(function ReactColorPicker2(props, ref) {
   const {
     autoFocus,
     className,
@@ -638,20 +658,20 @@ var ReactColorPicker = react.forwardRef(function ReactColorPicker2(props, ref) {
     showArrow = true,
     ...restProps
   } = props;
-  const triggerRef = react.useRef(null);
-  const inputRef = react.useRef(null);
-  const popupRef = react.useRef(null);
+  const triggerRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const popupRef = React.useRef(null);
   const resolvedValue = normalizeHexColor(value) ?? DEFAULT_COLOR;
-  const [open, setOpen] = react.useState(false);
-  const [draftValue, setDraftValue] = react.useState(resolvedValue);
-  const [hexText, setHexText] = react.useState(resolvedValue.toUpperCase());
-  const hsv = react.useMemo(() => hexToHsv(draftValue), [draftValue]);
-  react.useImperativeHandle(ref, () => inputRef.current);
-  react.useEffect(() => {
+  const [open, setOpen] = React.useState(false);
+  const [draftValue, setDraftValue] = React.useState(resolvedValue);
+  const [hexText, setHexText] = React.useState(resolvedValue.toUpperCase());
+  const hsv = React.useMemo(() => hexToHsv(draftValue), [draftValue]);
+  React.useImperativeHandle(ref, () => inputRef.current);
+  React.useEffect(() => {
     setDraftValue(resolvedValue);
     setHexText(resolvedValue.toUpperCase());
   }, [resolvedValue]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (autoFocus) {
       inputRef.current?.focus();
     }
@@ -905,7 +925,7 @@ var MONTHS = Array.from(
   (_, index) => String(index + 1).padStart(2, "0")
 );
 var WEEKDAY_LABELS = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
-var ReactDatePicker = react.forwardRef(
+var ReactDatePicker = React.forwardRef(
   function ReactDatePicker2(props, ref) {
     const {
       autoFocus,
@@ -923,47 +943,47 @@ var ReactDatePicker = react.forwardRef(
       value,
       ...restProps
     } = props;
-    const triggerRef = react.useRef(null);
-    const inputRef = react.useRef(null);
-    const popupRef = react.useRef(null);
-    const skipFocusOpenRef = react.useRef(false);
-    const [open, setOpen] = react.useState(false);
-    const [mode, setMode] = react.useState("date");
-    const parsedValue = react.useMemo(() => parseDateValue(value), [value]);
-    const [panelDate, setPanelDate] = react.useState(() => ({
+    const triggerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const popupRef = React.useRef(null);
+    const skipFocusOpenRef = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const [mode, setMode] = React.useState("date");
+    const parsedValue = React.useMemo(() => parseDateValue(value), [value]);
+    const [panelDate, setPanelDate] = React.useState(() => ({
       day: parsedValue?.day ?? 1,
       month: parsedValue?.month ?? (/* @__PURE__ */ new Date()).getMonth() + 1,
       year: parsedValue?.year ?? (/* @__PURE__ */ new Date()).getFullYear()
     }));
-    const yearPanelStart = react.useMemo(
+    const yearPanelStart = React.useMemo(
       () => resolveDecadeStart(panelDate.year),
       [panelDate.year]
     );
-    const decadePanelStart = react.useMemo(
+    const decadePanelStart = React.useMemo(
       () => Math.floor(yearPanelStart / 100) * 100,
       [yearPanelStart]
     );
-    const yearItems = react.useMemo(
+    const yearItems = React.useMemo(
       () => Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index),
       [yearPanelStart]
     );
-    const decadeItems = react.useMemo(
+    const decadeItems = React.useMemo(
       () => Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10),
       [decadePanelStart]
     );
-    const calendarDays = react.useMemo(
+    const calendarDays = React.useMemo(
       () => buildCalendarDays(panelDate.year, panelDate.month),
       [panelDate.month, panelDate.year]
     );
     const displayValue = parsedValue == null ? "" : `${parsedValue.year}-${String(parsedValue.month).padStart(2, "0")}-${String(parsedValue.day).padStart(2, "0")}`;
     const showClear = allowClear && !disabled && displayValue.length > 0;
-    react.useImperativeHandle(ref, () => inputRef.current);
-    react.useEffect(() => {
+    React.useImperativeHandle(ref, () => inputRef.current);
+    React.useEffect(() => {
       if (autoFocus) {
         inputRef.current?.focus();
       }
     }, [autoFocus]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (!open) {
         return;
       }
@@ -1420,7 +1440,7 @@ function resolveDecadeStart(year) {
 // src/components/date-range/style.css
 styleInject('@import "../../styles/variables.css";\n@import "../date/style.css";\n@import "../time/style.css";\n.canvas-react-date-range-wrap {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n}\n.canvas-react-date-range {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  cursor: pointer;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-date-range-control {\n  position: relative;\n}\n.canvas-react-date-range:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-date-range-open {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-date-range-disabled {\n  color: #9ca3af;\n  background: #fafafa;\n  cursor: not-allowed;\n}\n.canvas-react-date-range-input-wrap {\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: transparent;\n  box-shadow: none;\n}\n.canvas-react-date-range .canvas-react-input-affix-wrapper {\n  height: 100%;\n  min-height: 0;\n}\n.canvas-react-date-range-input-wrap:hover,\n.canvas-react-date-range-input-wrap:focus-within {\n  border-color: transparent;\n  box-shadow: none;\n}\n.canvas-react-date-range-hidden-input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.canvas-react-date-range-input {\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  line-height: 1;\n}\n.canvas-react-date-range-values {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  height: 100%;\n}\n.canvas-react-date-range-value {\n  position: relative;\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: 1;\n  text-align: left;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.canvas-react-date-range-value::after {\n  position: absolute;\n  right: 0;\n  bottom: -1px;\n  left: 0;\n  height: 2px;\n  border-radius: 999px;\n  background: transparent;\n  content: "";\n  transition: background-color 0.18s ease;\n}\n.canvas-react-date-range-value-active::after {\n  background: var(--canvas-react-color-primary);\n}\n.canvas-react-date-range-value-text {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  height: auto;\n  padding: 0;\n  border: none;\n  outline: none;\n  overflow: hidden;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: normal;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n}\n@supports (height: 1lh) {\n  .canvas-react-date-range-value-text {\n    height: 1lh;\n  }\n}\n.canvas-react-date-range-value-text::placeholder {\n  color: inherit;\n  opacity: 1;\n}\n.canvas-react-date-range-separator {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  padding: 0 8px;\n  color: var(--canvas-react-color-text-muted);\n  font-size: 12px;\n}\n.canvas-react-date-range-actions {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  min-width: 12px;\n  height: 1em;\n  min-height: 12px;\n  margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-date-range-arrow {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0.5em;\n  height: 0.5em;\n  min-width: 6px;\n  min-height: 6px;\n  border-right: 1.5px solid var(--canvas-react-color-text-muted);\n  border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n  transform: translate(-50%, -58%) rotate(45deg);\n  transition:\n    opacity 0.18s ease,\n    transform 0.18s ease,\n    border-color 0.18s ease;\n}\n.canvas-react-date-range:hover .canvas-react-date-range-arrow,\n.canvas-react-date-range-open .canvas-react-date-range-arrow {\n  border-color: #6b7280;\n}\n.canvas-react-date-range-arrow-open {\n  border-color: #6b7280;\n  transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-date-range-clear {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: #9ca3af;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transform: translate(-50%, -50%) rotate(0deg);\n  transition:\n    color 0.2s ease,\n    opacity 0.2s ease,\n    transform 0.18s ease;\n}\n.canvas-react-date-range:hover .canvas-react-date-range-clear,\n.canvas-react-date-range-open .canvas-react-date-range-clear,\n.canvas-react-date-range:focus-within .canvas-react-date-range-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-date-range-clear-icon,\n.canvas-react-date-range-clear-icon::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 1.25px;\n  margin-top: -0.625px;\n  margin-left: -4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-date-range-clear-icon {\n  transform: rotate(45deg);\n}\n.canvas-react-date-range-clear-icon::before {\n  transform: rotate(90deg);\n}\n.canvas-react-date-range-dropdown {\n  padding: 4px;\n}\n.canvas-react-date-range-panel {\n  display: flex;\n  flex-direction: column;\n  height: 400px;\n  box-sizing: border-box;\n}\n.canvas-react-date-range-calendars {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.canvas-react-date-range-calendar {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n}\n.canvas-react-date-range-calendar + .canvas-react-date-range-calendar {\n  border-left: 1px solid var(--canvas-react-color-split, #f0f0f0);\n}\n.canvas-react-date-range-calendar .canvas-react-year-title {\n  cursor: default;\n}\n.canvas-react-date-range-calendar .canvas-react-year-nav:disabled {\n  cursor: default;\n  opacity: 0;\n}\n.canvas-react-date-range-calendar .canvas-react-date-grid {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.canvas-react-date-range-cell {\n  position: relative;\n  border-radius: 0;\n}\n.canvas-react-date-range-cell.canvas-react-year-cell-selected {\n  background: rgba(22, 119, 255, 0.12);\n  color: var(--canvas-react-color-primary);\n  font-weight: 600;\n}\n.canvas-react-date-range-cell::before {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: transparent;\n  content: "";\n}\n.canvas-react-date-range-cell-in-range {\n  background: rgba(22, 119, 255, 0.12);\n}\n.canvas-react-date-range-cell-in-range::before {\n  background: transparent;\n}\n.canvas-react-date-range-cell-range-start {\n  border-top-left-radius: var(--canvas-react-radius-sm);\n  border-bottom-left-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-start::before {\n  left: 0;\n}\n.canvas-react-date-range-cell-range-end {\n  border-top-right-radius: var(--canvas-react-radius-sm);\n  border-bottom-right-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-end::before {\n  right: 0;\n}\n.canvas-react-date-range-cell-range-start.canvas-react-date-range-cell-range-end {\n  border-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-start.canvas-react-date-range-cell-range-end::before {\n  left: 0;\n  right: 0;\n}\n.canvas-react-date-range-cell-text {\n  position: relative;\n  z-index: 1;\n}\n.canvas-react-date-range-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 8px 4px 4px;\n  border-top: 1px solid var(--canvas-react-color-border);\n}\n');
 var WEEKDAY_LABELS2 = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
-var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props, ref) {
+var ReactDateRangePicker = React.forwardRef(function ReactDateRangePicker2(props, ref) {
   const {
     autoFocus,
     className,
@@ -1438,37 +1458,37 @@ var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props
     value,
     ...restProps
   } = props;
-  const triggerRef = react.useRef(null);
-  const startInputRef = react.useRef(null);
-  const endInputRef = react.useRef(null);
-  const popupRef = react.useRef(null);
-  const skipFocusOpenRef = react.useRef(false);
-  const [open, setOpen] = react.useState(false);
-  const [activePart, setActivePart] = react.useState("start");
-  const [draftRange, setDraftRange] = react.useState(
+  const triggerRef = React.useRef(null);
+  const startInputRef = React.useRef(null);
+  const endInputRef = React.useRef(null);
+  const popupRef = React.useRef(null);
+  const skipFocusOpenRef = React.useRef(false);
+  const [open, setOpen] = React.useState(false);
+  const [activePart, setActivePart] = React.useState("start");
+  const [draftRange, setDraftRange] = React.useState(
     () => parseDateRangeValue(value)
   );
-  const [hoverDate, setHoverDate] = react.useState(null);
-  const [leftPanel, setLeftPanel] = react.useState(
+  const [hoverDate, setHoverDate] = React.useState(null);
+  const [leftPanel, setLeftPanel] = React.useState(
     () => resolveInitialPanelMonth(parseDateRangeValue(value))
   );
-  const rightPanel = react.useMemo(() => shiftMonth2(leftPanel, 1), [leftPanel]);
-  const leftCalendarDays = react.useMemo(
+  const rightPanel = React.useMemo(() => shiftMonth2(leftPanel, 1), [leftPanel]);
+  const leftCalendarDays = React.useMemo(
     () => buildCalendarDays2(leftPanel.year, leftPanel.month),
     [leftPanel.month, leftPanel.year]
   );
-  const rightCalendarDays = react.useMemo(
+  const rightCalendarDays = React.useMemo(
     () => buildCalendarDays2(rightPanel.year, rightPanel.month),
     [rightPanel.month, rightPanel.year]
   );
   const showClear = allowClear && !disabled && (draftRange.start.length > 0 || draftRange.end.length > 0);
-  react.useImperativeHandle(ref, () => startInputRef.current);
-  react.useEffect(() => {
+  React.useImperativeHandle(ref, () => startInputRef.current);
+  React.useEffect(() => {
     if (autoFocus) {
       startInputRef.current?.focus();
     }
   }, [autoFocus]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const nextRange = parseDateRangeValue(value);
     setDraftRange(nextRange);
     setLeftPanel(resolveInitialPanelMonth(nextRange));
@@ -2155,9 +2175,9 @@ function TimeSelectionPanel(props) {
 }
 function TimeColumn(props) {
   const { onSelect, options, selectedValue } = props;
-  const listRef = react.useRef(null);
-  const scrollTimerRef = react.useRef(null);
-  const ignoreScrollRef = react.useRef(false);
+  const listRef = React.useRef(null);
+  const scrollTimerRef = React.useRef(null);
+  const ignoreScrollRef = React.useRef(false);
   const scrollToValue = (nextValue, behavior) => {
     const listElement = listRef.current;
     if (!listElement) {
@@ -2194,14 +2214,14 @@ function TimeColumn(props) {
       ignoreScrollRef.current = false;
     }, behavior === "smooth" ? 180 : 120);
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       if (scrollTimerRef.current != null) {
         window.clearTimeout(scrollTimerRef.current);
       }
     };
   }, []);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const listElement = listRef.current;
     if (!listElement) {
       return;
@@ -2322,7 +2342,7 @@ var MONTHS2 = Array.from(
   (_, index) => String(index + 1).padStart(2, "0")
 );
 var WEEKDAY_LABELS3 = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
-var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props, ref) {
+var ReactDateTimePicker = React.forwardRef(function ReactDateTimePicker2(props, ref) {
   const {
     autoFocus,
     className,
@@ -2339,45 +2359,45 @@ var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props,
     value,
     ...restProps
   } = props;
-  const triggerRef = react.useRef(null);
-  const inputRef = react.useRef(null);
-  const popupRef = react.useRef(null);
-  const skipFocusOpenRef = react.useRef(false);
-  const [open, setOpen] = react.useState(false);
-  const [mode, setMode] = react.useState("date");
-  const parsedValue = react.useMemo(() => parseDateTimeValue(value), [value]);
-  const [draftDateTime, setDraftDateTime] = react.useState(
+  const triggerRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const popupRef = React.useRef(null);
+  const skipFocusOpenRef = React.useRef(false);
+  const [open, setOpen] = React.useState(false);
+  const [mode, setMode] = React.useState("date");
+  const parsedValue = React.useMemo(() => parseDateTimeValue(value), [value]);
+  const [draftDateTime, setDraftDateTime] = React.useState(
     () => createDraftDateTime(parsedValue)
   );
-  const yearPanelStart = react.useMemo(
+  const yearPanelStart = React.useMemo(
     () => resolveDecadeStart2(draftDateTime.year),
     [draftDateTime.year]
   );
-  const decadePanelStart = react.useMemo(
+  const decadePanelStart = React.useMemo(
     () => Math.floor(yearPanelStart / 100) * 100,
     [yearPanelStart]
   );
-  const yearItems = react.useMemo(
+  const yearItems = React.useMemo(
     () => Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index),
     [yearPanelStart]
   );
-  const decadeItems = react.useMemo(
+  const decadeItems = React.useMemo(
     () => Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10),
     [decadePanelStart]
   );
-  const calendarDays = react.useMemo(
+  const calendarDays = React.useMemo(
     () => buildCalendarDays3(draftDateTime.year, draftDateTime.month),
     [draftDateTime.month, draftDateTime.year]
   );
   const displayValue = parsedValue == null ? "" : `${formatDateValue(parsedValue)} ${formatTimeValue(parsedValue)}`;
   const showClear = allowClear && !disabled && displayValue.length > 0;
-  react.useImperativeHandle(ref, () => inputRef.current);
-  react.useEffect(() => {
+  React.useImperativeHandle(ref, () => inputRef.current);
+  React.useEffect(() => {
     if (autoFocus) {
       inputRef.current?.focus();
     }
   }, [autoFocus]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) {
       return;
     }
@@ -2960,7 +2980,7 @@ var MONTHS3 = Array.from(
   (_, index) => String(index + 1).padStart(2, "0")
 );
 var WEEKDAY_LABELS4 = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
-var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicker2(props, ref) {
+var ReactDateTimeRangePicker = React.forwardRef(function ReactDateTimeRangePicker2(props, ref) {
   const {
     autoFocus,
     className,
@@ -2978,64 +2998,64 @@ var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicke
     value,
     ...restProps
   } = props;
-  const triggerRef = react.useRef(null);
-  const startInputRef = react.useRef(null);
-  const endInputRef = react.useRef(null);
-  const popupRef = react.useRef(null);
-  const skipFocusOpenRef = react.useRef(false);
-  const [open, setOpen] = react.useState(false);
-  const [activePart, setActivePart] = react.useState("start");
-  const [mode, setMode] = react.useState(
+  const triggerRef = React.useRef(null);
+  const startInputRef = React.useRef(null);
+  const endInputRef = React.useRef(null);
+  const popupRef = React.useRef(null);
+  const skipFocusOpenRef = React.useRef(false);
+  const [open, setOpen] = React.useState(false);
+  const [activePart, setActivePart] = React.useState("start");
+  const [mode, setMode] = React.useState(
     "date"
   );
-  const [draftRange, setDraftRange] = react.useState(
+  const [draftRange, setDraftRange] = React.useState(
     () => parseDateTimeRangeValue(value)
   );
-  const activeValue = react.useMemo(
+  const activeValue = React.useMemo(
     () => activePart === "start" ? draftRange.start : draftRange.end,
     [activePart, draftRange.end, draftRange.start]
   );
-  const parsedActiveValue = react.useMemo(
+  const parsedActiveValue = React.useMemo(
     () => parseDateTimeValue2(activeValue),
     [activeValue]
   );
-  const [draftDateTime, setDraftDateTime] = react.useState(
+  const [draftDateTime, setDraftDateTime] = React.useState(
     () => createDraftDateTime2(parsedActiveValue)
   );
   const showClear = allowClear && !disabled && (draftRange.start.length > 0 || draftRange.end.length > 0);
-  const yearPanelStart = react.useMemo(
+  const yearPanelStart = React.useMemo(
     () => resolveDecadeStart3(draftDateTime.year),
     [draftDateTime.year]
   );
-  const decadePanelStart = react.useMemo(
+  const decadePanelStart = React.useMemo(
     () => Math.floor(yearPanelStart / 100) * 100,
     [yearPanelStart]
   );
-  const yearItems = react.useMemo(
+  const yearItems = React.useMemo(
     () => Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index),
     [yearPanelStart]
   );
-  const decadeItems = react.useMemo(
+  const decadeItems = React.useMemo(
     () => Array.from(
       { length: 12 },
       (_, index) => decadePanelStart - 10 + index * 10
     ),
     [decadePanelStart]
   );
-  const calendarDays = react.useMemo(
+  const calendarDays = React.useMemo(
     () => buildCalendarDays4(draftDateTime.year, draftDateTime.month),
     [draftDateTime.month, draftDateTime.year]
   );
-  react.useImperativeHandle(ref, () => startInputRef.current);
-  react.useEffect(() => {
+  React.useImperativeHandle(ref, () => startInputRef.current);
+  React.useEffect(() => {
     if (autoFocus) {
       startInputRef.current?.focus();
     }
   }, [autoFocus]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     setDraftRange(parseDateTimeRangeValue(value));
   }, [rangeSeparator, value]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) {
       return;
     }
@@ -3769,20 +3789,20 @@ function compareDateTimeValue(left, right) {
 styleInject(".canvas-react-image-preview {\n  position: fixed;\n  inset: 0;\n  z-index: 1100;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 48px;\n  background: rgba(0, 0, 0, 0.72);\n  backdrop-filter: blur(2px);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n.canvas-react-image-preview-entered {\n  opacity: 1;\n}\n.canvas-react-image-preview-leave {\n  opacity: 0;\n}\n.canvas-react-image-preview-image {\n  max-width: 90vw;\n  max-height: 86vh;\n  object-fit: contain;\n  border-radius: 4px;\n  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.32);\n  opacity: 0;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n  user-select: none;\n}\n.canvas-react-image-preview-entered .canvas-react-image-preview-image {\n  opacity: 1;\n}\n.canvas-react-image-preview-leave .canvas-react-image-preview-image {\n  opacity: 0;\n}\n.canvas-react-image-preview-close {\n  position: fixed;\n  top: 20px;\n  right: 24px;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  color: #fff;\n  background: rgba(255, 255, 255, 0.14);\n  font: 30px/38px sans-serif;\n  cursor: pointer;\n}\n.canvas-react-image-preview-toolbar {\n  position: fixed;\n  bottom: 28px;\n  left: 50%;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 10px;\n  color: #fff;\n  background: rgba(0, 0, 0, 0.64);\n  border-radius: 22px;\n  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24);\n  transform: translateX(-50%);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n.canvas-react-image-preview-entered .canvas-react-image-preview-toolbar {\n  opacity: 1;\n}\n.canvas-react-image-preview-tool {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: 0;\n  border-radius: 6px;\n  color: inherit;\n  background: transparent;\n  font: 20px/1 sans-serif;\n  cursor: pointer;\n}\n.canvas-react-image-preview-tool:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.16);\n}\n.canvas-react-image-preview-tool:disabled {\n  color: rgba(255, 255, 255, 0.35);\n  cursor: not-allowed;\n}\n.canvas-react-image-preview-scale {\n  min-width: 48px;\n  color: rgba(255, 255, 255, 0.88);\n  font-size: 12px;\n  text-align: center;\n}\n");
 function ReactImagePreview(props) {
   const { open, src, alt = "preview", onClose } = props;
-  const [scale, setScale] = react.useState(1);
-  const [rotation, setRotation] = react.useState(0);
-  const [flipX, setFlipX] = react.useState(false);
-  const [flipY, setFlipY] = react.useState(false);
-  const [motionState, setMotionState] = react.useState(
+  const [scale, setScale] = React.useState(1);
+  const [rotation, setRotation] = React.useState(0);
+  const [flipX, setFlipX] = React.useState(false);
+  const [flipY, setFlipY] = React.useState(false);
+  const [motionState, setMotionState] = React.useState(
     "enter"
   );
-  const closeTimerRef = react.useRef(null);
+  const closeTimerRef = React.useRef(null);
   const requestClose = () => {
     if (motionState === "leave") return;
     setMotionState("leave");
     closeTimerRef.current = window.setTimeout(onClose, 200);
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) return;
     setScale(1);
     setRotation(0);
@@ -3792,7 +3812,7 @@ function ReactImagePreview(props) {
     const frame = requestAnimationFrame(() => setMotionState("entered"));
     return () => cancelAnimationFrame(frame);
   }, [open, src]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") requestClose();
@@ -3800,7 +3820,7 @@ function ReactImagePreview(props) {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, motionState]);
-  react.useEffect(
+  React.useEffect(
     () => () => {
       if (closeTimerRef.current != null) {
         window.clearTimeout(closeTimerRef.current);
@@ -3929,7 +3949,7 @@ var MONTHS4 = Array.from(
   { length: 12 },
   (_, index) => String(index + 1).padStart(2, "0")
 );
-var ReactMonthPicker = react.forwardRef(
+var ReactMonthPicker = React.forwardRef(
   function ReactMonthPicker2(props, ref) {
     const {
       autoFocus,
@@ -3947,36 +3967,36 @@ var ReactMonthPicker = react.forwardRef(
       value,
       ...restProps
     } = props;
-    const triggerRef = react.useRef(null);
-    const inputRef = react.useRef(null);
-    const popupRef = react.useRef(null);
-    const skipFocusOpenRef = react.useRef(false);
-    const [open, setOpen] = react.useState(false);
-    const [mode, setMode] = react.useState("month");
-    const parsedValue = react.useMemo(() => parseMonthValue(value), [value]);
-    const [panelYear, setPanelYear] = react.useState(
+    const triggerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const popupRef = React.useRef(null);
+    const skipFocusOpenRef = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const [mode, setMode] = React.useState("month");
+    const parsedValue = React.useMemo(() => parseMonthValue(value), [value]);
+    const [panelYear, setPanelYear] = React.useState(
       () => parsedValue?.year ?? (/* @__PURE__ */ new Date()).getFullYear()
     );
-    const yearPanelStart = react.useMemo(() => resolveDecadeStart4(panelYear), [panelYear]);
-    const decadePanelStart = react.useMemo(
+    const yearPanelStart = React.useMemo(() => resolveDecadeStart4(panelYear), [panelYear]);
+    const decadePanelStart = React.useMemo(
       () => Math.floor(yearPanelStart / 100) * 100,
       [yearPanelStart]
     );
-    const yearItems = react.useMemo(() => {
+    const yearItems = React.useMemo(() => {
       return Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index);
     }, [yearPanelStart]);
-    const decadeItems = react.useMemo(() => {
+    const decadeItems = React.useMemo(() => {
       return Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10);
     }, [decadePanelStart]);
     const displayValue = parsedValue == null ? "" : `${parsedValue.year}-${parsedValue.month}`;
     const showClear = allowClear && !disabled && displayValue.length > 0;
-    react.useImperativeHandle(ref, () => inputRef.current);
-    react.useEffect(() => {
+    React.useImperativeHandle(ref, () => inputRef.current);
+    React.useEffect(() => {
       if (autoFocus) {
         inputRef.current?.focus();
       }
     }, [autoFocus]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (!open) {
         return;
       }
@@ -4321,7 +4341,7 @@ function resolveDecadeStart4(year) {
 
 // src/components/number-input/style.css
 styleInject('@import "../../styles/variables.css";\n.canvas-react-number-input-affix-wrapper {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-number-input-affix-wrapper:focus-within {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-number-input-affix-wrapper-disabled {\n  background: #fafafa;\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-number-input {\n  box-sizing: border-box;\n  flex: 1 1 auto;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n  border: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  outline: none;\n  appearance: textfield;\n  -moz-appearance: textfield;\n}\n.canvas-react-number-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-number-input::-webkit-outer-spin-button,\n.canvas-react-number-input::-webkit-inner-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n}\n.canvas-react-number-input-suffix {\n  display: inline-flex;\n  align-items: center;\n  padding-right: var(--canvas-react-control-padding-inline, 11px);\n}\n.canvas-react-number-input-clear {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: #9ca3af;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transition:\n    color 0.2s ease,\n    opacity 0.2s ease,\n    transform 0.18s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover .canvas-react-number-input-clear,\n.canvas-react-number-input-affix-wrapper:focus-within .canvas-react-number-input-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-number-input-clear:hover {\n  color: #6b7280;\n  transform: rotate(90deg);\n}\n.canvas-react-number-input-clear-icon,\n.canvas-react-number-input-clear-icon::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 1.25px;\n  margin-top: -0.625px;\n  margin-left: -4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-number-input-clear-icon {\n  transform: rotate(45deg);\n}\n.canvas-react-number-input-clear-icon::before {\n  transform: rotate(90deg);\n}\n');
-var ReactNumberInput = react.forwardRef(
+var ReactNumberInput = React.forwardRef(
   function ReactNumberInput2(props, ref) {
     const {
       className,
@@ -4334,8 +4354,8 @@ var ReactNumberInput = react.forwardRef(
       value,
       ...restProps
     } = props;
-    const [inputValue, setInputValue] = react.useState(toDisplayValue(value));
-    react.useEffect(() => {
+    const [inputValue, setInputValue] = React.useState(toDisplayValue(value));
+    React.useEffect(() => {
       setInputValue(toDisplayValue(value));
     }, [value]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4392,7 +4412,7 @@ function toDisplayValue(value) {
 
 // src/components/input-number/style.css
 styleInject('@import "../../styles/variables.css";\n.canvas-react-input-number {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: stretch;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  overflow: hidden;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-input-number:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-number-focused {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-number-disabled {\n  background: #fafafa;\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-input-number-handler {\n  position: relative;\n  display: flex;\n  flex: 0 0 28px;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--canvas-react-color-text-muted);\n  cursor: pointer;\n  transition: color 0.16s ease, background-color 0.16s ease;\n}\n.canvas-react-input-number-handler-down {\n  border-right: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler-up {\n  border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler:hover:not(:disabled) {\n  color: var(--canvas-react-color-primary);\n  background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-input-number-handler:disabled {\n  color: #c4c7cf;\n  cursor: not-allowed;\n}\n.canvas-react-input-number-handler-icon {\n  position: relative;\n  display: block;\n  width: 10px;\n  height: 10px;\n}\n.canvas-react-input-number-handler-icon::before,\n.canvas-react-input-number-handler-icon::after {\n  content: "";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  background: currentColor;\n  border-radius: 1px;\n  transform: translate(-50%, -50%);\n}\n.canvas-react-input-number-handler-icon::before {\n  width: 10px;\n  height: 1.5px;\n}\n.canvas-react-input-number-handler-up .canvas-react-input-number-handler-icon::after {\n  width: 1.5px;\n  height: 10px;\n}\n.canvas-react-input-number-input-wrap {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  height: 100%;\n}\n.canvas-react-input-number-input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0 8px;\n  border: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  outline: none;\n  text-align: center;\n  appearance: textfield;\n  -moz-appearance: textfield;\n}\n.canvas-react-input-number-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-input-number-input::-webkit-outer-spin-button,\n.canvas-react-input-number-input::-webkit-inner-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n}\n.canvas-react-input-number-addon {\n  flex: 0 0 auto;\n  padding-right: 8px;\n  color: var(--canvas-react-color-text-muted);\n  font-size: 12px;\n  line-height: 1;\n  user-select: none;\n}\n');
-var ReactInputNumber = react.forwardRef(
+var ReactInputNumber = React.forwardRef(
   function ReactInputNumber2(props, ref) {
     const {
       addonAfter,
@@ -4415,11 +4435,11 @@ var ReactInputNumber = react.forwardRef(
       ...restProps
     } = props;
     const isControlled = value !== void 0;
-    const [innerValue, setInnerValue] = react.useState(
+    const [innerValue, setInnerValue] = React.useState(
       isControlled ? value ?? null : defaultValue
     );
     const currentValue = isControlled ? value ?? null : innerValue;
-    const [draftText, setDraftText] = react.useState(
+    const [draftText, setDraftText] = React.useState(
       formatDisplayValue(
         currentValue,
         formatter,
@@ -4427,12 +4447,12 @@ var ReactInputNumber = react.forwardRef(
         step
       )
     );
-    const [focused, setFocused] = react.useState(false);
-    const resolvedPrecision = react.useMemo(
+    const [focused, setFocused] = React.useState(false);
+    const resolvedPrecision = React.useMemo(
       () => resolvePrecision(precision, step),
       [precision, step]
     );
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (!focused) {
         setDraftText(
           formatDisplayValue(currentValue, formatter, resolvedPrecision, step)
@@ -4624,7 +4644,7 @@ function formatDisplayValue(value, formatter, precision, step) {
 
 // src/components/virtual-list/style.css
 styleInject('@import "../../styles/variables.css";\n.canvas-react-virtual-list {\n  position: relative;\n  overflow-y: auto;\n}\n.canvas-react-virtual-list-inner {\n  position: relative;\n  min-width: 100%;\n}\n.canvas-react-virtual-list-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 11px;\n  color: #9ca3af;\n  font-size: var(--canvas-react-font-size);\n}\n');
-var ReactVirtualList = react.forwardRef(function ReactVirtualListInner(props, ref) {
+var ReactVirtualList = React.forwardRef(function ReactVirtualListInner(props, ref) {
   const {
     className,
     empty,
@@ -4638,19 +4658,19 @@ var ReactVirtualList = react.forwardRef(function ReactVirtualListInner(props, re
     style,
     virtual = true
   } = props;
-  const hostRef = react.useRef(null);
-  const [scrollTop, setScrollTop] = react.useState(0);
+  const hostRef = React.useRef(null);
+  const [scrollTop, setScrollTop] = React.useState(0);
   const useVirtual = virtual && items.length * itemHeight > height;
   const startIndex = useVirtual ? Math.max(0, Math.floor(scrollTop / itemHeight) - overscan) : 0;
   const endIndex = useVirtual ? Math.min(
     items.length - 1,
     Math.ceil((scrollTop + height) / itemHeight) + overscan
   ) : items.length - 1;
-  const visibleItems = react.useMemo(
+  const visibleItems = React.useMemo(
     () => items.slice(startIndex, endIndex + 1),
     [endIndex, items, startIndex]
   );
-  react.useImperativeHandle(ref, () => ({
+  React.useImperativeHandle(ref, () => ({
     scrollToIndex: (index) => {
       const element = hostRef.current;
       if (!element || index < 0) {
@@ -4709,7 +4729,7 @@ var ReactVirtualList = react.forwardRef(function ReactVirtualListInner(props, re
 
 // src/components/select/style.css
 styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n}\n.canvas-react-select {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  cursor: pointer;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: transparent;\n  box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n  height: 100%;\n  min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n  border-color: transparent;\n  box-shadow: none;\n}\n.canvas-react-select-input {\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-select:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n  color: #9ca3af;\n  background: #fafafa;\n  cursor: not-allowed;\n}\n.canvas-react-select-actions {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  min-width: 12px;\n  height: 1em;\n  min-height: 12px;\n  margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0.5em;\n  height: 0.5em;\n  min-width: 6px;\n  min-height: 6px;\n  border-right: 1.5px solid var(--canvas-react-color-text-muted);\n  border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n  transform: translate(-50%, -58%) rotate(45deg);\n  opacity: 1;\n  transition:\n    opacity 0.18s ease,\n    transform 0.18s ease,\n    border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n  border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n  border-color: #6b7280;\n  transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: #9ca3af;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transform: translate(-50%, -50%) rotate(0deg);\n  transition:\n    color 0.2s ease,\n    opacity 0.2s ease,\n    transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n  color: #6b7280;\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n  opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 1.25px;\n  margin-top: -0.625px;\n  margin-left: -4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-select-clear-icon {\n  transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n  transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n  padding: 4px;\n}\n.canvas-react-select-list {\n  position: relative;\n  overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n  position: relative;\n}\n.canvas-react-select-option {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0 11px;\n  border-radius: var(--canvas-react-radius-sm);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n  background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n  background: var(--canvas-react-color-bg-active);\n  color: var(--canvas-react-color-primary);\n}\n.canvas-react-select-option-disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-select-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 11px;\n  color: #9ca3af;\n  font-size: var(--canvas-react-font-size);\n}\n');
-var ReactSelect = react.forwardRef(
+var ReactSelect = React.forwardRef(
   function ReactSelect2(props, ref) {
     const {
       autoFocus,
@@ -4732,18 +4752,18 @@ var ReactSelect = react.forwardRef(
       virtual = true,
       ...restProps
     } = props;
-    const triggerRef = react.useRef(null);
-    const inputRef = react.useRef(null);
-    const listRef = react.useRef(null);
-    const skipFocusOpenRef = react.useRef(false);
-    const [open, setOpen] = react.useState(false);
-    const selectedIndex = react.useMemo(
+    const triggerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const listRef = React.useRef(null);
+    const skipFocusOpenRef = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const selectedIndex = React.useMemo(
       () => options.findIndex((option) => String(option.value) === String(value ?? "")),
       [options, value]
     );
     const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : void 0;
-    const [keyword, setKeyword] = react.useState(selectedOption?.label ?? "");
-    const filteredOptions = react.useMemo(() => {
+    const [keyword, setKeyword] = React.useState(selectedOption?.label ?? "");
+    const filteredOptions = React.useMemo(() => {
       if (!showSearch) {
         return options;
       }
@@ -4755,27 +4775,27 @@ var ReactSelect = react.forwardRef(
         return option.label.toLowerCase().includes(search) || String(option.value).toLowerCase().includes(search);
       });
     }, [keyword, options]);
-    const [activeIndex, setActiveIndex] = react.useState(() => {
+    const [activeIndex, setActiveIndex] = React.useState(() => {
       return selectedIndex >= 0 ? selectedIndex : 0;
     });
-    react.useImperativeHandle(ref, () => inputRef.current);
-    react.useEffect(() => {
+    React.useImperativeHandle(ref, () => inputRef.current);
+    React.useEffect(() => {
       if (autoFocus) {
         inputRef.current?.focus();
       }
     }, [autoFocus]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (!open) {
         setKeyword(selectedOption?.label ?? "");
       }
     }, [open, selectedOption]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       const nextIndex = filteredOptions.findIndex(
         (option) => String(option.value) === String(value ?? "")
       );
       setActiveIndex(nextIndex >= 0 ? nextIndex : 0);
     }, [filteredOptions, value]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (!open) {
         return;
       }
@@ -5041,14 +5061,14 @@ function ReactPagination(props) {
     simple,
     total
   } = props;
-  const [quickValue, setQuickValue] = react.useState("");
+  const [quickValue, setQuickValue] = React.useState("");
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const safeCurrent = clampPage(current, totalPages);
   const range = total === 0 ? [0, 0] : [
     (safeCurrent - 1) * pageSize + 1,
     Math.min(safeCurrent * pageSize, total)
   ];
-  const pages = react.useMemo(
+  const pages = React.useMemo(
     () => buildPageItems(safeCurrent, totalPages, showLessItems),
     [safeCurrent, totalPages, showLessItems]
   );
@@ -5195,6 +5215,16 @@ function clampPage(page, totalPages) {
   }
   return Math.min(Math.max(1, Math.trunc(page)), totalPages);
 }
+var compatibleIdSeed = 0;
+function useCompatibleId(prefix = "canvas-react-id") {
+  const nativeUseId = React__namespace.useId;
+  const fallbackIdRef = React__namespace.useRef();
+  if (!fallbackIdRef.current) {
+    compatibleIdSeed += 1;
+    fallbackIdRef.current = `${prefix}-${compatibleIdSeed}`;
+  }
+  return nativeUseId ? nativeUseId() : fallbackIdRef.current;
+}
 
 // src/components/popconfirm/style.css
 styleInject('@import "../../styles/variables.css";\n.canvas-react-popconfirm-trigger {\n  display: inline-flex;\n  max-width: 100%;\n}\n.canvas-react-popconfirm-trigger-disabled {\n  cursor: not-allowed;\n}\n.canvas-react-popconfirm-popup {\n  overflow: visible;\n}\n.canvas-react-popconfirm {\n  position: relative;\n  box-sizing: border-box;\n  width: max-content;\n  min-width: 180px;\n  max-width: 320px;\n  padding: 12px;\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  line-height: 1.5;\n}\n.canvas-react-popconfirm-arrow {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  width: 10px;\n  height: 10px;\n  border: 0;\n  background: var(--canvas-react-color-bg, #ffffff);\n  pointer-events: none;\n  transform: rotate(45deg);\n}\n.canvas-react-popup[data-placement^=bottom] .canvas-react-popconfirm-arrow {\n  top: -5px;\n  border-top: 1px solid var(--canvas-react-color-border, #d9d9d9);\n  border-left: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement^=top] .canvas-react-popconfirm-arrow {\n  bottom: -5px;\n  border-right: 1px solid var(--canvas-react-color-border, #d9d9d9);\n  border-bottom: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement$=Left] .canvas-react-popconfirm-arrow {\n  left: 24px;\n}\n.canvas-react-popup[data-placement$=Right] .canvas-react-popconfirm-arrow {\n  right: 24px;\n}\n.canvas-react-popup[data-placement^=left] .canvas-react-popconfirm-arrow {\n  right: -5px;\n  border-top: 1px solid var(--canvas-react-color-border, #d9d9d9);\n  border-right: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement^=right] .canvas-react-popconfirm-arrow {\n  left: -5px;\n  border-bottom: 1px solid var(--canvas-react-color-border, #d9d9d9);\n  border-left: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement$=Top] .canvas-react-popconfirm-arrow {\n  top: 18px;\n}\n.canvas-react-popup[data-placement$=Bottom] .canvas-react-popconfirm-arrow {\n  bottom: 18px;\n}\n.canvas-react-popconfirm-message {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n}\n.canvas-react-popconfirm-icon {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-top: 2px;\n  color: #faad14;\n  font-size: 12px;\n  line-height: 1;\n}\n.canvas-react-popconfirm-default-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: #faad14;\n  color: #ffffff;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n}\n.canvas-react-popconfirm-text {\n  min-width: 0;\n}\n.canvas-react-popconfirm-title {\n  color: var(--canvas-react-color-text);\n  font-weight: 500;\n  word-break: break-word;\n}\n.canvas-react-popconfirm-description {\n  margin-top: 4px;\n  color: var(--canvas-react-color-text-muted);\n  word-break: break-word;\n}\n.canvas-react-popconfirm-actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 12px;\n}\n.canvas-react-popconfirm-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 26px;\n  min-width: 48px;\n  padding: 0 10px;\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: 12px;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    border-color 0.18s ease,\n    background-color 0.18s ease,\n    color 0.18s ease,\n    opacity 0.18s ease;\n}\n.canvas-react-popconfirm-button:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n  color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-popconfirm-button-primary {\n  border-color: var(--canvas-react-color-primary);\n  background: var(--canvas-react-color-primary);\n  color: #ffffff;\n}\n.canvas-react-popconfirm-button-primary:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n  background: var(--canvas-react-color-primary-hover);\n  color: #ffffff;\n}\n.canvas-react-popconfirm-button:disabled {\n  opacity: 0.56;\n  cursor: not-allowed;\n}\n.canvas-react-popconfirm-button:disabled:hover {\n  border-color: var(--canvas-react-color-border);\n  color: var(--canvas-react-color-text);\n}\n.canvas-react-popconfirm-button-primary:disabled:hover {\n  border-color: var(--canvas-react-color-primary);\n  background: var(--canvas-react-color-primary);\n  color: #ffffff;\n}\n.canvas-react-popconfirm-loading {\n  width: 12px;\n  height: 12px;\n  border: 2px solid rgba(255, 255, 255, 0.45);\n  border-top-color: #ffffff;\n  border-radius: 50%;\n  animation: canvas-react-popconfirm-loading 0.8s linear infinite;\n}\n@keyframes canvas-react-popconfirm-loading {\n  to {\n    transform: rotate(360deg);\n  }\n}\n');
@@ -5224,11 +5254,11 @@ function ReactPopconfirm(props) {
     title,
     zIndex
   } = props;
-  const triggerRef = react.useRef(null);
-  const [innerOpen, setInnerOpen] = react.useState(defaultOpen);
-  const [innerConfirmLoading, setInnerConfirmLoading] = react.useState(false);
-  const titleId = react.useId();
-  const descriptionId = react.useId();
+  const triggerRef = React.useRef(null);
+  const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+  const [innerConfirmLoading, setInnerConfirmLoading] = React.useState(false);
+  const titleId = useCompatibleId("canvas-react-popconfirm-title");
+  const descriptionId = useCompatibleId("canvas-react-popconfirm-description");
   const controlled = open !== void 0;
   const mergedOpen = controlled ? Boolean(open) : innerOpen;
   const popupOpen = mergedOpen && !disabled;
@@ -5245,7 +5275,7 @@ function ReactPopconfirm(props) {
     disabled: cancelButtonDisabled,
     ...restCancelButtonProps
   } = cancelButtonProps ?? {};
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!disabled || !mergedOpen) {
       return;
     }
@@ -5423,7 +5453,7 @@ function isPromiseLike(value) {
 // src/components/quarter/style.css
 styleInject('@import "../year/style.css";\n.canvas-react-quarter-grid {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px 8px;\n}\n.canvas-react-quarter-cell {\n  height: 56px;\n  font-size: 16px;\n  font-weight: 600;\n}\n');
 var QUARTERS = ["Q1", "Q2", "Q3", "Q4"];
-var ReactQuarterPicker = react.forwardRef(
+var ReactQuarterPicker = React.forwardRef(
   function ReactQuarterPicker2(props, ref) {
     const {
       autoFocus,
@@ -5441,35 +5471,35 @@ var ReactQuarterPicker = react.forwardRef(
       value,
       ...restProps
     } = props;
-    const triggerRef = react.useRef(null);
-    const inputRef = react.useRef(null);
-    const popupRef = react.useRef(null);
-    const skipFocusOpenRef = react.useRef(false);
-    const [open, setOpen] = react.useState(false);
-    const [mode, setMode] = react.useState("quarter");
-    const parsedValue = react.useMemo(() => parseQuarterValue(value), [value]);
-    const [panelYear, setPanelYear] = react.useState(
+    const triggerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const popupRef = React.useRef(null);
+    const skipFocusOpenRef = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const [mode, setMode] = React.useState("quarter");
+    const parsedValue = React.useMemo(() => parseQuarterValue(value), [value]);
+    const [panelYear, setPanelYear] = React.useState(
       () => parsedValue?.year ?? (/* @__PURE__ */ new Date()).getFullYear()
     );
-    const yearPanelStart = react.useMemo(() => resolveDecadeStart5(panelYear), [panelYear]);
-    const decadePanelStart = react.useMemo(() => {
+    const yearPanelStart = React.useMemo(() => resolveDecadeStart5(panelYear), [panelYear]);
+    const decadePanelStart = React.useMemo(() => {
       return Math.floor(yearPanelStart / 100) * 100;
     }, [yearPanelStart]);
-    const yearItems = react.useMemo(() => {
+    const yearItems = React.useMemo(() => {
       return Array.from({ length: 12 }, (_, index) => yearPanelStart - 1 + index);
     }, [yearPanelStart]);
-    const decadeItems = react.useMemo(() => {
+    const decadeItems = React.useMemo(() => {
       return Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10);
     }, [decadePanelStart]);
     const displayValue = parsedValue == null ? "" : `${parsedValue.year}-${parsedValue.quarter}`;
     const showClear = allowClear && !disabled && displayValue.length > 0;
-    react.useImperativeHandle(ref, () => inputRef.current);
-    react.useEffect(() => {
+    React.useImperativeHandle(ref, () => inputRef.current);
+    React.useEffect(() => {
       if (autoFocus) {
         inputRef.current?.focus();
       }
     }, [autoFocus]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (!open) {
         return;
       }
@@ -5804,7 +5834,7 @@ function parseQuarterValue(value) {
 function resolveDecadeStart5(year) {
   return Math.floor(year / 10) * 10;
 }
-var ReactTimePicker = react.forwardRef(
+var ReactTimePicker = React.forwardRef(
   function ReactTimePicker2(props, ref) {
     const {
       autoFocus,
@@ -5822,22 +5852,22 @@ var ReactTimePicker = react.forwardRef(
       value,
       ...restProps
     } = props;
-    const triggerRef = react.useRef(null);
-    const inputRef = react.useRef(null);
-    const popupRef = react.useRef(null);
-    const skipFocusOpenRef = react.useRef(false);
-    const [open, setOpen] = react.useState(false);
-    const [draftValue, setDraftValue] = react.useState(value ?? "");
-    const parsedValue = react.useMemo(() => parseTimeValue(value), [value]);
+    const triggerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const popupRef = React.useRef(null);
+    const skipFocusOpenRef = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const [draftValue, setDraftValue] = React.useState(value ?? "");
+    const parsedValue = React.useMemo(() => parseTimeValue(value), [value]);
     const displayValue = parsedValue ? formatTimeValue(parsedValue) : value ?? "";
     const showClear = allowClear && !disabled && typeof value === "string" && value.trim().length > 0;
-    react.useImperativeHandle(ref, () => inputRef.current);
-    react.useEffect(() => {
+    React.useImperativeHandle(ref, () => inputRef.current);
+    React.useEffect(() => {
       if (autoFocus) {
         inputRef.current?.focus();
       }
     }, [autoFocus]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       setDraftValue(value ?? "");
     }, [value]);
     return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-time-wrap`, children: [
@@ -6042,7 +6072,7 @@ function handleInputBlur4(params) {
   setOpen(false);
   onBlur?.(event);
 }
-var ReactTimeRangePicker = react.forwardRef(function ReactTimeRangePicker2(props, ref) {
+var ReactTimeRangePicker = React.forwardRef(function ReactTimeRangePicker2(props, ref) {
   const {
     autoFocus,
     className,
@@ -6059,23 +6089,23 @@ var ReactTimeRangePicker = react.forwardRef(function ReactTimeRangePicker2(props
     showArrow = true,
     ...restProps
   } = props;
-  const triggerRef = react.useRef(null);
-  const startInputRef = react.useRef(null);
-  const endInputRef = react.useRef(null);
-  const popupRef = react.useRef(null);
-  const [open, setOpen] = react.useState(false);
-  const [activePart, setActivePart] = react.useState("start");
-  const skipFocusOpenRef = react.useRef(false);
-  const [draftRange, setDraftRange] = react.useState(
+  const triggerRef = React.useRef(null);
+  const startInputRef = React.useRef(null);
+  const endInputRef = React.useRef(null);
+  const popupRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const [activePart, setActivePart] = React.useState("start");
+  const skipFocusOpenRef = React.useRef(false);
+  const [draftRange, setDraftRange] = React.useState(
     () => parseTimeRangeValue(value)
   );
-  react.useImperativeHandle(ref, () => startInputRef.current);
-  react.useEffect(() => {
+  React.useImperativeHandle(ref, () => startInputRef.current);
+  React.useEffect(() => {
     if (autoFocus) {
       startInputRef.current?.focus();
     }
   }, [autoFocus]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     setDraftRange(parseTimeRangeValue(value));
   }, [rangeSeparator, value]);
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-time-wrap`, children: [
@@ -6362,7 +6392,7 @@ function compareTimeValue(left, right) {
   const rightSeconds = Number(rightValue.hour) * 3600 + Number(rightValue.minute) * 60 + Number(rightValue.second);
   return leftSeconds - rightSeconds;
 }
-var ReactYearPicker = react.forwardRef(
+var ReactYearPicker = React.forwardRef(
   function ReactYearPicker2(props, ref) {
     const {
       autoFocus,
@@ -6380,34 +6410,34 @@ var ReactYearPicker = react.forwardRef(
       value,
       ...restProps
     } = props;
-    const triggerRef = react.useRef(null);
-    const inputRef = react.useRef(null);
-    const popupRef = react.useRef(null);
-    const skipFocusOpenRef = react.useRef(false);
-    const [open, setOpen] = react.useState(false);
-    const [mode, setMode] = react.useState("year");
-    const selectedYear = react.useMemo(() => parseYearValue(value), [value]);
-    const [panelStartYear, setPanelStartYear] = react.useState(
+    const triggerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const popupRef = React.useRef(null);
+    const skipFocusOpenRef = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const [mode, setMode] = React.useState("year");
+    const selectedYear = React.useMemo(() => parseYearValue(value), [value]);
+    const [panelStartYear, setPanelStartYear] = React.useState(
       () => resolveDecadeStart6(selectedYear ?? (/* @__PURE__ */ new Date()).getFullYear())
     );
     const displayValue = selectedYear == null ? "" : String(selectedYear);
     const showClear = allowClear && !disabled && displayValue.length > 0;
-    const yearItems = react.useMemo(() => {
+    const yearItems = React.useMemo(() => {
       return Array.from({ length: 12 }, (_, index) => panelStartYear - 1 + index);
     }, [panelStartYear]);
-    const decadePanelStart = react.useMemo(() => {
+    const decadePanelStart = React.useMemo(() => {
       return Math.floor(panelStartYear / 100) * 100;
     }, [panelStartYear]);
-    const decadeItems = react.useMemo(() => {
+    const decadeItems = React.useMemo(() => {
       return Array.from({ length: 12 }, (_, index) => decadePanelStart - 10 + index * 10);
     }, [decadePanelStart]);
-    react.useImperativeHandle(ref, () => inputRef.current);
-    react.useEffect(() => {
+    React.useImperativeHandle(ref, () => inputRef.current);
+    React.useEffect(() => {
       if (autoFocus) {
         inputRef.current?.focus();
       }
     }, [autoFocus]);
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (!open) {
         return;
       }