@dreamtree-org/twreact-ui 2.0.5 → 2.0.7

package/dist/index.esm.js

@@ -7519,7 +7519,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
         className: "flex flex-wrap gap-1",
         children: selectedOptions.map(function (opt) {
           return jsxs("div", {
-            className: "flex items-center gap-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs",
+            className: "flex items-center gap-1 rounded-full bg-line/60 px-2 py-0.5 text-xs",
             children: [jsx("span", {
               className: "truncate max-w-[8rem]",
               children: opt.label
@@ -7548,7 +7548,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
           className: "flex flex-wrap gap-1",
           children: selectedOptions.slice(0, maxTagCount).map(function (opt) {
             return jsx("div", {
-              className: "flex items-center gap-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs",
+              className: "flex items-center gap-1 rounded-full bg-line/60 px-2 py-0.5 text-xs",
               children: jsx("span", {
                 className: "truncate max-w-[6rem]",
                 children: opt.label
@@ -7586,7 +7586,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
               "aria-expanded": !collapsed,
               "aria-controls": collapsed ? undefined : groupOptionsId,
               "aria-label": "".concat(collapsed ? "Expand" : "Collapse", " ").concat(groupName),
-              className: "text-xs border border-slate-200 p-0.5 rounded-md cursor-pointer hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500",
+              className: "text-xs border border-line p-0.5 rounded-md cursor-pointer hover:bg-line/50 focus:outline-none focus:ring-2 focus:ring-primary-500",
               onClick: function onClick() {
                 return setCollapsedGroups(function (prev) {
                   return _objectSpread$17(_objectSpread$17({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
@@ -7613,16 +7613,16 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
                 onClick: function onClick() {
                   return handleSelect(option);
                 },
-                className: cn("flex items-center hover:bg-gray-100 cursor-pointer", rowClass, {
+                className: cn("flex items-center hover:bg-line/50 cursor-pointer", rowClass, {
                   "opacity-50 cursor-not-allowed": option.disabled,
-                  "bg-primary-50 text-primary-600": focusedIndex === index
+                  "bg-primary-50 text-primary-600 dark:bg-primary-900/40 dark:text-primary-300": focusedIndex === index
                 }),
                 children: [multiSelect && jsx("div", {
                   className: "mr-2",
                   children: selectedValues.includes(option.value) ? jsx(Check, {
                     className: "h-4 w-4 text-primary-600"
                   }) : jsx("div", {
-                    className: "h-4 w-4 rounded border border-gray-300"
+                    className: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600"
                   })
                 }), onMenuItemRender ? onMenuItemRender(option) : highlight(option.label, searchTerm), !multiSelect && selectedValues === option.value && jsx(Check, {
                   className: "ml-auto h-4 w-4 text-primary-600"
@@ -7651,17 +7651,17 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
           onClick: function onClick() {
             return handleSelect(option);
           },
-          className: cn("flex items-center hover:bg-gray-100 cursor-pointer", ROW_CLASSES$1[isSheet ? "sheet" : "popover"], {
+          className: cn("flex items-center hover:bg-line/50 cursor-pointer", ROW_CLASSES$1[isSheet ? "sheet" : "popover"], {
             "opacity-50 cursor-not-allowed": option.disabled,
-            "bg-primary-50 text-primary-600": focusedIndex === index,
-            "bg-primary-100": multiSelect && selectedValues.includes(option.value)
+            "bg-primary-50 text-primary-600 dark:bg-primary-900/40 dark:text-primary-300": focusedIndex === index,
+            "bg-primary-100 dark:bg-primary-900/60": multiSelect && selectedValues.includes(option.value)
           }),
           children: [multiSelect && jsx("div", {
             className: "mr-2",
             children: selectedValues.includes(option.value) ? jsx(Check, {
               className: "h-4 w-4 text-primary-600"
             }) : jsx("div", {
-              className: "h-4 w-4 rounded border border-gray-300"
+              className: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600"
             })
           }), onMenuItemRender ? onMenuItemRender(option) : highlight(option.label, searchTerm), !multiSelect && selectedValues === option.value && jsx(Check, {
             className: "ml-auto h-4 w-4 text-primary-600"
@@ -7673,7 +7673,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
         children: jsxs("button", {
           type: "button",
           onClick: handleCreate,
-          className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100",
+          className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-line/50 focus:outline-none focus:bg-line/50",
           children: [jsx(Plus, {
             className: "h-4 w-4",
             "aria-hidden": "true"
@@ -7701,7 +7701,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
               className: "h-4 w-4 text-primary-600",
               "aria-hidden": "true"
             }) : jsx("div", {
-              className: "h-4 w-4 rounded border border-gray-300"
+              className: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600"
             })
           });
         }()
@@ -7766,7 +7766,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
         "aria-describedby": describedBy,
         "aria-invalid": error ? true : undefined,
-        className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", SIZE_CLASSES$3[size] || SIZE_CLASSES$3.md, {
+        className: cn("flex w-full items-center justify-between rounded-md border border-line bg-surface text-foreground focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", SIZE_CLASSES$3[size] || SIZE_CLASSES$3.md, {
           "border-error-500 focus:ring-error-500": error,
           // Empty: the placeholder reads muted, like Input's
           // ::placeholder (#159). `className` still merges last.
@@ -7802,7 +7802,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
         type: "button",
         onClick: handleClear,
         "aria-label": "Clear selection",
-        className: cn("absolute right-8 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded p-1 text-primary-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500", TOUCH_TARGET),
+        className: cn("absolute right-8 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded p-1 text-primary-500 hover:bg-line/50 focus:outline-none focus:ring-2 focus:ring-primary-500", TOUCH_TARGET),
         children: jsx(X, {
           className: "h-4 w-4",
           "aria-hidden": "true"
@@ -7825,7 +7825,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
         value: selectedValues !== null && selectedValues !== void 0 ? selectedValues : ""
       })), isOpen && !isSheet && typeof document !== "undefined" && /*#__PURE__*/createPortal(jsxs("div", {
         ref: popoverRef,
-        className: "fixed z-popover overflow-auto rounded-md border border-gray-300 bg-white shadow-lg",
+        className: "fixed z-popover overflow-auto rounded-md border border-line bg-surface text-foreground shadow-lg",
         role: "dialog",
         "data-placement": floatingPlacement.split("-")[0],
         // Portaled to document.body with position:fixed so the menu
@@ -7837,7 +7837,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
           opacity: 0
         }),
         children: [searchable && jsx("div", {
-          className: "border-b border-gray-200 p-2",
+          className: "border-b border-line p-2",
           children: renderSearch()
         }), renderListbox()]
       }), document.body)]
@@ -11872,7 +11872,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             type: "button",
             "aria-label": "Reload",
             title: "Reload",
-            className: "px-4 py-2 bg-primary-100 flex items-center gap-2 rounded-lg md:rounded text-primary-700 hover:bg-primary-200 transition-colors",
+            className: "px-4 py-2 bg-primary-100 flex items-center gap-2 rounded-lg md:rounded text-primary-700 hover:bg-primary-200 transition-colors dark:bg-primary-900/40 dark:text-primary-300 dark:hover:bg-primary-900/60",
             onClick: onReload,
             children: [jsx(RefreshCcw, {
               className: "size-4",
@@ -17941,8 +17941,8 @@ function Calendar(_ref3) {
               className: cn("mx-auto rounded-md text-sm transition-colors motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-1", sheet ? "h-11 w-full min-w-0 text-base" : "h-9 w-full max-w-9", {
                 "text-primary-400": !currentMonth,
                 "bg-primary-600 text-primary-50": state.edge,
-                "bg-primary-200": state.inRange && !state.edge,
-                "bg-primary-100 text-primary-600": todayDate && !state.edge && !state.inRange,
+                "bg-primary-200 dark:bg-primary-900/60": state.inRange && !state.edge,
+                "bg-primary-100 text-primary-600 dark:bg-primary-900/40 dark:text-primary-300": todayDate && !state.edge && !state.inRange,
                 "hover:bg-background": currentMonth && !state.edge && !state.inRange && !disabled,
                 "cursor-not-allowed opacity-50": disabled
               }),
@@ -18164,7 +18164,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, forwarde
       edge: isSel
     };
   };
-  var actionClass = isSheet ? "rounded-md px-3 py-2 text-sm hover:bg-gray-100" : "rounded-md px-2 py-1 text-xs hover:bg-gray-100";
+  var actionClass = isSheet ? "rounded-md px-3 py-2 text-sm hover:bg-line/50" : "rounded-md px-2 py-1 text-xs hover:bg-line/50";
   var actions = jsxs("div", {
     className: "flex gap-2",
     children: [showClear && jsx("button", {
@@ -18215,7 +18215,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, forwarde
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
         "aria-describedby": error ? errorId : helperText ? helperId : undefined,
         "aria-invalid": error ? true : undefined,
-        className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
+        className: cn("flex w-full items-center justify-between rounded-md border border-line bg-surface text-foreground px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
           "border-error-500 focus:ring-error-500": error,
           // Empty: the placeholder reads muted, like Input's
           // ::placeholder (#159). `className` still merges last.
@@ -18251,7 +18251,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, forwarde
           // this button unmounts once the value clears
           (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.focus();
         },
-        className: "absolute right-9 top-1/2 inline-flex -translate-y-1/2 items-center justify-center rounded-md p-1 text-primary-400 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50",
+        className: "absolute right-9 top-1/2 inline-flex -translate-y-1/2 items-center justify-center rounded-md p-1 text-primary-400 hover:bg-line/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50",
         children: jsx(X, {
           className: "h-4 w-4",
           "aria-hidden": "true"
@@ -19398,7 +19398,7 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
                 id: fieldId,
                 "aria-invalid": error ? true : undefined,
                 "aria-describedby": describedBy,
-                className: cn("flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
+                className: cn("flex w-full rounded-md border border-line bg-surface text-foreground px-3 py-2 text-sm placeholder:text-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
                   "border-error-500 focus:ring-error-500": error
                 }),
                 placeholder: placeholder,
@@ -19437,7 +19437,7 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
                   },
                   "aria-invalid": error ? true : undefined,
                   "aria-describedby": describedBy,
-                  className: "rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  className: "rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600"
                 }), label && jsxs("label", {
                   htmlFor: fieldId,
                   className: "ml-2 text-sm",
@@ -19534,7 +19534,7 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
                 className: "mt-1 flex items-center",
                 children: [jsxs("label", {
                   htmlFor: name,
-                  className: cn("cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", {
+                  className: cn("cursor-pointer inline-flex items-center px-4 py-2 border border-line rounded-md shadow-sm text-sm font-medium bg-surface text-foreground hover:bg-background focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", {
                     "border-error-500": error
                   }),
                   children: [jsx("svg", {
@@ -19904,7 +19904,7 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
     lg: "rounded-lg",
     xl: "rounded-xl"
   };
-  var wrapperClasses = cn(bordered ? "bg-white" : "bg-transparent", bordered ? "divide-y divide-gray-200" : "", roundedMap[rounded] || roundedMap.md, "shadow-sm", className);
+  var wrapperClasses = cn(bordered ? "bg-surface text-foreground" : "bg-transparent", bordered ? "divide-y divide-line" : "", roundedMap[rounded] || roundedMap.md, "shadow-sm", className);
   var renderLeftIcon = function renderLeftIcon(item, index) {
     var left = item === null || item === void 0 ? void 0 : item.leftIcon;
     if (!left) return null;
@@ -19932,7 +19932,7 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
       var panelId = "".concat(uid, "accordion-panel-").concat(id);
       var leftIconEl = renderLeftIcon(item, index);
       return jsxs("div", {
-        className: "bg-white",
+        className: "bg-surface text-foreground",
         children: [jsx("h3", {
           children: jsx("button", {
             ref: function ref(el) {
@@ -20506,12 +20506,12 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
         onClick: function onClick() {
           return applyPreset(preset);
         },
-        className: cn("shrink-0 rounded-full border px-3 text-xs font-medium transition-colors motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", isSheet ? "min-h-11 text-sm" : "py-1", active ? "border-primary-600 bg-primary-600 text-white" : "border-gray-300 hover:bg-gray-100"),
+        className: cn("shrink-0 rounded-full border px-3 text-xs font-medium transition-colors motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", isSheet ? "min-h-11 text-sm" : "py-1", active ? "border-primary-600 bg-primary-600 text-white" : "border-line hover:bg-line/50"),
         children: preset.label
       }, preset.label);
     })
   }) : null;
-  var actionClass = isSheet ? "rounded-md px-3 py-2 text-sm hover:bg-gray-100" : "rounded-md px-2 py-1 text-xs hover:bg-gray-100";
+  var actionClass = isSheet ? "rounded-md px-3 py-2 text-sm hover:bg-line/50" : "rounded-md px-2 py-1 text-xs hover:bg-line/50";
   var calendar = jsx(Calendar, {
     month: currentMonth,
     onMonthChange: setCurrentMonth,
@@ -20566,7 +20566,7 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
         "aria-describedby": error ? errorId : helperText ? helperId : undefined,
         "aria-invalid": error ? true : undefined,
-        className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
+        className: cn("flex w-full items-center justify-between rounded-md border border-line bg-surface text-foreground px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
           "border-error-500 focus:ring-error-500": error,
           // Empty: the placeholder reads muted, like Input's
           // ::placeholder (#159). `className` still merges last.
@@ -24284,7 +24284,7 @@ var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref)
       }, inputProps), {}, {
         value: text,
         onChange: handleInputChange,
-        className: cn("rounded-md border border-gray-300 bg-white py-2 px-3 text-sm text-gray-900 placeholder-gray-400 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500", "dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500", "[@media(pointer:coarse)]:text-base", fullWidth ? "w-full" : "min-w-[200px]", status === "error" && "border-error-500 dark:border-error-400", inputProps.className, inputPaddingClass)
+        className: cn("rounded-md border border-line bg-surface py-2 px-3 text-sm text-foreground placeholder-gray-400 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500", "dark:placeholder-gray-500", "[@media(pointer:coarse)]:text-base", fullWidth ? "w-full" : "min-w-[200px]", status === "error" && "border-error-500 dark:border-error-400", inputProps.className, inputPaddingClass)
       })), jsx("div", {
         className: cn("absolute inset-y-0 flex items-center", iconPosition === "right" ? "right-2" : "left-2"),
         children: iconButton
@@ -24997,7 +24997,7 @@ var Popover = /*#__PURE__*/React__default.forwardRef(function (_ref, _ref2) {
       onKeyDown: handlePanelKeyDown,
       "data-side": resolvedPlacement.split("-")[0],
       "data-presentation": "popover",
-      className: cn("z-popover min-w-[12rem] max-w-sm rounded-lg border border-gray-200 bg-white p-4 text-sm text-gray-900 shadow-lg focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "animate-fade-in motion-reduce:animate-none", className),
+      className: cn("z-popover min-w-[12rem] max-w-sm rounded-lg border border-line bg-surface p-4 text-sm text-foreground shadow-lg focus:outline-none", "animate-fade-in motion-reduce:animate-none", className),
       style: _objectSpread$E(_objectSpread$E({}, floatingStyles), style)
     }, props), {}, {
       children: [title && jsx("h2", {
@@ -28175,7 +28175,7 @@ var DrawerTitleBar = function DrawerTitleBar(_ref2) {
     dragProps = _useGrabZone.dragProps,
     grabClass = _useGrabZone.grabClass;
   return jsx("div", _objectSpread$q(_objectSpread$q({}, dragProps), {}, {
-    className: cn("flex shrink-0 items-start justify-between gap-4 border-b border-gray-200 px-6 py-4 dark:border-gray-700", grabClass, className),
+    className: cn("flex shrink-0 items-start justify-between gap-4 border-b border-line px-6 py-4", grabClass, className),
     children: children
   }));
 };
@@ -28250,7 +28250,7 @@ var Drawer = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
     idPrefix: "drawer",
     testIdPrefix: "drawer",
     handleBarClassName: "bg-gray-300 dark:bg-gray-600",
-    panelClassName: cn("border-gray-200 bg-white text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", PLACEMENT_CLASSES[side], sizes[size] || sizes.md),
+    panelClassName: cn("border-line bg-surface text-foreground", PLACEMENT_CLASSES[side], sizes[size] || sizes.md),
     renderHeader: renderHeader
   }, props), {}, {
     children: composed ? children : jsxs(Fragment, {
@@ -28258,7 +28258,7 @@ var Drawer = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
         className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4",
         children: children
       }), footer && jsx("div", {
-        className: "flex shrink-0 items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700",
+        className: "flex shrink-0 items-center justify-end gap-3 border-t border-line px-6 py-4",
         children: footer
       })]
     })
@@ -28274,7 +28274,7 @@ var DrawerHeader = /*#__PURE__*/React__default.forwardRef(function (_ref5, ref)
   return jsx("div", _objectSpread$q(_objectSpread$q(_objectSpread$q({
     ref: ref
   }, props), dragProps), {}, {
-    className: cn("border-b border-gray-200 px-6 py-4 dark:border-gray-700", grabClass, className)
+    className: cn("border-b border-line px-6 py-4", grabClass, className)
   }));
 });
 var DrawerBody = /*#__PURE__*/React__default.forwardRef(function (_ref6, ref) {
@@ -28290,7 +28290,7 @@ var DrawerFooter = /*#__PURE__*/React__default.forwardRef(function (_ref7, ref)
     props = _objectWithoutProperties$1(_ref7, _excluded4$1);
   return jsx("div", _objectSpread$q({
     ref: ref,
-    className: cn("flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700", className)
+    className: cn("flex items-center justify-end gap-3 border-t border-line px-6 py-4", className)
   }, props));
 });
 DrawerHeader.displayName = "Drawer.Header";
@@ -28707,7 +28707,7 @@ var Tour = /*#__PURE__*/forwardRef(function (_ref, _ref2) {
       onKeyDown: handleKeyDown,
       "data-placement": placementAttr,
       "data-presentation": docked ? "sheet" : "popover",
-      className: cn("fixed overflow-y-auto overscroll-contain rounded-lg border border-gray-200 bg-white text-gray-900 shadow-xl focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "transition-opacity duration-200 motion-reduce:transition-none", docked ? "inset-x-4 bottom-4 max-h-[60dvh] pb-safe touch-pan-y" : "w-[min(22rem,calc(100vw-2rem))] max-h-[calc(100dvh-2rem)]", !docked && !rect && "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", ready ? "opacity-100" : "pointer-events-none opacity-0", className),
+      className: cn("fixed overflow-y-auto overscroll-contain rounded-lg border border-line bg-surface text-foreground shadow-xl focus:outline-none", "transition-opacity duration-200 motion-reduce:transition-none", docked ? "inset-x-4 bottom-4 max-h-[60dvh] pb-safe touch-pan-y" : "w-[min(22rem,calc(100vw-2rem))] max-h-[calc(100dvh-2rem)]", !docked && !rect && "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", ready ? "opacity-100" : "pointer-events-none opacity-0", className),
       style: anchored ? _objectSpread$o(_objectSpread$o({}, floatingStyles), style) : style
     }, swipeHandlers), rest), {}, {
       children: [jsxs("div", {
@@ -28995,7 +28995,7 @@ function ownKeys$k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 function _objectSpread$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Shared button chrome: dark-safe surface, focus-visible ring, 44px target on coarse pointers.
 var BUTTON_BASE = cn('inline-flex items-center justify-center rounded-md border px-3 py-2 text-sm font-medium', 'transition-colors duration-fast motion-reduce:transition-none', 'outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900', TOUCH_TARGET);
-var BUTTON_IDLE = 'border-gray-300 bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800';
+var BUTTON_IDLE = 'border-line bg-surface text-foreground hover:bg-background dark:hover:bg-gray-800';
 var BUTTON_ACTIVE = 'border-primary-500 bg-primary-50 text-primary-600 dark:bg-primary-950 dark:text-primary-300';
 var DISABLED = 'disabled:opacity-50 disabled:cursor-not-allowed';
 var Pagination = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {