@cfx-dev/ui-components 4.3.2 → 4.3.4

package/dist/styles-scss/themes.scss

@@ -1,4 +1,4 @@
-@use "./themes/theme_cfx.scss";
-@use "./themes/theme_fivem.scss";
-@use "./themes/theme_redm.scss";
-@use "./themes/theme_wireframe.scss";
+@use "./themes/theme_cfx";
+@use "./themes/theme_fivem";
+@use "./themes/theme_redm";
+@use "./themes/theme_wireframe";

package/dist/styles-scss/tokens.scss

@@ -35,7 +35,7 @@
 }
 
 @mixin border-radius-tokens() {
-  @each $name, $value in ui.$borderRadius {
+  @each $name, $value in ui.$borderRadiusMap {
     @include ui.def('border-radius-#{$name}', $value);
   }
 }
@@ -47,26 +47,21 @@
 
   // normal is mirroring small, becouse it's the default size
   @include ui.define-font-size('normal',    ui.q(2.5),    1.5);
-
   @include ui.define-font-size('medium',    ui.q(3.125),  1.3);
   @include ui.define-font-size('large',     ui.q(3.75),   1.3);
   @include ui.define-font-size('xlarge',    ui.q(5),      1.3);
   @include ui.define-font-size('xxlarge',   ui.q(6.25),   1.3);
   @include ui.define-font-size('xxxlarge',  ui.q(8.75),   1.15);
-
   @include ui.def('font-weight-thin',     100);
   @include ui.def('font-weight-small',    300);
   @include ui.def('font-weight-normal',   400);
   @include ui.def('font-weight-bold',     700);
   @include ui.def('font-weight-bolder',   800);
   @include ui.def('font-weight-boldest',  900);
-
   @include ui.def('letter-spacing-normal',   -0.025em);
   @include ui.def('letter-spacing-large',    0);
-
   @include ui.def('font-family-primary', 'HelveticaNowText');
   @include ui.def('font-family-secondary', 'HelveticaNowDisplay');
-
   @include ui.define-color-token('text',     ui.color('primary', 'pure'     ));
   @include ui.def               ('text-opacity-10',                .10);
   @include ui.define-color-token('text-a10', ui.color('primary', $alpha: .10));
@@ -85,7 +80,7 @@
 }
 
 @mixin control-height-tokens() {
-  @each $name, $value in ui.$controlHeights {
+  @each $name, $value in ui.$controlHeightsMap {
     @include ui.def('control-height-#{$name}', $value);
   }
 }
@@ -105,7 +100,6 @@
 @mixin input-dropzone-tokens() {
   @include ui.define-color-token('dropzone-focus-border-color', ui.color('primary'));
   @include ui.def('dropzone-focus-border-size', ui.q(.25));
-
   @include ui.define-color-token('dropzone-border-color', ui.color('bg-light'));
   @include ui.def('dropzone-border-size', 1px);
 }
@@ -113,16 +107,13 @@
 @mixin input-tokens() {
   @include ui.define-color-token('input-placeholder', ui.color('primary', $alpha: .4));
   @include ui.define-color-token('input-placeholder-hover', ui.color('primary', $alpha: .6));
-
   @include ui.define-color-token('input-text', ui.color('primary'));
   @include ui.define-color-token('input-background', ui.color('bg'));
-
   @include ui.def('input-border-size', 1px);
   @include ui.define-color-token('input-border', ui.color('bg-light'));
   @include ui.define-color-token('input-hover-border', ui.color('primary', $alpha: .1));
   @include ui.define-color-token('input-focus-border', ui.color('bg-dark'));
   @include ui.define-color-token('input-disabled-border', ui.color('bg-light'));
-
   @include ui.define-color-token('input-onlight-border', ui.color('primary', $alpha: .1));
   @include ui.define-color-token('input-onlight-hover-border', ui.color('primary', $alpha: .2));
   @include ui.define-color-token('input-onlight-focus-border', ui.color('primary', $alpha: .2));
@@ -151,19 +142,15 @@
 
 @mixin info-panel-tokens() {
   @include ui.def('info-panel-focus-border-size', ui.q(.25));
-
   @include ui.define-color-token('info-panel-border', ui.color('primary', 950, .7));
   @include ui.define-color-token('info-panel-background', ui.color('primary', 950, .1));
   @include ui.define-color-token('info-panel-background-hover', ui.color('primary', 950, .2));
-
   @include ui.define-color-token('info-panel-error-border', ui.color('red'));
   @include ui.define-color-token('info-panel-error-background', ui.color('red', $alpha: .2));
   @include ui.define-color-token('info-panel-error-background-hover', ui.color('red', $alpha: .4));
-
   @include ui.define-color-token('info-panel-success-border', ui.color('green'));
   @include ui.define-color-token('info-panel-success-background', ui.color('green', $alpha: .2));
   @include ui.define-color-token('info-panel-success-background-hover', ui.color('green', $alpha: .4));
-
   @include ui.define-color-token('info-panel-warning-border', ui.color('yellow'));
   @include ui.define-color-token('info-panel-warning-background', ui.color('yellow', $alpha: .2));
   @include ui.define-color-token('info-panel-warning-background-hover', ui.color('yellow', $alpha: .4));
@@ -172,18 +159,13 @@
 @mixin tabular-tokens() {
   @include ui.define-color-token('tabular-color-dark', ui.color('primary'));
   @include ui.define-color-token('tabular-color-light', ui.color('accent'));
-
   @include ui.def('tabular-notification-gap', ui.q(.75));
-
   @include ui.def('tabular-small-item-height', ui.q(5));
   @include ui.def('tabular-small-item-padding', ui.offset('medium'));
-
   @include ui.def('tabular-medium-item-height', ui.q(7.5));
   @include ui.def('tabular-medium-item-padding', ui.offset('medium'));
-
   @include ui.def('tabular-large-item-height', ui.q(10));
   @include ui.def('tabular-large-item-padding', ui.offset('medium'));
-
   @include ui.def('tabular-item-border-size', ui.q(.25));
 }
 
@@ -214,7 +196,6 @@
 
 @mixin button-tokens() {
   @include ui.define-color-token('button-focus-outline', ui.color('primary', $alpha: .5));
-
   @include ui.define-color-token('button-text', ui.color('primary'));
   @include ui.define-color-token('button-border', transparent);
   @include ui.define-color-token('button-background', ui.color('primary', $alpha: .15));
@@ -222,7 +203,6 @@
   @include ui.define-color-token('button-hover-background', ui.color('primary', $alpha: .1));
   @include ui.define-color-token('button-active-border', ui.color('primary', $alpha: .15));
   @include ui.define-color-token('button-active-background', transparent);
-
   @include ui.define-color-token('button-primary-text', ui.color('primary'));
   @include ui.define-color-token('button-primary-border', ui.color('accent'));
   @include ui.define-color-token('button-primary-background', ui.color('accent', $alpha: .4));
@@ -235,7 +215,6 @@
   @include ui.define-color-token('button-primary-disabled-text', ui.color('accent', $alpha: .4));
   @include ui.define-color-token('button-primary-disabled-border', ui.color('accent', $alpha: .4));
   @include ui.define-color-token('button-primary-disabled-background', transparent);
-
   @include ui.define-color-token('button-secondary-text', ui.color('primary'));
   @include ui.define-color-token('button-secondary-border', ui.color('primary'));
   @include ui.define-color-token('button-secondary-background', ui.color('primary', 'pure', 0));
@@ -248,7 +227,6 @@
   @include ui.define-color-token('button-secondary-disabled-text', ui.color('primary', $alpha: .4));
   @include ui.define-color-token('button-secondary-disabled-border', ui.color('primary', $alpha: .4));
   @include ui.define-color-token('button-secondary-disabled-background', transparent);
-
   @include ui.define-color-token('button-onlight-text', ui.color('primary'));
   @include ui.define-color-token('button-onlight-border', ui.color('bg-dark'));
   @include ui.define-color-token('button-onlight-background', ui.color('bg-dark'));
@@ -261,7 +239,6 @@
   @include ui.define-color-token('button-onlight-disabled-text', ui.color('bg-dark', $alpha: .4));
   @include ui.define-color-token('button-onlight-disabled-border', ui.color('bg-dark', $alpha: .4));
   @include ui.define-color-token('button-onlight-disabled-background', transparent);
-
   @include ui.define-color-token('button-linked-text', ui.color('tertiary'));
   @include ui.define-color-token('button-linked-border', transparent);
   @include ui.define-color-token('button-linked-background', transparent);
@@ -274,7 +251,6 @@
   @include ui.define-color-token('button-linked-disabled-text', ui.color('primary', $alpha: .4));
   @include ui.define-color-token('button-linked-disabled-border', transparent);
   @include ui.define-color-token('button-linked-disabled-background', transparent);
-
   @include ui.define-color-token('button-quicklink-text', ui.color('primary'));
   @include ui.define-color-token('button-quicklink-border', transparent);
   @include ui.define-color-token('button-quicklink-background', ui.color('bg-light'));
@@ -293,15 +269,12 @@
   @include ui.define-color-token('badge-success-text', ui.color('green'));
   @include ui.define-color-token('badge-success-background', ui.color('green', $alpha: .2));
   @include ui.define-color-token('badge-success-background-hover', ui.color('green', $alpha: .4));
-
   @include ui.define-color-token('badge-neutral-text', ui.color('secondary'));
   @include ui.define-color-token('badge-neutral-background', ui.color('secondary', $alpha: .2));
   @include ui.define-color-token('badge-neutral-background-hover', ui.color('secondary', $alpha: .4));
-
   @include ui.define-color-token('badge-warning-text', ui.color('yellow'));
   @include ui.define-color-token('badge-warning-background', ui.color('yellow', $alpha: .2));
   @include ui.define-color-token('badge-warning-background-hover', ui.color('yellow', $alpha: .4));
-
   @include ui.define-color-token('badge-error-text', ui.color('red'));
   @include ui.define-color-token('badge-error-background', ui.color('red', $alpha: .2));
   @include ui.define-color-token('badge-error-background-hover', ui.color('red', $alpha: .4));
@@ -317,90 +290,63 @@
  */
 @mixin color-tokens() {
   @include ui.define-color-token('li-marker', ui.color('main', 950, .75));
-
   @include ui.define-color-token('kbd-border', ui.color('main', 300));
   @include ui.define-color-token('kbd-background', ui.color('main', 200));
-
   @include ui.define-color-token('shadow-small', rgba(0, 0, 0, .5));
   @include ui.def('shadow-small', 0 2.5px 5px ui.color-token('shadow-small'));
-
   @include ui.define-color-token('shadow-large', rgba(0, 0, 0, .5));
   @include ui.def('shadow-large', 0 ui.q(2) ui.q(8) 2px ui.color-token('shadow-large'));
 
   // TODO: add text warning, success and error
 
   @include ui.define-color-token('link-hover-decoration', ui.color('primary', 950));
-
   @include ui.define-color-token('scrollbar', ui.color('secondary', $alpha: .4));
   @include ui.define-color-token('scrollbar-hover', ui.color('secondary', $alpha: .6));
   @include ui.define-color-token('scrollbar-active', ui.color('secondary', $alpha: .8));
-
   @include ui.define-color-token('backdrop', ui.color('bg', $alpha: .75));
   @include ui.define-color-token('backdrop-100', ui.color('bg', $alpha: .25));
   @include ui.define-color-token('backdrop-200', ui.color('bg', $alpha: .5));
   @include ui.define-color-token('backdrop-300', ui.color('bg', $alpha: .75));
-
   @include ui.define-color-token('backdrop-shader', ui.color('bg', $alpha: .75));
 
 
   // COMPONENTS
   @include ui.define-color-token('avatar-background', ui.color('main'));
-
-
   @include ui.define-color-token('checkbox-focus-outline', ui.color('primary', $alpha: .5));
   @include ui.define-color-token('checkbox-indicator', ui.color('primary', 800));
-
   @include ui.define-color-token('checkbox-text', ui.color('main', 950));
   @include ui.define-color-token('checkbox-border', ui.color('main', 950, .25));
   @include ui.define-color-token('checkbox-background', ui.color('main', 950, .1));
   @include ui.define-color-token('checkbox-hover-background', ui.color('main', 950, .05));
-
-
   @include ui.define-color-token('flyout-backdrop-background', ui.color('main', 100, .9));
   @include ui.define-color-token('flyout-holder-border', ui.color('main', 100, .25));
   @include ui.define-color-token('flyout-holder-blur-background', ui.color('main', 50, .75));
   @include ui.define-color-token('flyout-holder-unblur-background', ui.color('main'));
-
-
   @include ui.define-color-token('indicator-bright', ui.color('primary'));
   @include ui.define-color-token('indicator-dim', transparent);
-
-
   @include ui.define-color-token('island-border', ui.color('main', 50, .25));
   @include ui.define-color-token('island-blur-background', ui.color('main', 50, .75));
   @include ui.define-color-token('island-unblur-background', ui.color('main', 50, .95));
-
-
   @include ui.define-color-token('loaf-text', ui.color('main', 950, .5));
   @include ui.define-color-token('loaf-background', ui.color('main', 950, .05));
   @include ui.define-color-token('loaf-bright-text', ui.color('main', 950));
-
   @include ui.define-color-token('loaf-gold-text', ui.color('aurum', 500, .5));
   @include ui.define-color-token('loaf-gold-background', ui.color('main', 950, .05));
   @include ui.define-color-token('loaf-gold-bright-text', ui.color('aurum', 500));
-
   @include ui.define-color-token('loaf-error-text', ui.color('error', 500));
   @include ui.define-color-token('loaf-error-background', ui.color('error', 500, .15));
   @include ui.define-color-token('loaf-error-bright-text', ui.color('error', 500));
-
-
   @include ui.define-color-token('navlist-item-border', ui.color('main', 950, .1));
   @include ui.define-color-token('navlist-item-background', transparent);
   @include ui.define-color-token('navlist-item-active-border', transparent);
   @include ui.define-color-token('navlist-item-active-background', ui.color('main', 950, .1));
   @include ui.define-color-token('navlist-item-hover-border', transparent);
   @include ui.define-color-token('navlist-item-hover-background', ui.color('main', 950, .2));
-
-
   @include ui.define-color-token('overlay-backdrop-background', ui.color('bg', $alpha: .65));
-
-
   @include ui.define-color-token('toggle-description-text', ui.color('main', 950, .5));
   @include ui.define-color-token('toggle-border', ui.color('main', 950, .25));
-
   @include ui.define-color-token('toggle-background', ui.color('main', 950, .1));
   @include ui.define-color-token('toggle-hover-background', ui.color('main', 200));
-
   @include ui.define-color-token('toggle-active-text', ui.color('main'));
   @include ui.define-color-token('toggle-active-background', ui.color('main', 950, .75));
 }

package/dist/utils/formatCurrency.d.ts

@@ -0,0 +1,5 @@
+export declare const FREE_PRICE_TEXT = "free";
+export declare function buildCurrencySymbol(currency: string): string;
+export declare const CURRENCY_MAP: Record<string, string>;
+export declare function getCurrencySymbol(currency: string): string;
+export declare const formatCurrency: (price: number, currency: string, fixToTwoDecimalsRaw?: boolean) => string;

package/dist/utils/formatCurrency.js

@@ -0,0 +1,35 @@
+const e = "free";
+function i(t) {
+  return 0 .toLocaleString(
+    "en-US",
+    {
+      style: "currency",
+      currency: t,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }
+  ).replace(/\d/g, "").trim();
+}
+const c = {
+  USD: i("USD"),
+  EUR: i("EUR")
+};
+function C(t) {
+  return c[t] ? c[t] : i(t);
+}
+const S = (t, n, r) => {
+  if (n === "")
+    return e;
+  const m = r === void 0 ? t % 100 !== 0 : r, s = C(n), o = t === 0 ? 0 : t / 100, u = m ? o.toFixed(2) : o, [l, a] = u.toString().split("."), d = [
+    l.replace(/\B(?=(\d{3})+(?!\d))/g, ","),
+    a
+  ].filter(Boolean).join(".");
+  return o === 0 ? e : `${s}${d}`;
+};
+export {
+  c as CURRENCY_MAP,
+  e as FREE_PRICE_TEXT,
+  i as buildCurrencySymbol,
+  S as formatCurrency,
+  C as getCurrencySymbol
+};

package/dist/utils/formatDate.d.ts

@@ -0,0 +1 @@
+export declare function formatDate(date: string | number | null | undefined, noTime?: boolean): string;

package/dist/utils/formatDate.js

@@ -0,0 +1,13 @@
+function r(i, e = !1) {
+  return i ? new Intl.DateTimeFormat(void 0, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: e ? void 0 : "numeric",
+    minute: e ? void 0 : "numeric",
+    second: e ? void 0 : "numeric"
+  }).format(new Date(i)) : "N/A";
+}
+export {
+  r as formatDate
+};

package/dist/utils/hooks/useGlobalKeyboardEvent.js

@@ -1,13 +1,13 @@
-import a from "react";
+import u from "react";
 function o(e, t = "keydown", r) {
-  a.useEffect(() => {
+  u.useEffect(() => {
     const n = (s) => {
       o.shouldProcessEvent(s) && e.current(s);
     };
     return window.addEventListener(t, n, r), () => {
       window.removeEventListener(t, n, r);
     };
-  }, [t, r]);
+  }, [t, r, e]);
 }
 o.shouldProcessEvent = (e) => {
   if (e.target instanceof Element) {

package/dist/utils/hooks/useWindowResize.js

@@ -1,11 +1,11 @@
 import t from "react";
 import { useDynamicRef as i } from "./useDynamicRef.js";
-function c(n) {
-  const r = i(n);
+function c(r) {
+  const e = i(r);
   t.useEffect(() => {
-    const e = () => r.current();
-    return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-  }, []);
+    const n = () => e.current();
+    return window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+  }, [e]);
 }
 export {
   c as useWindowResize

package/dist/utils/string.d.ts

@@ -4,3 +4,4 @@ export declare function replaceRange(str: string, replacement: string, start: nu
 export declare function normalizeSlashes(str: string): string;
 export declare function isTrueString(str: string): boolean;
 export declare function isFalseString(str: string): boolean;
+export declare function capitalize(val: string | number): string;

package/dist/utils/string.js

@@ -1,31 +1,31 @@
 function p(t, e) {
-  const r = t.charCodeAt(e);
-  let n;
-  return r >= 55296 && r <= 56319 && t.length > e + 1 && (n = t.charCodeAt(e + 1), n >= 56320 && n <= 57343) ? t.substring(e, e + 2) : t[e];
+  const n = t.charCodeAt(e);
+  let r;
+  return n >= 55296 && n <= 56319 && t.length > e + 1 && (r = t.charCodeAt(e + 1), r >= 56320 && r <= 57343) ? t.substring(e, e + 2) : t[e];
 }
 function A(t, e) {
   return t[e];
 }
-function b(t, e) {
+function S(t, e) {
   return t - e;
 }
-function C(t, e, r = !1) {
-  const n = r ? p : A, c = e.filter((u, h, g) => g.lastIndexOf(u) !== h ? !1 : u < t.length && u > 0).sort(b);
-  if (c.length === 0)
+function C(t, e, n = !1) {
+  const r = n ? p : A, u = e.filter((c, h, g) => g.lastIndexOf(c) !== h ? !1 : c < t.length && c > 0).sort(S);
+  if (u.length === 0)
     return /* @__PURE__ */ new Map([[0, t]]);
-  const l = /* @__PURE__ */ new Map();
-  let o = "", i = 0, s = 0, a = 0, f = 0;
-  for (; s < t.length; ) {
-    const u = n(t, s);
-    o += u, s += u.length, i += 1, c[a] === i && (l.set(f, o), o = "", f = c[a], a += 1);
+  const i = /* @__PURE__ */ new Map();
+  let l = "", f = 0, o = 0, s = 0, a = 0;
+  for (; o < t.length; ) {
+    const c = r(t, o);
+    l += c, o += c.length, f += 1, u[s] === f && (i.set(a, l), l = "", a = u[s], s += 1);
   }
-  return o && l.set(f, o), l;
+  return l && i.set(a, l), i;
 }
-function I(t, e, r, n) {
-  const c = t.substring(0, r), l = t.substring(n);
-  return `${c}${e}${l}`;
+function b(t, e, n, r) {
+  const u = t.substring(0, n), i = t.substring(r);
+  return `${u}${e}${i}`;
 }
-function S(t) {
+function I(t) {
   return t.replace(/\\/g, "/");
 }
 function d(t) {
@@ -34,11 +34,15 @@ function d(t) {
 function w(t) {
   return !t || t === "false" || t === "0";
 }
+function P(t) {
+  return String(t).charAt(0).toUpperCase() + String(t).slice(1);
+}
 export {
+  P as capitalize,
   w as isFalseString,
   d as isTrueString,
-  S as normalizeSlashes,
-  I as replaceRange,
+  I as normalizeSlashes,
+  b as replaceRange,
   C as splitByIndices,
   p as unicodeCharAt
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "4.3.2",
+  "version": "4.3.4",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",
@@ -15,8 +15,12 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc --p ./tsconfig-build.json && vite build",
-    "lint": "eslint --quiet \"src/**/*{ts,tsx}\" \"lib/**/*{ts,tsx}\"",
-    "lint:fix": "eslint --fix --quiet \"src/**/*{ts,tsx}\" \"lib/**/*{ts,tsx}\"",
+    "lint-es": "eslint --quiet \"src/**/*{ts,tsx}\" \"lib/**/*{ts,tsx}\"",
+    "lint-es:fix": "eslint --fix --quiet \"src/**/*{ts,tsx}\" \"lib/**/*{ts,tsx}\"",
+    "lint-style": "stylelint \"src/**/*{css,scss}\" \"lib/**/*{css,scss}\"",
+    "lint-style:fix": "stylelint --fix \"src/**/*{css,scss}\" \"lib/**/*{css,scss}\"",
+    "lint": "yarn lint-es && yarn lint-style",
+    "lint:fix": "yarn lint-es:fix && yarn lint-style:fix",
     "test": "vitest run",
     "preview": "vite preview",
     "prepublishOnly": "yarn build",
@@ -39,13 +43,13 @@
     "react-window": "^1.8.8"
   },
   "devDependencies": {
-    "@cfx-dev/eslint-config-ui": "^1.1.0",
+    "@cfx-dev/eslint-config-ui": "^1.1.1",
+    "@cfx-dev/stylelint-config-ui": "^1.0.0",
     "@chromatic-com/storybook": "1.5.0",
     "@storybook/addon-essentials": "^8.1.5",
     "@storybook/addon-interactions": "^8.1.5",
     "@storybook/addon-links": "^8.1.5",
     "@storybook/addon-onboarding": "^8.1.5",
-    "@storybook/addons": "^7.6.17",
     "@storybook/blocks": "^8.1.5",
     "@storybook/react": "^8.1.5",
     "@storybook/react-vite": "^8.1.5",
@@ -61,6 +65,7 @@
     "remark-gfm": "^4.0.1",
     "sass": "^1.77.4",
     "storybook": "^8.1.5",
+    "stylelint": "^16.19.1",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1",

package/dist/Rail-DcVowhML.js

@@ -1,81 +0,0 @@
-import { jsx as x } from "react/jsx-runtime";
-import t from "react";
-import { Interactive as w } from "./components/Interactive/Interactive.js";
-import { clsx as g } from "./utils/clsx.js";
-import { clamp01 as C } from "./utils/math.js";
-const P = "cfxui__Scrollable__virtual__355e6", T = "cfxui__Scrollable__root__32c21", R = "cfxui__Scrollable__rail__2624b", M = "cfxui__Scrollable__active__fd553", y = "cfxui__Scrollable__scroller__0d77d", z = "cfxui__Scrollable__content__0fd73", E = "cfxui__Scrollable__thumb__a7819", i = {
-  virtual: P,
-  root: T,
-  rail: R,
-  active: M,
-  scroller: y,
-  "no-x-scroll": "cfxui__Scrollable__no-x-scroll__26dde",
-  "no-y-scroll": "cfxui__Scrollable__no-y-scroll__192e6",
-  content: z,
-  thumb: E,
-  "axis-x": "cfxui__Scrollable__axis-x__f462a",
-  "axis-y": "cfxui__Scrollable__axis-y__e8e3f"
-}, L = {
-  pos: 0,
-  ratio: 1,
-  height: 0,
-  offset: 0,
-  dragging: !1,
-  dragStartAtCursor: 0,
-  dragStartAtPos: 0,
-  movementMultiplier: 1
-};
-function Y(v) {
-  const {
-    axis: n,
-    pos: s,
-    size: o,
-    scrollSize: f,
-    rootRef: m,
-    setRootActive: c,
-    minThumbSize: l
-  } = v, [h, S] = t.useState(!1), e = t.useRef({ ...L }), r = t.useMemo(() => n === "x" ? {
-    sizeCSS: "width",
-    offsetCSSTransform: "translateX",
-    scrollToSide: "left",
-    mousePosAxis: "clientX"
-  } : {
-    sizeCSS: "height",
-    offsetCSSTransform: "translateY",
-    scrollToSide: "top",
-    mousePosAxis: "clientY"
-  }, [n]), b = {
-    [r.sizeCSS]: `${e.current.height}px`,
-    transform: `${r.offsetCSSTransform}(${e.current.offset}px)`
-  }, p = t.useCallback((_) => {
-    e.current.dragging = !0, e.current.dragStartAtPos = e.current.pos, e.current.dragStartAtCursor = _[r.mousePosAxis], S(!0), c(!0);
-  }, [r.mousePosAxis, c]), a = t.useCallback((_) => {
-    var d;
-    if (!e.current.dragging)
-      return;
-    const A = _[r.mousePosAxis] - e.current.dragStartAtCursor;
-    (d = m.current) == null || d.scrollTo({
-      [r.scrollToSide]: e.current.dragStartAtPos + A * e.current.movementMultiplier,
-      behavior: "auto"
-    });
-  }, [r.mousePosAxis, r.scrollToSide, m]), u = t.useCallback(() => {
-    e.current.dragging && (e.current.dragging = !1, S(!1), c(!1));
-  }, [c]);
-  return t.useEffect(() => {
-    e.current.pos = s, e.current.ratio = C(o / f), e.current.height = o * e.current.ratio, e.current.offset = s * e.current.ratio, e.current.height < l && (e.current.height = l, e.current.offset = s * e.current.ratio * ((o - l) / o)), e.current.movementMultiplier = 1 / e.current.ratio;
-  }, [l, s, f, o]), t.useEffect(() => (window.addEventListener("mousemove", a), window.addEventListener("mouseup", u), () => {
-    window.removeEventListener("mousemove", a), window.removeEventListener("mouseup", u);
-  }), [a, u]), /* @__PURE__ */ x("div", { className: g(i.rail, i[`axis-${n}`]), children: /* @__PURE__ */ x(
-    w,
-    {
-      showPointer: !1,
-      style: b,
-      className: g(i.thumb, { [i.active]: h }),
-      onMouseDown: p
-    }
-  ) });
-}
-export {
-  Y as R,
-  i as s
-};

package/dist/Table.module-DHI1mXN2.js

@@ -1,17 +0,0 @@
-const _ = "cfxui__Table__tableIcon__f8e96", e = "cfxui__Table__iconButton__ac6da", t = "cfxui__Table__tableRoot__4c74e", a = "cfxui__Table__tableHeader__a6fa6", l = "cfxui__Table__sticky__fe0cf", c = "cfxui__Table__tableCell__bf8d9", o = "cfxui__Table__tableBody__508b5", b = "cfxui__Table__tableRow__ede78", n = "cfxui__Table__normal__eab0a", i = "cfxui__Table__large__e3861", s = "cfxui__Table__selected__e347d", f = "cfxui__Table__interactive__94da5", u = {
-  tableIcon: _,
-  iconButton: e,
-  tableRoot: t,
-  tableHeader: a,
-  sticky: l,
-  tableCell: c,
-  tableBody: o,
-  tableRow: b,
-  normal: n,
-  large: i,
-  selected: s,
-  interactive: f
-};
-export {
-  u as s
-};

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

@@ -1,72 +0,0 @@
-import { jsx as B } from "react/jsx-runtime";
-import R from "react";
-import { clsx as C } from "../../../utils/clsx.js";
-import { ui as o } from "../../../utils/ui/ui.js";
-const S = "cfxui__Box__root__299ae", k = "cfxui__Box__grow__7ee8d", e = {
-  root: S,
-  "full-width": "cfxui__Box__full-width__2b253",
-  "fit-content-width": "cfxui__Box__fit-content-width__eff85",
-  "full-height": "cfxui__Box__full-height__1d61f",
-  "no-overflow": "cfxui__Box__no-overflow__68f14",
-  "no-shrink": "cfxui__Box__no-shrink__fbd72",
-  grow: k,
-  "no-grow": "cfxui__Box__no-grow__7c039"
-}, h = (t) => t;
-function N(t) {
-  const {
-    noOverflow: a = !1,
-    noShrink: c = !1,
-    grow: s = void 0,
-    width: l,
-    height: n,
-    children: g,
-    className: x,
-    fullWidth: d,
-    fullHeight: w,
-    fitContentWidth: u,
-    flex: _,
-    display: f,
-    style: p,
-    ref: m,
-    as: v = "div",
-    ...r
-  } = t, y = C(
-    e.root,
-    x,
-    o.getResponsiveClassnames("width", l),
-    o.getResponsiveClassnames("height", n),
-    o.getResponsiveClassnames("flex", _),
-    o.getResponsiveClassnames("display", f),
-    o.getAllMPClassnames(r),
-    {
-      [e["full-width"]]: d,
-      [e["full-height"]]: w,
-      [e["fit-content-width"]]: u,
-      [e["no-overflow"]]: a,
-      [e["no-shrink"]]: c,
-      [e["no-grow"]]: s === !1,
-      [e.grow]: s === !0
-    }
-  ), i = {
-    ...o.getResponsiveStyles("width", l),
-    ...o.getResponsiveStyles("height", n),
-    ...o.getResponsiveStyles("flex", _, h),
-    ...o.getResponsiveStyles("display", f, h),
-    ...o.getAllMPStyles(r),
-    ...p || {}
-  };
-  return !i.width && s === !0 && (i.width = "1px"), /* @__PURE__ */ B(
-    v,
-    {
-      ref: m,
-      className: y,
-      style: i,
-      children: g
-    }
-  );
-}
-const W = R.memo(N);
-export {
-  W as default,
-  h as stringPropFormater
-};