@mirohq/design-system-base-button - npm Package Compare versions

Comparing version 0.4.27 to 0.4.28

dist/main.js

@@ -139,3 +139,3 @@ 'use strict';
         role: role != null ? role : asChild === true ? "button" : void 0,
-        "aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? "true" : void 0,
+        "aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? "true" : ariaDisabled,
         tabIndex: disabled && (asLink || asChild === true) ? -1 : void 0,
@@ -142,0 +142,0 @@ ref: forwardRef,

dist/module.js

@@ -131,3 +131,3 @@ import { jsx } from 'react/jsx-runtime';
         role: role != null ? role : asChild === true ? "button" : void 0,
-        "aria-disabled": booleanify(ariaDisabled) ? "true" : void 0,
+        "aria-disabled": booleanify(ariaDisabled) ? "true" : ariaDisabled,
         tabIndex: disabled && (asLink || asChild === true) ? -1 : void 0,
@@ -134,0 +134,0 @@ ref: forwardRef,

dist/types.d.ts

@@ -5,6 +5,6 @@ import * as react from 'react';
 import { PressProps } from '@mirohq/design-system-use-press';
-import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
+import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
-import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
+import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
 
@@ -16,495 +16,488 @@ declare const sizes: {
 };
-declare const StyledBaseButton: react.ForwardRefExoticComponent<Omit<Omit<{}, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.SafeProps<Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "css"> & _stitches_react_types_styled_component.TransformProps<{}, {}> & {
-    css?: _stitches_react_types_css_util.CSS<{}, {
-        'border-widths': {
-            readonly none: 0;
-            readonly sm: "1px";
-            readonly md: "2px";
-            readonly lg: "4px";
+declare const StyledBaseButton: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+    'border-widths': {
+        readonly none: 0;
+        readonly sm: "1px";
+        readonly md: "2px";
+        readonly lg: "4px";
+    };
+    colors: {
+        readonly black: any;
+        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 '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 '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 transparent: any;
+        readonly white: 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;
+        "background-alpha-active"?: any;
+        "background-alpha-hover"?: any;
+        "background-danger-prominent"?: any;
+        "background-danger-prominent-active"?: any;
+        "background-danger-prominent-hover"?: any;
+        "background-danger-subtle"?: any;
+        "background-danger-subtle-active"?: any;
+        "background-danger-subtle-hover"?: any;
+        "background-neutrals"?: any;
+        "background-neutrals-active"?: any;
+        "background-neutrals-container"?: any;
+        "background-neutrals-controls-disabled"?: any;
+        "background-neutrals-disabled"?: any;
+        "background-neutrals-hover"?: any;
+        "background-neutrals-inactive"?: any;
+        "background-neutrals-inactive-hover"?: any;
+        "background-neutrals-inverted"?: any;
+        "background-neutrals-inverted-subtle"?: any;
+        "background-neutrals-page"?: any;
+        "background-neutrals-page-subtle"?: any;
+        "background-neutrals-scrolls"?: any;
+        "background-neutrals-scrolls-expanded"?: any;
+        "background-neutrals-scrolls-hover"?: any;
+        "background-neutrals-scrolls-pressed"?: any;
+        "background-neutrals-scrolls-pressed-hover"?: any;
+        "background-neutrals-subtle"?: any;
+        "background-neutrals-subtle-active"?: any;
+        "background-neutrals-subtle-hover"?: any;
+        "background-primary-prominent"?: any;
+        "background-primary-prominent-active"?: any;
+        "background-primary-prominent-expanded"?: any;
+        "background-primary-prominent-hover"?: any;
+        "background-primary-prominent-pressed"?: any;
+        "background-primary-prominent-pressed-hover"?: any;
+        "background-primary-prominent-selected"?: any;
+        "background-primary-subtle"?: any;
+        "background-primary-subtle-active"?: any;
+        "background-primary-subtle-expanded"?: any;
+        "background-primary-subtle-hover"?: any;
+        "background-primary-subtle-pressed"?: any;
+        "background-primary-subtle-pressed-hover"?: any;
+        "background-primary-subtle-selected"?: any;
+        "background-success"?: any;
+        "background-success-prominent"?: any;
+        "background-success-prominent-active"?: any;
+        "background-success-prominent-hover"?: any;
+        "background-warning-prominent"?: any;
+        "background-warning-subtle"?: any;
+        "border-danger"?: any;
+        "border-danger-active"?: any;
+        "border-danger-hover"?: any;
+        "border-focus-inner"?: any;
+        "border-focus-middle"?: any;
+        "border-focus-outer"?: any;
+        "border-neutrals"?: any;
+        "border-neutrals-active"?: any;
+        "border-neutrals-controls"?: any;
+        "border-neutrals-controls-disabled"?: any;
+        "border-neutrals-disabled"?: any;
+        "border-neutrals-hover"?: any;
+        "border-neutrals-inverted"?: any;
+        "border-neutrals-subtle"?: any;
+        "border-neutrals-text"?: any;
+        "border-neutrals-text-active"?: any;
+        "border-neutrals-text-hover"?: any;
+        "border-neutrals-text-subtle"?: any;
+        "border-neutrals-text-subtle-active"?: any;
+        "border-neutrals-text-subtle-hover"?: any;
+        "border-neutrals-transparent"?: any;
+        "border-primary"?: any;
+        "border-primary-active"?: any;
+        "border-primary-hover"?: any;
+        "border-primary-inverted"?: any;
+        "border-success"?: any;
+        "border-success-active"?: any;
+        "border-success-hover"?: any;
+        "border-warning"?: any;
+        "icon-danger"?: any;
+        "icon-danger-active"?: any;
+        "icon-danger-hover"?: any;
+        "icon-danger-inverted"?: any;
+        "icon-neutrals"?: any;
+        "icon-neutrals-disabled"?: any;
+        "icon-neutrals-inactive"?: any;
+        "icon-neutrals-inactive-hover"?: any;
+        "icon-neutrals-inverted"?: any;
+        "icon-neutrals-search"?: any;
+        "icon-neutrals-subtle"?: any;
+        "icon-neutrals-text"?: any;
+        "icon-primary"?: any;
+        "icon-primary-active"?: any;
+        "icon-primary-hover"?: any;
+        "icon-primary-inverted"?: any;
+        "icon-primary-selected"?: any;
+        "icon-success"?: any;
+        "icon-success-active"?: any;
+        "icon-success-hover"?: any;
+        "icon-success-inverted"?: any;
+        "icon-warning"?: any;
+        "icon-warning-prominent"?: any;
+        "icon-warning-subtle"?: any;
+        "text-danger"?: any;
+        "text-danger-active"?: any;
+        "text-danger-hover"?: any;
+        "text-danger-inverted"?: any;
+        "text-neutrals"?: any;
+        "text-neutrals-active"?: any;
+        "text-neutrals-disabled"?: any;
+        "text-neutrals-hover"?: any;
+        "text-neutrals-inverted"?: any;
+        "text-neutrals-placeholder"?: any;
+        "text-neutrals-placeholder-only"?: any;
+        "text-neutrals-subtle"?: any;
+        "text-neutrals-subtle-active"?: any;
+        "text-neutrals-subtle-hover"?: any;
+        "text-primary"?: any;
+        "text-primary-active"?: any;
+        "text-primary-hover"?: any;
+        "text-primary-inverted"?: any;
+        "text-primary-inverted-subtle"?: any;
+        "text-primary-selected"?: any;
+        "text-success"?: any;
+        "text-success-active"?: any;
+        "text-success-hover"?: any;
+        "text-success-inverted"?: any;
+        "text-warning"?: any;
+        "text-warning-subtle"?: 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";
+    };
+    fonts: {
+        readonly heading: "Roobert, sans-serif";
+        readonly body: "Open Sans, sans-serif";
+    };
+    radii: {
+        readonly none: 0;
+        readonly half: "999em";
+        readonly 25: "2px";
+        readonly 50: "4px";
+        readonly 75: "6px";
+        readonly 100: "8px";
+        readonly 200: "16px";
+    };
+    shadows: {
+        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";
+        readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
+        readonly 'focus-controls-success': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$background-success-prominent, 0 0 0 5px $colors$background-success";
+    };
+    sizes: {
+        readonly number: string;
+        readonly 'icon-200': "16px";
+        readonly 'icon-300': "24px";
+        readonly 'icon-400': "32px";
+    };
+    space: {
+        readonly 0: "0px";
+        readonly 25: "2px";
+        readonly 50: "4px";
+        readonly 100: "8px";
+        readonly 150: "12px";
+        readonly 200: "16px";
+        readonly 300: "24px";
+        readonly 400: "32px";
+        readonly 500: "40px";
+        readonly 600: "48px";
+        readonly 700: "56px";
+        readonly 800: "64px";
+        readonly 1200: "96px";
+        readonly 1600: "128px";
+    };
+    'space-gap': {
+        readonly 0: any;
+        readonly 50: any;
+        readonly 100: any;
+        readonly 200: any;
+        readonly 300: any;
+    };
+    'space-inset': {
+        readonly 0: any;
+        readonly 50: any;
+        readonly 100: any;
+        readonly 150: any;
+        readonly 200: any;
+        readonly 300: any;
+        readonly 400: any;
+        readonly 500: any;
+        readonly 600: any;
+        readonly 700: any;
+        readonly 800: any;
+        readonly 1200: any;
+        readonly 1600: any;
+    };
+    'space-offset': {
+        readonly 0: 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-0': 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;
+    };
+    'stroke-width': {
+        readonly thin: "1.5px";
+        readonly normal: "2px";
+        readonly bold: "4px";
+    };
+    'z-indices': {
+        readonly dropdownMenu: 100;
+        readonly select: 200;
+        readonly popover: 300;
+        readonly tooltip: 400;
+    };
+}, {
+    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 borderSpacing: "space-offset";
+    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 strokeWidth: "stroke-width";
+    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";
         };
-        colors: {
-            readonly black: any;
-            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 '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 '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 transparent: any;
-            readonly white: 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;
-            "background-alpha-active"?: any;
-            "background-alpha-hover"?: any;
-            "background-danger-prominent"?: any;
-            "background-danger-prominent-active"?: any;
-            "background-danger-prominent-hover"?: any;
-            "background-danger-subtle"?: any;
-            "background-danger-subtle-active"?: any;
-            "background-danger-subtle-hover"?: any;
-            "background-neutrals"?: any;
-            "background-neutrals-active"?: any;
-            "background-neutrals-container"?: any;
-            "background-neutrals-controls-disabled"?: any;
-            "background-neutrals-disabled"?: any;
-            "background-neutrals-hover"?: any;
-            "background-neutrals-inactive"?: any;
-            "background-neutrals-inactive-hover"?: any;
-            "background-neutrals-inverted"?: any;
-            "background-neutrals-inverted-subtle"?: any;
-            "background-neutrals-page"?: any;
-            "background-neutrals-page-subtle"?: any;
-            "background-neutrals-scrolls"?: any;
-            "background-neutrals-scrolls-expanded"?: any;
-            "background-neutrals-scrolls-hover"?: any;
-            "background-neutrals-scrolls-pressed"?: any;
-            "background-neutrals-scrolls-pressed-hover"?: any;
-            "background-neutrals-subtle"?: any;
-            "background-neutrals-subtle-active"?: any;
-            "background-neutrals-subtle-hover"?: any;
-            "background-primary-prominent"?: any;
-            "background-primary-prominent-active"?: any;
-            "background-primary-prominent-expanded"?: any;
-            "background-primary-prominent-hover"?: any;
-            "background-primary-prominent-pressed"?: any;
-            "background-primary-prominent-pressed-hover"?: any;
-            "background-primary-prominent-selected"?: any;
-            "background-primary-subtle"?: any;
-            "background-primary-subtle-active"?: any;
-            "background-primary-subtle-expanded"?: any;
-            "background-primary-subtle-hover"?: any;
-            "background-primary-subtle-pressed"?: any;
-            "background-primary-subtle-pressed-hover"?: any;
-            "background-primary-subtle-selected"?: any;
-            "background-success"?: any;
-            "background-success-prominent"?: any;
-            "background-success-prominent-active"?: any;
-            "background-success-prominent-hover"?: any;
-            "background-warning-prominent"?: any;
-            "background-warning-subtle"?: any;
-            "border-danger"?: any;
-            "border-danger-active"?: any;
-            "border-danger-hover"?: any;
-            "border-focus-inner"?: any;
-            "border-focus-middle"?: any;
-            "border-focus-outer"?: any;
-            "border-neutrals"?: any;
-            "border-neutrals-active"?: any;
-            "border-neutrals-controls"?: any;
-            "border-neutrals-controls-disabled"?: any;
-            "border-neutrals-disabled"?: any;
-            "border-neutrals-hover"?: any;
-            "border-neutrals-inverted"?: any;
-            "border-neutrals-subtle"?: any;
-            "border-neutrals-text"?: any;
-            "border-neutrals-text-active"?: any;
-            "border-neutrals-text-hover"?: any;
-            "border-neutrals-text-subtle"?: any;
-            "border-neutrals-text-subtle-active"?: any;
-            "border-neutrals-text-subtle-hover"?: any;
-            "border-neutrals-transparent"?: any;
-            "border-primary"?: any;
-            "border-primary-active"?: any;
-            "border-primary-hover"?: any;
-            "border-primary-inverted"?: any;
-            "border-success"?: any;
-            "border-success-active"?: any;
-            "border-success-hover"?: any;
-            "border-warning"?: any;
-            "icon-danger"?: any;
-            "icon-danger-active"?: any;
-            "icon-danger-hover"?: any;
-            "icon-danger-inverted"?: any;
-            "icon-neutrals"?: any;
-            "icon-neutrals-disabled"?: any;
-            "icon-neutrals-inactive"?: any;
-            "icon-neutrals-inactive-hover"?: any;
-            "icon-neutrals-inverted"?: any;
-            "icon-neutrals-search"?: any;
-            "icon-neutrals-subtle"?: any;
-            "icon-neutrals-text"?: any;
-            "icon-primary"?: any;
-            "icon-primary-active"?: any;
-            "icon-primary-hover"?: any;
-            "icon-primary-inverted"?: any;
-            "icon-primary-selected"?: any;
-            "icon-success"?: any;
-            "icon-success-active"?: any;
-            "icon-success-hover"?: any;
-            "icon-success-inverted"?: any;
-            "icon-warning"?: any;
-            "icon-warning-prominent"?: any;
-            "icon-warning-subtle"?: any;
-            "text-danger"?: any;
-            "text-danger-active"?: any;
-            "text-danger-hover"?: any;
-            "text-danger-inverted"?: any;
-            "text-neutrals"?: any;
-            "text-neutrals-active"?: any;
-            "text-neutrals-disabled"?: any;
-            "text-neutrals-hover"?: any;
-            "text-neutrals-inverted"?: any;
-            "text-neutrals-placeholder"?: any;
-            "text-neutrals-placeholder-only"?: any;
-            "text-neutrals-subtle"?: any;
-            "text-neutrals-subtle-active"?: any;
-            "text-neutrals-subtle-hover"?: any;
-            "text-primary"?: any;
-            "text-primary-active"?: any;
-            "text-primary-hover"?: any;
-            "text-primary-inverted"?: any;
-            "text-primary-inverted-subtle"?: any;
-            "text-primary-selected"?: any;
-            "text-success"?: any;
-            "text-success-active"?: any;
-            "text-success-hover"?: any;
-            "text-success-inverted"?: any;
-            "text-warning"?: any;
-            "text-warning-subtle"?: any;
+        paddingRight: {
+            readonly [$$PropertyValue]: "padding";
         };
-        '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";
-        };
-        fonts: {
-            readonly heading: "Roobert, sans-serif";
-            readonly body: "Open Sans, sans-serif";
-        };
-        radii: {
-            readonly none: 0;
-            readonly half: "999em";
-            readonly 25: "2px";
-            readonly 50: "4px";
-            readonly 75: "6px";
-            readonly 100: "8px";
-            readonly 200: "16px";
-        };
-        shadows: {
-            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";
-            readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
-            readonly 'focus-controls-success': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$background-success-prominent, 0 0 0 5px $colors$background-success";
-        };
-        sizes: {
-            readonly number: string;
-            readonly 'icon-200': "16px";
-            readonly 'icon-300': "24px";
-            readonly 'icon-400': "32px";
-        };
-        space: {
-            readonly 0: "0px";
-            readonly 25: "2px";
-            readonly 50: "4px";
-            readonly 100: "8px";
-            readonly 150: "12px";
-            readonly 200: "16px";
-            readonly 300: "24px";
-            readonly 400: "32px";
-            readonly 500: "40px";
-            readonly 600: "48px";
-            readonly 700: "56px";
-            readonly 800: "64px";
-            readonly 1200: "96px";
-            readonly 1600: "128px";
-        };
-        'space-gap': {
-            readonly 0: any;
-            readonly 50: any;
-            readonly 100: any;
-            readonly 200: any;
-            readonly 300: any;
-        };
-        'space-inset': {
-            readonly 0: any;
-            readonly 50: any;
-            readonly 100: any;
-            readonly 150: any;
-            readonly 200: any;
-            readonly 300: any;
-            readonly 400: any;
-            readonly 600: any;
-            readonly 700: any;
-            readonly 800: any;
-            readonly 1200: any;
-            readonly 1600: any;
-        };
-        'space-offset': {
-            readonly 0: 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-0': 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;
-        };
-        'stroke-width': {
-            readonly thin: "1.5px";
-            readonly normal: "2px";
-            readonly bold: "4px";
-        };
-        'z-indices': {
-            readonly dropdownMenu: 100;
-            readonly select: 200;
-            readonly popover: 300;
-            readonly tooltip: 400;
-        };
-    }, {
-        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 borderSpacing: "space-offset";
-        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 strokeWidth: "stroke-width";
-        readonly textDecorationColor: "colors";
-        readonly textShadow: "shadows";
-        readonly top: "space";
-        readonly transition: "transitions";
-        readonly width: "sizes";
-        readonly zIndex: "z-indices";
-    }, {
-        paddingX: (value: {
+    };
+    paddingY: (value: {
+        readonly [$$PropertyValue]: "padding";
+    }) => {
+        paddingTop: {
             readonly [$$PropertyValue]: "padding";
-        }) => {
-            paddingLeft: {
-                readonly [$$PropertyValue]: "padding";
-            };
-            paddingRight: {
-                readonly [$$PropertyValue]: "padding";
-            };
         };
-        paddingY: (value: {
+        paddingBottom: {
             readonly [$$PropertyValue]: "padding";
-        }) => {
-            paddingTop: {
-                readonly [$$PropertyValue]: "padding";
-            };
-            paddingBottom: {
-                readonly [$$PropertyValue]: "padding";
-            };
         };
-        marginX: (value: {
+    };
+    marginX: (value: {
+        readonly [$$PropertyValue]: "margin";
+    }) => {
+        marginLeft: {
             readonly [$$PropertyValue]: "margin";
-        }) => {
-            marginLeft: {
-                readonly [$$PropertyValue]: "margin";
-            };
-            marginRight: {
-                readonly [$$PropertyValue]: "margin";
-            };
         };
-        marginY: (value: {
+        marginRight: {
             readonly [$$PropertyValue]: "margin";
-        }) => {
-            marginTop: {
-                readonly [$$PropertyValue]: "margin";
-            };
-            marginBottom: {
-                readonly [$$PropertyValue]: "margin";
-            };
         };
-        square: (value: {
+    };
+    marginY: (value: {
+        readonly [$$PropertyValue]: "margin";
+    }) => {
+        marginTop: {
+            readonly [$$PropertyValue]: "margin";
+        };
+        marginBottom: {
+            readonly [$$PropertyValue]: "margin";
+        };
+    };
+    square: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        width: {
             readonly [$$PropertyValue]: "width";
-        }) => {
-            width: {
-                readonly [$$PropertyValue]: "width";
-            };
-            height: {
-                readonly [$$PropertyValue]: "width";
-            };
         };
-    }> | undefined;
-}> & {
-    children?: react.ReactNode;
-} & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>, {}, {}>;
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>, {}, {}>;
 declare type StyledBaseButtonProps = ComponentPropsWithRef<typeof StyledBaseButton>;
@@ -511,0 +504,0 @@

package.json

 {
   "name": "@mirohq/design-system-base-button",
-  "version": "0.4.27",
+  "version": "0.4.28",
   "description": "",
@@ -32,4 +32,4 @@ "author": "Miro",
     "@react-types/shared": "^3.16.0",
-    "@mirohq/design-system-stitches": "^2.4.0",
     "@mirohq/design-system-primitive": "^1.1.1",
+    "@mirohq/design-system-stitches": "^2.4.1",
     "@mirohq/design-system-types": "^0.6.2"
@@ -36,0 +36,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

45291

decreased by-4.53%

Lines of code

790

decreased by-0.75%

Dependency changes

• Updated@mirohq/design-system-stitches@^2.4.1