@cronocode/react-box 2.0.1 → 2.0.3

package/components/baseSvg.d.ts

@@ -3,7 +3,7 @@ import { BoxSvgStyles } from '../core/types';
 import { BoxTagProps } from '../box';
 
 type BoxSvgTagProps = Omit<BoxTagProps<'svg'>, 'viewBox' | 'width' | 'height'>;
-interface Props extends BoxSvgStyles {
+interface Props extends Omit<BoxSvgStyles, 'width' | 'height'> {
     children?: React.ReactNode | ((props: {
         isHover: boolean;
     }) => React.ReactNode);

package/core/boxStyles.d.ts

@@ -68,7 +68,7 @@ export declare const simpleBoxStyles: {
             formatValue: typeof BoxStylesFormatters.Value.widthHeight;
         };
         values2: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values3: {
@@ -83,7 +83,7 @@ export declare const simpleBoxStyles: {
             formatValue: typeof BoxStylesFormatters.Value.widthHeight;
         };
         values2: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values3: {
@@ -98,7 +98,7 @@ export declare const simpleBoxStyles: {
             formatValue: typeof BoxStylesFormatters.Value.widthHeight;
         };
         values2: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values3: {
@@ -113,7 +113,7 @@ export declare const simpleBoxStyles: {
             formatValue: typeof BoxStylesFormatters.Value.widthHeight;
         };
         values2: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values3: {
@@ -128,7 +128,7 @@ export declare const simpleBoxStyles: {
             formatValue: typeof BoxStylesFormatters.Value.widthHeight;
         };
         values2: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values3: {
@@ -143,7 +143,7 @@ export declare const simpleBoxStyles: {
             formatValue: typeof BoxStylesFormatters.Value.widthHeight;
         };
         values2: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values3: {
@@ -166,7 +166,7 @@ export declare const simpleBoxStyles: {
     top: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -179,7 +179,7 @@ export declare const simpleBoxStyles: {
     right: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -192,7 +192,7 @@ export declare const simpleBoxStyles: {
     bottom: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -205,7 +205,7 @@ export declare const simpleBoxStyles: {
     left: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -218,7 +218,7 @@ export declare const simpleBoxStyles: {
     inset: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -231,7 +231,7 @@ export declare const simpleBoxStyles: {
     m: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -244,7 +244,7 @@ export declare const simpleBoxStyles: {
     mx: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -257,7 +257,7 @@ export declare const simpleBoxStyles: {
     my: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -270,7 +270,7 @@ export declare const simpleBoxStyles: {
     mt: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -283,7 +283,7 @@ export declare const simpleBoxStyles: {
     mr: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -296,7 +296,7 @@ export declare const simpleBoxStyles: {
     mb: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -309,7 +309,7 @@ export declare const simpleBoxStyles: {
     ml: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -322,7 +322,7 @@ export declare const simpleBoxStyles: {
     p: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -335,7 +335,7 @@ export declare const simpleBoxStyles: {
     px: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -348,7 +348,7 @@ export declare const simpleBoxStyles: {
     py: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -361,7 +361,7 @@ export declare const simpleBoxStyles: {
     pt: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -374,7 +374,7 @@ export declare const simpleBoxStyles: {
     pr: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -387,7 +387,7 @@ export declare const simpleBoxStyles: {
     pb: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -400,7 +400,7 @@ export declare const simpleBoxStyles: {
     pl: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -413,7 +413,7 @@ export declare const simpleBoxStyles: {
     b: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.px;
         };
         values2: {
@@ -426,7 +426,7 @@ export declare const simpleBoxStyles: {
     bx: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.px;
         };
         values2: {
@@ -439,7 +439,7 @@ export declare const simpleBoxStyles: {
     by: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.px;
         };
         values2: {
@@ -452,7 +452,7 @@ export declare const simpleBoxStyles: {
     bt: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.px;
         };
         values2: {
@@ -465,7 +465,7 @@ export declare const simpleBoxStyles: {
     br: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.px;
         };
         values2: {
@@ -478,7 +478,7 @@ export declare const simpleBoxStyles: {
     bb: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.px;
         };
         values2: {
@@ -491,7 +491,7 @@ export declare const simpleBoxStyles: {
     bl: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -17, -18, -19, -20, -22, -24, -26, -28, -30, -32, -34, -36, -38, -40, -44, -48, -52, -56, -60, -64, -68, -72, -76, -80, -84, -88, -92, -96, -100];
             formatValue: typeof BoxStylesFormatters.Value.px;
         };
         values2: {
@@ -516,7 +516,7 @@ export declare const simpleBoxStyles: {
     borderRadius: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -529,7 +529,7 @@ export declare const simpleBoxStyles: {
     borderRadiusTop: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -542,7 +542,7 @@ export declare const simpleBoxStyles: {
     borderRadiusRight: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -555,7 +555,7 @@ export declare const simpleBoxStyles: {
     borderRadiusBottom: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -568,7 +568,7 @@ export declare const simpleBoxStyles: {
     borderRadiusLeft: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -581,7 +581,7 @@ export declare const simpleBoxStyles: {
     borderRadiusTopLeft: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -594,7 +594,7 @@ export declare const simpleBoxStyles: {
     borderRadiusTopRight: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -607,7 +607,7 @@ export declare const simpleBoxStyles: {
     borderRadiusBottomLeft: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -620,7 +620,7 @@ export declare const simpleBoxStyles: {
     borderRadiusBottomRight: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -705,7 +705,7 @@ export declare const simpleBoxStyles: {
     fontSize: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.px;
         };
         values2: {
@@ -742,7 +742,7 @@ export declare const simpleBoxStyles: {
     letterSpacing: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.px;
         };
         values2: {
@@ -755,7 +755,7 @@ export declare const simpleBoxStyles: {
     lineHeight: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.px;
         };
         values2: {
@@ -878,7 +878,7 @@ export declare const simpleBoxStyles: {
     gap: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -891,7 +891,7 @@ export declare const simpleBoxStyles: {
     rowGap: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -904,7 +904,7 @@ export declare const simpleBoxStyles: {
     columnGap: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.rem;
         };
         values2: {
@@ -917,7 +917,7 @@ export declare const simpleBoxStyles: {
     order: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
         };
         values2: {
             values: readonly [];
@@ -929,7 +929,7 @@ export declare const simpleBoxStyles: {
     flexGrow: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
         };
         values2: {
             values: readonly [];
@@ -941,7 +941,7 @@ export declare const simpleBoxStyles: {
     flexShrink: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
         };
         values2: {
             values: readonly [];
@@ -977,7 +977,7 @@ export declare const simpleBoxStyles: {
     gridColumns: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.gridColumns;
         };
         values2: {
@@ -990,7 +990,7 @@ export declare const simpleBoxStyles: {
     colSpan: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.gridColumn;
         };
         values2: {
@@ -1004,7 +1004,7 @@ export declare const simpleBoxStyles: {
     colStart: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
         };
         values2: {
             values: readonly [];
@@ -1016,7 +1016,7 @@ export declare const simpleBoxStyles: {
     colEnd: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
         };
         values2: {
             values: readonly [];
@@ -1028,7 +1028,7 @@ export declare const simpleBoxStyles: {
     outline: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.px;
         };
         values2: {
@@ -1053,7 +1053,7 @@ export declare const simpleBoxStyles: {
     outlineOffset: {
         cssNames: string[];
         values1: {
-            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 120, 140, 160, 180, 200, 250, 300];
+            values: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 128, 130, 140, 150, 160, 170, 180, 190, 192, 200, 225, 250, 256, 275, 300, 320, 350, 384, 400];
             formatValue: typeof BoxStylesFormatters.Value.px;
         };
         values2: {
@@ -1103,7 +1103,7 @@ export declare const simpleBoxStyles: {
     appearance: {
         cssNames: string[];
         values1: {
-            values: readonly ["none"];
+            values: readonly ["none", "auto", "menulist-button", "textfield", "button", "checkbox"];
         };
         values2: {
             values: readonly [];

package/core/types.d.ts

@@ -13,15 +13,16 @@ type BoxStyles<T extends Record<string, StyleItem>> = {
     [K in keyof T]?: T[K]['values1']['values'][number] | T[K]['values2']['values'][number] | T[K]['values3']['values'][number];
 };
 type BoxNormalStyles = BoxStyles<typeof simpleBoxStyles> & Augmented.BoxProps;
-interface BoxPseudoClasses {
-    disabled?: boolean | [boolean, BoxNormalStyles];
-    disabledGroup?: string | Record<string, BoxNormalStyles>;
-    hover?: BoxNormalStyles;
-    hoverGroup?: string | Record<string, BoxNormalStyles>;
-    focus?: BoxNormalStyles;
-    focusGroup?: string | Record<string, BoxNormalStyles>;
-    active?: BoxNormalStyles;
-    activeGroup?: string | Record<string, BoxNormalStyles>;
+type SvgNormalStyles = BoxStyles<typeof simpleBoxStyles> & Augmented.SvgProps;
+interface BoxPseudoClasses<T> {
+    disabled?: boolean | [boolean, T];
+    disabledGroup?: string | Record<string, T>;
+    hover?: T;
+    hoverGroup?: string | Record<string, T>;
+    focus?: T;
+    focusGroup?: string | Record<string, T>;
+    active?: T;
+    activeGroup?: string | Record<string, T>;
 }
 interface BoxThemePseudoClassProps {
     hover?: BoxNormalStyles;
@@ -39,18 +40,6 @@ export interface BoxBreakpoints<T = BoxThemeProps> {
     xxl?: T;
 }
 export type BoxThemeProps = BoxNormalStyles & BoxThemePseudoClassProps & BoxBreakpoints;
-export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses & ThemeComponentProps & BoxBreakpoints<BoxStyleProps>;
-interface SvgNormalStyles {
-    rotate?: BoxNormalStyles['rotate'];
-    flip?: BoxNormalStyles['flip'];
-    transitionDuration?: BoxNormalStyles['transitionDuration'];
-    disabledGroup?: Record<string, SvgNormalStyles>;
-    hover?: SvgNormalStyles;
-    hoverGroup?: string | Record<string, SvgNormalStyles>;
-    focus?: SvgNormalStyles;
-    focusGroup?: string | Record<string, SvgNormalStyles>;
-    active?: SvgNormalStyles;
-    activeGroup?: string | Record<string, SvgNormalStyles>;
-}
-export type BoxSvgStyles = SvgNormalStyles & ThemeComponentProps & Augmented.SvgProps;
+export type BoxStyleProps = BoxNormalStyles & BoxPseudoClasses<BoxNormalStyles> & ThemeComponentProps & BoxBreakpoints<BoxStyleProps>;
+export type BoxSvgStyles = SvgNormalStyles & BoxPseudoClasses<SvgNormalStyles> & ThemeComponentProps & BoxBreakpoints<BoxSvgStyles>;
 export {};

package/core.cjs

@@ -1,16 +1,16 @@
-"use strict";const G=require("react"),Y=require("./utils.cjs");var e;(a=>{(u=>{function t(o,m){return`${o}${m.replace("/","-")}`}u.fraction=t;function n(o){return[`${o} path`,`${o} circle`,`${o} rect`,`${o} line`]}u.svg=n})(a.ClassName||(a.ClassName={})),(u=>{function t(l,s){return`${s/4}rem`}u.rem=t;function n(l,s){return`${s}px`}u.px=n;function o(l,s){const[r,i]=s.split("/");return`${+r/+i*100}%`}u.fraction=o;function m(l,s){switch(s){case"fit":return"100%";case"fit-screen":return l.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return s}}u.widthHeight=m;function N(l){return(s,r)=>`var(--${l}${r});`}u.variables=N;function T(l){return(s,r)=>`var(--${l}${r});`}u.svgVariables=T;function S(l,s){return`repeat(${s},minmax(0,1fr))`}u.gridColumns=S;function c(l,s){return s==="full-row"?"1/-1":`span ${s}/span ${s}`}u.gridColumn=c;function f(l,s){return`${s}ms`}u.ms=f;function b(l,s){return`${s}deg`}u.rotate=b;function d(l,s){return s==="xAxis"?"-1 1":"1 -1"}u.flip=d})(a.Value||(a.Value={}))})(e||(e={}));const v=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,22,24,26,28,30,32,34,36,38,40,42,44,46,48,50,52,54,56,58,60,64,68,72,76,80,84,88,92,96,100,120,140,160,180,200,250,300],ae=[-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-11,-12,-13,-14,-15,-16,-17,-18,-19,-20,-22,-24,-26,-28,-30,-32,-34,-36,-38,-40,-44,-48,-52,-56,-60,-64,-68,-72,-76,-80,-84,-88,-92,-96,-100],h=[...v,...ae],W=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],P=["auto","hidden","scroll","visible"],z=["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],I=["fit","fit-screen","auto","fit-content","max-content","min-content"],K=["auto","flex-start","flex-end","center","baseline","stretch"],le={display:{cssNames:["display"],values1:{values:["none","block","inline-block","flex","inline-flex","grid","inline-grid","contents"]},values2:{values:[]},values3:{values:[]}},inline:{cssNames:["display"],values1:{values:[!0],formatValue:()=>"inline-block"},values2:{values:[]},values3:{values:[]}},boxSizing:{cssNames:["box-sizing"],values1:{values:["border-box","content-box"]},values2:{values:[]},values3:{values:[]}},width:{cssNames:["width"],values1:{values:I,formatValue:e.Value.widthHeight},values2:{values:v,formatValue:e.Value.rem},values3:{values:z,formatValue:e.Value.fraction}},minWidth:{cssNames:["min-width"],values1:{values:I,formatValue:e.Value.widthHeight},values2:{values:v,formatValue:e.Value.rem},values3:{values:z,formatValue:e.Value.fraction}},maxWidth:{cssNames:["max-width"],values1:{values:I,formatValue:e.Value.widthHeight},values2:{values:v,formatValue:e.Value.rem},values3:{values:z,formatValue:e.Value.fraction}},height:{cssNames:["height"],values1:{values:I,formatValue:e.Value.widthHeight},values2:{values:v,formatValue:e.Value.rem},values3:{values:z,formatValue:e.Value.fraction}},minHeight:{cssNames:["min-height"],values1:{values:I,formatValue:e.Value.widthHeight},values2:{values:v,formatValue:e.Value.rem},values3:{values:z,formatValue:e.Value.fraction}},maxHeight:{cssNames:["max-height"],values1:{values:I,formatValue:e.Value.widthHeight},values2:{values:v,formatValue:e.Value.rem},values3:{values:z,formatValue:e.Value.fraction}},position:{cssNames:["position"],values1:{values:["static","relative","absolute","fixed","sticky"]},values2:{values:[]},values3:{values:[]}},top:{cssNames:["top"],values1:{values:h,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},right:{cssNames:["right"],values1:{values:h,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},bottom:{cssNames:["bottom"],values1:{values:h,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},left:{cssNames:["left"],values1:{values:h,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},inset:{cssNames:["inset"],values1:{values:h,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},m:{cssNames:["margin"],values1:{values:h,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mx:{cssNames:["margin-inline"],values1:{values:h,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},my:{cssNames:["margin-block"],values1:{values:h,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mt:{cssNames:["margin-top"],values1:{values:h,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mr:{cssNames:["margin-right"],values1:{values:h,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mb:{cssNames:["margin-bottom"],values1:{values:h,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},ml:{cssNames:["margin-left"],values1:{values:h,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},p:{cssNames:["padding"],values1:{values:h,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},px:{cssNames:["padding-inline"],values1:{values:h,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},py:{cssNames:["padding-block"],values1:{values:h,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pt:{cssNames:["padding-top"],values1:{values:h,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pr:{cssNames:["padding-right"],values1:{values:h,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pb:{cssNames:["padding-bottom"],values1:{values:h,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pl:{cssNames:["padding-left"],values1:{values:h,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},b:{cssNames:["border-width"],values1:{values:v,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bx:{cssNames:["border-inline-width"],values1:{values:h,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},by:{cssNames:["border-block-width"],values1:{values:h,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bt:{cssNames:["border-top-width"],values1:{values:h,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},br:{cssNames:["border-right-width"],values1:{values:h,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bb:{cssNames:["border-bottom-width"],values1:{values:h,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bl:{cssNames:["border-left-width"],values1:{values:h,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderStyle:{cssNames:["border-style"],values1:{values:W},values2:{values:[]},values3:{values:[]}},borderRadius:{cssNames:["border-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTop:{cssNames:["border-top-left-radius","border-top-right-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusRight:{cssNames:["border-top-right-radius","border-bottom-right-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottom:{cssNames:["border-bottom-left-radius","border-bottom-right-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusLeft:{cssNames:["border-top-left-radius","border-bottom-left-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopLeft:{cssNames:["border-top-left-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopRight:{cssNames:["border-top-right-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomLeft:{cssNames:["border-bottom-left-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomRight:{cssNames:["border-bottom-right-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},cursor:{cssNames:["cursor"],values1:{values:["auto","default","none","context-menu","help","pointer","progress","wait","cell","crosshair","text","vertical-text","alias","copy","move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize","s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","col-resize","row-resize","all-scroll","zoom-in","zoom-out","grab","grabbing"]},values2:{values:[]},values3:{values:[]}},zIndex:{cssNames:["z-index"],values1:{values:[1,2,3,4,5,10,11,12,13,14,15,100,101,102,103,104,105,1e3,1001,1002,1003,1004,1005]},values2:{values:[]},values3:{values:[]}},overflow:{cssNames:["overflow"],values1:{values:P},values2:{values:[]},values3:{values:[]}},overflowX:{cssNames:["overflow-x"],values1:{values:P},values2:{values:[]},values3:{values:[]}},overflowY:{cssNames:["overflow-y"],values1:{values:P},values2:{values:[]},values3:{values:[]}},opacity:{cssNames:["opacity"],values1:{values:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]},values2:{values:[]},values3:{values:[]}},fontSize:{cssNames:["font-size"],values1:{values:v,formatValue:e.Value.px},values2:{values:["inherit"]},values3:{values:[]}},fontStyle:{cssNames:["font-style"],values1:{values:["italic","normal","oblique"]},values2:{values:[]},values3:{values:[]}},fontWeight:{cssNames:["font-weight"],values1:{values:[100,200,300,400,500,600,700,800,900]},values2:{values:[]},values3:{values:[]}},letterSpacing:{cssNames:["letter-spacing"],values1:{values:v,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},lineHeight:{cssNames:["line-height"],values1:{values:v,formatValue:e.Value.px},values2:{values:["font-size"],formatValue:()=>"1"},values3:{values:[]}},textDecoration:{cssNames:["text-decoration"],values1:{values:["none","underline","overline","line-through"]},values2:{values:[]},values3:{values:[]}},textTransform:{cssNames:["text-transform"],values1:{values:["none","capitalize","lowercase","uppercase"]},values2:{values:[]},values3:{values:[]}},textAlign:{cssNames:["text-align"],values1:{values:["left","right","center","justify"]},values2:{values:[]},values3:{values:[]}},flexWrap:{cssNames:["flex-wrap"],values1:{values:["nowrap","wrap","wrap-reverse"]},values2:{values:[]},values3:{values:[]}},jc:{cssNames:["justify-content"],values1:{values:["start","end","flex-start","flex-end","center","left","right","space-between","space-around","space-evenly","stretch"]},values2:{values:[]},values3:{values:[]}},ai:{cssNames:["align-items"],values1:{values:["stretch","flex-start","flex-end","center","baseline","start","end","self-start","self-end"]},values2:{values:[]},values3:{values:[]}},alignContent:{cssNames:["align-content"],values1:{values:["flex-start","flex-end","center","space-between","space-around","space-evenly","stretch","start","end","baseline"]},values2:{values:[]},values3:{values:[]}},flex1:{cssNames:["flex"],values1:{values:[!0],formatValue:()=>"1"},values2:{values:[]},values3:{values:[]}},d:{cssNames:["flex-direction"],values1:{values:["row","row-reverse","column","column-reverse"]},values2:{values:[]},values3:{values:[]}},gap:{cssNames:["gap"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},rowGap:{cssNames:["row-gap"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},columnGap:{cssNames:["column-gap"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},order:{cssNames:["order"],values1:{values:v},values2:{values:[]},values3:{values:[]}},flexGrow:{cssNames:["flex-grow"],values1:{values:v},values2:{values:[]},values3:{values:[]}},flexShrink:{cssNames:["flex-shrink"],values1:{values:v},values2:{values:[]},values3:{values:[]}},alignSelf:{cssNames:["align-self"],values1:{values:K},values2:{values:[]},values3:{values:[]}},justifySelf:{cssNames:["justify-self"],values1:{values:K},values2:{values:[]},values3:{values:[]}},gridColumns:{cssNames:["grid-template-columns"],values1:{values:v,formatValue:e.Value.gridColumns},values2:{values:[]},values3:{values:[]}},colSpan:{cssNames:["grid-column"],values1:{values:v,formatValue:e.Value.gridColumn},values2:{values:["full-row"],formatValue:e.Value.gridColumn},values3:{values:[]}},colStart:{cssNames:["grid-column-start"],values1:{values:v},values2:{values:[]},values3:{values:[]}},colEnd:{cssNames:["grid-column-end"],values1:{values:v},values2:{values:[]},values3:{values:[]}},outline:{cssNames:["outline-width"],values1:{values:v,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},outlineStyle:{cssNames:["outline-style"],values1:{values:W},values2:{values:[]},values3:{values:[]}},outlineOffset:{cssNames:["outline-offset"],values1:{values:v,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},transition:{cssNames:["transition-property"],values1:{values:["none","all"]},values2:{values:[]},values3:{values:[]}},transitionDuration:{cssNames:["transition-duration"],values1:{values:[50,100,150,200,250,300,350,400,450,500,550,600,650,700,750,800,850,900,950,1e3],formatValue:e.Value.ms},values2:{values:[]},values3:{values:[]}},userSelect:{cssNames:["user-select"],values1:{values:["none","auto","text","all"]},values2:{values:[]},values3:{values:[]}},appearance:{cssNames:["appearance"],values1:{values:["none"]},values2:{values:[]},values3:{values:[]}},pointerEvents:{cssNames:["pointer-events"],values1:{values:["none","auto","all"]},values2:{values:[]},values3:{values:[]}},whiteSpace:{cssNames:["white-space"],values1:{values:["break-spaces","normal","nowrap","pre","pre-line","pre-wrap"]},values2:{values:[]},values3:{values:[]}},textOverflow:{cssNames:["text-overflow"],values1:{values:["clip","ellipsis"]},values2:{values:[]},values3:{values:[]}},rotate:{cssNames:["rotate"],values1:{values:[0,90,180,270,-90,-180,-270],formatValue:e.Value.rotate},values2:{values:[]},values3:{values:[]}},flip:{cssNames:["scale"],values1:{values:["xAxis","yAxis"],formatValue:e.Value.flip},values2:{values:[]},values3:{values:[]}}},M={shadow:{cssNames:["box-shadow"],formatValue:e.Value.variables("shadow")},background:{cssNames:["background"],formatValue:e.Value.variables("background")},backgroundImage:{cssNames:["background-image"],formatValue:e.Value.variables("backgroundImage")},color:{cssNames:["color"],formatValue:e.Value.variables("color")},bgColor:{cssNames:["background-color"],formatValue:e.Value.variables("color")},borderColor:{cssNames:["border-color"],formatValue:e.Value.variables("color")},outlineColor:{cssNames:["outline-color"],formatValue:e.Value.variables("color")}},U={fill:{cssNames:["fill"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg},stroke:{cssNames:["stroke"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg}},D=["Hover","Focus","Active","Checked","Indeterminate","Valid","Invalid","Required","Optional","Disabled"],A=["sm","md","lg","xl","xxl"],ue={sm:640,md:768,lg:1024,xl:1280,xxl:1536};function J(){const a={...le};Object.keys(M).forEach(t=>{a[t]=M[t],a[t].isThemeStyle=!0}),Object.keys(U).forEach(t=>{a[t]=U[t],a[t].isThemeStyle=!0});let u=Object.keys(a);return D.forEach(t=>{u.forEach(n=>{a[`${n}${t}`]={...a[n],pseudoSuffix:t}})}),u=Object.keys(a),A.forEach(t=>{u.forEach(n=>{a[`${t}${n}`]={...a[n],breakpoint:t}})}),a}let C=J();function te(){C=J()}function oe(a,u,t){const n=Object.entries(C).filter(([o,m])=>m.pseudoSuffix===a&&!m.customPseudoSuffix&&!(`${o}${u}`in C)).map(([o])=>o);return n.forEach(o=>{C[`${o}${u}`]={...C[o],customPseudoSuffix:t+u}}),n.map(o=>`${o}${u}`)}class re{constructor(){this._index=0,this._cache={}}getIdentity(u){return this._cache[u]||(this._cache[u]=this.getByIndex(this._index++)),this._cache[u]}getByIndex(u){const{first:t,next:n}=ne,o=u-t.length;if(o<0)return t[u];const m=Math.floor(o/n.length),N=o-m*n.length;return this.getByIndex(m)+n[N]}}const ne={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var _;(a=>{a.boxClassName="_box",a.svgClassName="_svg",a.cronoStylesElementId="crono-styles";const u=`:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;#crono-box {position: absolute;top: 0;left: 0;height: 0;}}
+"use strict";const G=require("react"),Y=require("./utils.cjs");var e;(a=>{(u=>{function t(o,m){return`${o}${m.replace("/","-")}`}u.fraction=t;function n(o){return[`${o} path`,`${o} circle`,`${o} rect`,`${o} line`]}u.svg=n})(a.ClassName||(a.ClassName={})),(u=>{function t(l,s){return`${s/4}rem`}u.rem=t;function n(l,s){return`${s}px`}u.px=n;function o(l,s){const[r,i]=s.split("/");return`${+r/+i*100}%`}u.fraction=o;function m(l,s){switch(s){case"fit":return"100%";case"fit-screen":return l.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return s}}u.widthHeight=m;function N(l){return(s,r)=>`var(--${l}${r});`}u.variables=N;function T(l){return(s,r)=>`var(--${l}${r});`}u.svgVariables=T;function S(l,s){return`repeat(${s},minmax(0,1fr))`}u.gridColumns=S;function c(l,s){return s==="full-row"?"1/-1":`span ${s}/span ${s}`}u.gridColumn=c;function d(l,s){return`${s}ms`}u.ms=d;function h(l,s){return`${s}deg`}u.rotate=h;function f(l,s){return s==="xAxis"?"-1 1":"1 -1"}u.flip=f})(a.Value||(a.Value={}))})(e||(e={}));const v=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,22,24,26,28,30,32,34,36,38,40,42,44,46,48,50,52,54,56,58,60,64,68,72,76,80,84,88,92,96,100,110,120,128,130,140,150,160,170,180,190,192,200,225,250,256,275,300,320,350,384,400],ae=[-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-11,-12,-13,-14,-15,-16,-17,-18,-19,-20,-22,-24,-26,-28,-30,-32,-34,-36,-38,-40,-44,-48,-52,-56,-60,-64,-68,-72,-76,-80,-84,-88,-92,-96,-100],b=[...v,...ae],W=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],P=["auto","hidden","scroll","visible"],z=["1/2","1/3","2/3","1/4","2/4","3/4","1/5","2/5","3/5","4/5","1/6","2/6","3/6","4/6","5/6","1/12","2/12","3/12","4/12","5/12","6/12","7/12","8/12","9/12","10/12","11/12"],I=["fit","fit-screen","auto","fit-content","max-content","min-content"],K=["auto","flex-start","flex-end","center","baseline","stretch"],le={display:{cssNames:["display"],values1:{values:["none","block","inline-block","flex","inline-flex","grid","inline-grid","contents"]},values2:{values:[]},values3:{values:[]}},inline:{cssNames:["display"],values1:{values:[!0],formatValue:()=>"inline-block"},values2:{values:[]},values3:{values:[]}},boxSizing:{cssNames:["box-sizing"],values1:{values:["border-box","content-box"]},values2:{values:[]},values3:{values:[]}},width:{cssNames:["width"],values1:{values:I,formatValue:e.Value.widthHeight},values2:{values:v,formatValue:e.Value.rem},values3:{values:z,formatValue:e.Value.fraction}},minWidth:{cssNames:["min-width"],values1:{values:I,formatValue:e.Value.widthHeight},values2:{values:v,formatValue:e.Value.rem},values3:{values:z,formatValue:e.Value.fraction}},maxWidth:{cssNames:["max-width"],values1:{values:I,formatValue:e.Value.widthHeight},values2:{values:v,formatValue:e.Value.rem},values3:{values:z,formatValue:e.Value.fraction}},height:{cssNames:["height"],values1:{values:I,formatValue:e.Value.widthHeight},values2:{values:v,formatValue:e.Value.rem},values3:{values:z,formatValue:e.Value.fraction}},minHeight:{cssNames:["min-height"],values1:{values:I,formatValue:e.Value.widthHeight},values2:{values:v,formatValue:e.Value.rem},values3:{values:z,formatValue:e.Value.fraction}},maxHeight:{cssNames:["max-height"],values1:{values:I,formatValue:e.Value.widthHeight},values2:{values:v,formatValue:e.Value.rem},values3:{values:z,formatValue:e.Value.fraction}},position:{cssNames:["position"],values1:{values:["static","relative","absolute","fixed","sticky"]},values2:{values:[]},values3:{values:[]}},top:{cssNames:["top"],values1:{values:b,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},right:{cssNames:["right"],values1:{values:b,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},bottom:{cssNames:["bottom"],values1:{values:b,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},left:{cssNames:["left"],values1:{values:b,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},inset:{cssNames:["inset"],values1:{values:b,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},m:{cssNames:["margin"],values1:{values:b,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mx:{cssNames:["margin-inline"],values1:{values:b,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},my:{cssNames:["margin-block"],values1:{values:b,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mt:{cssNames:["margin-top"],values1:{values:b,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mr:{cssNames:["margin-right"],values1:{values:b,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},mb:{cssNames:["margin-bottom"],values1:{values:b,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},ml:{cssNames:["margin-left"],values1:{values:b,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},p:{cssNames:["padding"],values1:{values:b,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},px:{cssNames:["padding-inline"],values1:{values:b,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},py:{cssNames:["padding-block"],values1:{values:b,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pt:{cssNames:["padding-top"],values1:{values:b,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pr:{cssNames:["padding-right"],values1:{values:b,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pb:{cssNames:["padding-bottom"],values1:{values:b,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},pl:{cssNames:["padding-left"],values1:{values:b,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},b:{cssNames:["border-width"],values1:{values:v,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bx:{cssNames:["border-inline-width"],values1:{values:b,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},by:{cssNames:["border-block-width"],values1:{values:b,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bt:{cssNames:["border-top-width"],values1:{values:b,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},br:{cssNames:["border-right-width"],values1:{values:b,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bb:{cssNames:["border-bottom-width"],values1:{values:b,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},bl:{cssNames:["border-left-width"],values1:{values:b,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderStyle:{cssNames:["border-style"],values1:{values:W},values2:{values:[]},values3:{values:[]}},borderRadius:{cssNames:["border-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTop:{cssNames:["border-top-left-radius","border-top-right-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusRight:{cssNames:["border-top-right-radius","border-bottom-right-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottom:{cssNames:["border-bottom-left-radius","border-bottom-right-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusLeft:{cssNames:["border-top-left-radius","border-bottom-left-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopLeft:{cssNames:["border-top-left-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopRight:{cssNames:["border-top-right-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomLeft:{cssNames:["border-bottom-left-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomRight:{cssNames:["border-bottom-right-radius"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},cursor:{cssNames:["cursor"],values1:{values:["auto","default","none","context-menu","help","pointer","progress","wait","cell","crosshair","text","vertical-text","alias","copy","move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize","s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","col-resize","row-resize","all-scroll","zoom-in","zoom-out","grab","grabbing"]},values2:{values:[]},values3:{values:[]}},zIndex:{cssNames:["z-index"],values1:{values:[1,2,3,4,5,10,11,12,13,14,15,100,101,102,103,104,105,1e3,1001,1002,1003,1004,1005]},values2:{values:[]},values3:{values:[]}},overflow:{cssNames:["overflow"],values1:{values:P},values2:{values:[]},values3:{values:[]}},overflowX:{cssNames:["overflow-x"],values1:{values:P},values2:{values:[]},values3:{values:[]}},overflowY:{cssNames:["overflow-y"],values1:{values:P},values2:{values:[]},values3:{values:[]}},opacity:{cssNames:["opacity"],values1:{values:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]},values2:{values:[]},values3:{values:[]}},fontSize:{cssNames:["font-size"],values1:{values:v,formatValue:e.Value.px},values2:{values:["inherit"]},values3:{values:[]}},fontStyle:{cssNames:["font-style"],values1:{values:["italic","normal","oblique"]},values2:{values:[]},values3:{values:[]}},fontWeight:{cssNames:["font-weight"],values1:{values:[100,200,300,400,500,600,700,800,900]},values2:{values:[]},values3:{values:[]}},letterSpacing:{cssNames:["letter-spacing"],values1:{values:v,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},lineHeight:{cssNames:["line-height"],values1:{values:v,formatValue:e.Value.px},values2:{values:["font-size"],formatValue:()=>"1"},values3:{values:[]}},textDecoration:{cssNames:["text-decoration"],values1:{values:["none","underline","overline","line-through"]},values2:{values:[]},values3:{values:[]}},textTransform:{cssNames:["text-transform"],values1:{values:["none","capitalize","lowercase","uppercase"]},values2:{values:[]},values3:{values:[]}},textAlign:{cssNames:["text-align"],values1:{values:["left","right","center","justify"]},values2:{values:[]},values3:{values:[]}},flexWrap:{cssNames:["flex-wrap"],values1:{values:["nowrap","wrap","wrap-reverse"]},values2:{values:[]},values3:{values:[]}},jc:{cssNames:["justify-content"],values1:{values:["start","end","flex-start","flex-end","center","left","right","space-between","space-around","space-evenly","stretch"]},values2:{values:[]},values3:{values:[]}},ai:{cssNames:["align-items"],values1:{values:["stretch","flex-start","flex-end","center","baseline","start","end","self-start","self-end"]},values2:{values:[]},values3:{values:[]}},alignContent:{cssNames:["align-content"],values1:{values:["flex-start","flex-end","center","space-between","space-around","space-evenly","stretch","start","end","baseline"]},values2:{values:[]},values3:{values:[]}},flex1:{cssNames:["flex"],values1:{values:[!0],formatValue:()=>"1"},values2:{values:[]},values3:{values:[]}},d:{cssNames:["flex-direction"],values1:{values:["row","row-reverse","column","column-reverse"]},values2:{values:[]},values3:{values:[]}},gap:{cssNames:["gap"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},rowGap:{cssNames:["row-gap"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},columnGap:{cssNames:["column-gap"],values1:{values:v,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},order:{cssNames:["order"],values1:{values:v},values2:{values:[]},values3:{values:[]}},flexGrow:{cssNames:["flex-grow"],values1:{values:v},values2:{values:[]},values3:{values:[]}},flexShrink:{cssNames:["flex-shrink"],values1:{values:v},values2:{values:[]},values3:{values:[]}},alignSelf:{cssNames:["align-self"],values1:{values:K},values2:{values:[]},values3:{values:[]}},justifySelf:{cssNames:["justify-self"],values1:{values:K},values2:{values:[]},values3:{values:[]}},gridColumns:{cssNames:["grid-template-columns"],values1:{values:v,formatValue:e.Value.gridColumns},values2:{values:[]},values3:{values:[]}},colSpan:{cssNames:["grid-column"],values1:{values:v,formatValue:e.Value.gridColumn},values2:{values:["full-row"],formatValue:e.Value.gridColumn},values3:{values:[]}},colStart:{cssNames:["grid-column-start"],values1:{values:v},values2:{values:[]},values3:{values:[]}},colEnd:{cssNames:["grid-column-end"],values1:{values:v},values2:{values:[]},values3:{values:[]}},outline:{cssNames:["outline-width"],values1:{values:v,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},outlineStyle:{cssNames:["outline-style"],values1:{values:W},values2:{values:[]},values3:{values:[]}},outlineOffset:{cssNames:["outline-offset"],values1:{values:v,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},transition:{cssNames:["transition-property"],values1:{values:["none","all"]},values2:{values:[]},values3:{values:[]}},transitionDuration:{cssNames:["transition-duration"],values1:{values:[50,100,150,200,250,300,350,400,450,500,550,600,650,700,750,800,850,900,950,1e3],formatValue:e.Value.ms},values2:{values:[]},values3:{values:[]}},userSelect:{cssNames:["user-select"],values1:{values:["none","auto","text","all"]},values2:{values:[]},values3:{values:[]}},appearance:{cssNames:["appearance"],values1:{values:["none","auto","menulist-button","textfield","button","checkbox"]},values2:{values:[]},values3:{values:[]}},pointerEvents:{cssNames:["pointer-events"],values1:{values:["none","auto","all"]},values2:{values:[]},values3:{values:[]}},whiteSpace:{cssNames:["white-space"],values1:{values:["break-spaces","normal","nowrap","pre","pre-line","pre-wrap"]},values2:{values:[]},values3:{values:[]}},textOverflow:{cssNames:["text-overflow"],values1:{values:["clip","ellipsis"]},values2:{values:[]},values3:{values:[]}},rotate:{cssNames:["rotate"],values1:{values:[0,90,180,270,-90,-180,-270],formatValue:e.Value.rotate},values2:{values:[]},values3:{values:[]}},flip:{cssNames:["scale"],values1:{values:["xAxis","yAxis"],formatValue:e.Value.flip},values2:{values:[]},values3:{values:[]}}},M={shadow:{cssNames:["box-shadow"],formatValue:e.Value.variables("shadow")},background:{cssNames:["background"],formatValue:e.Value.variables("background")},backgroundImage:{cssNames:["background-image"],formatValue:e.Value.variables("backgroundImage")},color:{cssNames:["color"],formatValue:e.Value.variables("color")},bgColor:{cssNames:["background-color"],formatValue:e.Value.variables("color")},borderColor:{cssNames:["border-color"],formatValue:e.Value.variables("color")},outlineColor:{cssNames:["outline-color"],formatValue:e.Value.variables("color")}},U={fill:{cssNames:["fill"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg},stroke:{cssNames:["stroke"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg}},D=["Hover","Focus","Active","Checked","Indeterminate","Valid","Invalid","Required","Optional","Disabled"],A=["sm","md","lg","xl","xxl"],ue={sm:640,md:768,lg:1024,xl:1280,xxl:1536};function J(){const a={...le};Object.keys(M).forEach(t=>{a[t]=M[t],a[t].isThemeStyle=!0}),Object.keys(U).forEach(t=>{a[t]=U[t],a[t].isThemeStyle=!0});let u=Object.keys(a);return D.forEach(t=>{u.forEach(n=>{a[`${n}${t}`]={...a[n],pseudoSuffix:t}})}),u=Object.keys(a),A.forEach(t=>{u.forEach(n=>{a[`${t}${n}`]={...a[n],breakpoint:t}})}),a}let C=J();function te(){C=J()}function oe(a,u,t){const n=Object.entries(C).filter(([o,m])=>m.pseudoSuffix===a&&!m.customPseudoSuffix&&!(`${o}${u}`in C)).map(([o])=>o);return n.forEach(o=>{C[`${o}${u}`]={...C[o],customPseudoSuffix:t+u}}),n.map(o=>`${o}${u}`)}class re{constructor(){this._index=0,this._cache={}}getIdentity(u){return this._cache[u]||(this._cache[u]=this.getByIndex(this._index++)),this._cache[u]}getByIndex(u){const{first:t,next:n}=ne,o=u-t.length;if(o<0)return t[u];const m=Math.floor(o/n.length),N=o-m*n.length;return this.getByIndex(m)+n[N]}}const ne={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var _;(a=>{a.boxClassName="_box",a.svgClassName="_svg",a.cronoStylesElementId="crono-styles";const u=`:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;#crono-box {position: absolute;top: 0;left: 0;height: 0;}}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
 .${a.boxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
-.${a.svgClassName}{transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
-`,t=new re;let n=!0,o={};T();function m(l,s,r){if(l in C)return c(l,s,r);if(["disabledGroup","hoverGroup","focusGroup","activeGroup"].includes(l))return l+s}a.get=m;function N(){if(n){let l=f([u]);D.forEach(r=>{l=f(l,r)}),A.forEach(r=>{l.push(`@media(min-width: ${ue[r]}px){`),l=f(l,void 0,r),D.forEach(i=>{l=f(l,i,r)}),l.push("}")});const s=d();s.innerHTML=l.join(""),n=!1}}a.flush=N;function T(){te(),o=Object.keys(C).reduce((s,r)=>(s[r]=new Set,s),{})}a.clear=T;function S(l,s,r){oe(l,s,r).forEach(p=>{o[p]=new Set})}a.addCustomPseudoClass=S;function c(l,s,r){const i=(r??"")+l;o[i].has(s)||(n=!0,o[i].add(s));const p=`${i}${s}`;return process.env.NODE_ENV==="test"?p:t.getIdentity(p)}function f(l,s,r){return Object.entries(o).filter(([p,k])=>{var w,$;return((w=C[p])==null?void 0:w.pseudoSuffix)===s&&(($=C[p])==null?void 0:$.breakpoint)===r&&k.size>0}).reduce((p,[k,w])=>(w.forEach($=>{var L;const g=C[k],y=b(g,$),j=`.${c(k,$)}`;let x=[];s?s==="Hover"?x=i(j,g,y,"hover"):s==="Focus"?x=i(j,g,y,"focus-within"):s==="Active"?x=i(j,g,y,"active"):s==="Checked"?x=i(j,g,y,"checked"):s==="Indeterminate"?x=i(j,g,y,"indeterminate"):s==="Valid"?x=i(j,g,y,"valid"):s==="Invalid"?x=i(j,g,y,"invalid"):s==="Required"?x=i(j,g,y,"required"):s==="Optional"?x=i(j,g,y,"optional"):s==="Disabled"&&(x=i(j,g,y,"disabled")):x=i(j,g,y);const V=((L=y.formatValue)==null?void 0:L.call(y,k,$))??$,ee=C[k].cssNames.map(se=>`${se}:${V};`).join("");p.push(`${x.join(",")}{${ee}}`)}),p),l);function i(p,k,w,$){let g=p;return $&&(g=k.customPseudoSuffix?`.${k.customPseudoSuffix}:${$} ${p}`:`${p}:${$}`),w.formatSelector?w.formatSelector(g):[g]}}function b(l,s){return l.isThemeStyle?l:l.values1.values.includes(s)?l.values1:l.values2.values.includes(s)?l.values2:l.values3}function d(){const s=typeof window<"u"&&typeof window.document<"u"?window.document:global.document;let r=s.getElementById(a.cronoStylesElementId);return r||(r=s.createElement("style"),r.setAttribute("id",a.cronoStylesElementId),r.setAttribute("type","text/css"),s.head.insertBefore(r,s.head.firstChild)),r}a.getElement=d})(_||(_={}));const E=_,H={button:{styles:{display:"inline-block",p:3,cursor:"pointer",b:1,borderRadius:1,userSelect:"none",disabled:{cursor:"default"}}},checkbox:{styles:{display:"inline-block"}},radioButton:{styles:{display:"inline-block",b:1,p:2}},textbox:{styles:{display:"inline-block",b:1,borderRadius:1,p:3}},textarea:{styles:{display:"inline-block",b:1,borderRadius:1}}},ve={Hover:"hover",Focus:"focus",Active:"active",Checked:"checked",Indeterminate:"indeterminate",Valid:"valid",Invalid:"invalid",Required:"required",Optional:"optional",Disabled:"disabled"};var q;(a=>{a.Styles={};function u(c){a.Styles=o(H),a.Styles=n(c)}a.setup=u;function t(c,f){const{colors:b={},shadows:d={},backgrounds:l={},backgroundImages:s={}}=c;b.none="none",d.none="none",l.none="none",s.none="none";const r=Object.entries(b).map(([V,O])=>`--color${V}: ${O};`).join(`
-  `),i=Object.entries(d).map(([V,O])=>`--shadow${V}: ${O};`).join(`
+.${a.svgClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
+`,t=new re;let n=!0,o={};T();function m(l,s,r){if(l in C)return c(l,s,r);if(["disabledGroup","hoverGroup","focusGroup","activeGroup"].includes(l))return l+s}a.get=m;function N(){if(n){let l=d([u]);D.forEach(r=>{l=d(l,r)}),A.forEach(r=>{l.push(`@media(min-width: ${ue[r]}px){`),l=d(l,void 0,r),D.forEach(i=>{l=d(l,i,r)}),l.push("}")});const s=f();s.innerHTML=l.join(""),n=!1}}a.flush=N;function T(){te(),o=Object.keys(C).reduce((s,r)=>(s[r]=new Set,s),{})}a.clear=T;function S(l,s,r){oe(l,s,r).forEach(p=>{o[p]=new Set})}a.addCustomPseudoClass=S;function c(l,s,r){const i=(r??"")+l;o[i].has(s)||(n=!0,o[i].add(s));const p=`${i}${s}`;return process.env.NODE_ENV==="test"?p:t.getIdentity(p)}function d(l,s,r){return Object.entries(o).filter(([p,k])=>{var x,$;return((x=C[p])==null?void 0:x.pseudoSuffix)===s&&(($=C[p])==null?void 0:$.breakpoint)===r&&k.size>0}).reduce((p,[k,x])=>(x.forEach($=>{var L;const g=C[k],y=h(g,$),j=`.${c(k,$)}`;let w=[];s?s==="Hover"?w=i(j,g,y,"hover"):s==="Focus"?w=i(j,g,y,"focus-within"):s==="Active"?w=i(j,g,y,"active"):s==="Checked"?w=i(j,g,y,"checked"):s==="Indeterminate"?w=i(j,g,y,"indeterminate"):s==="Valid"?w=i(j,g,y,"valid"):s==="Invalid"?w=i(j,g,y,"invalid"):s==="Required"?w=i(j,g,y,"required"):s==="Optional"?w=i(j,g,y,"optional"):s==="Disabled"&&(w=i(j,g,y,"disabled")):w=i(j,g,y);const V=((L=y.formatValue)==null?void 0:L.call(y,k,$))??$,ee=C[k].cssNames.map(se=>`${se}:${V};`).join("");p.push(`${w.join(",")}{${ee}}`)}),p),l);function i(p,k,x,$){let g=p;return $&&(g=k.customPseudoSuffix?`.${k.customPseudoSuffix}:${$} ${p}`:`${p}:${$}`),x.formatSelector?x.formatSelector(g):[g]}}function h(l,s){return l.isThemeStyle?l:l.values1.values.includes(s)?l.values1:l.values2.values.includes(s)?l.values2:l.values3}function f(){const s=typeof window<"u"&&typeof window.document<"u"?window.document:global.document;let r=s.getElementById(a.cronoStylesElementId);return r||(r=s.createElement("style"),r.setAttribute("id",a.cronoStylesElementId),r.setAttribute("type","text/css"),s.head.insertBefore(r,s.head.firstChild)),r}a.getElement=f})(_||(_={}));const E=_,H={button:{styles:{display:"inline-block",p:3,cursor:"pointer",b:1,borderRadius:1,userSelect:"none",disabled:{cursor:"default"}}},checkbox:{styles:{display:"inline-block"}},radioButton:{styles:{display:"inline-block",b:1,p:2}},textbox:{styles:{display:"inline-block",b:1,borderRadius:1,p:3}},textarea:{styles:{display:"inline-block",b:1,borderRadius:1}}},ve={Hover:"hover",Focus:"focus",Active:"active",Checked:"checked",Indeterminate:"indeterminate",Valid:"valid",Invalid:"invalid",Required:"required",Optional:"optional",Disabled:"disabled"};var q;(a=>{a.Styles={};function u(c){a.Styles=o(H),a.Styles=n(c)}a.setup=u;function t(c,d){const{colors:h={},shadows:f={},backgrounds:l={},backgroundImages:s={}}=c;h.none="none",f.none="none",l.none="none",s.none="none";const r=Object.entries(h).map(([V,O])=>`--color${V}: ${O};`).join(`
+  `),i=Object.entries(f).map(([V,O])=>`--shadow${V}: ${O};`).join(`
   `),p=Object.entries(l).map(([V,O])=>`--background${V}: ${O};`).join(`
   `),k=Object.entries(s).map(([V,O])=>`--backgroundImage${V}: ${O};`).join(`
-  `),w=[":root {"];r&&w.push(`  ${r}`),i&&w.push(`  ${i}`),p&&w.push(`  ${p}`),k&&w.push(`  ${k}`),w.push("}");const $=Object.keys(b).map(V=>`'${V}'`).join(" | "),g=Object.keys(l).map(V=>`'${V}'`).join(" | "),y=Object.keys(s).map(V=>`'${V}'`).join(" | "),j=Object.keys(d).map(V=>`'${V}'`).join(" | "),x=`import '@cronocode/react-box';
+  `),x=[":root {"];r&&x.push(`  ${r}`),i&&x.push(`  ${i}`),p&&x.push(`  ${p}`),k&&x.push(`  ${k}`),x.push("}");const $=Object.keys(h).map(V=>`'${V}'`).join(" | "),g=Object.keys(l).map(V=>`'${V}'`).join(" | "),y=Object.keys(s).map(V=>`'${V}'`).join(" | "),j=Object.keys(f).map(V=>`'${V}'`).join(" | "),w=`import '@cronocode/react-box';
   
-  declare module '${(f==null?void 0:f.namespacePath)??"@cronocode/react-box/core/types"}' {
+  declare module '${(d==null?void 0:d.namespacePath)??"@cronocode/react-box/core/types"}' {
     type ColorType = ${$};
     type BackgroundType = ${g};
     type BackgroundImageType = ${y};
@@ -33,5 +33,5 @@ a,ul{all: unset;}
       }
     }
   }
-  `;return{variables:w.join(`
-`),boxDts:x}}a.setupAugmentedProps=t;function n(c){const f=o(c);return Object.keys(H).forEach(d=>{const l=f[d],s=H[d];l?l.styles={...s.styles,...l.styles}:f[d]=H[d]}),f}function o(c){return m(c),T(c),c}function m(c){if(!c.components)return;const f=Object.keys(c.components);for(const b of f){const d=c.components[b],l=N(b,d);delete d.children;for(const s of l){const[r,i]=s;c.components[r]=i}}}function N(c,f){if(!f.children)return[];const b=Object.keys(f.children),d=[];for(const l of b){const s=`${c}.${l}`,r=f.children[l],i=N(s,r);d.push(...i),delete r.children,d.push([s,r])}return d}function T(c){const{components:f,...b}=c,d=Object.values(b);f&&d.push(...Object.values(f));for(const l of d)S(l.styles),A.forEach(s=>{if(s in l.styles){const r=l.styles[s];S(r)}}),l.themes&&Object.values(l.themes).forEach(s=>{S(s),A.forEach(r=>{if(r in s){const i=s[r];S(i)}})})}function S(c){Object.entries(ve).forEach(([f,b])=>{if(b in c){const d=c[b];Object.entries(d).map(([l,s])=>{c[`${l}${f}`]=s}),delete c[b]}})}})(q||(q={}));const F=q;function ie(a){const{clean:u,theme:t,component:n}=a;return G.useMemo(()=>{var m,N;if(u)return;let o=F.Styles[n]??((m=F.Styles.components)==null?void 0:m[n]);if(o)return t?{...o.styles,...(N=o.themes)==null?void 0:N[t]}:o.styles},[n,u,t])}const ce=typeof window<"u"&&typeof window.document<"u",me=ce?G.useLayoutEffect:G.useEffect;function fe(a,u){const t=ie(a);return me(E.flush,[a]),G.useMemo(()=>{const n=[u?E.svgClassName:E.boxClassName],o=t?{...t,...a}:{...a};return X(o),Object.entries(o).forEach(([m,N])=>{n.push(E.get(m,N))}),A.forEach(m=>{if(m in o){const N=o[m];X(N),Object.entries(N).forEach(([T,S])=>{n.push(E.get(T,S,m))}),delete o[m]}}),n},[a,t])}function X(a){B(a,"hover","Hover"),B(a,"focus","Focus"),B(a,"active","Active"),B(a,"disabled","Disabled"),R(a,"hoverGroup","Hover"),R(a,"focusGroup","Focus"),R(a,"activeGroup","Active"),R(a,"disabledGroup","Disabled")}function B(a,u,t){u in a&&Q(a,u,t,a[u])}function R(a,u,t){u in a&&Y.ObjectUtils.isObject(a[u])&&Object.entries(a[u]).forEach(([n,o])=>{E.addCustomPseudoClass(t,n,u),Q(a,u,t+n,o)})}function Q(a,u,t,n){Array.isArray(n)?(Object.entries(n[1]).forEach(([o,m])=>{a[`${o}${t}`]=m}),a[u]=n[0]):Y.ObjectUtils.isObject(n)&&(Object.entries(n).forEach(([o,m])=>{a[`${o}${t}`]=m}),delete a[u])}function Z(...a){return a.reduce((u,t)=>t?typeof t=="string"?(u.push(t),u):Array.isArray(t)?(u.push(...Z(...t)),u):(Object.entries(t).forEach(([n,o])=>{o&&u.push(n)}),u):u,[])}exports.StylesContext=E;exports.Theme=F;exports.classNames=Z;exports.useStyles=fe;
+  `;return{variables:x.join(`
+`),boxDts:w}}a.setupAugmentedProps=t;function n(c){const d=o(c);return Object.keys(H).forEach(f=>{const l=d[f],s=H[f];l?l.styles={...s.styles,...l.styles}:d[f]=H[f]}),d}function o(c){return m(c),T(c),c}function m(c){if(!c.components)return;const d=Object.keys(c.components);for(const h of d){const f=c.components[h],l=N(h,f);delete f.children;for(const s of l){const[r,i]=s;c.components[r]=i}}}function N(c,d){if(!d.children)return[];const h=Object.keys(d.children),f=[];for(const l of h){const s=`${c}.${l}`,r=d.children[l],i=N(s,r);f.push(...i),delete r.children,f.push([s,r])}return f}function T(c){const{components:d,...h}=c,f=Object.values(h);d&&f.push(...Object.values(d));for(const l of f)S(l.styles),A.forEach(s=>{if(s in l.styles){const r=l.styles[s];S(r)}}),l.themes&&Object.values(l.themes).forEach(s=>{S(s),A.forEach(r=>{if(r in s){const i=s[r];S(i)}})})}function S(c){Object.entries(ve).forEach(([d,h])=>{if(h in c){const f=c[h];Object.entries(f).map(([l,s])=>{c[`${l}${d}`]=s}),delete c[h]}})}})(q||(q={}));const F=q;function ie(a){const{clean:u,theme:t,component:n}=a;return G.useMemo(()=>{var m,N;if(u)return;let o=F.Styles[n]??((m=F.Styles.components)==null?void 0:m[n]);if(o)return t?{...o.styles,...(N=o.themes)==null?void 0:N[t]}:o.styles},[n,u,t])}const ce=typeof window<"u"&&typeof window.document<"u",me=ce?G.useLayoutEffect:G.useEffect;function de(a,u){const t=ie(a);return me(E.flush,[a]),G.useMemo(()=>{const n=[u?E.svgClassName:E.boxClassName],o=t?{...t,...a}:{...a};return X(o),Object.entries(o).forEach(([m,N])=>{n.push(E.get(m,N))}),A.forEach(m=>{if(m in o){const N=o[m];X(N),Object.entries(N).forEach(([T,S])=>{n.push(E.get(T,S,m))}),delete o[m]}}),n},[a,t])}function X(a){B(a,"hover","Hover"),B(a,"focus","Focus"),B(a,"active","Active"),B(a,"disabled","Disabled"),R(a,"hoverGroup","Hover"),R(a,"focusGroup","Focus"),R(a,"activeGroup","Active"),R(a,"disabledGroup","Disabled")}function B(a,u,t){u in a&&Q(a,u,t,a[u])}function R(a,u,t){u in a&&Y.ObjectUtils.isObject(a[u])&&Object.entries(a[u]).forEach(([n,o])=>{E.addCustomPseudoClass(t,n,u),Q(a,u,t+n,o)})}function Q(a,u,t,n){Array.isArray(n)?(Object.entries(n[1]).forEach(([o,m])=>{a[`${o}${t}`]=m}),a[u]=n[0]):Y.ObjectUtils.isObject(n)&&(Object.entries(n).forEach(([o,m])=>{a[`${o}${t}`]=m}),delete a[u])}function Z(...a){return a.reduce((u,t)=>t?typeof t=="string"?(u.push(t),u):Array.isArray(t)?(u.push(...Z(...t)),u):(Object.entries(t).forEach(([n,o])=>{o&&u.push(n)}),u):u,[])}exports.StylesContext=E;exports.Theme=F;exports.classNames=Z;exports.useStyles=de;

package/core.mjs

@@ -52,18 +52,18 @@ var e;
       return s === "full-row" ? "1/-1" : `span ${s}/span ${s}`;
     }
     u.gridColumn = c;
-    function f(l, s) {
+    function d(l, s) {
       return `${s}ms`;
     }
-    u.ms = f;
-    function b(l, s) {
+    u.ms = d;
+    function h(l, s) {
       return `${s}deg`;
     }
-    u.rotate = b;
-    function d(l, s) {
+    u.rotate = h;
+    function f(l, s) {
       return s === "xAxis" ? "-1 1" : "1 -1";
     }
-    u.flip = d;
+    u.flip = f;
   })(a.Value || (a.Value = {}));
 })(e || (e = {}));
 const v = [
@@ -118,13 +118,27 @@ const v = [
   92,
   96,
   100,
+  110,
   120,
+  128,
+  130,
   140,
+  150,
   160,
+  170,
   180,
+  190,
+  192,
   200,
+  225,
   250,
-  300
+  256,
+  275,
+  300,
+  320,
+  350,
+  384,
+  400
 ], le = [
   -1,
   -2,
@@ -171,7 +185,7 @@ const v = [
   -92,
   -96,
   -100
-], h = [...v, ...le], F = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], G = ["auto", "hidden", "scroll", "visible"], E = [
+], b = [...v, ...le], F = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], G = ["auto", "hidden", "scroll", "visible"], E = [
   "1/2",
   "1/3",
   "2/3",
@@ -288,115 +302,115 @@ const v = [
   },
   top: {
     cssNames: ["top"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   m: {
     cssNames: ["margin"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mx: {
     cssNames: ["margin-inline"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   my: {
     cssNames: ["margin-block"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mt: {
     cssNames: ["margin-top"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mr: {
     cssNames: ["margin-right"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   mb: {
     cssNames: ["margin-bottom"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   ml: {
     cssNames: ["margin-left"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   p: {
     cssNames: ["padding"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   px: {
     cssNames: ["padding-inline"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   py: {
     cssNames: ["padding-block"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pt: {
     cssNames: ["padding-top"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pr: {
     cssNames: ["padding-right"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pb: {
     cssNames: ["padding-bottom"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   pl: {
     cssNames: ["padding-left"],
-    values1: { values: h, formatValue: e.Value.rem },
+    values1: { values: b, formatValue: e.Value.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -408,37 +422,37 @@ const v = [
   },
   bx: {
     cssNames: ["border-inline-width"],
-    values1: { values: h, formatValue: e.Value.px },
+    values1: { values: b, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   by: {
     cssNames: ["border-block-width"],
-    values1: { values: h, formatValue: e.Value.px },
+    values1: { values: b, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bt: {
     cssNames: ["border-top-width"],
-    values1: { values: h, formatValue: e.Value.px },
+    values1: { values: b, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   br: {
     cssNames: ["border-right-width"],
-    values1: { values: h, formatValue: e.Value.px },
+    values1: { values: b, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bb: {
     cssNames: ["border-bottom-width"],
-    values1: { values: h, formatValue: e.Value.px },
+    values1: { values: b, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   bl: {
     cssNames: ["border-left-width"],
-    values1: { values: h, formatValue: e.Value.px },
+    values1: { values: b, formatValue: e.Value.px },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -805,7 +819,7 @@ const v = [
   },
   appearance: {
     cssNames: ["appearance"],
-    values1: { values: ["none"] },
+    values1: { values: ["none", "auto", "menulist-button", "textfield", "button", "checkbox"] },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -936,7 +950,7 @@ html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
 .${a.boxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
-.${a.svgClassName}{transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
+.${a.svgClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
 `, t = new ne();
   let n = !0, o = {};
   T();
@@ -949,15 +963,15 @@ a,ul{all: unset;}
   a.get = m;
   function N() {
     if (n) {
-      let l = f([u]);
+      let l = d([u]);
       P.forEach((r) => {
-        l = f(l, r);
+        l = d(l, r);
       }), A.forEach((r) => {
-        l.push(`@media(min-width: ${te[r]}px){`), l = f(l, void 0, r), P.forEach((i) => {
-          l = f(l, i, r);
+        l.push(`@media(min-width: ${te[r]}px){`), l = d(l, void 0, r), P.forEach((i) => {
+          l = d(l, i, r);
         }), l.push("}");
       });
-      const s = d();
+      const s = f();
       s.innerHTML = l.join(""), n = !1;
     }
   }
@@ -981,34 +995,34 @@ a,ul{all: unset;}
     const p = `${i}${s}`;
     return process.env.NODE_ENV === "test" ? p : t.getIdentity(p);
   }
-  function f(l, s, r) {
+  function d(l, s, r) {
     return Object.entries(o).filter(
       ([p, k]) => {
-        var w, $;
-        return ((w = C[p]) == null ? void 0 : w.pseudoSuffix) === s && (($ = C[p]) == null ? void 0 : $.breakpoint) === r && k.size > 0;
+        var x, $;
+        return ((x = C[p]) == null ? void 0 : x.pseudoSuffix) === s && (($ = C[p]) == null ? void 0 : $.breakpoint) === r && k.size > 0;
       }
-    ).reduce((p, [k, w]) => (w.forEach(($) => {
+    ).reduce((p, [k, x]) => (x.forEach(($) => {
       var q;
-      const g = C[k], y = b(g, $), j = `.${c(k, $)}`;
-      let x = [];
-      s ? s === "Hover" ? x = i(j, g, y, "hover") : s === "Focus" ? x = i(j, g, y, "focus-within") : s === "Active" ? x = i(j, g, y, "active") : s === "Checked" ? x = i(j, g, y, "checked") : s === "Indeterminate" ? x = i(j, g, y, "indeterminate") : s === "Valid" ? x = i(j, g, y, "valid") : s === "Invalid" ? x = i(j, g, y, "invalid") : s === "Required" ? x = i(j, g, y, "required") : s === "Optional" ? x = i(j, g, y, "optional") : s === "Disabled" && (x = i(j, g, y, "disabled")) : x = i(j, g, y);
+      const g = C[k], y = h(g, $), j = `.${c(k, $)}`;
+      let w = [];
+      s ? s === "Hover" ? w = i(j, g, y, "hover") : s === "Focus" ? w = i(j, g, y, "focus-within") : s === "Active" ? w = i(j, g, y, "active") : s === "Checked" ? w = i(j, g, y, "checked") : s === "Indeterminate" ? w = i(j, g, y, "indeterminate") : s === "Valid" ? w = i(j, g, y, "valid") : s === "Invalid" ? w = i(j, g, y, "invalid") : s === "Required" ? w = i(j, g, y, "required") : s === "Optional" ? w = i(j, g, y, "optional") : s === "Disabled" && (w = i(j, g, y, "disabled")) : w = i(j, g, y);
       const V = ((q = y.formatValue) == null ? void 0 : q.call(y, k, $)) ?? $, Z = C[k].cssNames.map((ee) => `${ee}:${V};`).join("");
-      p.push(`${x.join(",")}{${Z}}`);
+      p.push(`${w.join(",")}{${Z}}`);
     }), p), l);
-    function i(p, k, w, $) {
+    function i(p, k, x, $) {
       let g = p;
-      return $ && (g = k.customPseudoSuffix ? `.${k.customPseudoSuffix}:${$} ${p}` : `${p}:${$}`), w.formatSelector ? w.formatSelector(g) : [g];
+      return $ && (g = k.customPseudoSuffix ? `.${k.customPseudoSuffix}:${$} ${p}` : `${p}:${$}`), x.formatSelector ? x.formatSelector(g) : [g];
     }
   }
-  function b(l, s) {
+  function h(l, s) {
     return l.isThemeStyle ? l : l.values1.values.includes(s) ? l.values1 : l.values2.values.includes(s) ? l.values2 : l.values3;
   }
-  function d() {
+  function f() {
     const s = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
     let r = s.getElementById(a.cronoStylesElementId);
     return r || (r = s.createElement("style"), r.setAttribute("id", a.cronoStylesElementId), r.setAttribute("type", "text/css"), s.head.insertBefore(r, s.head.firstChild)), r;
   }
-  a.getElement = d;
+  a.getElement = f;
 })(D || (D = {}));
 const I = D, H = {
   button: {
@@ -1070,18 +1084,18 @@ var _;
     a.Styles = o(H), a.Styles = n(c);
   }
   a.setup = u;
-  function t(c, f) {
-    const { colors: b = {}, shadows: d = {}, backgrounds: l = {}, backgroundImages: s = {} } = c;
-    b.none = "none", d.none = "none", l.none = "none", s.none = "none";
-    const r = Object.entries(b).map(([V, O]) => `--color${V}: ${O};`).join(`
-  `), i = Object.entries(d).map(([V, O]) => `--shadow${V}: ${O};`).join(`
+  function t(c, d) {
+    const { colors: h = {}, shadows: f = {}, backgrounds: l = {}, backgroundImages: s = {} } = c;
+    h.none = "none", f.none = "none", l.none = "none", s.none = "none";
+    const r = Object.entries(h).map(([V, O]) => `--color${V}: ${O};`).join(`
+  `), i = Object.entries(f).map(([V, O]) => `--shadow${V}: ${O};`).join(`
   `), p = Object.entries(l).map(([V, O]) => `--background${V}: ${O};`).join(`
   `), k = Object.entries(s).map(([V, O]) => `--backgroundImage${V}: ${O};`).join(`
-  `), w = [":root {"];
-    r && w.push(`  ${r}`), i && w.push(`  ${i}`), p && w.push(`  ${p}`), k && w.push(`  ${k}`), w.push("}");
-    const $ = Object.keys(b).map((V) => `'${V}'`).join(" | "), g = Object.keys(l).map((V) => `'${V}'`).join(" | "), y = Object.keys(s).map((V) => `'${V}'`).join(" | "), j = Object.keys(d).map((V) => `'${V}'`).join(" | "), x = `import '@cronocode/react-box';
+  `), x = [":root {"];
+    r && x.push(`  ${r}`), i && x.push(`  ${i}`), p && x.push(`  ${p}`), k && x.push(`  ${k}`), x.push("}");
+    const $ = Object.keys(h).map((V) => `'${V}'`).join(" | "), g = Object.keys(l).map((V) => `'${V}'`).join(" | "), y = Object.keys(s).map((V) => `'${V}'`).join(" | "), j = Object.keys(f).map((V) => `'${V}'`).join(" | "), w = `import '@cronocode/react-box';
   
-  declare module '${(f == null ? void 0 : f.namespacePath) ?? "@cronocode/react-box/core/types"}' {
+  declare module '${(d == null ? void 0 : d.namespacePath) ?? "@cronocode/react-box/core/types"}' {
     type ColorType = ${$};
     type BackgroundType = ${g};
     type BackgroundImageType = ${y};
@@ -1106,18 +1120,18 @@ var _;
   }
   `;
     return {
-      variables: w.join(`
+      variables: x.join(`
 `),
-      boxDts: x
+      boxDts: w
     };
   }
   a.setupAugmentedProps = t;
   function n(c) {
-    const f = o(c);
-    return Object.keys(H).forEach((d) => {
-      const l = f[d], s = H[d];
-      l ? l.styles = { ...s.styles, ...l.styles } : f[d] = H[d];
-    }), f;
+    const d = o(c);
+    return Object.keys(H).forEach((f) => {
+      const l = d[f], s = H[f];
+      l ? l.styles = { ...s.styles, ...l.styles } : d[f] = H[f];
+    }), d;
   }
   function o(c) {
     return m(c), T(c), c;
@@ -1125,30 +1139,30 @@ var _;
   function m(c) {
     if (!c.components)
       return;
-    const f = Object.keys(c.components);
-    for (const b of f) {
-      const d = c.components[b], l = N(b, d);
-      delete d.children;
+    const d = Object.keys(c.components);
+    for (const h of d) {
+      const f = c.components[h], l = N(h, f);
+      delete f.children;
       for (const s of l) {
         const [r, i] = s;
         c.components[r] = i;
       }
     }
   }
-  function N(c, f) {
-    if (!f.children)
+  function N(c, d) {
+    if (!d.children)
       return [];
-    const b = Object.keys(f.children), d = [];
-    for (const l of b) {
-      const s = `${c}.${l}`, r = f.children[l], i = N(s, r);
-      d.push(...i), delete r.children, d.push([s, r]);
+    const h = Object.keys(d.children), f = [];
+    for (const l of h) {
+      const s = `${c}.${l}`, r = d.children[l], i = N(s, r);
+      f.push(...i), delete r.children, f.push([s, r]);
     }
-    return d;
+    return f;
   }
   function T(c) {
-    const { components: f, ...b } = c, d = Object.values(b);
-    f && d.push(...Object.values(f));
-    for (const l of d)
+    const { components: d, ...h } = c, f = Object.values(h);
+    d && f.push(...Object.values(d));
+    for (const l of f)
       S(l.styles), A.forEach((s) => {
         if (s in l.styles) {
           const r = l.styles[s];
@@ -1164,12 +1178,12 @@ var _;
       });
   }
   function S(c) {
-    Object.entries(ie).forEach(([f, b]) => {
-      if (b in c) {
-        const d = c[b];
-        Object.entries(d).map(([l, s]) => {
-          c[`${l}${f}`] = s;
-        }), delete c[b];
+    Object.entries(ie).forEach(([d, h]) => {
+      if (h in c) {
+        const f = c[h];
+        Object.entries(f).map(([l, s]) => {
+          c[`${l}${d}`] = s;
+        }), delete c[h];
       }
     });
   }
@@ -1186,10 +1200,10 @@ function ce(a) {
       return t ? { ...o.styles, ...(N = o.themes) == null ? void 0 : N[t] } : o.styles;
   }, [n, u, t]);
 }
-const me = typeof window < "u" && typeof window.document < "u", fe = me ? se : ae;
+const me = typeof window < "u" && typeof window.document < "u", de = me ? se : ae;
 function ge(a, u) {
   const t = ce(a);
-  return fe(I.flush, [a]), X(() => {
+  return de(I.flush, [a]), X(() => {
     const n = [u ? I.svgClassName : I.boxClassName], o = t ? { ...t, ...a } : { ...a };
     return U(o), Object.entries(o).forEach(([m, N]) => {
       n.push(I.get(m, N));
@@ -1221,14 +1235,14 @@ function Q(a, u, t, n) {
     a[`${o}${t}`] = m;
   }), delete a[u]);
 }
-function de(...a) {
-  return a.reduce((u, t) => t ? typeof t == "string" ? (u.push(t), u) : Array.isArray(t) ? (u.push(...de(...t)), u) : (Object.entries(t).forEach(([n, o]) => {
+function fe(...a) {
+  return a.reduce((u, t) => t ? typeof t == "string" ? (u.push(t), u) : Array.isArray(t) ? (u.push(...fe(...t)), u) : (Object.entries(t).forEach(([n, o]) => {
     o && u.push(n);
   }), u) : u, []);
 }
 export {
   I as S,
   M as T,
-  de as c,
+  fe as c,
   ge as u
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "type": "module",
   "main": "./box.cjs",
   "module": "./box.mjs",