@mirohq/design-system-badge 0.3.33 → 0.3.35
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/main.js +2 -2
- package/dist/main.js.map +1 -1
- package/dist/module.js +2 -2
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +62 -103
- package/package.json +3 -3
package/dist/main.js
CHANGED
|
@@ -19,7 +19,7 @@ const sharedStyles = {
|
|
|
19
19
|
alignItems: "center",
|
|
20
20
|
backgroundColor: "$background-primary-prominent",
|
|
21
21
|
borderColor: "$border-primary-inverted",
|
|
22
|
-
borderRadius: "$
|
|
22
|
+
borderRadius: "$round",
|
|
23
23
|
color: "$icon-primary-inverted",
|
|
24
24
|
display: "flex",
|
|
25
25
|
justifyContent: "center",
|
|
@@ -71,7 +71,7 @@ const StyledBadgeWrapper = designSystemStitches.styled(designSystemPrimitive.Pri
|
|
|
71
71
|
placeContent: "center",
|
|
72
72
|
position: "absolute",
|
|
73
73
|
right: "-2px",
|
|
74
|
-
top: "-
|
|
74
|
+
top: "-10px",
|
|
75
75
|
width: "10px",
|
|
76
76
|
zIndex: "1"
|
|
77
77
|
});
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n display: 'flex',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n display: 'flex',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$round',\n color: '$icon-primary-inverted',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n borderWidth: 2,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n userSelect: 'none',\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-10px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type {\n ElementRef,\n ReactNode,\n ReactElement,\n ForwardRefExoticComponent,\n HTMLAttributes,\n} from 'react'\nimport type { Numeric } from '@mirohq/design-system-types'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge.\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot\n * is displayed.\n * @default true\n */\n show?: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n\n /**\n * Move the badge position to the left/right.\n * @default 0\n */\n offsetX?: Numeric\n\n /**\n * Move the badge position to the top/bottom.\n * @default 0\n */\n offsetY?: Numeric\n}\n\nexport const Badge: ForwardRefExoticComponent<\n BadgeProps & HTMLAttributes<ElementRef<typeof StyledBadge>>\n> = React.forwardRef(\n (\n { show = true, content, children, offsetX = 0, offsetY = 0, ...restProps },\n forwardRef\n ) => {\n if (!show) {\n return children as ReactElement\n }\n\n let offset = {}\n\n if (+offsetX !== 0 || +offsetY !== 0) {\n offset = {\n UNSAFE_style: {\n transform: `translate(${offsetX}px, ${offsetY}px)`,\n },\n }\n }\n\n const badgeProps = {\n ...restProps,\n ...offset,\n }\n\n return (\n <StyledBadgeContainer\n data-testid={process.env.NODE_ENV === 'test' ? 'badge' : undefined}\n >\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...badgeProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...badgeProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n }\n)\n"],"names":["styled","Primitive","React","jsxs","jsx"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -11,7 +11,7 @@ const sharedStyles = {
|
|
|
11
11
|
alignItems: "center",
|
|
12
12
|
backgroundColor: "$background-primary-prominent",
|
|
13
13
|
borderColor: "$border-primary-inverted",
|
|
14
|
-
borderRadius: "$
|
|
14
|
+
borderRadius: "$round",
|
|
15
15
|
color: "$icon-primary-inverted",
|
|
16
16
|
display: "flex",
|
|
17
17
|
justifyContent: "center",
|
|
@@ -63,7 +63,7 @@ const StyledBadgeWrapper = styled(Primitive.div, {
|
|
|
63
63
|
placeContent: "center",
|
|
64
64
|
position: "absolute",
|
|
65
65
|
right: "-2px",
|
|
66
|
-
top: "-
|
|
66
|
+
top: "-10px",
|
|
67
67
|
width: "10px",
|
|
68
68
|
zIndex: "1"
|
|
69
69
|
});
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n display: 'flex',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n display: 'flex',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$round',\n color: '$icon-primary-inverted',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n borderWidth: 2,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n userSelect: 'none',\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-10px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type {\n ElementRef,\n ReactNode,\n ReactElement,\n ForwardRefExoticComponent,\n HTMLAttributes,\n} from 'react'\nimport type { Numeric } from '@mirohq/design-system-types'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge.\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot\n * is displayed.\n * @default true\n */\n show?: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n\n /**\n * Move the badge position to the left/right.\n * @default 0\n */\n offsetX?: Numeric\n\n /**\n * Move the badge position to the top/bottom.\n * @default 0\n */\n offsetY?: Numeric\n}\n\nexport const Badge: ForwardRefExoticComponent<\n BadgeProps & HTMLAttributes<ElementRef<typeof StyledBadge>>\n> = React.forwardRef(\n (\n { show = true, content, children, offsetX = 0, offsetY = 0, ...restProps },\n forwardRef\n ) => {\n if (!show) {\n return children as ReactElement\n }\n\n let offset = {}\n\n if (+offsetX !== 0 || +offsetY !== 0) {\n offset = {\n UNSAFE_style: {\n transform: `translate(${offsetX}px, ${offsetY}px)`,\n },\n }\n }\n\n const badgeProps = {\n ...restProps,\n ...offset,\n }\n\n return (\n <StyledBadgeContainer\n data-testid={process.env.NODE_ENV === 'test' ? 'badge' : undefined}\n >\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...badgeProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...badgeProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n }\n)\n"],"names":[],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -257,22 +257,23 @@ declare const StyledBadge: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
257
257
|
readonly body: "Open Sans, sans-serif";
|
|
258
258
|
};
|
|
259
259
|
radii: {
|
|
260
|
+
readonly 0: "0px";
|
|
260
261
|
readonly 25: "2px";
|
|
261
262
|
readonly 50: "4px";
|
|
262
263
|
readonly 75: "6px";
|
|
263
264
|
readonly 100: "8px";
|
|
264
265
|
readonly 200: "16px";
|
|
265
|
-
readonly
|
|
266
|
-
readonly none: "0px";
|
|
266
|
+
readonly round: "999px";
|
|
267
267
|
};
|
|
268
268
|
shadows: {
|
|
269
|
-
50: any;
|
|
270
269
|
100: any;
|
|
270
|
+
50: any;
|
|
271
271
|
"focus-small": any;
|
|
272
272
|
"focus-small-outline": any;
|
|
273
273
|
"focus-large": any;
|
|
274
274
|
"focus-controls": any;
|
|
275
275
|
"focus-controls-error": any;
|
|
276
|
+
"focus-controls-error-small": any;
|
|
276
277
|
"focus-controls-success": any;
|
|
277
278
|
};
|
|
278
279
|
sizes: {
|
|
@@ -297,48 +298,6 @@ declare const StyledBadge: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
297
298
|
readonly 1200: "96px";
|
|
298
299
|
readonly 1600: "128px";
|
|
299
300
|
};
|
|
300
|
-
'space-gap': {
|
|
301
|
-
readonly 0: any;
|
|
302
|
-
readonly 50: any;
|
|
303
|
-
readonly 100: any;
|
|
304
|
-
readonly 200: any;
|
|
305
|
-
readonly 300: any;
|
|
306
|
-
};
|
|
307
|
-
'space-inset': {
|
|
308
|
-
readonly 0: any;
|
|
309
|
-
readonly 50: any;
|
|
310
|
-
readonly 100: any;
|
|
311
|
-
readonly 150: any;
|
|
312
|
-
readonly 200: any;
|
|
313
|
-
readonly 300: any;
|
|
314
|
-
readonly 400: any;
|
|
315
|
-
readonly 500: any;
|
|
316
|
-
readonly 600: any;
|
|
317
|
-
readonly 700: any;
|
|
318
|
-
readonly 800: any;
|
|
319
|
-
readonly 1200: any;
|
|
320
|
-
readonly 1600: any;
|
|
321
|
-
};
|
|
322
|
-
'space-offset': {
|
|
323
|
-
readonly 0: any;
|
|
324
|
-
readonly 50: any;
|
|
325
|
-
readonly 100: any;
|
|
326
|
-
readonly 150: any;
|
|
327
|
-
readonly 200: any;
|
|
328
|
-
readonly 300: any;
|
|
329
|
-
readonly 400: any;
|
|
330
|
-
readonly 600: any;
|
|
331
|
-
readonly 800: any;
|
|
332
|
-
readonly 1200: any;
|
|
333
|
-
readonly 1600: any;
|
|
334
|
-
readonly 'stacking-0': any;
|
|
335
|
-
readonly 'stacking-100': any;
|
|
336
|
-
readonly 'stacking-200': any;
|
|
337
|
-
readonly 'stacking-300': any;
|
|
338
|
-
readonly 'stacking-400': any;
|
|
339
|
-
readonly 'stacking-500': any;
|
|
340
|
-
readonly 'stacking-800': any;
|
|
341
|
-
};
|
|
342
301
|
'stroke-width': {
|
|
343
302
|
readonly thin: "1.5px";
|
|
344
303
|
readonly normal: "2px";
|
|
@@ -379,7 +338,7 @@ declare const StyledBadge: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
379
338
|
readonly borderRightColor: "colors";
|
|
380
339
|
readonly borderRightStyle: "border-styles";
|
|
381
340
|
readonly borderRightWidth: "border-widths";
|
|
382
|
-
readonly borderSpacing: "space
|
|
341
|
+
readonly borderSpacing: "space";
|
|
383
342
|
readonly borderStyle: "border-styles";
|
|
384
343
|
readonly borderTop: "colors";
|
|
385
344
|
readonly borderTopColor: "colors";
|
|
@@ -392,42 +351,42 @@ declare const StyledBadge: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
392
351
|
readonly boxShadow: "shadows";
|
|
393
352
|
readonly caretColor: "colors";
|
|
394
353
|
readonly color: "colors";
|
|
395
|
-
readonly columnGap: "space
|
|
354
|
+
readonly columnGap: "space";
|
|
396
355
|
readonly columnRuleColor: "colors";
|
|
397
356
|
readonly fill: "colors";
|
|
398
357
|
readonly flexBasis: "sizes";
|
|
399
358
|
readonly fontFamily: "fonts";
|
|
400
359
|
readonly fontSize: "font-sizes";
|
|
401
360
|
readonly fontWeight: "font-weights";
|
|
402
|
-
readonly gap: "space
|
|
403
|
-
readonly gridColumnGap: "space
|
|
404
|
-
readonly gridGap: "space
|
|
405
|
-
readonly gridRowGap: "space
|
|
361
|
+
readonly gap: "space";
|
|
362
|
+
readonly gridColumnGap: "space";
|
|
363
|
+
readonly gridGap: "space";
|
|
364
|
+
readonly gridRowGap: "space";
|
|
406
365
|
readonly gridTemplateColumns: "sizes";
|
|
407
366
|
readonly gridTemplateRows: "sizes";
|
|
408
367
|
readonly height: "sizes";
|
|
409
368
|
readonly inlineSize: "sizes";
|
|
410
|
-
readonly inset: "space
|
|
411
|
-
readonly insetBlock: "space
|
|
412
|
-
readonly insetBlockEnd: "space
|
|
413
|
-
readonly insetBlockStart: "space
|
|
414
|
-
readonly insetInline: "space
|
|
415
|
-
readonly insetInlineEnd: "space
|
|
416
|
-
readonly insetInlineStart: "space
|
|
369
|
+
readonly inset: "space";
|
|
370
|
+
readonly insetBlock: "space";
|
|
371
|
+
readonly insetBlockEnd: "space";
|
|
372
|
+
readonly insetBlockStart: "space";
|
|
373
|
+
readonly insetInline: "space";
|
|
374
|
+
readonly insetInlineEnd: "space";
|
|
375
|
+
readonly insetInlineStart: "space";
|
|
417
376
|
readonly left: "space";
|
|
418
377
|
readonly letterSpacing: "letter-spacings";
|
|
419
378
|
readonly lineHeight: "line-heights";
|
|
420
|
-
readonly margin: "space
|
|
421
|
-
readonly marginBlock: "space
|
|
422
|
-
readonly marginBlockEnd: "space
|
|
423
|
-
readonly marginBlockStart: "space
|
|
424
|
-
readonly marginBottom: "space
|
|
425
|
-
readonly marginInline: "space
|
|
426
|
-
readonly marginInlineEnd: "space
|
|
427
|
-
readonly marginInlineStart: "space
|
|
428
|
-
readonly marginLeft: "space
|
|
429
|
-
readonly marginRight: "space
|
|
430
|
-
readonly marginTop: "space
|
|
379
|
+
readonly margin: "space";
|
|
380
|
+
readonly marginBlock: "space";
|
|
381
|
+
readonly marginBlockEnd: "space";
|
|
382
|
+
readonly marginBlockStart: "space";
|
|
383
|
+
readonly marginBottom: "space";
|
|
384
|
+
readonly marginInline: "space";
|
|
385
|
+
readonly marginInlineEnd: "space";
|
|
386
|
+
readonly marginInlineStart: "space";
|
|
387
|
+
readonly marginLeft: "space";
|
|
388
|
+
readonly marginRight: "space";
|
|
389
|
+
readonly marginTop: "space";
|
|
431
390
|
readonly maxBlockSize: "sizes";
|
|
432
391
|
readonly maxHeight: "sizes";
|
|
433
392
|
readonly maxInlineSize: "sizes";
|
|
@@ -438,41 +397,41 @@ declare const StyledBadge: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
438
397
|
readonly minWidth: "sizes";
|
|
439
398
|
readonly outline: "colors";
|
|
440
399
|
readonly outlineColor: "colors";
|
|
441
|
-
readonly padding: "space
|
|
442
|
-
readonly paddingBlock: "space
|
|
443
|
-
readonly paddingBlockEnd: "space
|
|
444
|
-
readonly paddingBlockStart: "space
|
|
445
|
-
readonly paddingBottom: "space
|
|
446
|
-
readonly paddingInline: "space
|
|
447
|
-
readonly paddingInlineEnd: "space
|
|
448
|
-
readonly paddingInlineStart: "space
|
|
449
|
-
readonly paddingLeft: "space
|
|
450
|
-
readonly paddingRight: "space
|
|
451
|
-
readonly paddingTop: "space
|
|
400
|
+
readonly padding: "space";
|
|
401
|
+
readonly paddingBlock: "space";
|
|
402
|
+
readonly paddingBlockEnd: "space";
|
|
403
|
+
readonly paddingBlockStart: "space";
|
|
404
|
+
readonly paddingBottom: "space";
|
|
405
|
+
readonly paddingInline: "space";
|
|
406
|
+
readonly paddingInlineEnd: "space";
|
|
407
|
+
readonly paddingInlineStart: "space";
|
|
408
|
+
readonly paddingLeft: "space";
|
|
409
|
+
readonly paddingRight: "space";
|
|
410
|
+
readonly paddingTop: "space";
|
|
452
411
|
readonly right: "space";
|
|
453
|
-
readonly rowGap: "space
|
|
454
|
-
readonly scrollMargin: "space
|
|
455
|
-
readonly scrollMarginBlock: "space
|
|
456
|
-
readonly scrollMarginBlockEnd: "space
|
|
457
|
-
readonly scrollMarginBlockStart: "space
|
|
458
|
-
readonly scrollMarginBottom: "space
|
|
459
|
-
readonly scrollMarginInline: "space
|
|
460
|
-
readonly scrollMarginInlineEnd: "space
|
|
461
|
-
readonly scrollMarginInlineStart: "space
|
|
462
|
-
readonly scrollMarginLeft: "space
|
|
463
|
-
readonly scrollMarginRight: "space
|
|
464
|
-
readonly scrollMarginTop: "space
|
|
465
|
-
readonly scrollPadding: "space
|
|
466
|
-
readonly scrollPaddingBlock: "space
|
|
467
|
-
readonly scrollPaddingBlockEnd: "space
|
|
468
|
-
readonly scrollPaddingBlockStart: "space
|
|
469
|
-
readonly scrollPaddingBottom: "space
|
|
470
|
-
readonly scrollPaddingInline: "space
|
|
471
|
-
readonly scrollPaddingInlineEnd: "space
|
|
472
|
-
readonly scrollPaddingInlineStart: "space
|
|
473
|
-
readonly scrollPaddingLeft: "space
|
|
474
|
-
readonly scrollPaddingRight: "space
|
|
475
|
-
readonly scrollPaddingTop: "space
|
|
412
|
+
readonly rowGap: "space";
|
|
413
|
+
readonly scrollMargin: "space";
|
|
414
|
+
readonly scrollMarginBlock: "space";
|
|
415
|
+
readonly scrollMarginBlockEnd: "space";
|
|
416
|
+
readonly scrollMarginBlockStart: "space";
|
|
417
|
+
readonly scrollMarginBottom: "space";
|
|
418
|
+
readonly scrollMarginInline: "space";
|
|
419
|
+
readonly scrollMarginInlineEnd: "space";
|
|
420
|
+
readonly scrollMarginInlineStart: "space";
|
|
421
|
+
readonly scrollMarginLeft: "space";
|
|
422
|
+
readonly scrollMarginRight: "space";
|
|
423
|
+
readonly scrollMarginTop: "space";
|
|
424
|
+
readonly scrollPadding: "space";
|
|
425
|
+
readonly scrollPaddingBlock: "space";
|
|
426
|
+
readonly scrollPaddingBlockEnd: "space";
|
|
427
|
+
readonly scrollPaddingBlockStart: "space";
|
|
428
|
+
readonly scrollPaddingBottom: "space";
|
|
429
|
+
readonly scrollPaddingInline: "space";
|
|
430
|
+
readonly scrollPaddingInlineEnd: "space";
|
|
431
|
+
readonly scrollPaddingInlineStart: "space";
|
|
432
|
+
readonly scrollPaddingLeft: "space";
|
|
433
|
+
readonly scrollPaddingRight: "space";
|
|
434
|
+
readonly scrollPaddingTop: "space";
|
|
476
435
|
readonly stroke: "colors";
|
|
477
436
|
readonly strokeWidth: "stroke-width";
|
|
478
437
|
readonly textDecorationColor: "colors";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-badge",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.35",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@mirohq/design-system-primitive": "^1.1.2",
|
|
30
|
-
"@mirohq/design-system-stitches": "^2.6.
|
|
31
|
-
"@mirohq/design-system-types": "^0.
|
|
30
|
+
"@mirohq/design-system-stitches": "^2.6.5",
|
|
31
|
+
"@mirohq/design-system-types": "^0.7.0"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
34
|
"build": "rollup -c ../../../rollup.config.js",
|