@kvell-group/ui 1.6.12 → 1.7.0

package/dist/assets/Button.css

@@ -1 +1 @@
-._root_gdr8x_1{background-color:green;border-radius:12px;width:200px}._inner_gdr8x_7{background-color:red}._label_gdr8x_11{color:#ff0}
+.m_87cf2631{background-color:transparent;cursor:pointer;border:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--mantine-font-size-md);text-align:left;text-decoration:none;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}:where([dir=rtl]) .m_87cf2631{text-align:right}.m_77c9d27d{--button-height-xs: 30px;--button-height-sm: 36px;--button-height-md: 42px;--button-height-lg: 50px;--button-height-xl: 60px;--button-height-compact-xs: 22px;--button-height-compact-sm: 26px;--button-height-compact-md: 30px;--button-height-compact-lg: 34px;--button-height-compact-xl: 40px;--button-padding-x-xs: 14px;--button-padding-x-sm: 18px;--button-padding-x-md: 22px;--button-padding-x-lg: 26px;--button-padding-x-xl: 32px;--button-padding-x-compact-xs: 7px;--button-padding-x-compact-sm: 8px;--button-padding-x-compact-md: 10px;--button-padding-x-compact-lg: 12px;--button-padding-x-compact-xl: 14px;--button-height: var(--button-height-sm);--button-padding-x: var(--button-padding-x-sm);--button-color: var(--mantine-color-white);-webkit-user-select:none;-moz-user-select:none;user-select:none;font-weight:600;position:relative;line-height:1;text-align:center;overflow:hidden;width:auto;cursor:pointer;display:inline-block;border-radius:var(--button-radius, var(--mantine-radius-default));font-size:var(--button-fz, var(--mantine-font-size-sm));background:var(--button-bg, var(--mantine-primary-color-filled));border:var(--button-bd, calc(.0625rem * var(--mantine-scale)) solid transparent);color:var(--button-color, var(--mantine-color-white));height:var(--button-height, var(--button-height-sm));padding-inline:var(--button-padding-x, var(--button-padding-x-sm));vertical-align:middle}.m_77c9d27d:where([data-block]){display:block;width:100%}.m_77c9d27d:where([data-with-left-section]){padding-inline-start:calc(var(--button-padding-x) / 1.5)}.m_77c9d27d:where([data-with-right-section]){padding-inline-end:calc(var(--button-padding-x) / 1.5)}.m_77c9d27d:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){cursor:not-allowed;border:1px solid transparent;transform:none}:where([data-mantine-color-scheme=light]) .m_77c9d27d:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){color:var(--mantine-color-gray-5);background:var(--mantine-color-gray-1)}:where([data-mantine-color-scheme=dark]) .m_77c9d27d:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){color:var(--mantine-color-dark-3);background:var(--mantine-color-dark-6)}.m_77c9d27d:before{content:"";pointer-events:none;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:var(--button-radius, var(--mantine-radius-default));transform:translateY(-100%);opacity:0;filter:blur(12px);transition:transform .15s ease,opacity .1s ease}:where([data-mantine-color-scheme=light]) .m_77c9d27d:before{background-color:#ffffff26}:where([data-mantine-color-scheme=dark]) .m_77c9d27d:before{background-color:#00000026}.m_77c9d27d:where([data-loading]){cursor:not-allowed;transform:none}.m_77c9d27d:where([data-loading]):before{transform:translateY(0);opacity:1}.m_77c9d27d:where([data-loading]) .m_80f1301b{opacity:0;transform:translateY(100%)}@media (hover: hover){.m_77c9d27d:hover:where(:not([data-loading],:disabled,[data-disabled])){background-color:var(--button-hover, var(--mantine-primary-color-filled-hover));color:var(--button-hover-color, var(--button-color))}}@media (hover: none){.m_77c9d27d:active:where(:not([data-loading],:disabled,[data-disabled])){background-color:var(--button-hover, var(--mantine-primary-color-filled-hover));color:var(--button-hover-color, var(--button-color))}}.m_80f1301b{display:flex;align-items:center;justify-content:var(--button-justify, center);height:100%;overflow:visible;transition:transform .15s ease,opacity .1s ease}.m_811560b9{white-space:nowrap;height:100%;overflow:hidden;display:flex;align-items:center;opacity:1}.m_811560b9:where([data-loading]){opacity:.2}.m_a74036a{display:flex;align-items:center}.m_a74036a:where([data-position=left]){margin-inline-end:var(--mantine-spacing-xs)}.m_a74036a:where([data-position=right]){margin-inline-start:var(--mantine-spacing-xs)}.m_a25b86ee{position:absolute;left:50%;top:50%}.m_80d6d844{--button-border-width: 1px;display:flex}.m_80d6d844 :where(.m_77c9d27d):focus{position:relative;z-index:1}.m_80d6d844[data-orientation=horizontal]{flex-direction:row}.m_80d6d844[data-orientation=horizontal] .m_77c9d27d:not(:only-child):first-child,.m_80d6d844[data-orientation=horizontal] .m_70be2a01:not(:only-child):first-child{border-end-end-radius:0;border-start-end-radius:0;border-inline-end-width:calc(var(--button-border-width) / 2)}.m_80d6d844[data-orientation=horizontal] .m_77c9d27d:not(:only-child):last-child,.m_80d6d844[data-orientation=horizontal] .m_70be2a01:not(:only-child):last-child{border-end-start-radius:0;border-start-start-radius:0;border-inline-start-width:calc(var(--button-border-width) / 2)}.m_80d6d844[data-orientation=horizontal] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child),.m_80d6d844[data-orientation=horizontal] .m_70be2a01:not(:only-child):not(:first-child):not(:last-child){border-radius:0;border-inline-width:calc(var(--button-border-width) / 2)}.m_80d6d844[data-orientation=vertical]{flex-direction:column}.m_80d6d844[data-orientation=vertical] .m_77c9d27d:not(:only-child):first-child,.m_80d6d844[data-orientation=vertical] .m_70be2a01:not(:only-child):first-child{border-end-start-radius:0;border-end-end-radius:0;border-bottom-width:calc(var(--button-border-width) / 2)}.m_80d6d844[data-orientation=vertical] .m_77c9d27d:not(:only-child):last-child,.m_80d6d844[data-orientation=vertical] .m_70be2a01:not(:only-child):last-child{border-start-start-radius:0;border-start-end-radius:0;border-top-width:calc(var(--button-border-width) / 2)}.m_80d6d844[data-orientation=vertical] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child),.m_80d6d844[data-orientation=vertical] .m_70be2a01:not(:only-child):not(:first-child):not(:last-child){border-radius:0;border-bottom-width:calc(var(--button-border-width) / 2);border-top-width:calc(var(--button-border-width) / 2)}.m_70be2a01{--section-height-xs: 30px;--section-height-sm: 36px;--section-height-md: 42px;--section-height-lg: 50px;--section-height-xl: 60px;--section-height-compact-xs: 22px;--section-height-compact-sm: 26px;--section-height-compact-md: 30px;--section-height-compact-lg: 34px;--section-height-compact-xl: 40px;--section-padding-x-xs: 14px;--section-padding-x-sm: 18px;--section-padding-x-md: 22px;--section-padding-x-lg: 26px;--section-padding-x-xl: 32px;--section-padding-x-compact-xs: 7px;--section-padding-x-compact-sm: 8px;--section-padding-x-compact-md: 10px;--section-padding-x-compact-lg: 12px;--section-padding-x-compact-xl: 14px;--section-height: var(--section-height-sm);--section-padding-x: var(--section-padding-x-sm);--section-color: var(--mantine-color-white);font-weight:600;width:auto;border-radius:var(--section-radius, var(--mantine-radius-default));font-size:var(--section-fz, var(--mantine-font-size-sm));background:var(--section-bg, var(--mantine-primary-color-filled));border:var(--section-bd, calc(.0625rem * var(--mantine-scale)) solid transparent);color:var(--section-color, var(--mantine-color-white));height:var(--section-height, var(--section-height-sm));padding-inline:var(--section-padding-x, var(--section-padding-x-sm));vertical-align:middle;line-height:1;display:inline-flex;align-items:center;justify-content:center}._root_1w9zb_1{background-color:var(--mantine-color-primary-0);border-radius:12px;color:var(--mantine-color-white);height:3rem;font-weight:500}

package/dist/components/Button/Button.js

@@ -1,6 +1,6 @@
-import { jsx as f, jsxs as k, Fragment as q } from "react/jsx-runtime";
-import { r as P, u as F, h as er, i as or, j as ar, l as ir, k as tt, a as sr, p as dt, m as cr, n as pr, o as mr } from "../../MantineThemeProvider-CyD9KzqB.js";
-import { useState as Q, useRef as j, useEffect as z, useId as ur, forwardRef as R } from "react";
+import { jsx as f, jsxs as j, Fragment as q } from "react/jsx-runtime";
+import { r as R, u as k, h as er, i as or, j as ar, l as ir, k as tt, a as sr, p as dt, m as cr, n as pr, o as mr } from "../../MantineThemeProvider-CyD9KzqB.js";
+import { useState as Q, useRef as M, useEffect as W, useId as ur, forwardRef as P } from "react";
 import lr from "react-dom";
 import '../../assets/Button.css';function fr(t) {
   return t.replace(/[A-Z]/g, (r) => `-${r.toLowerCase()}`);
@@ -21,7 +21,7 @@ function yt(t) {
 }
 function A(t, r = "size", n = !0) {
   if (t !== void 0)
-    return yt(t) ? n ? P(t) : t : `var(--${r}-${t})`;
+    return yt(t) ? n ? R(t) : t : `var(--${r}-${t})`;
 }
 function gt(t) {
   return t === void 0 ? "var(--mantine-radius-default)" : A(t, "mantine-radius");
@@ -44,39 +44,39 @@ function gr(t, r, { getInitialValueInEffect: n } = {
 }) {
   const [e, o] = Q(
     n ? r : yr(t)
-  ), a = j(null);
-  return z(() => {
+  ), a = M(null);
+  return W(() => {
     if ("matchMedia" in window)
       return a.current = window.matchMedia(t), o(a.current.matches), dr(a.current, (i) => o(i.matches));
   }, [t]), e;
 }
-function hr(t, r) {
-  const n = j(!1);
-  z(
+function br(t, r) {
+  const n = M(!1);
+  W(
     () => () => {
       n.current = !1;
     },
     []
-  ), z(() => {
+  ), W(() => {
     if (n.current)
       return t();
     n.current = !0;
   }, r);
 }
-function br(t, r) {
+function hr(t, r) {
   return gr("(prefers-reduced-motion: reduce)", t, r);
 }
-function ht(t) {
+function bt(t) {
   var r, n, e = "";
   if (typeof t == "string" || typeof t == "number") e += t;
   else if (typeof t == "object") if (Array.isArray(t)) {
     var o = t.length;
-    for (r = 0; r < o; r++) t[r] && (n = ht(t[r])) && (e && (e += " "), e += n);
+    for (r = 0; r < o; r++) t[r] && (n = bt(t[r])) && (e && (e += " "), e += n);
   } else for (n in t) t[n] && (e && (e += " "), e += n);
   return e;
 }
 function L() {
-  for (var t, r, n = 0, e = "", o = arguments.length; n < o; n++) (t = arguments[n]) && (r = ht(t)) && (e && (e += " "), e += r);
+  for (var t, r, n = 0, e = "", o = arguments.length; n < o; n++) (t = arguments[n]) && (r = bt(t)) && (e && (e += " "), e += r);
   return e;
 }
 const Sr = {};
@@ -102,13 +102,13 @@ const Nr = {
   auto: "mantine-focus-auto",
   never: "mantine-focus-never"
 };
-function xr({ theme: t, options: r, unstyled: n }) {
+function wr({ theme: t, options: r, unstyled: n }) {
   return L(
     (r == null ? void 0 : r.focusable) && !n && (t.focusClassName || Nr[t.focusRing]),
     (r == null ? void 0 : r.active) && !n && t.activeClassName
   );
 }
-function wr({
+function xr({
   selector: t,
   stylesCtx: r,
   options: n,
@@ -145,7 +145,7 @@ function Tr({
 }) {
   return e === !1 ? [] : t.map((o) => `${r}-${o}-${n}`);
 }
-function Pr({
+function Rr({
   themeName: t,
   theme: r,
   selector: n,
@@ -164,7 +164,7 @@ function Pr({
     }
   );
 }
-function Rr({
+function Pr({
   options: t,
   classes: r,
   selector: n,
@@ -190,12 +190,12 @@ function Cr({
   transformedStyles: d
 }) {
   return L(
-    xr({ theme: t, options: r, unstyled: s || g }),
-    Pr({ theme: t, themeName: n, selector: e, props: m, stylesCtx: u }),
-    Rr({ options: r, classes: i, selector: e, unstyled: s }),
+    wr({ theme: t, options: r, unstyled: s || g }),
+    Rr({ theme: t, themeName: n, selector: e, props: m, stylesCtx: u }),
+    Pr({ options: r, classes: i, selector: e, unstyled: s }),
     ct({ selector: e, stylesCtx: u, theme: t, classNames: a, props: m }),
     ct({ selector: e, stylesCtx: u, theme: t, classNames: d, props: m }),
-    wr({ selector: e, stylesCtx: u, options: r, props: m, theme: t }),
+    xr({ selector: e, stylesCtx: u, options: r, props: m, theme: t }),
     $r({ rootSelector: c, selector: e, className: p }),
     _r({ selector: e, classes: i, unstyled: s || g }),
     l && !g && Tr({
@@ -283,7 +283,7 @@ function Lr({
 }
 function Yr({ props: t, stylesCtx: r, themeName: n }) {
   var i;
-  const e = F(), o = (i = er()) == null ? void 0 : i();
+  const e = k(), o = (i = er()) == null ? void 0 : i();
   return {
     getTransformedStyles: (s) => o ? [
       ...s.map(
@@ -299,7 +299,7 @@ function Yr({ props: t, stylesCtx: r, themeName: n }) {
     withStylesTransform: !!o
   };
 }
-function I({
+function z({
   name: t,
   classes: r,
   props: n,
@@ -313,16 +313,16 @@ function I({
   vars: m,
   varsResolver: u
 }) {
-  const l = F(), g = or(), d = ar(), b = ir(), h = (Array.isArray(t) ? t : [t]).filter((S) => S), { withStylesTransform: x, getTransformedStyles: T } = Yr({
+  const l = k(), g = or(), d = ar(), h = ir(), b = (Array.isArray(t) ? t : [t]).filter((S) => S), { withStylesTransform: w, getTransformedStyles: T } = Yr({
     props: n,
     stylesCtx: e,
-    themeName: h
+    themeName: b
   });
   return (S, N) => ({
     className: Cr({
       theme: l,
       options: N,
-      themeName: h,
+      themeName: b,
       selector: S,
       classNamesPrefix: g,
       classNames: p,
@@ -333,12 +333,12 @@ function I({
       props: n,
       stylesCtx: e,
       withStaticClasses: d,
-      headless: b,
+      headless: h,
       transformedStyles: T([N == null ? void 0 : N.styles, c])
     }),
     style: Lr({
       theme: l,
-      themeName: h,
+      themeName: b,
       selector: S,
       options: N,
       props: n,
@@ -348,14 +348,14 @@ function I({
       style: a,
       vars: m,
       varsResolver: u,
-      headless: b,
-      withStylesTransform: x
+      headless: h,
+      withStylesTransform: w
     })
   });
 }
 function O(t, r, n) {
   var i;
-  const e = F(), o = (i = e.components[t]) == null ? void 0 : i.defaultProps, a = typeof o == "function" ? o(e) : o;
+  const e = k(), o = (i = e.components[t]) == null ? void 0 : i.defaultProps, a = typeof o == "function" ? o(e) : o;
   return { ...r, ...a, ...rt(n) };
 }
 function X(t) {
@@ -397,15 +397,15 @@ function jr(t) {
     py: l,
     pt: g,
     pb: d,
-    pl: b,
-    pr: h,
-    pe: x,
+    pl: h,
+    pr: b,
+    pe: w,
     ps: T,
     bd: S,
     bg: N,
     c: C,
     opacity: y,
-    ff: w,
+    ff: x,
     fz: v,
     fw: B,
     lts: H,
@@ -420,10 +420,10 @@ function jr(t) {
     h: Mt,
     mih: jt,
     mah: kt,
-    bgsz: Ft,
-    bgp: It,
-    bgr: Wt,
-    bga: zt,
+    bgsz: zt,
+    bgp: Ft,
+    bgr: It,
+    bga: Wt,
     pos: Gt,
     top: Dt,
     left: Ht,
@@ -454,15 +454,15 @@ function jr(t) {
     py: l,
     pt: g,
     pb: d,
-    pl: b,
-    pr: h,
-    pe: x,
+    pl: h,
+    pr: b,
+    pe: w,
     ps: T,
     bd: S,
     bg: N,
     c: C,
     opacity: y,
-    ff: w,
+    ff: x,
     fz: v,
     fw: B,
     lts: H,
@@ -477,10 +477,10 @@ function jr(t) {
     h: Mt,
     mih: jt,
     mah: kt,
-    bgsz: Ft,
-    bgp: It,
-    bgr: Wt,
-    bga: zt,
+    bgsz: zt,
+    bgp: Ft,
+    bgr: It,
+    bga: Wt,
     pos: Gt,
     top: Dt,
     left: Ht,
@@ -551,16 +551,16 @@ function et(t, r) {
   const n = dt({ color: t, theme: r });
   return n.color === "dimmed" ? "var(--mantine-color-dimmed)" : n.color === "bright" ? "var(--mantine-color-bright)" : n.variable ? `var(${n.variable})` : n.color;
 }
-function Fr(t, r) {
+function zr(t, r) {
   const n = dt({ color: t, theme: r });
   return n.isThemeColor && n.shade === void 0 ? `var(--mantine-color-${n.color}-text)` : et(t, r);
 }
-function Ir(t, r) {
+function Fr(t, r) {
   if (typeof t == "number")
-    return P(t);
+    return R(t);
   if (typeof t == "string") {
     const [n, e, ...o] = t.split(" ").filter((i) => i.trim() !== "");
-    let a = `${P(n)}`;
+    let a = `${R(n)}`;
     return e && (a += ` ${e}`), o.length > 0 && (a += ` ${et(o.join(" "), r)}`), a.trim();
   }
   return t;
@@ -572,12 +572,12 @@ const pt = {
   heading: "var(--mantine-font-family-headings)",
   headings: "var(--mantine-font-family-headings)"
 };
-function Wr(t) {
+function Ir(t) {
   return typeof t == "string" && t in pt ? pt[t] : t;
 }
-const zr = ["h1", "h2", "h3", "h4", "h5", "h6"];
+const Wr = ["h1", "h2", "h3", "h4", "h5", "h6"];
 function Gr(t, r) {
-  return typeof t == "string" && t in r.fontSizes ? `var(--mantine-font-size-${t})` : typeof t == "string" && zr.includes(t) ? `var(--mantine-${t}-font-size)` : typeof t == "number" ? P(t) : typeof t == "string" ? P(t) : t;
+  return typeof t == "string" && t in r.fontSizes ? `var(--mantine-font-size-${t})` : typeof t == "string" && Wr.includes(t) ? `var(--mantine-${t}-font-size)` : typeof t == "number" ? R(t) : typeof t == "string" ? R(t) : t;
 }
 function Dr(t) {
   return t;
@@ -587,15 +587,15 @@ function Vr(t, r) {
   return typeof t == "string" && t in r.lineHeights ? `var(--mantine-line-height-${t})` : typeof t == "string" && Hr.includes(t) ? `var(--mantine-${t}-line-height)` : t;
 }
 function Xr(t) {
-  return typeof t == "number" ? P(t) : t;
+  return typeof t == "number" ? R(t) : t;
 }
 function Ur(t, r) {
   if (typeof t == "number")
-    return P(t);
+    return R(t);
   if (typeof t == "string") {
     const n = t.replace("-", "");
     if (!(n in r.spacing))
-      return P(t);
+      return R(t);
     const e = `--mantine-spacing-${n}`;
     return t.startsWith("-") ? `calc(var(${e}) * -1)` : `var(${e})`;
   }
@@ -603,14 +603,14 @@ function Ur(t, r) {
 }
 const U = {
   color: et,
-  textColor: Fr,
+  textColor: zr,
   fontSize: Gr,
   spacing: Ur,
   identity: Dr,
   size: Xr,
   lineHeight: Vr,
-  fontFamily: Wr,
-  border: Ir
+  fontFamily: Ir,
+  border: Fr
 };
 function mt(t) {
   return t.replace("(min-width: ", "").replace("em)", "");
@@ -679,17 +679,17 @@ function tn({
 function rn() {
   return `__m__-${ur().replace(/:/g, "")}`;
 }
-function bt(t) {
+function ht(t) {
   return t.startsWith("data-") ? t : `data-${t}`;
 }
 function nn(t) {
   return Object.keys(t).reduce((r, n) => {
     const e = t[n];
-    return e === void 0 || e === "" || e === !1 || e === null || (r[bt(n)] = t[n]), r;
+    return e === void 0 || e === "" || e === !1 || e === null || (r[ht(n)] = t[n]), r;
   }, {});
 }
 function St(t) {
-  return t ? typeof t == "string" ? { [bt(t)]: !0 } : Array.isArray(t) ? [...t].reduce(
+  return t ? typeof t == "string" ? { [ht(t)]: !0 } : Array.isArray(t) ? [...t].reduce(
     (r, n) => ({ ...r, ...St(n) }),
     {}
   ) : nn(t) : null;
@@ -709,7 +709,7 @@ function en({
   const o = J(r, t), a = J(n, t);
   return { ...o, ...a, ...e };
 }
-const vt = R(
+const vt = P(
   ({
     component: t,
     style: r,
@@ -727,14 +727,14 @@ const vt = R(
     ...g
   }, d) => {
     var v;
-    const b = F(), h = t || "div", { styleProps: x, rest: T } = jr(g), S = cr(), N = (v = S == null ? void 0 : S()) == null ? void 0 : v(x.sx), C = rn(), y = tn({
-      styleProps: x,
-      theme: b,
+    const h = k(), b = t || "div", { styleProps: w, rest: T } = jr(g), S = cr(), N = (v = S == null ? void 0 : S()) == null ? void 0 : v(w.sx), C = rn(), y = tn({
+      styleProps: w,
+      theme: h,
       data: kr
-    }), w = {
+    }), x = {
       ref: d,
       style: en({
-        theme: b,
+        theme: h,
         style: r,
         vars: n,
         styleProps: y.inlineStyles
@@ -752,7 +752,7 @@ const vt = R(
       ...St(a),
       ...T
     };
-    return /* @__PURE__ */ k(q, { children: [
+    return /* @__PURE__ */ j(q, { children: [
       y.hasResponsiveStyles && /* @__PURE__ */ f(
         Mr,
         {
@@ -761,7 +761,7 @@ const vt = R(
           media: y.media
         }
       ),
-      typeof u == "function" ? u(w) : /* @__PURE__ */ f(h, { ...w })
+      typeof u == "function" ? u(x) : /* @__PURE__ */ f(b, { ...x })
     ] });
   }
 );
@@ -771,23 +771,23 @@ function Nt(t) {
   return t;
 }
 function ot(t) {
-  const r = R(t);
+  const r = P(t);
   return r.extend = Nt, r.withProps = (n) => {
-    const e = R((o, a) => /* @__PURE__ */ f(r, { ...n, ...o, ref: a }));
+    const e = P((o, a) => /* @__PURE__ */ f(r, { ...n, ...o, ref: a }));
     return e.extend = r.extend, e.displayName = `WithProps(${r.displayName})`, e;
   }, r;
 }
-function xt(t) {
-  const r = R(t);
+function wt(t) {
+  const r = P(t);
   return r.withProps = (n) => {
-    const e = R((o, a) => /* @__PURE__ */ f(r, { ...n, ...o, ref: a }));
+    const e = P((o, a) => /* @__PURE__ */ f(r, { ...n, ...o, ref: a }));
     return e.extend = r.extend, e.displayName = `WithProps(${r.displayName})`, e;
   }, r.extend = Nt, r;
 }
-var wt = { root: "m_87cf2631" };
+var xt = { root: "m_87cf2631" };
 const on = {
   __staticSelector: "UnstyledButton"
-}, at = xt(
+}, at = wt(
   (t, r) => {
     const n = O("UnstyledButton", on, t), {
       className: e,
@@ -798,10 +798,10 @@ const on = {
       styles: p,
       style: c,
       ...m
-    } = n, u = I({
+    } = n, u = z({
       name: a,
       props: n,
-      classes: wt,
+      classes: xt,
       className: e,
       style: c,
       classNames: s,
@@ -820,13 +820,13 @@ const on = {
     );
   }
 );
-at.classes = wt;
+at.classes = xt;
 at.displayName = "@mantine/core/UnstyledButton";
-const M = (t) => ({
+const E = (t) => ({
   in: { opacity: 1, transform: "scale(1)" },
   out: { opacity: 0, transform: `scale(.9) translateY(${t === "bottom" ? 10 : -10}px)` },
   transitionProperty: "transform, opacity"
-}), W = {
+}), I = {
   fade: {
     in: { opacity: 1 },
     out: { opacity: 0 },
@@ -919,23 +919,23 @@ const M = (t) => ({
     transitionProperty: "transform, opacity"
   },
   pop: {
-    ...M("bottom"),
+    ...E("bottom"),
     common: { transformOrigin: "center center" }
   },
   "pop-bottom-left": {
-    ...M("bottom"),
+    ...E("bottom"),
     common: { transformOrigin: "bottom left" }
   },
   "pop-bottom-right": {
-    ...M("bottom"),
+    ...E("bottom"),
     common: { transformOrigin: "bottom right" }
   },
   "pop-top-left": {
-    ...M("top"),
+    ...E("top"),
     common: { transformOrigin: "top left" }
   },
   "pop-top-right": {
-    ...M("top"),
+    ...E("top"),
     common: { transformOrigin: "top right" }
   }
 }, ut = {
@@ -958,11 +958,11 @@ function an({
     transitionDuration: `${n}ms`,
     transitionTimingFunction: e
   };
-  return typeof t == "string" ? t in W ? {
-    transitionProperty: W[t].transitionProperty,
+  return typeof t == "string" ? t in I ? {
+    transitionProperty: I[t].transitionProperty,
     ...o,
-    ...W[t].common,
-    ...W[t][ut[r]]
+    ...I[t].common,
+    ...I[t][ut[r]]
   } : {} : {
     transitionProperty: t.transitionProperty,
     ...o,
@@ -982,16 +982,16 @@ function sn({
   enterDelay: p,
   exitDelay: c
 }) {
-  const m = F(), u = br(), l = m.respectReducedMotion ? u : !1, [g, d] = Q(l ? 0 : t), [b, h] = Q(e ? "entered" : "exited"), x = j(-1), T = j(-1), S = j(-1), N = (y) => {
-    const w = y ? o : a, v = y ? i : s;
-    window.clearTimeout(x.current);
+  const m = k(), u = hr(), l = m.respectReducedMotion ? u : !1, [g, d] = Q(l ? 0 : t), [h, b] = Q(e ? "entered" : "exited"), w = M(-1), T = M(-1), S = M(-1), N = (y) => {
+    const x = y ? o : a, v = y ? i : s;
+    window.clearTimeout(w.current);
     const B = l ? 0 : y ? t : r;
-    d(B), B === 0 ? (typeof w == "function" && w(), typeof v == "function" && v(), h(y ? "entered" : "exited")) : S.current = requestAnimationFrame(() => {
+    d(B), B === 0 ? (typeof x == "function" && x(), typeof v == "function" && v(), b(y ? "entered" : "exited")) : S.current = requestAnimationFrame(() => {
       lr.flushSync(() => {
-        h(y ? "pre-entering" : "pre-exiting");
+        b(y ? "pre-entering" : "pre-exiting");
       }), S.current = requestAnimationFrame(() => {
-        typeof w == "function" && w(), h(y ? "entering" : "exiting"), x.current = window.setTimeout(() => {
-          typeof v == "function" && v(), h(y ? "entered" : "exited");
+        typeof x == "function" && x(), b(y ? "entering" : "exiting"), w.current = window.setTimeout(() => {
+          typeof v == "function" && v(), b(y ? "entered" : "exited");
         }, B);
       });
     });
@@ -1007,16 +1007,16 @@ function sn({
       y ? p : c
     );
   };
-  return hr(() => {
+  return br(() => {
     C(e);
-  }, [e]), z(
+  }, [e]), W(
     () => () => {
-      window.clearTimeout(x.current), cancelAnimationFrame(S.current);
+      window.clearTimeout(w.current), cancelAnimationFrame(S.current);
     },
     []
   ), {
     transitionDuration: g,
-    transitionStatus: b,
+    transitionStatus: h,
     transitionTimingFunction: n || "ease"
   };
 }
@@ -1035,7 +1035,7 @@ function $t({
   enterDelay: u,
   exitDelay: l
 }) {
-  const g = pr(), { transitionDuration: d, transitionStatus: b, transitionTimingFunction: h } = sn({
+  const g = pr(), { transitionDuration: d, transitionStatus: h, transitionTimingFunction: b } = sn({
     mounted: o,
     exitDuration: e,
     duration: n,
@@ -1047,37 +1047,37 @@ function $t({
     enterDelay: u,
     exitDelay: l
   });
-  return d === 0 || g === "test" ? o ? /* @__PURE__ */ f(q, { children: a({}) }) : t ? a({ display: "none" }) : null : b === "exited" ? t ? a({ display: "none" }) : null : /* @__PURE__ */ f(q, { children: a(
+  return d === 0 || g === "test" ? o ? /* @__PURE__ */ f(q, { children: a({}) }) : t ? a({ display: "none" }) : null : h === "exited" ? t ? a({ display: "none" }) : null : /* @__PURE__ */ f(q, { children: a(
     an({
       transition: r,
       duration: d,
-      state: b,
-      timingFunction: h
+      state: h,
+      timingFunction: b
     })
   ) });
 }
 $t.displayName = "@mantine/core/Transition";
 var _ = { root: "m_5ae2e3c", barsLoader: "m_7a2bd4cd", bar: "m_870bb79", "bars-loader-animation": "m_5d2b3b9d", dotsLoader: "m_4e3f22d7", dot: "m_870c4af", "loader-dots-animation": "m_aac34a1", ovalLoader: "m_b34414df", "oval-loader-animation": "m_f8e89c4b" };
-const _t = R(({ className: t, ...r }, n) => /* @__PURE__ */ k($, { component: "span", className: L(_.barsLoader, t), ...r, ref: n, children: [
+const _t = P(({ className: t, ...r }, n) => /* @__PURE__ */ j($, { component: "span", className: L(_.barsLoader, t), ...r, ref: n, children: [
   /* @__PURE__ */ f("span", { className: _.bar }),
   /* @__PURE__ */ f("span", { className: _.bar }),
   /* @__PURE__ */ f("span", { className: _.bar })
 ] }));
 _t.displayName = "@mantine/core/Bars";
-const Tt = R(({ className: t, ...r }, n) => /* @__PURE__ */ k($, { component: "span", className: L(_.dotsLoader, t), ...r, ref: n, children: [
+const Tt = P(({ className: t, ...r }, n) => /* @__PURE__ */ j($, { component: "span", className: L(_.dotsLoader, t), ...r, ref: n, children: [
   /* @__PURE__ */ f("span", { className: _.dot }),
   /* @__PURE__ */ f("span", { className: _.dot }),
   /* @__PURE__ */ f("span", { className: _.dot })
 ] }));
 Tt.displayName = "@mantine/core/Dots";
-const Pt = R(({ className: t, ...r }, n) => /* @__PURE__ */ f($, { component: "span", className: L(_.ovalLoader, t), ...r, ref: n }));
-Pt.displayName = "@mantine/core/Oval";
-const Rt = {
+const Rt = P(({ className: t, ...r }, n) => /* @__PURE__ */ f($, { component: "span", className: L(_.ovalLoader, t), ...r, ref: n }));
+Rt.displayName = "@mantine/core/Oval";
+const Pt = {
   bars: _t,
-  oval: Pt,
+  oval: Rt,
   dots: Tt
 }, cn = {
-  loaders: Rt,
+  loaders: Pt,
   type: "oval"
 }, pn = (t, { size: r, color: n }) => ({
   root: {
@@ -1098,8 +1098,8 @@ const Rt = {
     loaders: l,
     variant: g,
     children: d,
-    ...b
-  } = n, h = I({
+    ...h
+  } = n, b = z({
     name: "Loader",
     props: n,
     classes: _,
@@ -1111,26 +1111,26 @@ const Rt = {
     vars: i,
     varsResolver: pn
   });
-  return d ? /* @__PURE__ */ f($, { ...h("root"), ref: r, ...b, children: d }) : /* @__PURE__ */ f(
+  return d ? /* @__PURE__ */ f($, { ...b("root"), ref: r, ...h, children: d }) : /* @__PURE__ */ f(
     $,
     {
-      ...h("root"),
+      ...b("root"),
       ref: r,
       component: l[a],
       variant: g,
       size: e,
-      ...b
+      ...h
     }
   );
 });
-D.defaultLoaders = Rt;
+D.defaultLoaders = Pt;
 D.classes = _;
 D.displayName = "@mantine/core/Loader";
 var Y = { root: "m_77c9d27d", inner: "m_80f1301b", label: "m_811560b9", section: "m_a74036a", loader: "m_a25b86ee", group: "m_80d6d844", groupSection: "m_70be2a01" };
 const lt = {
   orientation: "horizontal"
 }, mn = (t, { borderWidth: r }) => ({
-  group: { "--button-border-width": P(r) }
+  group: { "--button-border-width": R(r) }
 }), it = ot((t, r) => {
   const n = O("ButtonGroup", lt, t), {
     className: e,
@@ -1144,7 +1144,7 @@ const lt = {
     variant: u,
     mod: l,
     ...g
-  } = O("ButtonGroup", lt, t), d = I({
+  } = O("ButtonGroup", lt, t), d = z({
     name: "ButtonGroup",
     props: n,
     classes: Y,
@@ -1203,7 +1203,7 @@ const ft = {}, un = (t, { radius: r, color: n, gradient: e, variant: o, autoCont
     radius: u,
     autoContrast: l,
     ...g
-  } = O("ButtonGroupSection", ft, t), d = I({
+  } = O("ButtonGroupSection", ft, t), d = z({
     name: "ButtonGroupSection",
     props: n,
     classes: Y,
@@ -1221,7 +1221,7 @@ const ft = {}, un = (t, { radius: r, color: n, gradient: e, variant: o, autoCont
 st.classes = Y;
 st.displayName = "@mantine/core/ButtonGroupSection";
 const ln = {
-  in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${P(1)}))` },
+  in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${R(1)}))` },
   out: { opacity: 0, transform: "translate(-50%, -200%)" },
   common: { transformOrigin: "center" },
   transitionProperty: "transform, opacity"
@@ -1247,7 +1247,7 @@ const ln = {
       "--button-hover-color": n || o ? p.hoverColor : void 0
     }
   };
-}, E = xt((t, r) => {
+}, F = wt((t, r) => {
   const n = O("Button", fn, t), {
     style: e,
     vars: o,
@@ -1261,28 +1261,28 @@ const ln = {
     variant: l,
     radius: g,
     loading: d,
-    loaderProps: b,
-    gradient: h,
-    classNames: x,
+    loaderProps: h,
+    gradient: b,
+    classNames: w,
     styles: T,
     unstyled: S,
     "data-disabled": N,
     autoContrast: C,
     mod: y,
-    ...w
-  } = n, v = I({
+    ...x
+  } = n, v = z({
     name: "Button",
     props: n,
     classes: Y,
     className: a,
     style: e,
-    classNames: x,
+    classNames: w,
     styles: T,
     unstyled: S,
     vars: o,
     varsResolver: dn
   }), B = !!c, H = !!m;
-  return /* @__PURE__ */ k(
+  return /* @__PURE__ */ j(
     at,
     {
       ref: r,
@@ -1300,17 +1300,17 @@ const ln = {
         },
         y
       ],
-      ...w,
+      ...x,
       children: [
         /* @__PURE__ */ f($t, { mounted: !!d, transition: ln, duration: 150, children: (V) => /* @__PURE__ */ f($, { component: "span", ...v("loader", { style: V }), "aria-hidden": !0, children: /* @__PURE__ */ f(
           D,
           {
             color: "var(--button-color)",
             size: "calc(var(--button-height) / 1.8)",
-            ...b
+            ...h
           }
         ) }) }),
-        /* @__PURE__ */ k("span", { ...v("inner"), children: [
+        /* @__PURE__ */ j("span", { ...v("inner"), children: [
           c && /* @__PURE__ */ f($, { component: "span", ...v("section"), mod: { position: "left" }, children: c }),
           /* @__PURE__ */ f($, { component: "span", mod: { loading: d }, ...v("label"), children: p }),
           m && /* @__PURE__ */ f($, { component: "span", ...v("section"), mod: { position: "right" }, children: m })
@@ -1319,21 +1319,19 @@ const ln = {
     }
   );
 });
-E.classes = Y;
-E.displayName = "@mantine/core/Button";
-E.Group = it;
-E.GroupSection = st;
-const yn = "_root_gdr8x_1", gn = "_inner_gdr8x_7", hn = "_label_gdr8x_11", bn = {
+F.classes = Y;
+F.displayName = "@mantine/core/Button";
+F.Group = it;
+F.GroupSection = st;
+const yn = "_root_1w9zb_1", gn = "_inner_1w9zb_9", bn = "_label_1w9zb_13", hn = {
   root: yn,
   inner: gn,
-  label: hn
-};
-E.withProps({});
-const $n = (t) => /* @__PURE__ */ f(
-  E,
+  label: bn
+}, $n = (t) => /* @__PURE__ */ f(
+  F,
   {
     ...t,
-    classNames: bn
+    classNames: hn
   }
 );
 export {

package/dist/components/theme.js

@@ -1,21 +1,85 @@
-function o(r) {
+function e(r) {
   return Array.isArray(r) ? r : Array(10).fill(r);
 }
-const e = {
+const a = {
+  focusRing: "never",
+  scale: 1,
+  //default value
+  fontSmoothing: !0,
+  //default value
+  // white: 'ffffff',
+  black: "#14151a",
   colors: {
-    primary: o("#14151A")
-  }
-  /* shadows: {
-    md: '1px 1px 3px rgba(0, 0, 0, .25)',
-    xl: '5px 5px 3px rgba(0, 0, 0, .25)',
-  }, */
+    primary: e("#14151a"),
+    white: e("#ffffff")
+  },
+  primaryShade: 6,
+  // { light: 6, dark: 8 } by theme
+  primaryColor: "primary",
+  /* variantColorResolver: ({ color, variant, gradient, theme }) => {
+      if (variant === 'primary') {
+        return {
+          background: 'var(--mantine-color-red-9)',
+          hover: 'var(--mantine-color-red-8)',
+          color: 'var(--mantine-color-white)',
+          border: 'none',
+        }
+      }
+  
+      return {
+        background: 'var(--mantine-color-red-9)',
+        hover: 'var(--mantine-color-red-8)',
+        color: 'var(--mantine-color-white)',
+        border: 'none',
+      }
+    }, //color by variant */
+  autoContrast: !1,
+  //default value
+  luminanceThreshold: 0.3,
+  //default value
+  fontFamily: "Inter, sans-serif",
   /* headings: {
-    fontFamily: 'Roboto, sans-serif',
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    textWrap: 'wrap', // 'nowrap', 'balance', 'pretty', 'stable',
     sizes: {
-      h1: { fontSize: rem(36) },
+      h1: { fontSize: '24px', fontWeight: '600', lineHeight: '1.3' }, //{ fontSize: string; fontWeight?: string; lineHeight: string; }
+      //..
     },
   }, */
+  radius: { xs: "6px", sm: "8px", md: "12px", lg: "16px", xl: "18px" },
+  //!!!TODO sync with blank
+  defaultRadius: "sm",
+  // spacing: { xs: '6px', sm: '8px', md: '12px', lg: '16px', xl: '18px' }, //for example
+  // fontSizes: { xs: '6px', sm: '8px', md: '12px', lg: '16px', xl: '18px' }, //for example
+  // lineHeights: { xs: '6px', sm: '8px', md: '12px', lg: '16px', xl: '18px' }, //for example
+  // breakpoints: { xs: '6px', sm: '8px', md: '12px', lg: '16px', xl: '18px' }, //for example
+  /* shadows: {
+    xs: '1px 1px 3px rgba(0, 0, 0, .25)',
+    sm: '1px 1px 3px rgba(0, 0, 0, .25)',
+    md: '1px 1px 3px rgba(0, 0, 0, .25)',
+    lg: '1px 1px 3px rgba(0, 0, 0, .25)',
+    xl: '1px 1px 3px rgba(0, 0, 0, .25)',
+  }, //for example */
+  respectReducedMotion: !1,
+  //default
+  cursorType: "default",
+  defaultGradient: { from: "black", to: "yellow", deg: 25 },
+  //for example
+  // activeClassName: 'class-name', //for example
+  // focusClassName: 'class-name', //for example
+  /*  components: {
+    Title: Title.extend({
+      classNames: { root: 'classnames' },
+      styles: {},
+      vars: { order: 5 },
+      defaultProps: {},
+    }), //for example
+  }, */
+  other: {
+    // any additional vars
+  }
 };
 export {
-  e as theme
+  a as theme
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.6.12",
+  "version": "1.7.0",
   "type": "module",
   "files": [
     "dist",