@kodiak-finance/orderly-ui-notification 2.8.20 → 2.8.21-alpha.0

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { API, AnnouncementType, RouterAdapter } from '@kodiak-finance/orderly-types';
 
 declare const AnnouncementCenterUI: FC<{
@@ -42,4 +42,15 @@ declare const useAnnouncement: (options?: AnnouncementOptions) => {
     showAnnouncement: boolean;
 };
 
-export { AnnouncementCenterPage, AnnouncementCenterUI, AnnouncementItem, NotificationUI, useAnnouncement };
+type AnnouncementBannerProps = {
+    dataSource: API.AnnouncementRow[];
+    maintenanceDialogInfo?: string;
+    showAnnouncement: boolean;
+    onClose: () => void;
+    onItemClick?: (url: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const AnnouncementBannerUI: React.FC<Readonly<AnnouncementBannerProps>>;
+
+export { AnnouncementBannerUI, AnnouncementCenterPage, AnnouncementCenterUI, AnnouncementItem, NotificationUI, useAnnouncement };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { API, AnnouncementType, RouterAdapter } from '@kodiak-finance/orderly-types';
 
 declare const AnnouncementCenterUI: FC<{
@@ -42,4 +42,15 @@ declare const useAnnouncement: (options?: AnnouncementOptions) => {
     showAnnouncement: boolean;
 };
 
-export { AnnouncementCenterPage, AnnouncementCenterUI, AnnouncementItem, NotificationUI, useAnnouncement };
+type AnnouncementBannerProps = {
+    dataSource: API.AnnouncementRow[];
+    maintenanceDialogInfo?: string;
+    showAnnouncement: boolean;
+    onClose: () => void;
+    onItemClick?: (url: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const AnnouncementBannerUI: React.FC<Readonly<AnnouncementBannerProps>>;
+
+export { AnnouncementBannerUI, AnnouncementCenterPage, AnnouncementCenterUI, AnnouncementItem, NotificationUI, useAnnouncement };

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var react = require('react');
+var React2 = require('react');
 var orderlyI18n = require('@kodiak-finance/orderly-i18n');
 var orderlyUi = require('@kodiak-finance/orderly-ui');
 var orderlyTypes = require('@kodiak-finance/orderly-types');
@@ -11,6 +11,10 @@ var immer = require('immer');
 var orderlyHooks = require('@kodiak-finance/orderly-hooks');
 var orderlyReactApp = require('@kodiak-finance/orderly-react-app');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+
 // src/components/announcementCenter/announcementCenter.ui.tsx
 var BattleIcon = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Icon, { size: 18, viewBox: "0 0 18 18", ...props, children: [
@@ -118,7 +122,7 @@ var SecurityIcon = (props) => {
 };
 var AnnouncementItem = (props) => {
   const { t } = orderlyI18n.useTranslation();
-  const Icon2 = react.useMemo(() => {
+  const Icon2 = React2.useMemo(() => {
     switch (props.type) {
       case orderlyTypes.AnnouncementType.Campaign:
         return CampaignIcon;
@@ -131,7 +135,7 @@ var AnnouncementItem = (props) => {
         return AnnouncementIcon;
     }
   }, [props.type]);
-  const title = react.useMemo(() => {
+  const title = React2.useMemo(() => {
     switch (props.type) {
       case orderlyTypes.AnnouncementType.Campaign:
         return t("notification.campaign");
@@ -153,7 +157,7 @@ var AnnouncementItem = (props) => {
       return false;
     }
   };
-  const action = react.useMemo(() => {
+  const action = React2.useMemo(() => {
     if (props.type === orderlyTypes.AnnouncementType.Campaign && typeof props.url === "string" && props.url !== "" && typeof props.onItemClick === "function") {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         orderlyUi.Flex,
@@ -188,7 +192,7 @@ var AnnouncementItem = (props) => {
     }
     return null;
   }, [props.type, props.url, t]);
-  const updateTime = react.useMemo(() => {
+  const updateTime = React2.useMemo(() => {
     if (props.type === orderlyTypes.AnnouncementType.Maintenance) {
       return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", intensity: 36, children: t("notification.recentlyUpdated") });
     }
@@ -292,7 +296,7 @@ var AnnouncementContent = (props) => {
 };
 var AnnouncementCenterUI = (props) => {
   const { t } = orderlyI18n.useTranslation();
-  const [expanded, setExpanded] = react.useState(null);
+  const [expanded, setExpanded] = React2.useState(null);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-px-5 oui-pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { intensity: 80, weight: "bold", children: t("notification.title") }) }),
     /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.ScrollArea, { className: "oui-flex oui-h-[300px] oui-flex-col oui-space-y-1 oui-p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -343,7 +347,7 @@ var CampaignContentCard = ({ message, coverImage, url, onItemClick }) => {
 };
 var MaintenanceContentCard = ({ message, startTime, endTime }) => {
   const { t } = orderlyI18n.useTranslation();
-  const formattedMessage = react.useMemo(() => {
+  const formattedMessage = React2.useMemo(() => {
     const hours = dateFns.differenceInHours(endTime, startTime);
     const minutes = dateFns.differenceInMinutes(endTime, startTime) - hours * 60;
     const startUtc = new utc.UTCDate(startTime);
@@ -403,7 +407,7 @@ var NotificationHeader = (props) => {
   const { t } = orderlyI18n.useTranslation();
   const { expanded } = props;
   const { type } = props.dataSource[props.current];
-  const title = react.useMemo(() => {
+  const title = React2.useMemo(() => {
     switch (type) {
       case orderlyTypes.AnnouncementType.Campaign:
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -424,7 +428,7 @@ var NotificationHeader = (props) => {
         return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "sm", color: "inherit", children: t("notification.generalTitle") });
     }
   }, [type, t]);
-  const icon = react.useMemo(() => {
+  const icon = React2.useMemo(() => {
     switch (type) {
       case orderlyTypes.AnnouncementType.Campaign:
         return /* @__PURE__ */ jsxRuntime.jsx(BattleIcon, { color: "white" });
@@ -496,7 +500,7 @@ var NotificationFooter = (props) => {
   );
 };
 var NotificationContent = (props) => {
-  const elements = react.useMemo(() => {
+  const elements = React2.useMemo(() => {
     return props.dataSource.map((message) => {
       const { type } = message;
       switch (type) {
@@ -542,9 +546,9 @@ var NotificationContent = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: elements[props.current] });
 };
 var NotificationUI = (props) => {
-  const [expanded, setExpanded] = react.useState(true);
-  const [current, setCurrent] = react.useState(0);
-  const len = react.useMemo(() => props.dataSource?.length ?? 0, [props.dataSource]);
+  const [expanded, setExpanded] = React2.useState(true);
+  const [current, setCurrent] = React2.useState(0);
+  const len = React2.useMemo(() => props.dataSource?.length ?? 0, [props.dataSource]);
   if (len === 0) {
     return null;
   }
@@ -626,8 +630,8 @@ var useAnnouncementData = () => {
     ORDERLY_ANNOUNCEMENT_KEY,
     {}
   );
-  const [tips, setTips] = react.useState({});
-  const [maintenanceDialogInfo, setMaintenanceDialogInfo] = react.useState();
+  const [tips, setTips] = React2.useState({});
+  const [maintenanceDialogInfo, setMaintenanceDialogInfo] = React2.useState();
   const { startTime, endTime, status, brokerName } = orderlyHooks.useMaintenanceStatus();
   const { t } = orderlyI18n.useTranslation();
   const { data: announcements } = orderlyHooks.useQuery(
@@ -641,7 +645,7 @@ var useAnnouncementData = () => {
   );
   const getMaintentTipsContent = (brokerName2, startDate, endDate) => t("maintenance.tips.description", { brokerName: brokerName2, startDate, endDate });
   const getMaintentDialogContent = (brokerName2, endDate) => t("maintenance.dialog.description", { brokerName: brokerName2, endDate });
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const unsubscribe = ws.subscribe("announcement", {
       onMessage(message) {
         if (message) {
@@ -676,7 +680,7 @@ var useAnnouncementData = () => {
       unsubscribe?.();
     };
   }, [ws]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!announcements?.rows) {
       return;
     }
@@ -716,7 +720,7 @@ var useAnnouncementData = () => {
       });
     }
   }, [announcements]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const startDate = startTime ? getTimeString(startTime) : "-";
     const endDate = endTime ? getTimeString(endTime) : "-";
     if (status === orderlyHooks.MaintenanceStatus.Maintenance) {
@@ -760,7 +764,7 @@ var useAnnouncementData = () => {
     }
   }, [startTime, endTime, status, brokerName, t]);
   const { customAnnouncements } = orderlyReactApp.useAppContext();
-  const mergedTips = react.useMemo(() => {
+  const mergedTips = React2.useMemo(() => {
     const tipsCopy = { ...tips };
     if (customAnnouncements && customAnnouncements.length > 0) {
       tipsCopy.rows = [...customAnnouncements, ...tips.rows || []];
@@ -776,7 +780,7 @@ var useAnnouncement = (options) => {
   const { showAnnouncement, setShowAnnouncement } = orderlyReactApp.useAppContext();
   const { dataAdapter } = orderlyHooks.useOrderlyContext();
   const { tips: mergedTips, maintenanceDialogInfo } = useAnnouncementData();
-  const memoizedTips = react.useMemo(() => {
+  const memoizedTips = React2.useMemo(() => {
     if (typeof dataAdapter?.announcementList === "function") {
       return dataAdapter.announcementList(
         mergedTips?.rows ?? orderlyTypes.EMPTY_LIST
@@ -791,7 +795,7 @@ var useAnnouncement = (options) => {
   const closeTips = () => {
     setStore((prev) => ({ ...prev, show: false }));
   };
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const len = memoizedTips.length;
     setShowAnnouncement(
       Boolean(len) && announcementStore.show && !options?.hideTips
@@ -813,7 +817,7 @@ var useAnnouncement = (options) => {
 // src/pages/announcementCenter.script.tsx
 var useAnnouncementCenterScript = () => {
   const { tips } = useAnnouncement();
-  const [current, setCurrent] = react.useState(null);
+  const [current, setCurrent] = React2.useState(null);
   return {
     dataSource: tips,
     current,
@@ -835,7 +839,7 @@ var AnnouncementCenterUI2 = (props) => {
 };
 var AnnouncementCenterWidget = (props) => {
   const { dataSource, current, setCurrent } = useAnnouncementCenterScript();
-  const onItemClick = react.useCallback(
+  const onItemClick = React2.useCallback(
     (url) => {
       if (!url)
         return;
@@ -868,7 +872,465 @@ var AnnouncementCenterPage = (props) => {
     }
   );
 };
+var useMarqueeOnce = (opts) => {
+  const {
+    isActive,
+    pxPerSec = 60,
+    startDelayMs = 500,
+    endDelayMs = 500,
+    fallbackStayMs = 2500,
+    onFinish
+  } = opts;
+  const containerRef = React2.useRef(null);
+  const contentRef = React2.useRef(null);
+  const rafRef = React2.useRef(null);
+  const stopAll = () => {
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+    }
+    rafRef.current = null;
+  };
+  const timers = React2.useRef([]);
+  const clearTimers = () => {
+    timers.current?.forEach((id) => {
+      if (id) {
+        clearTimeout(id);
+      }
+    });
+    timers.current = [];
+  };
+  const [overflow, setOverflow] = React2.useState(false);
+  const [delta, setDelta] = React2.useState(0);
+  React2.useLayoutEffect(() => {
+    const c = containerRef.current;
+    const t = contentRef.current;
+    if (!c || !t) {
+      return;
+    }
+    const update = () => {
+      const cw = c.clientWidth;
+      const tw = t.scrollWidth;
+      const need = Math.max(0, tw - cw);
+      setOverflow(need > 0);
+      setDelta(need);
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(c);
+    ro.observe(t);
+    return () => {
+      ro.disconnect();
+    };
+  }, []);
+  React2.useEffect(() => {
+    if (!isActive) {
+      stopAll();
+      clearTimers();
+      if (contentRef.current) {
+        contentRef.current.style.transform = "translate3d(0, 0, 0)";
+      }
+      return;
+    }
+    const run = async () => {
+      stopAll();
+      clearTimers();
+      if (!overflow || delta <= 0) {
+        const id = setTimeout(() => {
+          onFinish?.();
+        }, fallbackStayMs);
+        timers.current.push(id);
+        return;
+      }
+      const startId = setTimeout(() => {
+        const distance = delta;
+        const durationMs = distance / pxPerSec * 1e3;
+        const el = contentRef.current;
+        if (!el) {
+          return;
+        }
+        let startTs = 0;
+        const startX = 0;
+        const endX = -distance;
+        const step = (ts) => {
+          if (!startTs) {
+            startTs = ts;
+          }
+          const progress = Math.min(1, (ts - startTs) / durationMs);
+          const x = startX + (endX - startX) * progress;
+          el.style.transform = `translate3d(${x}px, 0, 0)`;
+          if (progress < 1) {
+            rafRef.current = requestAnimationFrame(step);
+          } else {
+            const endId = setTimeout(() => {
+              onFinish?.();
+            }, endDelayMs);
+            timers.current.push(endId);
+          }
+        };
+        rafRef.current = requestAnimationFrame(step);
+      }, startDelayMs);
+      timers.current.push(startId);
+    };
+    run();
+    return () => {
+      stopAll();
+      clearTimers();
+    };
+  }, [
+    isActive,
+    overflow,
+    delta,
+    pxPerSec,
+    startDelayMs,
+    endDelayMs,
+    fallbackStayMs,
+    onFinish
+  ]);
+  return { containerRef, contentRef, overflow, delta };
+};
+var usePrevNextButtons = (emblaApi, onButtonClick) => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = React2.useState(true);
+  const [nextBtnDisabled, setNextBtnDisabled] = React2.useState(true);
+  const onPrevButtonClick = React2.useCallback(() => {
+    if (!emblaApi) {
+      return;
+    }
+    emblaApi.scrollPrev();
+  }, [emblaApi, onButtonClick]);
+  const onNextButtonClick = React2.useCallback(() => {
+    if (!emblaApi) {
+      return;
+    }
+    emblaApi.scrollNext();
+  }, [emblaApi, onButtonClick]);
+  const onSelect = React2.useCallback((api) => {
+    setPrevBtnDisabled(!api.canScrollPrev());
+    setNextBtnDisabled(!api.canScrollNext());
+  }, []);
+  React2.useEffect(() => {
+    if (!emblaApi) {
+      return;
+    }
+    onSelect(emblaApi);
+    emblaApi.on("reInit", onSelect).on("select", onSelect);
+    return () => {
+      emblaApi.off("reInit", onSelect).off("select", onSelect);
+    };
+  }, [emblaApi, onSelect]);
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick
+  };
+};
+var useSelectedSnapDisplay = (emblaApi) => {
+  const [selectedSnap, setSelectedSnap] = React2.useState(0);
+  const [snapCount, setSnapCount] = React2.useState(0);
+  const updateScrollSnapState = React2.useCallback((api) => {
+    if (api) {
+      setSnapCount(api.scrollSnapList().length);
+      setSelectedSnap(api.selectedScrollSnap());
+    }
+  }, []);
+  React2.useEffect(() => {
+    if (!emblaApi) {
+      return;
+    }
+    updateScrollSnapState(emblaApi);
+    emblaApi.on("select", updateScrollSnapState);
+    emblaApi.on("reInit", updateScrollSnapState);
+    return () => {
+      emblaApi.off("select", updateScrollSnapState);
+      emblaApi.off("reInit", updateScrollSnapState);
+    };
+  }, [emblaApi, updateScrollSnapState]);
+  return {
+    selectedSnap,
+    snapCount
+  };
+};
+var TipsType = ({ type }) => {
+  const { t } = orderlyI18n.useTranslation();
+  const { label, className } = React2.useMemo(() => {
+    const map = {
+      [orderlyTypes.AnnouncementType.Listing]: {
+        label: t("announcement.type.listing"),
+        className: "oui-bg-primary/15 oui-text-primary"
+      },
+      [orderlyTypes.AnnouncementType.Maintenance]: {
+        label: t("announcement.type.maintenance"),
+        className: "oui-bg-[rgba(232,136,0,0.15)] oui-text-warning-darken"
+      },
+      [orderlyTypes.AnnouncementType.Delisting]: {
+        label: t("announcement.type.delisting"),
+        className: "oui-bg-[rgba(232,136,0,0.15)] oui-text-warning-darken"
+      }
+    };
+    return map[type] || {
+      label: type,
+      className: map[orderlyTypes.AnnouncementType.Listing].className
+    };
+  }, [type, t]);
+  if (!label) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.Flex,
+    {
+      justify: "center",
+      px: 2,
+      r: "base",
+      className: orderlyUi.cn(
+        "oui-text-2xs oui-font-medium oui-leading-[18px]",
+        "oui-whitespace-nowrap oui-break-normal",
+        className
+      ),
+      children: label
+    }
+  );
+};
+var AnnouncementItem2 = (props) => {
+  const { type, text, url, isActive, onItemFinish, onItemClick } = props;
+  const { containerRef, contentRef, overflow } = useMarqueeOnce({
+    isActive,
+    pxPerSec: 90,
+    startDelayMs: 1e3,
+    endDelayMs: 1e3,
+    fallbackStayMs: 2500,
+    onFinish: onItemFinish
+  });
+  const onClick = () => {
+    if (url) {
+      onItemClick?.(url);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.Flex,
+    {
+      height: "100%",
+      itemAlign: "center",
+      className: "oui-flex-none oui-basis-full oui-transform-gpu",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: orderlyUi.cn(
+            "oui-relative oui-flex oui-h-[34px] oui-w-full oui-transform-gpu oui-items-center oui-overflow-hidden",
+            overflow ? "oui-justify-start" : "oui-justify-center"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: contentRef,
+              className: orderlyUi.cn(
+                "oui-inline-flex oui-items-center oui-gap-2",
+                "oui-h-[34px] oui-whitespace-nowrap oui-leading-[34px]",
+                "oui-w-fit oui-transform-gpu oui-will-change-transform"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TipsType, { type }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  orderlyUi.Text,
+                  {
+                    size: "xs",
+                    intensity: 80,
+                    className: orderlyUi.cn(
+                      "oui-transform-gpu",
+                      url ? "oui-cursor-pointer" : void 0
+                    ),
+                    onClick: url ? onClick : void 0,
+                    children: text
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var SoundIcon = React2__default.default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 18,
+      height: 18,
+      viewBox: "0 0 18 18",
+      fill: "currentColor",
+      ref,
+      focusable: false,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M11.5312 2.25534C11.2703 2.14734 10.9472 2.18333 10.7109 2.41958C10.1862 2.94383 9.52305 3.37884 8.7642 3.70434C7.99343 4.03434 6.411 4.46108 5.25547 4.45358C3.00765 4.43858 1.49993 5.71283 1.5 8.18033C1.5 10.3426 2.72745 11.6003 4.49423 11.8831L4.5 13.4476C4.5 14.6888 5.50733 15.6953 6.75 15.6953C7.89188 15.6953 8.83245 14.8118 8.97765 13.7071C8.98462 13.6538 9 13.4476 9 12.6976C9.67373 13.0118 10.232 13.5091 10.7109 13.9876C11.1834 14.4593 12 14.1166 12 13.4491C12 12.7711 11.9964 11.5433 11.9964 10.3186C12.8805 9.99159 13.5 9.15383 13.5 8.20358C13.5 7.25333 12.9149 6.39385 12.004 6.0751C12.004 4.85035 12 3.63609 12 2.95809C12 2.62434 11.7923 2.36409 11.5312 2.25534ZM13.3359 3.59033C13.1501 3.63833 12.9956 3.7636 12.8906 3.94135C12.6809 4.29835 12.7913 4.76259 13.1484 4.97184C14.2882 5.64084 15 6.85883 15 8.20358C15 9.54908 14.289 10.7663 13.1484 11.4353C12.7912 11.6446 12.6576 12.1081 12.8672 12.4651C13.0768 12.8221 13.5411 12.9323 13.8984 12.7231C15.4934 11.7878 16.4999 10.0861 16.5 8.20358C16.5 6.32183 15.4922 4.61933 13.8984 3.68408C13.7198 3.57908 13.5217 3.54233 13.3359 3.59033ZM10.5035 4.47384C10.5035 5.16759 10.5 5.89059 10.5 6.70509C10.5 8.20359 10.5 8.2036 10.5 9.7021C10.5 10.5166 10.5024 11.2103 10.5024 11.9041C8.98343 11.0078 7.41735 10.6103 6.00157 10.4828C6.00157 9.33909 5.99775 7.07709 5.99775 5.89884C6.14475 5.89209 6.31575 5.87335 6.5625 5.83885C7.52017 5.7016 8.4717 5.45259 9.375 5.06559C9.80505 4.88184 10.1247 4.71534 10.5035 4.47384ZM4.49887 6.02484C4.49887 7.17684 4.49775 9.21234 4.49775 10.3643C3.52177 10.0943 3 9.40508 3 8.18033C3 6.96983 3.47025 6.25209 4.49887 6.02484ZM6 11.9971C6.23745 12.0053 7.0977 12.1583 7.49243 12.2581L7.5 13.4476C7.5 13.8616 7.16423 14.1968 6.75 14.1968C6.33577 14.1968 6 13.8616 6 13.4476V11.9971Z",
+          fill: "#fff",
+          fillOpacity: 0.98
+        }
+      )
+    }
+  );
+});
+if (process.env.NODE_ENV !== "production") {
+  SoundIcon.displayName = "SoundIcon";
+}
+var SwitchTips = (props) => {
+  const { selectedSnap, snapCount, prevDisabled, nextDisabled, prevTips, nextTips } = props;
+  const { isMobile } = orderlyUi.useScreen();
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-live": "polite", className: "oui-text-sm oui-tabular-nums oui-text-base-contrast-54", children: [
+      selectedSnap + 1,
+      "/",
+      snapCount
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center oui-justify-center oui-gap-0 oui-text-base-contrast-54", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.ChevronLeftIcon,
+      {
+        size: 16,
+        opacity: 1,
+        className: orderlyUi.cn(
+          "oui-size-4 oui-shrink-0 oui-text-base-contrast-54 hover:oui-text-base-contrast-80 lg:oui-size-5",
+          prevDisabled ? "oui-cursor-not-allowed" : "oui-cursor-pointer"
+        ),
+        onClick: prevDisabled ? void 0 : prevTips
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-live": "polite", className: "oui-text-sm oui-tabular-nums oui-text-base-contrast-54", children: [
+      selectedSnap + 1,
+      "/",
+      snapCount
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.ChevronRightIcon,
+      {
+        size: 16,
+        opacity: 1,
+        className: orderlyUi.cn(
+          "oui-size-4 oui-shrink-0 oui-text-base-contrast-54 hover:oui-text-base-contrast-80 lg:oui-size-5",
+          nextDisabled ? "oui-cursor-not-allowed" : "oui-cursor-pointer"
+        ),
+        onClick: nextDisabled ? void 0 : nextTips
+      }
+    )
+  ] });
+};
+var Controls = (props) => {
+  const { selectedSnap, snapCount, prevDisabled, nextDisabled, prevTips, nextTips, closeTips } = props;
+  const { isMobile } = orderlyUi.useScreen();
+  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: isMobile ? 1 : 2, justify: "center", itemAlign: "center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SwitchTips,
+      {
+        prevDisabled,
+        nextDisabled,
+        selectedSnap,
+        snapCount,
+        prevTips,
+        nextTips
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.CloseIcon,
+      {
+        size: 18,
+        onClick: closeTips,
+        className: "oui-cursor-pointer oui-text-base-contrast-80 hover:oui-text-base-contrast"
+      }
+    )
+  ] });
+};
+var AnnouncementBannerUI = (props) => {
+  const { maintenanceDialogInfo, showAnnouncement, dataSource, onClose, style, className } = props;
+  const { t, i18n } = orderlyI18n.useTranslation();
+  const [emblaRef, emblaApi] = orderlyUi.useEmblaCarousel({
+    loop: true,
+    axis: "y",
+    align: "center",
+    duration: 30
+  });
+  const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi);
+  const { selectedSnap, snapCount } = useSelectedSnapDisplay(emblaApi);
+  const goNext = React2.useCallback(() => {
+    if (!emblaApi) {
+      return;
+    }
+    emblaApi.scrollNext();
+  }, [emblaApi]);
+  if (maintenanceDialogInfo) {
+    return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Dialog, { open: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      orderlyUi.DialogContent,
+      {
+        closable: false,
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        className: "oui-w-[320px] lg:oui-w-auto",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.DialogTitle, { children: t("maintenance.dialog.title") }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.DialogBody, { className: "oui-text-2xs lg:oui-text-xs", children: maintenanceDialogInfo })
+        ]
+      }
+    ) });
+  }
+  if (!showAnnouncement || !dataSource?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style,
+      className: orderlyUi.cn(
+        "oui-relative oui-z-[1] oui-flex oui-transform-gpu oui-flex-row oui-flex-nowrap oui-items-center oui-justify-between oui-gap-x-1.5 oui-overflow-hidden oui-rounded-xl oui-bg-base-9 oui-px-4 oui-font-semibold",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-size-[18px]", children: /* @__PURE__ */ jsxRuntime.jsx(SoundIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: emblaRef,
+            className: "oui-relative oui-h-[34px] oui-w-full oui-max-w-full oui-transform-gpu oui-overflow-hidden",
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-flex oui-h-full oui-transform-gpu oui-flex-col", children: dataSource.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              AnnouncementItem2,
+              {
+                type: item?.type,
+                text: item?.i18n?.[i18n.language] || item?.message?.trim() || "",
+                url: item?.url || void 0,
+                isActive: index === selectedSnap,
+                onItemFinish: goNext,
+                onItemClick: (url) => {
+                  if (props.onItemClick) {
+                    props.onItemClick(url);
+                  } else {
+                    window.open(url, "_blank");
+                  }
+                }
+              },
+              `item-${item.announcement_id}-${index}`
+            )) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Controls,
+          {
+            selectedSnap,
+            snapCount,
+            closeTips: onClose,
+            prevTips: onPrevButtonClick,
+            nextTips: onNextButtonClick,
+            prevDisabled: prevBtnDisabled,
+            nextDisabled: nextBtnDisabled
+          }
+        )
+      ]
+    }
+  );
+};
 
+exports.AnnouncementBannerUI = AnnouncementBannerUI;
 exports.AnnouncementCenterPage = AnnouncementCenterPage;
 exports.AnnouncementCenterUI = AnnouncementCenterUI;
 exports.AnnouncementItem = AnnouncementItem;