@cfx-dev/ui-components 5.0.21 → 5.0.23

package/dist/styles-scss/_ui.scss

@@ -127,12 +127,6 @@ $cfxuiColorAlpha: (
   '10': 0.1,
 );
 
-@mixin define-font-size($name, $size, $line-height: 1.3, $paragraph-spacing: 0) {
-  @include def('font-size-#{$name}', $size);
-  @include def('line-height-#{$name}', $line-height);
-  @include def('paragraph-spacing-#{$name}', $paragraph-spacing);
-}
-
 @mixin define-color($name, $color, $bg, $fg) {
   .cfx-color-#{$name} {
     color: $color;
@@ -511,3 +505,189 @@ $mpMap: (
   pb: padding-bottom,
   pl: padding-left,
 );
+
+@mixin define-vars-from-map($prefix: '', $spacerMap, $media: 'initial') {
+  @each $name, $value in $spacerMap {
+    $fullName: '#{$name}-#{$media}';
+    $prefixedName: $name;
+    $prefixedFullName: $fullName;
+
+    @if $prefix != '' {
+      $prefixedName: '#{$prefix}-#{$name}';
+      $prefixedFullName: '#{$prefix}-#{$fullName}';
+    }
+
+    @include def('#{$prefixedFullName}', $value);
+  }
+
+  @include media-min($media) {
+    @each $name, $value in $spacerMap {
+      $fullName: '#{$name}-#{$media}';
+      $prefixedName: $name;
+      $prefixedFullName: $fullName;
+
+      @if $prefix != '' {
+        $prefixedName: '#{$prefix}-#{$name}';
+        $prefixedFullName: '#{$prefix}-#{$fullName}';
+      }
+
+      @include def('#{$prefixedName}', use('#{$prefixedFullName}'));
+    }
+  }
+}
+
+@mixin define-font-size($name, $size, $line-height: 1.3, $paragraph-spacing: 0) {
+  @include def('font-size-#{$name}', $size);
+  @include def('line-height-#{$name}', $line-height);
+  @include def('paragraph-spacing-#{$name}', $paragraph-spacing);
+}
+
+@mixin define-font-sizes($sizesMap, $media: 'initial') {
+  @each $name, $values in $sizesMap {
+    $fullName: '#{$name}-#{$media}';
+
+    @include def('font-size-#{$fullName}', list.nth($values, 1));
+    @include def('line-height-#{$fullName}', list.nth($values, 2));
+    @include def('paragraph-spacing-#{$fullName}', list.nth($values, 3));
+  }
+
+  @include media-min($media) {
+    @each $name, $values in $sizesMap {
+      $fullName: '#{$name}-#{$media}';
+
+      @include def('font-size-#{$name}', use('font-size-#{$fullName}'));
+      @include def('line-height-#{$name}', use('line-height-#{$fullName}'));
+      @include def('paragraph-spacing-#{$name}', use('paragraph-spacing-#{$fullName}'));
+    }
+  }
+}
+
+// Return a list of values: (font-size, line-height, paragraph-spacing)
+@function get-font-size($size, $line-height: 1.3, $paragraph-spacing: 0) {
+  @return ($size, $line-height, $paragraph-spacing);
+}
+
+$fontSizeMapInitial: (
+  'xxxsmall': get-font-size(gs(140), 1.3, gs(100)),
+  'xxsmall': get-font-size(gs(120), 1.5, gs(110)),
+  'xsmall': get-font-size(gs(140), 1.5, gs(110)),
+  'small': get-font-size(gs(160), 1.5, gs(150)),
+  'medium': get-font-size(gs(200), 1.3, gs(100)),
+  'large': get-font-size(gs(240), 1.2, gs(110)),
+  'xlarge': get-font-size(gs(250), 1.2, gs(110)),
+  'xxlarge': get-font-size(gs(350), 1.2, gs(120)),
+  'xxxlarge': get-font-size(gs(400), 1.1, gs(140)),
+  'xxxxlarge': get-font-size(gs(450), 1.1, gs(200)),
+);
+$fontSizeMapTablet: (
+  'xxxsmall': get-font-size(gs(140), 1.3, gs(100)),
+  'xxsmall': get-font-size(gs(120), 1.5, gs(110)),
+  'xsmall': get-font-size(gs(140), 1.5, gs(110)),
+  'small': get-font-size(gs(160), 1.5, gs(150)),
+  'medium': get-font-size(gs(200), 1.3, gs(100)),
+  'large': get-font-size(gs(240), 1.2, gs(110)),
+  'xlarge': get-font-size(gs(300), 1.2, gs(140)),
+  'xxlarge': get-font-size(gs(400), 1.2, gs(150)),
+  'xxxlarge': get-font-size(gs(700), 1.1, gs(300)),
+  'xxxxlarge': get-font-size(gs(800), 1.1, gs(350)),
+);
+$fontSizeMapDesktop: (
+  'xxxsmall': get-font-size(gs(140), 1.3, gs(100)),
+  'xxsmall': get-font-size(gs(140), 1.5, gs(110)),
+  'xsmall': get-font-size(gs(160), 1.5, gs(120)),
+  'small': get-font-size(gs(180), 1.5, gs(160)),
+  'medium': get-font-size(gs(240), 1.3, gs(110)),
+  'large': get-font-size(gs(300), 1.2, gs(200)),
+  'xlarge': get-font-size(gs(400), 1.2, gs(180)),
+  'xxlarge': get-font-size(gs(500), 1.2, gs(200)),
+  'xxxlarge': get-font-size(gs(1000), 1.1, gs(400)),
+  'xxxxlarge': get-font-size(gs(1200), 1.1, gs(500)),
+);
+$fontSizeMapLargeDesktop: (
+  'xxxsmall': get-font-size(gs(140), 1.3, gs(100)),
+  'xxsmall': get-font-size(gs(140), 1.5, gs(110)),
+  'xsmall': get-font-size(gs(160), 1.5, gs(120)),
+  'small': get-font-size(gs(180), 1.5, gs(160)),
+  'medium': get-font-size(gs(240), 1.3, gs(110)),
+  'large': get-font-size(gs(300), 1.2, gs(200)),
+  'xlarge': get-font-size(gs(400), 1.2, gs(180)),
+  'xxlarge': get-font-size(gs(500), 1.2, gs(200)),
+  'xxxlarge': get-font-size(gs(1000), 1.1, gs(400)),
+  'xxxxlarge': get-font-size(gs(1200), 1.1, gs(500)),
+);
+
+// Spacer tokens
+$spacerMapInitial: (
+  'xxsmall': gs(100),
+  'xsmall': gs(180),
+  'small': gs(200),
+  'medium': gs(300),
+  'large': gs(400),
+  'xlarge': gs(600),
+  'xxlarge': gs(700),
+  'xxxlarge': gs(800),
+  'xxxxlarge': gs(1000),
+  'xxxxxlarge': gs(1200),
+);
+$spacerMapTablet: (
+  'xxsmall': gs(100),
+  'xsmall': gs(180),
+  'small': gs(200),
+  'medium': gs(300),
+  'large': gs(400),
+  'xlarge': gs(600),
+  'xxlarge': gs(700),
+  'xxxlarge': gs(800),
+  'xxxxlarge': gs(1000),
+  'xxxxxlarge': gs(1200),
+);
+$spacerMapDesktop: (
+  'xxsmall': gs(120),
+  'xsmall': gs(200),
+  'small': gs(300),
+  'medium': gs(400),
+  'large': gs(600),
+  'xlarge': gs(800),
+  'xxlarge': gs(1000),
+  'xxxlarge': gs(1200),
+  'xxxxlarge': gs(1800),
+  'xxxxxlarge': gs(2400),
+);
+$spacerMapLargeDesktop: (
+  'xxsmall': gs(120),
+  'xsmall': gs(200),
+  'small': gs(300),
+  'medium': gs(400),
+  'large': gs(600),
+  'xlarge': gs(800),
+  'xxlarge': gs(1000),
+  'xxxlarge': gs(1200),
+  'xxxxlarge': gs(1800),
+  'xxxxxlarge': gs(2400),
+);
+
+// Controls size tokens
+$controlSizeMapInitial: (
+  'button-height': q(5.75),
+  'button-padding-sides': spacing(200),
+  'main-nav-height': q(7.5),
+  'sub-nav-height': gs(7),
+);
+$controlSizeMapTablet: (
+  'button-height': q(5.75),
+  'button-padding-sides': spacing(200),
+  'main-nav-height': q(7.5),
+  'sub-nav-height': gs(7),
+);
+$controlSizeMapDesktop: (
+  'button-height': q(7),
+  'button-padding-sides': spacing(400),
+  'main-nav-height': q(10),
+  'sub-nav-height': gs(9),
+);
+$controlSizeMapLargeDesktop: (
+  'button-height': q(7),
+  'button-padding-sides': spacing(400),
+  'main-nav-height': q(10),
+  'sub-nav-height': gs(9),
+);

package/dist/styles-scss/tokens.scss

@@ -84,59 +84,10 @@
 }
 
 @mixin text-responsive-tokens() {
-  // Mobile sizes
-  @include ui.define-font-size('xxxsmall', ui.gs(140), 1.3, ui.gs(100));
-  @include ui.define-font-size('xxsmall', ui.gs(120), 1.5, ui.gs(110));
-  @include ui.define-font-size('xsmall', ui.gs(140), 1.5, ui.gs(110));
-  @include ui.define-font-size('small', ui.gs(160), 1.5, ui.gs(150));
-  @include ui.define-font-size('medium', ui.gs(200), 1.3, ui.gs(100));
-  @include ui.define-font-size('large', ui.gs(240), 1.2, ui.gs(110));
-  @include ui.define-font-size('xlarge', ui.gs(250), 1.2, ui.gs(110));
-  @include ui.define-font-size('xxlarge', ui.gs(350), 1.2, ui.gs(120));
-  @include ui.define-font-size('xxxlarge', ui.gs(400), 1.1, ui.gs(140));
-  @include ui.define-font-size('xxxxlarge', ui.gs(450), 1.1, ui.gs(200));
-
-  // Tablet sizes
-  @include ui.media-min('medium') {
-    @include ui.define-font-size('xxxsmall', ui.gs(140), 1.3, ui.gs(100));
-    @include ui.define-font-size('xxsmall', ui.gs(120), 1.5, ui.gs(110));
-    @include ui.define-font-size('xsmall', ui.gs(140), 1.5, ui.gs(110));
-    @include ui.define-font-size('small', ui.gs(160), 1.5, ui.gs(150));
-    @include ui.define-font-size('medium', ui.gs(200), 1.3, ui.gs(100));
-    @include ui.define-font-size('large', ui.gs(240), 1.2, ui.gs(110));
-    @include ui.define-font-size('xlarge', ui.gs(300), 1.2, ui.gs(140));
-    @include ui.define-font-size('xxlarge', ui.gs(400), 1.2, ui.gs(150));
-    @include ui.define-font-size('xxxlarge', ui.gs(700), 1.1, ui.gs(300));
-    @include ui.define-font-size('xxxxlarge', ui.gs(800), 1.1, ui.gs(350));
-  }
-
-  // Desktop sizes
-  @include ui.media-min('large') {
-    @include ui.define-font-size('xxxsmall', ui.gs(140), 1.3, ui.gs(100));
-    @include ui.define-font-size('xxsmall', ui.gs(140), 1.5, ui.gs(110));
-    @include ui.define-font-size('xsmall', ui.gs(160), 1.5, ui.gs(120));
-    @include ui.define-font-size('small', ui.gs(180), 1.5, ui.gs(160));
-    @include ui.define-font-size('medium', ui.gs(240), 1.3, ui.gs(110));
-    @include ui.define-font-size('large', ui.gs(300), 1.2, ui.gs(200));
-    @include ui.define-font-size('xlarge', ui.gs(400), 1.2, ui.gs(180));
-    @include ui.define-font-size('xxlarge', ui.gs(500), 1.2, ui.gs(200));
-    @include ui.define-font-size('xxxlarge', ui.gs(1000), 1.1, ui.gs(400));
-    @include ui.define-font-size('xxxxlarge', ui.gs(1200), 1.1, ui.gs(500));
-  }
-
-  // Large Desktop sizes - same as desktop
-  @include ui.media-min('xlarge') {
-    @include ui.define-font-size('xxxsmall', ui.gs(140), 1.3, ui.gs(100));
-    @include ui.define-font-size('xxsmall', ui.gs(140), 1.5, ui.gs(110));
-    @include ui.define-font-size('xsmall', ui.gs(160), 1.5, ui.gs(120));
-    @include ui.define-font-size('small', ui.gs(180), 1.5, ui.gs(160));
-    @include ui.define-font-size('medium', ui.gs(240), 1.3, ui.gs(110));
-    @include ui.define-font-size('large', ui.gs(300), 1.2, ui.gs(200));
-    @include ui.define-font-size('xlarge', ui.gs(400), 1.2, ui.gs(180));
-    @include ui.define-font-size('xxlarge', ui.gs(500), 1.2, ui.gs(200));
-    @include ui.define-font-size('xxxlarge', ui.gs(1000), 1.1, ui.gs(400));
-    @include ui.define-font-size('xxxxlarge', ui.gs(1200), 1.1, ui.gs(500));
-  }
+  @include ui.define-font-sizes(ui.$fontSizeMapInitial, 'initial');
+  @include ui.define-font-sizes(ui.$fontSizeMapTablet, 'medium');
+  @include ui.define-font-sizes(ui.$fontSizeMapDesktop, 'large');
+  @include ui.define-font-sizes(ui.$fontSizeMapLargeDesktop, 'xlarge');
 }
 
 @mixin offset-tokens() {
@@ -152,59 +103,10 @@
 }
 
 @mixin spacer-tokens() {
-  // Mobile sizes
-  @include ui.def('spacer-xxsmall', ui.gs(100));
-  @include ui.def('spacer-xsmall', ui.gs(180));
-  @include ui.def('spacer-small', ui.gs(200));
-  @include ui.def('spacer-medium', ui.gs(300));
-  @include ui.def('spacer-large', ui.gs(400));
-  @include ui.def('spacer-xlarge', ui.gs(600));
-  @include ui.def('spacer-xxlarge', ui.gs(700));
-  @include ui.def('spacer-xxxlarge', ui.gs(800));
-  @include ui.def('spacer-xxxxlarge', ui.gs(1000));
-  @include ui.def('spacer-xxxxxlarge', ui.gs(1200));
-
-  // Tablet sizes
-  @include ui.media-min('medium') {
-    @include ui.def('spacer-xxsmall', ui.gs(100));
-    @include ui.def('spacer-xsmall', ui.gs(180));
-    @include ui.def('spacer-small', ui.gs(200));
-    @include ui.def('spacer-medium', ui.gs(300));
-    @include ui.def('spacer-large', ui.gs(400));
-    @include ui.def('spacer-xlarge', ui.gs(600));
-    @include ui.def('spacer-xxlarge', ui.gs(700));
-    @include ui.def('spacer-xxxlarge', ui.gs(800));
-    @include ui.def('spacer-xxxxlarge', ui.gs(1000));
-    @include ui.def('spacer-xxxxxlarge', ui.gs(1200));
-  }
-
-  // Desktop sizes
-  @include ui.media-min('large') {
-    @include ui.def('spacer-xxsmall', ui.gs(120));
-    @include ui.def('spacer-xsmall', ui.gs(200));
-    @include ui.def('spacer-small', ui.gs(300));
-    @include ui.def('spacer-medium', ui.gs(400));
-    @include ui.def('spacer-large', ui.gs(600));
-    @include ui.def('spacer-xlarge', ui.gs(800));
-    @include ui.def('spacer-xxlarge', ui.gs(1000));
-    @include ui.def('spacer-xxxlarge', ui.gs(1200));
-    @include ui.def('spacer-xxxxlarge', ui.gs(1800));
-    @include ui.def('spacer-xxxxxlarge', ui.gs(2400));
-  }
-
-  // Large Desktop sizes
-  @include ui.media-min('xlarge') {
-    @include ui.def('spacer-xxsmall', ui.gs(120));
-    @include ui.def('spacer-xsmall', ui.gs(200));
-    @include ui.def('spacer-small', ui.gs(300));
-    @include ui.def('spacer-medium', ui.gs(400));
-    @include ui.def('spacer-large', ui.gs(600));
-    @include ui.def('spacer-xlarge', ui.gs(800));
-    @include ui.def('spacer-xxlarge', ui.gs(1000));
-    @include ui.def('spacer-xxxlarge', ui.gs(1200));
-    @include ui.def('spacer-xxxxlarge', ui.gs(1800));
-    @include ui.def('spacer-xxxxxlarge', ui.gs(2400));
-  }
+  @include ui.define-vars-from-map('spacer', ui.$spacerMapInitial, 'initial');
+  @include ui.define-vars-from-map('spacer', ui.$spacerMapTablet, 'medium');
+  @include ui.define-vars-from-map('spacer', ui.$spacerMapDesktop, 'large');
+  @include ui.define-vars-from-map('spacer', ui.$spacerMapLargeDesktop, 'xlarge');
 }
 
 @mixin control-tokens() {
@@ -214,35 +116,10 @@
     @include ui.def('control-height-#{$name}', $value);
   }
 
