@opensite/ui 2.1.6 → 2.1.7

package/dist/components.cjs

@@ -2950,6 +2950,934 @@ function MediaHoverCtas({
     }
   );
 }
+function BannerAnnouncementDismissible({
+  icon,
+  iconName,
+  message,
+  actions,
+  actionsSlot,
+  onDismiss,
+  dismissIcon,
+  dismissAriaLabel,
+  background = "default",
+  className,
+  containerClassName,
+  contentClassName,
+  iconClassName,
+  messageClassName,
+  actionsClassName,
+  dismissButtonClassName
+}) {
+  const [isVisible, setIsVisible] = React4.useState(true);
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = React4.useCallback(() => {
+    setIsVisible(false);
+    onDismiss?.();
+  }, [onDismiss]);
+  const actionsContent = React4.useMemo(() => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            actionIcon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    });
+  }, [actions, actionsSlot]);
+  const iconContent = React4.useMemo(() => {
+    if (icon) return icon;
+    if (!iconName) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DynamicIcon,
+      {
+        name: iconName,
+        size: 20,
+        className: cn("shrink-0", iconClassName)
+      }
+    );
+  }, [icon, iconName, iconClassName]);
+  const dismissIconContent = React4.useMemo(() => {
+    if (dismissIcon) return dismissIcon;
+    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
+  }, [dismissIcon]);
+  const messageContent = React4.useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium text-sm", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className: cn("border-b", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-2", containerClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4", contentClassName), children: [
+      iconContent,
+      messageContent,
+      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Pressable,
+      {
+        onClick: handleDismiss,
+        variant: "outline",
+        size: "icon",
+        asButton: true,
+        className: cn("size-8", dismissButtonClassName),
+        children: [
+          dismissIconContent,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
+        ]
+      }
+    )
+  ] }) });
+}
+function BannerCountdownSale({
+  endTime,
+  message,
+  description,
+  timerSlot,
+  renderTimer,
+  background = "primary",
+  className,
+  containerClassName,
+  contentClassName,
+  messageClassName,
+  descriptionClassName,
+  timerClassName,
+  timeUnitClassName,
+  separatorClassName
+}) {
+  const targetTime = endTime;
+  const [timeLeft, setTimeLeft] = React4.useState({
+    hours: 0,
+    minutes: 0,
+    seconds: 0
+  });
+  React4.useEffect(() => {
+    if (!targetTime) {
+      return;
+    }
+    const calculateTimeLeft = () => {
+      const now = (/* @__PURE__ */ new Date()).getTime();
+      const target = targetTime.getTime();
+      const diff = target - now;
+      if (diff <= 0) {
+        return { hours: 0, minutes: 0, seconds: 0 };
+      }
+      return {
+        hours: Math.floor(diff / (1e3 * 60 * 60)),
+        minutes: Math.floor(diff % (1e3 * 60 * 60) / (1e3 * 60)),
+        seconds: Math.floor(diff % (1e3 * 60) / 1e3)
+      };
+    };
+    setTimeLeft(calculateTimeLeft());
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [targetTime]);
+  const pad = React4.useCallback((n) => n.toString().padStart(2, "0"), []);
+  const timerContent = React4.useMemo(() => {
+    if (timerSlot) return timerSlot;
+    if (renderTimer) return renderTimer(timeLeft);
+    if (!targetTime) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 font-mono text-lg font-bold", timerClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded bg-destructive px-2 py-0.5", timeUnitClassName), children: pad(timeLeft.hours) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorClassName, children: ":" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded bg-destructive px-2 py-0.5", timeUnitClassName), children: pad(timeLeft.minutes) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorClassName, children: ":" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded bg-destructive px-2 py-0.5", timeUnitClassName), children: pad(timeLeft.seconds) })
+    ] });
+  }, [timerSlot, renderTimer, timeLeft, timerClassName, timeUnitClassName, separatorClassName, pad, targetTime]);
+  const messageContent = React4.useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
+  const descriptionContent = React4.useMemo(() => {
+    if (!description) return null;
+    return typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-destructive-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description });
+  }, [description, descriptionClassName]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className: cn("bg-destructive text-destructive-foreground", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-sm", contentClassName), children: [
+    messageContent,
+    timerContent,
+    descriptionContent
+  ] }) }) });
+}
+function BannerDeliveryCountdown({
+  icon,
+  iconName,
+  deliveryDate,
+  cutoffTime,
+  prefixText,
+  middleText,
+  timerSlot,
+  renderTimer,
+  background = "muted",
+  className,
+  containerClassName,
+  contentClassName,
+  iconClassName,
+  messageClassName,
+  timerClassName,
+  deliveryDateClassName
+}) {
+  const targetTime = cutoffTime;
+  const [timeLeft, setTimeLeft] = React4.useState({
+    hours: 0,
+    minutes: 0,
+    seconds: 0
+  });
+  React4.useEffect(() => {
+    if (!targetTime) {
+      return;
+    }
+    const calculateTimeLeft = () => {
+      const now = (/* @__PURE__ */ new Date()).getTime();
+      const target = targetTime.getTime();
+      const diff = target - now;
+      if (diff <= 0) {
+        return { hours: 0, minutes: 0, seconds: 0 };
+      }
+      return {
+        hours: Math.floor(diff / (1e3 * 60 * 60)),
+        minutes: Math.floor(diff % (1e3 * 60 * 60) / (1e3 * 60)),
+        seconds: Math.floor(diff % (1e3 * 60) / 1e3)
+      };
+    };
+    setTimeLeft(calculateTimeLeft());
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [targetTime]);
+  const pad = React4.useCallback((n) => n.toString().padStart(2, "0"), []);
+  const iconContent = React4.useMemo(() => {
+    if (icon) return icon;
+    if (!iconName) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: iconName, size: 16, className: iconClassName });
+  }, [icon, iconName, iconClassName]);
+  const timerContent = React4.useMemo(() => {
+    if (timerSlot) return timerSlot;
+    if (renderTimer) return renderTimer(timeLeft);
+    if (!targetTime) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("font-mono font-bold", timerClassName), children: [
+      pad(timeLeft.hours),
+      ":",
+      pad(timeLeft.minutes),
+      ":",
+      pad(timeLeft.seconds)
+    ] });
+  }, [timerSlot, renderTimer, timeLeft, timerClassName, pad, targetTime]);
+  const deliveryDateContent = React4.useMemo(() => {
+    if (!deliveryDate) return null;
+    return typeof deliveryDate === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-semibold", deliveryDateClassName), children: deliveryDate }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: deliveryDateClassName, children: deliveryDate });
+  }, [deliveryDate, deliveryDateClassName]);
+  const messageParts = React4.useMemo(() => {
+    return [prefixText, timerContent, middleText, deliveryDateContent].filter(
+      (part) => part !== null && part !== void 0
+    );
+  }, [prefixText, timerContent, middleText, deliveryDateContent]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className: cn("bg-accent text-accent-foreground", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-3 text-sm", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", messageClassName), children: [
+    iconContent,
+    messageParts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: messageParts.map((part, index) => /* @__PURE__ */ jsxRuntime.jsxs(React4__namespace.Fragment, { children: [
+      index > 0 ? " " : null,
+      part
+    ] }, index)) })
+  ] }) }) }) });
+}
+function BannerEventPromo({
+  eventName,
+  eventDetails,
+  separator,
+  actions,
+  actionsSlot,
+  background = "primary",
+  className,
+  containerClassName,
+  contentClassName,
+  textClassName,
+  eventNameClassName,
+  separatorClassName,
+  eventDetailsClassName,
+  actionsClassName
+}) {
+  const actionsContent = React4.useMemo(() => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: cn("flex items-center gap-x-1", actionClassName),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            actionIcon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    });
+  }, [actions, actionsSlot]);
+  const separatorContent = React4.useMemo(() => {
+    if (separator) return separator;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        viewBox: "0 0 2 2",
+        className: cn("mx-2 inline h-0.5 w-0.5 fill-current", separatorClassName),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 1, cy: 1, r: 1 })
+      }
+    );
+  }, [separator, separatorClassName]);
+  const eventNameContent = React4.useMemo(() => {
+    if (!eventName) return null;
+    return typeof eventName === "string" ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", eventNameClassName), children: eventName }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventNameClassName, children: eventName });
+  }, [eventName, eventNameClassName]);
+  const eventDetailsContent = React4.useMemo(() => {
+    if (!eventDetails) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventDetailsClassName, children: eventDetails });
+  }, [eventDetails, eventDetailsClassName]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container mx-auto px-4 md:px-6 2xl:max-w-[1400px]", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-between gap-x-6 p-4", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap justify-between w-full items-center gap-x-4 gap-y-2", textClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm leading-6", children: [
+      eventNameContent,
+      eventNameContent && eventDetailsContent && separatorContent,
+      eventDetailsContent
+    ] }),
+    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
+  ] }) }) }) });
+}
+function BannerFloatingOffer({
+  offerTitle,
+  offerDescription,
+  separator,
+  actions,
+  actionsSlot,
+  open,
+  defaultOpen,
+  onOpenChange,
+  dismissible,
+  dismissIcon,
+  dismissAriaLabel,
+  background = "primary",
+  className,
+  containerClassName,
+  textClassName,
+  offerTitleClassName,
+  separatorClassName,
+  offerDescriptionClassName,
+  actionsClassName,
+  dismissButtonClassName
+}) {
+  const isControlled = open !== void 0;
+  const initialOpen = defaultOpen ?? true;
+  const [internalOpen, setInternalOpen] = React4.useState(initialOpen);
+  const isVisible = isControlled ? open : internalOpen;
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const isDismissible = dismissible ?? false;
+  React4.useEffect(() => {
+    if (!isControlled && defaultOpen !== internalOpen) {
+      setInternalOpen(initialOpen);
+    }
+  }, [defaultOpen, initialOpen, isControlled, internalOpen]);
+  const handleDismiss = React4.useCallback(() => {
+    if (!isControlled) {
+      setInternalOpen(false);
+    }
+    onOpenChange?.(false);
+  }, [isControlled, onOpenChange]);
+  const actionsContent = React4.useMemo(() => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: cn("flex items-center gap-x-1", actionClassName),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            actionIcon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    });
+  }, [actions, actionsSlot]);
+  const separatorContent = React4.useMemo(() => {
+    if (separator) return separator;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        viewBox: "0 0 2 2",
+        className: cn("mx-2 inline h-0.5 w-0.5 fill-current", separatorClassName),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 1, cy: 1, r: 1 })
+      }
+    );
+  }, [separator, separatorClassName]);
+  const dismissIconContent = React4.useMemo(() => {
+    if (dismissIcon) return dismissIcon;
+    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
+  }, [dismissIcon]);
+  const offerTitleContent = React4.useMemo(() => {
+    if (!offerTitle) return null;
+    return typeof offerTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", offerTitleClassName), children: offerTitle }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: offerTitleClassName, children: offerTitle });
+  }, [offerTitle, offerTitleClassName]);
+  const offerDescriptionContent = React4.useMemo(() => {
+    if (!offerDescription) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: offerDescriptionClassName, children: offerDescription });
+  }, [offerDescription, offerDescriptionClassName]);
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8 z-50",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Section, { background, spacing: "none", className: cn("pointer-events-auto flex items-center justify-between gap-x-6 px-6 py-2.5 sm:rounded-xl sm:py-3 sm:pl-4 sm:pr-3.5", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-sm leading-6", textClassName), children: [
+          offerTitleContent,
+          offerTitleContent && offerDescriptionContent && separatorContent,
+          offerDescriptionContent
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", actionsClassName), children: [
+          actionsContent,
+          isDismissible && /* @__PURE__ */ jsxRuntime.jsxs(
+            Pressable,
+            {
+              onClick: handleDismiss,
+              variant: "ghost",
+              size: "icon",
+              asButton: true,
+              className: cn("size-8", dismissButtonClassName),
+              children: [
+                dismissIconContent,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function BannerGdprRights({
+  icon,
+  iconName,
+  title,
+  description,
+  actions,
+  actionsSlot,
+  onDismiss,
+  dismissIcon,
+  dismissAriaLabel,
+  background = "default",
+  className,
+  containerClassName,
+  contentClassName,
+  iconClassName,
+  titleClassName,
+  descriptionClassName,
+  actionsClassName,
+  dismissButtonClassName
+}) {
+  const [isVisible, setIsVisible] = React4.useState(true);
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = React4.useCallback(() => {
+    setIsVisible(false);
+    onDismiss?.();
+  }, [onDismiss]);
+  const iconContent = React4.useMemo(() => {
+    if (icon) return icon;
+    if (!iconName) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DynamicIcon,
+      {
+        name: iconName,
+        size: 20,
+        className: cn("text-muted-foreground mt-0.5 shrink-0", iconClassName)
+      }
+    );
+  }, [icon, iconName, iconClassName]);
+  const actionsContent = React4.useMemo(() => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            actionIcon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    });
+  }, [actions, actionsSlot]);
+  const dismissIconContent = React4.useMemo(() => {
+    if (dismissIcon) return dismissIcon;
+    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
+  }, [dismissIcon]);
+  const titleContent = React4.useMemo(() => {
+    if (!title) return null;
+    return typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-semibold text-sm", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title });
+  }, [title, titleClassName]);
+  const descriptionContent = React4.useMemo(() => {
+    if (!description && !actionsContent) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: [
+      description,
+      actionsContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: actionsContent })
+    ] });
+  }, [description, actionsContent, descriptionClassName, actionsClassName]);
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className: cn("border-t fixed bottom-0 left-0 right-0 z-50", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-4 max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-3", contentClassName), children: [
+      iconContent,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        titleContent,
+        descriptionContent
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Pressable,
+      {
+        onClick: handleDismiss,
+        variant: "ghost",
+        size: "icon",
+        asButton: true,
+        className: cn("size-8", dismissButtonClassName),
+        children: [
+          dismissIconContent,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
+        ]
+      }
+    )
+  ] }) });
+}
+function BannerPrivacyNotice({
+  icon,
+  iconName,
+  title,
+  description,
+  actions,
+  actionsSlot,
+  onDismiss,
+  dismissIcon,
+  dismissAriaLabel,
+  background = "default",
+  className,
+  containerClassName,
+  contentClassName,
+  iconClassName,
+  titleClassName,
+  descriptionClassName,
+  actionsClassName,
+  dismissButtonClassName
+}) {
+  const [isVisible, setIsVisible] = React4.useState(true);
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = React4.useCallback(() => {
+    setIsVisible(false);
+    onDismiss?.();
+  }, [onDismiss]);
+  const iconContent = React4.useMemo(() => {
+    if (icon) return icon;
+    if (!iconName) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DynamicIcon,
+      {
+        name: iconName,
+        size: 20,
+        className: cn("mt-0.5 shrink-0", iconClassName)
+      }
+    );
+  }, [icon, iconName, iconClassName]);
+  const actionsContent = React4.useMemo(() => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            actionIcon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    });
+  }, [actions, actionsSlot]);
+  const dismissIconContent = React4.useMemo(() => {
+    if (dismissIcon) return dismissIcon;
+    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
+  }, [dismissIcon]);
+  const titleContent = React4.useMemo(() => {
+    if (!title) return null;
+    return typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-semibold text-sm", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title });
+  }, [title, titleClassName]);
+  const descriptionContent = React4.useMemo(() => {
+    if (!description) return null;
+    return typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: description });
+  }, [description, descriptionClassName]);
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className: cn("border-t fixed bottom-0 left-0 right-0 z-50", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-4 max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-4", contentClassName), children: [
+      iconContent,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        titleContent,
+        descriptionContent,
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Pressable,
+      {
+        onClick: handleDismiss,
+        variant: "outline",
+        size: "icon",
+        asButton: true,
+        className: cn("size-8", dismissButtonClassName),
+        children: [
+          dismissIconContent,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
+        ]
+      }
+    )
+  ] }) });
+}
+function BannerPromoCta({
+  message,
+  discount,
+  separator,
+  actions,
+  actionsSlot,
+  background = "primary",
+  className,
+  containerClassName,
+  contentClassName,
+  messageClassName,
+  separatorClassName,
+  discountClassName,
+  actionsClassName
+}) {
+  const actionsContent = React4.useMemo(() => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          className: cn("inline-flex items-center gap-1 font-medium underline underline-offset-4 hover:no-underline", actionClassName),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            actionIcon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    });
+  }, [actions, actionsSlot]);
+  const separatorContent = React4.useMemo(() => {
+    if (separator) return separator;
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("hidden sm:inline", separatorClassName), children: "\xB7" });
+  }, [separator, separatorClassName]);
+  const messageContent = React4.useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-semibold", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
+  const discountContent = React4.useMemo(() => {
+    if (!discount) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: discountClassName, children: discount });
+  }, [discount, discountClassName]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-center text-sm", contentClassName), children: [
+    messageContent,
+    messageContent && discountContent && separatorContent,
+    discountContent,
+    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: actionsContent })
+  ] }) }) });
+}
+function BannerSocialFollow({
+  icon,
+  iconName,
+  message,
+  actions,
+  actionsSlot,
+  onDismiss,
+  dismissIcon,
+  dismissAriaLabel,
+  background = "primary",
+  className,
+  containerClassName,
+  iconClassName,
+  messageClassName,
+  actionsClassName,
+  dismissButtonClassName
+}) {
+  const [isVisible, setIsVisible] = React4.useState(true);
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = React4.useCallback(() => {
+    setIsVisible(false);
+    onDismiss?.();
+  }, [onDismiss]);
+  const iconContent = React4.useMemo(() => {
+    if (icon) return icon;
+    if (!iconName) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DynamicIcon,
+      {
+        name: iconName,
+        size: 20,
+        className: cn("shrink-0", iconClassName)
+      }
+    );
+  }, [icon, iconName, iconClassName]);
+  const actionsContent = React4.useMemo(() => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            actionIcon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    });
+  }, [actions, actionsSlot]);
+  const dismissIconContent = React4.useMemo(() => {
+    if (dismissIcon) return dismissIcon;
+    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
+  }, [dismissIcon]);
+  const messageContent = React4.useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-7xl mx-auto px-3 py-3 flex items-center justify-center text-left md:text-center gap-2", containerClassName), children: [
+    iconContent,
+    messageContent,
+    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: actionsContent }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Pressable,
+      {
+        onClick: handleDismiss,
+        variant: "ghost",
+        size: "icon",
+        asButton: true,
+        className: cn("size-8", dismissButtonClassName),
+        children: [
+          dismissIconContent,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
+        ]
+      }
+    )
+  ] }) });
+}
+function BannerSurveyIncentive({
+  icon,
+  iconName,
+  title,
+  description,
+  actions,
+  actionsSlot,
+  onDismiss,
+  dismissIcon,
+  dismissAriaLabel,
+  background = "default",
+  className,
+  containerClassName,
+  contentClassName,
+  iconClassName,
+  textClassName,
+  titleClassName,
+  descriptionClassName,
+  actionsClassName,
+  dismissButtonClassName
+}) {
+  const [isVisible, setIsVisible] = React4.useState(true);
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = React4.useCallback(() => {
+    setIsVisible(false);
+    onDismiss?.();
+  }, [onDismiss]);
+  const iconContent = React4.useMemo(() => {
+    if (icon) return icon;
+    if (!iconName) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DynamicIcon,
+      {
+        name: iconName,
+        size: 20,
+        className: cn("shrink-0 hidden md:block", iconClassName)
+      }
+    );
+  }, [icon, iconName, iconClassName]);
+  const actionsContent = React4.useMemo(() => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            actionIcon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    });
+  }, [actions, actionsSlot]);
+  const dismissIconContent = React4.useMemo(() => {
+    if (dismissIcon) return dismissIcon;
+    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
+  }, [dismissIcon]);
+  const titleContent = React4.useMemo(() => {
+    if (!title) return null;
+    return typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleClassName, children: title });
+  }, [title, titleClassName]);
+  const descriptionContent = React4.useMemo(() => {
+    if (!description) return null;
+    return typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: descriptionClassName, children: description });
+  }, [description, descriptionClassName]);
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className: cn("border-b text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex md:items-center justify-between max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", contentClassName), children: [
+      iconContent,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col md:flex-row gap-1", textClassName), children: [
+        titleContent,
+        descriptionContent
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-2", actionsClassName), children: [
+      actionsContent,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Pressable,
+        {
+          onClick: handleDismiss,
+          variant: "outline",
+          size: "icon",
+          asButton: true,
+          className: cn("size-8", dismissButtonClassName),
+          children: [
+            dismissIconContent,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
 function isThemedLogo(logo) {
   return "light" in logo || "dark" in logo;
 }
@@ -5953,6 +6881,16 @@ exports.AboutSplitHero = AboutSplitHero;
 exports.AlternatingBlocks = AlternatingBlocks;
 exports.AnimatedDialog = AnimatedDialog;
 exports.Badge = Badge;
+exports.BannerAnnouncementDismissible = BannerAnnouncementDismissible;
+exports.BannerCountdownSale = BannerCountdownSale;
+exports.BannerDeliveryCountdown = BannerDeliveryCountdown;
+exports.BannerEventPromo = BannerEventPromo;
+exports.BannerFloatingOffer = BannerFloatingOffer;
+exports.BannerGdprRights = BannerGdprRights;
+exports.BannerPrivacyNotice = BannerPrivacyNotice;
+exports.BannerPromoCta = BannerPromoCta;
+exports.BannerSocialFollow = BannerSocialFollow;
+exports.BannerSurveyIncentive = BannerSurveyIncentive;
 exports.Button = Button;
 exports.Card = Card;
 exports.CardContent = CardContent;