@shoplflow/base 0.26.5 → 0.26.6

package/dist/index.d.cts

@@ -1076,4 +1076,50 @@ declare const Tooltip: {
     Content: ({ content, ...args }: TooltipContentProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+interface PaginationProps extends PaginationOptionProps, HTMLAttributes<HTMLDivElement> {
+}
+interface PaginationOptionProps extends LeftAndRightNodeProps {
+    /**
+     * 선택된 페이지
+     * @description: index입니다.
+     * @example: 1 page > 0 index
+     */
+    currentPage: number;
+    /**
+     * 페이지에 보여질 아이템(List) 갯수
+     * @default: 20
+     */
+    pageSize: string;
+    /**
+     *  테이블 아이템 총 갯수
+     */
+    itemsTotalCount: number;
+    /**
+     * 라인에 보여지는 최대 페이지 갯수
+     * @default: 5
+     * @example: [1] [2] [3] [4] [5]
+     */
+    pageCount?: number;
+    previousPage: () => void;
+    nextPage: () => void;
+    gotoPage: (updater: ((pageIndex: number) => number) | number) => void;
+}
+interface PaginationSizeSelectorProps {
+    data: Array<{
+        label: string;
+        value: string;
+    }>;
+    /**
+     * 페이지에 보여질 아이템(List) 갯수
+     * @default: 20
+     */
+    pageSize?: string;
+    setPageSize: (value: string) => void;
+}
+
+declare const Pagination: {
+    ({ currentPage, pageCount, itemsTotalCount, pageSize, previousPage, nextPage, gotoPage, leftSource, rightSource, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
+    SizeSelector: ({ data, pageSize, setPageSize }: PaginationSizeSelectorProps) => react_jsx_runtime.JSX.Element;
+};
+
+export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.d.ts

@@ -1076,4 +1076,50 @@ declare const Tooltip: {
     Content: ({ content, ...args }: TooltipContentProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+interface PaginationProps extends PaginationOptionProps, HTMLAttributes<HTMLDivElement> {
+}
+interface PaginationOptionProps extends LeftAndRightNodeProps {
+    /**
+     * 선택된 페이지
+     * @description: index입니다.
+     * @example: 1 page > 0 index
+     */
+    currentPage: number;
+    /**
+     * 페이지에 보여질 아이템(List) 갯수
+     * @default: 20
+     */
+    pageSize: string;
+    /**
+     *  테이블 아이템 총 갯수
+     */
+    itemsTotalCount: number;
+    /**
+     * 라인에 보여지는 최대 페이지 갯수
+     * @default: 5
+     * @example: [1] [2] [3] [4] [5]
+     */
+    pageCount?: number;
+    previousPage: () => void;
+    nextPage: () => void;
+    gotoPage: (updater: ((pageIndex: number) => number) | number) => void;
+}
+interface PaginationSizeSelectorProps {
+    data: Array<{
+        label: string;
+        value: string;
+    }>;
+    /**
+     * 페이지에 보여질 아이템(List) 갯수
+     * @default: 20
+     */
+    pageSize?: string;
+    setPageSize: (value: string) => void;
+}
+
+declare const Pagination: {
+    ({ currentPage, pageCount, itemsTotalCount, pageSize, previousPage, nextPage, gotoPage, leftSource, rightSource, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
+    SizeSelector: ({ data, pageSize, setPageSize }: PaginationSizeSelectorProps) => react_jsx_runtime.JSX.Element;
+};
+
+export { Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, Dropdown, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };

package/dist/index.js

@@ -5,13 +5,13 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
-import { useMergeRefs, noop, OutSideClick, useParentElementClick, isNullOrUndefined } from '@shoplflow/utils';
+import { useMergeRefs, noop, OutSideClick, useSelect, useParentElementClick, isNullOrUndefined } from '@shoplflow/utils';
 import Scrollbars from 'react-custom-scrollbars-2';
 import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/react';
 export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
 import { useFloating } from '@floating-ui/react-dom';
 import * as ShoplAssets from '@shoplflow/shopl-assets';
-import { DownArrowSolidXsmallIcon } from '@shoplflow/shopl-assets';
+import { DownArrowSolidXsmallIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon } from '@shoplflow/shopl-assets';
 import * as HadaAssets from '@shoplflow/hada-assets';
 import { flip, shift } from '@floating-ui/core';
 
@@ -3411,6 +3411,122 @@ var Tooltip = (_a) => {
 };
 Tooltip.Content = TooltipContent;
 var Tooltip_default = Tooltip;
+var PaginationWrapper = styled6.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+`;
+var StyledPagination = styled6.nav`
+  display: flex;
+  align-items: center;
+`;
+var PageItem = styled6.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: ${borderRadiusTokens.borderRadius08};
+  background-color: ${({ isActive }) => isActive ? colorTokens.neutral300 : colorTokens.neutral0};
+  font-size: 13px;
+  font-weight: ${({ isActive }) => isActive && "600"};
+  line-height: 2;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ isActive }) => isActive ? colorTokens.neutral300 : colorTokens.neutral100};
+  }
+`;
+var Ellipsis = styled6.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+`;
+var PaginationSizeSelector = ({ data, pageSize, setPageSize }) => {
+  const { selectedItem, handleToggleSelect } = useSelect("SINGLE", data, {
+    key: "value"
+  });
+  const handleClickMenu = (value) => {
+    handleToggleSelect(value);
+    setPageSize(value);
+  };
+  return /* @__PURE__ */ jsx(
+    Dropdown_default,
+    {
+      option: "CLICK",
+      width: "66px",
+      trigger: /* @__PURE__ */ jsx(
+        Dropdown_default.Button,
+        {
+          placeholder: String(pageSize),
+          sizeVar: "S",
+          value: selectedItem && /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", color: "neutral400", children: selectedItem.label })
+        }
+      ),
+      popper: /* @__PURE__ */ jsx(Dropdown_default.Content, { type: "FILL", children: data.map((item) => {
+        const isSelected = item.value === pageSize;
+        return /* @__PURE__ */ jsx(Menu_default, { isSelected, onClick: () => handleClickMenu(item.value), children: item.label }, item.value);
+      }) })
+    }
+  );
+};
+var PaginationSizeSelector_default = PaginationSizeSelector;
+var Pagination = (_a) => {
+  var _b = _a, {
+    currentPage,
+    pageCount = 5,
+    itemsTotalCount,
+    pageSize,
+    previousPage,
+    nextPage,
+    gotoPage,
+    leftSource,
+    rightSource
+  } = _b, rest = __objRest(_b, [
+    "currentPage",
+    "pageCount",
+    "itemsTotalCount",
+    "pageSize",
+    "previousPage",
+    "nextPage",
+    "gotoPage",
+    "leftSource",
+    "rightSource"
+  ]);
+  const pageTotalCount = Math.ceil(itemsTotalCount / Number(pageSize));
+  const showLeftEllipsis = currentPage > pageCount - 1;
+  const showRightEllipsis = currentPage < pageTotalCount && Math.ceil((currentPage + 1) / pageCount) < Math.ceil(pageTotalCount / pageCount);
+  const canPreviousPage = currentPage > 0;
+  const canNextPage = currentPage < pageTotalCount - 1;
+  return /* @__PURE__ */ jsxs(PaginationWrapper, __spreadProps(__spreadValues({}, rest), { children: [
+    leftSource ? leftSource : /* @__PURE__ */ jsx("div", {}),
+    /* @__PURE__ */ jsxs(StyledPagination, { "data-shoplflow": "Pagination", children: [
+      /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", disabled: !canPreviousPage, onClick: () => gotoPage(0), children: /* @__PURE__ */ jsx(Icon_default, { iconSource: FirstPageIcon, color: "neutral400", sizeVar: "S" }) }),
+      /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", onClick: previousPage, disabled: !canPreviousPage, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: LeftArrowIcon, color: "neutral400", sizeVar: "S" }) }),
+      showLeftEllipsis && /* @__PURE__ */ jsx(Ellipsis, { children: /* @__PURE__ */ jsx(Text_default, { children: "..." }) }),
+      [...Array(pageTotalCount)].splice(0, pageCount).map(
+        (_, idx) => idx + Math.floor(currentPage / pageCount) * pageCount < pageTotalCount && /* @__PURE__ */ jsx(
+          PageItem,
+          {
+            isActive: currentPage === idx + Math.floor(currentPage / pageCount) * pageCount,
+            onClick: () => gotoPage(idx + Math.floor(currentPage / pageCount) * pageCount),
+            children: idx + 1 + Math.floor(currentPage / pageCount) * pageCount
+          },
+          idx
+        )
+      ),
+      showRightEllipsis && /* @__PURE__ */ jsx(Ellipsis, { children: /* @__PURE__ */ jsx(Text_default, { children: "..." }) }),
+      /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", onClick: nextPage, disabled: !canNextPage, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: RightArrowIcon, color: "neutral400", sizeVar: "S" }) }),
+      /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", disabled: !canNextPage, onClick: () => gotoPage(pageTotalCount - 1), children: /* @__PURE__ */ jsx(Icon_default, { iconSource: EndPageIcon, color: "neutral400", sizeVar: "S" }) })
+    ] }),
+    rightSource ? rightSource : /* @__PURE__ */ jsx("div", {})
+  ] }));
+};
+Pagination.SizeSelector = PaginationSizeSelector_default;
+var Pagination_default = Pagination;
 var SpaceMarginWrapper = styled6(motion.div)`
   position: relative;
   display: flex;
@@ -3465,6 +3581,6 @@ classnames/index.js:
   *)
 */
 
-export { Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MotionStack, MotionStackContainer, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, Tooltip_default as Tooltip, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { Avatar_default as Avatar, AvatarSizeVariants, Button_default as Button, ButtonSizeVariants, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout_default as Callout, CalloutTypes, Checkbox_default as Checkbox, CheckboxStyleVariants, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Dropdown_default as Dropdown, Icon_default as Icon, IconButton_default as IconButton, IconButtonSizeVariants, IconButtonStyleVariants, IconSizeVariants, Input_default as Input, InputButton_default as InputButton, List_default as List, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu_default as Menu, MenuSizeVariants, MinusButton_default as MinusButton, Modal, ModalContext, ModalHandlerContext, ModalPortal_default as ModalProvider, ModalSize, MotionStack, MotionStackContainer, Pagination_default as Pagination, Popper_default as Popper, PopperPortal, PopperTrigger, RADIO_SYMBOL_KEY, Radio_default as Radio, ScrollArea_default as ScrollArea, SelectInputButton_default as SelectInputButton, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StackContainer_default as StackContainer, StyledIcon, StyledStack, StyledStackContainer, Switch_default as Switch, Tag_default as Tag, TagSizeVariants, TagStyleVariants, Text_default as Text, Text2Rows, TextArea_default as TextArea, Tooltip_default as Tooltip, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map