@cfx-dev/ui-components 2.1.22 → 2.1.23

package/dist/assets/Accordion.css

@@ -1 +1 @@
-._root_y0b1q_1{background-color:var(--color-accordion-background)}._item_y0b1q_5,._header_y0b1q_5{cursor:pointer;background:var(--color-accordion-background)}._triggerContainer_y0b1q_10{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:var(--quant);border-bottom:1px solid var(--color-accordion-border-color);height:calc(var(--quant) * 7.75);transition:border-bottom .25s ease-out}._triggerContainer_y0b1q_10:hover,._triggerContainer_y0b1q_10:focus-visible:not(:hover){border-bottom:2px solid rgba(var(--color-primary),1)}._triggerContainer_y0b1q_10:hover ._iconFlip_y0b1q_23,._triggerContainer_y0b1q_10:focus-visible:not(:hover) ._iconFlip_y0b1q_23{transform:rotateX(90deg)}._triggerContainer_y0b1q_10:hover ._iconUp_y0b1q_26,._triggerContainer_y0b1q_10:focus-visible:not(:hover) ._iconUp_y0b1q_26{top:calc(-1 * var(--offset-small))}._triggerContainer_y0b1q_10:hover ._iconDown_y0b1q_29,._triggerContainer_y0b1q_10:focus-visible:not(:hover) ._iconDown_y0b1q_29{top:var(--offset-small)}._triggerContainer_y0b1q_10 ._iconLeft_y0b1q_32{margin-right:var(--offset-small);color:rgba(var(--color-secondary),1)}._triggerContainer_y0b1q_10 ._iconRight_y0b1q_36{top:0;position:relative;color:rgba(var(--color-secondary),1);margin-left:var(--offset-small);transition:transform .25s ease-out,top .5s ease;transform-style:preserve-3d}._iconFlip_y0b1q_23{transform:rotateX(90deg)}._content_y0b1q_49{display:block;padding:calc(var(--quant) * .5) calc(var(--quant) * 6.5);overflow:hidden;max-height:0;transition:max-height .5s ease-in-out}._content_y0b1q_49._open_y0b1q_56{max-height:calc(var(--quant) * 20)}
+._root_1pwnk_1{background-color:var(--color-accordion-background)}._item_1pwnk_5,._header_1pwnk_5{cursor:pointer;background:var(--color-accordion-background)}._triggerContainer_1pwnk_10{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:var(--quant);border-bottom:1px solid var(--color-accordion-border-color);height:calc(var(--quant) * 7.75);transition:border-bottom .25s ease-out}._triggerContainer_1pwnk_10:hover,._triggerContainer_1pwnk_10:focus-visible:not(:hover){border-bottom:2px solid rgba(var(--color-primary),1)}._triggerContainer_1pwnk_10:hover ._iconFlip_1pwnk_23,._triggerContainer_1pwnk_10:focus-visible:not(:hover) ._iconFlip_1pwnk_23{transform:rotateX(90deg)}._triggerContainer_1pwnk_10:hover ._iconUp_1pwnk_26,._triggerContainer_1pwnk_10:focus-visible:not(:hover) ._iconUp_1pwnk_26{top:calc(-1 * var(--offset-small))}._triggerContainer_1pwnk_10:hover ._iconDown_1pwnk_29,._triggerContainer_1pwnk_10:focus-visible:not(:hover) ._iconDown_1pwnk_29{top:var(--offset-small)}._triggerContainer_1pwnk_10 ._iconLeft_1pwnk_32{margin-right:var(--offset-small);color:rgba(var(--color-secondary),1)}._triggerContainer_1pwnk_10 ._iconRight_1pwnk_36{top:0;position:relative;color:rgba(var(--color-secondary),1);margin-left:var(--offset-small);transition:transform .25s ease-out,top .5s ease;transform-style:preserve-3d}._iconFlip_1pwnk_23{transform:rotateX(90deg)}._content_1pwnk_49{display:block;padding:calc(var(--quant) * .5) calc(var(--quant) * 6.5);overflow:hidden;max-height:0;transition:max-height .5s ease-in-out}._content_1pwnk_49._open_1pwnk_56{max-height:calc(var(--quant) * 30)}

