fis-component 0.0.33 → 0.0.35

package/dist/cjs/index.js

@@ -13012,7 +13012,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,
@@ -22098,7 +22098,7 @@ const Holder = /*#__PURE__*/React.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,
@@ -22213,7 +22213,7 @@ function useInternalNotification(notificationConfig) {
     ref: holderRef
   }))];
 }
-function useNotification(notificationConfig) {
+function useNotification$1(notificationConfig) {
   return useInternalNotification(notificationConfig);
 }
 
@@ -50162,7 +50162,7 @@ const baseStaticMethods = {
   open,
   destroy,
   config: setNotificationGlobalConfig,
-  useNotification,
+  useNotification: useNotification$1,
   _InternalPanelDoNotUseOrYouWillBeFired: PurePanel$5
 };
 const staticMethods = baseStaticMethods;
@@ -61091,7 +61091,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;
           }
@@ -61568,8 +61568,7 @@ function ExitIcon(props) {
 }
 
 function InfoIcon(props) {
-    const { width = 16, height = 16, ...rest } = props;
-    return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsxRuntime.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 (jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_6263_11228)", children: jsxRuntime.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" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_6263_11228", children: jsxRuntime.jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }));
 }
 
 function CheckIcon(props) {
@@ -61641,6 +61640,16 @@ function RemoveIcon(props) {
     return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsxRuntime.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 (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsxRuntime.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 (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsxRuntime.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 (jsxRuntime.jsxs(DivNotificationSystemWrapperSC, { children: [jsxRuntime.jsx(ImgNotificationSystemSC, { src: imgUrl }), jsxRuntime.jsxs(DivNotificationSystemContainerSC, { children: [jsxRuntime.jsxs(DivNotificationContentWrapperSC, { children: [jsxRuntime.jsxs(DivNotificationContentSC, { children: [jsxRuntime.jsxs(DivNotificationHeaderSC, { children: [jsxRuntime.jsx(DivNotificationTitleSC, { children: title }), moreOption && (jsxRuntime.jsx(DivIconActionSC, { children: jsxRuntime.jsx(FISIconButton, { variant: "tertiary-invisible", size: "xs", icon: jsxRuntime.jsx(MoreIcon, {}), onClick: onMoreClick }) }))] }), jsxRuntime.jsx(DivNotificationDescriptionSC, { children: description })] }), jsxRuntime.jsxs(DivNotificationActionsSC, { children: [jsxRuntime.jsx(FISLinkButton, { size: "xs", variant: "hight-priority", onClick: onOk, children: okText }), jsxRuntime.jsx(FISLinkButton, { size: "xs", onClick: onCancel, children: cancelText })] })] }), jsxRuntime.jsx(DivIconActionSC, { children: jsxRuntime.jsx(FISIconButton, { icon: jsxRuntime.jsx(CloseIcon, {}), size: "xs", variant: "tertiary-invisible", onClick: onClose }) })] })] }));
 };
@@ -61697,7 +61706,7 @@ function GlobalStyle({ theme }) {
 const DivContainerSC$a = styled.div `
   display: flex;
   align-items: flex-start;
-  width: fit-content;
+  width: 100%;
   border-radius: ${getTheme("com/toast/corner-radius")};
   outline: ${getTheme("com/toast/theme/border/stroke-width")} solid
     ${getTheme("com/toast/theme/border/color-stroke/neutral")};
@@ -61822,13 +61831,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) => {
@@ -62554,7 +62563,7 @@ const ToastProvider = ({ children, }) => {
             setToasts((prev) => prev.slice(1));
         }, duration);
     }, []);
-    return (jsxRuntime.jsxs(ToastContext.Provider, { value: { showToast }, children: [children, toasts.length > 0 && (jsxRuntime.jsx(ToastWrapper, { children: toasts.map((toast, index) => (jsxRuntime.jsx(FISToast, { ...toast }, index))) }))] }));
+    return (jsxRuntime.jsxs(ToastContext.Provider, { value: { showToast }, children: [children, toasts.length > 0 && (jsxRuntime.jsx(ToastWrapper, { "$position": toasts[0].position || "top-center", children: toasts.map((toast, index) => (jsxRuntime.jsx(FISToast, { ...toast }, index))) }))] }));
 };
 
 const FISThemeProvider = ({ theme: theme$1 = theme, children, }) => (jsxRuntime.jsxs(styled.ThemeProvider, { theme: theme$1, children: [jsxRuntime.jsx(GlobalStyle, { theme: theme$1 }), jsxRuntime.jsx(NotificationProvider, { children: jsxRuntime.jsx(ToastProvider, { children: children }) })] }));
@@ -64002,6 +64011,7 @@ const CheckboxContainerStyled = styled.label `
   align-items: center;
   gap: ${getTheme("com/checkbox/horizontal-gap")};
   cursor: pointer;
+  width: fit-content;
 
   &:hover ${CheckboxControlStyled} {
     border-color: ${getTheme("com/checkbox/item/unmarked/color-stroke/hover")};
@@ -65605,7 +65615,7 @@ const DicContainerSC = styled.div `
   display: flex;
   flex-direction: column;
   gap: ${getTheme("sem/dimension/gap/xs")};
-  width: fit-content;
+  width: 100%;
 `;
 const DivResizeSC = styled.div `
   position: absolute;
@@ -65644,6 +65654,7 @@ const TextAreaSC = styled.textarea `
   font-family: inherit;
   outline: none;
   border: none;
+  width: 100%;
   ${getTheme("Paragraph/Sm")};
   padding-top: ${getTheme("com/input/field/size-md/label/vertical-padding")};
   padding-right: ${getTheme("com/input/field/size-md/label/horizontal-padding")};
@@ -65945,7 +65956,7 @@ const DivContainerSC$5 = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: fit-content;
+  width: 100%;
   background-color: ${getTheme("com/input/field/default/background/default")};
   height: ${getTheme("com/input/field/size-md/height")};
   height: ${getTheme("com/input/field/size-md/height")};
@@ -66270,7 +66281,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")};
@@ -67347,7 +67357,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())),
         }))
