@genai-fi/base 4.0.3 → 4.0.5

package/dist/components/Button/Button.d.ts

@@ -1,6 +1,9 @@
 export declare const Button: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
 }, "disabled" | "className" | "style" | "classes" | "children" | "color" | "sx" | "tabIndex" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export declare const VerticalButton: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "children" | "color" | "sx" | "tabIndex" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export declare const LargeButton: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
 }, "disabled" | "className" | "style" | "classes" | "children" | "color" | "sx" | "tabIndex" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/dist/components/Button/Button.js

@@ -3,6 +3,13 @@ import { B as o } from "../../Button-BeUmwrlS.js";
 const e = t(o)({
   textTransform: "none"
 }), s = t(o)({
+  flexDirection: "column",
+  padding: "5px 8px",
+  "& .MuiButton-startIcon": {
+    margin: "0"
+  },
+  textTransform: "none"
+}), a = t(o)({
   textTransform: "none",
   fontWeight: "bold",
   fontSize: "1.2rem",
@@ -10,5 +17,6 @@ const e = t(o)({
 });
 export {
   e as Button,
-  s as LargeButton
+  a as LargeButton,
+  s as VerticalButton
 };

package/dist/components/Webcam/Webcam.d.ts

@@ -1,15 +1,17 @@
-interface Props {
-    interval?: number;
-    capture?: boolean;
-    disable?: boolean;
+interface Callbacks {
     onCapture?: (image: HTMLCanvasElement) => void | Promise<void>;
     onPreprocess?: (image: HTMLCanvasElement) => void | Promise<void>;
     onPostprocess?: (image: HTMLCanvasElement) => void | Promise<void>;
     onActivated?: (available: boolean) => void;
     onFatal?: () => void;
+}
+interface Props extends Callbacks {
+    interval?: number;
+    capture?: boolean;
+    disable?: boolean;
     direct?: boolean;
     hidden?: boolean;
     size: number;
 }
-export default function Webcam({ interval, capture, onCapture, disable, direct, hidden, onPreprocess, onPostprocess, onActivated, onFatal, size, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Webcam({ interval, capture, disable, direct, hidden, size, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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-DQhMxTx4.js";
-import { WebcamClass as Y } from "./webcamClass.js";
-import { g as Z, u as z, s as P, c as W, a as tt, m as et } from "../../DefaultPropsProvider-BurgXZzw.js";
-import { g as at, P as a } from "../../createTheme-DV959X3d.js";
-import { css as A, keyframes as H } from "@emotion/react";
-import '../../assets/Webcam.css';function nt(t) {
+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 rt(t) {
+function nt(t) {
   return parseFloat(t);
 }
-const it = "_container_u6uf5_1", ot = "_wrapContainer_u6uf5_5", st = "_flipButton_u6uf5_10", N = {
-  container: it,
-  wrapContainer: ot,
-  flipButton: st
+const rt = "_container_u6uf5_1", at = "_wrapContainer_u6uf5_5", ot = "_flipButton_u6uf5_10", F = {
+  container: rt,
+  wrapContainer: at,
+  flipButton: ot
 };
-function ct(t) {
-  return at("MuiSkeleton", t);
+function it(t) {
+  return tt("MuiSkeleton", t);
 }
-Z("MuiSkeleton", ["root", "text", "rectangular", "rounded", "circular", "pulse", "wave", "withChildren", "fitContent", "heightAuto"]);
-const lt = (t) => {
+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
+    classes: o,
+    variant: a,
+    animation: i,
+    hasChildren: p,
+    width: y,
+    height: m
   } = t;
-  return tt({
-    root: ["root", r, o, u && "withChildren", u && !v && "fitContent", u && !f && "heightAuto"]
-  }, ct, i);
-}, $ = H`
+  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 lt = (t) => {
   100% {
     opacity: 1;
   }
-`, j = H`
+`, _ = q`
   0% {
     transform: translateX(-100%);
   }
@@ -60,25 +60,25 @@ const lt = (t) => {
   100% {
     transform: translateX(100%);
   }
-`, ut = typeof $ != "string" ? A`
-        animation: ${$} 2s ease-in-out 0.5s infinite;
-      ` : null, ft = 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, pt = P("span", {
+      ` : null, ut = Q("span", {
   name: "MuiSkeleton",
   slot: "Root",
-  overridesResolver: (t, i) => {
+  overridesResolver: (t, o) => {
     const {
-      ownerState: r
+      ownerState: a
     } = t;
-    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];
+    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];
   }
-})(et(({
+})(W(({
   theme: t
 }) => {
-  const i = nt(t.shape.borderRadius) || "px", r = rt(t.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
@@ -94,7 +94,7 @@ const lt = (t) => {
         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"'
         }
@@ -115,8 +115,8 @@ const lt = (t) => {
       }
     }, {
       props: ({
-        ownerState: o
-      }) => o.hasChildren,
+        ownerState: i
+      }) => i.hasChildren,
       style: {
         "& > *": {
           visibility: "hidden"
@@ -124,15 +124,15 @@ const lt = (t) => {
       }
     }, {
       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 lt = (t) => {
       props: {
         animation: "pulse"
       },
-      style: ut || {
-        animation: `${$} 2s ease-in-out 0.5s infinite`
+      style: ct || {
+        animation: `${M} 2s ease-in-out 0.5s infinite`
       }
     }, {
       props: {
@@ -172,47 +172,47 @@ const lt = (t) => {
       props: {
         animation: "wave"
       },
-      style: ft || {
+      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, e = {
-    ...o,
-    animation: u,
-    component: f,
-    variant: w,
-    hasChildren: !!h.children
-  }, T = lt(e);
-  return /* @__PURE__ */ s(pt, {
-    as: f,
-    ref: r,
-    className: W(T.root, v),
-    ownerState: e,
-    ...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 kt({
-  interval: t,
-  capture: i,
-  onCapture: r,
-  disable: o,
-  direct: u,
-  hidden: v,
-  onPreprocess: f,
-  onPostprocess: m,
-  onActivated: p,
-  onFatal: w,
-  size: l
-}) {
-  const { t: h } = J(), [e, 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 (e && e.canvas) {
         e.update();
-        const x = t !== void 0 ? t : 1e3;
-        if (f && await f(e.canvas), i && r && n - _.current >= x) {
-          if (u && e.canvas)
-            await r(e.canvas);
+        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 = e.canvas.width, g.height = e.canvas.height;
-            const S = g.getContext("2d");
-            S || console.error("Failed to get context"), S == null || S.drawImage(e.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(e.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));
-  }, [e, t, 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 = e == null ? void 0 : e.webcam) != null && n.srcObject && e.stop();
-  }, [e]), y(() => {
-    e && (o ? e.pause() : e.play());
-  }, [e, 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: [
-    !e && /* @__PURE__ */ s(
-      K,
+  ) }) : /* @__PURE__ */ j(D, { children: [
+    !e && /* @__PURE__ */ c(
+      E,
       {
         variant: "rounded",
-        width: l,
-        height: l
+        width: d,
+        height: d
       }
     ),
-    e && /* @__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 kt({
   ] });
 }
 export {
-  kt as default
+  bt as default
 };

package/dist/main.d.ts

@@ -1,5 +1,5 @@
 export { default as ConnectionStatus } from './components/ConnectionStatus/ConnectionStatus';
-export { Button, LargeButton } from './components/Button/Button';
+export { Button, LargeButton, VerticalButton } from './components/Button/Button';
 export { default as usePeer } from './hooks/peer';
 export type { SenderType, PeerEvent, PeerErrorType, PeerStatus, BuiltinEvent, Connection, PeerConnectionType, } from './services/peer2peer/types';
 export { default as Peer2Peer } from './services/peer2peer/Peer2Peer';

package/dist/main.js

@@ -1,74 +1,75 @@
 import { default as o } from "./components/ConnectionStatus/ConnectionStatus.js";
-import { Button as t, LargeButton as f } from "./components/Button/Button.js";
-import { default as s } from "./hooks/peer.js";
-import { default as u } from "./services/peer2peer/Peer2Peer.js";
-import { useID as n } from "./hooks/id.js";
-import { useOnlyOnce as d } from "./hooks/onlyOnce.js";
-import { default as i } from "./hooks/random.js";
-import { theme as v } from "./style/theme.js";
-import { default as g } from "./util/randomId.js";
-import { canvasFromDataTransfer as P, canvasFromFile as S, canvasFromImage as B, canvasFromURL as y, canvasesFromFiles as T, cropTo as b, urlFromDataTransfer as A } from "./util/canvas.js";
-import { createZipBlob as D, loadZipFile as M, saveZipFile as R } from "./util/zip.js";
-import { useTabActive as Z } from "./hooks/useTabActive.js";
-import { default as h } from "./components/Spinner/Spinner.js";
-import { default as w } from "./components/Privacy/Privacy.js";
-import { default as N } from "./components/BusyButton/BusyButton.js";
-import { default as U } from "./components/AlertPara/AlertPara.js";
+import { Button as t, LargeButton as f, VerticalButton as m } from "./components/Button/Button.js";
+import { default as p } from "./hooks/peer.js";
+import { default as l } from "./services/peer2peer/Peer2Peer.js";
+import { useID as x } from "./hooks/id.js";
+import { useOnlyOnce as c } from "./hooks/onlyOnce.js";
+import { default as F } from "./hooks/random.js";
+import { theme as I } from "./style/theme.js";
+import { default as B } from "./util/randomId.js";
+import { canvasFromDataTransfer as P, canvasFromFile as S, canvasFromImage as y, canvasFromURL as T, canvasesFromFiles as b, cropTo as A, urlFromDataTransfer as C } from "./util/canvas.js";
+import { createZipBlob as M, loadZipFile as R, saveZipFile as W } from "./util/zip.js";
+import { useTabActive as O } from "./hooks/useTabActive.js";
+import { default as k } from "./components/Spinner/Spinner.js";
+import { default as E } from "./components/Privacy/Privacy.js";
+import { default as Q } from "./components/BusyButton/BusyButton.js";
+import { default as V } from "./components/AlertPara/AlertPara.js";
 import { default as q } from "./components/QRCode/QRCode.js";
 import { default as G } from "./components/Webcam/Webcam.js";
 import { default as J } from "./components/ContentLoader/ContentLoader.js";
-import { default as V } from "./components/WorkflowLayout/Layout.js";
-import { extractNodesFromElements as Y, generateLines as _ } from "./components/WorkflowLayout/lines.js";
-import { Widget as ee } from "./components/WorkflowLayout/Widget.js";
-import { S as oe } from "./SvgLayer-DQQ6Pb5G.js";
-import { default as te } from "./components/LangSelect/LangSelect.js";
-import { default as me } from "./components/IconMenu/Spacer.js";
-import { default as pe } from "./components/IconMenu/IconMenu.js";
-import { default as le } from "./components/IconMenu/IconMenuInline.js";
-import { default as xe } from "./components/IconMenu/Item.js";
-import { default as ce } from "./components/PercentageBar/PercentageBar.js";
-import { default as Fe } from "./components/PieScore/PieScore.js";
-import { default as Ie } from "./components/Application/Application.js";
+import { default as X } from "./components/WorkflowLayout/Layout.js";
+import { extractNodesFromElements as _, generateLines as $ } from "./components/WorkflowLayout/lines.js";
+import { Widget as re } from "./components/WorkflowLayout/Widget.js";
+import { S as ae } from "./SvgLayer-DQQ6Pb5G.js";
+import { default as fe } from "./components/LangSelect/LangSelect.js";
+import { default as se } from "./components/IconMenu/Spacer.js";
+import { default as ue } from "./components/IconMenu/IconMenu.js";
+import { default as ne } from "./components/IconMenu/IconMenuInline.js";
+import { default as de } from "./components/IconMenu/Item.js";
+import { default as ie } from "./components/PercentageBar/PercentageBar.js";
+import { default as ve } from "./components/PieScore/PieScore.js";
+import { default as ge } from "./components/Application/Application.js";
 export {
-  U as AlertPara,
-  Ie as Application,
-  N as BusyButton,
+  V as AlertPara,
+  ge as Application,
+  Q as BusyButton,
   t as Button,
   o as ConnectionStatus,
   J as ContentLoader,
-  pe as IconMenu,
-  le as IconMenuInline,
-  xe as IconMenuItem,
-  te as LangSelect,
+  ue as IconMenu,
+  ne as IconMenuInline,
+  de as IconMenuItem,
+  fe as LangSelect,
   f as LargeButton,
-  u as Peer2Peer,
-  ce as PercentageBar,
-  Fe as PieScore,
-  w as Privacy,
+  l as Peer2Peer,
+  ie as PercentageBar,
+  ve as PieScore,
+  E as Privacy,
   q as QRCode,
-  me as Spacer,
-  h as Spinner,
-  oe as SvgLayer,
+  se as Spacer,
+  k as Spinner,
+  ae as SvgLayer,
+  m as VerticalButton,
   G as Webcam,
-  ee as Widget,
-  V as WorkflowLayout,
+  re as Widget,
+  X as WorkflowLayout,
   P as canvasFromDataTransfer,
   S as canvasFromFile,
-  B as canvasFromImage,
-  y as canvasFromURL,
-  T as canvasesFromFiles,
-  D as createZipBlob,
-  b as cropTo,
-  Y as extractNodesFromElements,
-  _ as generateLines,
-  M as loadZipFile,
-  g as randomId,
-  R as saveZipFile,
-  v as theme,
-  A as urlFromDataTransfer,
-  n as useID,
-  d as useOnlyOnce,
-  s as usePeer,
-  i as useRandom,
-  Z as useTabActive
+  y as canvasFromImage,
+  T as canvasFromURL,
+  b as canvasesFromFiles,
+  M as createZipBlob,
+  A as cropTo,
+  _ as extractNodesFromElements,
+  $ as generateLines,
+  R as loadZipFile,
+  B as randomId,
+  W as saveZipFile,
+  I as theme,
+  C as urlFromDataTransfer,
+  x as useID,
+  c as useOnlyOnce,
+  p as usePeer,
+  F as useRandom,
+  O as useTabActive
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genai-fi/base",
-    "version": "4.0.3",
+    "version": "4.0.5",
     "license": "MIT",
     "type": "module",
     "main": "dist/main.js",