@mirohq/design-system-stitches 2.2.3 → 2.2.4

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ElementType, ComponentPropsWithRef, ComponentType } from 'react';
+import React__default, { ElementType, PropsWithChildren, ComponentPropsWithRef, ComponentType } from 'react';
 import { CSS as CSS$1, VariantProps } from '@stitches/react';
 import { OnlyHTMLAttributes } from '@mirohq/design-system-types';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
@@ -953,7 +953,7 @@ declare const createTheme: <Argument0 extends string | ({
     className: string;
     selector: string;
 } & (Argument0 extends string ? _stitches_react_types_stitches.ThemeTokens<Argument1, ""> : _stitches_react_types_stitches.ThemeTokens<Argument0, "">);
-declare const css: <Composers extends (string | _stitches_react_types_util.Function | React.ExoticComponent<any> | React.JSXElementConstructor<any> | {
+declare const css: <Composers extends (string | _stitches_react_types_util.Function | React.JSXElementConstructor<any> | React.ExoticComponent<any> | {
     [name: string]: unknown;
 })[], CSS = CSSUtil.CSS<{}, {
     'border-widths': {
@@ -1382,7 +1382,7 @@ declare const css: <Composers extends (string | _stitches_react_types_util.Funct
             readonly [CSSUtil.$$PropertyValue]: "width";
         };
     };
-}>>(...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | _stitches_react_types_util.Function | React.ExoticComponent<any> | React.JSXElementConstructor<any> ? Composers[K] : _stitches_react_types_stitches.RemoveIndex<CSS> & {
+}>>(...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | _stitches_react_types_util.Function | React.JSXElementConstructor<any> | React.ExoticComponent<any> ? Composers[K] : _stitches_react_types_stitches.RemoveIndex<CSS> & {
     variants?: {
         [x: string]: {
             [x: string]: CSS;
@@ -2694,14 +2694,14 @@ declare type FontFace = CSSUtil.Native.AtRule.FontFace;
 declare const fontFace: (...fonts: FontFace[]) => string;
 
 declare type ForbiddenProps = 'className' | 'style' | 'as';
-declare type AllowedProps = 'css' | 'asChild' | 'UNSAFE_style';
+declare type AllowedProps = 'css' | 'asChild' | 'UNSAFE_style' | 'children';
 declare type SafeProps<T> = Omit<T, ForbiddenProps>;
 declare type CSS = CSS$1<typeof config>;
 /**
  * Build a type with all props from a element and Stitches CSS keys
  * and remove dangerous attributes that could cause styles issues
  */
-declare type StyledComponentProps<Element extends ElementType> = SafeProps<ComponentPropsWithRef<Element>>;
+declare type StyledComponentProps<Element extends ElementType> = PropsWithChildren<SafeProps<ComponentPropsWithRef<Element>>>;
 /**
  * Filter out all non-html props and forbidden attributes from the extended component.
  *
@@ -2900,440 +2900,444 @@ interface CustomStylesProps {
     css?: CSS;
     UNSAFE_style?: CSS;
 }
-declare const styled: <Element_1 extends _stitches_react_types_util.Function | keyof JSX.IntrinsicElements | React__default.ComponentType<any> = "span", Composers extends string | _stitches_react_types_util.Function | React__default.ExoticComponent<any> | React__default.JSXElementConstructor<any> | {
+declare const styled: <Element_1 extends _stitches_react_types_util.Function | keyof JSX.IntrinsicElements | React__default.ComponentType<any> = "span", Composers extends string | _stitches_react_types_util.Function | React__default.JSXElementConstructor<any> | React__default.ExoticComponent<any> | {
     [name: string]: unknown;
 } = {}>(element: Element_1, composers?: Styles<Composers> | undefined) => React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<Omit<StyledComponentProps$1<[Composers]>, keyof (typeof $$StyledComponentProps extends keyof Composers ? Composers[keyof Composers & typeof $$StyledComponentProps] : Composers extends {
     variants: {
         [name: string]: unknown;
     };
-} ? Composers["variants"] extends infer T ? { [K in keyof T]?: _stitches_react_types_util.Widen<keyof Composers["variants"][K]> | undefined; } : never : {})> & TransformProps<StyledComponentProps$1<[Composers]>, {}> & StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<Element_1, {}, {}, CSSUtil.CSS<{}, {
-    'border-widths': {
-        readonly none: 0;
-        readonly sm: "1px";
-        readonly md: "2px";
-        readonly lg: "4px";
-    };
-    colors: {
-        readonly 'blue-100': any;
-        readonly 'blue-200': any;
-        readonly 'blue-300': any;
-        readonly 'blue-400': any;
-        readonly 'blue-500': any;
-        readonly 'blue-600': any;
-        readonly 'blue-700': any;
-        readonly 'blue-800': any;
-        readonly 'blue-900': any;
-        readonly 'blue-1000': any;
-        readonly 'gray-100': any;
-        readonly 'gray-200': any;
-        readonly 'gray-300': any;
-        readonly 'gray-400': any;
-        readonly 'gray-500': any;
-        readonly 'gray-600': any;
-        readonly 'gray-700': any;
-        readonly 'gray-800': any;
-        readonly 'gray-900': any;
-        readonly 'indigo-100': any;
-        readonly 'indigo-200': any;
-        readonly 'indigo-300': any;
-        readonly 'indigo-400': any;
-        readonly 'indigo-500': any;
-        readonly 'indigo-600': any;
-        readonly 'indigo-700': any;
-        readonly 'indigo-800': any;
-        readonly 'indigo-900': any;
-        readonly 'red-100': any;
-        readonly 'red-200': any;
-        readonly 'red-300': any;
-        readonly 'red-400': any;
-        readonly 'red-500': any;
-        readonly 'red-600': any;
-        readonly 'red-700': any;
-        readonly 'red-800': any;
-        readonly 'red-900': any;
-        readonly 'yellow-100': any;
-        readonly 'yellow-200': any;
-        readonly 'yellow-300': any;
-        readonly 'yellow-400': any;
-        readonly 'yellow-500': any;
-        readonly 'yellow-600': any;
-        readonly 'yellow-700': any;
-        readonly 'yellow-800': any;
-        readonly 'yellow-900': any;
-        readonly 'green-100': any;
-        readonly 'green-200': any;
-        readonly 'green-300': any;
-        readonly 'green-400': any;
-        readonly 'green-500': any;
-        readonly 'green-600': any;
-        readonly 'green-700': any;
-        readonly 'green-800': any;
-        readonly 'green-900': any;
-        readonly black: any;
-        readonly white: any;
-        readonly transparent: any;
-        readonly 'background-neutrals'?: any;
-        readonly 'background-neutrals-body'?: any;
-        readonly 'background-neutrals-container'?: any;
-        readonly 'background-neutrals-inverted'?: any;
-        readonly 'background-neutrals-inverted-subtle'?: any;
-        readonly 'background-neutrals-subtle'?: any;
-        readonly 'background-neutrals-subtle-hover'?: any;
-        readonly 'background-neutrals-subtle-active'?: any;
-        readonly 'background-neutrals-disabled'?: any;
-        readonly 'background-neutrals-controls-disabled'?: any;
-        readonly 'background-neutrals-scrolls'?: any;
-        readonly 'background-neutrals-inactive'?: any;
-        readonly 'background-neutrals-inactive-hover'?: any;
-        readonly 'background-primary-prominent'?: any;
-        readonly 'background-primary-prominent-hover'?: any;
-        readonly 'background-primary-prominent-active'?: any;
-        readonly 'background-primary-prominent-selected'?: any;
-        readonly 'background-primary-subtle'?: any;
-        readonly 'background-primary-subtle-hover'?: any;
-        readonly 'background-primary-subtle-active'?: any;
-        readonly 'background-primary-subtle-selected'?: any;
-        readonly 'background-danger-prominent'?: any;
-        readonly 'background-danger-prominent-hover'?: any;
-        readonly 'background-danger-prominent-active'?: any;
-        readonly 'background-danger'?: any;
-        readonly 'background-danger-hover'?: any;
-        readonly 'background-success'?: any;
-        readonly 'background-warning-subtle'?: any;
-        readonly 'background-warning-prominent'?: any;
-        readonly 'text-neutrals-inverted'?: any;
-        readonly 'text-neutrals'?: any;
-        readonly 'text-neutrals-subtle'?: any;
-        readonly 'text-neutrals-placeholder-only'?: any;
-        readonly 'text-neutrals-placeholder'?: any;
-        readonly 'text-neutrals-disabled'?: any;
-        readonly 'text-primary-inverted'?: any;
-        readonly 'text-primary'?: any;
-        readonly 'text-primary-hover'?: any;
-        readonly 'text-primary-active'?: any;
-        readonly 'text-primary-selected'?: any;
-        readonly 'text-primary-inverted-subtle'?: any;
-        readonly 'text-danger-inverted'?: any;
-        readonly 'text-danger'?: any;
-        readonly 'text-danger-hover'?: any;
-        readonly 'text-danger-active'?: any;
-        readonly 'text-success'?: any;
-        readonly 'text-warning'?: any;
-        readonly 'icon-neutrals-inverted'?: any;
-        readonly 'icon-neutrals'?: any;
-        readonly 'icon-neutrals-with-text'?: any;
-        readonly 'icon-neutrals-subtle'?: any;
-        readonly 'icon-neutrals-disabled'?: any;
-        readonly 'icon-neutrals-search'?: any;
-        readonly 'icon-neutrals-inactive'?: any;
-        readonly 'icon-neutrals-inactive-hover'?: any;
-        readonly 'icon-primary-inverted'?: any;
-        readonly 'icon-primary'?: any;
-        readonly 'icon-primary-hover'?: any;
-        readonly 'icon-primary-active'?: any;
-        readonly 'icon-primary-selected'?: any;
-        readonly 'icon-danger-inverted'?: any;
-        readonly 'icon-danger'?: any;
-        readonly 'icon-danger-hover'?: any;
-        readonly 'icon-danger-active'?: any;
-        readonly 'icon-success-inverted'?: any;
-        readonly 'icon-success'?: any;
-        readonly 'icon-warning'?: any;
-        readonly 'border-focus-outer'?: any;
-        readonly 'border-focus-middle'?: any;
-        readonly 'border-focus-inner'?: any;
-        readonly 'border-neutrals'?: any;
-        readonly 'border-neutrals-hover'?: any;
-        readonly 'border-neutrals-active'?: any;
-        readonly 'border-neutrals-disabled'?: any;
-        readonly 'border-neutrals-controls'?: any;
-        readonly 'border-neutrals-controls-disabled'?: any;
-        readonly 'border-neutrals-subtle'?: any;
-        readonly 'border-neutrals-inverted'?: any;
-        readonly 'border-primary'?: any;
-        readonly 'border-primary-hover'?: any;
-        readonly 'border-primary-active'?: any;
-        readonly 'border-primary-inverted'?: any;
-        readonly 'border-danger'?: any;
-        readonly 'border-success'?: any;
-        readonly 'border-warning'?: any;
-    };
-    'font-sizes': {
-        readonly 150: "0.75rem";
-        readonly 175: "0.875rem";
-        readonly 200: "1rem";
-        readonly 225: "1.125rem";
-        readonly 250: "1.25rem";
-        readonly 300: "1.5rem";
-        readonly 400: "2rem";
-        readonly 500: "2.5rem";
-        readonly 600: "3rem";
-        readonly 800: "4rem";
-        readonly 900: "4.5rem";
-    };
-    radii: {
-        readonly none: 0;
-        readonly half: "999em";
-        readonly 25: "2px";
-        readonly 50: "4px";
-        readonly 75: "6px";
-        readonly 100: "8px";
-        readonly 200: "16px";
-    };
-    shadows: {
-        readonly 50: "0 4px 16px #05003812";
-        readonly 100: "0 8px 32px #05003808";
-        readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
-        readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
-        readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
-        readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
-    };
-    sizes: {
-        readonly number: string;
-        readonly 'icon-200': "16px";
-        readonly 'icon-300': "24px";
-        readonly 'icon-400': "32px";
-    };
-    space: {
-        readonly none: 0;
-        readonly 50: "4px";
-        readonly 100: "8px";
-        readonly 150: "12px";
-        readonly 200: "16px";
-        readonly 300: "24px";
-        readonly 400: "32px";
-        readonly 500: "64px";
-        readonly 600: "48px";
-        readonly 800: "64px";
-        readonly 1200: "96px";
-        readonly 1600: "128px";
-    };
-    'space-gap': {
-        readonly none: any;
-        readonly 50: any;
-        readonly 100: any;
-        readonly 200: any;
-        readonly 300: any;
-    };
-    'space-inset': {
-        readonly none: any;
-        readonly 50: any;
-        readonly 100: any;
-        readonly 150: any;
-        readonly 200: any;
-        readonly 300: any;
-        readonly 400: any;
-        readonly 600: any;
-        readonly 800: any;
-        readonly 1200: any;
-        readonly 1600: any;
-    };
-    'space-offset': {
-        readonly none: any;
-        readonly 50: any;
-        readonly 100: any;
-        readonly 150: any;
-        readonly 200: any;
-        readonly 300: any;
-        readonly 400: any;
-        readonly 600: any;
-        readonly 800: any;
-        readonly 1200: any;
-        readonly 1600: any;
-        readonly 'stacking-none': any;
-        readonly 'stacking-100': any;
-        readonly 'stacking-200': any;
-        readonly 'stacking-300': any;
-        readonly 'stacking-400': any;
-        readonly 'stacking-500': any;
-        readonly 'stacking-800': any;
-    };
-    'z-indices': {
-        readonly dropdownMenu: 100;
-        readonly popover: 200;
-        readonly tooltip: 300;
-    };
-}, {
-    readonly background: "colors";
-    readonly backgroundColor: "colors";
-    readonly backgroundImage: "colors";
-    readonly blockSize: "sizes";
-    readonly border: "colors";
-    readonly borderBlock: "colors";
-    readonly borderBlockEnd: "colors";
-    readonly borderBlockStart: "colors";
-    readonly borderBottom: "colors";
-    readonly borderBottomColor: "colors";
-    readonly borderBottomLeftRadius: "radii";
-    readonly borderBottomRightRadius: "radii";
-    readonly borderBottomStyle: "border-styles";
-    readonly borderBottomWidth: "border-widths";
-    readonly borderColor: "colors";
-    readonly borderImage: "colors";
-    readonly borderInline: "colors";
-    readonly borderInlineEnd: "colors";
-    readonly borderInlineStart: "colors";
-    readonly borderLeft: "colors";
-    readonly borderLeftColor: "colors";
-    readonly borderLeftStyle: "border-styles";
-    readonly borderLeftWidth: "border-widths";
-    readonly borderRadius: "radii";
-    readonly borderRight: "colors";
-    readonly borderRightColor: "colors";
-    readonly borderRightStyle: "border-styles";
-    readonly borderRightWidth: "border-widths";
-    readonly borderStyle: "border-styles";
-    readonly borderTop: "colors";
-    readonly borderTopColor: "colors";
-    readonly borderTopLeftRadius: "radii";
-    readonly borderTopRightRadius: "radii";
-    readonly borderTopStyle: "border-styles";
-    readonly borderTopWidth: "border-widths";
-    readonly borderWidth: "border-widths";
-    readonly bottom: "space";
-    readonly boxShadow: "shadows";
-    readonly caretColor: "colors";
-    readonly color: "colors";
-    readonly columnGap: "space-gap";
-    readonly columnRuleColor: "colors";
-    readonly fill: "colors";
-    readonly flexBasis: "sizes";
-    readonly fontFamily: "fonts";
-    readonly fontSize: "font-sizes";
-    readonly fontWeight: "font-weights";
-    readonly gap: "space-gap";
-    readonly gridColumnGap: "space-gap";
-    readonly gridGap: "space-gap";
-    readonly gridRowGap: "space-gap";
-    readonly gridTemplateColumns: "sizes";
-    readonly gridTemplateRows: "sizes";
-    readonly height: "sizes";
-    readonly inlineSize: "sizes";
-    readonly inset: "space-inset";
-    readonly insetBlock: "space-inset";
-    readonly insetBlockEnd: "space-inset";
-    readonly insetBlockStart: "space-inset";
-    readonly insetInline: "space-inset";
-    readonly insetInlineEnd: "space-inset";
-    readonly insetInlineStart: "space-inset";
-    readonly left: "space";
-    readonly letterSpacing: "letter-spacings";
-    readonly lineHeight: "line-heights";
-    readonly margin: "space-offset";
-    readonly marginBlock: "space-offset";
-    readonly marginBlockEnd: "space-offset";
-    readonly marginBlockStart: "space-offset";
-    readonly marginBottom: "space-offset";
-    readonly marginInline: "space-offset";
-    readonly marginInlineEnd: "space-offset";
-    readonly marginInlineStart: "space-offset";
-    readonly marginLeft: "space-offset";
-    readonly marginRight: "space-offset";
-    readonly marginTop: "space-offset";
-    readonly maxBlockSize: "sizes";
-    readonly maxHeight: "sizes";
-    readonly maxInlineSize: "sizes";
-    readonly maxWidth: "sizes";
-    readonly minBlockSize: "sizes";
-    readonly minHeight: "sizes";
-    readonly minInlineSize: "sizes";
-    readonly minWidth: "sizes";
-    readonly outline: "colors";
-    readonly outlineColor: "colors";
-    readonly padding: "space-inset";
-    readonly paddingBlock: "space-inset";
-    readonly paddingBlockEnd: "space-inset";
-    readonly paddingBlockStart: "space-inset";
-    readonly paddingBottom: "space-inset";
-    readonly paddingInline: "space-inset";
-    readonly paddingInlineEnd: "space-inset";
-    readonly paddingInlineStart: "space-inset";
-    readonly paddingLeft: "space-inset";
-    readonly paddingRight: "space-inset";
-    readonly paddingTop: "space-inset";
-    readonly right: "space";
-    readonly rowGap: "space-gap";
-    readonly scrollMargin: "space-offset";
-    readonly scrollMarginBlock: "space-offset";
-    readonly scrollMarginBlockEnd: "space-offset";
-    readonly scrollMarginBlockStart: "space-offset";
-    readonly scrollMarginBottom: "space-offset";
-    readonly scrollMarginInline: "space-offset";
-    readonly scrollMarginInlineEnd: "space-offset";
-    readonly scrollMarginInlineStart: "space-offset";
-    readonly scrollMarginLeft: "space-offset";
-    readonly scrollMarginRight: "space-offset";
-    readonly scrollMarginTop: "space-offset";
-    readonly scrollPadding: "space-inset";
-    readonly scrollPaddingBlock: "space-inset";
-    readonly scrollPaddingBlockEnd: "space-inset";
-    readonly scrollPaddingBlockStart: "space-inset";
-    readonly scrollPaddingBottom: "space-inset";
-    readonly scrollPaddingInline: "space-inset";
-    readonly scrollPaddingInlineEnd: "space-inset";
-    readonly scrollPaddingInlineStart: "space-inset";
-    readonly scrollPaddingLeft: "space-inset";
-    readonly scrollPaddingRight: "space-inset";
-    readonly scrollPaddingTop: "space-inset";
-    readonly stroke: "colors";
-    readonly textDecorationColor: "colors";
-    readonly textShadow: "shadows";
-    readonly top: "space";
-    readonly transition: "transitions";
-    readonly width: "sizes";
-    readonly zIndex: "z-indices";
-}, {
-    paddingX: (value: {
-        readonly [$$PropertyValue]: "padding";
-    }) => {
-        paddingLeft: {
-            readonly [$$PropertyValue]: "padding";
+} ? Composers["variants"] extends infer T ? { [K in keyof T]?: _stitches_react_types_util.Widen<keyof Composers["variants"][K]> | undefined; } : never : {})> & TransformProps<StyledComponentProps$1<[Composers]>, {}> & SafeProps<React__default.PropsWithRef<_stitches_react_types_util.Assign<Element_1 extends keyof JSX.IntrinsicElements | React__default.ComponentType<any> ? React__default.ComponentPropsWithRef<Element_1> : never, TransformProps<{}, {}> & {
+    css?: CSSUtil.CSS<{}, {
+        'border-widths': {
+            readonly none: 0;
+            readonly sm: "1px";
+            readonly md: "2px";
+            readonly lg: "4px";
+        };
+        colors: {
+            readonly 'blue-100': any;
+            readonly 'blue-200': any;
+            readonly 'blue-300': any;
+            readonly 'blue-400': any;
+            readonly 'blue-500': any;
+            readonly 'blue-600': any;
+            readonly 'blue-700': any;
+            readonly 'blue-800': any;
+            readonly 'blue-900': any;
+            readonly 'blue-1000': any;
+            readonly 'gray-100': any;
+            readonly 'gray-200': any;
+            readonly 'gray-300': any;
+            readonly 'gray-400': any;
+            readonly 'gray-500': any;
+            readonly 'gray-600': any;
+            readonly 'gray-700': any;
+            readonly 'gray-800': any;
+            readonly 'gray-900': any;
+            readonly 'indigo-100': any;
+            readonly 'indigo-200': any;
+            readonly 'indigo-300': any;
+            readonly 'indigo-400': any;
+            readonly 'indigo-500': any;
+            readonly 'indigo-600': any;
+            readonly 'indigo-700': any;
+            readonly 'indigo-800': any;
+            readonly 'indigo-900': any;
+            readonly 'red-100': any;
+            readonly 'red-200': any;
+            readonly 'red-300': any;
+            readonly 'red-400': any;
+            readonly 'red-500': any;
+            readonly 'red-600': any;
+            readonly 'red-700': any;
+            readonly 'red-800': any;
+            readonly 'red-900': any;
+            readonly 'yellow-100': any;
+            readonly 'yellow-200': any;
+            readonly 'yellow-300': any;
+            readonly 'yellow-400': any;
+            readonly 'yellow-500': any;
+            readonly 'yellow-600': any;
+            readonly 'yellow-700': any;
+            readonly 'yellow-800': any;
+            readonly 'yellow-900': any;
+            readonly 'green-100': any;
+            readonly 'green-200': any;
+            readonly 'green-300': any;
+            readonly 'green-400': any;
+            readonly 'green-500': any;
+            readonly 'green-600': any;
+            readonly 'green-700': any;
+            readonly 'green-800': any;
+            readonly 'green-900': any;
+            readonly black: any;
+            readonly white: any;
+            readonly transparent: any;
+            readonly 'background-neutrals'?: any;
+            readonly 'background-neutrals-body'?: any;
+            readonly 'background-neutrals-container'?: any;
+            readonly 'background-neutrals-inverted'?: any;
+            readonly 'background-neutrals-inverted-subtle'?: any;
+            readonly 'background-neutrals-subtle'?: any;
+            readonly 'background-neutrals-subtle-hover'?: any;
+            readonly 'background-neutrals-subtle-active'?: any;
+            readonly 'background-neutrals-disabled'?: any;
+            readonly 'background-neutrals-controls-disabled'?: any;
+            readonly 'background-neutrals-scrolls'?: any;
+            readonly 'background-neutrals-inactive'?: any;
+            readonly 'background-neutrals-inactive-hover'?: any;
+            readonly 'background-primary-prominent'?: any;
+            readonly 'background-primary-prominent-hover'?: any;
+            readonly 'background-primary-prominent-active'?: any;
+            readonly 'background-primary-prominent-selected'?: any;
+            readonly 'background-primary-subtle'?: any;
+            readonly 'background-primary-subtle-hover'?: any;
+            readonly 'background-primary-subtle-active'?: any;
+            readonly 'background-primary-subtle-selected'?: any;
+            readonly 'background-danger-prominent'?: any;
+            readonly 'background-danger-prominent-hover'?: any;
+            readonly 'background-danger-prominent-active'?: any;
+            readonly 'background-danger'?: any;
+            readonly 'background-danger-hover'?: any;
+            readonly 'background-success'?: any;
+            readonly 'background-warning-subtle'?: any;
+            readonly 'background-warning-prominent'?: any;
+            readonly 'text-neutrals-inverted'?: any;
+            readonly 'text-neutrals'?: any;
+            readonly 'text-neutrals-subtle'?: any;
+            readonly 'text-neutrals-placeholder-only'?: any;
+            readonly 'text-neutrals-placeholder'?: any;
+            readonly 'text-neutrals-disabled'?: any;
+            readonly 'text-primary-inverted'?: any;
+            readonly 'text-primary'?: any;
+            readonly 'text-primary-hover'?: any;
+            readonly 'text-primary-active'?: any;
+            readonly 'text-primary-selected'?: any;
+            readonly 'text-primary-inverted-subtle'?: any;
+            readonly 'text-danger-inverted'?: any;
+            readonly 'text-danger'?: any;
+            readonly 'text-danger-hover'?: any;
+            readonly 'text-danger-active'?: any;
+            readonly 'text-success'?: any;
+            readonly 'text-warning'?: any;
+            readonly 'icon-neutrals-inverted'?: any;
+            readonly 'icon-neutrals'?: any;
+            readonly 'icon-neutrals-with-text'?: any;
+            readonly 'icon-neutrals-subtle'?: any;
+            readonly 'icon-neutrals-disabled'?: any;
+            readonly 'icon-neutrals-search'?: any;
+            readonly 'icon-neutrals-inactive'?: any;
+            readonly 'icon-neutrals-inactive-hover'?: any;
+            readonly 'icon-primary-inverted'?: any;
+            readonly 'icon-primary'?: any;
+            readonly 'icon-primary-hover'?: any;
+            readonly 'icon-primary-active'?: any;
+            readonly 'icon-primary-selected'?: any;
+            readonly 'icon-danger-inverted'?: any;
+            readonly 'icon-danger'?: any;
+            readonly 'icon-danger-hover'?: any;
+            readonly 'icon-danger-active'?: any;
+            readonly 'icon-success-inverted'?: any;
+            readonly 'icon-success'?: any;
+            readonly 'icon-warning'?: any;
+            readonly 'border-focus-outer'?: any;
+            readonly 'border-focus-middle'?: any;
+            readonly 'border-focus-inner'?: any;
+            readonly 'border-neutrals'?: any;
+            readonly 'border-neutrals-hover'?: any;
+            readonly 'border-neutrals-active'?: any;
+            readonly 'border-neutrals-disabled'?: any;
+            readonly 'border-neutrals-controls'?: any;
+            readonly 'border-neutrals-controls-disabled'?: any;
+            readonly 'border-neutrals-subtle'?: any;
+            readonly 'border-neutrals-inverted'?: any;
+            readonly 'border-primary'?: any;
+            readonly 'border-primary-hover'?: any;
+            readonly 'border-primary-active'?: any;
+            readonly 'border-primary-inverted'?: any;
+            readonly 'border-danger'?: any;
+            readonly 'border-success'?: any;
+            readonly 'border-warning'?: any;
+        };
+        'font-sizes': {
+            readonly 150: "0.75rem";
+            readonly 175: "0.875rem";
+            readonly 200: "1rem";
+            readonly 225: "1.125rem";
+            readonly 250: "1.25rem";
+            readonly 300: "1.5rem";
+            readonly 400: "2rem";
+            readonly 500: "2.5rem";
+            readonly 600: "3rem";
+            readonly 800: "4rem";
+            readonly 900: "4.5rem";
+        };
+        radii: {
+            readonly none: 0;
+            readonly half: "999em";
+            readonly 25: "2px";
+            readonly 50: "4px";
+            readonly 75: "6px";
+            readonly 100: "8px";
+            readonly 200: "16px";
+        };
+        shadows: {
+            readonly 50: "0 4px 16px #05003812";
+            readonly 100: "0 8px 32px #05003808";
+            readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
+            readonly 'focus-small-outline': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 1px $colors$border-focus-middle, inset 0 0 0 2px $colors$border-focus-inner";
+            readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
+            readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
+        };
+        sizes: {
+            readonly number: string;
+            readonly 'icon-200': "16px";
+            readonly 'icon-300': "24px";
+            readonly 'icon-400': "32px";
         };
-        paddingRight: {
-            readonly [$$PropertyValue]: "padding";
+        space: {
+            readonly none: 0;
+            readonly 50: "4px";
+            readonly 100: "8px";
+            readonly 150: "12px";
+            readonly 200: "16px";
+            readonly 300: "24px";
+            readonly 400: "32px";
+            readonly 500: "64px";
+            readonly 600: "48px";
+            readonly 800: "64px";
+            readonly 1200: "96px";
+            readonly 1600: "128px";
         };
-    };
-    paddingY: (value: {
-        readonly [$$PropertyValue]: "padding";
-    }) => {
-        paddingTop: {
-            readonly [$$PropertyValue]: "padding";
+        'space-gap': {
+            readonly none: any;
+            readonly 50: any;
+            readonly 100: any;
+            readonly 200: any;
+            readonly 300: any;
         };
-        paddingBottom: {
-            readonly [$$PropertyValue]: "padding";
+        'space-inset': {
+            readonly none: any;
+            readonly 50: any;
+            readonly 100: any;
+            readonly 150: any;
+            readonly 200: any;
+            readonly 300: any;
+            readonly 400: any;
+            readonly 600: any;
+            readonly 800: any;
+            readonly 1200: any;
+            readonly 1600: any;
         };
-    };
-    marginX: (value: {
-        readonly [$$PropertyValue]: "margin";
-    }) => {
-        marginLeft: {
-            readonly [$$PropertyValue]: "margin";
+        'space-offset': {
+            readonly none: any;
+            readonly 50: any;
+            readonly 100: any;
+            readonly 150: any;
+            readonly 200: any;
+            readonly 300: any;
+            readonly 400: any;
+            readonly 600: any;
+            readonly 800: any;
+            readonly 1200: any;
+            readonly 1600: any;
+            readonly 'stacking-none': any;
+            readonly 'stacking-100': any;
+            readonly 'stacking-200': any;
+            readonly 'stacking-300': any;
+            readonly 'stacking-400': any;
+            readonly 'stacking-500': any;
+            readonly 'stacking-800': any;
         };
-        marginRight: {
-            readonly [$$PropertyValue]: "margin";
+        'z-indices': {
+            readonly dropdownMenu: 100;
+            readonly popover: 200;
+            readonly tooltip: 300;
         };
-    };
-    marginY: (value: {
-        readonly [$$PropertyValue]: "margin";
-    }) => {
-        marginTop: {
-            readonly [$$PropertyValue]: "margin";
+    }, {
+        readonly background: "colors";
+        readonly backgroundColor: "colors";
+        readonly backgroundImage: "colors";
+        readonly blockSize: "sizes";
+        readonly border: "colors";
+        readonly borderBlock: "colors";
+        readonly borderBlockEnd: "colors";
+        readonly borderBlockStart: "colors";
+        readonly borderBottom: "colors";
+        readonly borderBottomColor: "colors";
+        readonly borderBottomLeftRadius: "radii";
+        readonly borderBottomRightRadius: "radii";
+        readonly borderBottomStyle: "border-styles";
+        readonly borderBottomWidth: "border-widths";
+        readonly borderColor: "colors";
+        readonly borderImage: "colors";
+        readonly borderInline: "colors";
+        readonly borderInlineEnd: "colors";
+        readonly borderInlineStart: "colors";
+        readonly borderLeft: "colors";
+        readonly borderLeftColor: "colors";
+        readonly borderLeftStyle: "border-styles";
+        readonly borderLeftWidth: "border-widths";
+        readonly borderRadius: "radii";
+        readonly borderRight: "colors";
+        readonly borderRightColor: "colors";
+        readonly borderRightStyle: "border-styles";
+        readonly borderRightWidth: "border-widths";
+        readonly borderStyle: "border-styles";
+        readonly borderTop: "colors";
+        readonly borderTopColor: "colors";
+        readonly borderTopLeftRadius: "radii";
+        readonly borderTopRightRadius: "radii";
+        readonly borderTopStyle: "border-styles";
+        readonly borderTopWidth: "border-widths";
+        readonly borderWidth: "border-widths";
+        readonly bottom: "space";
+        readonly boxShadow: "shadows";
+        readonly caretColor: "colors";
+        readonly color: "colors";
+        readonly columnGap: "space-gap";
+        readonly columnRuleColor: "colors";
+        readonly fill: "colors";
+        readonly flexBasis: "sizes";
+        readonly fontFamily: "fonts";
+        readonly fontSize: "font-sizes";
+        readonly fontWeight: "font-weights";
+        readonly gap: "space-gap";
+        readonly gridColumnGap: "space-gap";
+        readonly gridGap: "space-gap";
+        readonly gridRowGap: "space-gap";
+        readonly gridTemplateColumns: "sizes";
+        readonly gridTemplateRows: "sizes";
+        readonly height: "sizes";
+        readonly inlineSize: "sizes";
+        readonly inset: "space-inset";
+        readonly insetBlock: "space-inset";
+        readonly insetBlockEnd: "space-inset";
+        readonly insetBlockStart: "space-inset";
+        readonly insetInline: "space-inset";
+        readonly insetInlineEnd: "space-inset";
+        readonly insetInlineStart: "space-inset";
+        readonly left: "space";
+        readonly letterSpacing: "letter-spacings";
+        readonly lineHeight: "line-heights";
+        readonly margin: "space-offset";
+        readonly marginBlock: "space-offset";
+        readonly marginBlockEnd: "space-offset";
+        readonly marginBlockStart: "space-offset";
+        readonly marginBottom: "space-offset";
+        readonly marginInline: "space-offset";
+        readonly marginInlineEnd: "space-offset";
+        readonly marginInlineStart: "space-offset";
+        readonly marginLeft: "space-offset";
+        readonly marginRight: "space-offset";
+        readonly marginTop: "space-offset";
+        readonly maxBlockSize: "sizes";
+        readonly maxHeight: "sizes";
+        readonly maxInlineSize: "sizes";
+        readonly maxWidth: "sizes";
+        readonly minBlockSize: "sizes";
+        readonly minHeight: "sizes";
+        readonly minInlineSize: "sizes";
+        readonly minWidth: "sizes";
+        readonly outline: "colors";
+        readonly outlineColor: "colors";
+        readonly padding: "space-inset";
+        readonly paddingBlock: "space-inset";
+        readonly paddingBlockEnd: "space-inset";
+        readonly paddingBlockStart: "space-inset";
+        readonly paddingBottom: "space-inset";
+        readonly paddingInline: "space-inset";
+        readonly paddingInlineEnd: "space-inset";
+        readonly paddingInlineStart: "space-inset";
+        readonly paddingLeft: "space-inset";
+        readonly paddingRight: "space-inset";
+        readonly paddingTop: "space-inset";
+        readonly right: "space";
+        readonly rowGap: "space-gap";
+        readonly scrollMargin: "space-offset";
+        readonly scrollMarginBlock: "space-offset";
+        readonly scrollMarginBlockEnd: "space-offset";
+        readonly scrollMarginBlockStart: "space-offset";
+        readonly scrollMarginBottom: "space-offset";
+        readonly scrollMarginInline: "space-offset";
+        readonly scrollMarginInlineEnd: "space-offset";
+        readonly scrollMarginInlineStart: "space-offset";
+        readonly scrollMarginLeft: "space-offset";
+        readonly scrollMarginRight: "space-offset";
+        readonly scrollMarginTop: "space-offset";
+        readonly scrollPadding: "space-inset";
+        readonly scrollPaddingBlock: "space-inset";
+        readonly scrollPaddingBlockEnd: "space-inset";
+        readonly scrollPaddingBlockStart: "space-inset";
+        readonly scrollPaddingBottom: "space-inset";
+        readonly scrollPaddingInline: "space-inset";
+        readonly scrollPaddingInlineEnd: "space-inset";
+        readonly scrollPaddingInlineStart: "space-inset";
+        readonly scrollPaddingLeft: "space-inset";
+        readonly scrollPaddingRight: "space-inset";
+        readonly scrollPaddingTop: "space-inset";
+        readonly stroke: "colors";
+        readonly textDecorationColor: "colors";
+        readonly textShadow: "shadows";
+        readonly top: "space";
+        readonly transition: "transitions";
+        readonly width: "sizes";
+        readonly zIndex: "z-indices";
+    }, {
+        paddingX: (value: {
+            readonly [$$PropertyValue]: "padding";
+        }) => {
+            paddingLeft: {
+                readonly [$$PropertyValue]: "padding";
+            };
+            paddingRight: {
+                readonly [$$PropertyValue]: "padding";
+            };
         };
-        marginBottom: {
+        paddingY: (value: {
+            readonly [$$PropertyValue]: "padding";
+        }) => {
+            paddingTop: {
+                readonly [$$PropertyValue]: "padding";
+            };
+            paddingBottom: {
+                readonly [$$PropertyValue]: "padding";
+            };
+        };
+        marginX: (value: {
             readonly [$$PropertyValue]: "margin";
+        }) => {
+            marginLeft: {
+                readonly [$$PropertyValue]: "margin";
+            };
+            marginRight: {
+                readonly [$$PropertyValue]: "margin";
+            };
         };
-    };
-    square: (value: {
-        readonly [$$PropertyValue]: "width";
-    }) => {
-        width: {
-            readonly [$$PropertyValue]: "width";
+        marginY: (value: {
+            readonly [$$PropertyValue]: "margin";
+        }) => {
+            marginTop: {
+                readonly [$$PropertyValue]: "margin";
+            };
+            marginBottom: {
+                readonly [$$PropertyValue]: "margin";
+            };
         };
-        height: {
+        square: (value: {
             readonly [$$PropertyValue]: "width";
+        }) => {
+            width: {
+                readonly [$$PropertyValue]: "width";
+            };
+            height: {
+                readonly [$$PropertyValue]: "width";
+            };
         };
-    };
-}>>> & CustomStylesProps> & React__default.RefAttributes<React__default.ElementRef<_stitches_react_types_styled_component.StyledComponent<Element_1, {}, {}, CSSUtil.CSS<{}, {
+    }> | undefined;
+}>>> & {
+    children?: React__default.ReactNode;
+} & CustomStylesProps> & React__default.RefAttributes<React__default.ElementRef<_stitches_react_types_styled_component.StyledComponent<Element_1, {}, {}, CSSUtil.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-stitches",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,8 +26,8 @@
     "react": "^16.14 || ^17 || ^18"
   },
   "dependencies": {
-    "@mirohq/design-tokens": "^2.4.0",
-    "@mirohq/design-system-types": "^0.4.1"
+    "@mirohq/design-system-types": "^0.4.1",
+    "@mirohq/design-tokens": "^2.4.0"
   },
   "devDependencies": {
     "@mirohq/design-system-primitive": "^1.1.0"