-  // Mobile sizes
-  @include ui.def('button-height', ui.q(5.75));
-  @include ui.def('button-padding-sides', ui.spacing(200));
-  @include ui.def('main-nav-height', ui.q(7.5));
-  @include ui.def('sub-nav-height', ui.gs(7));
-
-  // Tablet sizes
-  @include ui.media-min('medium') {
-    @include ui.def('button-height', ui.q(5.75));
-    @include ui.def('button-padding-sides', ui.spacing(200));
-    @include ui.def('main-nav-height', ui.q(7.5));
-    @include ui.def('sub-nav-height', ui.gs(7));
-  }
-
-  // Desktop sizes
-  @include ui.media-min('large') {
-    @include ui.def('button-height', ui.q(7));
-    @include ui.def('button-padding-sides', ui.spacing(400));
-    @include ui.def('main-nav-height', ui.q(10));
-    @include ui.def('sub-nav-height', ui.gs(9));
-  }
-
-  // Large Desktop sizes
-  @include ui.media-min('xlarge') {
-    @include ui.def('button-height', ui.q(7));
-    @include ui.def('button-padding-sides', ui.spacing(400));
-    @include ui.def('main-nav-height', ui.q(10));
-    @include ui.def('sub-nav-height', ui.gs(9));
-  }
+  @include ui.define-vars-from-map('', ui.$controlSizeMapInitial, 'initial');
+  @include ui.define-vars-from-map('', ui.$controlSizeMapTablet, 'medium');
+  @include ui.define-vars-from-map('', ui.$controlSizeMapDesktop, 'large');
+  @include ui.define-vars-from-map('', ui.$controlSizeMapLargeDesktop, 'xlarge');
 }
 
 // Components tokens

