@cfx-dev/ui-components 4.5.21 → 5.0.1

package/dist/styles-scss/tokens.scss

@@ -29,6 +29,16 @@
   }
 }
 
+@mixin paragraph-spacing-tokens() {
+  @each $name, $value in ui.$mediaMap {
+    @include ui.media-min($name) {
+      p.ui-paragraph-spacing-#{$name} + p {
+        margin-top: var(--paragraph-spacing-#{$name});
+      }
+    }
+  }
+}
+
 @mixin anchor-tokens() {
   @include ui.define-color-token('anchor-focus-outline', ui.color('primary', $alpha: 0.5));
   @include ui.def('anchor-outline-size', ui.q(0.25));
@@ -42,17 +52,24 @@
 
 // font size is responsive, and one size in different media queries can have different values
 @mixin text-tokens() {
+  // Weight
   @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-regular', 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);
+
+  // Letter spacing
+  @include ui.def('letter-spacing-small', -0.025em);
   @include ui.def('letter-spacing-large', 0);
   @include ui.def('letter-spacing-xlarge', 1px);
+
+  // Family
   @include ui.def('font-family-primary', 'HelveticaNowText');
   @include ui.def('font-family-secondary', 'HelveticaNowDisplay');
+
+  // Colors
   @include ui.define-color-token('text', ui.color('primary', 'pure'));
   @include ui.def('text-opacity-10', 0.1);
   @include ui.define-color-token('text-a10', ui.color('primary', $alpha: 0.1));
@@ -62,59 +79,61 @@
   @include ui.define-color-token('text-a50', ui.color('primary', $alpha: 0.5));
   @include ui.def('text-opacity-75', 0.75);
   @include ui.define-color-token('text-a75', ui.color('primary', $alpha: 0.75));
+}
 
-  // Mobile font sizes
-  @include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
-  @include ui.define-font-size('xxsmall', ui.q(1.5), 1.5);
-  @include ui.define-font-size('xsmall', ui.q(1.75), 1.5);
-  @include ui.define-font-size('small', ui.q(2), 1.5);
-  @include ui.define-font-size('normal', ui.q(2), 1.5);
-  @include ui.define-font-size('medium', ui.q(2.5), 1.2);
-  @include ui.define-font-size('large', ui.q(3), 1.2);
-  @include ui.define-font-size('xlarge', ui.q(4), 1.2);
-  @include ui.define-font-size('xxlarge', ui.q(5), 1.2);
-  @include ui.define-font-size('xxxlarge', ui.q(7), 1.2);
-
-  // Tablet font sizes
+@mixin text-responsive-tokens() {
+  // Mobile sizes
+  @include ui.define-font-size('xxxsmall', ui.gs(110), 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.q(1.5), 1.5);
-    @include ui.define-font-size('xxsmall', ui.q(1.5), 1.5);
-    @include ui.define-font-size('xsmall', ui.q(1.75), 1.5);
-    @include ui.define-font-size('small', ui.q(2), 1.5);
-    @include ui.define-font-size('normal', ui.q(2), 1.5);
-    @include ui.define-font-size('medium', ui.q(2.5), 1.3);
-    @include ui.define-font-size('large', ui.q(3), 1.3);
-    @include ui.define-font-size('xlarge', ui.q(4), 1.3);
-    @include ui.define-font-size('xxlarge', ui.q(5), 1.3);
-    @include ui.define-font-size('xxxlarge', ui.q(7), 1.2);
+    @include ui.define-font-size('xxxsmall', ui.gs(110), 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 font sizes
+  // Desktop sizes
   @include ui.media-min('large') {
-    @include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
-    @include ui.define-font-size('xxsmall', ui.q(1.75), 1.5);
-    @include ui.define-font-size('xsmall', ui.q(2), 1.5);
-    @include ui.define-font-size('small', ui.q(2.25), 1.5);
-    @include ui.define-font-size('normal', ui.q(2.25), 1.5);
-    @include ui.define-font-size('medium', ui.q(2.5), 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(7.5), 1.2);
+    @include ui.define-font-size('xxxsmall', ui.gs(110), 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(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 font sizes - same as desktop
-  @include ui.media-min('xlg') {
-    @include ui.define-font-size('xxxsmall', ui.q(1.5), 1.5);
-    @include ui.define-font-size('xxsmall', ui.q(1.75), 1.5);
-    @include ui.define-font-size('xsmall', ui.q(2), 1.5);
-    @include ui.define-font-size('small', ui.q(2.25), 1.5);
-    @include ui.define-font-size('normal', ui.q(2.25), 1.5);
-    @include ui.define-font-size('medium', ui.q(2.5), 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(7.5), 1.2);
+  // Large Desktop sizes - same as desktop
+  @include ui.media-min('xlarge') {
+    @include ui.define-font-size('xxxsmall', ui.gs(110), 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(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));
   }
 }
 
@@ -124,12 +143,98 @@
   }
 }
 
+@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));
+  }
+}
+
 @mixin control-tokens() {
   @include ui.define-color-token('control-focus-outline', ui.color('primary', $alpha: 0.5));
 
   @each $name, $value in ui.$controlHeightsMap {
     @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));