@@ -67412,7 +67422,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             onClickMenu?.();
         }
     };
-    return (jsxRuntime.jsx(DivContainerSC$4, { className: className, children: jsxRuntime.jsxs(DivWrapperMenuSC, { children: [showInput && !combobox && (jsxRuntime.jsx(DivSearchSC, { children: jsxRuntime.jsx(FISInputText, { iconPrefix: jsxRuntime.jsx(SearchIcon, {}), placeholder: placeholder, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoResultIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoDataIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsxRuntime.jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuContent, { "$removeSelectedGroup": !!menuState.removeSelectedGroup, children: menuState.filteredGroups.map((group, index) => (jsxRuntime.jsxs(DivWrapperSC$4, { children: [index !== 0 && jsxRuntime.jsx(FISMenuSection, { withDivider: true }), jsxRuntime.jsx(FISMenuSection, { label: group.groupLabel }), group.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues?.includes(item.value), type: "select" }, idx)))] }, index))) }), menuState.removeSelectedGroup && (jsxRuntime.jsx(FixedBottomSection, { children: jsxRuntime.jsx(DivWrapperSC$4, { children: menuState.removeSelectedGroup.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsxRuntime.jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }) }));
+    return (jsxRuntime.jsx(DivContainerSC$4, { className: className, children: jsxRuntime.jsxs(DivWrapperMenuSC, { children: [showInput && !combobox && (jsxRuntime.jsx(DivSearchSC, { children: jsxRuntime.jsx(FISInputText, { iconPrefix: jsxRuntime.jsx(SearchIcon, {}), placeholder: placeholder, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoResultIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoDataIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsxRuntime.jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuContent, { "$removeSelectedGroup": !!menuState.removeSelectedGroup, children: menuState.filteredGroups.map((group, index) => (jsxRuntime.jsxs(DivWrapperSC$4, { children: [index !== 0 && jsxRuntime.jsx(FISMenuSection, { withDivider: true }), jsxRuntime.jsx(FISMenuSection, { label: group?.groupLabel }), group.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues?.includes(item.value), type: "select" }, idx)))] }, index))) }), menuState.removeSelectedGroup && (jsxRuntime.jsx(FixedBottomSection, { children: jsxRuntime.jsx(DivWrapperSC$4, { children: menuState.removeSelectedGroup.items.map((item, idx) => (jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsxRuntime.jsx(RemoveIcon, {}), negative: true }, idx))) }) }))] }))] }) }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";
 
@@ -70832,7 +70842,7 @@ const DivContainerSC$2 = styled.div `
   display: flex;
   flex-direction: column;
   gap: ${getTheme("com/input/vertical-gap")};
-  width: fit-content;
+  width: 100%;
 `;
 const DivHintWrapperSC = styled.div `
   display: flex;
@@ -70855,17 +70865,6 @@ const SpanHintSC = styled.span `
     color: ${getTheme("com/input/hint/disable/label/color-text")};
   }
 `;
-styled.div `
-  display: flex;
-  flex-direction: column;
-  width: fit-content;
-  gap: ${getTheme("com/input/vertical-gap")};
-`;
-styled.div `
-  position: relative;
-  display: inline-block;
-  width: 100%;
-`;
 const HiddenTimePickerSC = styled(TimePicker) `
   position: absolute;
   top: 0;
@@ -71218,7 +71217,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%;
@@ -71247,6 +71245,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 styled.css `
@@ -71271,7 +71280,7 @@ const DivHeaderCellContainerSC = styled.div `
 `;
 
 const FISHeaderCell = React.forwardRef(({ className, textAlign, label, description, rightComponent, disabled, hasRightDivider = true, hasTruncateLabel = false, onlyIcon = false, align = "left", ...rest }, ref) => {
-    return (jsxRuntime.jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$align": align, "$onlyIcon": onlyIcon, ...rest, children: jsxRuntime.jsxs("div", { className: "header-cell-content", children: [jsxRuntime.jsxs("div", { className: "cell-content", children: [label && jsxRuntime.jsx("div", { className: "label", children: label }), rightComponent] }), align === "right" ? (jsxRuntime.jsxs("div", { className: "cell-content", children: [description && jsxRuntime.jsx("div", { className: "description", children: description }), jsxRuntime.jsx("span", { children: rightComponent })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: description && jsxRuntime.jsx("div", { className: "description", children: description }) }))] }) }));
+    return (jsxRuntime.jsx(DivHeaderCellContainerSC, { ref: ref, className: classNames("header-cell-container", className), "$textAlign": textAlign, "$disabled": disabled, "$hasTruncateLabel": hasTruncateLabel, "$hasRightDivider": hasRightDivider, "$align": align, "$onlyIcon": onlyIcon, ...rest, children: jsxRuntime.jsxs("div", { className: "header-cell-content", children: [jsxRuntime.jsxs("div", { className: "cell-content", children: [label && jsxRuntime.jsx("div", { className: "label", children: label }), jsxRuntime.jsx("div", { className: "right-component-father", children: jsxRuntime.jsx("div", { className: "right-component-child", children: rightComponent }) })] }), jsxRuntime.jsx("div", { className: "cell-content", children: description && jsxRuntime.jsx("div", { className: "description", children: description }) })] }) }));
 });
 FISHeaderCell.displayName = "FISHeaderCell";
 
@@ -71619,7 +71628,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;
@@ -73236,15 +73244,19 @@ const DivContainerSC = styled.div `
   }
 `;
 
-const FISSelectItem = React.forwardRef(({ onClickSuffix, onClickPrefix, ...props }, ref) => {
+const FISSelectItem = React.forwardRef((props, ref) => {
     const { size = "md", iconPrefix, iconSuffix, disabled, activeDropdown, ...rest } = props;
     return (jsxRuntime.jsx(DivContainerSC, { className: classNames({
             iconPrefix: iconPrefix,
-        }), "$size": size, children: jsxRuntime.jsxs(DivWrapperSC, { children: [iconPrefix && (jsxRuntime.jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsxRuntime.jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size }), iconSuffix && (jsxRuntime.jsx(DivIconSuffixSC, { "$size": size, onClick: onClickSuffix, children: iconSuffix }))] }) }));
+        }), "$size": size, children: jsxRuntime.jsxs(DivWrapperSC, { children: [iconPrefix && (jsxRuntime.jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsxRuntime.jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size }), iconSuffix && (jsxRuntime.jsx(DivIconSuffixSC, { "$size": size, children: iconSuffix }))] }) }));
 });
 FISSelectItem.displayName = "FISSelectItem";
 
-const FISSelect = React.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 = React.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] = React.useState(false);
     const [referenceElement, setReferenceElement] = React.useState(null);
     const [popperElement, setPopperElement] = React.useState(null);
@@ -73305,7 +73317,7 @@ const FISSelect = React.forwardRef(({ className, options, value, disabled = fals
             onChange(newValues);
         }
     }, [multi, onChange, value]);
-    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsxRuntime.jsx(FISSelectItem, { ...restProps, ref: ref, size: "md", readOnly: true, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen, onClickSuffix: handleToggle }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: jsxRuntime.jsx(FISMenuSelect, { groups: options, placeholder: placeholderSearch, loading: loading, multi: multi, selectedValues: multi ? value : value ? [value] : [], onChangeSelected: (values) => {
+    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, children: jsxRuntime.jsx(FISSelectItem, { ...restProps, ref: ref, size: size, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedOptions, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: { ...styles.popper, width: referenceElement?.offsetWidth }, ...attributes.popper, children: jsxRuntime.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);
                             }
@@ -73321,6 +73333,191 @@ const FISSelect = React.forwardRef(({ className, options, value, disabled = fals
 });
 FISSelect.displayName = "FISSelect";
 
+const useNotification = () => {
+    const context = React.useContext(NotificationContext);
+    if (!context) {
+        throw new Error("useNotification must be used within a NotificationProvider");
+    }
+    return context;
+};
+
+const useToast = () => {
+    const context = React.useContext(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 &&
+    styled.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 = React.useMemo(() => {
+        return [(current - 1) * pageSize + 1, current * pageSize];
+    }, [current, pageSize, total]);
+    const defaultShowTotal = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["Hi\u1EC3n th\u1ECB ", rangeRecords[0], "-", rangeRecords[1], recordCounted ? (`trong ${total} bản ghi`) : (jsxRuntime.jsx(FISIconButton, { size: "xs", icon: jsxRuntime.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 (jsxRuntime.jsx(FISIconButton, { size: "xs", icon: jsxRuntime.jsx(ChevronLeftIcon, {}), variant: "tertiary", disabled: current === 1 }));
+        }
+        if (type === "next") {
+            return (jsxRuntime.jsx(FISIconButton, { size: "xs", icon: jsxRuntime.jsx(ChevronRightIcon, {}), variant: "tertiary", disabled: current * pageSize >= total }));
+        }
+        return originalElement;
+    };
+    return (jsxRuntime.jsxs(DivPaginationContainer, { children: [jsxRuntime.jsx(SpanTotalSC, { children: showTotal ? showTotal(total, rangeRecords) : defaultShowTotal }), jsxRuntime.jsxs(DivPaginationContent, { children: [jsxRuntime.jsx(PaginationAntdSC, { ...mergedProps, "$minimize": Boolean(minimize), showSizeChanger: false, itemRender: itemRender }), jsxRuntime.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);
+                            }
+                        } })] })] }));
+};
+
 exports.FISAlertBanner = FISAlertBanner;
 exports.FISAvatar = FISAvatar;
 exports.FISBadge = FISBadge;
@@ -73331,9 +73528,11 @@ exports.FISCheckbox = FISCheckbox;
 exports.FISCheckboxGroup = FISCheckboxGroup;
 exports.FISChipButton = FISChipButton;
 exports.FISCollapse = FISCollapse;
+exports.FISColumnCell = FISColumnCell;
 exports.FISCombobox = FISCombobox;
 exports.FISDateRange = FISDateRange;
 exports.FISDivider = FISDivider;
+exports.FISHeaderCell = FISHeaderCell;
 exports.FISIconButton = FISIconButton;
 exports.FISInputArea = FISInputArea;
 exports.FISInputDate = FISInputDate;
@@ -73363,6 +73562,9 @@ exports.FISTableHeader = FISHeaderCell;
 exports.FISThemeProvider = FISThemeProvider;
 exports.FISToast = FISToast;
 exports.FISTooltip = FISTooltip;
+exports.Pagination = FISPagination;
 exports.SegmentedPanelItem = SegmentedPanelItem;
 exports.TabPanelItem = TabPanelItem;
+exports.useNotification = useNotification;
+exports.useToast = useToast;
 //# sourceMappingURL=index.js.map