package/dist/utils/contexts/AnalyticsContext/AnalyticsContext.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+
+export type AnalyticsEvent = {
+    action: string;
+    properties?: Record<string, unknown>;
+};
+export type AnalyticsContextValue = {
+    trackEvent: (event: AnalyticsEvent) => void;
+    getParamsFromElementEvent: (event: React.MouseEvent<HTMLElement>) => Record<string, unknown>;
+};
+declare const AnalyticsContext: React.Context<AnalyticsContextValue>;
+export default AnalyticsContext;

package/dist/utils/contexts/AnalyticsContext/AnalyticsContext.js

@@ -0,0 +1,9 @@
+import t from "react";
+const a = t.createContext({
+  trackEvent: () => {
+  },
+  getParamsFromElementEvent: () => ({})
+});
+export {
+  a as default
+};

package/dist/utils/contexts/AnalyticsContext/AnalyticsProvider.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { AnalyticsEvent } from './AnalyticsContext';
+
+interface AnalyticsProviderProps {
+    children: ReactNode;
+    onTrackEvent: (event: AnalyticsEvent) => void;
+}
+export declare function AnalyticsProvider({ children, onTrackEvent, }: AnalyticsProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/utils/contexts/AnalyticsContext/AnalyticsProvider.js

@@ -0,0 +1,33 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useCallback as n, useMemo as l } from "react";
+import u from "./AnalyticsContext.js";
+function g({
+  children: s,
+  onTrackEvent: o
+}) {
+  const r = n(
+    (e) => {
+      o(e);
+    },
+    [o]
+  ), a = n((e) => {
+    var m;
+    const t = e.target;
+    return {
+      tagName: t.tagName,
+      text: ((m = t.textContent) == null ? void 0 : m.trim()) || "",
+      id: t.id || void 0,
+      className: t.className || void 0
+    };
+  }, []), i = l(
+    () => ({
+      trackEvent: r,
+      getParamsFromElementEvent: a
+    }),
+    [r, a]
+  );
+  return /* @__PURE__ */ c(u.Provider, { value: i, children: s });
+}
+export {
+  g as AnalyticsProvider
+};

