@daisforge/ui 1.12.1 → 1.13.0

package/chunks/Stories-COpgkk_M.mjs

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