fis-component 0.0.33 → 0.0.35

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 }) })] })] }));
 };
@@ -61677,7 +61686,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")};
@@ -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 }) })] }));
@@ -63982,6 +63991,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")};
@@ -65585,7 +65595,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;
@@ -65624,6 +65634,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")};
@@ -65925,7 +65936,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")};
@@ -66250,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")};
@@ -67327,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())),
         }))
@@ -67392,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";
 
@@ -70812,7 +70822,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;
@@ -70835,17 +70845,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;
@@ -71198,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%;
@@ -71227,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 `
@@ -71251,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";
 
@@ -71599,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;
@@ -73216,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);
@@ -73285,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);
                             }
@@ -73301,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, FISProgressCircular, FISProgressLinear, FISRadio, RadioGroup as FISRadioGroup, FISSegmented, FISSelect, FISSelectItem, FISSorter, FISSplitButton, FISSwitch, FISTab, FISTable, FISColumnCell as FISTableColumn, FISHeaderCell as FISTableHeader, FISThemeProvider, FISToast, FISTooltip, FISPagination as Pagination, SegmentedPanelItem, TabPanelItem, useNotification, useToast };
 //# sourceMappingURL=index.js.map