package/dist/assets/Box.css

@@ -1 +1 @@
-._root_1bvck_1._full-width_1bvck_1{width:100%}._root_1bvck_1._full-height_1bvck_4{height:100%}._root_1bvck_1._no-overflow_1bvck_7{overflow:hidden}._root_1bvck_1._no-shrink_1bvck_10{flex-shrink:0}._root_1bvck_1._grow_1bvck_13{flex-grow:1}._root_1bvck_1._no-grow_1bvck_16{flex-grow:0}
+._root_1rhjm_1._full-width_1rhjm_1{width:100%}._root_1rhjm_1._fit-content-width_1rhjm_4{width:fit-content}._root_1rhjm_1._full-height_1rhjm_7{height:100%}._root_1rhjm_1._no-overflow_1rhjm_10{overflow:hidden}._root_1rhjm_1._no-shrink_1rhjm_13{flex-shrink:0}._root_1rhjm_1._grow_1rhjm_16{flex-grow:1}._root_1rhjm_1._no-grow_1rhjm_19{flex-grow:0}

package/dist/assets/InputDropzone.css

@@ -1 +1 @@
-._dropzone_1253u_1{border-radius:var(--border-radius-small);text-align:center;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:calc(var(--quant) * 22.25);padding:var(--offset-normal);background-color:rgba(var(--color-bg),1);border:none}._dropzone_1253u_1{transition:all .25s ease,outline-offset 0s,outline 0s}._dropzone_1253u_1 ._text_1253u_18{margin-top:var(--offset-small)}._dropzone_1253u_1 ._text_1253u_18{transition:all .25s ease,outline-offset 0s,outline 0s}._dropzone_1253u_1._disabled_1253u_24{cursor:not-allowed;opacity:.5}._dropzone_1253u_1:not(._disabled_1253u_24):hover{background-color:rgba(var(--color-secondary),.2)}._dropzone_1253u_1:not(._disabled_1253u_24):hover ._text_1253u_18{margin-top:var(--offset-normal)}._dropzone_1253u_1:not(._disabled_1253u_24):focus-visible,._dropzone_1253u_1:not(._disabled_1253u_24):focus-visible:hover{outline-offset:var(--dropzone-focus-border-size, initial);outline:var(--dropzone-focus-border-size, initial) solid var(--color-dropzone-focus-border-color)}._dropzone_1253u_1:not(._disabled_1253u_24):focus-visible,._dropzone_1253u_1:not(._disabled_1253u_24):focus-visible:hover,._dropzone_1253u_1:not(._disabled_1253u_24)._focused_1253u_38,._dropzone_1253u_1:not(._disabled_1253u_24)._dragActive_1253u_38{background-color:rgba(var(--color-secondary),.2)}._dropzone_1253u_1:not(._disabled_1253u_24):focus-visible ._text_1253u_18,._dropzone_1253u_1:not(._disabled_1253u_24):focus-visible:hover ._text_1253u_18,._dropzone_1253u_1:not(._disabled_1253u_24)._focused_1253u_38 ._text_1253u_18,._dropzone_1253u_1:not(._disabled_1253u_24)._dragActive_1253u_38 ._text_1253u_18{margin-top:var(--offset-normal)}
+._dropzone_1kj2k_1{border-radius:var(--border-radius-small);text-align:center;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:calc(var(--quant) * 22.25);padding:var(--offset-normal);background-color:rgba(var(--color-bg),1);border:calc(var(--quant) * .25) dashed rgba(var(--color-accent),1)}._dropzone_1kj2k_1{transition:all .25s ease,outline-offset 0s,outline 0s}._dropzone_1kj2k_1 ._text_1kj2k_18{margin-top:var(--offset-small)}._dropzone_1kj2k_1 ._text_1kj2k_18{transition:all .25s ease,outline-offset 0s,outline 0s}._dropzone_1kj2k_1._disabled_1kj2k_24{cursor:not-allowed;opacity:.5}._dropzone_1kj2k_1:not(._disabled_1kj2k_24):hover{background-color:rgba(var(--color-secondary),.2)}._dropzone_1kj2k_1:not(._disabled_1kj2k_24):hover ._text_1kj2k_18{margin-top:var(--offset-normal)}._dropzone_1kj2k_1:not(._disabled_1kj2k_24):focus-visible,._dropzone_1kj2k_1:not(._disabled_1kj2k_24):focus-visible:hover{outline-offset:var(--dropzone-focus-border-size, initial);outline:var(--dropzone-focus-border-size, initial) solid var(--color-dropzone-focus-border-color)}._dropzone_1kj2k_1:not(._disabled_1kj2k_24):focus-visible,._dropzone_1kj2k_1:not(._disabled_1kj2k_24):focus-visible:hover,._dropzone_1kj2k_1:not(._disabled_1kj2k_24)._focused_1kj2k_38,._dropzone_1kj2k_1:not(._disabled_1kj2k_24)._dragActive_1kj2k_38{background-color:rgba(var(--color-secondary),.2)}._dropzone_1kj2k_1:not(._disabled_1kj2k_24):focus-visible ._text_1kj2k_18,._dropzone_1kj2k_1:not(._disabled_1kj2k_24):focus-visible:hover ._text_1kj2k_18,._dropzone_1kj2k_1:not(._disabled_1kj2k_24)._focused_1kj2k_38 ._text_1kj2k_18,._dropzone_1kj2k_1:not(._disabled_1kj2k_24)._dragActive_1kj2k_38 ._text_1kj2k_18{margin-top:var(--offset-normal)}