package/dist/utils/contexts/AnalyticsContext/index.d.ts

@@ -0,0 +1,6 @@
+import { default as AnalyticsContext } from './AnalyticsContext';
+import { AnalyticsProvider } from './AnalyticsProvider';
+import { default as useAnalytics } from './useAnalytics';
+import { default as useSiteLinkClick } from './useSiteLinkClick';
+
+export { AnalyticsContext, AnalyticsProvider, useAnalytics, useSiteLinkClick, };

package/dist/utils/contexts/AnalyticsContext/index.js

@@ -0,0 +1,10 @@
+import { default as o } from "./AnalyticsContext.js";
+import { AnalyticsProvider as a } from "./AnalyticsProvider.js";
+import { default as f } from "./useAnalytics.js";
+import { default as l } from "./useSiteLinkClick.js";
+export {
+  o as AnalyticsContext,
+  a as AnalyticsProvider,
+  f as useAnalytics,
+  l as useSiteLinkClick
+};

package/dist/utils/contexts/AnalyticsContext/useAnalytics.d.ts

@@ -0,0 +1 @@
+export default function useAnalytics(): import('./AnalyticsContext').AnalyticsContextValue;

package/dist/utils/contexts/AnalyticsContext/useAnalytics.js

@@ -0,0 +1,8 @@
+import { useContext as t } from "react";
+import o from "./AnalyticsContext.js";
+function r() {
+  return t(o);
+}
+export {
+  r as default
+};

