@code0-tech/pictor 0.10.6 → 0.10.8

package/dist/components/form/EditorInput.js

@@ -1,11 +1,11 @@
 import { jsx as c } from "react/jsx-runtime";
 import e from "react";
-import { InputWrapper as B } from "./InputWrapper.js";
-import I from "@uiw/react-codemirror";
+import { InputWrapper as N } from "./InputWrapper.js";
+import x from "@uiw/react-codemirror";
 import { createTheme as p } from "@uiw/codemirror-themes";
 import { tags as t } from "../../node_modules/@lezer/highlight/dist/index.js";
 import "../../utils/contextStore.js";
-import { mergeComponentProps as x } from "../../utils/component.js";
+import { mergeComponentProps as B } from "../../utils/component.js";
 import { hashToColor as r } from "../../utils/color.js";
 import '../../assets/components/form/EditorInput.style.css';/* empty css                       */
 const A = [], L = [], P = {
@@ -21,6 +21,9 @@ const A = [], L = [], P = {
   selection: "rgba(112,179,255,0.25)",
   selectionMatch: "rgba(112,179,255,0.1)",
   fontSize: "0.8rem",
+  fontFamily: '"Inter", sans-serif',
+  letterSpacing: "-0.5px",
+  fontWeight: "400",
   gutterBackground: "transparent",
   gutterForeground: "rgba(255,255,255, 0.5)",
   gutterBorder: "transparent",
@@ -41,35 +44,35 @@ const A = [], L = [], P = {
 }, {
   tag: t.number,
   color: r("Number")
-}], Y = p({
+}], F = p({
   theme: "light",
   settings: u,
   styles: h
-}), F = e.memo((d) => {
+}), Y = e.memo((f) => {
   const {
-    title: f,
-    right: E,
-    left: T,
-    rightType: b,
+    title: d,
+    right: T,
+    left: b,
+    rightType: E,
     leftType: S,
     language: o,
     description: _,
     extensions: n = A,
     tokenStyles: a = L,
-    formValidation: s,
-    onChange: i,
+    formValidation: i,
+    onChange: g,
     wrapperComponent: k,
-    ...g
-  } = d, C = e.useMemo(() => o ? [...n, o] : n, [n, o]), M = e.useMemo(() => a.length === 0 ? Y : p({
+    ...l
+  } = f, y = e.useMemo(() => [...o ? [...n, o] : n], [n, o]), C = e.useMemo(() => a.length === 0 ? F : p({
     theme: "light",
     settings: u,
     styles: [...h, ...a]
-  }), [a]), m = s?.setValue, y = e.useCallback((l) => {
-    m?.(l), i?.(l);
-  }, [m, i]), N = e.useMemo(() => x("editor-input", g), [g]);
-  return /* @__PURE__ */ c(B, { title: f, description: _, right: E, left: T, rightType: b, leftType: S, formValidation: s, wrapperComponent: k, children: /* @__PURE__ */ c(I, { extensions: C, onChange: y, theme: M, ...N, basicSetup: P }) });
+  }), [a]), m = i?.setValue, M = e.useCallback((s) => {
+    m?.(s), g?.(s);
+  }, [m, g]), I = e.useMemo(() => B("editor-input", l), [l]);
+  return /* @__PURE__ */ c(N, { title: d, description: _, right: T, left: b, rightType: E, leftType: S, formValidation: i, wrapperComponent: k, children: /* @__PURE__ */ c(x, { extensions: y, onChange: M, theme: C, indentWithTab: !1, ...I, basicSetup: P }) });
 });
-F.displayName = "EditorInput";
+Y.displayName = "EditorInput";
 export {
-  F as EditorInput
+  Y as EditorInput
 };

package/dist/components/form/PasswordInput.js

