@daisforge/ui 1.12.1 → 1.12.2

package/chunks/Stories--_pE4YtR.mjs

@@ -0,0 +1,668 @@
+import { jsx as n, jsxs as L, Fragment as ve } from "react/jsx-runtime";
+import { Spinner as we, IconButton as ee } from "@salutejs/sdds-finai";
+import { IconDisclosureLeftOutline as be, IconDisclosureRightOutline as Ie, IconClose as _e } from "@salutejs/plasma-icons";
+import { useRef as P, useEffect as A, useContext as Ce, createContext as Ne, useSyncExternalStore as Pe, useState as pe, useCallback as ue, lazy as Te, forwardRef as ke, Children as Oe, useImperativeHandle as Re, cloneElement as Ee, isValidElement as Ae, Suspense as ze } from "react";
+import { createPortal as $e, flushSync as De } from "react-dom";
+import { E as Be } from "./EmptyState-Bct6Wrxv.mjs";
+import { n as Ge, x as Ve, y as te } from "./utils-C5SQhoON.mjs";
+import { surfaceSolidCard as Le, onLightSurfaceTransparentDeep as je, onDarkSurfaceTransparentDeep as Fe, onLightSurfaceTransparentTertiary as He, onDarkSurfaceTransparentTertiary as Me, textAccent as Xe, shadowDownSoftL as We, textPrimary as Ye } from "@salutejs/sdds-themes/tokens/sdds_finai";
+import S, { keyframes as G, css as ge, createGlobalStyle as Ze } from "styled-components";
+import { a as Ke } from "./AnalyticalWidget-CBi-2MtJ.mjs";
+const qe = ({
+  controller: e,
+  pauseHoldDelay: t,
+  tapPrevZone: o,
+  isOpen: r
+}) => {
+  const i = P(), f = P(!1), l = P("next"), d = () => {
+    i.current && (clearTimeout(i.current), i.current = void 0);
+  }, h = (y) => {
+    const a = y.currentTarget.getBoundingClientRect(), v = a.width > 0 ? (y.clientX - a.left) / a.width : 1;
+    l.current = v < o ? "prev" : "next", f.current = !1, d(), i.current = setTimeout(() => {
+      f.current = !0, e.pause();
+    }, t);
+  }, u = () => {
+    if (d(), f.current) {
+      f.current = !1, e.resume();
+      return;
+    }
+    l.current === "prev" ? e.prev() : e.next();
+  }, g = () => {
+    d(), f.current && (f.current = !1, e.resume());
+  };
+  return A(() => {
+    if (!r)
+      return;
+    const y = (a) => {
+      a.key === "ArrowLeft" ? (a.preventDefault(), e.prev()) : a.key === "ArrowRight" ? (a.preventDefault(), e.next()) : a.key === "Escape" && (a.preventDefault(), e.close());
+    };
+    return window.addEventListener("keydown", y), () => window.removeEventListener("keydown", y);
+  }, [r, e]), {
+    onPointerDown: h,
+    onPointerUp: u,
+    onPointerLeave: g,
+    onPointerCancel: g
+  };
+}, fe = Ne(null), Ue = fe.Provider, W = () => {
+  const e = Ce(fe);
+  if (!e)
+    throw new Error("Компоненты Stories должны использоваться внутри <Stories>.");
+  return e;
+}, Y = (e) => Pe(e.subscribe, e.getSnapshot, e.getSnapshot), _ = {
+  root: "df-stories",
+  preview: "df-stories-preview",
+  previewRing: "df-stories-preview__ring",
+  previewGap: "df-stories-preview__gap",
+  previewBody: "df-stories-preview__body",
+  previewTitle: "df-stories-preview__title",
+  viewer: "df-stories-viewer",
+  overlay: "df-stories-viewer__overlay",
+  stage: "df-stories-viewer__stage",
+  banner: "df-stories-banner",
+  progress: "df-stories-progress",
+  progressItem: "df-stories-progress__item",
+  content: "df-stories-content",
+  action: "df-stories-banner__action",
+  arrowPrev: "df-stories-viewer__arrow-prev",
+  arrowNext: "df-stories-viewer__arrow-next",
+  close: "df-stories-viewer__close"
+}, Je = "linear-gradient(135deg, #08c6c9 0%, #99b0fe 100%)", Qe = "#ecf6fc", V = "df-stories-banner", X = {
+  /** Длительность показа сегмента по умолчанию, мс. */
+  duration: 5e3,
+  /** Порог удержания указателя, после которого включается пауза (мс). До него — тап-навигация. */
+  pauseHoldDelay: 200,
+  /** Доля ширины баннера слева, отвечающая за переход к предыдущему сегменту (⅓). */
+  tapPrevZone: 1 / 3,
+  /** Цвет оверлея (тот же, что у ModalDF). */
+  overlayColor: "#060a0c47",
+  /** z-index оверлея; баннер получает zIndex + 1. */
+  zIndex: 9e3
+}, I = {
+  /** Диаметр круглого триггера, px. */
+  circle: 98,
+  /** Толщина каждого кольца (градиент / белый зазор), px. */
+  ring: 2,
+  /** Отступ от триггера до подписи, px. */
+  titleGap: 6,
+  /** Радиусы прямоугольного триггера: внешнее кольцо / белый зазор / тело. */
+  rectRadiusOuter: 12,
+  rectRadiusBody: 8,
+  /** Баннер. */
+  bannerMaxWidth: 430,
+  bannerMaxHeight: 900,
+  bannerRadius: 16,
+  bannerPadding: 28,
+  /** Внешний контейнер вьюера (баннер + просветы под стрелки). */
+  stageWidth: 558,
+  /** Прогресс-индикаторы. */
+  progressHeight: 4,
+  progressRadius: 2,
+  progressFillRadius: 6,
+  progressGap: 4
+}, et = "StoriesPreview", le = S.div.withConfig({
+  displayName: "StoriesContentstyled__StyledContent"
+})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:", ";"], Le), tt = S.img.withConfig({
+  displayName: "StoriesContentstyled__StyledImage"
+})(["width:100%;height:100%;object-fit:", ";opacity:", ";transition:opacity 0.2s ease;user-select:none;"], ({
+  $objectFit: e
+}) => e, ({
+  $loaded: e
+}) => e ? 1 : 0), nt = S.div.withConfig({
+  displayName: "StoriesContentstyled__StyledSpinner"
+})(["position:absolute;display:flex;align-items:center;justify-content:center;"]), ot = S.div.withConfig({
+  displayName: "StoriesContentstyled__StyledErrorSlot"
+})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:", "px;"], I.bannerPadding), rt = ({
+  slide: e,
+  status: t,
+  errorNode: o
+}) => {
+  const r = e.objectFit ?? "cover", i = t === "loaded";
+  return t === "error" ? /* @__PURE__ */ n(le, { className: _.content, children: /* @__PURE__ */ n(ot, { children: o }) }) : /* @__PURE__ */ L(le, { className: _.content, children: [
+    /* @__PURE__ */ n(tt, { src: e.src, alt: "", draggable: !1, $objectFit: r, $loaded: i }),
+    t === "loading" ? /* @__PURE__ */ n(nt, { children: /* @__PURE__ */ n(we, { view: "default", size: "l" }) }) : null
+  ] });
+}, de = (e, t) => {
+  e && (e.style.transform = `scaleX(${t})`);
+}, it = ({
+  fillRef: e,
+  active: t,
+  duration: o,
+  isPlaying: r,
+  isReady: i,
+  resetKey: f,
+  onComplete: l
+}) => {
+  const d = P(0), h = P(l);
+  h.current = l, A(() => {
+    d.current = 0, de(e.current, 0);
+  }, [f, e]), A(() => {
+    if (!t || !r || !i || o <= 0)
+      return;
+    let u = 0, g = performance.now();
+    const y = (a) => {
+      d.current += a - g, g = a;
+      const v = Math.min(1, d.current / o);
+      if (de(e.current, v), v >= 1) {
+        h.current();
+        return;
+      }
+      u = requestAnimationFrame(y);
+    };
+    return u = requestAnimationFrame(y), () => cancelAnimationFrame(u);
+  }, [t, r, i, o, f, e]);
+}, st = S.div.withConfig({
+  displayName: "StoriesProgressstyled__StyledProgress"
+})(["display:flex;gap:", "px;width:100%;"], I.progressGap), at = S.div.withConfig({
+  displayName: "StoriesProgressstyled__StyledItem"
+})(["position:relative;flex:1 1 0;height:", "px;border-radius:", "px;overflow:hidden;background:", ";"], I.progressHeight, I.progressRadius, ({
+  $bg: e
+}) => e), lt = S.span.withConfig({
+  displayName: "StoriesProgressstyled__StyledFill"
+})(["position:absolute;inset:0;border-radius:", "px;background:", ";transform:scaleX(0);transform-origin:left center;will-change:transform;"], I.progressFillRadius, ({
+  $color: e
+}) => e), dt = ({
+  isReady: e
+}) => {
+  var E;
+  const {
+    store: t,
+    controller: o,
+    groups: r,
+    defaultDuration: i,
+    mode: f
+  } = W(), {
+    groupIndex: l,
+    slideIndex: d,
+    isPlaying: h,
+    isOpen: u
+  } = Y(t), g = Ge(), a = (f ?? g) === "dark", v = a ? He : Me, p = a ? je : Fe, w = r[l], T = (w == null ? void 0 : w.slides) ?? [], z = P(null), k = ((E = T[d]) == null ? void 0 : E.duration) ?? (w == null ? void 0 : w.defaultDuration) ?? i;
+  return it({
+    fillRef: z,
+    active: u,
+    duration: k,
+    isPlaying: h,
+    isReady: e,
+    resetKey: `${l}-${d}`,
+    onComplete: o.next
+  }), /* @__PURE__ */ n(st, { className: _.progress, children: T.map(($, N) => {
+    const D = $.id ?? `${l}-${N}`, O = N < d, j = N === d;
+    return /* @__PURE__ */ n(at, { className: _.progressItem, $bg: O ? p : v, children: j ? /* @__PURE__ */ n(lt, { ref: z, $color: p }) : null }, D);
+  }) });
+}, ct = G(["from{opacity:0;transform:scale(0.92) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}"]), pt = G(["from{opacity:1;transform:scale(1) translateY(0);}to{opacity:0;transform:scale(0.96) translateY(6px);}"]), ut = S.div.withConfig({
+  displayName: "StoriesBannerstyled__StyledBanner"
+})(["position:relative;width:min(", "px,calc(100vw - 100px));height:100%;max-height:", "px;border-radius:", "px;overflow:hidden;view-transition-name:", ";animation:", " ", " ease forwards;"], I.bannerMaxWidth, I.bannerMaxHeight, I.bannerRadius, V, ({
+  $closing: e
+}) => e ? pt : ct, ({
+  $closing: e
+}) => e ? "0.2s" : "0.24s"), gt = S.div.withConfig({
+  displayName: "StoriesBannerstyled__StyledTapLayer"
+})(["position:absolute;inset:0;z-index:1;touch-action:none;"]), ft = S.div.withConfig({
+  displayName: "StoriesBannerstyled__StyledTop"
+})(["position:absolute;top:0;left:0;right:0;z-index:2;padding:", "px;pointer-events:none;"], I.bannerPadding), yt = S.div.withConfig({
+  displayName: "StoriesBannerstyled__StyledBottom"
+})(["position:absolute;bottom:0;left:0;right:0;z-index:2;padding:", "px;pointer-events:none;"], I.bannerPadding), mt = S.div.withConfig({
+  displayName: "StoriesBannerstyled__StyledActionSlot"
+})(["pointer-events:auto;"]), St = ({
+  closing: e,
+  onAnimationEnd: t
+}) => {
+  const {
+    store: o,
+    controller: r,
+    groups: i,
+    pauseHoldDelay: f,
+    tapPrevZone: l,
+    loadingDelay: d,
+    onError: h,
+    renderError: u
+  } = W(), {
+    groupIndex: g,
+    slideIndex: y,
+    isOpen: a
+  } = Y(o), v = i[g], p = v == null ? void 0 : v.slides[y], {
+    status: w,
+    reload: T
+  } = Ve(p == null ? void 0 : p.src, d), z = qe({
+    controller: r,
+    pauseHoldDelay: f,
+    tapPrevZone: l,
+    isOpen: a
+  }), k = P();
+  A(() => {
+    if (w !== "error" || !p)
+      return;
+    const O = `${g}-${y}`;
+    k.current !== O && (k.current = O, h == null || h({
+      groupIndex: g,
+      slideIndex: y,
+      slide: p,
+      retry: T
+    }));
+  }, [w, g, y, p, h, T]);
+  const E = (O) => O.stopPropagation(), $ = (O) => {
+    O.target === O.currentTarget && t();
+  };
+  if (!p)
+    return null;
+  const {
+    footer: N
+  } = p, D = u ? u({
+    groupIndex: g,
+    slideIndex: y,
+    slide: p,
+    retry: T
+  }) : /* @__PURE__ */ n(Be, { size: "s", variant: "not-found", title: "Не удалось загрузить", subtitle: "Проверьте соединение и попробуйте снова", centered: !0, buttons: [{
+    type: "button",
+    props: {
+      text: "Попробовать снова",
+      view: "secondary",
+      onClick: T
+    }
+  }] });
+  return /* @__PURE__ */ L(ut, { className: _.banner, $closing: e, onClick: E, onAnimationEnd: $, children: [
+    /* @__PURE__ */ n(rt, { slide: p, status: w, errorNode: D }),
+    w === "error" ? null : /* @__PURE__ */ n(gt, { ...z }),
+    /* @__PURE__ */ n(ft, { children: /* @__PURE__ */ n(dt, { isReady: w === "loaded" }) }),
+    N ? /* @__PURE__ */ n(yt, { children: /* @__PURE__ */ n(mt, { className: _.action, children: N }) }) : null
+  ] });
+}, ne = {
+  ring: () => Je,
+  fallback: () => Qe,
+  boxShadow: () => We
+}, oe = (e, t) => e === "circle" ? "50%" : `${{
+  outer: I.rectRadiusOuter,
+  body: I.rectRadiusBody
+}[t]}px`, xt = S.div.withConfig({
+  displayName: "StoriesPreviewstyled__StyledPreview"
+})(["display:flex;flex-direction:column;align-items:center;width:", "px;"], ({
+  $width: e
+}) => e), ht = S.button.withConfig({
+  displayName: "StoriesPreviewstyled__StyledTrigger"
+})(["position:relative;display:block;box-sizing:border-box;width:", "px;height:", "px;padding:0;margin:0;border:0;background:transparent;cursor:pointer;border-radius:", ";outline:none;&:focus-visible{outline:2px solid ", ";outline-offset:2px;}"], ({
+  $width: e
+}) => e, ({
+  $height: e
+}) => e, ({
+  $shape: e
+}) => oe(e, "outer"), Xe), vt = S.div.withConfig({
+  displayName: "StoriesPreviewstyled__StyledRing"
+})(["position:absolute;inset:0;box-sizing:border-box;padding:", "px;background:", ";border-radius:", ";-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;"], I.ring, ne.ring, ({
+  $shape: e
+}) => oe(e, "outer")), wt = S.div.withConfig({
+  displayName: "StoriesPreviewstyled__StyledBody"
+})(["position:absolute;inset:", "px;box-sizing:border-box;box-shadow:", ";background-color:", ";background-position:center;background-size:cover;background-repeat:no-repeat;", " border-radius:", ";"], ({
+  $viewed: e
+}) => e ? 0 : I.ring * 2, ne.boxShadow, ne.fallback, ({
+  $image: e
+}) => e && ge(["background-image:url(", ");"], e), ({
+  $shape: e,
+  $viewed: t
+}) => oe(e, t ? "outer" : "body")), bt = S.div.withConfig({
+  displayName: "StoriesPreviewstyled__StyledTitle"
+})(["margin-top:", "px;width:100%;text-align:", ";& > *{width:100%;}"], I.titleGap, ({
+  $align: e
+}) => e), ye = (e) => {
+  var Z;
+  const {
+    slides: t,
+    shape: o = "circle",
+    title: r,
+    titleProps: i,
+    image: f,
+    viewed: l = !1,
+    size: d = I.circle,
+    width: h,
+    height: u,
+    renderTrigger: g,
+    className: y,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __index: a = 0
+  } = e, {
+    store: v,
+    controller: p,
+    preloadOnHover: w
+  } = W(), T = Y(v), z = T.isOpen && T.groupIndex === a, k = o === "rect" ? h ?? d : d, E = o === "rect" ? u ?? d : d, $ = () => p.open(a), N = () => {
+    w && t[0] && te(t[0].src);
+  }, D = () => g ? g({
+    index: a,
+    viewed: l,
+    isActive: z
+  }) : /* @__PURE__ */ L(ve, { children: [
+    l ? null : /* @__PURE__ */ n(vt, { className: _.previewRing, $shape: o }),
+    /* @__PURE__ */ n(wt, { className: _.previewBody, $shape: o, $viewed: l, $image: f })
+  ] }), O = {
+    variant: "BodyXXS",
+    bold: !0,
+    lines: 2,
+    tooltipText: r,
+    color: Ye,
+    ...i,
+    children: r
+  }, j = ((Z = i == null ? void 0 : i.style) == null ? void 0 : Z.textAlign) ?? "center";
+  return /* @__PURE__ */ L(xt, { className: [_.preview, y].filter(Boolean).join(" "), "data-component": et, $width: k, children: [
+    /* @__PURE__ */ n(ht, { type: "button", "aria-label": r, $width: k, $height: E, $shape: o, onClick: $, onMouseEnter: N, children: D() }),
+    r ? /* @__PURE__ */ n(bt, { className: _.previewTitle, style: {
+      maxWidth: k
+    }, $align: j, children: /* @__PURE__ */ n(Ke, { ...O }) }) : null
+  ] });
+}, It = G(["from{opacity:0;}to{opacity:1;}"]), _t = G(["from{opacity:1;}to{opacity:0;}"]), me = (e) => ge(["animation:", " ", " ease forwards;"], e ? _t : It, e ? "0.2s" : "0.24s"), Ct = S.div.withConfig({
+  displayName: "StoriesViewerstyled__StyledRoot"
+})(["position:fixed;inset:0;z-index:", ";display:flex;align-items:center;justify-content:center;"], ({
+  $zIndex: e
+}) => e), Nt = S.div.withConfig({
+  displayName: "StoriesViewerstyled__StyledOverlay"
+})(["position:absolute;inset:0;background:", ";opacity:", ";transition:opacity 0.24s ease;"], ({
+  $color: e
+}) => e, ({
+  $closing: e
+}) => e ? 0 : 1), Pt = S.div.withConfig({
+  displayName: "StoriesViewerstyled__StyledStage"
+})(["position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:min(", "px,100vw);height:min(", "px,calc(100vh - 32px));outline:none;"], I.stageWidth, I.bannerMaxHeight), ce = S.div.withConfig({
+  displayName: "StoriesViewerstyled__StyledArrow"
+})(["position:absolute;top:50%;", " z-index:3;transform:translateY(-50%);", ""], ({
+  $side: e
+}) => e === "prev" ? "left: 0;" : "right: 0;", ({
+  $closing: e
+}) => me(e)), Tt = S.div.withConfig({
+  displayName: "StoriesViewerstyled__StyledClose"
+})(["position:absolute;top:0;right:0;z-index:3;", ""], ({
+  $closing: e
+}) => me(e)), kt = G(["from{transform:translateX(24px);opacity:0;}to{transform:translateX(0);opacity:1;}"]), Ot = G(["from{transform:translateX(0);opacity:1;}to{transform:translateX(-24px);opacity:0;}"]), Rt = G(["from{transform:translateX(-24px);opacity:0;}to{transform:translateX(0);opacity:1;}"]), Et = G(["from{transform:translateX(0);opacity:1;}to{transform:translateX(24px);opacity:0;}"]), At = Ze(["::view-transition-old(", "),::view-transition-new(", "){animation-duration:0.3s;animation-timing-function:ease;}html[data-df-stories-dir='next']::view-transition-new(", "){animation-name:", ";}html[data-df-stories-dir='next']::view-transition-old(", "){animation-name:", ";}html[data-df-stories-dir='prev']::view-transition-new(", "){animation-name:", ";}html[data-df-stories-dir='prev']::view-transition-old(", "){animation-name:", ";}"], V, V, V, kt, V, Ot, V, Rt, V, Et), zt = () => {
+  const {
+    store: e,
+    controller: t,
+    groups: o,
+    overlay: r,
+    overlayColor: i,
+    zIndex: f,
+    groupTransition: l,
+    arrows: d,
+    preloadGroup: h
+  } = W(), {
+    isOpen: u,
+    groupIndex: g
+  } = Y(e), [y, a] = pe(u), v = P(null);
+  A(() => {
+    u && a(!0);
+  }, [u]), A(() => {
+    var N;
+    u && ((N = v.current) == null || N.focus());
+  }, [u]), A(() => {
+    u && h(g);
+  }, [u, g, h]);
+  const p = y && !u, w = ue(() => {
+    p && a(!1);
+  }, [p]);
+  if (!y || typeof document > "u")
+    return null;
+  const T = g > 0, z = g < o.length - 1, k = d === "always" || d === "auto" && o.length > 1, E = (N) => N.stopPropagation(), $ = /* @__PURE__ */ L(Ct, { className: _.viewer, $zIndex: f, onClick: () => t.close(), children: [
+    r ? /* @__PURE__ */ n(Nt, { className: _.overlay, $color: i, $closing: p }) : null,
+    l === "slide" ? /* @__PURE__ */ n(At, {}) : null,
+    /* @__PURE__ */ L(Pt, { ref: v, tabIndex: -1, className: _.stage, children: [
+      k ? /* @__PURE__ */ n(ce, { className: _.arrowPrev, $side: "prev", $closing: p, onClick: E, children: /* @__PURE__ */ n(ee, { size: "s", view: "white", pin: "circle-circle", "aria-label": "Предыдущая группа", disabled: !T, onClick: () => t.prevGroup(), children: /* @__PURE__ */ n(be, { size: "s" }) }) }) : null,
+      /* @__PURE__ */ n(St, { closing: p, onAnimationEnd: w }),
+      k ? /* @__PURE__ */ n(ce, { className: _.arrowNext, $side: "next", $closing: p, onClick: E, children: /* @__PURE__ */ n(ee, { size: "s", view: "white", pin: "circle-circle", "aria-label": "Следующая группа", disabled: !z, onClick: () => t.nextGroup(), children: /* @__PURE__ */ n(Ie, { size: "s" }) }) }) : null,
+      /* @__PURE__ */ n(Tt, { className: _.close, $closing: p, onClick: E, children: /* @__PURE__ */ n(ee, { size: "s", view: "white", pin: "circle-circle", "aria-label": "Закрыть", onClick: () => t.close(), children: /* @__PURE__ */ n(_e, { size: "s" }) }) })
+    ] })
+  ] });
+  return $e($, document.body);
+}, $t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  StoriesViewer: zt
+}, Symbol.toStringTag, { value: "Module" })), Dt = Te(() => Promise.resolve().then(() => $t).then((e) => ({
+  default: e.StoriesViewer
+}))), Bt = (e) => {
+  const t = P(e);
+  return t.current = e, ue((o) => {
+    const r = t.current[o];
+    if (!r)
+      return;
+    r.slides.forEach((f) => te(f.src));
+    const i = t.current[o + 1];
+    i != null && i.slides[0] && te(i.slides[0].src);
+  }, []);
+}, Gt = {
+  isOpen: !1,
+  groupIndex: 0,
+  slideIndex: 0,
+  isPlaying: !0,
+  direction: "next"
+}, Vt = (e) => {
+  let t = {
+    ...Gt,
+    ...e
+  };
+  const o = /* @__PURE__ */ new Set();
+  return {
+    getSnapshot: () => t,
+    subscribe: (r) => (o.add(r), () => {
+      o.delete(r);
+    }),
+    setState: (r) => {
+      Object.keys(r).some((l) => t[l] !== r[l]) && (t = {
+        ...t,
+        ...r
+      }, o.forEach((l) => l()));
+    }
+  };
+}, Lt = () => typeof document < "u" && typeof document.startViewTransition == "function", jt = (e, t) => {
+  const {
+    direction: o = "next",
+    enabled: r = !0
+  } = t ?? {};
+  if (!r || !Lt()) {
+    e();
+    return;
+  }
+  const i = document;
+  i.documentElement.dataset.dfStoriesDir = o, i.startViewTransition(() => De(e)).finished.finally(() => {
+    delete i.documentElement.dataset.dfStoriesDir;
+  });
+}, Ft = S.div.withConfig({
+  displayName: "Storiesstyled__StyledStories"
+})(["display:flex;align-items:flex-start;gap:16px;"]), Ht = (e) => Ae(e) && e.type === ye, Mt = () => {
+  const {
+    store: e
+  } = W(), {
+    isOpen: t
+  } = Y(e), [o, r] = pe(t);
+  return A(() => {
+    t && r(!0);
+  }, [t]), o ? /* @__PURE__ */ n(ze, { fallback: null, children: /* @__PURE__ */ n(Dt, {}) }) : null;
+}, Xt = (e, t) => {
+  const {
+    children: o,
+    defaultDuration: r = X.duration,
+    open: i,
+    defaultOpen: f,
+    activeGroupIndex: l,
+    activeSlideIndex: d,
+    onOpenChange: h,
+    onGroupChange: u,
+    onSlideChange: g,
+    onComplete: y,
+    onGroupComplete: a,
+    onClose: v,
+    onError: p,
+    renderError: w,
+    overlay: T = !0,
+    overlayColor: z = X.overlayColor,
+    zIndex: k = X.zIndex,
+    preloadOnHover: E = !0,
+    loadingDelay: $ = 0,
+    pauseHoldDelay: N = X.pauseHoldDelay,
+    groupTransition: D = "slide",
+    arrows: O = "auto",
+    mode: j,
+    className: Z
+  } = e, re = Oe.toArray(o).filter(Ht), K = re.map((b) => ({
+    slides: b.props.slides ?? [],
+    defaultDuration: b.props.defaultDuration
+  })), U = P();
+  U.current || (U.current = Vt({
+    isOpen: f ?? !1
+  }));
+  const c = U.current, q = P(K);
+  q.current = K;
+  const ie = P({
+    groupTransition: D
+  });
+  ie.current = {
+    groupTransition: D
+  };
+  const F = P({
+    onOpenChange: h,
+    onGroupChange: u,
+    onSlideChange: g,
+    onComplete: y,
+    onGroupComplete: a,
+    onClose: v
+  });
+  F.current = {
+    onOpenChange: h,
+    onGroupChange: u,
+    onSlideChange: g,
+    onComplete: y,
+    onGroupComplete: a,
+    onClose: v
+  };
+  const J = P();
+  if (!J.current) {
+    const b = (s, C) => c.setState({
+      slideIndex: s,
+      direction: C,
+      isPlaying: !0
+    }), m = (s, C, R) => jt(() => c.setState({
+      groupIndex: s,
+      slideIndex: C,
+      direction: R,
+      isPlaying: !0
+    }), {
+      direction: R,
+      enabled: ie.current.groupTransition !== "none"
+    }), x = () => {
+      var s, C;
+      (C = (s = F.current).onComplete) == null || C.call(s), c.setState({
+        isOpen: !1,
+        isPlaying: !1
+      });
+    };
+    J.current = {
+      open: (s, C) => {
+        const R = c.getSnapshot();
+        c.setState({
+          isOpen: !0,
+          groupIndex: s ?? R.groupIndex,
+          slideIndex: C ?? 0,
+          isPlaying: !0,
+          direction: "next"
+        });
+      },
+      close: () => c.setState({
+        isOpen: !1,
+        isPlaying: !1
+      }),
+      next: () => {
+        var R, B, H, M, ae;
+        const s = c.getSnapshot(), C = ((R = q.current[s.groupIndex]) == null ? void 0 : R.slides.length) ?? 0;
+        s.slideIndex + 1 < C ? b(s.slideIndex + 1, "next") : s.groupIndex + 1 < q.current.length ? ((H = (B = F.current).onGroupComplete) == null || H.call(B, s.groupIndex), m(s.groupIndex + 1, 0, "next")) : ((ae = (M = F.current).onGroupComplete) == null || ae.call(M, s.groupIndex), x());
+      },
+      prev: () => {
+        const s = c.getSnapshot();
+        s.slideIndex > 0 ? b(s.slideIndex - 1, "prev") : s.groupIndex > 0 && m(s.groupIndex - 1, 0, "prev");
+      },
+      nextGroup: () => {
+        const s = c.getSnapshot();
+        s.groupIndex + 1 < q.current.length && m(s.groupIndex + 1, 0, "next");
+      },
+      prevGroup: () => {
+        const s = c.getSnapshot();
+        s.groupIndex > 0 && m(s.groupIndex - 1, 0, "prev");
+      },
+      goTo: (s, C) => {
+        const R = c.getSnapshot(), B = s < R.groupIndex ? "prev" : "next";
+        s === R.groupIndex ? b(C ?? 0, B) : m(s, C ?? 0, B);
+      },
+      pause: () => c.setState({
+        isPlaying: !1
+      }),
+      resume: () => c.setState({
+        isPlaying: !0
+      })
+    };
+  }
+  const Q = J.current, xe = Bt(K), se = P(c.getSnapshot());
+  A(() => c.subscribe(() => {
+    var s, C, R, B, H, M;
+    const b = se.current, m = c.getSnapshot();
+    se.current = m;
+    const x = F.current;
+    if (b.isOpen !== m.isOpen) {
+      (s = x.onOpenChange) == null || s.call(x, m.isOpen, {
+        groupIndex: m.groupIndex
+      }), m.isOpen ? ((C = x.onGroupChange) == null || C.call(x, m.groupIndex), (R = x.onSlideChange) == null || R.call(x, m.groupIndex, m.slideIndex)) : (B = x.onClose) == null || B.call(x);
+      return;
+    }
+    m.isOpen && (b.groupIndex !== m.groupIndex && ((H = x.onGroupChange) == null || H.call(x, m.groupIndex)), (b.groupIndex !== m.groupIndex || b.slideIndex !== m.slideIndex) && ((M = x.onSlideChange) == null || M.call(x, m.groupIndex, m.slideIndex)));
+  }), [c]), A(() => {
+    i !== void 0 && c.setState({
+      isOpen: i
+    });
+  }, [i, c]), A(() => {
+    l !== void 0 && c.setState({
+      groupIndex: l
+    });
+  }, [l, c]), A(() => {
+    d !== void 0 && c.setState({
+      slideIndex: d
+    });
+  }, [d, c]), Re(t, () => ({
+    ...Q,
+    getState: () => {
+      const b = c.getSnapshot();
+      return {
+        isOpen: b.isOpen,
+        groupIndex: b.groupIndex,
+        slideIndex: b.slideIndex,
+        isPlaying: b.isPlaying
+      };
+    }
+  }), [Q, c]);
+  const he = {
+    store: c,
+    controller: Q,
+    groups: K,
+    defaultDuration: r,
+    pauseHoldDelay: N,
+    tapPrevZone: X.tapPrevZone,
+    preloadGroup: xe,
+    preloadOnHover: E,
+    loadingDelay: $,
+    overlay: T,
+    overlayColor: z,
+    zIndex: k,
+    groupTransition: D,
+    arrows: O,
+    mode: j,
+    onError: p,
+    renderError: w
+  };
+  return /* @__PURE__ */ L(Ue, { value: he, children: [
+    /* @__PURE__ */ n(Ft, { className: [_.root, Z].filter(Boolean).join(" "), children: re.map((b, m) => Ee(b, {
+      __index: m
+    })) }),
+    /* @__PURE__ */ n(Mt, {})
+  ] });
+}, Se = ke(Xt);
+Se.Preview = ye;
+Se.displayName = "Stories";
+export {
+  Se as S,
+  ye as a,
+  rt as b,
+  dt as c,
+  St as d,
+  zt as e,
+  Dt as f,
+  _ as s
+};