package/dist/utils/contexts/AnalyticsContext/useSiteLinkClick.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+interface UseSiteLinkClickProps {
+    stopPropagation?: boolean;
+}
+export default function useSiteLinkClick({ stopPropagation, }?: UseSiteLinkClickProps): (event: React.MouseEvent<HTMLAnchorElement>) => void;
+export {};

package/dist/utils/contexts/AnalyticsContext/useSiteLinkClick.js

@@ -0,0 +1,22 @@
+import { useContext as o, useCallback as r } from "react";
+import a from "./AnalyticsContext.js";
+function l({
+  stopPropagation: t = !1
+} = {}) {
+  const {
+    trackEvent: e,
+    getParamsFromElementEvent: i
+  } = o(a);
+  return r(
+    (n) => {
+      t && n.stopPropagation(), e({
+        action: "site_link_click",
+        properties: i(n)
+      });
+    },
+    [e, i, t]
+  );
+}
+export {
+  l as default
+};

package/dist/utils/contexts/MediaQueryContext/MediaQueryContext.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+export interface MediaQueryContextValueType {
+    isMobile: boolean | null;
+    isTablet: boolean | null;
+    isDesktop: boolean | null;
+    isLDesktop: boolean | null;
+    size: number | null;
+}
+declare const MediaQueryContext: React.Context<MediaQueryContextValueType>;
+export default MediaQueryContext;