@@ -1,68 +1,54 @@
-import { jsxs as i, Fragment as M, jsx as t } from "react/jsx-runtime";
-import u from "react";
-import { Input as V } from "./Input.js";
-import { IconX as s, IconCheck as c, IconEye as x } from "@tabler/icons-react";
-import { Button as p } from "../button/Button.js";
-import { clearInputElement as w } from "./Input.utils.js";
-import { Flex as o } from "../flex/Flex.js";
-import { Text as a } from "../text/Text.js";
-const v = u.forwardRef((n, e) => {
-  e = e || u.useRef(null);
+import { jsxs as l, Fragment as y, jsx as n } from "react/jsx-runtime";
+import c from "react";
+import { Input as b } from "./Input.js";
+import { IconEye as I, IconX as R } from "@tabler/icons-react";
+import { Button as u } from "../button/Button.js";
+import { clearInputElement as P } from "./Input.utils.js";
+import { Flex as z } from "../flex/Flex.js";
+import { Progress as D } from "../progress/Progress.js";
+import { InputMessage as A } from "./InputMessage.js";
+const L = c.forwardRef((r, t) => {
+  t = t || c.useRef(null);
   const {
-    clearable: m = !0,
-    visible: h = !0,
-    right: g,
-    formValidation: r,
+    clearable: p = !0,
+    visible: d = !0,
+    right: m,
+    formValidation: s,
     ...f
-  } = n, z = (l) => (w(e.current), l.stopPropagation(), l.preventDefault(), !1), y = (l) => (e.current instanceof HTMLInputElement && (e.current.type === "password" ? e.current.type = "text" : e.current.type === "text" && (e.current.type = "password")), !1), d = [g];
-  return h && d.push(/* @__PURE__ */ t(p, { variant: "none", onClick: (l) => y(), children: /* @__PURE__ */ t(x, { size: 13 }) })), m && d.push(/* @__PURE__ */ t(p, { variant: "none", onClick: (l) => z(l), children: /* @__PURE__ */ t(s, { size: 13 }) })), /* @__PURE__ */ i(M, { children: [
-    /* @__PURE__ */ t(V, { right: d, rightType: "action", type: "password", ref: e, ...r ? {
-      formValidation: {
-        setValue: r.setValue,
-        valid: r.valid
-      }
+  } = r, h = (e) => (P(t.current), e.stopPropagation(), e.preventDefault(), !1), g = (e) => (t.current instanceof HTMLInputElement && (t.current.type === "password" ? t.current.type = "text" : t.current.type === "text" && (t.current.type = "password")), e.stopPropagation(), e.preventDefault(), !1), o = [m];
+  d && o.push(/* @__PURE__ */ n(u, { variant: "none", onClick: (e) => g(e), children: /* @__PURE__ */ n(I, { size: 13 }) })), p && o.push(/* @__PURE__ */ n(u, { variant: "none", onClick: (e) => h(e), children: /* @__PURE__ */ n(R, { size: 13 }) }));
+  const a = s?.notValidMessage ?? "", i = /^[1-5]+$/.test(a), x = a.length, M = Math.max(0, 5 - x) / 5 * 100;
+  return /* @__PURE__ */ l(y, { children: [
+    /* @__PURE__ */ n(b, { right: o, rightType: "action", type: "password", ref: t, ...s ? {
+      formValidation: i ? {
+        setValue: s.setValue,
+        valid: s.valid
+      } : s
     } : {}, ...f }),
-    !r?.valid && /* @__PURE__ */ i(o, { mt: 0.7, style: {
+    i && !s?.valid && /* @__PURE__ */ l(z, { mt: 0.7, style: {
       flexDirection: "column"
     }, children: [
-      /* @__PURE__ */ i(o, { align: "center", style: {
-        gap: "0.35rem"
-      }, children: [
-        r?.notValidMessage?.includes("1") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
-        /* @__PURE__ */ t(a, { children: "Must be at least 8 characters" })
-      ] }),
-      /* @__PURE__ */ i(o, { align: "center", style: {
-        gap: "0.35rem"
-      }, children: [
-        r?.notValidMessage?.includes("2") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
-        /* @__PURE__ */ t(a, { children: "Must include a lowercase letter" })
-      ] }),
-      /* @__PURE__ */ i(o, { align: "center", style: {
-        gap: "0.35rem"
-      }, children: [
-        r?.notValidMessage?.includes("3") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
-        /* @__PURE__ */ t(a, { children: "Must include an uppercase letter" })
-      ] }),
-      /* @__PURE__ */ i(o, { align: "center", style: {
-        gap: "0.35rem"
-      }, children: [
-        r?.notValidMessage?.includes("4") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
-        /* @__PURE__ */ t(a, { children: "Must include a number" })
-      ] }),
-      /* @__PURE__ */ i(o, { align: "center", style: {
-        gap: "0.35rem"
-      }, children: [
-        r?.notValidMessage?.includes("5") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
-        /* @__PURE__ */ t(a, { children: "Must include a special character" })
-      ] })
+      /* @__PURE__ */ n(D, { value: M, max: 100, color: "linear-gradient(to right, #D90429 0%, #29BF12 100%)" }),
+      (() => {
+        const e = ["2", "3", "4", "5", "1"].find((w) => a.includes(w));
+        if (!e) return null;
+        const V = {
+          1: "Must be at least 8 characters",
+          2: "Must include a lowercase letter",
+          3: "Must include an uppercase letter",
+          4: "Must include a number",
+          5: "Must include a special character"
+        }[e];
+        return /* @__PURE__ */ n(A, { children: V });
+      })()
     ] })
   ] });
-}), A = (n) => {
-  if (!n) return "12345";
-  let e = null;
-  return n.length < 8 && (e = (e ?? "") + "1"), /[a-z]/.test(n) || (e = (e ?? "") + "2"), /[A-Z]/.test(n) || (e = (e ?? "") + "3"), /[0-9]/.test(n) || (e = (e ?? "") + "4"), /[^A-Za-z0-9]/.test(n) || (e = (e ?? "") + "5"), e;
+}), X = (r) => {
+  if (!r) return "12345";
+  let t = null;
+  return r.length < 8 && (t = (t ?? "") + "1"), /[a-z]/.test(r) || (t = (t ?? "") + "2"), /[A-Z]/.test(r) || (t = (t ?? "") + "3"), /[0-9]/.test(r) || (t = (t ?? "") + "4"), /[^A-Za-z0-9]/.test(r) || (t = (t ?? "") + "5"), t;
 };
 export {
-  v as PasswordInput,
-  A as passwordValidation
+  L as PasswordInput,
+  X as passwordValidation
 };

package/dist/components/form/useForm.js

@@ -1,24 +1,24 @@
-import j, { useState as g, useRef as y, useCallback as w, useEffect as P } from "react";
-function o(i, e, t) {
-  return (e = O(e)) in i ? Object.defineProperty(i, e, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : i[e] = t, i;
+import O, { useState as w, useRef as b, useCallback as M, useEffect as F } from "react";
+function d(r, e, t) {
+  return (e = R(e)) in r ? Object.defineProperty(r, e, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : r[e] = t, r;
 }
-function O(i) {
-  var e = F(i, "string");
+function R(r) {
+  var e = _(r, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function F(i, e) {
-  if (typeof i != "object" || !i) return i;
-  var t = i[Symbol.toPrimitive];
+function _(r, e) {
+  if (typeof r != "object" || !r) return r;
+  var t = r[Symbol.toPrimitive];
   if (t !== void 0) {
-    var n = t.call(i, e);
-    if (typeof n != "object") return n;
+    var i = t.call(r, e);
+    if (typeof i != "object") return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (e === "string" ? String : Number)(i);
+  return (e === "string" ? String : Number)(r);
 }
-class f {
-  constructor(e, t, n, l = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map()) {
-    o(this, "changeValue", void 0), o(this, "currentValues", void 0), o(this, "currentValidations", void 0), o(this, "shouldValidate", void 0), o(this, "cachedMessages", void 0), this.changeValue = e, this.currentValues = t, this.currentValidations = n, this.shouldValidate = l, this.cachedMessages = u;
+class p {
+  constructor(e, t, i, l = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map()) {
+    d(this, "changeValue", void 0), d(this, "currentValues", void 0), d(this, "currentValidations", void 0), d(this, "shouldValidate", void 0), d(this, "cachedMessages", void 0), this.changeValue = e, this.currentValues = t, this.currentValidations = i, this.shouldValidate = l, this.cachedMessages = s;
   }
   isValid() {
     if (!this.currentValidations) return !0;
@@ -30,15 +30,15 @@ class f {
     return !0;
   }
   getInputProps(e) {
-    const t = this.currentValues[e], n = t ?? null, l = e, u = this.currentValidations && this.currentValidations[e] ? this.currentValidations[e] : (s) => null;
+    const t = this.currentValues[e], i = t ?? null, l = e, s = this.currentValidations && this.currentValidations[e] ? this.currentValidations[e] : (u) => null;
     let a = null;
-    return this.shouldValidate.has(e) ? (a = u(t, this.currentValues), this.cachedMessages.set(e, a)) : a = this.cachedMessages.get(e) ?? null, {
+    return this.shouldValidate.has(e) ? (a = s(t, this.currentValues), this.cachedMessages.set(e, a)) : a = this.cachedMessages.get(e) ?? null, {
       // @ts-ignore – z.B. wenn dein Input `defaultValue` kennt
-      defaultValue: n ?? void 0,
-      initialValue: n ?? void 0,
+      defaultValue: i ?? void 0,
+      initialValue: i ?? void 0,
       formValidation: {
-        setValue: (s) => {
-          this.changeValue(l, s);
+        setValue: (u) => {
+          this.changeValue(l, u);
         },
         notValidMessage: a,
         valid: a === null
@@ -49,28 +49,30 @@ class f {
     };
   }
 }
-const _ = (i) => {
+const I = (r) => {
   const {
     initialValues: e,
     validate: t = {},
-    truthyValidationBeforeSubmit: n = !0,
+    truthyValidationBeforeSubmit: i = !0,
     useInitialValidation: l = !0,
-    onSubmit: u
-  } = i, a = j.useMemo(() => e, [e]), [s, p] = g(a), d = y(/* @__PURE__ */ new Map()), c = w((r, h) => {
-    p((V) => ({
-      ...V,
-      [r]: h
-    }));
-  }, []), [b, v] = g(new f(c, s, t, l ? new Map(Object.keys(a).map((r) => [r, !0])) : /* @__PURE__ */ new Map(), d.current));
-  P(() => {
-    p(a), v(new f(c, a, t, l ? new Map(Object.keys(a).map((r) => [r, !0])) : /* @__PURE__ */ new Map(), d.current));
+    onSubmit: s
+  } = r, a = O.useMemo(() => e, [e]), [u, v] = w(a), V = b(/* @__PURE__ */ new Map()), c = b(u);
+  c.current = u;
+  const h = M((n, f) => {
+    c.current = {
+      ...c.current,
+      [n]: f
+    }, v(c.current);
+  }, []), [S, m] = w(() => new p(h, u, t, l ? new Map(Object.keys(a).map((n) => [n, !0])) : /* @__PURE__ */ new Map(), V.current));
+  F(() => {
+    c.current = a, v(a), m(new p(h, a, t, l ? new Map(Object.keys(a).map((n) => [n, !0])) : /* @__PURE__ */ new Map(), V.current));
   }, [a]);
-  const M = w((r, h = !0) => {
-    const V = r && new Set(Object.keys(s)).has(String(r)) ? /* @__PURE__ */ new Map([[r, !0]]) : new Map(Object.keys(s).map((S) => [String(S), !0])), m = new f(c, s, t, V, d.current);
-    v(m), h && !new Set(Object.keys(s)).has(String(r)) && u && (!n || m.isValid()) && u(s);
-  }, [c, t, u, n, s]);
-  return [b, M, s];
+  const j = M((n, f = !0) => {
+    const o = c.current, y = n && new Set(Object.keys(o)).has(String(n)) ? /* @__PURE__ */ new Map([[n, !0]]) : new Map(Object.keys(o).map((P) => [String(P), !0])), g = new p(h, o, t, y, V.current);
+    m(g), f && !new Set(Object.keys(o)).has(String(n)) && s && (!i || g.isValid()) && s(o);
+  }, [h, t, s, i]);
+  return [S, j, u];
 };
 export {
-  _ as useForm
+  I as useForm
 };

package/dist/components/json-view/JsonView.js

@@ -1,14 +1,15 @@
-import { jsx as l, jsxs as N } from "react/jsx-runtime";
-import { c as k } from "../../_virtual/compiler-runtime.js";
-import b from "@uiw/react-json-view";
-import { IconChevronRight as T, IconCheck as z, IconCopy as I } from "@tabler/icons-react";
+import { jsx as l, jsxs as _ } from "react/jsx-runtime";
+import { c as T } from "../../_virtual/compiler-runtime.js";
+import u from "@uiw/react-json-view";
+import { IconChevronRight as C, IconCheck as N, IconCopy as k } from "@tabler/icons-react";
 import "../../utils/contextStore.js";
 import "react";
-import { mergeComponentProps as E } from "../../utils/component.js";
+import { mergeComponentProps as z } from "../../utils/component.js";
 import { hashToColor as r } from "../../utils/color.js";
 import '../../assets/components/json-view/JsonView.style.css';/* empty css                    */
+import { Text as I } from "../text/Text.js";
 import { AnimatePresence as S } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
-import { motion as V } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { motion as E } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
 const q = {
   "--w-rjv-font-family": '"Inter", sans-serif',
   "--w-rjv-font-size": "0.8rem",
@@ -36,54 +37,58 @@ const q = {
   "--w-rjv-type-null-color": r("Null"),
   "--w-rjv-type-nan-color": r("Number"),
   "--w-rjv-type-undefined-color": r("Null")
-}, K = (a) => {
-  const e = k.c(23);
-  let o, i, n, c, m, t;
-  if (e[0] !== a) {
+}, K = (n) => {
+  const e = T.c(24);
+  let o, i, s, p, w, t;
+  if (e[0] !== n) {
     const {
-      displayObjectSize: u,
-      displayDataTypes: g,
-      enableClipboard: h,
-      indentWidth: x,
-      value: _,
-      ...C
-    } = a;
-    t = _, i = u === void 0 ? !1 : u, o = g === void 0 ? !1 : g, n = h === void 0 ? !0 : h, c = x === void 0 ? 12.8 : x, m = E("json-view", C), e[0] = a, e[1] = o, e[2] = i, e[3] = n, e[4] = c, e[5] = m, e[6] = t;
+      displayObjectSize: a,
+      displayDataTypes: f,
+      enableClipboard: c,
+      indentWidth: g,
+      value: h,
+      ...x
+    } = n;
+    t = h, i = a === void 0 ? !1 : a, o = f === void 0 ? !1 : f, s = c === void 0 ? !0 : c, p = g === void 0 ? 12.8 : g, w = z("json-view", x), e[0] = n, e[1] = o, e[2] = i, e[3] = s, e[4] = p, e[5] = w, e[6] = t;
   } else
-    o = e[1], i = e[2], n = e[3], c = e[4], m = e[5], t = e[6];
-  const s = m;
+    o = e[1], i = e[2], s = e[3], p = e[4], w = e[5], t = e[6];
+  const d = w;
+  if (t == null || typeof t != "object") {
+    let a;
+    e[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (a = r("Text"), e[7] = a) : a = e[7];
+    const f = String(t);
+    let c;
+    return e[8] !== f ? (c = /* @__PURE__ */ l(I, { c: a, children: f }), e[8] = f, e[9] = c) : c = e[9], c;
+  }
+  let m;
+  e[10] !== d.style ? (m = d.style ?? {}, e[10] = d.style, e[11] = m) : m = e[11];
   let v;
-  e[7] !== t ? (v = t == null || typeof t != "object" ? [t] : t, e[7] = t, e[8] = v) : v = e[8];
-  const y = v;
-  let p;
-  e[9] !== s.style ? (p = s.style ?? {}, e[9] = s.style, e[10] = p) : p = e[10];
-  let d;
-  e[11] !== p ? (d = {
+  e[12] !== m ? (v = {
     ...q,
-    ...p
-  }, e[11] = p, e[12] = d) : d = e[12];
-  let w, j;
-  e[13] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = /* @__PURE__ */ l(b.Arrow, { render: B }), j = /* @__PURE__ */ l(b.Copied, { render: J }), e[13] = w, e[14] = j) : (w = e[13], j = e[14]);
-  let f;
-  return e[15] !== o || e[16] !== i || e[17] !== n || e[18] !== c || e[19] !== s || e[20] !== y || e[21] !== d ? (f = /* @__PURE__ */ N(b, { displayObjectSize: i, displayDataTypes: o, enableClipboard: n, indentWidth: c, ...s, value: y, style: d, children: [
-    w,
-    j
-  ] }), e[15] = o, e[16] = i, e[17] = n, e[18] = c, e[19] = s, e[20] = y, e[21] = d, e[22] = f) : f = e[22], f;
+    ...m
+  }, e[12] = m, e[13] = v) : v = e[13];
+  let j, y;
+  e[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (j = /* @__PURE__ */ l(u.Arrow, { render: B }), y = /* @__PURE__ */ l(u.Copied, { render: J }), e[14] = j, e[15] = y) : (j = e[14], y = e[15]);
+  let b;
+  return e[16] !== o || e[17] !== i || e[18] !== s || e[19] !== p || e[20] !== d || e[21] !== v || e[22] !== t ? (b = /* @__PURE__ */ _(u, { displayObjectSize: i, displayDataTypes: o, enableClipboard: s, indentWidth: p, ...d, value: t, style: v, children: [
+    j,
+    y
+  ] }), e[16] = o, e[17] = i, e[18] = s, e[19] = p, e[20] = d, e[21] = v, e[22] = t, e[23] = b) : b = e[23], b;
 };
-function B(a) {
+function B(n) {
   const {
     "data-expanded": e,
     ...o
-  } = a;
-  return /* @__PURE__ */ l("span", { ...o, className: "json-view__arrow", "data-expanded": e, children: /* @__PURE__ */ l(T, { size: 13 }) });
+  } = n;
+  return /* @__PURE__ */ l("span", { ...o, className: "json-view__arrow", "data-expanded": e, children: /* @__PURE__ */ l(C, { size: 13 }) });
 }
-function J(a) {
+function J(n) {
   const {
     "data-copied": e,
     onClick: o,
     ...i
-  } = a;
-  return /* @__PURE__ */ l("span", { ...i, onClick: o, className: "json-view__copy", "data-copied": e, children: /* @__PURE__ */ l(S, { mode: "wait", initial: !1, children: /* @__PURE__ */ l(V.span, { initial: {
+  } = n;
+  return /* @__PURE__ */ l("span", { ...i, onClick: o, className: "json-view__copy", "data-copied": e, children: /* @__PURE__ */ l(S, { mode: "wait", initial: !1, children: /* @__PURE__ */ l(E.span, { initial: {
     opacity: 0,
     scale: 0.5,
     filter: "blur(0.35rem)"
@@ -100,7 +105,7 @@ function J(a) {
     ease: "easeIn"
   }, style: {
     display: "inline-flex"
-  }, children: e ? /* @__PURE__ */ l(z, { size: 13 }) : /* @__PURE__ */ l(I, { size: 13 }) }, e ? "check" : "copy") }) });
+  }, children: e ? /* @__PURE__ */ l(N, { size: 13 }) : /* @__PURE__ */ l(k, { size: 13 }) }, e ? "check" : "copy") }) });
 }
 export {
   K as JsonView

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.10.6",
+  "version": "0.10.8",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {