@geneui/components 3.0.0-next-e390900-19062025 → 3.0.0-next-9873985-09072025

package/GlobalHeader.js

@@ -0,0 +1,408 @@
+import React__default, { forwardRef, useState, useRef, useEffect, useContext, cloneElement } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
+import Button from './Button.js';
+import Divider from './Divider.js';
+import Logo from './Logo.js';
+import { Products, ProductsMainSection, Product, ProductsSecondarySection } from './Products.js';
+import { S as SvgCaretDownFilled, P as Profile } from './index-b3aa52eb.js';
+import Text from './Text.js';
+import Loader from './Loader.js';
+import { P as Popover, a as PopoverBody } from './PopoverBody-989eb114.js';
+import Scrollbar from './Scrollbar.js';
+import { a as useClickOutside } from './index-ead22fa8.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import { a as GeneUIDesignSystemContext } from './index-b1807fa4.js';
+import './Badge.js';
+import './index-0b9e90da.js';
+import './index-0409f986.js';
+import './index-a2688a52.js';
+import './CheckMark-34798545.js';
+import './floating-ui.react-a6c3b969.js';
+import 'react-dom';
+import './Info-0f0741e0.js';
+import './X-20da3b4a.js';
+import 'prop-types';
+import './useDebounceCallback-999deae7.js';
+
+var _excluded$1 = ["size", "color"];
+var SvgHamburgerMenu = function SvgHamburgerMenu(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "currentColor" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M2.75 17.551h18.5c.415 0 .75.325.75.725 0 .366-.282.67-.648.717l-.102.007h-18.5a.738.738 0 0 1-.75-.724c0-.367.283-.67.649-.718l.101-.007h18.5-18.5Zm0-6.274h18.5c.415 0 .75.324.75.724 0 .367-.282.67-.648.718l-.102.007h-18.5a.737.737 0 0 1-.75-.725c0-.366.283-.67.649-.717l.101-.007h18.5-18.5Zm0-6.277h18.5c.414 0 .75.324.75.724 0 .367-.283.67-.649.718l-.101.007h-18.5a.737.737 0 0 1-.75-.725c0-.366.282-.67.648-.717l.102-.007h18.5-18.5Z",
+    fill: color
+  }));
+};
+
+var _excluded = ["size", "color"];
+var SvgQuestionMark = function SvgQuestionMark(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "currentColor" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M12 2c5.523 0 10 4.478 10 10s-4.477 10-10 10-10-4.478-10-10 4.477-10 10-10Zm0 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 4.595 3.738 8.333 8.333 8.333 4.595 0 8.333-3.738 8.333-8.333 0-4.595-3.738-8.333-8.333-8.333Zm0 11.833a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-8.75a2.75 2.75 0 0 1 2.75 2.75c0 1.01-.297 1.574-1.051 2.359l-.169.171c-.622.622-.78.886-.78 1.47a.75.75 0 0 1-1.5 0c0-1.01.297-1.574 1.051-2.359l.169-.171c.622-.622.78-.886.78-1.47a1.25 1.25 0 0 0-2.493-.128l-.007.128a.75.75 0 0 1-1.5 0 2.75 2.75 0 0 1 2.75-2.75Z",
+    fill: color
+  }));
+};
+
+const Limit = ({ label = "Limit", limit = "0", isMobile }) => {
+    return (React__default.createElement("div", { className: "globalHeader__limit" },
+        React__default.createElement(Text, { as: "span", variant: "labelMediumSemibold", className: classNames({ globalHeader__limit_label: isMobile }) }, isMobile ? label : `${label} -`),
+        React__default.createElement(Text, { as: "span", variant: "labelMediumSemibold", className: classNames({ globalHeader__limit_limit: isMobile }) }, limit.toString())));
+};
+
+const PartnerItem = forwardRef(({ title, onChange, id, selected }, ref) => {
+    const handleClick = () => {
+        onChange(id);
+    };
+    return (React__default.createElement("button", { type: "button", className: classNames("partners__partner", { partners__partner_selected: selected }), onClick: handleClick, ref: ref },
+        React__default.createElement(Text, { as: "span", className: "partners__partnerName" }, title),
+        React__default.createElement(Text, { as: "span", className: "partners__partnerID" }, id.toString())));
+});
+
+var css_248z$1 = ".partners__popoverBody{background-color:var(--guit-sem-color-background-neutral-1-nudge);border-radius:var(--guit-ref-radius-2xsmall);padding-block:var(--guit-ref-spacing-3xsmall)}.partners__popoverContent{display:flex;flex-direction:column;height:100%}.partners__loader{height:100%;width:100%}.partners__header{border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);display:flex;flex:none;flex-direction:column;padding-bottom:var(--guit-ref-spacing-xsmall);padding-top:var(--guit-ref-spacing-3xsmall);padding-inline:var(--guit-ref-spacing-large);row-gap:var(--guit-ref-spacing-xsmall)}.partners__title{column-gap:var(--guit-ref-spacing-xsmall);display:flex;flex:1;justify-content:space-between}.partners__titleName{color:var(--guit-sem-color-foreground-neutral-2);flex:1}.partners__titleID{color:var(--guit-sem-color-foreground-neutral-1);flex:none}.partners__scrollbar{flex:1;min-height:0}.partners__content{display:flex;flex-direction:column;padding-block:var(--guit-ref-spacing-3xsmall);padding-inline:var(--guit-ref-spacing-xsmall);row-gap:var(--guit-ref-spacing-3xsmall)}.partners__partner{align-items:center;background-color:var(--guit-sem-color-background-neutral-1-nudge);border-radius:var(--guit-ref-radius-3xsmall);display:flex;gap:var(--guit-ref-spacing-xsmall);justify-content:space-between;padding-block:var(--guit-ref-spacing-2xsmall);padding-inline:var(--guit-ref-spacing-medium);width:100%}@media screen and (hover:hover){.partners__partner:hover{background-color:var(--guit-sem-color-background-neutral-1-nudge-hover)}}.partners__partner:disabled{cursor:not-allowed}.partners__partner:disabled .partners__partnerID,.partners__partner:disabled .partners__partnerName{color:var(--guit-sem-color-foreground-disabled)}.partners__partner:active:not(:disabled){background-color:var(--guit-sem-color-background-neutral-1-nudge-pressed)}.partners__partner_selected .partners__partnerID,.partners__partner_selected .partners__partnerName{color:var(--guit-sem-color-foreground-selected)}.partners__partner:not(:disabled):not(.partners__partner_selected) .partners__partnerName{color:var(--guit-sem-color-foreground-neutral-2)}.partners__partner:not(:disabled):not(.partners__partner_selected) .partners__partnerID{color:var(--guit-sem-color-foreground-neutral-1)}.partners__partnerName{flex:1}.partners__partnerID{flex:none}";
+styleInject(css_248z$1);
+
+const Partners = ({ onPartnerSelect, partners, loading, searchPlaceholder, loadingText = "Loading", disabled = false, title = "Partner", idName = "ID" }) => {
+    const [propsForProductsPopover, setPropsForProductsPopover] = useState({});
+    const [mappedPartners, setMappedPartners] = useState([]);
+    const [selectedPartner, setSelectedPartner] = useState(null);
+    const [hasScrolled, setHasScrolled] = useState(false);
+    const selectedPartnerRef = useRef(null);
+    const [isProductsOpen, setIsProductsOpen] = useState(false);
+    const popoverRef = useRef({
+        floatingElement: { current: null },
+        referenceElement: { current: null }
+    });
+    useEffect(() => {
+        setMappedPartners(partners || []);
+    }, [partners]);
+    useEffect(() => {
+        if (!partners || partners.length === 0)
+            return;
+        const selected = partners.find((p) => p.selected) || null;
+        setSelectedPartner(selected);
+    }, [partners]);
+    const assignSelectedRef = (el, id) => {
+        if ((selectedPartner === null || selectedPartner === void 0 ? void 0 : selectedPartner.id) === id) {
+            selectedPartnerRef.current = el;
+        }
+    };
+    useEffect(() => {
+        const currentRef = selectedPartnerRef.current;
+        if (isProductsOpen && currentRef && !hasScrolled) {
+            currentRef.scrollIntoView();
+        }
+    }, [selectedPartner, isProductsOpen, selectedPartnerRef.current, assignSelectedRef]);
+    useClickOutside(() => {
+        setIsProductsOpen(false);
+    }, [popoverRef.current.floatingElement, popoverRef.current.referenceElement]);
+    const onProductsToggle = () => {
+        setHasScrolled(false);
+        setIsProductsOpen((prevState) => !prevState);
+    };
+    const onPartnerItemSelect = (partner) => {
+        onPartnerSelect === null || onPartnerSelect === void 0 ? void 0 : onPartnerSelect(partner);
+        onProductsToggle();
+    };
+    const searchHandler = (e) => {
+        const value = e.target.value.toLowerCase();
+        const partnersSnapshot = (partners === null || partners === void 0 ? void 0 : partners.length) ? partners : [];
+        setHasScrolled(true);
+        setMappedPartners(() => {
+            return partnersSnapshot.filter((partner) => partner.title.toLowerCase().includes(value) || partner.id.toString().includes(value));
+        });
+    };
+    return (React__default.createElement("div", { className: "partners" },
+        React__default.createElement(Button, Object.assign({ disabled: disabled, onClick: onProductsToggle, appearance: "inverse", layout: "text", size: "medium", Icon: SvgCaretDownFilled, iconPosition: "after" }, propsForProductsPopover), (selectedPartner === null || selectedPartner === void 0 ? void 0 : selectedPartner.title) || "Partner"),
+        React__default.createElement(Popover, { setProps: setPropsForProductsPopover, position: "bottom-right", size: "medium", withArrow: false, open: isProductsOpen, ref: popoverRef },
+            React__default.createElement(PopoverBody, { withScrollbar: false, withPadding: false, className: "partners__popoverBody popover_size_small" }, loading ? (React__default.createElement(Loader, { className: "partners__loader", text: loadingText, textPosition: "below" })) : (React__default.createElement("div", { className: "partners__popoverContent" },
+                React__default.createElement("div", { className: "partners__header" },
+                    React__default.createElement("input", { type: "search", onChange: searchHandler, placeholder: searchPlaceholder, "aria-label": "Search partners", role: "searchbox" }),
+                    React__default.createElement("div", { className: "partners__title" },
+                        React__default.createElement(Text, { as: "span", className: "partners__titleName" }, title),
+                        React__default.createElement(Text, { as: "span", className: "partners__titleID" }, idName))),
+                React__default.createElement(Scrollbar, { className: "partners__scrollbar" },
+                    React__default.createElement("div", { className: "partners__content" }, mappedPartners === null || mappedPartners === void 0 ? void 0 : mappedPartners.map((partner) => {
+                        return (React__default.createElement(PartnerItem, Object.assign({ key: partner.id }, partner, { onChange: () => {
+                                onPartnerItemSelect(partner);
+                            }, ref: (el) => {
+                                return assignSelectedRef(el, partner.id);
+                            } })));
+                    })))))))));
+};
+
+const Time = ({ timeZone, format = "24h", className }) => {
+    const [time, setTime] = useState("");
+    useEffect(() => {
+        const updateTime = () => {
+            const now = new Date();
+            const formatter = new Intl.DateTimeFormat("en-US", {
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+                hour12: format === "12h",
+                timeZone: timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone
+            });
+            const formattedTime = formatter.format(now);
+            setTime(formattedTime);
+        };
+        updateTime();
+        const interval = setInterval(updateTime, 1000);
+        return () => clearInterval(interval);
+    }, [timeZone, format]);
+    return (React__default.createElement("div", { className: classNames("globalHeader__time", className) },
+        React__default.createElement(Text, { as: "span", variant: "labelMediumSemibold" }, format === "12h" ? time.slice(0, -2) : time),
+        format === "12h" && (React__default.createElement(Text, { as: "span", variant: "labelMediumSemibold" }, time.slice(-2)))));
+};
+
+var css_248z = ".globalHeader{background-color:var(--guit-sem-color-background-neutral-5);color-scheme:light;column-gap:var(--guit-ref-spacing-2xlarge);display:flex;justify-content:space-between;padding-inline:var(--guit-ref-spacing-large)}.globalHeader_mobile{padding-block:var(--guit-ref-spacing-small)}.globalHeader:not(.globalHeader_mobile){padding-block:var(--guit-ref-spacing-medium)}.globalHeader_side_left{align-items:center;column-gap:var(--guit-ref-spacing-large);display:flex}.globalHeader_side_right{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.globalHeader__logo_link{border-radius:.4rem;text-decoration:none}.globalHeader__domain{align-items:center;color:var(--guit-sem-color-foreground-inverse-notheme);display:flex}.globalHeader__text{color:var(--guit-sem-color-foreground-inverse)}.globalHeader__divider{height:var(--guit-sem-dimension-height-small-nudge)}.globalHeader__actions,.globalHeader__item{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.globalHeader__time{align-items:center;color:var(--guit-sem-color-foreground-inverse-notheme);display:flex;gap:.4rem}.globalHeader__time_mobile{color:var(--guit-sem-color-foreground-neutral-2)}.globalHeader__time_text{color:var(--guit-sem-color-foreground-neutral-1)}.globalHeader__limit{align-items:center;color:var(--guit-sem-color-foreground-inverse-notheme);display:flex;gap:var(--guit-ref-spacing-2xsmall)}.globalHeader__limit_label{color:var(--guit-sem-color-foreground-neutral-1)}.globalHeader__limit_limit{color:var(--guit-sem-color-foreground-neutral-2)}";
+styleInject(css_248z);
+
+// Utilities
+const idPrefixCreator = (data, prefix) => {
+    return (data === null || data === void 0 ? void 0 : data.map((item) => (Object.assign(Object.assign({}, item), { id: `${prefix}_${item.id}` })))) || [];
+};
+const idPrefixRemover = (item, prefix) => {
+    if (typeof item.id === "string") {
+        return Object.assign(Object.assign({}, item), { id: item.id.replace(`${prefix}_`, "") });
+    }
+    return Object.assign(Object.assign({}, item), { id: item.id.toString().replace(`${prefix}_`, "") });
+};
+const getItemTypeFromId = (id) => {
+    if (id.startsWith("partners_"))
+        return "partners";
+    if (id.startsWith("languages_"))
+        return "languages";
+    if (id.startsWith("wallet_"))
+        return "wallet";
+    if (id.startsWith("currency_"))
+        return "currency";
+    if (id.includes("currencyConvertor"))
+        return "currencyConvertor";
+    if (id.includes("activityItem_"))
+        return "activityItem";
+    return null;
+};
+const mobileData = (isMobileBreakpoint, timeLabel, limitLabel, limitUnit, timeZone, timeFormat) => {
+    const limitCheck = limitLabel && limitUnit
+        ? {
+            title: "limit",
+            id: "limit",
+            disabled: true,
+            divider: true,
+            ComponentRender: () => (React__default.createElement("span", { className: "globalHeader__limit" },
+                React__default.createElement(Limit, { limit: limitUnit, label: limitLabel, isMobile: isMobileBreakpoint })))
+        }
+        : null;
+    const timeCheck = timeZone || timeFormat || timeLabel
+        ? {
+            title: "time",
+            id: "time",
+            disabled: true,
+            divider: !limitCheck,
+            ComponentRender: () => (React__default.createElement("span", { className: "globalHeader__time" },
+                React__default.createElement("span", { className: "globalHeader__time_text" }, timeLabel),
+                React__default.createElement(Time, { className: "globalHeader__time_mobile", timeZone: timeZone, format: timeFormat })))
+        }
+        : null;
+    return isMobileBreakpoint ? [...(timeCheck ? [timeCheck] : []), ...(limitCheck ? [limitCheck] : [])] : [];
+};
+/**
+ * Global Header component is a persistent navigation element that appears at the top of an application or website. It serves as a central hub for accessing key features and tools, ensuring consistent and intuitive navigation across all pages.
+ */
+const GlobalHeader = ({ className, onNavigationButtonClick, logoAs, partners, onPartnerSelect, partnersLoading, partnersLoadingText, partnersSearchPlaceholder, partnersDisabled, partnersName = "Partner", partnersIdName, limitLabel = "Limit", limitUnit, timeZone, timeFormat, products, onProductSelect, timeLabel, logOutText, onProfileItemSelect, myAccountText = "My Account", settingsText = "Settings", languageText = "Language", languages = [], onLanguageSelect, wallet, walletText = "Wallet", onWalletSelect, currency, currencyText = "Reporting Currency", activity, activityText = "Activity", onActivitySelect, onCurrencySelect, currencyConvertorText, onCurrencyConvertorSelect, leftContent = null, onHelpActionSelect, actions }) => {
+    var _a, _b, _c;
+    const { breakpoint } = useContext(GeneUIDesignSystemContext);
+    const { isMobileBreakpoint = false, isDesktopBreakpoint = false } = breakpoint || {};
+    const languagesData = idPrefixCreator(languages, "languages");
+    const partnersData = idPrefixCreator(partners, "partners");
+    const walletData = idPrefixCreator(wallet, "wallet");
+    const currencyData = idPrefixCreator(currency, "currency");
+    const activityData = idPrefixCreator(activity, "activityItem");
+    const onNavigationButtonClickHandler = (e) => {
+        if (onNavigationButtonClick) {
+            onNavigationButtonClick(e);
+        }
+    };
+    const onProfileItemSelectHandler = (item) => {
+        const type = getItemTypeFromId(item.id.toString());
+        let changedItem = Object.assign({}, item);
+        switch (type) {
+            case "partners":
+                if (isMobileBreakpoint) {
+                    changedItem = idPrefixRemover(item, "partners");
+                    onPartnerSelect === null || onPartnerSelect === void 0 ? void 0 : onPartnerSelect(changedItem);
+                }
+                break;
+            case "languages":
+                changedItem = idPrefixRemover(item, "languages");
+                onLanguageSelect === null || onLanguageSelect === void 0 ? void 0 : onLanguageSelect(changedItem);
+                break;
+            case "wallet":
+                changedItem = idPrefixRemover(item, "wallet");
+                onWalletSelect === null || onWalletSelect === void 0 ? void 0 : onWalletSelect(changedItem);
+                break;
+            case "currency":
+                changedItem = idPrefixRemover(item, "currency");
+                onCurrencySelect === null || onCurrencySelect === void 0 ? void 0 : onCurrencySelect(changedItem);
+                break;
+            case "currencyConvertor":
+                onCurrencyConvertorSelect === null || onCurrencyConvertorSelect === void 0 ? void 0 : onCurrencyConvertorSelect(changedItem);
+                break;
+            case "activityItem":
+                changedItem = idPrefixRemover(item, "activityItem");
+                onActivitySelect === null || onActivitySelect === void 0 ? void 0 : onActivitySelect(changedItem);
+                break;
+            default:
+                if (actions && actions.some((action) => action.id === item.id)) {
+                    const foundedAction = actions.find((action) => action.id === item.id);
+                    if (foundedAction && foundedAction.onActionSelect) {
+                        foundedAction.onActionSelect(foundedAction);
+                    }
+                }
+                break;
+        }
+        onProfileItemSelect === null || onProfileItemSelect === void 0 ? void 0 : onProfileItemSelect(changedItem);
+    };
+    const profileData = () => {
+        const timeAndLimitForMobile = mobileData(isMobileBreakpoint, timeLabel, limitLabel, limitUnit, timeZone, timeFormat);
+        const dynamicTitleCreator = (title, data, needLastElement = false) => {
+            const selectedItem = data.find((item) => item.selected);
+            if (needLastElement) {
+                return `${title}${selectedItem && selectedItem.title ? `: ${selectedItem.title.replace(")", "").replace("(", "").split(" ").at(-1)}` : ""}`;
+            }
+            return `${title}${selectedItem && selectedItem.title ? `: ${selectedItem.title}` : ""}`;
+        };
+        const languagesDataCheck = languagesData.length > 0
+            ? {
+                title: dynamicTitleCreator(languageText, languagesData),
+                id: "language",
+                divider: true,
+                children: languagesData
+            }
+            : null;
+        const walletDataCheck = walletData.length > 0
+            ? {
+                title: walletText,
+                id: "wallet",
+                children: walletData,
+                divider: activityData.length === 0 && !currencyConvertorText && currencyData.length === 0
+            }
+            : null;
+        const currencyCheck = currencyData.length > 0
+            ? {
+                title: dynamicTitleCreator(currencyText, currencyData, true),
+                id: "currency",
+                children: currencyData,
+                divider: activityData.length === 0 && !currencyConvertorText
+            }
+            : null;
+        const currencyConvertorCheck = currencyConvertorText
+            ? {
+                title: currencyConvertorText,
+                id: "currencyConvertor",
+                divider: activityData.length === 0
+            }
+            : null;
+        const activityCheck = activityData.length > 0
+            ? {
+                title: dynamicTitleCreator(activityText, activityData),
+                id: "activity",
+                children: activityData,
+                divider: true
+            }
+            : null;
+        const customActionsCheck = actions && actions.length > 0 && !isDesktopBreakpoint
+            ? actions.map((action, index) => {
+                return {
+                    title: action.title,
+                    id: action.id,
+                    divider: index === actions.length - 1
+                };
+            })
+            : null;
+        const constantData = [
+            {
+                title: myAccountText,
+                id: "myAccount"
+            },
+            {
+                title: settingsText,
+                id: "settings"
+            },
+            ...(languagesDataCheck ? [languagesDataCheck] : []),
+            ...(walletDataCheck ? [walletDataCheck] : []),
+            ...(currencyCheck ? [currencyCheck] : []),
+            ...(currencyConvertorCheck ? [currencyConvertorCheck] : []),
+            ...(activityCheck ? [activityCheck] : []),
+            ...(customActionsCheck || [])
+        ];
+        const logOut = {
+            title: logOutText || "Log out",
+            id: "logOut",
+            danger: true
+        };
+        const partnersDataForProfile = isMobileBreakpoint && partners && partners.length > 0
+            ? {
+                title: partnersName || "Partner",
+                id: "teams",
+                value: "teams",
+                children: partnersData
+            }
+            : {};
+        return ([partnersDataForProfile, ...timeAndLimitForMobile, ...constantData, logOut].filter((item) => item && typeof item === "object" && "id" in item) || []);
+    };
+    return (React__default.createElement("div", { className: classNames("globalHeader", className, {
+            globalHeader_mobile: isMobileBreakpoint
+        }) },
+        React__default.createElement("div", { className: "globalHeader_side_left" },
+            React__default.createElement(Button, { onClick: onNavigationButtonClickHandler, Icon: SvgHamburgerMenu, appearance: "inverse", layout: "text", size: "medium" }),
+            logoAs ? (cloneElement(logoAs, {
+                className: classNames("globalHeader__logo_link", logoAs.props.className),
+                children: (React__default.createElement(Logo, { className: "globalHeader__logo", type: "logomark", appearance: "inverse", size: "small" })),
+                "aria-label": "logo"
+            })) : (React__default.createElement(Logo, { className: "globalHeader__logo", type: "logomark", appearance: "inverse", size: "small" })),
+            isDesktopBreakpoint && leftContent),
+        React__default.createElement("div", { className: "globalHeader_side_right" },
+            partners && !isMobileBreakpoint && (React__default.createElement("div", { className: "globalHeader__item" },
+                React__default.createElement(Partners, { onPartnerSelect: onPartnerSelect, partners: partners, loading: partnersLoading, loadingText: partnersLoadingText, searchPlaceholder: partnersSearchPlaceholder, disabled: partnersDisabled, title: partnersName, idName: partnersIdName }),
+                React__default.createElement(Divider, { direction: "vertical", className: "globalHeader__divider" }))),
+            (limitLabel || limitUnit) && !isMobileBreakpoint && (React__default.createElement("div", { className: "globalHeader__item" },
+                React__default.createElement(Limit, { limit: limitUnit, label: limitLabel }),
+                React__default.createElement(Divider, { direction: "vertical", className: "globalHeader__divider" }))),
+            !isMobileBreakpoint && (timeZone || timeFormat || timeLabel) && (React__default.createElement("div", { className: "globalHeader__item" },
+                React__default.createElement(Time, { timeZone: timeZone, format: timeFormat }),
+                React__default.createElement(Divider, { direction: "vertical", className: "globalHeader__divider" }))),
+            actions && isDesktopBreakpoint && (React__default.createElement("div", { className: "globalHeader__item" },
+                React__default.createElement("div", { className: "globalHeader__actions" }, actions.map((action) => (React__default.createElement(Button, { key: action.id, onClick: () => action.onActionSelect(action), Icon: action.Icon, appearance: "inverse", layout: "text", size: "medium" })))),
+                React__default.createElement(Divider, { direction: "vertical", className: "globalHeader__divider" }))),
+            React__default.createElement("div", { className: "globalHeader__item" },
+                React__default.createElement("div", { className: "globalHeader__actions" },
+                    onHelpActionSelect && (React__default.createElement(Button, { onClick: onHelpActionSelect, Icon: SvgQuestionMark, appearance: "inverse", layout: "text", size: "medium" })),
+                    products && (React__default.createElement(Products, { onChange: onProductSelect },
+                        products.mainSectionData && products.mainSectionData.length > 0 && (React__default.createElement(ProductsMainSection, null, (_a = products.mainSectionData) === null || _a === void 0 ? void 0 : _a.map((product) => (React__default.createElement(Product, Object.assign({ key: product.id }, product)))))),
+                        products.secondarySectionData && ((_b = products.secondarySectionData) === null || _b === void 0 ? void 0 : _b.length) > 0 && (React__default.createElement(ProductsSecondarySection, null, (_c = products.secondarySectionData) === null || _c === void 0 ? void 0 : _c.map((product) => (React__default.createElement(Product, Object.assign({ key: product.id }, product))))))))),
+                React__default.createElement(Divider, { direction: "vertical", className: "globalHeader__divider" })),
+            React__default.createElement(Profile, { profileData: profileData(), className: "globalHeader__profile", fullName: "Full Name", onProfileItemSelect: onProfileItemSelectHandler }))));
+};
+
+export { GlobalHeader as default };

