@ozen-ui/kit 0.21.0 → 0.22.0

package/__inner__/cjs/components/Button/Button.css

@@ -14,16 +14,18 @@
   padding: 0 var(--button-padding-x);
   background-color: var(--button-bg-color);
   border-radius: var(--border-radius-xs);
-  transition: background-color var(--transition-default),
-    border-color var(--transition-default), box-shadow var(--transition-default),
+  transition:
+    background-color var(--transition-default),
+    border-color var(--transition-default),
+    box-shadow var(--transition-default),
     opacity var(--transition-default);
   -webkit-tap-highlight-color: unset;
   position: relative;
 }
 .Button_size_2xs {
-      --button-height: 32px;
+      --button-height: var(--control-height-2xs);
+      --button-padding-x: var(--control-padding-xs);
       --button-min-width: 56px;
-      --button-padding-x: 12px;
 
       font: var(--typography-text-2xs-font);
 
@@ -32,9 +34,9 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
     }
 .Button_size_xs {
-      --button-height: 40px;
+      --button-height: var(--control-height-xs);
+      --button-padding-x: var(--control-padding-xs);
       --button-min-width: 64px;
-      --button-padding-x: 12px;
 
       font: var(--typography-text-xs-font);
 
@@ -43,9 +45,9 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Button_size_s {
-      --button-height: 48px;
+      --button-height: var(--control-height-s);
+      --button-padding-x: var(--control-padding-s);
       --button-min-width: 72px;
-      --button-padding-x: 16px;
 
       font: var(--typography-text-s-font);
 
@@ -54,9 +56,9 @@
       text-transform: var(--typography-text-s-text_transform, none);
     }
 .Button_size_m {
-      --button-height: 56px;
+      --button-height: var(--control-height-m);
+      --button-padding-x: var(--control-padding-m);
       --button-min-width: 80px;
-      --button-padding-x: 20px;
 
       font: var(--typography-text-m-font);
 
@@ -65,9 +67,9 @@
       text-transform: var(--typography-text-m-text_transform, none);
     }
 .Button_size_l {
-      --button-height: 64px;
+      --button-height: var(--control-height-l);
+      --button-padding-x: var(--control-padding-l);
       --button-min-width: 88px;
-      --button-padding-x: 24px;
 
       font: var(--typography-text-l-font);
 

package/__inner__/cjs/components/ThemeProvider/_control/Theme_control_ozenDefault.css

@@ -0,0 +1,16 @@
+.Theme_control_ozenDefault {
+  --control-padding-4xs: 2px;
+  --control-padding-3xs: 4px;
+  --control-padding-2xs: 8px;
+  --control-padding-xs: 12px;
+  --control-padding-s: 16px;
+  --control-padding-m: 20px;
+  --control-padding-l: 24px;
+  --control-height-4xs: 16px;
+  --control-height-3xs: 24px;
+  --control-height-2xs: 32px;
+  --control-height-xs: 40px;
+  --control-height-s: 48px;
+  --control-height-m: 56px;
+  --control-height-l: 64px;
+}

package/__inner__/cjs/components/ThemeProvider/_spacing/Theme_spacing_ozenDefault.css

@@ -0,0 +1,13 @@
+.Theme_spacing_ozenDefault {
+  --spacing-4xs: 2px;
+  --spacing-3xs: 4px;
+  --spacing-2xs: 8px;
+  --spacing-xs: 12px;
+  --spacing-s: 16px;
+  --spacing-m: 24px;
+  --spacing-l: 32px;
+  --spacing-xl: 40px;
+  --spacing-2xl: 48px;
+  --spacing-3xl: 56px;
+  --spacing-4xl: 64px;
+}

package/__inner__/cjs/components/ThemeProvider/themes/helper.d.ts

@@ -5,5 +5,7 @@ export declare const shadow: readonly ["--shadow-l", "--shadow-m", "--shadow-s"]
 export declare const breakpoint: readonly ["--breakpoint-xs", "--breakpoint-s", "--breakpoint-m", "--breakpoint-l"];
 export declare const zIndex: readonly ["--z-index-default", "--z-index-absolute", "--z-index-header", "--z-index-sidebar", "--z-index-modal", "--z-index-popover", "--z-index-snackbar", "--z-index-chat"];
 export declare const space: readonly ["--space-8xl", "--space-7xl", "--space-6xl", "--space-5xl", "--space-4xl", "--space-3xl", "--space-2xl", "--space-xl", "--space-l", "--space-m", "--space-s", "--space-xs"];
+export declare const spacing: readonly ["--spacing-4xs", "--spacing-3xs", "--spacing-2xs", "--spacing-xs", "--spacing-s", "--spacing-m", "--spacing-l", "--spacing-xl", "--spacing-2xl", "--spacing-3xl", "--spacing-4xl"];
+export declare const control: readonly ["--control-padding-4xs", "--control-padding-3xs", "--control-padding-2xs", "--control-padding-xs", "--control-padding-s", "--control-padding-m", "--control-padding-l", "--control-height-4xs", "--control-height-3xs", "--control-height-2xs", "--control-height-xs", "--control-height-s", "--control-height-m", "--control-height-l"];
 export declare const typography: readonly ["--typography-text-xl_1-font", "--typography-text-4xl_1-font", "--typography-text-3xl_1-font", "--typography-text-2xl_1-font", "--typography-heading-4xl-font", "--typography-text-4xl-font", "--typography-heading-3xl-font", "--typography-text-3xl-font", "--typography-heading-2xl-font", "--typography-text-2xl-font", "--typography-heading-xl-font", "--typography-text-xl-font", "--typography-text-l-font", "--typography-text-l_1-font", "--typography-text-m-font", "--typography-text-m_1-font", "--typography-text-s-font", "--typography-text-s_1-font", "--typography-text-xs-font", "--typography-text-xs_1-font", "--typography-text-2xs-font", "--typography-text-2xs_1-font", "--typography-text-3xs-font", "--typography-caption-3xs-font", "--typography-caption-3xs-text_transform", "--typography-caption-3xs-letter_spacing", "--typography-text-3xs_1-font", "--typography-caption-3xs_1-font", "--typography-caption-3xs_1-text_transform", "--typography-caption-3xs_1-letter_spacing"];
 export declare const transition: readonly ["--transition-default", "--transition-slow"];

package/__inner__/cjs/components/ThemeProvider/themes/helper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transition = exports.typography = exports.space = exports.zIndex = exports.breakpoint = exports.shadow = exports.borderWidth = exports.borderRadius = exports.color = void 0;
+exports.transition = exports.typography = exports.control = exports.spacing = exports.space = exports.zIndex = exports.breakpoint = exports.shadow = exports.borderWidth = exports.borderRadius = exports.color = void 0;
 exports.color = [
     '--color-content-primary',
     '--color-content-secondary',
@@ -192,6 +192,35 @@ exports.space = [
     '--space-s',
     '--space-xs',
 ];
+exports.spacing = [
+    '--spacing-4xs',
+    '--spacing-3xs',
+    '--spacing-2xs',
+    '--spacing-xs',
+    '--spacing-s',
+    '--spacing-m',
+    '--spacing-l',
+    '--spacing-xl',
+    '--spacing-2xl',
+    '--spacing-3xl',
+    '--spacing-4xl',
+];
+exports.control = [
+    '--control-padding-4xs',
+    '--control-padding-3xs',
+    '--control-padding-2xs',
+    '--control-padding-xs',
+    '--control-padding-s',
+    '--control-padding-m',
+    '--control-padding-l',
+    '--control-height-4xs',
+    '--control-height-3xs',
+    '--control-height-2xs',
+    '--control-height-xs',
+    '--control-height-s',
+    '--control-height-m',
+    '--control-height-l',
+];
 exports.typography = [
     '--typography-text-xl_1-font',
     '--typography-text-4xl_1-font',

package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDefault.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_bBusinessDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDefault.js

@@ -6,6 +6,8 @@ require("../_color/Theme_color_bBusinessDefault.css");
 require("../_typography/Theme_typography_ozenDefault.css");
 require("../_borderRadius/Theme_borderRadius_ozenDefault.css");
 require("../_space/Theme_space_ozenDefault.css");
+require("../_spacing/Theme_spacing_ozenDefault.css");
+require("../_control/Theme_control_ozenDefault.css");
 require("../_shadow/Theme_shadow_ozenDefault.css");
 require("../_breakpoint/Theme_breakpoint_ozenDefault.css");
 require("../_borderWidth/Theme_borderWidth_ozenDefault.css");
@@ -15,6 +17,8 @@ exports.themeBBusinessDefault = {
     tokens: {
         color: 'bBusinessDefault',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/cjs/components/ThemeProvider/themes/themeOzenDark.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_ozenDark.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/cjs/components/ThemeProvider/themes/themeOzenDark.js

@@ -6,6 +6,8 @@ require("../_color/Theme_color_ozenDark.css");
 require("../_typography/Theme_typography_ozenDefault.css");
 require("../_borderRadius/Theme_borderRadius_ozenDefault.css");
 require("../_space/Theme_space_ozenDefault.css");
+require("../_spacing/Theme_spacing_ozenDefault.css");
+require("../_control/Theme_control_ozenDefault.css");
 require("../_shadow/Theme_shadow_ozenDefault.css");
 require("../_breakpoint/Theme_breakpoint_ozenDefault.css");
 require("../_borderWidth/Theme_borderWidth_ozenDefault.css");
@@ -15,6 +17,8 @@ exports.themeOzenDark = {
     tokens: {
         color: 'ozenDark',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/cjs/components/ThemeProvider/themes/themeOzenDefault.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_ozenDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/cjs/components/ThemeProvider/themes/themeOzenDefault.js

@@ -6,6 +6,8 @@ require("../_color/Theme_color_ozenDefault.css");
 require("../_typography/Theme_typography_ozenDefault.css");
 require("../_borderRadius/Theme_borderRadius_ozenDefault.css");
 require("../_space/Theme_space_ozenDefault.css");
+require("../_spacing/Theme_spacing_ozenDefault.css");
+require("../_control/Theme_control_ozenDefault.css");
 require("../_shadow/Theme_shadow_ozenDefault.css");
 require("../_breakpoint/Theme_breakpoint_ozenDefault.css");
 require("../_borderWidth/Theme_borderWidth_ozenDefault.css");
@@ -15,6 +17,8 @@ exports.themeOzenDefault = {
     tokens: {
         color: 'ozenDefault',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/cjs/components/ThemeProvider/types.d.ts

@@ -53,6 +53,8 @@ export type Theme = {
         borderRadius: string;
         borderWidth: string;
         space: string;
+        spacing: string;
+        control: string;
         shadow: string;
         breakpoint: string;
         zIndex: string;

package/__inner__/cjs/hooks/useThemeVars/useThemeVars.d.ts

@@ -1,5 +1,5 @@
 import { themeHelper } from '../../components/ThemeProvider';
-type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
+type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'spacing' | 'control' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
 export type ThemeVariables = {
     [P in VariablesVariant]: {
         [key in (typeof themeHelper)[P][number]]: string;

package/__inner__/esm/components/Button/Button.css

@@ -14,16 +14,18 @@
   padding: 0 var(--button-padding-x);
   background-color: var(--button-bg-color);
   border-radius: var(--border-radius-xs);
-  transition: background-color var(--transition-default),
-    border-color var(--transition-default), box-shadow var(--transition-default),
+  transition:
+    background-color var(--transition-default),
+    border-color var(--transition-default),
+    box-shadow var(--transition-default),
     opacity var(--transition-default);
   -webkit-tap-highlight-color: unset;
   position: relative;
 }
 .Button_size_2xs {
-      --button-height: 32px;
+      --button-height: var(--control-height-2xs);
+      --button-padding-x: var(--control-padding-xs);
       --button-min-width: 56px;
-      --button-padding-x: 12px;
 
       font: var(--typography-text-2xs-font);
 
@@ -32,9 +34,9 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
     }
 .Button_size_xs {
-      --button-height: 40px;
+      --button-height: var(--control-height-xs);
+      --button-padding-x: var(--control-padding-xs);
       --button-min-width: 64px;
-      --button-padding-x: 12px;
 
       font: var(--typography-text-xs-font);
 
@@ -43,9 +45,9 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Button_size_s {
-      --button-height: 48px;
+      --button-height: var(--control-height-s);
+      --button-padding-x: var(--control-padding-s);
       --button-min-width: 72px;
-      --button-padding-x: 16px;
 
       font: var(--typography-text-s-font);
 
@@ -54,9 +56,9 @@
       text-transform: var(--typography-text-s-text_transform, none);
     }
 .Button_size_m {
-      --button-height: 56px;
+      --button-height: var(--control-height-m);
+      --button-padding-x: var(--control-padding-m);
       --button-min-width: 80px;
-      --button-padding-x: 20px;
 
       font: var(--typography-text-m-font);
 
@@ -65,9 +67,9 @@
       text-transform: var(--typography-text-m-text_transform, none);
     }
 .Button_size_l {
-      --button-height: 64px;
+      --button-height: var(--control-height-l);
+      --button-padding-x: var(--control-padding-l);
       --button-min-width: 88px;
-      --button-padding-x: 24px;
 
       font: var(--typography-text-l-font);
 

package/__inner__/esm/components/ThemeProvider/_control/Theme_control_ozenDefault.css

@@ -0,0 +1,16 @@
+.Theme_control_ozenDefault {
+  --control-padding-4xs: 2px;
+  --control-padding-3xs: 4px;
+  --control-padding-2xs: 8px;
+  --control-padding-xs: 12px;
+  --control-padding-s: 16px;
+  --control-padding-m: 20px;
+  --control-padding-l: 24px;
+  --control-height-4xs: 16px;
+  --control-height-3xs: 24px;
+  --control-height-2xs: 32px;
+  --control-height-xs: 40px;
+  --control-height-s: 48px;
+  --control-height-m: 56px;
+  --control-height-l: 64px;
+}

package/__inner__/esm/components/ThemeProvider/_spacing/Theme_spacing_ozenDefault.css

@@ -0,0 +1,13 @@
+.Theme_spacing_ozenDefault {
+  --spacing-4xs: 2px;
+  --spacing-3xs: 4px;
+  --spacing-2xs: 8px;
+  --spacing-xs: 12px;
+  --spacing-s: 16px;
+  --spacing-m: 24px;
+  --spacing-l: 32px;
+  --spacing-xl: 40px;
+  --spacing-2xl: 48px;
+  --spacing-3xl: 56px;
+  --spacing-4xl: 64px;
+}

package/__inner__/esm/components/ThemeProvider/themes/helper.d.ts

@@ -5,5 +5,7 @@ export declare const shadow: readonly ["--shadow-l", "--shadow-m", "--shadow-s"]
 export declare const breakpoint: readonly ["--breakpoint-xs", "--breakpoint-s", "--breakpoint-m", "--breakpoint-l"];
 export declare const zIndex: readonly ["--z-index-default", "--z-index-absolute", "--z-index-header", "--z-index-sidebar", "--z-index-modal", "--z-index-popover", "--z-index-snackbar", "--z-index-chat"];
 export declare const space: readonly ["--space-8xl", "--space-7xl", "--space-6xl", "--space-5xl", "--space-4xl", "--space-3xl", "--space-2xl", "--space-xl", "--space-l", "--space-m", "--space-s", "--space-xs"];
+export declare const spacing: readonly ["--spacing-4xs", "--spacing-3xs", "--spacing-2xs", "--spacing-xs", "--spacing-s", "--spacing-m", "--spacing-l", "--spacing-xl", "--spacing-2xl", "--spacing-3xl", "--spacing-4xl"];
+export declare const control: readonly ["--control-padding-4xs", "--control-padding-3xs", "--control-padding-2xs", "--control-padding-xs", "--control-padding-s", "--control-padding-m", "--control-padding-l", "--control-height-4xs", "--control-height-3xs", "--control-height-2xs", "--control-height-xs", "--control-height-s", "--control-height-m", "--control-height-l"];
 export declare const typography: readonly ["--typography-text-xl_1-font", "--typography-text-4xl_1-font", "--typography-text-3xl_1-font", "--typography-text-2xl_1-font", "--typography-heading-4xl-font", "--typography-text-4xl-font", "--typography-heading-3xl-font", "--typography-text-3xl-font", "--typography-heading-2xl-font", "--typography-text-2xl-font", "--typography-heading-xl-font", "--typography-text-xl-font", "--typography-text-l-font", "--typography-text-l_1-font", "--typography-text-m-font", "--typography-text-m_1-font", "--typography-text-s-font", "--typography-text-s_1-font", "--typography-text-xs-font", "--typography-text-xs_1-font", "--typography-text-2xs-font", "--typography-text-2xs_1-font", "--typography-text-3xs-font", "--typography-caption-3xs-font", "--typography-caption-3xs-text_transform", "--typography-caption-3xs-letter_spacing", "--typography-text-3xs_1-font", "--typography-caption-3xs_1-font", "--typography-caption-3xs_1-text_transform", "--typography-caption-3xs_1-letter_spacing"];
 export declare const transition: readonly ["--transition-default", "--transition-slow"];

package/__inner__/esm/components/ThemeProvider/themes/helper.js

@@ -189,6 +189,35 @@ export var space = [
     '--space-s',
     '--space-xs',
 ];
+export var spacing = [
+    '--spacing-4xs',
+    '--spacing-3xs',
+    '--spacing-2xs',
+    '--spacing-xs',
+    '--spacing-s',
+    '--spacing-m',
+    '--spacing-l',
+    '--spacing-xl',
+    '--spacing-2xl',
+    '--spacing-3xl',
+    '--spacing-4xl',
+];
+export var control = [
+    '--control-padding-4xs',
+    '--control-padding-3xs',
+    '--control-padding-2xs',
+    '--control-padding-xs',
+    '--control-padding-s',
+    '--control-padding-m',
+    '--control-padding-l',
+    '--control-height-4xs',
+    '--control-height-3xs',
+    '--control-height-2xs',
+    '--control-height-xs',
+    '--control-height-s',
+    '--control-height-m',
+    '--control-height-l',
+];
 export var typography = [
     '--typography-text-xl_1-font',
     '--typography-text-4xl_1-font',

package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDefault.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_bBusinessDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDefault.js

@@ -3,6 +3,8 @@ import '../_color/Theme_color_bBusinessDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
@@ -12,6 +14,8 @@ export var themeBBusinessDefault = {
     tokens: {
         color: 'bBusinessDefault',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDark.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_ozenDark.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDark.js

@@ -3,6 +3,8 @@ import '../_color/Theme_color_ozenDark.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
@@ -12,6 +14,8 @@ export var themeOzenDark = {
     tokens: {
         color: 'ozenDark',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDefault.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_ozenDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDefault.js

@@ -3,6 +3,8 @@ import '../_color/Theme_color_ozenDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
@@ -12,6 +14,8 @@ export var themeOzenDefault = {
     tokens: {
         color: 'ozenDefault',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/esm/components/ThemeProvider/types.d.ts

@@ -53,6 +53,8 @@ export type Theme = {
         borderRadius: string;
         borderWidth: string;
         space: string;
+        spacing: string;
+        control: string;
         shadow: string;
         breakpoint: string;
         zIndex: string;

package/__inner__/esm/hooks/useThemeVars/useThemeVars.d.ts

@@ -1,5 +1,5 @@
 import { themeHelper } from '../../components/ThemeProvider';
-type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
+type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'spacing' | 'control' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
 export type ThemeVariables = {
     [P in VariablesVariant]: {
         [key in (typeof themeHelper)[P][number]]: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "React component library",
   "files": [
     "*"