fis-component 0.0.34 → 0.0.36

package/dist/cjs/types/src/assets/icons/ChevronLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from "./SVGIconProps";
+declare function ChevronLeftIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export default ChevronLeftIcon;

package/dist/cjs/types/src/assets/icons/ChevronRightIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from "./SVGIconProps";
+declare function ChevronRightIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export default ChevronRightIcon;

package/dist/cjs/types/src/assets/icons/InfoIcon.d.ts

@@ -1,3 +1,2 @@
 import { SvgIconProps } from "./SVGIconProps";
-declare function InfoIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
-export default InfoIcon;
+export default function InfoIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/assets/icons/index.d.ts

@@ -37,3 +37,5 @@ export { default as MoreIcon } from "./MoreIcon";
 export { default as NoDataIcon } from "./NoDataIcon";
 export { default as NoResultIcon } from "./NoResultIcon";
 export { default as RemoveIcon } from "./RemoveIcon";
+export { default as ChevronLeftIcon } from "./ChevronLeftIcon";
+export { default as ChevronRightIcon } from "./ChevronRightIcon";

package/dist/cjs/types/src/components/Breadcrumb/index.d.ts

@@ -3,7 +3,7 @@ export interface BreadcrumbItemProps extends ComponentPropsWithoutRef<"button">
     icon?: React.ReactNode;
     label?: string;
     active?: boolean;
-    onClick: () => void;
+    onClick?: () => void;
 }
 export type BreadcrumbProps = {
     items: BreadcrumbItemProps[];

package/dist/cjs/types/src/components/MenuSelect/types.d.ts

@@ -4,7 +4,7 @@ export interface MenuItem {
     value: string;
 }
 export interface MenuGroup {
-    groupLabel: string;
+    groupLabel?: string;
     items: MenuItem[];
 }
 export type MenuSize = "md" | "lg";

package/dist/cjs/types/src/components/Pagination/Pagination.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PaginationProps } from "./";
+declare const _default: Meta<PaginationProps>;
+export default _default;
+export declare const Default: StoryObj<PaginationProps>;
+export declare const Minimized: StoryObj<PaginationProps>;
+export declare const CustomTotal: StoryObj<PaginationProps>;
+export declare const WithRecordCounted: StoryObj<PaginationProps>;

package/dist/cjs/types/src/components/Pagination/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { PaginationProps as AntdPaginationProps } from "antd";
+export interface PaginationProps extends AntdPaginationProps {
+    minimize?: boolean;
+    recordCounted?: boolean;
+    onIconPageRecordClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+declare const FISPagination: React.FC<PaginationProps>;
+export default FISPagination;

package/dist/cjs/types/src/components/Pagination/styles.d.ts

@@ -0,0 +1,25 @@
+export declare const PaginationAntdSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("antd").PaginationProps, {
+    $minimize?: boolean;
+}>> & string & Omit<import("react").FC<import("antd").PaginationProps>, keyof import("react").Component<any, {}, any>>;
+export declare const DivPaginationContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DivPaginationContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SpanTotalSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const SelectPageSizeSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Partial<import("../Input/InputLabel").InputLabelProps> & Omit<import("../MenuSelect/types").MenuProps, "size" | "onClickMenu" | "groups" | "multi" | "selectedValues" | "onChangeSelected"> & Omit<import("../SelectItem").SelectFieldProps, "onChange" | "value"> & {
+    options: import("../Select/types").SelectOption[];
+    message?: string;
+    placeholderSearch?: string;
+    positive?: boolean;
+    multiDisplayText?: (count: number) => string;
+    renderOption?: (option: import("../Select/types").SelectOption) => React.ReactNode;
+} & import("../Select/types").SingleSelect<string> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}) | (Omit<Partial<import("../Input/InputLabel").InputLabelProps> & Omit<import("../MenuSelect/types").MenuProps, "size" | "onClickMenu" | "groups" | "multi" | "selectedValues" | "onChangeSelected"> & Omit<import("../SelectItem").SelectFieldProps, "onChange" | "value"> & {
+    options: import("../Select/types").SelectOption[];
+    message?: string;
+    placeholderSearch?: string;
+    positive?: boolean;
+    multiDisplayText?: (count: number) => string;
+    renderOption?: (option: import("../Select/types").SelectOption) => React.ReactNode;
+} & import("../Select/types").MultiSelect<string> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}), import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Select/types").SelectProps<string> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/cjs/types/src/components/Select/types.d.ts