package/Menu.js

@@ -1,9 +1,9 @@
-export { M as Menu, a as MenuItem } from './index-9059ca69.js';
+export { M as Menu, a as MenuItem } from './index-0409f986.js';
 import 'react';
 import './index-ce02421b.js';
 import './Loader.js';
 import './style-inject.es-746bb8ed.js';
-import './PopoverBody-24acd45b.js';
+import './PopoverBody-989eb114.js';
 import './floating-ui.react-a6c3b969.js';
 import 'react-dom';
 import './Info-0f0741e0.js';

package/Navigation.js

@@ -3,9 +3,9 @@ import { c as classNames } from './index-ce02421b.js';
 import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
 import { S as SvgX } from './X-20da3b4a.js';
 import Button from './Button.js';
-import { P as Popover, a as PopoverBody } from './PopoverBody-24acd45b.js';
+import { P as Popover, a as PopoverBody } from './PopoverBody-989eb114.js';
 import Scrollbar from './Scrollbar.js';
-import { S as SvgChevronRight, M as Menu, a as MenuItem } from './index-9059ca69.js';
+import { S as SvgChevronRight, M as Menu, a as MenuItem } from './index-0409f986.js';
 import Text from './Text.js';
 import Tooltip from './Tooltip.js';
 import { u as useEllipsisDetection } from './useEllipsisDetection-9a842504.js';