+  }
 }
 
 // Components tokens
@@ -168,22 +273,22 @@
 }
 
 @mixin accordion-tokens() {
-  @include ui.define-color-token('accordion-border-color', ui.color('secondary', $alpha: 0.1));
-  @include ui.define-color-token('accordion-border-hover-color', ui.color('primary'));
+  @include ui.define-color-token('accordion-border-color', ui.color('secondary', $alpha: 0.2));
+  @include ui.define-color-token('accordion-border-hover-color', ui.color('secondary', $alpha: 0.4));
   @include ui.def('accordion-border-size', 1px);
   @include ui.def('accordion-border-hover-size', ui.q(0.25));
 }
 
 @mixin select-tokens() {
-  @include ui.define-color-token('interactive-list-background', ui.color('bg-light'));
+  @include ui.define-color-token('interactive-list-background', ui.color('bg'));
   @include ui.define-color-token('interactive-list-item-background', transparent);
-  @include ui.define-color-token('interactive-list-item-hover-background', ui.color('bg-light', 700, 1));
+  @include ui.define-color-token('interactive-list-item-hover-background', ui.color('secondary', $alpha: 0.2));
   @include ui.define-color-token('interactive-list-item-active-background', ui.color('bg-light', 700, 0.5));
 }
 
 @mixin icon-tokens() {
   @include ui.def('icon-big-size-small', ui.q(6));
-  @include ui.def('icon-big-size-normal', ui.q(8));
+  @include ui.def('icon-big-size-medium', ui.q(8));
   @include ui.def('icon-big-size-large', ui.q(12));
 }
 

package/dist/utils/ui/index.d.ts

@@ -1,3 +1,3 @@
 export { ui } from './ui';
-export { OffsetEnum, MediaQueryEnum, MediaQueryValuesMap, BorderRadiusEnum, ZIndexEnum, ColorEnum, TextSizeEnum, } from './ui.types';
-export type { OffsetType, MediaQueryType, ResponsiveOffsetType, ResponsiveValueType, MPProps, BorderRadiusType, ZIndexType, ColorType, TextSize, OpacityRange, } from './ui.types';
+export { OffsetEnum, MediaQueryEnum, MediaQueryValuesMap, BorderRadiusEnum, ZIndexEnum, ColorEnum, TextSizeEnum, SpacerEnum, SpacingEnum, } from './ui.types';
+export type { OffsetType, SpacerType, SpacingType, MediaQueryType, ResponsiveOffsetType, ResponsiveSizeUnitType, ResponsiveValueType, MPProps, BorderRadiusType, ZIndexType, ColorType, TextSize, OpacityRange, } from './ui.types';

package/dist/utils/ui/index.js

