@mirohq/design-system-tag 0.1.23 → 1.0.0-tag-api-changes.0

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 CHANGED
@@ -31,11 +31,13 @@ const StyledTag = designSystemStitches.styled(designSystemPrimitive.Primitive.di
31
31
  backgroundColor: "$background-neutrals-inverted",
32
32
  color: "$text-neutrals-inverted"
33
33
  },
34
- "beta-subtle": {
34
+ // 'beta-subtle': {
35
+ neutral: {
35
36
  backgroundColor: "$background-neutrals-subtle",
36
37
  color: "$text-neutrals-subtle"
37
38
  },
38
- "primary-prominent": {
39
+ // 'primary-prominent': {
40
+ primary: {
39
41
  backgroundColor: "$background-primary-prominent",
40
42
  color: "$text-primary-inverted"
41
43
  },
@@ -43,7 +45,8 @@ const StyledTag = designSystemStitches.styled(designSystemPrimitive.Primitive.di
43
45
  backgroundColor: "$background-primary-subtle",
44
46
  color: "$text-primary"
45
47
  },
46
- "warning-prominent": {
48
+ // 'warning-prominent': {
49
+ warning: {
47
50
  backgroundColor: "$background-warning-prominent",
48
51
  color: "$text-neutrals"
49
52
  },
@@ -51,7 +54,8 @@ const StyledTag = designSystemStitches.styled(designSystemPrimitive.Primitive.di
51
54
  backgroundColor: "$background-warning-subtle",
52
55
  color: "$text-warning-subtle"
53
56
  },
54
- "success-prominent": {
57
+ // 'success-prominent': {
58
+ success: {
55
59
  backgroundColor: "$background-success-prominent",
56
60
  color: "$text-success-inverted"
57
61
  },
@@ -59,7 +63,8 @@ const StyledTag = designSystemStitches.styled(designSystemPrimitive.Primitive.di
59
63
  backgroundColor: "$background-success",
60
64
  color: "$text-success"
61
65
  },
62
- "error-prominent": {
66
+ // 'error-prominent': {
67
+ error: {
63
68
  backgroundColor: "$background-danger-prominent",
64
69
  color: "$text-danger-inverted"
65
70
  },
@@ -80,7 +85,7 @@ const StyledInner = designSystemStitches.styled(designSystemPrimitive.Primitive.
80
85
  });
81
86
 
82
87
  const Tag = React__default["default"].forwardRef(
83
- ({ variant = "primary-prominent", children, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledTag, { ...props, variant, ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsx(StyledInner, { children }) })
88
+ ({ variant = "primary", children, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledTag, { ...props, variant, ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsx(StyledInner, { children }) })
84
89
  );
85
90
 
86
91
  exports.Tag = Tag;
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/tag.styled.tsx","../src/tag.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledTag = styled(Primitive.div, {\n display: 'inline-flex',\n textTransform: 'uppercase',\n width: 'fit-content',\n paddingY: '$0',\n paddingX: '$50',\n borderRadius: '$25',\n fontSize: '$125',\n lineHeight: 1.6,\n fontWeight: 'bold',\n letterSpacing: 0.25,\n '::selection': {\n backgroundColor: 'transparent',\n },\n variants: {\n variant: {\n 'beta-prominent': {\n backgroundColor: '$background-neutrals-inverted',\n color: '$text-neutrals-inverted',\n },\n 'beta-subtle': {\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals-subtle',\n },\n 'primary-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$text-primary-inverted',\n },\n 'primary-subtle': {\n backgroundColor: '$background-primary-subtle',\n color: '$text-primary',\n },\n 'warning-prominent': {\n backgroundColor: '$background-warning-prominent',\n color: '$text-neutrals',\n },\n 'warning-subtle': {\n backgroundColor: '$background-warning-subtle',\n color: '$text-warning-subtle',\n },\n 'success-prominent': {\n backgroundColor: '$background-success-prominent',\n color: '$text-success-inverted',\n },\n 'success-subtle': {\n backgroundColor: '$background-success',\n color: '$text-success',\n },\n 'error-prominent': {\n backgroundColor: '$background-danger-prominent',\n color: '$text-danger-inverted',\n },\n 'error-subtle': {\n backgroundColor: '$background-danger-subtle',\n color: '$text-danger',\n },\n },\n },\n defaultVariants: {\n variant: 'primary-prominent',\n },\n})\n\nexport const StyledInner = styled(Primitive.span, {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n})\n\nexport type StyledTagProps = ComponentPropsWithRef<typeof StyledTag>\n","import type { ElementRef, ReactNode } from 'react'\nimport React from 'react'\n\nimport type { StyledTagProps } from './tag.styled'\nimport { StyledInner, StyledTag } from './tag.styled'\n\nexport interface TagProps extends StyledTagProps {\n /**\n *\n * Change the tag style.\n * @default 'primary-prominent'\n */\n variant?: StyledTagProps['variant']\n\n /**\n * The text content.\n */\n children: ReactNode\n}\n\nexport const Tag = React.forwardRef<ElementRef<typeof StyledTag>, TagProps>(\n ({ variant = 'primary-prominent', children, ...props }, forwardRef) => (\n <StyledTag {...props} variant={variant} ref={forwardRef}>\n <StyledInner>{children}</StyledInner>\n </StyledTag>\n )\n)\n"],"names":["styled","Primitive","React","jsx"],"mappings":";;;;;;;;;;;;;AAIa,MAAA,SAAA,GAAYA,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC7C,OAAS,EAAA,aAAA;AAAA,EACT,aAAe,EAAA,WAAA;AAAA,EACf,KAAO,EAAA,aAAA;AAAA,EACP,QAAU,EAAA,IAAA;AAAA,EACV,QAAU,EAAA,KAAA;AAAA,EACV,YAAc,EAAA,KAAA;AAAA,EACd,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,UAAY,EAAA,MAAA;AAAA,EACZ,aAAe,EAAA,IAAA;AAAA,EACf,aAAe,EAAA;AAAA,IACb,eAAiB,EAAA,aAAA;AAAA,GACnB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,yBAAA;AAAA,OACT;AAAA,MACA,aAAe,EAAA;AAAA,QACb,eAAiB,EAAA,6BAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,mBAAqB,EAAA;AAAA,QACnB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,mBAAqB,EAAA;AAAA,QACnB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,gBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,sBAAA;AAAA,OACT;AAAA,MACA,mBAAqB,EAAA;AAAA,QACnB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,qBAAA;AAAA,QACjB,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,iBAAmB,EAAA;AAAA,QACjB,eAAiB,EAAA,8BAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,eAAiB,EAAA,2BAAA;AAAA,QACjB,KAAO,EAAA,cAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,mBAAA;AAAA,GACX;AACF,CAAC,CAAA,CAAA;AAEY,MAAA,WAAA,GAAcD,2BAAO,CAAAC,+BAAA,CAAU,IAAM,EAAA;AAAA,EAChD,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,QAAA;AAAA,EACV,YAAc,EAAA,UAAA;AAChB,CAAC,CAAA;;ACnDM,MAAM,MAAMC,yBAAM,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,OAAA,GAAU,qBAAqB,QAAU,EAAA,GAAG,OAAS,EAAA,UAAA,oCACrD,SAAW,EAAA,EAAA,GAAG,OAAO,OAAkB,EAAA,GAAA,EAAK,YAC3C,QAAC,kBAAAC,cAAA,CAAA,WAAA,EAAA,EAAa,UAAS,CACzB,EAAA,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"main.js","sources":["../src/tag.styled.tsx","../src/tag.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledTag = styled(Primitive.div, {\n display: 'inline-flex',\n textTransform: 'uppercase',\n width: 'fit-content',\n paddingY: '$0',\n paddingX: '$50',\n borderRadius: '$25',\n fontSize: '$125',\n lineHeight: 1.6,\n fontWeight: 'bold',\n letterSpacing: 0.25,\n '::selection': {\n backgroundColor: 'transparent',\n },\n variants: {\n variant: {\n 'beta-prominent': {\n backgroundColor: '$background-neutrals-inverted',\n color: '$text-neutrals-inverted',\n },\n // 'beta-subtle': {\n neutral: {\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals-subtle',\n },\n // 'primary-prominent': {\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$text-primary-inverted',\n },\n 'primary-subtle': {\n backgroundColor: '$background-primary-subtle',\n color: '$text-primary',\n },\n // 'warning-prominent': {\n warning: {\n backgroundColor: '$background-warning-prominent',\n color: '$text-neutrals',\n },\n 'warning-subtle': {\n backgroundColor: '$background-warning-subtle',\n color: '$text-warning-subtle',\n },\n // 'success-prominent': {\n success: {\n backgroundColor: '$background-success-prominent',\n color: '$text-success-inverted',\n },\n 'success-subtle': {\n backgroundColor: '$background-success',\n color: '$text-success',\n },\n // 'error-prominent': {\n error: {\n backgroundColor: '$background-danger-prominent',\n color: '$text-danger-inverted',\n },\n 'error-subtle': {\n backgroundColor: '$background-danger-subtle',\n color: '$text-danger',\n },\n },\n },\n defaultVariants: {\n variant: 'primary-prominent',\n },\n})\n\nexport const StyledInner = styled(Primitive.span, {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n})\n\nexport type StyledTagProps = ComponentPropsWithRef<typeof StyledTag>\n","import type { ElementRef, ReactNode } from 'react'\nimport React from 'react'\n\nimport type { StyledTagProps } from './tag.styled'\nimport { StyledInner, StyledTag } from './tag.styled'\n\nexport interface TagProps extends StyledTagProps {\n /**\n *\n * Change the tag style.\n * @default 'primary-prominent'\n */\n variant?: StyledTagProps['variant']\n\n /**\n * The text content.\n */\n children: ReactNode\n}\n\nexport const Tag = React.forwardRef<ElementRef<typeof StyledTag>, TagProps>(\n ({ variant = 'primary', children, ...props }, forwardRef) => (\n <StyledTag {...props} variant={variant} ref={forwardRef}>\n <StyledInner>{children}</StyledInner>\n </StyledTag>\n )\n)\n"],"names":["styled","Primitive","React","jsx"],"mappings":";;;;;;;;;;;;;AAIa,MAAA,SAAA,GAAYA,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC7C,OAAS,EAAA,aAAA;AAAA,EACT,aAAe,EAAA,WAAA;AAAA,EACf,KAAO,EAAA,aAAA;AAAA,EACP,QAAU,EAAA,IAAA;AAAA,EACV,QAAU,EAAA,KAAA;AAAA,EACV,YAAc,EAAA,KAAA;AAAA,EACd,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,UAAY,EAAA,MAAA;AAAA,EACZ,aAAe,EAAA,IAAA;AAAA,EACf,aAAe,EAAA;AAAA,IACb,eAAiB,EAAA,aAAA;AAAA,GACnB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,yBAAA;AAAA,OACT;AAAA;AAAA,MAEA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,6BAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA;AAAA,MAEA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,eAAA;AAAA,OACT;AAAA;AAAA,MAEA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,gBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,sBAAA;AAAA,OACT;AAAA;AAAA,MAEA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,qBAAA;AAAA,QACjB,KAAO,EAAA,eAAA;AAAA,OACT;AAAA;AAAA,MAEA,KAAO,EAAA;AAAA,QACL,eAAiB,EAAA,8BAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,eAAiB,EAAA,2BAAA;AAAA,QACjB,KAAO,EAAA,cAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,mBAAA;AAAA,GACX;AACF,CAAC,CAAA,CAAA;AAEY,MAAA,WAAA,GAAcD,2BAAO,CAAAC,+BAAA,CAAU,IAAM,EAAA;AAAA,EAChD,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,QAAA;AAAA,EACV,YAAc,EAAA,UAAA;AAChB,CAAC,CAAA;;ACxDM,MAAM,MAAMC,yBAAM,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,OAAA,GAAU,WAAW,QAAU,EAAA,GAAG,OAAS,EAAA,UAAA,oCAC3C,SAAW,EAAA,EAAA,GAAG,OAAO,OAAkB,EAAA,GAAA,EAAK,YAC3C,QAAC,kBAAAC,cAAA,CAAA,WAAA,EAAA,EAAa,UAAS,CACzB,EAAA,CAAA;AAEJ;;;;"}
package/dist/module.js CHANGED
@@ -23,11 +23,13 @@ const StyledTag = styled(Primitive.div, {
23
23
  backgroundColor: "$background-neutrals-inverted",
24
24
  color: "$text-neutrals-inverted"
25
25
  },
26
- "beta-subtle": {
26
+ // 'beta-subtle': {
27
+ neutral: {
27
28
  backgroundColor: "$background-neutrals-subtle",
28
29
  color: "$text-neutrals-subtle"
29
30
  },
30
- "primary-prominent": {
31
+ // 'primary-prominent': {
32
+ primary: {
31
33
  backgroundColor: "$background-primary-prominent",
32
34
  color: "$text-primary-inverted"
33
35
  },
@@ -35,7 +37,8 @@ const StyledTag = styled(Primitive.div, {
35
37
  backgroundColor: "$background-primary-subtle",
36
38
  color: "$text-primary"
37
39
  },
38
- "warning-prominent": {
40
+ // 'warning-prominent': {
41
+ warning: {
39
42
  backgroundColor: "$background-warning-prominent",
40
43
  color: "$text-neutrals"
41
44
  },
@@ -43,7 +46,8 @@ const StyledTag = styled(Primitive.div, {
43
46
  backgroundColor: "$background-warning-subtle",
44
47
  color: "$text-warning-subtle"
45
48
  },
46
- "success-prominent": {
49
+ // 'success-prominent': {
50
+ success: {
47
51
  backgroundColor: "$background-success-prominent",
48
52
  color: "$text-success-inverted"
49
53
  },
@@ -51,7 +55,8 @@ const StyledTag = styled(Primitive.div, {
51
55
  backgroundColor: "$background-success",
52
56
  color: "$text-success"
53
57
  },
54
- "error-prominent": {
58
+ // 'error-prominent': {
59
+ error: {
55
60
  backgroundColor: "$background-danger-prominent",
56
61
  color: "$text-danger-inverted"
57
62
  },
@@ -72,7 +77,7 @@ const StyledInner = styled(Primitive.span, {
72
77
  });
73
78
 
74
79
  const Tag = React.forwardRef(
75
- ({ variant = "primary-prominent", children, ...props }, forwardRef) => /* @__PURE__ */ jsx(StyledTag, { ...props, variant, ref: forwardRef, children: /* @__PURE__ */ jsx(StyledInner, { children }) })
80
+ ({ variant = "primary", children, ...props }, forwardRef) => /* @__PURE__ */ jsx(StyledTag, { ...props, variant, ref: forwardRef, children: /* @__PURE__ */ jsx(StyledInner, { children }) })
76
81
  );
77
82
 
78
83
  export { Tag };
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/tag.styled.tsx","../src/tag.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledTag = styled(Primitive.div, {\n display: 'inline-flex',\n textTransform: 'uppercase',\n width: 'fit-content',\n paddingY: '$0',\n paddingX: '$50',\n borderRadius: '$25',\n fontSize: '$125',\n lineHeight: 1.6,\n fontWeight: 'bold',\n letterSpacing: 0.25,\n '::selection': {\n backgroundColor: 'transparent',\n },\n variants: {\n variant: {\n 'beta-prominent': {\n backgroundColor: '$background-neutrals-inverted',\n color: '$text-neutrals-inverted',\n },\n 'beta-subtle': {\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals-subtle',\n },\n 'primary-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$text-primary-inverted',\n },\n 'primary-subtle': {\n backgroundColor: '$background-primary-subtle',\n color: '$text-primary',\n },\n 'warning-prominent': {\n backgroundColor: '$background-warning-prominent',\n color: '$text-neutrals',\n },\n 'warning-subtle': {\n backgroundColor: '$background-warning-subtle',\n color: '$text-warning-subtle',\n },\n 'success-prominent': {\n backgroundColor: '$background-success-prominent',\n color: '$text-success-inverted',\n },\n 'success-subtle': {\n backgroundColor: '$background-success',\n color: '$text-success',\n },\n 'error-prominent': {\n backgroundColor: '$background-danger-prominent',\n color: '$text-danger-inverted',\n },\n 'error-subtle': {\n backgroundColor: '$background-danger-subtle',\n color: '$text-danger',\n },\n },\n },\n defaultVariants: {\n variant: 'primary-prominent',\n },\n})\n\nexport const StyledInner = styled(Primitive.span, {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n})\n\nexport type StyledTagProps = ComponentPropsWithRef<typeof StyledTag>\n","import type { ElementRef, ReactNode } from 'react'\nimport React from 'react'\n\nimport type { StyledTagProps } from './tag.styled'\nimport { StyledInner, StyledTag } from './tag.styled'\n\nexport interface TagProps extends StyledTagProps {\n /**\n *\n * Change the tag style.\n * @default 'primary-prominent'\n */\n variant?: StyledTagProps['variant']\n\n /**\n * The text content.\n */\n children: ReactNode\n}\n\nexport const Tag = React.forwardRef<ElementRef<typeof StyledTag>, TagProps>(\n ({ variant = 'primary-prominent', children, ...props }, forwardRef) => (\n <StyledTag {...props} variant={variant} ref={forwardRef}>\n <StyledInner>{children}</StyledInner>\n </StyledTag>\n )\n)\n"],"names":[],"mappings":";;;;;AAIa,MAAA,SAAA,GAAY,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAC7C,OAAS,EAAA,aAAA;AAAA,EACT,aAAe,EAAA,WAAA;AAAA,EACf,KAAO,EAAA,aAAA;AAAA,EACP,QAAU,EAAA,IAAA;AAAA,EACV,QAAU,EAAA,KAAA;AAAA,EACV,YAAc,EAAA,KAAA;AAAA,EACd,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,UAAY,EAAA,MAAA;AAAA,EACZ,aAAe,EAAA,IAAA;AAAA,EACf,aAAe,EAAA;AAAA,IACb,eAAiB,EAAA,aAAA;AAAA,GACnB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,yBAAA;AAAA,OACT;AAAA,MACA,aAAe,EAAA;AAAA,QACb,eAAiB,EAAA,6BAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,mBAAqB,EAAA;AAAA,QACnB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,mBAAqB,EAAA;AAAA,QACnB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,gBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,sBAAA;AAAA,OACT;AAAA,MACA,mBAAqB,EAAA;AAAA,QACnB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,qBAAA;AAAA,QACjB,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,iBAAmB,EAAA;AAAA,QACjB,eAAiB,EAAA,8BAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,eAAiB,EAAA,2BAAA;AAAA,QACjB,KAAO,EAAA,cAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,mBAAA;AAAA,GACX;AACF,CAAC,CAAA,CAAA;AAEY,MAAA,WAAA,GAAc,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EAChD,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,QAAA;AAAA,EACV,YAAc,EAAA,UAAA;AAChB,CAAC,CAAA;;ACnDM,MAAM,MAAM,KAAM,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,OAAA,GAAU,qBAAqB,QAAU,EAAA,GAAG,OAAS,EAAA,UAAA,yBACrD,SAAW,EAAA,EAAA,GAAG,OAAO,OAAkB,EAAA,GAAA,EAAK,YAC3C,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAa,UAAS,CACzB,EAAA,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"module.js","sources":["../src/tag.styled.tsx","../src/tag.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledTag = styled(Primitive.div, {\n display: 'inline-flex',\n textTransform: 'uppercase',\n width: 'fit-content',\n paddingY: '$0',\n paddingX: '$50',\n borderRadius: '$25',\n fontSize: '$125',\n lineHeight: 1.6,\n fontWeight: 'bold',\n letterSpacing: 0.25,\n '::selection': {\n backgroundColor: 'transparent',\n },\n variants: {\n variant: {\n 'beta-prominent': {\n backgroundColor: '$background-neutrals-inverted',\n color: '$text-neutrals-inverted',\n },\n // 'beta-subtle': {\n neutral: {\n backgroundColor: '$background-neutrals-subtle',\n color: '$text-neutrals-subtle',\n },\n // 'primary-prominent': {\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$text-primary-inverted',\n },\n 'primary-subtle': {\n backgroundColor: '$background-primary-subtle',\n color: '$text-primary',\n },\n // 'warning-prominent': {\n warning: {\n backgroundColor: '$background-warning-prominent',\n color: '$text-neutrals',\n },\n 'warning-subtle': {\n backgroundColor: '$background-warning-subtle',\n color: '$text-warning-subtle',\n },\n // 'success-prominent': {\n success: {\n backgroundColor: '$background-success-prominent',\n color: '$text-success-inverted',\n },\n 'success-subtle': {\n backgroundColor: '$background-success',\n color: '$text-success',\n },\n // 'error-prominent': {\n error: {\n backgroundColor: '$background-danger-prominent',\n color: '$text-danger-inverted',\n },\n 'error-subtle': {\n backgroundColor: '$background-danger-subtle',\n color: '$text-danger',\n },\n },\n },\n defaultVariants: {\n variant: 'primary-prominent',\n },\n})\n\nexport const StyledInner = styled(Primitive.span, {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n})\n\nexport type StyledTagProps = ComponentPropsWithRef<typeof StyledTag>\n","import type { ElementRef, ReactNode } from 'react'\nimport React from 'react'\n\nimport type { StyledTagProps } from './tag.styled'\nimport { StyledInner, StyledTag } from './tag.styled'\n\nexport interface TagProps extends StyledTagProps {\n /**\n *\n * Change the tag style.\n * @default 'primary-prominent'\n */\n variant?: StyledTagProps['variant']\n\n /**\n * The text content.\n */\n children: ReactNode\n}\n\nexport const Tag = React.forwardRef<ElementRef<typeof StyledTag>, TagProps>(\n ({ variant = 'primary', children, ...props }, forwardRef) => (\n <StyledTag {...props} variant={variant} ref={forwardRef}>\n <StyledInner>{children}</StyledInner>\n </StyledTag>\n )\n)\n"],"names":[],"mappings":";;;;;AAIa,MAAA,SAAA,GAAY,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAC7C,OAAS,EAAA,aAAA;AAAA,EACT,aAAe,EAAA,WAAA;AAAA,EACf,KAAO,EAAA,aAAA;AAAA,EACP,QAAU,EAAA,IAAA;AAAA,EACV,QAAU,EAAA,KAAA;AAAA,EACV,YAAc,EAAA,KAAA;AAAA,EACd,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,UAAY,EAAA,MAAA;AAAA,EACZ,aAAe,EAAA,IAAA;AAAA,EACf,aAAe,EAAA;AAAA,IACb,eAAiB,EAAA,aAAA;AAAA,GACnB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,yBAAA;AAAA,OACT;AAAA;AAAA,MAEA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,6BAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA;AAAA,MAEA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,eAAA;AAAA,OACT;AAAA;AAAA,MAEA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,gBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,sBAAA;AAAA,OACT;AAAA;AAAA,MAEA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,eAAiB,EAAA,qBAAA;AAAA,QACjB,KAAO,EAAA,eAAA;AAAA,OACT;AAAA;AAAA,MAEA,KAAO,EAAA;AAAA,QACL,eAAiB,EAAA,8BAAA;AAAA,QACjB,KAAO,EAAA,uBAAA;AAAA,OACT;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,eAAiB,EAAA,2BAAA;AAAA,QACjB,KAAO,EAAA,cAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,mBAAA;AAAA,GACX;AACF,CAAC,CAAA,CAAA;AAEY,MAAA,WAAA,GAAc,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EAChD,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,QAAA;AAAA,EACV,YAAc,EAAA,UAAA;AAChB,CAAC,CAAA;;ACxDM,MAAM,MAAM,KAAM,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,OAAA,GAAU,WAAW,QAAU,EAAA,GAAG,OAAS,EAAA,UAAA,yBAC3C,SAAW,EAAA,EAAA,GAAG,OAAO,OAAkB,EAAA,GAAA,EAAK,YAC3C,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAa,UAAS,CACzB,EAAA,CAAA;AAEJ;;;;"}
package/dist/types.d.ts CHANGED
@@ -5,9 +5,9 @@ import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches'
5
5
  import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
6
6
 
7
7
  declare const StyledTag: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "variant"> & _stitches_react_types_styled_component.TransformProps<{
8
- variant?: "beta-prominent" | "beta-subtle" | "primary-prominent" | "primary-subtle" | "warning-prominent" | "warning-subtle" | "success-prominent" | "success-subtle" | "error-prominent" | "error-subtle" | undefined;
8
+ variant?: "beta-prominent" | "neutral" | "primary" | "primary-subtle" | "warning" | "warning-subtle" | "success" | "success-subtle" | "error" | "error-subtle" | undefined;
9
9
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
10
- variant?: "beta-prominent" | "beta-subtle" | "primary-prominent" | "primary-subtle" | "warning-prominent" | "warning-subtle" | "success-prominent" | "success-subtle" | "error-prominent" | "error-subtle" | undefined;
10
+ variant?: "beta-prominent" | "neutral" | "primary" | "primary-subtle" | "warning" | "warning-subtle" | "success" | "success-subtle" | "error" | "error-subtle" | undefined;
11
11
  }, {}>;
12
12
  declare type StyledTagProps = ComponentPropsWithRef<typeof StyledTag>;
13
13
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-tag",
3
- "version": "0.1.23",
3
+ "version": "1.0.0-tag-api-changes.0",
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-primitive": "^1.1.2",
30
- "@mirohq/design-system-stitches": "^2.6.25"
30
+ "@mirohq/design-system-stitches": "^2.6.24"
31
31
  },
32
32
  "scripts": {
33
33
  "build": "rollup -c ../../../rollup.config.js",