@@ -347,13 +347,13 @@ const Navigation = ({ className, open, navigationData = [], activePath, onClick,
                 clonedNavigationData.length > maxVisibleItems && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(NavigationColItem, { Icon: SvgThreeDotsHorizontal, title: moreMenuTitle, isVisible: true, propsForPopover: menuPropsForPopover }),
                     React__default.createElement(Menu, { position: "right-bottom", onChange: onMoreMenuItemsClickHandler, setPropsForPopover: setMenuPropsForPopover }, menuData.map(({ Icon, title, disabled }, index) => {
-                        return (React__default.createElement(MenuItem, { id: index, IconBefore: Icon, selected: index === moreMenuDataActiveIndex, disabled: disabled }, title));
+                        return (React__default.createElement(MenuItem, { key: `menuitem-${title}-${(Icon === null || Icon === void 0 ? void 0 : Icon.displayName) || (Icon === null || Icon === void 0 ? void 0 : Icon.name) || index}`, id: index, IconBefore: Icon, selected: index === moreMenuDataActiveIndex, disabled: disabled }, title));
                     })))),
                 navigationCreateData && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(Button, Object.assign({ onClick: () => { }, Icon: isCreateMenuOpen ? SvgX : SvgPlus, size: "large", appearance: "secondary", className: "navigation__addButton" }, propsForCreatePopover)),