@@ -1,8 +1,8 @@
-import { InputFieldProps } from "../Input/InputField";
 import { InputLabelProps } from "../Input/InputLabel";
 import { MenuProps } from "../MenuSelect/types";
+import { SelectFieldProps } from "../SelectItem";
 export interface SelectOption {
-    groupLabel: string;
+    groupLabel?: string;
     items: {
         label: string;
         description?: string;
@@ -21,7 +21,7 @@ export type MultiSelect<T> = {
     onChange: (value: T[]) => void;
     displayValue?: (value: SelectOption[]) => string;
 };
-export type SelectProps<T> = Omit<InputFieldProps, "value" | "onChange"> & Partial<InputLabelProps> & Omit<MenuProps, "groups" | "multi" | "selectedValues" | "onChangeSelected" | "onClickMenu"> & {
+export type SelectProps<T> = Partial<InputLabelProps> & Omit<MenuProps, "groups" | "multi" | "selectedValues" | "onChangeSelected" | "onClickMenu" | "size"> & Omit<SelectFieldProps, "value" | "onChange"> & {
     options: SelectOption[];
     message?: string;
     placeholderSearch?: string;

package/dist/cjs/types/src/components/Select/utils.d.ts

@@ -0,0 +1,2 @@
+import { MenuSize } from "../MenuSelect/types";
+export declare function isMenuSize(value: any): value is MenuSize;

package/dist/cjs/types/src/components/SelectItem/index.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, JSX } from "react";
 export type SelectSize = "xs" | "sm" | "md" | "lg";
-export interface SelectFieldProps extends Omit<ComponentPropsWithoutRef<"input">, "onClick"> {
+export interface SelectFieldProps extends Omit<ComponentPropsWithoutRef<"input">, "onClick" | "size"> {
     /**Control the size of the component*/
     size?: SelectSize;
     /**Prefix for filter value*/
@@ -11,10 +11,6 @@ export interface SelectFieldProps extends Omit<ComponentPropsWithoutRef<"input">
     actived?: boolean;
     /**active-dropdown for current field*/
     activeDropdown?: boolean;
-    /** onClickSuffix for current field Button */
-    onClickSuffix?: () => void;
-    /** onClickPrefix for current field Button */
-    onClickPrefix?: () => void;
 }
 declare const FISSelectItem: import("react").ForwardRefExoticComponent<SelectFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export default FISSelectItem;

package/dist/cjs/types/src/components/Toast/ToastContext.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
-import { ToastProps } from ".";
+import { ToastProps, ToastPositionType } from ".";
 interface ToastOptions extends ToastProps {
     duration?: number;
+    position?: ToastPositionType;
 }
 export interface ToastContextType {
     showToast: (options: ToastOptions) => void;

package/dist/cjs/types/src/components/Toast/index.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 export type ThemeType = "neutral" | "info" | "positive" | "caution" | "negative";
 export type ToastType = "link" | "button" | "no-action";
 export type PositionType = "inline" | "bottom";
+export type ToastPositionType = "top-center" | "bottom-center";
 export type ToastProps = {
     className?: string;
     theme?: ThemeType;

package/dist/cjs/types/src/components/Toast/styles.d.ts

@@ -9,5 +9,7 @@ export declare const DivIconSC: import("styled-components/dist/types").IStyledCo
 export declare const PTitleSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, ToastProps>> & string;
 export declare const LinkSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 export declare const DivTitleWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ToastProps>> & string;
-export declare const ToastWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ToastWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $position?: "top-center" | "bottom-center";
+}>> & string;
 export {};

package/dist/cjs/types/src/components/Toast/useToast.d.ts

@@ -1,2 +1,3 @@
 import { ToastContextType } from "./ToastContext";
-export declare const useToast: () => ToastContextType;
+declare const useToast: () => ToastContextType;
+export default useToast;

package/dist/cjs/types/src/index.d.ts

@@ -41,3 +41,8 @@ export { default as FISProgressLinear } from "./components/ProgressLinear";
 export { default as FISSplitButton } from "./components/SplitButton";
 export { default as FISSelect } from "./components/Select";
 export { default as FISSelectItem } from "./components/SelectItem";
+export { default as useNotification } from "./components/Notification/useNotification";
+export { default as useToast } from "./components/Toast/useToast";
+export { default as FISHeaderCell } from "./components/Table/HeaderCell";
+export { default as FISColumnCell } from "./components/Table/ColumnCell";
+export { default as FISPagination } from "./components/Pagination";

package/dist/esm/index.js

@@ -12992,7 +12992,7 @@ function mergeConfig() {
   });
   return clone;
 }
-function useNotification$1() {
+function useNotification$2() {
   var rootConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _rootConfig$getContai = rootConfig.getContainer,
     getContainer = _rootConfig$getContai === void 0 ? defaultGetContainer : _rootConfig$getContai,
@@ -22078,7 +22078,7 @@ const Holder = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   // ============================== Motion ===============================
   const getNotificationMotion = () => getMotion$2(prefixCls);
   // ============================== Origin ===============================
-  const [api, holder] = useNotification$1({
+  const [api, holder] = useNotification$2({
     prefixCls,
     style: getStyle,
     className: getClassName,
@@ -22193,7 +22193,7 @@ function useInternalNotification(notificationConfig) {
     ref: holderRef
   }))];
 }
-function useNotification(notificationConfig) {
+function useNotification$1(notificationConfig) {
   return useInternalNotification(notificationConfig);
 }
 
@@ -50142,7 +50142,7 @@ const baseStaticMethods = {
   open,
   destroy,
   config: setNotificationGlobalConfig,
-  useNotification,
+  useNotification: useNotification$1,
   _InternalPanelDoNotUseOrYouWillBeFired: PurePanel$5
 };
 const staticMethods = baseStaticMethods;
@@ -61071,7 +61071,7 @@ const ButtonStyled = styled.button `
           `}
 
           &:disabled {
-            background-color: ${getTheme("com/button/disable/background-color-transparent")};
+            background-color: ${getTheme("com/button/disable/background-color")};
             border-color: ${getTheme("com/button/disable/stroke-color")};
             color: ${getTheme("com/button/disable/icon-color")} !important;
           }
@@ -61548,8 +61548,7 @@ function ExitIcon(props) {
 }
 
 function InfoIcon(props) {
-    const { width = 16, height = 16, ...rest } = props;
-    return (jsx("svg", { width: width, height: height, viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.60018 0.666626C4.55009 0.666626 1.26685 3.94987 1.26685 7.99996C1.26685 12.05 4.55009 15.3333 8.60018 15.3333C12.6503 15.3333 15.9335 12.05 15.9335 7.99996C15.9335 3.94987 12.6503 0.666626 8.60018 0.666626ZM8.60018 4.66663C8.23199 4.66663 7.93351 4.9651 7.93351 5.33329C7.93351 5.70148 8.23199 5.99996 8.60018 5.99996H8.60685C8.97504 5.99996 9.27351 5.70148 9.27351 5.33329C9.27351 4.9651 8.97504 4.66663 8.60685 4.66663H8.60018ZM9.26685 7.99996C9.26685 7.63177 8.96837 7.33329 8.60018 7.33329C8.23199 7.33329 7.93351 7.63177 7.93351 7.99996V10.6666C7.93351 11.0348 8.23199 11.3333 8.60018 11.3333C8.96837 11.3333 9.26685 11.0348 9.26685 10.6666V7.99996Z", fill: "#0083F0" }) }));
+    return (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("g", { "clip-path": "url(#clip0_6263_11228)", children: jsx("path", { d: "M7.99967 10.6667V8.00004M7.99967 5.33337H8.00634M14.6663 8.00004C14.6663 11.6819 11.6816 14.6667 7.99967 14.6667C4.31778 14.6667 1.33301 11.6819 1.33301 8.00004C1.33301 4.31814 4.31778 1.33337 7.99967 1.33337C11.6816 1.33337 14.6663 4.31814 14.6663 8.00004Z", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_6263_11228", children: jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }));
 }
 
 function CheckIcon(props) {
@@ -61621,6 +61620,16 @@ function RemoveIcon(props) {
     return (jsx("svg", { width: width, height: height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsx("path", { d: "M6.6665 9.99999H13.3332M18.3332 9.99999C18.3332 14.6024 14.6022 18.3333 9.99984 18.3333C5.39746 18.3333 1.6665 14.6024 1.6665 9.99999C1.6665 5.39762 5.39746 1.66666 9.99984 1.66666C14.6022 1.66666 18.3332 5.39762 18.3332 9.99999Z", stroke: "#A80A12", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
 }
 
+function ChevronLeftIcon(props) {
+    const { width = 16, height = 16, ...rest } = props;
+    return (jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}
+
+function ChevronRightIcon(props) {
+    const { width = 16, height = 16, ...rest } = props;
+    return (jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsx("path", { d: "M6 12L10 8L6 4", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}
+
 const renderSystemNotification = ({ title, description, imgUrl, okText = "ok", cancelText = "Dismiss", moreOption, onMoreClick, onOk, onCancel, onClose, }) => {
     return (jsxs(DivNotificationSystemWrapperSC, { children: [jsx(ImgNotificationSystemSC, { src: imgUrl }), jsxs(DivNotificationSystemContainerSC, { children: [jsxs(DivNotificationContentWrapperSC, { children: [jsxs(DivNotificationContentSC, { children: [jsxs(DivNotificationHeaderSC, { children: [jsx(DivNotificationTitleSC, { children: title }), moreOption && (jsx(DivIconActionSC, { children: jsx(FISIconButton, { variant: "tertiary-invisible", size: "xs", icon: jsx(MoreIcon, {}), onClick: onMoreClick }) }))] }), jsx(DivNotificationDescriptionSC, { children: description })] }), jsxs(DivNotificationActionsSC, { children: [jsx(FISLinkButton, { size: "xs", variant: "hight-priority", onClick: onOk, children: okText }), jsx(FISLinkButton, { size: "xs", onClick: onCancel, children: cancelText })] })] }), jsx(DivIconActionSC, { children: jsx(FISIconButton, { icon: jsx(CloseIcon, {}), size: "xs", variant: "tertiary-invisible", onClick: onClose }) })] })] }));
 };
@@ -61802,13 +61811,13 @@ const DivTitleWrap = styled.div `
 `;
 const ToastWrapper = styled.div `
   position: fixed;
-  bottom: 20px;
+  ${(props) => props.$position === "bottom-center" ? "bottom: 20px;" : "top: 20px;"}
   left: 50%;
   transform: translateX(-50%);
   z-index: 1000;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 `;
 
 const getPadding = (size, borderPath) => {
@@ -62534,7 +62543,7 @@ const ToastProvider = ({ children, }) => {
             setToasts((prev) => prev.slice(1));
         }, duration);
     }, []);
-    return (jsxs(ToastContext.Provider, { value: { showToast }, children: [children, toasts.length > 0 && (jsx(ToastWrapper, { children: toasts.map((toast, index) => (jsx(FISToast, { ...toast }, index))) }))] }));
+    return (jsxs(ToastContext.Provider, { value: { showToast }, children: [children, toasts.length > 0 && (jsx(ToastWrapper, { "$position": toasts[0].position || "top-center", children: toasts.map((toast, index) => (jsx(FISToast, { ...toast }, index))) }))] }));
 };
 
 const FISThemeProvider = ({ theme: theme$1 = theme, children, }) => (jsxs(ThemeProvider, { theme: theme$1, children: [jsx(GlobalStyle, { theme: theme$1 }), jsx(NotificationProvider, { children: jsx(ToastProvider, { children: children }) })] }));
@@ -66252,7 +66261,6 @@ FISTooltip.displayName = "FISTooltip";
 
 const DivContainerSC$4 = styled.div `
   width: unset;
-  height: ${getTheme("com/menu/height")};
   min-width: ${getTheme("com/menu/min-width")};
   max-height: ${getTheme("com/menu/max-height")};
   border-radius: ${getTheme("com/menu/corner-radius")};
@@ -67329,7 +67337,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             : null;
         const otherGroups = groups
             .map((group) => ({
-            groupLabel: group.groupLabel,
+            groupLabel: group?.groupLabel,
             items: group.items.filter((item) => (!multi || !selectedValues?.includes(item.value)) &&
                 item?.label?.toLowerCase().includes(search.toLowerCase())),
         }))
@@ -67394,7 +67402,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             onClickMenu?.();
         }
     };
-    return (jsx(DivContainerSC$4, { className: className, children: jsxs(DivWrapperMenuSC, { children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!menuState.removeSelectedGroup, children: menuState.filteredGroups.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), jsx(FISMenuSection, { label: group.groupLabel }), group.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues?.includes(item.value), type: "select" }, idx)))] }, index))) }), menuState.removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: menuState.removeSelectedGroup.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }) }));
+    return (jsx(DivContainerSC$4, { className: className, children: jsxs(DivWrapperMenuSC, { children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!menuState.removeSelectedGroup, children: menuState.filteredGroups.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), jsx(FISMenuSection, { label: group?.groupLabel }), group.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues?.includes(item.value), type: "select" }, idx)))] }, index))) }), menuState.removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: menuState.removeSelectedGroup.items.map((item, idx) => (jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }) }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";
 
@@ -71189,7 +71197,6 @@ const DivHeaderCellContainerSC = styled.div `
 
     .cell-content {
       display: flex;
-      align-items: center;
       justify-content: ${(props) => props.$align === "right" ? "flex-end" : "space-between"};
       min-height: ${getTheme("com/segmented/item/active-surface/size-sm/height")};
       width: 100%;
@@ -71218,6 +71225,17 @@ const DivHeaderCellContainerSC = styled.div `
 }};
       }
 
+      .right-component-father {
+        display: flex;
+        justify-content: center;
+        width: ${getTheme("com/button/size-xs/icon/size-icon")};
+        height: ${getTheme("com/button/size-xs/icon/size-icon")};
+        .right-component-child {
+          flex-shrink: 0;
+          align-self: center;
+        }
+      }
+
       ${(props) => {
     if (props.$disabled) {
         return css `
@@ -71242,7 +71260,7 @@ const DivHeaderCellContainerSC = styled.div `
 `;
 
 const FISHeaderCell = forwardRef(({ className, textAlign, label, description, rightComponent, disabled, hasRightDivider = true, hasTruncateLabel = false, onlyIcon = false, align = "left", ...rest }, ref) => {
-    return (jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$align": align, "$onlyIcon": onlyIcon, ...rest, children: jsxs("div", { className: "header-cell-content", children: [jsxs("div", { className: "cell-content", children: [label && jsx("div", { className: "label", children: label }), rightComponent] }), align === "right" ? (jsxs("div", { className: "cell-content", children: [description && jsx("div", { className: "description", children: description }), jsx("span", { children: rightComponent })] })) : (jsx(Fragment, { children: description && jsx("div", { className: "description", children: description }) }))] }) }));
+    return (jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$align": align, "$onlyIcon": onlyIcon, ...rest, children: jsxs("div", { className: "header-cell-content", children: [jsxs("div", { className: "cell-content", children: [label && jsx("div", { className: "label", children: label }), jsx("div", { className: "right-component-father", children: jsx("div", { className: "right-component-child", children: rightComponent }) })] }), jsx("div", { className: "cell-content", children: description && jsx("div", { className: "description", children: description }) })] }) }));
 });
 FISHeaderCell.displayName = "FISHeaderCell";
 
@@ -71590,7 +71608,6 @@ const DivDateRangeContainerSC = styled.div `
   align-items: flex-start;
   gap: ${getTheme("com/input/vertical-gap")};
   width: 100%;
-  padding: ${getTheme("sem/dimension/padding/xl")};
   .ant-picker-range {
     width: 100%;
     border: none;
@@ -73207,15 +73224,19 @@ const DivContainerSC = styled.div `
   }
 `;
 
-const FISSelectItem = forwardRef(({ onClickSuffix, onClickPrefix, ...props }, ref) => {
+const FISSelectItem = forwardRef((props, ref) => {
     const { size = "md", iconPrefix, iconSuffix, disabled, activeDropdown, ...rest } = props;
     return (jsx(DivContainerSC, { className: classNames({
             iconPrefix: iconPrefix,
-        }), "$size": size, children: jsxs(DivWrapperSC, { children: [iconPrefix && (jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size }), iconSuffix && (jsx(DivIconSuffixSC, { "$size": size, onClick: onClickSuffix, children: iconSuffix }))] }) }));
+        }), "$size": size, children: jsxs(DivWrapperSC, { children: [iconPrefix && (jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size }), iconSuffix && (jsx(DivIconSuffixSC, { "$size": size, children: iconSuffix }))] }) }));
 });
 FISSelectItem.displayName = "FISSelectItem";
 
-const FISSelect = forwardRef(({ className, options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, ...restProps }, ref) => {
+function isMenuSize(value) {
+    return value === "sm" || value === "md";
+}
+
+const FISSelect = forwardRef(({ className, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, ...restProps }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
     const [referenceElement, setReferenceElement] = useState(null);
     const [popperElement, setPopperElement] = useState(null);
@@ -73276,7 +73297,7 @@ const FISSelect = forwardRef(({ className, options, value, disabled = false, tex
             onChange(newValues);
         }
     }, [multi, onChange, value]);
-    return (jsxs(DivWrapperSC$1, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: "md", readOnly: true, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen, onClickSuffix: handleToggle }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: jsx(FISMenuSelect, { groups: options, placeholder: placeholderSearch, loading: loading, multi: multi, selectedValues: multi ? value : value ? [value] : [], onChangeSelected: (values) => {
+    return (jsxs(DivWrapperSC$1, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: jsx(FISMenuSelect, { size: isMenuSize(size) ? size : "md", groups: options, placeholder: placeholderSearch, loading: loading, multi: multi, selectedValues: multi ? value : value ? [value] : [], onChangeSelected: (values) => {
                             if (multi) {
                                 onChange(values);
                             }
@@ -73292,5 +73313,190 @@ const FISSelect = forwardRef(({ className, options, value, disabled = false, tex
 });
 FISSelect.displayName = "FISSelect";
 
-export { FISAlertBanner, FISAvatar, FISBadge, FISBreadcrumb, FISButton, FISButtonGroup, FISCheckbox, FISCheckboxGroup, FISChipButton, FISCollapse, FISCombobox, FISDateRange, FISDivider, FISIconButton, FISInputArea, FISInputDate, FISInputField, FISInputLabel, FISInputStepper, FISInputText, FISInputTime, FISLinkButton, FISMenuItem, FISMenuSection, FISMenuSelect, FISProgressCircular, FISProgressLinear, FISRadio, RadioGroup as FISRadioGroup, FISSegmented, FISSelect, FISSelectItem, FISSorter, FISSplitButton, FISSwitch, FISTab, FISTable, FISColumnCell as FISTableColumn, FISHeaderCell as FISTableHeader, FISThemeProvider, FISToast, FISTooltip, SegmentedPanelItem, TabPanelItem };
+const useNotification = () => {
+    const context = React__default.useContext(NotificationContext);
+    if (!context) {
+        throw new Error("useNotification must be used within a NotificationProvider");
+    }
+    return context;
+};
+
+const useToast = () => {
+    const context = useContext$1(ToastContext);
+    if (!context) {
+        throw new Error("useToast must be used within a ToastProvider");
+    }
+    return context;
+};
+
+const PaginationAntdSC = styled(Pagination) `
+  display: flex;
+  align-items: center;
+  gap: ${getTheme("com/pagination/record-number/horizontal-gap")};
+
+  .ant-pagination-item {
+    ${getTheme("Paragraph/Sm")}
+    height: ${getTheme("sem/dimension/size/component/2xs")};
+    min-width: ${getTheme("com/pagination/navigation/page-number/min-with")};
+    border-radius: ${getTheme("com/pagination/navigation/page-number/corner-radius")};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    a {
+      color: ${getTheme("sem/color/text/neutral/sub")} !important;
+    }
+
+    &:hover {
+      background-color: ${getTheme("com/pagination/navigation/page-number/background/background-color/hover")} !important;
+
+      a {
+        color: ${getTheme("com/pagination/navigation/page-number/label/color-text/hover")} !important;
+      }
+    }
+
+    &:active {
+      background-color: ${getTheme("com/pagination/navigation/page-number/background/background-color/pressed")} !important;
+
+      a {
+        color: ${getTheme("com/pagination/navigation/page-number/label/color-text/pressed")} !important;
+      }
+    }
+  }
+
+  .ant-pagination-item:focus-visible,
+  .ant-pagination-next:focus-visible,
+  .ant-pagination-prev:focus-visible {
+    box-shadow:
+      0px 0px 0px ${getTheme("sem/dimension/stroke-width/divider/lg")}
+        ${getTheme("com/focus-mark/color-gap-spacing")},
+      0px 0px 0px 4px ${getTheme("com/focus-mark/color-stroke")} !important;
+    outline: none !important;
+    background: ${getTheme("com/pagination/navigation/page-number/background/background-color/active")};
+  }
+
+  .ant-pagination-item-active {
+    border: none !important;
+    background-color: ${getTheme("com/pagination/navigation/page-number/background/background-color/active")};
+
+    a {
+      color: ${getTheme("com/pagination/navigation/page-number/label/color-text/active")} !important;
+    }
+  }
+
+  &.ant-pagination-disabled {
+    .ant-pagination-item {
+      background-color: transparent !important;
+      color: ${getTheme("com/pagination/navigation/page-number/disable/label/color-text/default")} !important;
+    }
+  }
+
+  .ant-pagination-next.ant-pagination-disabled,
+  .ant-pagination-prev.ant-pagination-disabled,
+  &.ant-pagination-disabled .ant-pagination-next,
+  &.ant-pagination-disabled .ant-pagination-prev {
+    color: ${getTheme("com/button/disable/icon-color")} !important;
+    border-color: ${getTheme("com/button/disable/stroke-color")} !important;
+    background-color: transparent !important;
+  }
+
+  &.ant-pagination-disabled .ant-pagination-item-active {
+    background-color: ${getTheme("com/pagination/navigation/page-number/disable/background/background-color/active")} !important;
+    color: ${getTheme("com/pagination/navigation/page-number/disable/label/color-text/active")} !important;
+  }
+
+  .ant-pagination-options {
+    margin-inline-start: ${getTheme("com/pagination/horizontal-gap")} !important;
+  }
+
+  ${({ $minimize }) => $minimize &&
+    css `
+      gap: 0;
+      .ant-pagination-item,
+      .ant-pagination-jump-next,
+      .ant-pagination-jump-prev {
+        display: none;
+      }
+
+      .ant-pagination-next {
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+      }
+
+      .ant-pagination-prev {
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+        border-right: none;
+      }
+    `}
+`;
+const DivPaginationContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const DivPaginationContent = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${getTheme("com/pagination/horizontal-gap")};
+`;
+const SpanTotalSC = styled.span `
+  display: inline-flex;
+  align-items: center;
+  gap: ${getTheme("sem/dimension/gap/xs")};
+
+  ${getTheme("Paragraph/Sm")};
+  color: ${getTheme("com/pagination/range-number/label/color-text")} !important;
+`;
+const SelectPageSizeSC = styled(FISSelect) `
+  // fixed
+  width: 100px;
+`;
+
+const LIMIT_DEFAULT = 10;
+const FISPagination = ({ pageSize = LIMIT_DEFAULT, current = 1, total = 0, minimize, recordCounted, onIconPageRecordClick, showTotal, ...rest }) => {
+    const rangeRecords = useMemo$1(() => {
+        return [(current - 1) * pageSize + 1, current * pageSize];
+    }, [current, pageSize, total]);
+    const defaultShowTotal = (jsxs(Fragment, { children: ["Hi\u1EC3n th\u1ECB ", rangeRecords[0], "-", rangeRecords[1], recordCounted ? (`trong ${total} bản ghi`) : (jsx(FISIconButton, { size: "xs", icon: jsx(InfoIcon, {}), variant: "tertiary-invisible", onClick: onIconPageRecordClick }))] }));
+    // Merge the default props with the provided props
+    const mergedProps = {
+        size: "small",
+        showSizeChanger: false,
+        showQuickJumper: false,
+        responsive: true,
+        showLessItems: true,
+        locale: {
+            items_per_page: "/ trang",
+        },
+        total,
+        current,
+        pageSize,
+        ...rest,
+    };
+    const itemRender = (_page, type, originalElement) => {
+        if (type === "prev") {
+            return (jsx(FISIconButton, { size: "xs", icon: jsx(ChevronLeftIcon, {}), variant: "tertiary", disabled: current === 1 }));
+        }
+        if (type === "next") {
+            return (jsx(FISIconButton, { size: "xs", icon: jsx(ChevronRightIcon, {}), variant: "tertiary", disabled: current * pageSize >= total }));
+        }
+        return originalElement;
+    };
+    return (jsxs(DivPaginationContainer, { children: [jsx(SpanTotalSC, { children: showTotal ? showTotal(total, rangeRecords) : defaultShowTotal }), jsxs(DivPaginationContent, { children: [jsx(PaginationAntdSC, { ...mergedProps, "$minimize": Boolean(minimize), showSizeChanger: false, itemRender: itemRender }), jsx(SelectPageSizeSC, { size: "xs", options: [
+                            {
+                                groupLabel: "",
+                                items: (rest.pageSizeOptions || [10, 20, 50, 100]).map((size) => ({
+                                    label: `${size} ${rest.locale?.items_per_page || mergedProps.locale?.items_per_page}`,
+                                    value: String(size),
+                                })),
+                            },
+                        ], value: String(pageSize), multi: false, onChange: (value) => {
+                            if (rest.onShowSizeChange) {
+                                rest.onShowSizeChange(Number(value), pageSize);
+                            }
+                        } })] })] }));
+};
+
+export { FISAlertBanner, FISAvatar, FISBadge, FISBreadcrumb, FISButton, FISButtonGroup, FISCheckbox, FISCheckboxGroup, FISChipButton, FISCollapse, FISColumnCell, FISCombobox, FISDateRange, FISDivider, FISHeaderCell, FISIconButton, FISInputArea, FISInputDate, FISInputField, FISInputLabel, FISInputStepper, FISInputText, FISInputTime, FISLinkButton, FISMenuItem, FISMenuSection, FISMenuSelect, FISPagination, FISProgressCircular, FISProgressLinear, FISRadio, RadioGroup as FISRadioGroup, FISSegmented, FISSelect, FISSelectItem, FISSorter, FISSplitButton, FISSwitch, FISTab, FISTable, FISColumnCell as FISTableColumn, FISHeaderCell as FISTableHeader, FISThemeProvider, FISToast, FISTooltip, SegmentedPanelItem, TabPanelItem, useNotification, useToast };
 //# sourceMappingURL=index.js.map