@genai-fi/base 4.0.2 → 4.0.4

package/dist/components/Webcam/Webcam.js

@@ -1,41 +1,41 @@
-import { jsx as s, jsxs as F, Fragment as q } from "react/jsx-runtime";
-import * as G from "react";
-import { useState as M, useRef as O, useEffect as y, useCallback as E } from "react";
-import { useTranslation as J } from "react-i18next";
-import { IconButton as V } from "@mui/material";
-import { c as Q } from "../../createSvgIcon-DmrVEdN7.js";
-import { WebcamClass as Y } from "./webcamClass.js";
-import { g as Z, u as z, s as P, c as W, a as ee, m as te } from "../../DefaultPropsProvider-D2IJ8Qbs.js";
-import { g as ae, b as ne, P as a } from "../../createTheme-a85zdZWm.js";
-import { css as A, keyframes as H } from "@emotion/react";
-import '../../assets/Webcam.css';function re(e) {
-  return String(e).match(/[\d.\-+]*\s*(.*)/)[1] || "";
+import { jsx as c, jsxs as j, Fragment as D } from "react/jsx-runtime";
+import * as X from "react";
+import { useState as T, useRef as b, useEffect as C, useCallback as B } from "react";
+import { useTranslation as H } from "react-i18next";
+import { IconButton as P } from "@mui/material";
+import { c as K } from "../../createSvgIcon-DQhMxTx4.js";
+import { WebcamClass as L } from "./webcamClass.js";
+import { g as G, u as J, s as Q, c as Y, a as Z, m as W } from "../../DefaultPropsProvider-BurgXZzw.js";
+import { g as tt, P as n } from "../../createTheme-DV959X3d.js";
+import { css as z, keyframes as q } from "@emotion/react";
+import '../../assets/Webcam.css';function et(t) {
+  return String(t).match(/[\d.\-+]*\s*(.*)/)[1] || "";
 }
-function ie(e) {
-  return parseFloat(e);
+function nt(t) {
+  return parseFloat(t);
 }
-const oe = "_container_u6uf5_1", se = "_wrapContainer_u6uf5_5", ce = "_flipButton_u6uf5_10", N = {
-  container: oe,
-  wrapContainer: se,
-  flipButton: ce
+const rt = "_container_u6uf5_1", at = "_wrapContainer_u6uf5_5", ot = "_flipButton_u6uf5_10", F = {
+  container: rt,
+  wrapContainer: at,
+  flipButton: ot
 };
-function le(e) {
-  return ae("MuiSkeleton", e);
+function it(t) {
+  return tt("MuiSkeleton", t);
 }
-Z("MuiSkeleton", ["root", "text", "rectangular", "rounded", "circular", "pulse", "wave", "withChildren", "fitContent", "heightAuto"]);
-const ue = (e) => {
+G("MuiSkeleton", ["root", "text", "rectangular", "rounded", "circular", "pulse", "wave", "withChildren", "fitContent", "heightAuto"]);
+const st = (t) => {
   const {
-    classes: i,
-    variant: r,
-    animation: o,
-    hasChildren: u,
-    width: v,
-    height: f
-  } = e;
-  return ee({
-    root: ["root", r, o, u && "withChildren", u && !v && "fitContent", u && !f && "heightAuto"]
-  }, le, i);
-}, $ = H`
+    classes: o,
+    variant: a,
+    animation: i,
+    hasChildren: p,
+    width: y,
+    height: m
+  } = t;
+  return Z({
+    root: ["root", a, i, p && "withChildren", p && !y && "fitContent", p && !m && "heightAuto"]
+  }, it, o);
+}, M = q`
   0% {
     opacity: 1;
   }
@@ -47,7 +47,7 @@ const ue = (e) => {
   100% {
     opacity: 1;
   }
-`, j = H`
+`, _ = q`
   0% {
     transform: translateX(-100%);
   }
@@ -60,29 +60,29 @@ const ue = (e) => {
   100% {
     transform: translateX(100%);
   }
-`, fe = typeof $ != "string" ? A`
-        animation: ${$} 2s ease-in-out 0.5s infinite;
-      ` : null, pe = typeof j != "string" ? A`
+`, ct = typeof M != "string" ? z`
+        animation: ${M} 2s ease-in-out 0.5s infinite;
+      ` : null, lt = typeof _ != "string" ? z`
         &::after {
-          animation: ${j} 2s linear 0.5s infinite;
+          animation: ${_} 2s linear 0.5s infinite;
         }
-      ` : null, de = P("span", {
+      ` : null, ut = Q("span", {
   name: "MuiSkeleton",
   slot: "Root",
-  overridesResolver: (e, i) => {
+  overridesResolver: (t, o) => {
     const {
-      ownerState: r
-    } = e;
-    return [i.root, i[r.variant], r.animation !== !1 && i[r.animation], r.hasChildren && i.withChildren, r.hasChildren && !r.width && i.fitContent, r.hasChildren && !r.height && i.heightAuto];
+      ownerState: a
+    } = t;
+    return [o.root, o[a.variant], a.animation !== !1 && o[a.animation], a.hasChildren && o.withChildren, a.hasChildren && !a.width && o.fitContent, a.hasChildren && !a.height && o.heightAuto];
   }
-})(te(({
-  theme: e
+})(W(({
+  theme: t
 }) => {
-  const i = re(e.shape.borderRadius) || "px", r = ie(e.shape.borderRadius);
+  const o = et(t.shape.borderRadius) || "px", a = nt(t.shape.borderRadius);
   return {
     display: "block",
     // Create a "on paper" color with sufficient contrast retaining the color
-    backgroundColor: e.vars ? e.vars.palette.Skeleton.bg : ne(e.palette.text.primary, e.palette.mode === "light" ? 0.11 : 0.13),
+    backgroundColor: t.vars ? t.vars.palette.Skeleton.bg : t.alpha(t.palette.text.primary, t.palette.mode === "light" ? 0.11 : 0.13),
     height: "1.2em",
     variants: [{
       props: {
@@ -94,7 +94,7 @@ const ue = (e) => {
         height: "auto",
         transformOrigin: "0 55%",
         transform: "scale(1, 0.60)",
-        borderRadius: `${r}${i}/${Math.round(r / 0.6 * 10) / 10}${i}`,
+        borderRadius: `${a}${o}/${Math.round(a / 0.6 * 10) / 10}${o}`,
         "&:empty:before": {
           content: '"\\00a0"'
         }
@@ -111,12 +111,12 @@ const ue = (e) => {
         variant: "rounded"
       },
       style: {
-        borderRadius: (e.vars || e).shape.borderRadius
+        borderRadius: (t.vars || t).shape.borderRadius
       }
     }, {
       props: ({
-        ownerState: o
-      }) => o.hasChildren,
+        ownerState: i
+      }) => i.hasChildren,
       style: {
         "& > *": {
           visibility: "hidden"
@@ -124,15 +124,15 @@ const ue = (e) => {
       }
     }, {
       props: ({
-        ownerState: o
-      }) => o.hasChildren && !o.width,
+        ownerState: i
+      }) => i.hasChildren && !i.width,
       style: {
         maxWidth: "fit-content"
       }
     }, {
       props: ({
-        ownerState: o
-      }) => o.hasChildren && !o.height,
+        ownerState: i
+      }) => i.hasChildren && !i.height,
       style: {
         height: "auto"
       }
@@ -140,8 +140,8 @@ const ue = (e) => {
       props: {
         animation: "pulse"
       },
-      style: fe || {
-        animation: `${$} 2s ease-in-out 0.5s infinite`
+      style: ct || {
+        animation: `${M} 2s ease-in-out 0.5s infinite`
       }
     }, {
       props: {
@@ -156,7 +156,7 @@ const ue = (e) => {
           background: `linear-gradient(
                 90deg,
                 transparent,
-                ${(e.vars || e).palette.action.hover},
+                ${(t.vars || t).palette.action.hover},
                 transparent
               )`,
           content: '""',
@@ -172,47 +172,47 @@ const ue = (e) => {
       props: {
         animation: "wave"
       },
-      style: pe || {
+      style: lt || {
         "&::after": {
-          animation: `${j} 2s linear 0.5s infinite`
+          animation: `${_} 2s linear 0.5s infinite`
         }
       }
     }]
   };
-})), K = /* @__PURE__ */ G.forwardRef(function(i, r) {
-  const o = z({
-    props: i,
+})), E = /* @__PURE__ */ X.forwardRef(function(o, a) {
+  const i = J({
+    props: o,
     name: "MuiSkeleton"
   }), {
-    animation: u = "pulse",
-    className: v,
-    component: f = "span",
-    height: m,
-    style: p,
-    variant: w = "text",
-    width: l,
-    ...h
-  } = o, t = {
-    ...o,
-    animation: u,
-    component: f,
-    variant: w,
-    hasChildren: !!h.children
-  }, T = ue(t);
-  return /* @__PURE__ */ s(de, {
-    as: f,
-    ref: r,
-    className: W(T.root, v),
-    ownerState: t,
-    ...h,
+    animation: p = "pulse",
+    className: y,
+    component: m = "span",
+    height: h,
+    style: e,
+    variant: A = "text",
+    width: v,
+    ...f
+  } = i, g = {
+    ...i,
+    animation: p,
+    component: m,
+    variant: A,
+    hasChildren: !!f.children
+  }, u = st(g);
+  return /* @__PURE__ */ c(ut, {
+    as: m,
+    ref: a,
+    className: Y(u.root, y),
+    ownerState: g,
+    ...f,
     style: {
-      width: l,
-      height: m,
-      ...p
+      width: v,
+      height: h,
+      ...e
     }
   });
 });
-process.env.NODE_ENV !== "production" && (K.propTypes = {
+process.env.NODE_ENV !== "production" && (E.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -222,169 +222,159 @@ process.env.NODE_ENV !== "production" && (K.propTypes = {
    * If `false` the animation effect is disabled.
    * @default 'pulse'
    */
-  animation: a.oneOf(["pulse", "wave", !1]),
+  animation: n.oneOf(["pulse", "wave", !1]),
   /**
    * Optional children to infer width and height from.
    */
-  children: a.node,
+  children: n.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: a.object,
+  classes: n.object,
   /**
    * @ignore
    */
-  className: a.string,
+  className: n.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: a.elementType,
+  component: n.elementType,
   /**
    * Height of the skeleton.
    * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
    */
-  height: a.oneOfType([a.number, a.string]),
+  height: n.oneOfType([n.number, n.string]),
   /**
    * @ignore
    */
-  style: a.object,
+  style: n.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: a.oneOfType([a.arrayOf(a.oneOfType([a.func, a.object, a.bool])), a.func, a.object]),
+  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
   /**
    * The type of content that will be rendered.
    * @default 'text'
    */
-  variant: a.oneOfType([a.oneOf(["circular", "rectangular", "rounded", "text"]), a.string]),
+  variant: n.oneOfType([n.oneOf(["circular", "rectangular", "rounded", "text"]), n.string]),
   /**
    * Width of the skeleton.
    * Useful when the skeleton is inside an inline element with no width of its own.
    */
-  width: a.oneOfType([a.number, a.string])
+  width: n.oneOfType([n.number, n.string])
 });
-const X = Q([/* @__PURE__ */ s("path", {
+const U = K([/* @__PURE__ */ c("path", {
   d: "M16 7h-1l-1-1h-4L9 7H8c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2m-4 7c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2"
-}, "0"), /* @__PURE__ */ s("path", {
+}, "0"), /* @__PURE__ */ c("path", {
   d: "m8.57.51 4.48 4.48V2.04c4.72.47 8.48 4.23 8.95 8.95h2C23.34 3.02 15.49-1.59 8.57.51m2.38 21.45c-4.72-.47-8.48-4.23-8.95-8.95H0c.66 7.97 8.51 12.58 15.43 10.48l-4.48-4.48z"
 }, "1")], "Cameraswitch");
-function Re({
-  interval: e,
-  capture: i,
-  onCapture: r,
-  disable: o,
-  direct: u,
-  hidden: v,
-  onPreprocess: f,
-  onPostprocess: m,
-  onActivated: p,
-  onFatal: w,
-  size: l
-}) {
-  const { t: h } = J(), [t, T] = M(null), b = O(null), C = O(-1), _ = O(0), d = O(), [k, L] = M(!1), [R, D] = M(!1);
-  y(() => {
-    d.current = async (n) => {
-      var c;
-      if (o) {
-        d.current && (C.current = window.requestAnimationFrame(d.current));
+function bt({ interval: t, capture: o, disable: a, direct: i, hidden: p, size: y, ...m }) {
+  const { t: h } = H(), [e, A] = T(null), v = b(null), f = b(-1), g = b(0), u = b(), s = b({}), [k, V] = T(!1), [R, I] = T(!1);
+  s.current = m;
+  const d = Math.floor(y);
+  C(() => {
+    u.current = async (r) => {
+      var l;
+      if (a) {
+        u.current && (f.current = window.requestAnimationFrame(u.current));
         return;
       }
-      if (t && t.canvas) {
-        t.update();
-        const x = e !== void 0 ? e : 1e3;
-        if (f && await f(t.canvas), i && r && n - _.current >= x) {
-          if (u && t.canvas)
-            await r(t.canvas);
+      if (e && e.canvas) {
+        e.update();
+        const S = t !== void 0 ? t : 1e3;
+        if (s.current.onPreprocess && await s.current.onPreprocess(e.canvas), o && s.current.onCapture && r - g.current >= S) {
+          if (i && e.canvas)
+            await s.current.onCapture(e.canvas);
           else {
-            const g = document.createElement("canvas");
-            g.width = t.canvas.width, g.height = t.canvas.height;
-            const S = g.getContext("2d");
-            S || console.error("Failed to get context"), S == null || S.drawImage(t.canvas, 0, 0), await r(g);
+            const w = document.createElement("canvas");
+            w.width = e.canvas.width, w.height = e.canvas.height;
+            const x = w.getContext("2d");
+            x || console.error("Failed to get context"), x == null || x.drawImage(e.canvas, 0, 0), await s.current.onCapture(w);
           }
-          _.current = n;
+          g.current = r;
         }
-        const I = (c = b.current) == null ? void 0 : c.getContext("2d");
-        I && (I.drawImage(t.canvas, 0, 0), m && b.current && await m(b.current));
+        const O = (l = v.current) == null ? void 0 : l.getContext("2d");
+        O && (O.drawImage(e.canvas, 0, 0), s.current.onPostprocess && v.current && await s.current.onPostprocess(v.current));
       }
-      d.current && (C.current = window.requestAnimationFrame(d.current));
-    }, C.current === -1 && (C.current = window.requestAnimationFrame(d.current));
-  }, [t, e, i, r, u, o, m, f]);
-  const B = E(
-    async (n) => {
-      var c;
-      if (await n.setup({ facingMode: R ? "user" : "environment" }), n.webcam && (n.webcam.playsInline = !0, n.webcam.muted = !0, n.webcam.onsuspend = () => n.play(), T(n)), (c = navigator.mediaDevices) != null && c.enumerateDevices)
+      u.current && (f.current = window.requestAnimationFrame(u.current));
+    }, f.current === -1 && (f.current = window.requestAnimationFrame(u.current));
+  }, [e, t, o, i, a]);
+  const N = B(
+    async (r) => {
+      var l;
+      if (await r.setup({ facingMode: R ? "user" : "environment" }), r.webcam && (r.webcam.playsInline = !0, r.webcam.muted = !0, r.webcam.onsuspend = () => r.play(), A(r)), (l = navigator.mediaDevices) != null && l.enumerateDevices)
         try {
-          (await navigator.mediaDevices.enumerateDevices()).filter((g) => g.kind === "videoinput").length > 1 && (k || L(!0), n.flip = R);
-        } catch (x) {
-          console.error(x);
+          (await navigator.mediaDevices.enumerateDevices()).filter((w) => w.kind === "videoinput").length > 1 && (k || V(!0), r.flip = R);
+        } catch (S) {
+          console.error(S);
         }
-      return p && p(!0), n;
+      return s.current.onActivated && s.current.onActivated(!0), r;
     },
-    [p, R, k]
+    [R, k]
   );
-  y(() => {
-    i && (_.current = 0);
-  }, [i]), y(() => {
-    const n = new Y(l, l, !0);
-    return B(n).catch((c) => {
-      p && p(!1), console.error("No webcam", c), w && w();
+  C(() => {
+    o && (g.current = 0);
+  }, [o]), C(() => {
+    const r = new L(d, d, !0);
+    return N(r).catch((l) => {
+      s.current.onActivated && s.current.onActivated(!1), console.error("No webcam", l), s.current.onFatal && s.current.onFatal();
     }), () => {
-      var c;
-      (c = n.webcam) != null && c.srcObject && n.stop();
+      var l;
+      (l = r.webcam) != null && l.srcObject && r.stop();
     };
-  }, [R, p, B, w, l]), y(() => () => {
-    var n;
-    d.current = void 0, (n = t == null ? void 0 : t.webcam) != null && n.srcObject && t.stop();
-  }, [t]), y(() => {
-    t && (o ? t.pause() : t.play());
-  }, [t, o]);
-  const U = E(() => {
-    D((n) => !n);
-  }, [D]);
-  return v ? /* @__PURE__ */ s(q, { children: k && /* @__PURE__ */ s(
-    V,
+  }, [R, N, d]), C(() => () => {
+    var r;
+    u.current = void 0, (r = e == null ? void 0 : e.webcam) != null && r.srcObject && e.stop();
+  }, [e]), C(() => {
+    e && (a ? e.pause() : e.play());
+  }, [e, a]);
+  const $ = B(() => {
+    I((r) => !r);
+  }, [I]);
+  return p ? /* @__PURE__ */ c(D, { children: k && /* @__PURE__ */ c(
+    P,
     {
       size: "large",
       color: "inherit",
-      onClick: U,
+      onClick: $,
       "aria-label": h("webcam.aria.flip"),
-      children: /* @__PURE__ */ s(X, { fontSize: "large" })
+      children: /* @__PURE__ */ c(U, { fontSize: "large" })
     }
-  ) }) : /* @__PURE__ */ F(q, { children: [
-    !t && /* @__PURE__ */ s(
-      K,
+  ) }) : /* @__PURE__ */ j(D, { children: [
+    !e && /* @__PURE__ */ c(
+      E,
       {
         variant: "rounded",
-        width: l,
-        height: l
+        width: d,
+        height: d
       }
     ),
-    t && /* @__PURE__ */ F("div", { className: N.wrapContainer, children: [
-      k && /* @__PURE__ */ s(
-        V,
+    e && /* @__PURE__ */ j("div", { className: F.wrapContainer, children: [
+      k && /* @__PURE__ */ c(
+        P,
         {
-          className: N.flipButton,
+          className: F.flipButton,
           size: "large",
           color: "inherit",
-          onClick: U,
+          onClick: $,
           "aria-label": h("webcam.aria.flip"),
-          children: /* @__PURE__ */ s(X, { fontSize: "large" })
+          children: /* @__PURE__ */ c(U, { fontSize: "large" })
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         "div",
         {
           "data-testid": "webcam",
-          className: N.container,
+          className: F.container,
           role: "img",
           "aria-label": h("webcam.aria.video"),
-          children: /* @__PURE__ */ s(
+          children: /* @__PURE__ */ c(
             "canvas",
             {
-              width: l,
-              height: l,
-              ref: b
+              width: d,
+              height: d,
+              ref: v
             }
           )
         }
@@ -393,5 +383,5 @@ function Re({
   ] });
 }
 export {
-  Re as default
+  bt as default
 };