import { jsx as n } from "react/jsx-runtime";
import { d as x } from "./index11.js";
import { useEffect as h, useState as d, useCallback as p } from "react";
import { s as f, N as O, I as k, O as y, S as E } from "./sl-types.js";
import { CountdownCircleTimer as g } from "react-countdown-circle-timer";
import { B as P } from "./index4.js";
const v = (i) => {
  const { Component: o, options: t, customOptions: s, autoFocus: r, ...l } = i, e = x.useFocusable({
    ...t,
    ...s,
    onEnterPress: () => {
      var a;
      return (a = i.onClick) == null ? void 0 : a.call(i, { currentTarget: e.ref.current, stopPropagation: () => {
      } });
    }
  });
  return h(() => {
    r && e.focusSelf();
  }, []), /* @__PURE__ */ n(o, { ...l, ...e, "data-is-with-focus": "true" });
};
function B(i, o) {
  return ({ webos: t, options: s, ...r }) => t ? /* @__PURE__ */ n(v, { Component: i, options: o, customOptions: s, ...r }) : /* @__PURE__ */ n(i, { ...r });
}
const w = [10, 10, 1, 0], I = /* @__PURE__ */ f("div")({
  name: "RemainingTimeCircle",
  class: "r165427",
  propsAsIs: !1
}), S = /* @__PURE__ */ f("div")({
  name: "RemainingTime",
  class: "r17garf3",
  propsAsIs: !1
}), b = y, c = O, u = E, F = ({
  className: i,
  duration: o = 30,
  onTimerExpired: t,
  isPlaying: s = !0
}) => /* @__PURE__ */ n(g, {
  isPlaying: s,
  strokeWidth: 0,
  duration: o,
  colors: c,
  size: 24,
  onComplete: t,
  children: ({
    remainingTime: r
  }) => /* @__PURE__ */ n(S, {
    className: i,
    children: o === 0 ? 0 : r
  })
}), j = ({
  isPlaying: i = !0,
  duration: o = 30,
  onTimerExpired: t
}) => {
  const [s, r] = d(o > 10 ? b : c), [l, e] = d(2);
  h(() => {
    o === 0 && (e(0), r(u));
  }, [o]);
  const a = ({
    remainingTime: m
  }) => /* @__PURE__ */ n(I, {
    children: o === 0 ? 0 : m
  }), C = p(() => {
    t == null || t(), r(u);
  }, [t, r]), T = p((m) => {
    m === 10 && r(c);
  }, [r]);
  return /* @__PURE__ */ n(g, {
    isPlaying: i,
    duration: o,
    colors: k,
    colorsTime: w,
    size: 32,
    strokeWidth: l,
    trailStrokeWidth: 2,
    trailColor: s,
    onComplete: C,
    onUpdate: T,
    children: a
  });
}, G = ({ height: i = "37px", width: o = "37px" }) => /* @__PURE__ */ n("div", { style: { height: i, width: o }, children: /* @__PURE__ */ n(P, { name: "loader" }) });
export {
  F as G,
  j as L,
  B as O,
  G as d
};