package/dist/components/Accordion/Accordion.js

@@ -1,88 +1,88 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import b, { createContext as I, useState as u, useContext as w, useEffect as v } from "react";
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import f, { createContext as x, useState as u, useContext as A, useEffect as b } from "react";
 import { Icon as C } from "../Icon/Icon.js";
-import { Flex as x } from "../Layout/Flex/Flex.js";
-import { Text as y } from "../Text/Text.js";
+import { Flex as k } from "../Layout/Flex/Flex.js";
+import { Text as I } from "../Text/Text.js";
 import { clsx as h } from "../../utils/clsx.js";
-import '../../assets/Accordion.css';const q = "_root_y0b1q_1", D = "_item_y0b1q_5", F = "_header_y0b1q_5", N = "_triggerContainer_y0b1q_10", U = "_iconFlip_y0b1q_23", T = "_iconUp_y0b1q_26", R = "_iconDown_y0b1q_29", $ = "_iconLeft_y0b1q_32", k = "_iconRight_y0b1q_36", E = "_content_y0b1q_49", L = "_open_y0b1q_56", n = {
-  root: q,
-  item: D,
+import '../../assets/Accordion.css';const D = "_root_1pwnk_1", y = "_item_1pwnk_5", F = "_header_1pwnk_5", N = "_triggerContainer_1pwnk_10", U = "_iconFlip_1pwnk_23", T = "_iconUp_1pwnk_26", R = "_iconDown_1pwnk_29", $ = "_iconLeft_1pwnk_32", E = "_iconRight_1pwnk_36", L = "_content_1pwnk_49", O = "_open_1pwnk_56", o = {
+  root: D,
+  item: y,
   header: F,
   triggerContainer: N,
   iconFlip: U,
   iconUp: T,
   iconDown: R,
   iconLeft: $,
-  iconRight: k,
-  content: E,
-  open: L
-}, g = I(void 0), M = function({
+  iconRight: E,
+  content: L,
+  open: O
+}, w = x(void 0), P = function({
   children: t,
-  className: e
+  className: n
 }) {
-  const [c, s] = u(/* @__PURE__ */ new Set()), a = b.useCallback((r) => {
-    s((_) => {
-      const i = new Set(_);
-      return i.has(r) ? i.delete(r) : i.add(r), i;
+  const [r, s] = u(/* @__PURE__ */ new Set()), a = f.useCallback((c) => {
+    s((m) => {
+      const i = new Set(m);
+      return i.has(c) ? i.delete(c) : i.add(c), i;
     });
-  }, []), m = b.useMemo(() => ({
-    openItems: c,
+  }, []), d = f.useMemo(() => ({
+    openItems: r,
     toggleItem: a
-  }), [c, a]);
-  return /* @__PURE__ */ o(g.Provider, { value: m, children: /* @__PURE__ */ o("div", { className: h(n.root, e), role: "presentation", children: t }) });
-}, P = function({
+  }), [r, a]);
+  return /* @__PURE__ */ e(w.Provider, { value: d, children: /* @__PURE__ */ e("div", { className: h(o.root, n), role: "presentation", children: t }) });
+}, V = function({
   children: t,
-  id: e
+  id: n
 }) {
-  return /* @__PURE__ */ o("div", { className: n.item, id: e, role: "region", "aria-labelledby": `${e}-header`, children: t });
-}, V = function({
+  return /* @__PURE__ */ e("div", { className: o.item, id: n, role: "region", "aria-labelledby": `${n}-header`, children: t });
+}, q = function({
   children: t
 }) {
-  return /* @__PURE__ */ o("div", { className: n.header, children: t });
+  return /* @__PURE__ */ e("div", { className: o.header, children: t });
 }, B = function({
   text: t,
-  id: e,
-  iconLeft: c
+  id: n,
+  iconLeft: r
 }) {
-  const s = w(g);
+  const s = A(w);
   if (!s)
     throw new Error("AccordionTrigger must be used within an Accordion");
   const {
     toggleItem: a,
-    openItems: m
-  } = s, r = m.has(e), [_, i] = u(!1), [p, A] = u(r ? "UpChevron" : "DownChevron");
-  return v(() => {
-    const d = setTimeout(() => {
-      A(r ? "UpChevron" : "DownChevron"), i(!1);
+    openItems: d
+  } = s, c = d.has(n), [m, i] = u(!1), [_, v] = u(c ? "UpChevron" : "DownChevron");
+  return b(() => {
+    const p = setTimeout(() => {
+      v(c ? "UpChevron" : "DownChevron"), i(!1);
     }, 300);
-    return i(!0), () => clearTimeout(d);
-  }, [r]), /* @__PURE__ */ f(
+    return i(!0), () => clearTimeout(p);
+  }, [c]), /* @__PURE__ */ g(
     "div",
     {
-      className: n.triggerContainer,
-      onClick: () => a(e),
-      onKeyDown: (d) => {
-        (d.key === "Enter" || d.key === " ") && a(e);
+      className: o.triggerContainer,
+      onClick: () => a(n),
+      onKeyDown: (p) => {
+        (p.key === "Enter" || p.key === " ") && a(n);
       },
       role: "button",
       tabIndex: 0,
-      "aria-expanded": r,
-      "aria-controls": `${e}-content`,
-      id: `${e}-header`,
+      "aria-expanded": c,
+      "aria-controls": `${n}-content`,
+      id: `${n}-header`,
       children: [
-        /* @__PURE__ */ f(x, { centered: !0, children: [
-          c && /* @__PURE__ */ o(C, { name: c, className: n.iconLeft }),
-          /* @__PURE__ */ o(y, { size: "xxsmall", children: t })
+        /* @__PURE__ */ g(k, { centered: !0, children: [
+          r && /* @__PURE__ */ e(C, { name: r, className: o.iconLeft }),
+          /* @__PURE__ */ e(I, { size: "normal", children: t })
         ] }),
-        /* @__PURE__ */ o(x, { centered: !0, children: /* @__PURE__ */ o(
+        /* @__PURE__ */ e(k, { centered: !0, children: /* @__PURE__ */ e(
           C,
           {
-            className: h(n.iconRight, {
-              [n.iconFlip]: _,
-              [n.iconUp]: p === "UpChevron",
-              [n.iconDown]: p === "DownChevron"
+            className: h(o.iconRight, {
+              [o.iconFlip]: m,
+              [o.iconUp]: _ === "UpChevron",
+              [o.iconDown]: _ === "DownChevron"
             }),
-            name: p
+            name: _
           }
         ) })
       ]
@@ -90,29 +90,29 @@ import '../../assets/Accordion.css';const q = "_root_y0b1q_1", D = "_item_y0b1q_
   );
 }, G = function({
   children: t,
-  id: e
+  id: n
 }) {
-  const c = w(g);
-  if (!c)
+  const r = A(w);
+  if (!r)
     throw new Error("AccordionContent must be used within an Accordion");
   const {
     openItems: s
-  } = c;
-  return /* @__PURE__ */ o(
+  } = r;
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: h(n.content, { [n.open]: s.has(e) }),
-      id: `${e}-content`,
+      className: h(o.content, { [o.open]: s.has(n) }),
+      id: `${n}-content`,
       role: "region",
-      "aria-labelledby": `${e}-header`,
-      children: /* @__PURE__ */ o(y, { color: "secondary", size: "xxsmall", children: t })
+      "aria-labelledby": `${n}-header`,
+      children: /* @__PURE__ */ e(I, { color: "secondary", size: "normal", typographic: !0, children: t })
     }
   );
 };
 export {
-  M as Accordion,
+  P as Accordion,
   G as AccordionContent,
-  V as AccordionHeader,
-  P as AccordionItem,
+  q as AccordionHeader,
+  V as AccordionItem,
   B as AccordionTrigger
 };

package/dist/components/Accordion/AccordionShowcase.js

@@ -2,11 +2,11 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import a from "react";
 import { Flex as c } from "../Layout/Flex/Flex.js";
 import { Text as d } from "../Text/Text.js";
-import { Accordion as l, AccordionItem as i, AccordionHeader as o, AccordionTrigger as n, AccordionContent as r } from "./Accordion.js";
-function h() {
+import { Accordion as h, AccordionItem as i, AccordionHeader as o, AccordionTrigger as n, AccordionContent as r } from "./Accordion.js";
+function l() {
   return /* @__PURE__ */ e(c, { fullWidth: !0, vertical: !0, children: /* @__PURE__ */ t(c, { fullWidth: !0, vertical: !0, children: [
     /* @__PURE__ */ e(d, { size: "large", children: "Accordion" }),
-    /* @__PURE__ */ t(l, { children: [
+    /* @__PURE__ */ t(h, { children: [
       /* @__PURE__ */ t(i, { id: "item1", children: [
         /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
           n,
@@ -16,7 +16,11 @@ function h() {
             iconLeft: "MoreInfo"
           }
         ) }),
-        /* @__PURE__ */ e(r, { id: "item1", children: "Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it." })
+        /* @__PURE__ */ t(r, { id: "item1", children: [
+          "Nope! ",
+          /* @__PURE__ */ e("a", { href: "https://cfx.re", children: "FiveM" }),
+          " does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it. Nope! FiveM does not interact with the Rockstar Online Services other than to validate your game copy the first time you launch it."
+        ] })
       ] }),
       /* @__PURE__ */ t(i, { id: "item2", children: [
         /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
@@ -54,7 +58,7 @@ function h() {
     ] })
   ] }) });
 }
-const b = a.memo(h);
+const b = a.memo(l);
 export {
   b as default
 };

package/dist/components/InputDropzone/InputDropzone.js

@@ -170,7 +170,7 @@ function Sr(e, r) {
         case 0:
           return e.items ? (t = Ee(e.items).filter(function(a) {
             return a.kind === "file";
-          }), r !== "drop" ? [2, t] : [4, Promise.all(t.map(zr))]) : [3, 2];
+          }), r !== "drop" ? [2, t] : [4, Promise.all(t.map(kr))]) : [3, 2];
         case 1:
           return n = i.sent(), [2, Ge(nr(n))];
         case 2:
@@ -195,7 +195,7 @@ function Ee(e) {
   }
   return r;
 }
-function zr(e) {
+function kr(e) {
   if (typeof e.webkitGetAsEntry != "function")
     return qe(e);
   var r = e.webkitGetAsEntry();
@@ -213,7 +213,7 @@ function qe(e) {
   var t = q(r);
   return Promise.resolve(t);
 }
-function kr(e) {
+function zr(e) {
   return M(this, void 0, void 0, function() {
     return $(this, function(r) {
       return [2, e.isDirectory ? or(e) : Lr(e)];
@@ -243,7 +243,7 @@ function or(e) {
               case 4:
                 return [3, 6];
               case 5:
-                O = Promise.all(u.map(kr)), i.push(O), a(), g.label = 6;
+                O = Promise.all(u.map(zr)), i.push(O), a(), g.label = 6;
               case 6:
                 return [
                   2
@@ -809,12 +809,12 @@ function dr() {
       window.removeEventListener("focus", Se, !1);
     };
   }, [D, Re, X, Z]);
-  var R = ie([]), ze = function(c) {
+  var R = ie([]), ke = function(c) {
     v.current && v.current.contains(c.target) || (c.preventDefault(), R.current = []);
   };
   Oe(function() {
-    return N && (document.addEventListener("dragover", er, !1), document.addEventListener("drop", ze, !1)), function() {
-      N && (document.removeEventListener("dragover", er), document.removeEventListener("drop", ze));
+    return N && (document.addEventListener("dragover", er, !1), document.addEventListener("drop", ke, !1)), function() {
+      N && (document.removeEventListener("dragover", er), document.removeEventListener("drop", ke));
     };
   }, [v, N]), Oe(function() {
     return !n && V && v.current && v.current.focus(), function() {
@@ -822,7 +822,7 @@ function dr() {
   }, [v, V, n]);
   var C = A(function(o) {
     fe ? fe(o) : console.error(o);
-  }, [fe]), ke = A(function(o) {
+  }, [fe]), ze = A(function(o) {
     o.preventDefault(), o.persist(), ne(o), R.current = [].concat(lt(R.current), [o.target]), ae(o) && Promise.resolve(i(o)).then(function(c) {
       if (!(se(o) && !I)) {
         var d = c.length, m = d > 0 && Qr({
@@ -867,7 +867,7 @@ function dr() {
   }, [v, O, I]), ee = A(function(o, c) {
     var d = [], m = [];
     o.forEach(function(b) {
-      var U = cr(b, B), k = Fe(U, 2), ge = k[0], ve = k[1], ye = ur(b, s, a), oe = Fe(ye, 2), be = oe[0], he = oe[1], De = W ? W(b) : null;
+      var U = cr(b, B), z = Fe(U, 2), ge = z[0], ve = z[1], ye = ur(b, s, a), oe = Fe(ye, 2), be = oe[0], he = oe[1], De = W ? W(b) : null;
       if (ge && be && !De)
         d.push(b);
       else {
@@ -934,23 +934,23 @@ function dr() {
     });
   }, []), He = A(function() {
     Q || (et() ? setTimeout(S, 0) : S());
-  }, [Q, S]), z = function(c) {
+  }, [Q, S]), k = function(c) {
     return n ? null : c;
   }, me = function(c) {
-    return H ? null : z(c);
+    return H ? null : k(c);
   }, te = function(c) {
-    return h ? null : z(c);
+    return h ? null : k(c);
   }, ne = function(c) {
     I && c.stopPropagation();
   }, vr = L(function() {
     return function() {
-      var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, c = o.refKey, d = c === void 0 ? "ref" : c, m = o.role, b = o.onKeyDown, U = o.onFocus, k = o.onBlur, ge = o.onClick, ve = o.onDragEnter, ye = o.onDragOver, oe = o.onDragLeave, be = o.onDrop, he = le(o, ut);
+      var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, c = o.refKey, d = c === void 0 ? "ref" : c, m = o.role, b = o.onKeyDown, U = o.onFocus, z = o.onBlur, ge = o.onClick, ve = o.onDragEnter, ye = o.onDragOver, oe = o.onDragLeave, be = o.onDrop, he = le(o, ut);
       return f(f(je({
         onKeyDown: me(F(b, $e)),
         onFocus: me(F(U, Ke)),
-        onBlur: me(F(k, Ne)),
-        onClick: z(F(ge, He)),
-        onDragEnter: te(F(ve, ke)),
+        onBlur: me(F(z, Ne)),
+        onClick: k(F(ge, He)),
+        onDragEnter: te(F(ve, ze)),
         onDragOver: te(F(ye, Le)),
         onDragLeave: te(F(oe, Me)),
         onDrop: te(F(be, re)),
@@ -959,22 +959,22 @@ function dr() {
         tabIndex: 0
       } : {}), he);
     };
-  }, [v, $e, Ke, Ne, He, ke, Le, Me, re, H, h, n]), yr = A(function(o) {
+  }, [v, $e, Ke, Ne, He, ze, Le, Me, re, H, h, n]), yr = A(function(o) {
     o.stopPropagation();
   }, []), br = L(function() {
     return function() {
-      var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, c = o.refKey, d = c === void 0 ? "ref" : c, m = o.onChange, b = o.onClick, U = le(o, st), k = je({
+      var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, c = o.refKey, d = c === void 0 ? "ref" : c, m = o.onChange, b = o.onClick, U = le(o, st), z = je({
         accept: B,
         multiple: u,
         type: "file",
         style: {
           display: "none"
         },
-        onChange: z(F(m, re)),
-        onClick: z(F(b, yr)),
+        onChange: k(F(m, re)),
+        onClick: k(F(b, yr)),
         tabIndex: -1
       }, d, D);
-      return f(f({}, k), U);
+      return f(f({}, z), U);
     };
   }, [D, t, u, re, n]);
   return f(f({}, de), {}, {
@@ -983,7 +983,7 @@ function dr() {
     getInputProps: br,
     rootRef: v,
     inputRef: D,
-    open: z(S)
+    open: k(S)
   });
 }
 function bt(e, r) {
@@ -1023,7 +1023,7 @@ function bt(e, r) {
 }
 function tr() {
 }
-const ht = "_dropzone_1253u_1", Dt = "_text_1253u_18", At = "_disabled_1253u_24", wt = "_focused_1253u_38", Ot = "_dragActive_1253u_38", E = {
+const ht = "_dropzone_1kj2k_1", Dt = "_text_1kj2k_18", At = "_disabled_1kj2k_24", wt = "_focused_1kj2k_38", Ot = "_dragActive_1kj2k_38", E = {
   dropzone: ht,
   text: Dt,
   disabled: At,

package/dist/components/Layout/Box/Box.d.ts

@@ -7,6 +7,7 @@ export interface BoxProps extends MPProps {
     grow?: boolean;
     fullWidth?: boolean;
     fullHeight?: boolean;
+    fitContentWidth?: boolean;
     /**
      * Number values is treated like quant multiplier
      * String value used as is

package/dist/components/Layout/Box/Box.js

@@ -1,104 +1,107 @@
 import { jsx as P } from "react/jsx-runtime";
-import m from "react";
-import { useContextualStyle as j } from "../../Style/Style.js";
-import { ui as d } from "../../ui.js";
+import c from "react";
+import { useContextualStyle as W } from "../../Style/Style.js";
+import { ui as a } from "../../ui.js";
 import { clsx as H } from "../../../utils/clsx.js";
-import '../../../assets/Box.css';const W = "_root_1bvck_1", z = "_grow_1bvck_13", o = {
-  root: W,
-  "full-width": "_full-width_1bvck_1",
-  "full-height": "_full-height_1bvck_4",
-  "no-overflow": "_no-overflow_1bvck_7",
-  "no-shrink": "_no-shrink_1bvck_10",
-  grow: z,
-  "no-grow": "_no-grow_1bvck_16"
+import '../../../assets/Box.css';const z = "_root_1rhjm_1", D = "_grow_1rhjm_16", t = {
+  root: z,
+  "full-width": "_full-width_1rhjm_1",
+  "fit-content-width": "_fit-content-width_1rhjm_4",
+  "full-height": "_full-height_1rhjm_7",
+  "no-overflow": "_no-overflow_1rhjm_10",
+  "no-shrink": "_no-shrink_1rhjm_13",
+  grow: D,
+  "no-grow": "_no-grow_1rhjm_19"
 };
-function b(r) {
-  return typeof r == "string" ? r : d.q(r);
+function y(r) {
+  return typeof r == "string" ? r : a.q(r);
 }
-const J = m.forwardRef(function(x, y) {
+const K = c.forwardRef(function(S, M) {
   const {
-    noOverflow: S = !1,
-    noShrink: M = !1,
+    noOverflow: k = !1,
+    noShrink: v = !1,
     grow: e = void 0,
-    width: g,
-    height: a,
+    width: d,
+    height: g,
     children: A,
-    className: N,
-    fullWidth: R,
-    fullHeight: q,
+    className: C,
+    fullWidth: N,
+    fullHeight: R,
+    fitContentWidth: b,
     style: p,
     // --- MPProps
-    m: l,
-    mt: s,
-    mr: n,
-    mb: f,
-    ml: i,
-    p: c,
-    pt: h,
-    pr: u,
-    pb: _,
-    pl: w
-  } = x, k = j(), B = H(o.root, N, {
-    [o["full-width"]]: R,
-    [o["full-height"]]: q,
-    [o["no-overflow"]]: S,
-    [o["no-shrink"]]: M,
-    [o["no-grow"]]: e === !1,
-    [o.grow]: e === !0
-  }), C = m.useMemo(() => d.getAllMPAttrs({
-    m: l,
-    mt: s,
-    mr: n,
-    mb: f,
-    ml: i,
-    p: c,
-    pt: h,
-    pr: u,
-    pb: _,
-    pl: w
+    m: n,
+    mt: i,
+    mr: l,
+    mb: s,
+    ml: f,
+    p: h,
+    pt: m,
+    pr: _,
+    pb: w,
+    pl: u
+  } = S, j = W(), q = H(t.root, C, {
+    [t["full-width"]]: N,
+    [t["full-height"]]: R,
+    [t["fit-content-width"]]: b,
+    [t["no-overflow"]]: k,
+    [t["no-shrink"]]: v,
+    [t["no-grow"]]: e === !1,
+    [t.grow]: e === !0
+  }), B = c.useMemo(() => a.getAllMPAttrs({
+    m: n,
+    mt: i,
+    mr: l,
+    mb: s,
+    ml: f,
+    p: h,
+    pt: m,
+    pr: _,
+    pb: w,
+    pl: u
   }), [
+    n,
+    i,
     l,
     s,
-    n,
     f,
-    i,
-    c,
     h,
-    u,
+    m,
     _,
-    w
-  ]), v = m.useMemo(() => d.getAllMPStyles({
-    m: l,
-    mt: s,
-    mr: n,
-    mb: f,
-    ml: i,
-    p: c,
-    pt: h,
-    pr: u,
-    pb: _,
-    pl: w
+    w,
+    u
+  ]), x = c.useMemo(() => a.getAllMPStyles({
+    m: n,
+    mt: i,
+    mr: l,
+    mb: s,
+    ml: f,
+    p: h,
+    pt: m,
+    pr: _,
+    pb: w,
+    pl: u
   }), [
+    n,
+    i,
     l,
     s,
-    n,
     f,
-    i,
-    c,
     h,
-    u,
+    m,
     _,
-    w
-  ]), O = m.useMemo(() => {
-    const t = {
-      ...v,
-      ...k,
+    w,
+    u
+  ]), O = c.useMemo(() => {
+    const o = {
+      ...x,
+      ...j,
       ...p || {}
     };
-    return g && (t.width = b(g)), a && (t.height = b(a)), !t.width && e === !0 && (t.width = "1px"), t;
-  }, [e, a, v, p, g, k]);
-  return /* @__PURE__ */ P("div", { ...C, ref: y, className: B, style: O, children: A });
+    return d && (o.width = y(d)), g && (o.height = y(g)), !o.width && e === !0 && (o.width = "1px"), o;
+  }, [e, g, x, p, d, j]);
+  return /* @__PURE__ */ P("div", { ...B, ref: M, className: q, style: O, children: A });
 });
 export {
-  J as Box
+  K as Box
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "2.1.22",
+  "version": "2.1.23",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",