-                    React__default.createElement(Menu, { position: "right-bottom", onChange: onNavigationCreateDataClickHandler, setPropsForPopover: setPropsForCreatePopover, onOpenChange: onCreateMenuClickHandler }, navigationCreateData.map((props) => {
+                    React__default.createElement(Menu, { position: "right-bottom", onChange: onNavigationCreateDataClickHandler, setPropsForPopover: setPropsForCreatePopover, onOpenChange: onCreateMenuClickHandler }, navigationCreateData.map((props, index) => {
                         const { title } = props, rest = __rest(props, ["title"]);
-                        return React__default.createElement(MenuItem, Object.assign({}, rest), title);
+                        return (React__default.createElement(MenuItem, Object.assign({}, rest, { key: `create-${title}-${props.id || index}` }), title));
                     })))))),
         forceOpen &&
             currentDataIndex !== null &&

package/Popover.js

@@ -1,4 +1,4 @@
-export { P as Popover, a as PopoverBody } from './PopoverBody-24acd45b.js';
+export { P as Popover, a as PopoverBody } from './PopoverBody-989eb114.js';
 import React__default from 'react';
 import './floating-ui.react-a6c3b969.js';
 import 'react-dom';

package/{PopoverBody-24acd45b.js → PopoverBody-989eb114.js}