package/dist/utils/contexts/MediaQueryContext/MediaQueryContext.js

@@ -0,0 +1,11 @@
+import e from "react";
+const t = e.createContext({
+  isMobile: null,
+  isTablet: null,
+  isDesktop: null,
+  isLDesktop: null,
+  size: null
+});
+export {
+  t as default
+};

package/dist/utils/contexts/MediaQueryContext/MediaQueryContextProvider.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+
+declare const _default: React.NamedExoticComponent<{
+    children?: React.ReactNode | undefined;
+}>;
+export default _default;

package/dist/utils/contexts/MediaQueryContext/MediaQueryContextProvider.js

@@ -0,0 +1,38 @@
+import { jsx as a } from "react/jsx-runtime";
+import r from "react";
+import "../../ui/ui.js";
+import { MediaQueryValuesMap as t } from "../../ui/ui.types.js";
+import d from "./MediaQueryContext.js";
+function m(o) {
+  const {
+    children: u
+  } = o, i = r.useRef(null), [e, s] = r.useState(null);
+  r.useLayoutEffect(() => {
+    const n = () => {
+      typeof window > "u" || (i.current && clearTimeout(i.current), i.current = setTimeout(() => {
+        s(window.innerWidth);
+      }, 250));
+    };
+    return window.addEventListener("resize", n), n(), () => {
+      window.removeEventListener("resize", n);
+    };
+  }, []);
+  const l = r.useMemo(() => e === null ? {
+    size: null,
+    isMobile: null,
+    isTablet: null,
+    isDesktop: null,
+    isLDesktop: null
+  } : {
+    size: e,
+    isMobile: e < t.medium,
+    isTablet: e >= t.medium && e < t.large,
+    isDesktop: e >= t.large && e < t.xlarge,
+    isLDesktop: e >= t.xlarge
+  }, [e]);
+  return /* @__PURE__ */ a(d.Provider, { value: l, children: u });
+}
+const M = r.memo(m);
+export {
+  M as default
+};