@@ -1,12 +1,14 @@
-import { ui as r } from "./ui.js";
-import { BorderRadiusEnum as n, ColorEnum as o, MediaQueryEnum as E, MediaQueryValuesMap as a, OffsetEnum as d, TextSizeEnum as i, ZIndexEnum as f } from "./ui.types.js";
+import { ui as m } from "./ui.js";
+import { BorderRadiusEnum as r, ColorEnum as E, MediaQueryEnum as a, MediaQueryValuesMap as o, OffsetEnum as i, SpacerEnum as d, SpacingEnum as p, TextSizeEnum as f, ZIndexEnum as t } from "./ui.types.js";
 export {
-  n as BorderRadiusEnum,
-  o as ColorEnum,
-  E as MediaQueryEnum,
-  a as MediaQueryValuesMap,
-  d as OffsetEnum,
-  i as TextSizeEnum,
-  f as ZIndexEnum,
-  r as ui
+  r as BorderRadiusEnum,
+  E as ColorEnum,
+  a as MediaQueryEnum,
+  o as MediaQueryValuesMap,
+  i as OffsetEnum,
+  d as SpacerEnum,
+  p as SpacingEnum,
+  f as TextSizeEnum,
+  t as ZIndexEnum,
+  m as ui
 };

package/dist/utils/ui/ui.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { BorderRadiusType, MPProps, OffsetType, ResponsiveOffsetType, ResponsiveValueType, TextSize, ZIndexType } from './ui.types';
+import { BorderRadiusType, MPProps, OffsetType, ResponsiveSizeUnitType, ResponsiveSizeValueType, ResponsiveValueType, SpacerType, SpacingType, TextSize, ZIndexType } from './ui.types';
 
 export declare namespace ui {
     /**
@@ -10,7 +10,10 @@ export declare namespace ui {
     export function fontSize(size?: TextSize): string;
     export function zindex(name?: ZIndexType): string;
     export function lineHeight(size?: TextSize): string;
+    export function paragraphSpacing(size?: TextSize): string;
     export function borderRadius(size?: BorderRadiusType): string;
+    export function spacer(value: SpacerType): string;
+    export function spacing(value: SpacingType): string;
     export function color(name: string, variantRaw?: string | number, alpha?: number): string;
     export namespace cls {
         const fullWidth = "util-full-width";
@@ -34,7 +37,9 @@ export declare namespace ui {
     export function getResponsiveFlatClassnames<T = string | number>(name: string, value?: ResponsiveValueType<T>, formatter?: (val: T) => string): string[];
     export function offsetResponsiveValueFormatter(value: OffsetType | number): string;
     export const getOffsetStyles: (name: string, value?: ResponsiveValueType<OffsetType | number>) => React.CSSProperties;
-    type CallbackType<T> = (name: string, value: ResponsiveOffsetType) => T;
+    export function responsiveSizeValueFormatter(value: ResponsiveSizeValueType): string;
+    export const getSizeStyles: (name: string, value?: ResponsiveValueType<ResponsiveSizeValueType>) => React.CSSProperties;
+    type CallbackType<T> = (name: string, value: ResponsiveSizeUnitType) => T;
     export function callAllMPProps<T extends object>(props: Partial<MPProps>, callback: CallbackType<T>): T;
     export const optimizeMPProps: (props: Partial<MPProps>) => Partial<MPProps>;
     export const getAllMPStyles: (props: Partial<MPProps>) => React.CSSProperties;

package/dist/utils/ui/ui.js

@@ -1,77 +1,95 @@
-import { clsx as m } from "../clsx.js";
-var d;
-((t) => {
+import { clsx as y } from "../clsx.js";
+import { isInEnum as b } from "../enum.js";
+import { SpacerEnum as F, SpacingEnum as M } from "./ui.types.js";
+var h;
+((r) => {
   function f(e = 1) {
     return `calc(var(--quant) * ${e})`;
   }
-  t.q = f;
-  function p(e) {
+  r.q = f;
+  function a(e) {
     return `var(--offset-${e})`;
   }
-  t.offset = p;
-  function b(e = "normal") {
+  r.offset = a;
+  function S(e = "medium") {
     return `var(--font-size-${e})`;
   }
-  t.fontSize = b;
-  function y(e = "first") {
+  r.fontSize = S;
+  function x(e = "first") {
     return `var(--zindex-${e})`;
   }
-  t.zindex = y;
-  function g(e = "normal") {
+  r.zindex = x;
+  function z(e = "medium") {
     return `var(--line-height-${e})`;
   }
-  t.lineHeight = g;
-  function x(e = "normal") {
+  r.lineHeight = z;
+  function P(e = "medium") {
+    return `var(--paragraph-spacing-${e})`;
+  }
+  r.paragraphSpacing = P;
+  function R(e = "medium") {
     return `var(--border-radius-${e})`;
   }
-  t.borderRadius = x;
-  function h(e, r, o = 1) {
-    let n = r;
-    return n === "pure" && (n = ""), typeof n == "number" && (n = `${n}`), `rgba(var(--color-${e}${n ? `-${n}` : ""}), ${o})`;
+  r.borderRadius = R;
+  function c(e) {
+    return `var(--spacer-${e})`;
+  }
+  r.spacer = c;
+  function m(e) {
+    return `var(--spacing-${e})`;
   }
-  t.color = h, ((e) => {
+  r.spacing = m;
+  function A(e, t, i = 1) {
+    let n = t;
+    return n === "pure" && (n = ""), typeof n == "number" && (n = `${n}`), `rgba(var(--color-${e}${n ? `-${n}` : ""}), ${i})`;
+  }
+  r.color = A, ((e) => {
     e.fullWidth = "util-full-width", e.fullHeight = "util-full-height", e.flexGrow = "util-flex-grow", e.flexNoShrink = "util-flex-no-shrink", e.userSelectableText = "util-text-selectable", e.zIndex9000 = "util-z-index-9000";
-  })(t.cls || (t.cls = {})), t.pc = (e) => `${e}%`, t.px = (e) => `${e}px`, t.ch = (e) => `${e}ch`, t.em = (e) => `${e}em`, t.rem = (e) => `${e}rem`, t.vh = (e) => `${e}vh`, t.vw = (e) => `${e}vw`, t.url = (e) => `url(${e})`;
-  function l(e) {
+  })(r.cls || (r.cls = {})), r.pc = (e) => `${e}%`, r.px = (e) => `${e}px`, r.ch = (e) => `${e}ch`, r.em = (e) => `${e}em`, r.rem = (e) => `${e}rem`, r.vh = (e) => `${e}vh`, r.vw = (e) => `${e}vw`, r.url = (e) => `url(${e})`;
+  function p(e) {
     return e == null ? "" : typeof e == "number" ? f(e) : e.toString();
   }
-  t.defaultResponsiveValueFormatter = l;
-  function u(e, r, o = l) {
-    return r == null ? {} : typeof r == "object" && !Array.isArray(r) ? Object.entries(r).reduce((n, [i, s]) => (n[`--${e}-${i}`] = o(s), n), {}) : {
-      [`--${e}-initial`]: o(r)
+  r.defaultResponsiveValueFormatter = p;
+  function l(e, t, i = p) {
+    return t == null ? {} : typeof t == "object" && !Array.isArray(t) ? Object.entries(t).reduce((n, [s, o]) => (n[`--${e}-${s}`] = i(o), n), {}) : {
+      [`--${e}-initial`]: i(t)
     };
   }
-  t.getResponsiveStyles = u;
-  function c(e, r) {
-    return r == null ? "" : typeof r == "object" && !Array.isArray(r) ? m(Object.keys(r).map((o) => `ui-${e}-${o}`)) : `ui-${e}-initial`;
+  r.getResponsiveStyles = l;
+  function u(e, t) {
+    return t == null ? "" : typeof t == "object" && !Array.isArray(t) ? y(Object.keys(t).map((i) => `ui-${e}-${i}`)) : `ui-${e}-initial`;
   }
-  t.getResponsiveClassnames = c;
-  function P(e, r, o = l) {
-    return r == null ? [] : typeof r == "object" && !Array.isArray(r) ? Object.entries(r).reduce((n, [i, s]) => (n.push(`${e}-${i}-${o(s)}`), n), []) : [`${e}-initial-${o(r)}`];
+  r.getResponsiveClassnames = u;
+  function j(e, t, i = p) {
+    return t == null ? [] : typeof t == "object" && !Array.isArray(t) ? Object.entries(t).reduce((n, [s, o]) => (n.push(`${e}-${s}-${i(o)}`), n), []) : [`${e}-initial-${i(t)}`];
   }
-  t.getResponsiveFlatClassnames = P;
+  r.getResponsiveFlatClassnames = j;
   function $(e) {
-    return typeof e == "number" ? f(e) : p(e);
+    return typeof e == "number" ? f(e) : a(e);
+  }
+  r.offsetResponsiveValueFormatter = $, r.getOffsetStyles = (e, t) => l(e, t, $);
+  function g(e) {
+    return typeof e == "number" ? f(e) : b(e, F) ? c(e) : b(e, M) ? m(e) : e;
   }
-  t.offsetResponsiveValueFormatter = $, t.getOffsetStyles = (e, r) => u(e, r, $);
-  function a(e, r) {
-    return Object.entries(e).reduce((o, [n, i]) => (Object.assign(o, r(n, i)), o), {});
+  r.responsiveSizeValueFormatter = g, r.getSizeStyles = (e, t) => l(e, t, g);
+  function d(e, t) {
+    return Object.entries(e).reduce((i, [n, s]) => (Object.assign(i, t(n, s)), i), {});
   }
-  t.callAllMPProps = a, t.optimizeMPProps = (e) => {
+  r.callAllMPProps = d, r.optimizeMPProps = (e) => {
     const {
-      px: r,
-      py: o,
+      px: t,
+      py: i,
       mx: n,
-      my: i,
-      ...s
+      my: s,
+      ...o
     } = e;
-    return r && (s.pr = r, s.pl = r), o && (s.pt = o, s.pb = o), n && (s.mr = n, s.ml = n), i && (s.mt = i, s.mb = i), s;
-  }, t.getAllMPStyles = (e) => a((0, t.optimizeMPProps)(e), t.getOffsetStyles), t.getAllMPClassnames = (e) => m(
-    Object.entries((0, t.optimizeMPProps)(e)).map(
-      ([r, o]) => c(r, o)
+    return t && (o.pr = t, o.pl = t), i && (o.pt = i, o.pb = i), n && (o.mr = n, o.ml = n), s && (o.mt = s, o.mb = s), o;
+  }, r.getAllMPStyles = (e) => d((0, r.optimizeMPProps)(e), r.getSizeStyles), r.getAllMPClassnames = (e) => y(
+    Object.entries((0, r.optimizeMPProps)(e)).map(
+      ([t, i]) => u(t, i)
     )
   );
-})(d || (d = {}));
+})(h || (h = {}));
 export {
-  d as ui
+  h as ui
 };

package/dist/utils/ui/ui.types.d.ts

@@ -20,20 +20,29 @@ export declare enum TextSizeEnum {
     xxsmall = "xxsmall",
     xsmall = "xsmall",
     small = "small",
-    normal = "normal",
     medium = "medium",
     large = "large",
     xlarge = "xlarge",
     xxlarge = "xxlarge",
-    xxxlarge = "xxxlarge"
+    xxxlarge = "xxxlarge",
+    xxxxlarge = "xxxxlarge"
 }
 export type TextSize = keyof typeof TextSizeEnum;
+export declare enum IconSizeEnum {
+    xsmall = "xsmall",
+    small = "small",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge"
+}
+export type IconSizeType = keyof typeof IconSizeEnum;
 export declare enum BorderRadiusEnum {
     none = "none",
-    xxsmall = "xxsmall",
     xsmall = "xsmall",
     small = "small",
-    normal = "normal",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge",
     pill = "pill"
 }
 export type BorderRadiusType = keyof typeof BorderRadiusEnum;
@@ -44,6 +53,9 @@ export declare enum ZIndexEnum {
     max = "max"
 }
 export type ZIndexType = keyof typeof ZIndexEnum;
+export type ResponsiveValueType<T = string | number> = T | {
+    [key in MediaQueryType]?: T;
+};
 export declare enum OffsetEnum {
     none = "none",
     hairthin = "hairthin",
@@ -58,6 +70,41 @@ export declare enum OffsetEnum {
     safezone = "safezone"
 }
 export type OffsetType = keyof typeof OffsetEnum;
+export type ResponsiveOffsetType = ResponsiveValueType<OffsetType | number>;
+export declare enum SpacerEnum {
+    xxsmall = "xxsmall",
+    xsmall = "xsmall",
+    small = "small",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge",
+    xxlarge = "xxlarge",
+    xxxlarge = "xxxlarge",
+    xxxxlarge = "xxxxlarge",
+    xxxxxlarge = "xxxxxlarge"
+}
+export type SpacerType = keyof typeof SpacerEnum;
+export declare enum SpacingEnum {
+    sp25 = "sp25",
+    sp100 = "sp100",
+    sp110 = "sp110",
+    sp150 = "sp150",
+    sp175 = "sp175",
+    sp200 = "sp200",
+    sp250 = "sp250",
+    sp300 = "sp300",
+    sp400 = "sp400",
+    sp450 = "sp450",
+    sp600 = "sp600",
+    sp700 = "sp700",
+    sp800 = "sp800",
+    sp900 = "sp900",
+    sp1000 = "sp1000",
+    sp1200 = "sp1200",
+    sp1600 = "sp1600",
+    sp2400 = "sp2400"
+}
+export type SpacingType = keyof typeof SpacingEnum;
 export declare enum MediaQueryEnum {
     initial = "initial",
     small = "small",
@@ -68,25 +115,23 @@ export declare enum MediaQueryEnum {
     xlarge = "xlarge"
 }
 export type MediaQueryType = keyof typeof MediaQueryEnum;
-export declare const MediaQueryValuesMap: Record<MediaQueryType, string>;
-export type ResponsiveValueType<T = string | number> = T | {
-    [key in MediaQueryType]?: T;
-};
-export type ResponsiveOffsetType = ResponsiveValueType<OffsetType | number>;
+export declare const MediaQueryValuesMap: Record<MediaQueryType, number>;
+export type ResponsiveSizeValueType = SpacingType | SpacerType | number;
+export type ResponsiveSizeUnitType = ResponsiveValueType<ResponsiveSizeValueType>;
 export interface MPProps {
-    m?: ResponsiveOffsetType;
-    mt?: ResponsiveOffsetType;
-    mr?: ResponsiveOffsetType;
-    mb?: ResponsiveOffsetType;
-    ml?: ResponsiveOffsetType;
-    my?: ResponsiveOffsetType;
-    mx?: ResponsiveOffsetType;
-    p?: ResponsiveOffsetType;
-    pt?: ResponsiveOffsetType;
-    pr?: ResponsiveOffsetType;
-    pb?: ResponsiveOffsetType;
-    pl?: ResponsiveOffsetType;
-    py?: ResponsiveOffsetType;
-    px?: ResponsiveOffsetType;
+    m?: ResponsiveSizeUnitType;
+    mt?: ResponsiveSizeUnitType;
+    mr?: ResponsiveSizeUnitType;
+    mb?: ResponsiveSizeUnitType;
+    ml?: ResponsiveSizeUnitType;
+    my?: ResponsiveSizeUnitType;
+    mx?: ResponsiveSizeUnitType;
+    p?: ResponsiveSizeUnitType;
+    pt?: ResponsiveSizeUnitType;
+    pr?: ResponsiveSizeUnitType;
+    pb?: ResponsiveSizeUnitType;
+    pl?: ResponsiveSizeUnitType;
+    py?: ResponsiveSizeUnitType;
+    px?: ResponsiveSizeUnitType;
 }
 export type OpacityRange = 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;