@class101/cdn-ui-system 0.0.8 → 0.0.12

package/lib/ModalBottomSheet/ModalBottomSheet.js

@@ -1,28 +1,28 @@
 import {
   useLazyUnmount,
   useLockBodyScroll
-} from "../../chunk-2VS4JN2V.js";
-import "../../chunk-FRNHAL35.js";
+} from "../../chunk-O6RRFC57.js";
+import "../../chunk-LN36XQS3.js";
 import {
   React,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/ModalBottomSheet/ModalBottomSheet.tsx
 init_react_shim();
-import {useEffect, useState} from "react";
-import {propVariant, system} from "../../core/index.js";
-import {Action} from "../Action/index.js";
-import {HStack} from "../Layout/HStack/index.js";
-import {Title} from "../Typography/Title/index.js";
-import {SlideAnimation} from "../Animation/SlideAnimation/index.js";
-import {Backdrop} from "../Backdrop/index.js";
-import {VStack} from "../Layout/VStack/index.js";
-import {Background} from "../Background/index.js";
-import {Icon} from "../Icon/index.js";
-import {Body} from "../Typography/Body/index.js";
-import {Portal} from "../Portal/index.js";
-import {Center} from "../Layout/Center/index.js";
+import { useEffect, useState } from "react";
+import { propVariant, system } from "../../core/index.js";
+import { Action } from "../Action/index.js";
+import { SlideAnimation } from "../Animation/SlideAnimation/index.js";
+import { Backdrop } from "../Backdrop/index.js";
+import { Background } from "../Background/index.js";
+import { Icon } from "../Icon/index.js";
+import { Center } from "../Layout/Center/index.js";
+import { HStack } from "../Layout/HStack/index.js";
+import { VStack } from "../Layout/VStack/index.js";
+import { Portal } from "../Portal/index.js";
+import { Body } from "../Typography/Body/index.js";
+import { Title } from "../Typography/Title/index.js";
 var ANIMATION_TIME_MS = 500;
 var ModalBottomSheet = system()(propVariant({
   prop: "size",
@@ -35,8 +35,8 @@ var ModalBottomSheet = system()(propVariant({
     }
   },
   defaultValue: "default"
-}))(({title, subtitle, opened, children, ctaButtonGroup, onClose, onBackButtonClick, renderOpener, dialogWidth}) => {
-  const [isOpened, setIsOpened] = useState(opened ?? false);
+}))(({ title, subtitle, opened, dialogWidth, onClose, onBackButtonClick, renderOpener, renderContent }) => {
+  const [isOpened, setIsOpened] = useState(opened != null ? opened : false);
   const isMounted = useLazyUnmount(isOpened, ANIMATION_TIME_MS);
   useLockBodyScroll(isOpened);
   useEffect(() => {
@@ -46,11 +46,11 @@ var ModalBottomSheet = system()(propVariant({
   }, [opened]);
   const handleClose = () => {
     setIsOpened(false);
-    onClose?.();
+    onClose == null ? void 0 : onClose();
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, renderOpener?.({openModal: () => setIsOpened(true)}), isMounted && /* @__PURE__ */ React.createElement(Portal, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, renderOpener == null ? void 0 : renderOpener({ openModal: () => setIsOpened(true) }), isMounted && /* @__PURE__ */ React.createElement(Portal, {
     id: "modalBottomSheet",
-    zIndex: 1
+    zIndex: 2
   }, /* @__PURE__ */ React.createElement(Backdrop, {
     opened: isOpened,
     duration: ANIMATION_TIME_MS,
@@ -75,8 +75,7 @@ var ModalBottomSheet = system()(propVariant({
     pb: [20, 20, 30],
     pt: 20,
     mt: ["auto", "auto", 0],
-    safeAreaMargin: true,
-    spacing: 16
+    safeAreaMargin: true
   }, /* @__PURE__ */ React.createElement(VStack, {
     spacing: 6,
     py: 16
@@ -108,10 +107,7 @@ var ModalBottomSheet = system()(propVariant({
   }, subtitle))), /* @__PURE__ */ React.createElement(VStack, {
     overflow: "auto",
     "overscroll-behavior": "contain"
-  }, children), ctaButtonGroup && /* @__PURE__ */ React.createElement(HStack, {
-    mt: 16,
-    spacing: 4
-  }, ctaButtonGroup)))))))));
+  }, renderContent({ closeModal: handleClose }))))))))));
 });
 export {
   ModalBottomSheet

package/lib/ModalBottomSheet/index.js

@@ -1,11 +1,11 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/ModalBottomSheet/index.ts
 init_react_shim();
-import {ModalBottomSheet} from "./ModalBottomSheet.js";
-import {useModalBottomSheet} from "./useModalBottomSheet.js";
+import { ModalBottomSheet } from "./ModalBottomSheet.js";
+import { useModalBottomSheet } from "./useModalBottomSheet.js";
 export {
   ModalBottomSheet,
   useModalBottomSheet

package/lib/ModalBottomSheet/useModalBottomSheet.js

@@ -1,12 +1,12 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/ModalBottomSheet/useModalBottomSheet.ts
 init_react_shim();
-import {useCallback, useState} from "react";
+import { useCallback, useState } from "react";
 var useModalBottomSheet = (defaultValue) => {
-  const [isModalOpen, setIsModalOpen] = useState(defaultValue ?? false);
+  const [isModalOpen, setIsModalOpen] = useState(defaultValue != null ? defaultValue : false);
   const openModal = useCallback(() => setIsModalOpen(true), []);
   const closeModal = useCallback(() => setIsModalOpen(false), []);
   return {

package/lib/NewLine/NewLine.js

@@ -1,12 +1,13 @@
 import {
   React,
+  __spreadValues,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/NewLine/NewLine.tsx
 init_react_shim();
-import {Box} from "../../private/Box/index.js";
-import {styleVariant, system} from "../../core/index.js";
+import { styleVariant, system } from "../../core/index.js";
+import { Box } from "../../private/Box/index.js";
 var NewLine = system()(styleVariant({
   prop: "disabled",
   variants: {
@@ -18,11 +19,11 @@ var NewLine = system()(styleVariant({
     }
   },
   responsive: true,
-  defaultValue: false
-}))((props) => /* @__PURE__ */ React.createElement(Box, {
-  as: "br",
-  ...props
-}));
+  defaultValue: false,
+  skipForward: true
+}))((props) => /* @__PURE__ */ React.createElement(Box, __spreadValues({
+  as: "br"
+}, props)));
 export {
   NewLine
 };

package/lib/NewLine/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/NewLine/index.ts
 init_react_shim();
-import {NewLine} from "./NewLine.js";
+import { NewLine } from "./NewLine.js";
 export {
   NewLine
 };

package/lib/Opacity/Opacity.js

@@ -1,17 +1,18 @@
 import {
   React,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Opacity/Opacity.tsx
 init_react_shim();
-import {ForwardStyle} from "../../private/ForwardStyle/index.js";
+import { ForwardStyle } from "../../private/ForwardStyle/index.js";
 var OpacityLevels = {
+  0: 1,
   1: 0.8,
   2: 0.7,
   3: 0.6
 };
-var Opacity = ({level, children}) => /* @__PURE__ */ React.createElement(ForwardStyle, {
+var Opacity = ({ level, children }) => /* @__PURE__ */ React.createElement(ForwardStyle, {
   opacity: OpacityLevels[level]
 }, children);
 Opacity.forwardStyle = true;

package/lib/Opacity/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Opacity/index.ts
 init_react_shim();
-import {Opacity} from "./Opacity.js";
+import { Opacity } from "./Opacity.js";
 export {
   Opacity
 };

package/lib/Overlay/Overlay.js

@@ -1,22 +1,23 @@
 import {
   React,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Overlay/Overlay.tsx
 init_react_shim();
-import {Background} from "../Background/index.js";
-import {Position} from "../Layout/Position/index.js";
-import {VStack} from "../Layout/VStack/index.js";
+import { Background } from "../Background/index.js";
+import { Position } from "../Layout/Position/index.js";
+import { VStack } from "../Layout/VStack/index.js";
 var OverlayLevels = {
   1: 0.55,
   2: 0.35,
   3: 0.24,
   4: 0.05
 };
-var Overlay = ({level, children}) => /* @__PURE__ */ React.createElement(Position, {
+var Overlay = ({ level, children }) => /* @__PURE__ */ React.createElement(Position, {
   position: "relative"
 }, /* @__PURE__ */ React.createElement(VStack, {
+  width: "100%",
   height: "100%"
 }, children, /* @__PURE__ */ React.createElement(Position, {
   position: "absolute",

package/lib/Overlay/index.js

@@ -1,10 +1,10 @@
 import {
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Overlay/index.ts
 init_react_shim();
-import {Overlay} from "./Overlay.js";
+import { Overlay } from "./Overlay.js";
 export {
   Overlay
 };

package/lib/Pagination/Pagination.js

@@ -1,35 +1,398 @@
-import {
-  require_lodash
-} from "../../chunk-IKYIYCM6.js";
 import {
   emotion_styled_browser_esm_default
-} from "../../chunk-KBR5BGSG.js";
-import "../../chunk-UAWCTQGC.js";
-import "../../chunk-QN5Q5NTF.js";
+} from "../../chunk-SFQY5CLW.js";
+import "../../chunk-T7TBQTBE.js";
+import "../../chunk-LE44IRCL.js";
+import "../../chunk-CGEEKALF.js";
+import "../../chunk-J3Q2BPOW.js";
 import {
   React,
+  __commonJS,
   __toModule,
   init_react_shim
-} from "../../chunk-CPDZ2HQZ.js";
+} from "../../chunk-VIIHQGZ3.js";
+
+// node_modules/lodash/_baseRange.js
+var require_baseRange = __commonJS({
+  "node_modules/lodash/_baseRange.js"(exports, module) {
+    init_react_shim();
+    var nativeCeil = Math.ceil;
+    var nativeMax = Math.max;
+    function baseRange(start, end, step, fromRight) {
+      var index = -1, length = nativeMax(nativeCeil((end - start) / (step || 1)), 0), result = Array(length);
+      while (length--) {
+        result[fromRight ? length : ++index] = start;
+        start += step;
+      }
+      return result;
+    }
+    module.exports = baseRange;
+  }
+});
+
+// node_modules/lodash/eq.js
+var require_eq = __commonJS({
+  "node_modules/lodash/eq.js"(exports, module) {
+    init_react_shim();
+    function eq(value, other) {
+      return value === other || value !== value && other !== other;
+    }
+    module.exports = eq;
+  }
+});
+
+// node_modules/lodash/_freeGlobal.js
+var require_freeGlobal = __commonJS({
+  "node_modules/lodash/_freeGlobal.js"(exports, module) {
+    init_react_shim();
+    var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
+    module.exports = freeGlobal;
+  }
+});
+
+// node_modules/lodash/_root.js
+var require_root = __commonJS({
+  "node_modules/lodash/_root.js"(exports, module) {
+    init_react_shim();
+    var freeGlobal = require_freeGlobal();
+    var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+    var root = freeGlobal || freeSelf || Function("return this")();
+    module.exports = root;
+  }
+});
+
+// node_modules/lodash/_Symbol.js
+var require_Symbol = __commonJS({
+  "node_modules/lodash/_Symbol.js"(exports, module) {
+    init_react_shim();
+    var root = require_root();
+    var Symbol = root.Symbol;
+    module.exports = Symbol;
+  }
+});
+
+// node_modules/lodash/_getRawTag.js
+var require_getRawTag = __commonJS({
+  "node_modules/lodash/_getRawTag.js"(exports, module) {
+    init_react_shim();
+    var Symbol = require_Symbol();
+    var objectProto = Object.prototype;
+    var hasOwnProperty = objectProto.hasOwnProperty;
+    var nativeObjectToString = objectProto.toString;
+    var symToStringTag = Symbol ? Symbol.toStringTag : void 0;
+    function getRawTag(value) {
+      var isOwn = hasOwnProperty.call(value, symToStringTag), tag = value[symToStringTag];
+      try {
+        value[symToStringTag] = void 0;
+        var unmasked = true;
+      } catch (e) {
+      }
+      var result = nativeObjectToString.call(value);
+      if (unmasked) {
+        if (isOwn) {
+          value[symToStringTag] = tag;
+        } else {
+          delete value[symToStringTag];
+        }
+      }
+      return result;
+    }
+    module.exports = getRawTag;
+  }
+});
+
+// node_modules/lodash/_objectToString.js
+var require_objectToString = __commonJS({
+  "node_modules/lodash/_objectToString.js"(exports, module) {
+    init_react_shim();
+    var objectProto = Object.prototype;
+    var nativeObjectToString = objectProto.toString;
+    function objectToString(value) {
+      return nativeObjectToString.call(value);
+    }
+    module.exports = objectToString;
+  }
+});
+
+// node_modules/lodash/_baseGetTag.js
+var require_baseGetTag = __commonJS({
+  "node_modules/lodash/_baseGetTag.js"(exports, module) {
+    init_react_shim();
+    var Symbol = require_Symbol();
+    var getRawTag = require_getRawTag();
+    var objectToString = require_objectToString();
+    var nullTag = "[object Null]";
+    var undefinedTag = "[object Undefined]";
+    var symToStringTag = Symbol ? Symbol.toStringTag : void 0;
+    function baseGetTag(value) {
+      if (value == null) {
+        return value === void 0 ? undefinedTag : nullTag;
+      }
+      return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+    }
+    module.exports = baseGetTag;
+  }
+});
+
+// node_modules/lodash/isObject.js
+var require_isObject = __commonJS({
+  "node_modules/lodash/isObject.js"(exports, module) {
+    init_react_shim();
+    function isObject(value) {
+      var type = typeof value;
+      return value != null && (type == "object" || type == "function");
+    }
+    module.exports = isObject;
+  }
+});
+
+// node_modules/lodash/isFunction.js
+var require_isFunction = __commonJS({
+  "node_modules/lodash/isFunction.js"(exports, module) {
+    init_react_shim();
+    var baseGetTag = require_baseGetTag();
+    var isObject = require_isObject();
+    var asyncTag = "[object AsyncFunction]";
+    var funcTag = "[object Function]";
+    var genTag = "[object GeneratorFunction]";
+    var proxyTag = "[object Proxy]";
+    function isFunction(value) {
+      if (!isObject(value)) {
+        return false;
+      }
+      var tag = baseGetTag(value);
+      return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+    }
+    module.exports = isFunction;
+  }
+});
+
+// node_modules/lodash/isLength.js
+var require_isLength = __commonJS({
+  "node_modules/lodash/isLength.js"(exports, module) {
+    init_react_shim();
+    var MAX_SAFE_INTEGER = 9007199254740991;
+    function isLength(value) {
+      return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+    }
+    module.exports = isLength;
+  }
+});
+
+// node_modules/lodash/isArrayLike.js
+var require_isArrayLike = __commonJS({
+  "node_modules/lodash/isArrayLike.js"(exports, module) {
+    init_react_shim();
+    var isFunction = require_isFunction();
+    var isLength = require_isLength();
+    function isArrayLike(value) {
+      return value != null && isLength(value.length) && !isFunction(value);
+    }
+    module.exports = isArrayLike;
+  }
+});
+
+// node_modules/lodash/_isIndex.js
+var require_isIndex = __commonJS({
+  "node_modules/lodash/_isIndex.js"(exports, module) {
+    init_react_shim();
+    var MAX_SAFE_INTEGER = 9007199254740991;
+    var reIsUint = /^(?:0|[1-9]\d*)$/;
+    function isIndex(value, length) {
+      var type = typeof value;
+      length = length == null ? MAX_SAFE_INTEGER : length;
+      return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
+    }
+    module.exports = isIndex;
+  }
+});
+
+// node_modules/lodash/_isIterateeCall.js
+var require_isIterateeCall = __commonJS({
+  "node_modules/lodash/_isIterateeCall.js"(exports, module) {
+    init_react_shim();
+    var eq = require_eq();
+    var isArrayLike = require_isArrayLike();
+    var isIndex = require_isIndex();
+    var isObject = require_isObject();
+    function isIterateeCall(value, index, object) {
+      if (!isObject(object)) {
+        return false;
+      }
+      var type = typeof index;
+      if (type == "number" ? isArrayLike(object) && isIndex(index, object.length) : type == "string" && index in object) {
+        return eq(object[index], value);
+      }
+      return false;
+    }
+    module.exports = isIterateeCall;
+  }
+});
+
+// node_modules/lodash/_trimmedEndIndex.js
+var require_trimmedEndIndex = __commonJS({
+  "node_modules/lodash/_trimmedEndIndex.js"(exports, module) {
+    init_react_shim();
+    var reWhitespace = /\s/;
+    function trimmedEndIndex(string) {
+      var index = string.length;
+      while (index-- && reWhitespace.test(string.charAt(index))) {
+      }
+      return index;
+    }
+    module.exports = trimmedEndIndex;
+  }
+});
+
+// node_modules/lodash/_baseTrim.js
+var require_baseTrim = __commonJS({
+  "node_modules/lodash/_baseTrim.js"(exports, module) {
+    init_react_shim();
+    var trimmedEndIndex = require_trimmedEndIndex();
+    var reTrimStart = /^\s+/;
+    function baseTrim(string) {
+      return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
+    }
+    module.exports = baseTrim;
+  }
+});
+
+// node_modules/lodash/isObjectLike.js
+var require_isObjectLike = __commonJS({
+  "node_modules/lodash/isObjectLike.js"(exports, module) {
+    init_react_shim();
+    function isObjectLike(value) {
+      return value != null && typeof value == "object";
+    }
+    module.exports = isObjectLike;
+  }
+});
+
+// node_modules/lodash/isSymbol.js
+var require_isSymbol = __commonJS({
+  "node_modules/lodash/isSymbol.js"(exports, module) {
+    init_react_shim();
+    var baseGetTag = require_baseGetTag();
+    var isObjectLike = require_isObjectLike();
+    var symbolTag = "[object Symbol]";
+    function isSymbol(value) {
+      return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
+    }
+    module.exports = isSymbol;
+  }
+});
+
+// node_modules/lodash/toNumber.js
+var require_toNumber = __commonJS({
+  "node_modules/lodash/toNumber.js"(exports, module) {
+    init_react_shim();
+    var baseTrim = require_baseTrim();
+    var isObject = require_isObject();
+    var isSymbol = require_isSymbol();
+    var NAN = 0 / 0;
+    var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+    var reIsBinary = /^0b[01]+$/i;
+    var reIsOctal = /^0o[0-7]+$/i;
+    var freeParseInt = parseInt;
+    function toNumber(value) {
+      if (typeof value == "number") {
+        return value;
+      }
+      if (isSymbol(value)) {
+        return NAN;
+      }
+      if (isObject(value)) {
+        var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+        value = isObject(other) ? other + "" : other;
+      }
+      if (typeof value != "string") {
+        return value === 0 ? value : +value;
+      }
+      value = baseTrim(value);
+      var isBinary = reIsBinary.test(value);
+      return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+    }
+    module.exports = toNumber;
+  }
+});
+
+// node_modules/lodash/toFinite.js
+var require_toFinite = __commonJS({
+  "node_modules/lodash/toFinite.js"(exports, module) {
+    init_react_shim();
+    var toNumber = require_toNumber();
+    var INFINITY = 1 / 0;
+    var MAX_INTEGER = 17976931348623157e292;
+    function toFinite(value) {
+      if (!value) {
+        return value === 0 ? value : 0;
+      }
+      value = toNumber(value);
+      if (value === INFINITY || value === -INFINITY) {
+        var sign = value < 0 ? -1 : 1;
+        return sign * MAX_INTEGER;
+      }
+      return value === value ? value : 0;
+    }
+    module.exports = toFinite;
+  }
+});
+
+// node_modules/lodash/_createRange.js
+var require_createRange = __commonJS({
+  "node_modules/lodash/_createRange.js"(exports, module) {
+    init_react_shim();
+    var baseRange = require_baseRange();
+    var isIterateeCall = require_isIterateeCall();
+    var toFinite = require_toFinite();
+    function createRange(fromRight) {
+      return function(start, end, step) {
+        if (step && typeof step != "number" && isIterateeCall(start, end, step)) {
+          end = step = void 0;
+        }
+        start = toFinite(start);
+        if (end === void 0) {
+          end = start;
+          start = 0;
+        } else {
+          end = toFinite(end);
+        }
+        step = step === void 0 ? start < end ? 1 : -1 : toFinite(step);
+        return baseRange(start, end, step, fromRight);
+      };
+    }
+    module.exports = createRange;
+  }
+});
+
+// node_modules/lodash/range.js
+var require_range = __commonJS({
+  "node_modules/lodash/range.js"(exports, module) {
+    init_react_shim();
+    var createRange = require_createRange();
+    var range2 = createRange();
+    module.exports = range2;
+  }
+});
 
 // libs/shared/ui-system/src/lib/Pagination/Pagination.tsx
 init_react_shim();
-var import_lodash = __toModule(require_lodash());
-import {useMemo} from "react";
-import {HStack} from "../Layout/HStack/index.js";
-import {Icon} from "../Icon/index.js";
-var Pagination = ({totalPage, pageSize = 5, onChange, currentIndex}) => {
+var import_range = __toModule(require_range());
+import { useMemo } from "react";
+import { HStack } from "../Layout/HStack/index.js";
+import { Icon } from "../Icon/index.js";
+var Pagination = ({ totalPage, pageSize = 5, onChange, currentIndex }) => {
   const handleChange = (pageIndex) => () => {
-    onChange?.(pageIndex);
+    onChange == null ? void 0 : onChange(pageIndex);
   };
   const handleIncrease = handleChange(currentIndex + 1);
   const handleDecrease = handleChange(currentIndex - 1);
   const indices = useMemo(() => {
     const oddPageSize = pageSize % 2 === 0 ? pageSize - 1 : pageSize;
     const endIndex = totalPage - 1;
-    return (0, import_lodash.range)(currentIndex - Math.floor(oddPageSize / 2), currentIndex + Math.floor(oddPageSize / 2) + 1).map((item, _, items2) => item + (items2[0] < 0 ? -items2[0] : 0)).map((item, _, items2) => item + (items2[oddPageSize - 1] > endIndex ? endIndex - items2[oddPageSize - 1] : 0)).filter((item) => item <= endIndex && item >= 0);
+    return (0, import_range.default)(currentIndex - Math.floor(oddPageSize / 2), currentIndex + Math.floor(oddPageSize / 2) + 1).map((item, _, items2) => item + (items2[0] < 0 ? -items2[0] : 0)).map((item, _, items2) => item + (items2[oddPageSize - 1] > endIndex ? endIndex - items2[oddPageSize - 1] : 0)).filter((item) => item <= endIndex && item >= 0);
   }, [currentIndex, totalPage, pageSize]);
-  const items = useMemo(() => indices.map((index) => ({index, page: index + 1, isCurrent: currentIndex === index})), [
+  const items = useMemo(() => indices.map((index) => ({ index, page: index + 1, isCurrent: currentIndex === index })), [
     indices,
     currentIndex
   ]);
@@ -50,7 +413,7 @@ var Pagination = ({totalPage, pageSize = 5, onChange, currentIndex}) => {
     as: "ul",
     spacing: 2,
     alignment: "center"
-  }, items.map(({index, page, isCurrent}) => /* @__PURE__ */ React.createElement(HStack, {
+  }, items.map(({ index, page, isCurrent }) => /* @__PURE__ */ React.createElement(HStack, {
     as: "li",
     key: page
   }, /* @__PURE__ */ React.createElement(RoundButton, {