@@ -291,7 +291,7 @@ const Popover = forwardRef(({ size = "medium", fitReference, position = "bottom-
         (isMobile ? (React__default.createElement(Spreadsheet, { inset: false, open: isPopoverOpened, onClose: () => {
                 onClose === null || onClose === void 0 ? void 0 : onClose();
             } },
-            React__default.createElement("div", { className: classNames("popover__container", "popover__container_height_full") },
+            React__default.createElement("div", Object.assign({ className: classNames("popover__container", "popover__container_height_full"), ref: refs.setFloating }, getFloatingProps()),
                 title && (React__default.createElement("div", { className: "popover__header" },
                     React__default.createElement("p", { className: "popover__title" },
                         React__default.createElement(SvgInfo, { className: "popover__title_icon", size: 20 }),

package/Products.js

@@ -1,9 +1,10 @@
-import React__default, { createContext, useContext, useState, useMemo } from 'react';
+import React__default, { createContext, useContext, useState, useRef, useMemo } from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
 import Button from './Button.js';
-import { P as Popover, a as PopoverBody } from './PopoverBody-24acd45b.js';
+import { P as Popover, a as PopoverBody } from './PopoverBody-989eb114.js';
 import { a as GeneUIDesignSystemContext } from './index-b1807fa4.js';
+import { a as useClickOutside } from './index-ead22fa8.js';
 import { s as styleInject } from './style-inject.es-746bb8ed.js';
 import Badge from './Badge.js';
 import Text from './Text.js';
@@ -13,7 +14,6 @@ import './floating-ui.react-a6c3b969.js';
 import 'react-dom';
 import './Info-0f0741e0.js';
 import './X-20da3b4a.js';
-import './index-ead22fa8.js';
 import './Scrollbar.js';
 import 'prop-types';
 import './useDebounceCallback-999deae7.js';
@@ -37,9 +37,10 @@ var SvgAppGrid = function SvgAppGrid(_ref) {
   }));
 };
 
-var css_248z = ".products{width:36rem}.products__mobile{height:100%;width:100%}.products__container{display:inline-flex;flex-direction:column;gap:var(--guit-ref-spacing-large);padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.products__list{grid-gap:var(--guit-ref-spacing-xsmall);display:grid;grid-template-columns:repeat(3,1fr)}.products__item{align-items:center;border-radius:var(--guit-ref-radius-3xsmall);color:var(--guit-sem-color-foreground-neutral-2);cursor:pointer;display:flex;flex-direction:column;gap:var(--guit-ref-spacing-3xsmall);justify-content:flex-start;min-width:0;padding:var(--guit-ref-spacing-xsmall);text-align:center;-webkit-user-select:none;user-select:none;width:100%}.products__item:hover{background-color:var(--guit-sem-color-background-neutral-1-nudge-hover)}.products__item:active{background-color:var(--guit-sem-color-background-neutral-1-pressed)}.products__item_disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}.products__item_logo{align-items:center;display:flex;height:var(--guit-sem-dimension-height-xlarge);justify-content:center;width:var(--guit-sem-dimension-width-xlarge)}.products__item_title{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height);overflow-wrap:anywhere}.products__badge{min-width:100%}";
+var css_248z = ".products{width:36rem}.products__mobile{height:100%;width:100%}.products__container{display:inline-flex;flex-direction:column;gap:var(--guit-ref-spacing-large);padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large);width:100%}.products__list{grid-gap:var(--guit-ref-spacing-xsmall);display:grid;grid-template-columns:repeat(3,1fr)}.products__item{align-items:center;border-radius:var(--guit-ref-radius-3xsmall);color:var(--guit-sem-color-foreground-neutral-2);cursor:pointer;display:flex;flex-direction:column;gap:var(--guit-ref-spacing-3xsmall);justify-content:flex-start;min-width:0;padding:var(--guit-ref-spacing-xsmall);text-align:center;-webkit-user-select:none;user-select:none;width:100%}.products__item:hover{background-color:var(--guit-sem-color-background-neutral-1-nudge-hover)}.products__item:active{background-color:var(--guit-sem-color-background-neutral-1-pressed)}.products__item_selected{background-color:var(--guit-sem-color-background-selected-2);color:var(--guit-sem-color-foreground-inverse);pointer-events:none}.products__item_disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}.products__item_logo{align-items:center;display:flex;height:var(--guit-sem-dimension-height-xlarge);justify-content:center;width:var(--guit-sem-dimension-width-xlarge)}.products__item_title{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height);overflow-wrap:anywhere}.products__badge{min-width:100%}";
 styleInject(css_248z);
 
+const PRODUCT_GAP_FROM_TARGET = 4;
 const ProductsContext = createContext({});
 /**
  * Products component is a menu-based UI element that allows users to switch between different products or services within an ecosystem.
@@ -47,30 +48,48 @@ const ProductsContext = createContext({});
 const Products = ({ onChange, children }) => {
     const { breakpoint } = useContext(GeneUIDesignSystemContext);
     const [propsForContent, setPropsForContent] = useState({});
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const popoverRef = useRef({
+        floatingElement: { current: null },
+        referenceElement: { current: null }
+    });
+    useClickOutside(() => {
+        setPopoverOpen(false);
+    }, [popoverRef.current.floatingElement, popoverRef.current.referenceElement]);
     const isRTL = document.dir === "rtl";
+    const onProductsChange = (product) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(product);
+        setPopoverOpen(false);
+    };
+    const toggleButtonHandler = () => {
+        setPopoverOpen((prev) => !prev);
+    };
     const memoizedProductsContextValue = useMemo(() => ({
-        onChange
+        onChange: onProductsChange
     }), []);
     return (React__default.createElement(ProductsContext.Provider, { value: memoizedProductsContextValue },
-        React__default.createElement(Popover, { disableReposition: false, position: `${isRTL ? "bottom-left" : "bottom-right"}`, size: "medium", setProps: setPropsForContent, withArrow: false, margin: 4 },
+        React__default.createElement(Popover, { disableReposition: false, position: `${isRTL ? "bottom-left" : "bottom-right"}`, size: "medium", setProps: setPropsForContent, withArrow: false, margin: PRODUCT_GAP_FROM_TARGET, open: popoverOpen, ref: popoverRef },
             React__default.createElement(PopoverBody, { className: classNames("products", {
                     products__mobile: breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.isMobileBreakpoint
                 }), withPadding: false },
                 React__default.createElement("div", { className: "products__container" }, children))),
-        React__default.createElement(Button, Object.assign({ Icon: SvgAppGrid, appearance: "inverse", layout: "text" }, propsForContent))));
+        React__default.createElement(Button, Object.assign({ Icon: SvgAppGrid, appearance: "inverse", layout: "text", onClick: toggleButtonHandler }, propsForContent))));
 };
 
 const ProductButton = (props) => {
-    const { title, Icon, disabled } = props;
+    const { title, Icon, disabled, selected } = props;
     const { onChange } = useContext(ProductsContext);
-    return (React__default.createElement("button", { type: "button", disabled: disabled, className: classNames("products__item", { products__item_disabled: disabled }), onClick: () => onChange(props) },
+    return (React__default.createElement("button", { type: "button", disabled: disabled, className: classNames("products__item", {
+            products__item_disabled: disabled,
+            products__item_selected: selected
+        }), onClick: () => onChange(props) },
         React__default.createElement("span", { className: "products__item_logo" },
             React__default.createElement(Icon, { size: 48 })),
         React__default.createElement(Text, { as: "span", className: "products__item_title", alignment: "center" }, title)));
 };
 const Product = (props) => {
     const { withBadge } = props;
-    return withBadge ? (React__default.createElement(Badge, { className: "products__badge" },
+    return withBadge ? (React__default.createElement(Badge, { className: "products__badge", withBorder: true },
         React__default.createElement(ProductButton, Object.assign({}, props)))) : (React__default.createElement(ProductButton, Object.assign({}, props)));
 };
 

package/Profile.js

@@ -1,12 +1,12 @@
-import React__default, { useState, useContext } from 'react';
-import { c as classNames } from './index-ce02421b.js';
-import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
-import { A as Avatar, S as SvgPersonFilled } from './index-0b9e90da.js';
-import { M as Menu, a as MenuItem } from './index-9059ca69.js';
-import { a as GeneUIDesignSystemContext } from './index-b1807fa4.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
+export { P as default } from './index-b3aa52eb.js';
+import 'react';
+import './index-ce02421b.js';
+import './ActivityRecent-b88e2ba8.js';
+import './index-0b9e90da.js';
+import './style-inject.es-746bb8ed.js';
+import './index-0409f986.js';
 import './Loader.js';
-import './PopoverBody-24acd45b.js';
+import './PopoverBody-989eb114.js';
 import './floating-ui.react-a6c3b969.js';
 import 'react-dom';
 import './Info-0f0741e0.js';
@@ -16,63 +16,7 @@ import './index-ead22fa8.js';
 import './Scrollbar.js';
 import 'prop-types';
 import './useDebounceCallback-999deae7.js';
+import './index-b1807fa4.js';
 import './index-a2688a52.js';
 import './CheckMark-34798545.js';
 import './Divider.js';
-
-var _excluded = ["size", "color"];
-var SvgCaretDownFilled = function SvgCaretDownFilled(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 24 : _ref$size,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "currentColor" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement("svg", _extends({
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: color,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React__default.createElement("path", {
-    d: "M15.916 9h-7.832a1.083 1.083 0 0 0-.758 1.857l3.921 3.839a1.084 1.084 0 0 0 1.517-.001l3.911-3.838a1.084 1.084 0 0 0-.759-1.857Z",
-    fill: color
-  }));
-};
-
-var css_248z = ".profile__button{align-items:center;border-radius:1.6rem;cursor:pointer;display:inline-flex;gap:var(--guit-ref-spacing-2xsmall);height:3.2rem;-webkit-user-select:none;user-select:none;vertical-align:top}.profile__button:hover{background-color:var(--guit-sem-color-background-transparent-inverse-1-hover)}.profile__button:active{background-color:var(--guit-sem-color-background-transparent-inverse-1-pressed)}.profile__button:focus-visible{outline:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-focus);outline-offset:var(--guit-ref-border-width-thin)}.profile__button:has(.profile__content){padding-inline-end:var(--guit-ref-spacing-2xsmall)}.profile__avatar{flex:0 0 auto}.profile__content{align-items:center;color:var(--guit-sem-color-foreground-inverse-notheme);display:flex;gap:var(--guit-ref-spacing-4xsmall)}.profile__text{font-family:var(--guit-sem-font-caption-large-medium-font-family);font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-line-height)}.profile__icon{flex:0 0 auto}";
-styleInject(css_248z);
-
-const ProfileDataRecursion = (menuData) => {
-    return menuData.map((el) => {
-        return (React__default.createElement(MenuItem, { key: el.id, selected: el.selected, title: el.children ? el.title : "", IconBefore: el.IconBefore, IconAfter: el.IconAfter, danger: el.danger, disabled: el.disabled, loading: el.loading, id: el.id, divider: el.divider, loadingText: el.loadingText, emptyText: el.emptyText, ComponentRender: el.ComponentRender }, el.children ? ProfileDataRecursion(el.children) : el.title));
-    });
-};
-/**
- * Profile component provides users with access to quick actions, including links to settings, personal preferences, and other utility functions such.
- */
-const Profile = ({ className, onToggle, fullName, src, onProfileItemSelect, profileData }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [propsForPopover, setPropsForPopover] = useState({});
-    const { breakpoint } = useContext(GeneUIDesignSystemContext);
-    const isMobileBreakpoint = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.isMobileBreakpoint;
-    const isRTLMode = document.dir === "rtl";
-    const onProfileClickHandler = (e) => {
-        if (onToggle) {
-            onToggle(e, !isOpen);
-        }
-        setIsOpen((prev) => !prev);
-    };
-    const onProfileItemSelectHandler = (item) => {
-        onProfileItemSelect === null || onProfileItemSelect === void 0 ? void 0 : onProfileItemSelect(item);
-    };
-    const Elements = ProfileDataRecursion(profileData);
-    return (React__default.createElement("div", { className: "profile" },
-        React__default.createElement("button", Object.assign({ type: "button", onClick: onProfileClickHandler, className: classNames("profile__button", className) }, propsForPopover),
-            React__default.createElement(Avatar, { className: "profile__avatar", fullName: fullName, Icon: SvgPersonFilled, src: src }),
-            !isMobileBreakpoint && (React__default.createElement("div", { className: "profile__content" },
-                React__default.createElement("span", { className: "profile__text" }, fullName),
-                React__default.createElement(SvgCaretDownFilled, { className: "profile__icon", size: 20 })))),
-        React__default.createElement(Menu, { onChange: onProfileItemSelectHandler, setPropsForPopover: setPropsForPopover, position: isRTLMode ? "bottom-left" : "bottom-right", swappable: true, size: "large" }, Elements)));
-};
-
-export { Profile as default };

package/Scrollbar.js

@@ -3392,7 +3392,7 @@ function (_super) {
   return Scrollbar;
 }(React$1.Component);
 
-var css_248z = ".scrollbar{min-height:0;min-width:0}.scrollbar_width_full,.scrollbar_width_full .scrollbar__content{width:100%}.scrollbar_width_auto{width:auto}.scrollbar_height_full,.scrollbar_height_full .scrollbar__content{height:100%}.scrollbar_height_auto{height:auto}.scrollbar__wrapper{height:100%;position:relative!important;width:100%}.scrollbar__scroller{height:100%;inset:auto!important;margin:0!important;padding:0!important;position:relative!important}.scrollbar__scroller::-webkit-scrollbar,.scrollbar__scroller::-webkit-scrollbar-thumb,.scrollbar__scroller::-webkit-scrollbar-track{height:0;width:0}.scrollbar__content{padding:0!important}.scrollbar__content:focus-visible{outline:none}.scrollbar__track{border-radius:var(--guit-ref-radius-3xsmall);bottom:var(--guit-ref-spacing-3xsmall)!important;inset-inline-end:var(--guit-ref-spacing-4xsmall);overflow:hidden;position:absolute;z-index:100}.scrollbar__track_direction_y{height:100%;top:0;width:.6rem}.scrollbar__track_direction_x{bottom:0;height:.6rem;width:100%}.scrollbar__thumb{background:var(--guit-sem-color-background-transparent-2);border-radius:var(--guit-ref-radius-3xsmall);overflow:hidden;position:absolute}.scrollbar__thumb_direction_y{height:100%;inset-inline-end:0;top:0;width:.6rem}.scrollbar__thumb_direction_x{bottom:0;height:.6rem;inset-inline-start:0;width:100%}.scrollbar__thumb_direction_hide{height:0;width:0}";
+var css_248z = ".scrollbar{min-height:0;min-width:0}.scrollbar_width_full,.scrollbar_width_full .scrollbar__content{width:100%}.scrollbar_width_auto{width:auto}.scrollbar_height_full,.scrollbar_height_full .scrollbar__content{height:100%}.scrollbar_height_auto{height:auto}.scrollbar__wrapper{height:100%;position:relative!important;width:100%}.scrollbar__scroller{height:100%;inset:auto!important;margin:0!important;padding:0!important;position:relative!important}.scrollbar__scroller::-webkit-scrollbar,.scrollbar__scroller::-webkit-scrollbar-thumb,.scrollbar__scroller::-webkit-scrollbar-track{height:0;width:0}@-moz-document url-prefix(\"\"){.scrollbar__scroller{scrollbar-width:none}}.scrollbar__content{padding:0!important}.scrollbar__content:focus-visible{outline:none}.scrollbar__track{border-radius:var(--guit-ref-radius-3xsmall);bottom:var(--guit-ref-spacing-3xsmall)!important;inset-inline-end:var(--guit-ref-spacing-4xsmall);overflow:hidden;position:absolute;z-index:100}.scrollbar__track_direction_y{height:100%;top:0;width:.6rem}.scrollbar__track_direction_x{bottom:0;height:.6rem;width:100%}.scrollbar__thumb{background:var(--guit-sem-color-background-transparent-2);border-radius:var(--guit-ref-radius-3xsmall);overflow:hidden;position:absolute}.scrollbar__thumb_direction_y{height:100%;inset-inline-end:0;top:0;width:.6rem}.scrollbar__thumb_direction_x{bottom:0;height:.6rem;inset-inline-start:0;width:100%}.scrollbar__thumb_direction_hide{height:0;width:0}";
 styleInject(css_248z);
 
 /**

package/components/molecules/Products/Product.d.ts

@@ -22,6 +22,11 @@ interface IProductProps {
      * Indicates whether the `Product` is `disabled`, preventing user interaction, focus, click etc...
      */
     disabled?: boolean;
+    /**
+     * Indicates whether the `Product` is currently selected.
+     * When `true`, the product will display with a selected visual style.
+     */
+    selected?: boolean;
 }
 declare const Product: FC<IProductProps>;
 export { IProductProps, Product as default };

package/components/molecules/Products/Products.d.ts

@@ -16,7 +16,7 @@ interface IProductsProps {
      */
     children: ReactNode;
     /**
-     * Fires when the user interact with `Product`. Provides the `Product` `id` as a callback's argument.
+     * Fires when the user interact with `Product`. Provides the `Product` as a callback's argument.
      */
     onChange?: (event: IProductProps) => void;
 }

package/components/organisms/GlobalHeader/GlobalHeader.d.ts

@@ -0,0 +1,212 @@
+import { FC, MouseEvent, ReactElement, ReactNode } from "react";
+import { IconProps } from "@geneui/icons";
+import { IMenuItemProps } from "@components/molecules/Menu";
+import { IProductProps } from "@components/molecules/Products";
+import { IProfileData } from "@components/molecules/Profile";
+import { IPartnerItemData } from "@components/organisms/GlobalHeader/Partners/Partners";
+import "./GlobalHeader.scss";
+export interface IProducts {
+    mainSectionData?: IProductProps[];
+    secondarySectionData?: IProductProps[];
+}
+export interface IAction {
+    title: string;
+    Icon: FC<IconProps>;
+    id: string;
+    onActionSelect: (action: IAction) => void;
+}
+interface IGlobalHeaderProps {
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
+    /**
+     * Triggered when the navigation button (hamburger menu) is clicked.
+     */
+    onNavigationButtonClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional logo link. You can pass a React Router Link, Next.js Link, or just an <a>.
+     * Example: <Link to="/"> or <a href="/">.
+     */
+    logoAs?: ReactElement;
+    /**
+     * An array of partner items to display in the partners dropdown.
+     */
+    partners?: IPartnerItemData[];
+    /**
+     * Callback function when a partner is selected from the list.
+     */
+    onPartnerSelect?: (partner: IPartnerItemData | IMenuItemProps) => void;
+    /**
+     * Whether the partners dropdown should be disabled.
+     */
+    partnersDisabled?: boolean;
+    /**
+     * Whether the partners list is currently loading.
+     * Displays a loading indicator.
+     */
+    partnersLoading?: boolean;
+    /**
+     * Text to display when the partners list is loading.
+     */
+    partnersLoadingText?: string;
+    /**
+     * Placeholder text for the partners search input.
+     */
+    partnersSearchPlaceholder?: string;
+    /**
+     * The property name use as the label for partner name in the dropdown.
+     * The default value is "Partner". This prop is used for internationalization.
+     */
+    partnersName?: string;
+    /**
+     * The property id use as the label for partner id in the dropdown.
+     */
+    partnersIdName?: string;
+    /**
+     * Label for the limit section (e.g. "Limit").
+     */
+    limitLabel?: string;
+    /**
+     * Unit or amount to show next to the limit label (e.g. "100").
+     */
+    limitUnit?: string | number;
+    /**
+     * The time zone to display the time in.
+     * If not provided, it will use the local time zone of the user's device.
+     * example: "America/New_York", "Europe/London"
+     */
+    timeZone?: string;
+    /**
+     * The format of the time to display.
+     * Possible values: "24h" or "12h"
+     * Default is "24h"
+     */
+    timeFormat?: "24h" | "12h";
+    /**
+     * Label for the time section, in mobile Breakpoint default is "Time"
+     */
+    timeLabel?: string;
+    /**
+     * Configuration object containing product data for main and secondary sections.
+     * Used to render the products dropdown in the global header.
+     */
+    products?: IProducts;
+    /**
+     * Callback function when a product is selected from the list.
+     */
+    onProductSelect?: (product: IProductProps) => void;
+    /**
+     * Callback triggered when a profile menu item is selected.
+     * Receives the selected menu item as an argument.
+     */
+    onProfileItemSelect?: (item: IMenuItemProps) => void;
+    /**
+     * Callback function triggered when a language is selected from the language dropdown.
+     * Receives the selected language item as an argument.
+     */
+    onLanguageSelect?: (item: IMenuItemProps) => void;
+    /**
+     * Array of language options to display in the profile dropdown.
+     * Each item should have a title, id, and selected state.
+     */
+    languages?: IProfileData[];
+    /**
+     * Label text for the language section in the profile dropdown.
+     * Default value is "Language". Used for internationalization.
+     */
+    languageText?: string;
+    /**
+     * Text to display for the log out menu item.
+     * Default value is "Log out". Used for internationalization.
+     */
+    logOutText?: string;
+    /**
+     * Text to display for the my account menu item.
+     * Default value is "My Account". Used for internationalization.
+     */
+    myAccountText?: string;
+    /**
+     * Text to display for the settings menu item.
+     * Default value is "Settings". Used for internationalization.
+     */
+    settingsText?: string;
+    /**
+     * Array of wallet options to display in the profile dropdown.
+     * Each item should have a title, id, and selected state.
+     */
+    wallet?: IProfileData[];
+    /**
+     * Label text for the wallet section in the profile dropdown.
+     * Default value is "Wallet". Used for internationalization.
+     */
+    walletText?: string;
+    /**
+     * Callback function triggered when a wallet option is selected.
+     * Receives the selected wallet item as an argument.
+     */
+    onWalletSelect?: (item: IMenuItemProps) => void;
+    /**
+     * Array of currency options to display in the profile dropdown.
+     * Each item should have a title, id, and selected state.
+     */
+    currency?: IProfileData[];
+    /**
+     * Label text for the currency section in the profile dropdown.
+     * Default value is "Reporting Currency". Used for internationalization.
+     */
+    currencyText?: string;
+    /**
+     * Callback function triggered when a currency option is selected.
+     * Receives the selected currency item as an argument.
+     */
+    onCurrencySelect?: (item: IMenuItemProps) => void;
+    /**
+     * Array of activity filter options to display in the profile dropdown.
+     * Each item should have a title, id, and selected state.
+     */
+    activity?: IProfileData[];
+    /**
+     * Label text for the activity section in the profile dropdown.
+     * Default value is "Activity". Used for internationalization.
+     */
+    activityText?: string;
+    /**
+     * Callback function triggered when an activity filter is selected.
+     * Receives the selected activity item as an argument.
+     */
+    onActivitySelect?: (item: IMenuItemProps) => void;
+    /**
+     * Text to display for the currency converter menu item.
+     * If provided, adds a currency converter option to the profile dropdown.
+     */
+    currencyConvertorText?: string;
+    /**
+     * Callback function triggered when the currency converter option is selected.
+     * Receives the menu item as an argument.
+     */
+    onCurrencyConvertorSelect?: (item: IMenuItemProps) => void;
+    /**
+     * Optional React component or element to display dynamic content in the header's left section,
+     * positioned adjacent to the logo. Commonly used for real-time information such as exchange rates,
+     * system status, etc.
+     */
+    leftContent?: ReactNode;
+    /**
+     * Callback function triggered when the Help button (with the QuestionMark icon) is clicked.
+     * If not provided, the Help button will not be displayed in the header.
+     */
+    onHelpActionSelect?: () => void;
+    /**
+     * Array of custom action buttons to display in the header.
+     * Each action includes a title, icon, id, and callback function.
+     * Actions are shown on desktop and moved to profile dropdown on mobile.
+     */
+    actions?: IAction[];
+}
+/**
+ * Global Header component is a persistent navigation element that appears at the top of an application or website. It serves as a central hub for accessing key features and tools, ensuring consistent and intuitive navigation across all pages.
+ */
+declare const GlobalHeader: FC<IGlobalHeaderProps>;
+export { IGlobalHeaderProps, GlobalHeader as default };

package/components/organisms/GlobalHeader/Limit/Limit.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+interface ILimitProps {
+    label?: string;
+    limit?: string | number;
+    isMobile?: boolean;
+}
+declare const Limit: FC<ILimitProps>;
+export { ILimitProps, Limit as default };

package/components/organisms/GlobalHeader/Partners/PartnerItem.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface IPartnerItemProps {
+    title: string;
+    id: string | number;
+    onChange: (id: string | number) => void;
+    selected: boolean;
+}
+declare const PartnerItem: React.ForwardRefExoticComponent<IPartnerItemProps & React.RefAttributes<HTMLButtonElement>>;
+export { PartnerItem as default };

package/components/organisms/GlobalHeader/Partners/Partners.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { IPartnerItemProps } from "@components/organisms/GlobalHeader/Partners/PartnerItem";
+import "./Partners.scss";
+export type IPartnerItemData = Omit<IPartnerItemProps, "onChange">;
+interface IPartnersProps {
+    onPartnerSelect?: (partner: IPartnerItemData) => void;
+    partners?: IPartnerItemData[];
+    loading?: boolean;
+    loadingText?: string;
+    searchPlaceholder?: string;
+    disabled?: boolean;
+    title?: string;
+    idName?: string;
+}
+declare const Partners: FC<IPartnersProps>;
+export { IPartnersProps, Partners as default };

package/components/organisms/GlobalHeader/Time/Time.d.ts

@@ -0,0 +1,22 @@
+import { FC } from "react";
+interface ITimeProps {
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
+    /**
+     * The time zone to display the time in.
+     * If not provided, it will use the local time zone of the user's device.
+     * example: "America/New_York", "Europe/London"
+     */
+    timeZone?: string;
+    /**
+     * The format of the time to display.
+     * Possible values: "24h" or "12h"
+     * Default is "24h"
+     */
+    format?: "24h" | "12h";
+}
+declare const Time: FC<ITimeProps>;
+export { ITimeProps, Time as default };

package/components/organisms/GlobalHeader/index.d.ts

@@ -0,0 +1 @@
+export { IGlobalHeaderProps, IAction, IProducts, default } from "./GlobalHeader";

package/{index-9059ca69.js → index-0409f986.js}

@@ -1,7 +1,7 @@
 import React__default, { createContext, useState, useRef, useContext, useEffect, useMemo, Children, cloneElement } from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import Loader from './Loader.js';
-import { P as Popover, a as PopoverBody } from './PopoverBody-24acd45b.js';
+import { P as Popover, a as PopoverBody } from './PopoverBody-989eb114.js';
 import Scrollbar from './Scrollbar.js';
 import { a as GeneUIDesignSystemContext } from './index-b1807fa4.js';
 import { a as useClickOutside } from './index-ead22fa8.js';
@@ -173,7 +173,7 @@ const Menu = ({ onChange, children, loading, loadingText, swappable, setPropsFor
             setPaths(currentPath);
         }
         if (closeMenu) {
-            onChange(item);
+            onChange(Object.assign(Object.assign({}, item), { title: typeof (item === null || item === void 0 ? void 0 : item.children) === "string" ? item === null || item === void 0 ? void 0 : item.children : item === null || item === void 0 ? void 0 : item.title }));
         }
     };
     const relativeRefsSetter = ({ generatedId, popoverFloatingRef }) => {

package/index-b3aa52eb.js

@@ -0,0 +1,61 @@
+import React__default, { useState, useContext } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
+import { A as Avatar, S as SvgPersonFilled } from './index-0b9e90da.js';
+import { M as Menu, a as MenuItem } from './index-0409f986.js';
+import { a as GeneUIDesignSystemContext } from './index-b1807fa4.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+
+var _excluded = ["size", "color"];
+var SvgCaretDownFilled = function SvgCaretDownFilled(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 24 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "currentColor" : _ref$color,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement("svg", _extends({
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M15.916 9h-7.832a1.083 1.083 0 0 0-.758 1.857l3.921 3.839a1.084 1.084 0 0 0 1.517-.001l3.911-3.838a1.084 1.084 0 0 0-.759-1.857Z",
+    fill: color
+  }));
+};
+
+var css_248z = ".profile__button{align-items:center;border-radius:1.6rem;cursor:pointer;display:inline-flex;gap:var(--guit-ref-spacing-2xsmall);height:3.2rem;-webkit-user-select:none;user-select:none;vertical-align:top}.profile__button:hover{background-color:var(--guit-sem-color-background-transparent-inverse-1-hover)}.profile__button:active{background-color:var(--guit-sem-color-background-transparent-inverse-1-pressed)}.profile__button:focus-visible{outline:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-focus);outline-offset:var(--guit-ref-border-width-thin)}.profile__button:has(.profile__content){padding-inline-end:var(--guit-ref-spacing-2xsmall)}.profile__avatar{flex:0 0 auto}.profile__content{align-items:center;color:var(--guit-sem-color-foreground-inverse-notheme);display:flex;gap:var(--guit-ref-spacing-4xsmall)}.profile__text{font-family:var(--guit-sem-font-caption-large-medium-font-family);font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-line-height)}.profile__icon{flex:0 0 auto}";
+styleInject(css_248z);
+
+const ProfileDataRecursion = (menuData) => {
+    return menuData.map((el) => (React__default.createElement(MenuItem, { key: el.id, selected: el.selected, title: el.children ? el.title : "", IconBefore: el.IconBefore, IconAfter: el.IconAfter, danger: el.danger, disabled: el.disabled, loading: el.loading, id: el.id, divider: el.divider, loadingText: el.loadingText, emptyText: el.emptyText, ComponentRender: el.ComponentRender }, el.children ? ProfileDataRecursion(el.children) : el.title)));
+};
+/**
+ * Profile component provides users with access to quick actions, including links to settings, personal preferences, and other utility functions such.
+ */
+const Profile = ({ className, onToggle, fullName, src, onProfileItemSelect, profileData }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [propsForPopover, setPropsForPopover] = useState({});
+    const { breakpoint } = useContext(GeneUIDesignSystemContext);
+    const isMobileBreakpoint = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.isMobileBreakpoint;
+    const isRTLMode = document.dir === "rtl";
+    const onProfileClickHandler = (e) => {
+        if (onToggle) {
+            onToggle(e, !isOpen);
+        }
+        setIsOpen((prev) => !prev);
+    };
+    const onProfileItemSelectHandler = (item) => {
+        onProfileItemSelect === null || onProfileItemSelect === void 0 ? void 0 : onProfileItemSelect(item);
+    };
+    return (React__default.createElement("div", { className: "profile" },
+        React__default.createElement("button", Object.assign({ type: "button", onClick: onProfileClickHandler, className: classNames("profile__button", className) }, propsForPopover),
+            React__default.createElement(Avatar, { className: "profile__avatar", fullName: fullName, Icon: SvgPersonFilled, src: src }),
+            !isMobileBreakpoint && (React__default.createElement("div", { className: "profile__content" },
+                React__default.createElement("span", { className: "profile__text" }, fullName),
+                React__default.createElement(SvgCaretDownFilled, { className: "profile__icon", size: 20 })))),
+        React__default.createElement(Menu, { onChange: onProfileItemSelectHandler, setPropsForPopover: setPropsForPopover, position: isRTLMode ? "bottom-left" : "bottom-right", swappable: true, size: "large" }, ProfileDataRecursion(profileData))));
+};
+
+export { Profile as P, SvgCaretDownFilled as S };

package/index.js

@@ -11,7 +11,7 @@ export { default as Rate } from './Rate.js';
 export { default as Radio } from './Radio.js';
 export { default as Text } from './Text.js';
 export { default as TextLink } from './TextLink.js';
-export { P as Popover, a as PopoverBody } from './PopoverBody-24acd45b.js';
+export { P as Popover, a as PopoverBody } from './PopoverBody-989eb114.js';
 export { PopoverFooter, PopoverFooterActions } from './Popover.js';
 export { default as Badge } from './Badge.js';
 export { default as Scrollbar } from './Scrollbar.js';
@@ -27,10 +27,10 @@ export { default as Switch } from './Switch.js';
 export { TimelinePoint, Timelines } from './Timeline.js';
 export { default as QRCode } from './QRCode.js';
 export { Key, KeyValue, Value } from './KeyValue.js';
-export { M as Menu, a as MenuItem } from './index-9059ca69.js';
+export { M as Menu, a as MenuItem } from './index-0409f986.js';
 export { default as Navigation } from './Navigation.js';
 export { default as Checkbox } from './Checkbox.js';
-export { default as Profile } from './Profile.js';
+export { P as Profile } from './index-b3aa52eb.js';
 export { a as GeneUIDesignSystemContext, G as GeneUIProvider, c as useBreakpoint, b as useDeviceInfo, u as useWindowSize } from './index-b1807fa4.js';
 export { u as useDebounce } from './useDebounceCallback-999deae7.js';
 export { u as useEllipsisDetection } from './useEllipsisDetection-9a842504.js';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-e390900-19062025",
+    "version": "3.0.0-next-9873985-09072025",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {