@mirohq/design-system-stitches 2.2.2 → 2.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/types.d.ts +440 -427
- package/package.json +2 -2
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import React__default, { ElementType, ComponentPropsWithRef, ComponentType } from 'react';
|
|
2
|
+
import React__default, { ElementType, PropsWithChildren, ComponentPropsWithRef, ComponentType } from 'react';
|
|
3
3
|
import { CSS as CSS$1, VariantProps } from '@stitches/react';
|
|
4
4
|
import { OnlyHTMLAttributes } from '@mirohq/design-system-types';
|
|
5
5
|
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
@@ -191,7 +191,8 @@ declare const config: {
|
|
|
191
191
|
shadows: {
|
|
192
192
|
readonly 50: "0 4px 16px #05003812";
|
|
193
193
|
readonly 100: "0 8px 32px #05003808";
|
|
194
|
-
readonly 'focus-small': "0 0 0 2px $colors$border-focus-
|
|
194
|
+
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";
|
|
195
|
+
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";
|
|
195
196
|
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";
|
|
196
197
|
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";
|
|
197
198
|
};
|
|
@@ -622,6 +623,7 @@ declare const createTheme: <Argument0 extends string | ({
|
|
|
622
623
|
readonly 50?: string | number | boolean | undefined;
|
|
623
624
|
readonly 100?: string | number | boolean | undefined;
|
|
624
625
|
readonly 'focus-small'?: string | number | boolean | undefined;
|
|
626
|
+
readonly 'focus-small-outline'?: string | number | boolean | undefined;
|
|
625
627
|
readonly 'focus-large'?: string | number | boolean | undefined;
|
|
626
628
|
readonly 'focus-controls'?: string | number | boolean | undefined;
|
|
627
629
|
} | undefined;
|
|
@@ -873,6 +875,7 @@ declare const createTheme: <Argument0 extends string | ({
|
|
|
873
875
|
readonly 50?: string | number | boolean | undefined;
|
|
874
876
|
readonly 100?: string | number | boolean | undefined;
|
|
875
877
|
readonly 'focus-small'?: string | number | boolean | undefined;
|
|
878
|
+
readonly 'focus-small-outline'?: string | number | boolean | undefined;
|
|
876
879
|
readonly 'focus-large'?: string | number | boolean | undefined;
|
|
877
880
|
readonly 'focus-controls'?: string | number | boolean | undefined;
|
|
878
881
|
} | undefined;
|
|
@@ -950,7 +953,7 @@ declare const createTheme: <Argument0 extends string | ({
|
|
|
950
953
|
className: string;
|
|
951
954
|
selector: string;
|
|
952
955
|
} & (Argument0 extends string ? _stitches_react_types_stitches.ThemeTokens<Argument1, ""> : _stitches_react_types_stitches.ThemeTokens<Argument0, "">);
|
|
953
|
-
declare const css: <Composers extends (string | _stitches_react_types_util.Function | React.
|
|
956
|
+
declare const css: <Composers extends (string | _stitches_react_types_util.Function | React.JSXElementConstructor<any> | React.ExoticComponent<any> | {
|
|
954
957
|
[name: string]: unknown;
|
|
955
958
|
})[], CSS = CSSUtil.CSS<{}, {
|
|
956
959
|
'border-widths': {
|
|
@@ -1129,7 +1132,8 @@ declare const css: <Composers extends (string | _stitches_react_types_util.Funct
|
|
|
1129
1132
|
shadows: {
|
|
1130
1133
|
readonly 50: "0 4px 16px #05003812";
|
|
1131
1134
|
readonly 100: "0 8px 32px #05003808";
|
|
1132
|
-
readonly 'focus-small': "0 0 0 2px $colors$border-focus-
|
|
1135
|
+
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";
|
|
1136
|
+
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";
|
|
1133
1137
|
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";
|
|
1134
1138
|
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";
|
|
1135
1139
|
};
|
|
@@ -1378,7 +1382,7 @@ declare const css: <Composers extends (string | _stitches_react_types_util.Funct
|
|
|
1378
1382
|
readonly [CSSUtil.$$PropertyValue]: "width";
|
|
1379
1383
|
};
|
|
1380
1384
|
};
|
|
1381
|
-
}>>(...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | _stitches_react_types_util.Function | React.
|
|
1385
|
+
}>>(...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> & {
|
|
1382
1386
|
variants?: {
|
|
1383
1387
|
[x: string]: {
|
|
1384
1388
|
[x: string]: CSS;
|
|
@@ -1574,7 +1578,8 @@ declare const globalCss: <Styles extends {
|
|
|
1574
1578
|
shadows: {
|
|
1575
1579
|
readonly 50: "0 4px 16px #05003812";
|
|
1576
1580
|
readonly 100: "0 8px 32px #05003808";
|
|
1577
|
-
readonly 'focus-small': "0 0 0 2px $colors$border-focus-
|
|
1581
|
+
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";
|
|
1582
|
+
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";
|
|
1578
1583
|
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";
|
|
1579
1584
|
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";
|
|
1580
1585
|
};
|
|
@@ -2001,7 +2006,8 @@ declare const globalCss: <Styles extends {
|
|
|
2001
2006
|
shadows: {
|
|
2002
2007
|
readonly 50: "0 4px 16px #05003812";
|
|
2003
2008
|
readonly 100: "0 8px 32px #05003808";
|
|
2004
|
-
readonly 'focus-small': "0 0 0 2px $colors$border-focus-
|
|
2009
|
+
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";
|
|
2010
|
+
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";
|
|
2005
2011
|
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";
|
|
2006
2012
|
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";
|
|
2007
2013
|
};
|
|
@@ -2429,7 +2435,8 @@ declare const keyframes: (style: {
|
|
|
2429
2435
|
shadows: {
|
|
2430
2436
|
readonly 50: "0 4px 16px #05003812";
|
|
2431
2437
|
readonly 100: "0 8px 32px #05003808";
|
|
2432
|
-
readonly 'focus-small': "0 0 0 2px $colors$border-focus-
|
|
2438
|
+
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";
|
|
2439
|
+
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";
|
|
2433
2440
|
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";
|
|
2434
2441
|
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";
|
|
2435
2442
|
};
|
|
@@ -2687,14 +2694,14 @@ declare type FontFace = CSSUtil.Native.AtRule.FontFace;
|
|
|
2687
2694
|
declare const fontFace: (...fonts: FontFace[]) => string;
|
|
2688
2695
|
|
|
2689
2696
|
declare type ForbiddenProps = 'className' | 'style' | 'as';
|
|
2690
|
-
declare type AllowedProps = 'css' | 'asChild' | 'UNSAFE_style';
|
|
2697
|
+
declare type AllowedProps = 'css' | 'asChild' | 'UNSAFE_style' | 'children';
|
|
2691
2698
|
declare type SafeProps<T> = Omit<T, ForbiddenProps>;
|
|
2692
2699
|
declare type CSS = CSS$1<typeof config>;
|
|
2693
2700
|
/**
|
|
2694
2701
|
* Build a type with all props from a element and Stitches CSS keys
|
|
2695
2702
|
* and remove dangerous attributes that could cause styles issues
|
|
2696
2703
|
*/
|
|
2697
|
-
declare type StyledComponentProps<Element extends ElementType> = SafeProps<ComponentPropsWithRef<Element
|
|
2704
|
+
declare type StyledComponentProps<Element extends ElementType> = PropsWithChildren<SafeProps<ComponentPropsWithRef<Element>>>;
|
|
2698
2705
|
/**
|
|
2699
2706
|
* Filter out all non-html props and forbidden attributes from the extended component.
|
|
2700
2707
|
*
|
|
@@ -2893,439 +2900,444 @@ interface CustomStylesProps {
|
|
|
2893
2900
|
css?: CSS;
|
|
2894
2901
|
UNSAFE_style?: CSS;
|
|
2895
2902
|
}
|
|
2896
|
-
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.
|
|
2903
|
+
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> | {
|
|
2897
2904
|
[name: string]: unknown;
|
|
2898
2905
|
} = {}>(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 {
|
|
2899
2906
|
variants: {
|
|
2900
2907
|
[name: string]: unknown;
|
|
2901
2908
|
};
|
|
2902
|
-
} ? Composers["variants"] extends infer T ? { [K in keyof T]?: _stitches_react_types_util.Widen<keyof Composers["variants"][K]> | undefined; } : never : {})> & TransformProps<StyledComponentProps$1<[Composers]>, {}> &
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
2967
|
-
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
|
|
3006
|
-
|
|
3007
|
-
|
|
3008
|
-
|
|
3009
|
-
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
|
|
3026
|
-
|
|
3027
|
-
|
|
3028
|
-
|
|
3029
|
-
|
|
3030
|
-
|
|
3031
|
-
|
|
3032
|
-
|
|
3033
|
-
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
|
|
3041
|
-
|
|
3042
|
-
|
|
3043
|
-
|
|
3044
|
-
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
|
|
3051
|
-
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
|
|
3062
|
-
|
|
3063
|
-
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
|
|
3082
|
-
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
readonly none: 0;
|
|
3091
|
-
readonly 50: "4px";
|
|
3092
|
-
readonly 100: "8px";
|
|
3093
|
-
readonly 150: "12px";
|
|
3094
|
-
readonly 200: "16px";
|
|
3095
|
-
readonly 300: "24px";
|
|
3096
|
-
readonly 400: "32px";
|
|
3097
|
-
readonly 500: "64px";
|
|
3098
|
-
readonly 600: "48px";
|
|
3099
|
-
readonly 800: "64px";
|
|
3100
|
-
readonly 1200: "96px";
|
|
3101
|
-
readonly 1600: "128px";
|
|
3102
|
-
};
|
|
3103
|
-
'space-gap': {
|
|
3104
|
-
readonly none: any;
|
|
3105
|
-
readonly 50: any;
|
|
3106
|
-
readonly 100: any;
|
|
3107
|
-
readonly 200: any;
|
|
3108
|
-
readonly 300: any;
|
|
3109
|
-
};
|
|
3110
|
-
'space-inset': {
|
|
3111
|
-
readonly none: any;
|
|
3112
|
-
readonly 50: any;
|
|
3113
|
-
readonly 100: any;
|
|
3114
|
-
readonly 150: any;
|
|
3115
|
-
readonly 200: any;
|
|
3116
|
-
readonly 300: any;
|
|
3117
|
-
readonly 400: any;
|
|
3118
|
-
readonly 600: any;
|
|
3119
|
-
readonly 800: any;
|
|
3120
|
-
readonly 1200: any;
|
|
3121
|
-
readonly 1600: any;
|
|
3122
|
-
};
|
|
3123
|
-
'space-offset': {
|
|
3124
|
-
readonly none: any;
|
|
3125
|
-
readonly 50: any;
|
|
3126
|
-
readonly 100: any;
|
|
3127
|
-
readonly 150: any;
|
|
3128
|
-
readonly 200: any;
|
|
3129
|
-
readonly 300: any;
|
|
3130
|
-
readonly 400: any;
|
|
3131
|
-
readonly 600: any;
|
|
3132
|
-
readonly 800: any;
|
|
3133
|
-
readonly 1200: any;
|
|
3134
|
-
readonly 1600: any;
|
|
3135
|
-
readonly 'stacking-none': any;
|
|
3136
|
-
readonly 'stacking-100': any;
|
|
3137
|
-
readonly 'stacking-200': any;
|
|
3138
|
-
readonly 'stacking-300': any;
|
|
3139
|
-
readonly 'stacking-400': any;
|
|
3140
|
-
readonly 'stacking-500': any;
|
|
3141
|
-
readonly 'stacking-800': any;
|
|
3142
|
-
};
|
|
3143
|
-
'z-indices': {
|
|
3144
|
-
readonly dropdownMenu: 100;
|
|
3145
|
-
readonly popover: 200;
|
|
3146
|
-
readonly tooltip: 300;
|
|
3147
|
-
};
|
|
3148
|
-
}, {
|
|
3149
|
-
readonly background: "colors";
|
|
3150
|
-
readonly backgroundColor: "colors";
|
|
3151
|
-
readonly backgroundImage: "colors";
|
|
3152
|
-
readonly blockSize: "sizes";
|
|
3153
|
-
readonly border: "colors";
|
|
3154
|
-
readonly borderBlock: "colors";
|
|
3155
|
-
readonly borderBlockEnd: "colors";
|
|
3156
|
-
readonly borderBlockStart: "colors";
|
|
3157
|
-
readonly borderBottom: "colors";
|
|
3158
|
-
readonly borderBottomColor: "colors";
|
|
3159
|
-
readonly borderBottomLeftRadius: "radii";
|
|
3160
|
-
readonly borderBottomRightRadius: "radii";
|
|
3161
|
-
readonly borderBottomStyle: "border-styles";
|
|
3162
|
-
readonly borderBottomWidth: "border-widths";
|
|
3163
|
-
readonly borderColor: "colors";
|
|
3164
|
-
readonly borderImage: "colors";
|
|
3165
|
-
readonly borderInline: "colors";
|
|
3166
|
-
readonly borderInlineEnd: "colors";
|
|
3167
|
-
readonly borderInlineStart: "colors";
|
|
3168
|
-
readonly borderLeft: "colors";
|
|
3169
|
-
readonly borderLeftColor: "colors";
|
|
3170
|
-
readonly borderLeftStyle: "border-styles";
|
|
3171
|
-
readonly borderLeftWidth: "border-widths";
|
|
3172
|
-
readonly borderRadius: "radii";
|
|
3173
|
-
readonly borderRight: "colors";
|
|
3174
|
-
readonly borderRightColor: "colors";
|
|
3175
|
-
readonly borderRightStyle: "border-styles";
|
|
3176
|
-
readonly borderRightWidth: "border-widths";
|
|
3177
|
-
readonly borderStyle: "border-styles";
|
|
3178
|
-
readonly borderTop: "colors";
|
|
3179
|
-
readonly borderTopColor: "colors";
|
|
3180
|
-
readonly borderTopLeftRadius: "radii";
|
|
3181
|
-
readonly borderTopRightRadius: "radii";
|
|
3182
|
-
readonly borderTopStyle: "border-styles";
|
|
3183
|
-
readonly borderTopWidth: "border-widths";
|
|
3184
|
-
readonly borderWidth: "border-widths";
|
|
3185
|
-
readonly bottom: "space";
|
|
3186
|
-
readonly boxShadow: "shadows";
|
|
3187
|
-
readonly caretColor: "colors";
|
|
3188
|
-
readonly color: "colors";
|
|
3189
|
-
readonly columnGap: "space-gap";
|
|
3190
|
-
readonly columnRuleColor: "colors";
|
|
3191
|
-
readonly fill: "colors";
|
|
3192
|
-
readonly flexBasis: "sizes";
|
|
3193
|
-
readonly fontFamily: "fonts";
|
|
3194
|
-
readonly fontSize: "font-sizes";
|
|
3195
|
-
readonly fontWeight: "font-weights";
|
|
3196
|
-
readonly gap: "space-gap";
|
|
3197
|
-
readonly gridColumnGap: "space-gap";
|
|
3198
|
-
readonly gridGap: "space-gap";
|
|
3199
|
-
readonly gridRowGap: "space-gap";
|
|
3200
|
-
readonly gridTemplateColumns: "sizes";
|
|
3201
|
-
readonly gridTemplateRows: "sizes";
|
|
3202
|
-
readonly height: "sizes";
|
|
3203
|
-
readonly inlineSize: "sizes";
|
|
3204
|
-
readonly inset: "space-inset";
|
|
3205
|
-
readonly insetBlock: "space-inset";
|
|
3206
|
-
readonly insetBlockEnd: "space-inset";
|
|
3207
|
-
readonly insetBlockStart: "space-inset";
|
|
3208
|
-
readonly insetInline: "space-inset";
|
|
3209
|
-
readonly insetInlineEnd: "space-inset";
|
|
3210
|
-
readonly insetInlineStart: "space-inset";
|
|
3211
|
-
readonly left: "space";
|
|
3212
|
-
readonly letterSpacing: "letter-spacings";
|
|
3213
|
-
readonly lineHeight: "line-heights";
|
|
3214
|
-
readonly margin: "space-offset";
|
|
3215
|
-
readonly marginBlock: "space-offset";
|
|
3216
|
-
readonly marginBlockEnd: "space-offset";
|
|
3217
|
-
readonly marginBlockStart: "space-offset";
|
|
3218
|
-
readonly marginBottom: "space-offset";
|
|
3219
|
-
readonly marginInline: "space-offset";
|
|
3220
|
-
readonly marginInlineEnd: "space-offset";
|
|
3221
|
-
readonly marginInlineStart: "space-offset";
|
|
3222
|
-
readonly marginLeft: "space-offset";
|
|
3223
|
-
readonly marginRight: "space-offset";
|
|
3224
|
-
readonly marginTop: "space-offset";
|
|
3225
|
-
readonly maxBlockSize: "sizes";
|
|
3226
|
-
readonly maxHeight: "sizes";
|
|
3227
|
-
readonly maxInlineSize: "sizes";
|
|
3228
|
-
readonly maxWidth: "sizes";
|
|
3229
|
-
readonly minBlockSize: "sizes";
|
|
3230
|
-
readonly minHeight: "sizes";
|
|
3231
|
-
readonly minInlineSize: "sizes";
|
|
3232
|
-
readonly minWidth: "sizes";
|
|
3233
|
-
readonly outline: "colors";
|
|
3234
|
-
readonly outlineColor: "colors";
|
|
3235
|
-
readonly padding: "space-inset";
|
|
3236
|
-
readonly paddingBlock: "space-inset";
|
|
3237
|
-
readonly paddingBlockEnd: "space-inset";
|
|
3238
|
-
readonly paddingBlockStart: "space-inset";
|
|
3239
|
-
readonly paddingBottom: "space-inset";
|
|
3240
|
-
readonly paddingInline: "space-inset";
|
|
3241
|
-
readonly paddingInlineEnd: "space-inset";
|
|
3242
|
-
readonly paddingInlineStart: "space-inset";
|
|
3243
|
-
readonly paddingLeft: "space-inset";
|
|
3244
|
-
readonly paddingRight: "space-inset";
|
|
3245
|
-
readonly paddingTop: "space-inset";
|
|
3246
|
-
readonly right: "space";
|
|
3247
|
-
readonly rowGap: "space-gap";
|
|
3248
|
-
readonly scrollMargin: "space-offset";
|
|
3249
|
-
readonly scrollMarginBlock: "space-offset";
|
|
3250
|
-
readonly scrollMarginBlockEnd: "space-offset";
|
|
3251
|
-
readonly scrollMarginBlockStart: "space-offset";
|
|
3252
|
-
readonly scrollMarginBottom: "space-offset";
|
|
3253
|
-
readonly scrollMarginInline: "space-offset";
|
|
3254
|
-
readonly scrollMarginInlineEnd: "space-offset";
|
|
3255
|
-
readonly scrollMarginInlineStart: "space-offset";
|
|
3256
|
-
readonly scrollMarginLeft: "space-offset";
|
|
3257
|
-
readonly scrollMarginRight: "space-offset";
|
|
3258
|
-
readonly scrollMarginTop: "space-offset";
|
|
3259
|
-
readonly scrollPadding: "space-inset";
|
|
3260
|
-
readonly scrollPaddingBlock: "space-inset";
|
|
3261
|
-
readonly scrollPaddingBlockEnd: "space-inset";
|
|
3262
|
-
readonly scrollPaddingBlockStart: "space-inset";
|
|
3263
|
-
readonly scrollPaddingBottom: "space-inset";
|
|
3264
|
-
readonly scrollPaddingInline: "space-inset";
|
|
3265
|
-
readonly scrollPaddingInlineEnd: "space-inset";
|
|
3266
|
-
readonly scrollPaddingInlineStart: "space-inset";
|
|
3267
|
-
readonly scrollPaddingLeft: "space-inset";
|
|
3268
|
-
readonly scrollPaddingRight: "space-inset";
|
|
3269
|
-
readonly scrollPaddingTop: "space-inset";
|
|
3270
|
-
readonly stroke: "colors";
|
|
3271
|
-
readonly textDecorationColor: "colors";
|
|
3272
|
-
readonly textShadow: "shadows";
|
|
3273
|
-
readonly top: "space";
|
|
3274
|
-
readonly transition: "transitions";
|
|
3275
|
-
readonly width: "sizes";
|
|
3276
|
-
readonly zIndex: "z-indices";
|
|
3277
|
-
}, {
|
|
3278
|
-
paddingX: (value: {
|
|
3279
|
-
readonly [$$PropertyValue]: "padding";
|
|
3280
|
-
}) => {
|
|
3281
|
-
paddingLeft: {
|
|
3282
|
-
readonly [$$PropertyValue]: "padding";
|
|
2909
|
+
} ? 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<{}, {}> & {
|
|
2910
|
+
css?: CSSUtil.CSS<{}, {
|
|
2911
|
+
'border-widths': {
|
|
2912
|
+
readonly none: 0;
|
|
2913
|
+
readonly sm: "1px";
|
|
2914
|
+
readonly md: "2px";
|
|
2915
|
+
readonly lg: "4px";
|
|
2916
|
+
};
|
|
2917
|
+
colors: {
|
|
2918
|
+
readonly 'blue-100': any;
|
|
2919
|
+
readonly 'blue-200': any;
|
|
2920
|
+
readonly 'blue-300': any;
|
|
2921
|
+
readonly 'blue-400': any;
|
|
2922
|
+
readonly 'blue-500': any;
|
|
2923
|
+
readonly 'blue-600': any;
|
|
2924
|
+
readonly 'blue-700': any;
|
|
2925
|
+
readonly 'blue-800': any;
|
|
2926
|
+
readonly 'blue-900': any;
|
|
2927
|
+
readonly 'blue-1000': any;
|
|
2928
|
+
readonly 'gray-100': any;
|
|
2929
|
+
readonly 'gray-200': any;
|
|
2930
|
+
readonly 'gray-300': any;
|
|
2931
|
+
readonly 'gray-400': any;
|
|
2932
|
+
readonly 'gray-500': any;
|
|
2933
|
+
readonly 'gray-600': any;
|
|
2934
|
+
readonly 'gray-700': any;
|
|
2935
|
+
readonly 'gray-800': any;
|
|
2936
|
+
readonly 'gray-900': any;
|
|
2937
|
+
readonly 'indigo-100': any;
|
|
2938
|
+
readonly 'indigo-200': any;
|
|
2939
|
+
readonly 'indigo-300': any;
|
|
2940
|
+
readonly 'indigo-400': any;
|
|
2941
|
+
readonly 'indigo-500': any;
|
|
2942
|
+
readonly 'indigo-600': any;
|
|
2943
|
+
readonly 'indigo-700': any;
|
|
2944
|
+
readonly 'indigo-800': any;
|
|
2945
|
+
readonly 'indigo-900': any;
|
|
2946
|
+
readonly 'red-100': any;
|
|
2947
|
+
readonly 'red-200': any;
|
|
2948
|
+
readonly 'red-300': any;
|
|
2949
|
+
readonly 'red-400': any;
|
|
2950
|
+
readonly 'red-500': any;
|
|
2951
|
+
readonly 'red-600': any;
|
|
2952
|
+
readonly 'red-700': any;
|
|
2953
|
+
readonly 'red-800': any;
|
|
2954
|
+
readonly 'red-900': any;
|
|
2955
|
+
readonly 'yellow-100': any;
|
|
2956
|
+
readonly 'yellow-200': any;
|
|
2957
|
+
readonly 'yellow-300': any;
|
|
2958
|
+
readonly 'yellow-400': any;
|
|
2959
|
+
readonly 'yellow-500': any;
|
|
2960
|
+
readonly 'yellow-600': any;
|
|
2961
|
+
readonly 'yellow-700': any;
|
|
2962
|
+
readonly 'yellow-800': any;
|
|
2963
|
+
readonly 'yellow-900': any;
|
|
2964
|
+
readonly 'green-100': any;
|
|
2965
|
+
readonly 'green-200': any;
|
|
2966
|
+
readonly 'green-300': any;
|
|
2967
|
+
readonly 'green-400': any;
|
|
2968
|
+
readonly 'green-500': any;
|
|
2969
|
+
readonly 'green-600': any;
|
|
2970
|
+
readonly 'green-700': any;
|
|
2971
|
+
readonly 'green-800': any;
|
|
2972
|
+
readonly 'green-900': any;
|
|
2973
|
+
readonly black: any;
|
|
2974
|
+
readonly white: any;
|
|
2975
|
+
readonly transparent: any;
|
|
2976
|
+
readonly 'background-neutrals'?: any;
|
|
2977
|
+
readonly 'background-neutrals-body'?: any;
|
|
2978
|
+
readonly 'background-neutrals-container'?: any;
|
|
2979
|
+
readonly 'background-neutrals-inverted'?: any;
|
|
2980
|
+
readonly 'background-neutrals-inverted-subtle'?: any;
|
|
2981
|
+
readonly 'background-neutrals-subtle'?: any;
|
|
2982
|
+
readonly 'background-neutrals-subtle-hover'?: any;
|
|
2983
|
+
readonly 'background-neutrals-subtle-active'?: any;
|
|
2984
|
+
readonly 'background-neutrals-disabled'?: any;
|
|
2985
|
+
readonly 'background-neutrals-controls-disabled'?: any;
|
|
2986
|
+
readonly 'background-neutrals-scrolls'?: any;
|
|
2987
|
+
readonly 'background-neutrals-inactive'?: any;
|
|
2988
|
+
readonly 'background-neutrals-inactive-hover'?: any;
|
|
2989
|
+
readonly 'background-primary-prominent'?: any;
|
|
2990
|
+
readonly 'background-primary-prominent-hover'?: any;
|
|
2991
|
+
readonly 'background-primary-prominent-active'?: any;
|
|
2992
|
+
readonly 'background-primary-prominent-selected'?: any;
|
|
2993
|
+
readonly 'background-primary-subtle'?: any;
|
|
2994
|
+
readonly 'background-primary-subtle-hover'?: any;
|
|
2995
|
+
readonly 'background-primary-subtle-active'?: any;
|
|
2996
|
+
readonly 'background-primary-subtle-selected'?: any;
|
|
2997
|
+
readonly 'background-danger-prominent'?: any;
|
|
2998
|
+
readonly 'background-danger-prominent-hover'?: any;
|
|
2999
|
+
readonly 'background-danger-prominent-active'?: any;
|
|
3000
|
+
readonly 'background-danger'?: any;
|
|
3001
|
+
readonly 'background-danger-hover'?: any;
|
|
3002
|
+
readonly 'background-success'?: any;
|
|
3003
|
+
readonly 'background-warning-subtle'?: any;
|
|
3004
|
+
readonly 'background-warning-prominent'?: any;
|
|
3005
|
+
readonly 'text-neutrals-inverted'?: any;
|
|
3006
|
+
readonly 'text-neutrals'?: any;
|
|
3007
|
+
readonly 'text-neutrals-subtle'?: any;
|
|
3008
|
+
readonly 'text-neutrals-placeholder-only'?: any;
|
|
3009
|
+
readonly 'text-neutrals-placeholder'?: any;
|
|
3010
|
+
readonly 'text-neutrals-disabled'?: any;
|
|
3011
|
+
readonly 'text-primary-inverted'?: any;
|
|
3012
|
+
readonly 'text-primary'?: any;
|
|
3013
|
+
readonly 'text-primary-hover'?: any;
|
|
3014
|
+
readonly 'text-primary-active'?: any;
|
|
3015
|
+
readonly 'text-primary-selected'?: any;
|
|
3016
|
+
readonly 'text-primary-inverted-subtle'?: any;
|
|
3017
|
+
readonly 'text-danger-inverted'?: any;
|
|
3018
|
+
readonly 'text-danger'?: any;
|
|
3019
|
+
readonly 'text-danger-hover'?: any;
|
|
3020
|
+
readonly 'text-danger-active'?: any;
|
|
3021
|
+
readonly 'text-success'?: any;
|
|
3022
|
+
readonly 'text-warning'?: any;
|
|
3023
|
+
readonly 'icon-neutrals-inverted'?: any;
|
|
3024
|
+
readonly 'icon-neutrals'?: any;
|
|
3025
|
+
readonly 'icon-neutrals-with-text'?: any;
|
|
3026
|
+
readonly 'icon-neutrals-subtle'?: any;
|
|
3027
|
+
readonly 'icon-neutrals-disabled'?: any;
|
|
3028
|
+
readonly 'icon-neutrals-search'?: any;
|
|
3029
|
+
readonly 'icon-neutrals-inactive'?: any;
|
|
3030
|
+
readonly 'icon-neutrals-inactive-hover'?: any;
|
|
3031
|
+
readonly 'icon-primary-inverted'?: any;
|
|
3032
|
+
readonly 'icon-primary'?: any;
|
|
3033
|
+
readonly 'icon-primary-hover'?: any;
|
|
3034
|
+
readonly 'icon-primary-active'?: any;
|
|
3035
|
+
readonly 'icon-primary-selected'?: any;
|
|
3036
|
+
readonly 'icon-danger-inverted'?: any;
|
|
3037
|
+
readonly 'icon-danger'?: any;
|
|
3038
|
+
readonly 'icon-danger-hover'?: any;
|
|
3039
|
+
readonly 'icon-danger-active'?: any;
|
|
3040
|
+
readonly 'icon-success-inverted'?: any;
|
|
3041
|
+
readonly 'icon-success'?: any;
|
|
3042
|
+
readonly 'icon-warning'?: any;
|
|
3043
|
+
readonly 'border-focus-outer'?: any;
|
|
3044
|
+
readonly 'border-focus-middle'?: any;
|
|
3045
|
+
readonly 'border-focus-inner'?: any;
|
|
3046
|
+
readonly 'border-neutrals'?: any;
|
|
3047
|
+
readonly 'border-neutrals-hover'?: any;
|
|
3048
|
+
readonly 'border-neutrals-active'?: any;
|
|
3049
|
+
readonly 'border-neutrals-disabled'?: any;
|
|
3050
|
+
readonly 'border-neutrals-controls'?: any;
|
|
3051
|
+
readonly 'border-neutrals-controls-disabled'?: any;
|
|
3052
|
+
readonly 'border-neutrals-subtle'?: any;
|
|
3053
|
+
readonly 'border-neutrals-inverted'?: any;
|
|
3054
|
+
readonly 'border-primary'?: any;
|
|
3055
|
+
readonly 'border-primary-hover'?: any;
|
|
3056
|
+
readonly 'border-primary-active'?: any;
|
|
3057
|
+
readonly 'border-primary-inverted'?: any;
|
|
3058
|
+
readonly 'border-danger'?: any;
|
|
3059
|
+
readonly 'border-success'?: any;
|
|
3060
|
+
readonly 'border-warning'?: any;
|
|
3061
|
+
};
|
|
3062
|
+
'font-sizes': {
|
|
3063
|
+
readonly 150: "0.75rem";
|
|
3064
|
+
readonly 175: "0.875rem";
|
|
3065
|
+
readonly 200: "1rem";
|
|
3066
|
+
readonly 225: "1.125rem";
|
|
3067
|
+
readonly 250: "1.25rem";
|
|
3068
|
+
readonly 300: "1.5rem";
|
|
3069
|
+
readonly 400: "2rem";
|
|
3070
|
+
readonly 500: "2.5rem";
|
|
3071
|
+
readonly 600: "3rem";
|
|
3072
|
+
readonly 800: "4rem";
|
|
3073
|
+
readonly 900: "4.5rem";
|
|
3074
|
+
};
|
|
3075
|
+
radii: {
|
|
3076
|
+
readonly none: 0;
|
|
3077
|
+
readonly half: "999em";
|
|
3078
|
+
readonly 25: "2px";
|
|
3079
|
+
readonly 50: "4px";
|
|
3080
|
+
readonly 75: "6px";
|
|
3081
|
+
readonly 100: "8px";
|
|
3082
|
+
readonly 200: "16px";
|
|
3083
|
+
};
|
|
3084
|
+
shadows: {
|
|
3085
|
+
readonly 50: "0 4px 16px #05003812";
|
|
3086
|
+
readonly 100: "0 8px 32px #05003808";
|
|
3087
|
+
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";
|
|
3088
|
+
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";
|
|
3089
|
+
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";
|
|
3090
|
+
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";
|
|
3091
|
+
};
|
|
3092
|
+
sizes: {
|
|
3093
|
+
readonly number: string;
|
|
3094
|
+
readonly 'icon-200': "16px";
|
|
3095
|
+
readonly 'icon-300': "24px";
|
|
3096
|
+
readonly 'icon-400': "32px";
|
|
3283
3097
|
};
|
|
3284
|
-
|
|
3285
|
-
readonly
|
|
3098
|
+
space: {
|
|
3099
|
+
readonly none: 0;
|
|
3100
|
+
readonly 50: "4px";
|
|
3101
|
+
readonly 100: "8px";
|
|
3102
|
+
readonly 150: "12px";
|
|
3103
|
+
readonly 200: "16px";
|
|
3104
|
+
readonly 300: "24px";
|
|
3105
|
+
readonly 400: "32px";
|
|
3106
|
+
readonly 500: "64px";
|
|
3107
|
+
readonly 600: "48px";
|
|
3108
|
+
readonly 800: "64px";
|
|
3109
|
+
readonly 1200: "96px";
|
|
3110
|
+
readonly 1600: "128px";
|
|
3286
3111
|
};
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
readonly
|
|
3112
|
+
'space-gap': {
|
|
3113
|
+
readonly none: any;
|
|
3114
|
+
readonly 50: any;
|
|
3115
|
+
readonly 100: any;
|
|
3116
|
+
readonly 200: any;
|
|
3117
|
+
readonly 300: any;
|
|
3293
3118
|
};
|
|
3294
|
-
|
|
3295
|
-
readonly
|
|
3119
|
+
'space-inset': {
|
|
3120
|
+
readonly none: any;
|
|
3121
|
+
readonly 50: any;
|
|
3122
|
+
readonly 100: any;
|
|
3123
|
+
readonly 150: any;
|
|
3124
|
+
readonly 200: any;
|
|
3125
|
+
readonly 300: any;
|
|
3126
|
+
readonly 400: any;
|
|
3127
|
+
readonly 600: any;
|
|
3128
|
+
readonly 800: any;
|
|
3129
|
+
readonly 1200: any;
|
|
3130
|
+
readonly 1600: any;
|
|
3296
3131
|
};
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
readonly
|
|
3132
|
+
'space-offset': {
|
|
3133
|
+
readonly none: any;
|
|
3134
|
+
readonly 50: any;
|
|
3135
|
+
readonly 100: any;
|
|
3136
|
+
readonly 150: any;
|
|
3137
|
+
readonly 200: any;
|
|
3138
|
+
readonly 300: any;
|
|
3139
|
+
readonly 400: any;
|
|
3140
|
+
readonly 600: any;
|
|
3141
|
+
readonly 800: any;
|
|
3142
|
+
readonly 1200: any;
|
|
3143
|
+
readonly 1600: any;
|
|
3144
|
+
readonly 'stacking-none': any;
|
|
3145
|
+
readonly 'stacking-100': any;
|
|
3146
|
+
readonly 'stacking-200': any;
|
|
3147
|
+
readonly 'stacking-300': any;
|
|
3148
|
+
readonly 'stacking-400': any;
|
|
3149
|
+
readonly 'stacking-500': any;
|
|
3150
|
+
readonly 'stacking-800': any;
|
|
3303
3151
|
};
|
|
3304
|
-
|
|
3305
|
-
readonly
|
|
3152
|
+
'z-indices': {
|
|
3153
|
+
readonly dropdownMenu: 100;
|
|
3154
|
+
readonly popover: 200;
|
|
3155
|
+
readonly tooltip: 300;
|
|
3306
3156
|
};
|
|
3307
|
-
}
|
|
3308
|
-
|
|
3309
|
-
readonly
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3157
|
+
}, {
|
|
3158
|
+
readonly background: "colors";
|
|
3159
|
+
readonly backgroundColor: "colors";
|
|
3160
|
+
readonly backgroundImage: "colors";
|
|
3161
|
+
readonly blockSize: "sizes";
|
|
3162
|
+
readonly border: "colors";
|
|
3163
|
+
readonly borderBlock: "colors";
|
|
3164
|
+
readonly borderBlockEnd: "colors";
|
|
3165
|
+
readonly borderBlockStart: "colors";
|
|
3166
|
+
readonly borderBottom: "colors";
|
|
3167
|
+
readonly borderBottomColor: "colors";
|
|
3168
|
+
readonly borderBottomLeftRadius: "radii";
|
|
3169
|
+
readonly borderBottomRightRadius: "radii";
|
|
3170
|
+
readonly borderBottomStyle: "border-styles";
|
|
3171
|
+
readonly borderBottomWidth: "border-widths";
|
|
3172
|
+
readonly borderColor: "colors";
|
|
3173
|
+
readonly borderImage: "colors";
|
|
3174
|
+
readonly borderInline: "colors";
|
|
3175
|
+
readonly borderInlineEnd: "colors";
|
|
3176
|
+
readonly borderInlineStart: "colors";
|
|
3177
|
+
readonly borderLeft: "colors";
|
|
3178
|
+
readonly borderLeftColor: "colors";
|
|
3179
|
+
readonly borderLeftStyle: "border-styles";
|
|
3180
|
+
readonly borderLeftWidth: "border-widths";
|
|
3181
|
+
readonly borderRadius: "radii";
|
|
3182
|
+
readonly borderRight: "colors";
|
|
3183
|
+
readonly borderRightColor: "colors";
|
|
3184
|
+
readonly borderRightStyle: "border-styles";
|
|
3185
|
+
readonly borderRightWidth: "border-widths";
|
|
3186
|
+
readonly borderStyle: "border-styles";
|
|
3187
|
+
readonly borderTop: "colors";
|
|
3188
|
+
readonly borderTopColor: "colors";
|
|
3189
|
+
readonly borderTopLeftRadius: "radii";
|
|
3190
|
+
readonly borderTopRightRadius: "radii";
|
|
3191
|
+
readonly borderTopStyle: "border-styles";
|
|
3192
|
+
readonly borderTopWidth: "border-widths";
|
|
3193
|
+
readonly borderWidth: "border-widths";
|
|
3194
|
+
readonly bottom: "space";
|
|
3195
|
+
readonly boxShadow: "shadows";
|
|
3196
|
+
readonly caretColor: "colors";
|
|
3197
|
+
readonly color: "colors";
|
|
3198
|
+
readonly columnGap: "space-gap";
|
|
3199
|
+
readonly columnRuleColor: "colors";
|
|
3200
|
+
readonly fill: "colors";
|
|
3201
|
+
readonly flexBasis: "sizes";
|
|
3202
|
+
readonly fontFamily: "fonts";
|
|
3203
|
+
readonly fontSize: "font-sizes";
|
|
3204
|
+
readonly fontWeight: "font-weights";
|
|
3205
|
+
readonly gap: "space-gap";
|
|
3206
|
+
readonly gridColumnGap: "space-gap";
|
|
3207
|
+
readonly gridGap: "space-gap";
|
|
3208
|
+
readonly gridRowGap: "space-gap";
|
|
3209
|
+
readonly gridTemplateColumns: "sizes";
|
|
3210
|
+
readonly gridTemplateRows: "sizes";
|
|
3211
|
+
readonly height: "sizes";
|
|
3212
|
+
readonly inlineSize: "sizes";
|
|
3213
|
+
readonly inset: "space-inset";
|
|
3214
|
+
readonly insetBlock: "space-inset";
|
|
3215
|
+
readonly insetBlockEnd: "space-inset";
|
|
3216
|
+
readonly insetBlockStart: "space-inset";
|
|
3217
|
+
readonly insetInline: "space-inset";
|
|
3218
|
+
readonly insetInlineEnd: "space-inset";
|
|
3219
|
+
readonly insetInlineStart: "space-inset";
|
|
3220
|
+
readonly left: "space";
|
|
3221
|
+
readonly letterSpacing: "letter-spacings";
|
|
3222
|
+
readonly lineHeight: "line-heights";
|
|
3223
|
+
readonly margin: "space-offset";
|
|
3224
|
+
readonly marginBlock: "space-offset";
|
|
3225
|
+
readonly marginBlockEnd: "space-offset";
|
|
3226
|
+
readonly marginBlockStart: "space-offset";
|
|
3227
|
+
readonly marginBottom: "space-offset";
|
|
3228
|
+
readonly marginInline: "space-offset";
|
|
3229
|
+
readonly marginInlineEnd: "space-offset";
|
|
3230
|
+
readonly marginInlineStart: "space-offset";
|
|
3231
|
+
readonly marginLeft: "space-offset";
|
|
3232
|
+
readonly marginRight: "space-offset";
|
|
3233
|
+
readonly marginTop: "space-offset";
|
|
3234
|
+
readonly maxBlockSize: "sizes";
|
|
3235
|
+
readonly maxHeight: "sizes";
|
|
3236
|
+
readonly maxInlineSize: "sizes";
|
|
3237
|
+
readonly maxWidth: "sizes";
|
|
3238
|
+
readonly minBlockSize: "sizes";
|
|
3239
|
+
readonly minHeight: "sizes";
|
|
3240
|
+
readonly minInlineSize: "sizes";
|
|
3241
|
+
readonly minWidth: "sizes";
|
|
3242
|
+
readonly outline: "colors";
|
|
3243
|
+
readonly outlineColor: "colors";
|
|
3244
|
+
readonly padding: "space-inset";
|
|
3245
|
+
readonly paddingBlock: "space-inset";
|
|
3246
|
+
readonly paddingBlockEnd: "space-inset";
|
|
3247
|
+
readonly paddingBlockStart: "space-inset";
|
|
3248
|
+
readonly paddingBottom: "space-inset";
|
|
3249
|
+
readonly paddingInline: "space-inset";
|
|
3250
|
+
readonly paddingInlineEnd: "space-inset";
|
|
3251
|
+
readonly paddingInlineStart: "space-inset";
|
|
3252
|
+
readonly paddingLeft: "space-inset";
|
|
3253
|
+
readonly paddingRight: "space-inset";
|
|
3254
|
+
readonly paddingTop: "space-inset";
|
|
3255
|
+
readonly right: "space";
|
|
3256
|
+
readonly rowGap: "space-gap";
|
|
3257
|
+
readonly scrollMargin: "space-offset";
|
|
3258
|
+
readonly scrollMarginBlock: "space-offset";
|
|
3259
|
+
readonly scrollMarginBlockEnd: "space-offset";
|
|
3260
|
+
readonly scrollMarginBlockStart: "space-offset";
|
|
3261
|
+
readonly scrollMarginBottom: "space-offset";
|
|
3262
|
+
readonly scrollMarginInline: "space-offset";
|
|
3263
|
+
readonly scrollMarginInlineEnd: "space-offset";
|
|
3264
|
+
readonly scrollMarginInlineStart: "space-offset";
|
|
3265
|
+
readonly scrollMarginLeft: "space-offset";
|
|
3266
|
+
readonly scrollMarginRight: "space-offset";
|
|
3267
|
+
readonly scrollMarginTop: "space-offset";
|
|
3268
|
+
readonly scrollPadding: "space-inset";
|
|
3269
|
+
readonly scrollPaddingBlock: "space-inset";
|
|
3270
|
+
readonly scrollPaddingBlockEnd: "space-inset";
|
|
3271
|
+
readonly scrollPaddingBlockStart: "space-inset";
|
|
3272
|
+
readonly scrollPaddingBottom: "space-inset";
|
|
3273
|
+
readonly scrollPaddingInline: "space-inset";
|
|
3274
|
+
readonly scrollPaddingInlineEnd: "space-inset";
|
|
3275
|
+
readonly scrollPaddingInlineStart: "space-inset";
|
|
3276
|
+
readonly scrollPaddingLeft: "space-inset";
|
|
3277
|
+
readonly scrollPaddingRight: "space-inset";
|
|
3278
|
+
readonly scrollPaddingTop: "space-inset";
|
|
3279
|
+
readonly stroke: "colors";
|
|
3280
|
+
readonly textDecorationColor: "colors";
|
|
3281
|
+
readonly textShadow: "shadows";
|
|
3282
|
+
readonly top: "space";
|
|
3283
|
+
readonly transition: "transitions";
|
|
3284
|
+
readonly width: "sizes";
|
|
3285
|
+
readonly zIndex: "z-indices";
|
|
3286
|
+
}, {
|
|
3287
|
+
paddingX: (value: {
|
|
3288
|
+
readonly [$$PropertyValue]: "padding";
|
|
3289
|
+
}) => {
|
|
3290
|
+
paddingLeft: {
|
|
3291
|
+
readonly [$$PropertyValue]: "padding";
|
|
3292
|
+
};
|
|
3293
|
+
paddingRight: {
|
|
3294
|
+
readonly [$$PropertyValue]: "padding";
|
|
3295
|
+
};
|
|
3313
3296
|
};
|
|
3314
|
-
|
|
3297
|
+
paddingY: (value: {
|
|
3298
|
+
readonly [$$PropertyValue]: "padding";
|
|
3299
|
+
}) => {
|
|
3300
|
+
paddingTop: {
|
|
3301
|
+
readonly [$$PropertyValue]: "padding";
|
|
3302
|
+
};
|
|
3303
|
+
paddingBottom: {
|
|
3304
|
+
readonly [$$PropertyValue]: "padding";
|
|
3305
|
+
};
|
|
3306
|
+
};
|
|
3307
|
+
marginX: (value: {
|
|
3315
3308
|
readonly [$$PropertyValue]: "margin";
|
|
3309
|
+
}) => {
|
|
3310
|
+
marginLeft: {
|
|
3311
|
+
readonly [$$PropertyValue]: "margin";
|
|
3312
|
+
};
|
|
3313
|
+
marginRight: {
|
|
3314
|
+
readonly [$$PropertyValue]: "margin";
|
|
3315
|
+
};
|
|
3316
3316
|
};
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3317
|
+
marginY: (value: {
|
|
3318
|
+
readonly [$$PropertyValue]: "margin";
|
|
3319
|
+
}) => {
|
|
3320
|
+
marginTop: {
|
|
3321
|
+
readonly [$$PropertyValue]: "margin";
|
|
3322
|
+
};
|
|
3323
|
+
marginBottom: {
|
|
3324
|
+
readonly [$$PropertyValue]: "margin";
|
|
3325
|
+
};
|
|
3323
3326
|
};
|
|
3324
|
-
|
|
3327
|
+
square: (value: {
|
|
3325
3328
|
readonly [$$PropertyValue]: "width";
|
|
3329
|
+
}) => {
|
|
3330
|
+
width: {
|
|
3331
|
+
readonly [$$PropertyValue]: "width";
|
|
3332
|
+
};
|
|
3333
|
+
height: {
|
|
3334
|
+
readonly [$$PropertyValue]: "width";
|
|
3335
|
+
};
|
|
3326
3336
|
};
|
|
3327
|
-
};
|
|
3328
|
-
}>>> &
|
|
3337
|
+
}> | undefined;
|
|
3338
|
+
}>>> & {
|
|
3339
|
+
children?: React__default.ReactNode;
|
|
3340
|
+
} & CustomStylesProps> & React__default.RefAttributes<React__default.ElementRef<_stitches_react_types_styled_component.StyledComponent<Element_1, {}, {}, CSSUtil.CSS<{}, {
|
|
3329
3341
|
'border-widths': {
|
|
3330
3342
|
readonly none: 0;
|
|
3331
3343
|
readonly sm: "1px";
|
|
@@ -3502,7 +3514,8 @@ declare const styled: <Element_1 extends _stitches_react_types_util.Function | k
|
|
|
3502
3514
|
shadows: {
|
|
3503
3515
|
readonly 50: "0 4px 16px #05003812";
|
|
3504
3516
|
readonly 100: "0 8px 32px #05003808";
|
|
3505
|
-
readonly 'focus-small': "0 0 0 2px $colors$border-focus-
|
|
3517
|
+
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";
|
|
3518
|
+
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";
|
|
3506
3519
|
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";
|
|
3507
3520
|
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";
|
|
3508
3521
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-stitches",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@mirohq/design-system-types": "^0.4.1",
|
|
30
|
-
"@mirohq/design-tokens": "^2.
|
|
30
|
+
"@mirohq/design-tokens": "^2.4.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@mirohq/design-system-primitive": "^1.1.0"
|