package/dist/utils/contexts/MediaQueryContext/index.d.ts

@@ -0,0 +1,4 @@
+export { default as MediaQueryContext } from './MediaQueryContext';
+export { default as MediaQueryContextProvider } from './MediaQueryContextProvider';
+export { default as useMediaQuery } from './useMediaQuery';
+export type { MediaQueryContextValueType } from './MediaQueryContext';

package/dist/utils/contexts/MediaQueryContext/index.js

@@ -0,0 +1,8 @@
+import { default as t } from "./MediaQueryContext.js";
+import { default as o } from "./MediaQueryContextProvider.js";
+import { default as u } from "./useMediaQuery.js";
+export {
+  t as MediaQueryContext,
+  o as MediaQueryContextProvider,
+  u as useMediaQuery
+};

package/dist/utils/contexts/MediaQueryContext/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+declare function useMediaQuery(): import('./MediaQueryContext').MediaQueryContextValueType;
+export default useMediaQuery;

package/dist/utils/contexts/MediaQueryContext/useMediaQuery.js

@@ -0,0 +1,8 @@
+import e from "react";
+import t from "./MediaQueryContext.js";
+function u() {
+  return e.useContext(t);
+}
+export {
+  u as default
+};

package/dist/utils/contexts/StoreContext/StoreContext.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export type StoreSpliceType = (start: number, end?: number) => void;
+export interface StoreContextValueType<T> {
+    data: T[];
+    push: (items: T[]) => void;
+    unshift: (items: T[]) => void;
+    clear: () => void;
+    splice: StoreSpliceType;
+    lastUpdate: number;
+    isLoadingCount: number | null;
+    setIsLoadingCount: (count: number | null) => void;
+}
+declare function createStoreContext<T>(initialValue: T[]): React.Context<StoreContextValueType<T>>;
+export default createStoreContext;

package/dist/utils/contexts/StoreContext/StoreContext.js

@@ -0,0 +1,21 @@
+import e from "react";
+function n(t) {
+  return e.createContext({
+    data: t,
+    push: () => {
+    },
+    unshift: () => {
+    },
+    clear: () => {
+    },
+    splice: () => {
+    },
+    lastUpdate: 0,
+    isLoadingCount: null,
+    setIsLoadingCount: () => {
+    }
+  });
+}
+export {
+  n as default
+};

package/dist/utils/contexts/StoreContext/index.d.ts

@@ -0,0 +1,2 @@
+export { default as createStoreContext } from './StoreContext';
+export type { StoreContextValueType, StoreSpliceType } from './StoreContext';

package/dist/utils/contexts/StoreContext/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./StoreContext.js";
+export {
+  o as createStoreContext
+};

package/dist/utils/formatBytes.d.ts

@@ -0,0 +1 @@
+export declare function formatBytes(bytes: number, decimals?: number): string;

package/dist/utils/formatBytes.js

@@ -0,0 +1,12 @@
+function f(t, o = 2) {
+  if (!t || t === 0)
+    return "0 Bytes";
+  const r = 1024;
+  if (t < r)
+    return `${t} Bytes`;
+  const n = t / r;
+  return n < r ? `${n.toFixed(o)} KB` : `${(n / r).toFixed(o)} MB`;
+}
+export {
+  f as formatBytes
+};