@mirohq/design-system-patterns 1.2.27 → 1.3.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
@@ -6,6 +6,7 @@ var designSystemStitches = require('@mirohq/design-system-stitches');
6
6
  var designSystemBox = require('@mirohq/design-system-box');
7
7
  var designSystemButton = require('@mirohq/design-system-button');
8
8
  var designSystemTypography = require('@mirohq/design-system-typography');
9
+ var designSystemExperiments = require('@mirohq/design-system-experiments');
9
10
 
10
11
  const Container = designSystemStitches.styled(designSystemBox.Box, {
11
12
  background: "transparent",
@@ -37,15 +38,26 @@ const Actions = designSystemStitches.styled(designSystemBox.Box, {
37
38
  alignItems: "center"
38
39
  });
39
40
  const BaseActionButton = React.forwardRef(({ label, ...actionProps }, ref) => /* @__PURE__ */ jsxRuntime.jsx(designSystemButton.Button, { ref, ...actionProps, children: label }));
40
- const PatternEmptyState = React.forwardRef(({ heading, description, illustration, actions, ...restProps }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Container, { ref, ...restProps, children: [
41
- illustration != null && /* @__PURE__ */ jsxRuntime.jsx(Illustration, { src: illustration, "aria-hidden": true, alt: "" }),
42
- heading != null && /* @__PURE__ */ jsxRuntime.jsx(designSystemTypography.Heading, { ref, level: 2, styledAs: "h3", children: heading }),
43
- description != null && /* @__PURE__ */ jsxRuntime.jsx(Description, { css: { color: "$text-neutrals-subtle" }, children: description }),
44
- actions != null && /* @__PURE__ */ jsxRuntime.jsxs(Actions, { children: [
45
- /* @__PURE__ */ jsxRuntime.jsx(BaseActionButton, { variant: "primary", ...actions.primary }),
46
- actions.secondary != null && /* @__PURE__ */ jsxRuntime.jsx(BaseActionButton, { ...actions.secondary, variant: "ghost" })
47
- ] })
48
- ] }));
41
+ const PatternEmptyState = React.forwardRef(({ heading, description, illustration, actions, ...restProps }, ref) => {
42
+ const [isCanvas26] = designSystemExperiments.useCanvas26();
43
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container, { ref, ...restProps, children: [
44
+ illustration != null && !isCanvas26 && /* @__PURE__ */ jsxRuntime.jsx(Illustration, { src: illustration, "aria-hidden": true, alt: "" }),
45
+ heading != null && /* @__PURE__ */ jsxRuntime.jsx(
46
+ designSystemTypography.Heading,
47
+ {
48
+ ref,
49
+ level: 2,
50
+ css: { fontFamily: "$display", fontSize: "$350" },
51
+ children: heading
52
+ }
53
+ ),
54
+ description != null && /* @__PURE__ */ jsxRuntime.jsx(Description, { css: { color: "$text-neutrals-subtle" }, children: description }),
55
+ actions != null && /* @__PURE__ */ jsxRuntime.jsxs(Actions, { children: [
56
+ /* @__PURE__ */ jsxRuntime.jsx(BaseActionButton, { variant: "primary", ...actions.primary }),
57
+ actions.secondary != null && /* @__PURE__ */ jsxRuntime.jsx(BaseActionButton, { ...actions.secondary, variant: "ghost" })
58
+ ] })
59
+ ] });
60
+ });
49
61
 
50
62
  exports.PatternEmptyState = PatternEmptyState;
51
63
  //# sourceMappingURL=main.js.map
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/empty-state/empty-state.tsx"],"sourcesContent":["import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n heading?: ReactNode\n description?: ReactNode\n illustration?: string\n actions?: {\n primary: ActionButton & {\n variant?: 'primary' | 'secondary'\n }\n secondary?: ActionButton\n }\n}\n\ntype BaseActionButtonProps = Omit<ButtonProps, 'children'> & {\n label: ReactNode\n}\n\ntype ActionButton = Omit<BaseActionButtonProps, 'variant'>\n\n// Styled\n// -----------------------------------------------------------------------------\nconst Container = styled(Box, {\n background: 'transparent',\n padding: '$500',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '304px',\n maxWidth: '480px',\n textAlign: 'center',\n alignItems: 'center',\n})\n\nconst Illustration = styled('img', {\n width: '72px',\n minHeight: '72px',\n display: 'block',\n marginBottom: '$150',\n})\n\nconst Description = styled(Box, {\n color: '$text-neutrals-subtle',\n marginTop: '$100',\n maxWidth: '304px',\n})\n\nconst Actions = styled(Box, {\n marginTop: '$150',\n paddingY: '$200',\n display: 'flex',\n flexDirection: 'column',\n gap: '$100',\n alignItems: 'center',\n})\n\nconst BaseActionButton = React.forwardRef<\n ElementRef<typeof Button>,\n BaseActionButtonProps\n>(({ label, ...actionProps }, ref) => (\n <Button ref={ref} {...actionProps}>\n {label}\n </Button>\n))\n\n// Component\n// -----------------------------------------------------------------------------\nexport const PatternEmptyState = React.forwardRef<\n ElementRef<typeof Box>,\n PatternEmptyStateProps\n>(({ heading, description, illustration, actions, ...restProps }, ref) => (\n <Container ref={ref} {...restProps}>\n {illustration != null && (\n <Illustration src={illustration} aria-hidden alt='' />\n )}\n {heading != null && (\n <Heading ref={ref} level={2} styledAs='h3'>\n {heading}\n </Heading>\n )}\n {description != null && (\n <Description css={{ color: '$text-neutrals-subtle' }}>\n {description}\n </Description>\n )}\n {actions != null && (\n <Actions>\n <BaseActionButton variant='primary' {...actions.primary} />\n\n {actions.secondary != null && (\n <BaseActionButton {...actions.secondary} variant='ghost' />\n )}\n </Actions>\n )}\n </Container>\n))\n"],"names":["styled","Box","Button","jsx","Heading","jsxs"],"mappings":";;;;;;;;;AA+BA,MAAM,SAAA,GAAYA,4BAAOC,mBAAA,EAAK;AAAA,EAC5B,UAAA,EAAY,aAAA;AAAA,EACZ,OAAA,EAAS,MAAA;AAAA,EACT,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,QAAA,EAAU,OAAA;AAAA,EACV,QAAA,EAAU,OAAA;AAAA,EACV,SAAA,EAAW,QAAA;AAAA,EACX,UAAA,EAAY;AACd,CAAC,CAAA;AAED,MAAM,YAAA,GAAeD,4BAAO,KAAA,EAAO;AAAA,EACjC,KAAA,EAAO,MAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,OAAA,EAAS,OAAA;AAAA,EACT,YAAA,EAAc;AAChB,CAAC,CAAA;AAED,MAAM,WAAA,GAAcA,4BAAOC,mBAAA,EAAK;AAAA,EAC9B,KAAA,EAAO,uBAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,MAAM,OAAA,GAAUD,4BAAOC,mBAAA,EAAK;AAAA,EAC1B,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU,MAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,GAAA,EAAK,MAAA;AAAA,EACL,UAAA,EAAY;AACd,CAAC,CAAA;AAED,MAAM,mBAAmB,KAAA,CAAM,UAAA,CAG7B,CAAC,EAAE,OAAO,GAAG,WAAA,EAAY,EAAG,GAAA,oCAC3BC,yBAAA,EAAA,EAAO,GAAA,EAAW,GAAG,WAAA,EACnB,iBACH,CACD,CAAA;AAIM,MAAM,oBAAoB,KAAA,CAAM,UAAA,CAGrC,CAAC,EAAE,SAAS,WAAA,EAAa,YAAA,EAAc,OAAA,EAAS,GAAG,WAAU,EAAG,GAAA,qCAC/D,SAAA,EAAA,EAAU,GAAA,EAAW,GAAG,SAAA,EACtB,QAAA,EAAA;AAAA,EAAA,YAAA,IAAgB,IAAA,mCACd,YAAA,EAAA,EAAa,GAAA,EAAK,cAAc,aAAA,EAAW,IAAA,EAAC,KAAI,EAAA,EAAG,CAAA;AAAA,EAErD,OAAA,IAAW,wBACVC,cAAA,CAACC,8BAAA,EAAA,EAAQ,KAAU,KAAA,EAAO,CAAA,EAAG,QAAA,EAAS,IAAA,EACnC,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,EAED,WAAA,IAAe,wBACdD,cAAA,CAAC,WAAA,EAAA,EAAY,KAAK,EAAE,KAAA,EAAO,uBAAA,EAAwB,EAChD,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,EAED,OAAA,IAAW,IAAA,oBACVE,eAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAF,cAAA,CAAC,gBAAA,EAAA,EAAiB,OAAA,EAAQ,SAAA,EAAW,GAAG,QAAQ,OAAA,EAAS,CAAA;AAAA,IAExD,OAAA,CAAQ,aAAa,IAAA,oBACpBA,cAAA,CAAC,oBAAkB,GAAG,OAAA,CAAQ,SAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ;AAAA,GAAA,EAE7D;AAAA,CAAA,EAEJ,CACD;;;;"}
1
+ {"version":3,"file":"main.js","sources":["../src/empty-state/empty-state.tsx"],"sourcesContent":["import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\nimport { useCanvas26 } from '@mirohq/design-system-experiments'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n heading?: ReactNode\n description?: ReactNode\n illustration?: string\n actions?: {\n primary: ActionButton & {\n variant?: 'primary' | 'secondary'\n }\n secondary?: ActionButton\n }\n}\n\ntype BaseActionButtonProps = Omit<ButtonProps, 'children'> & {\n label: ReactNode\n}\n\ntype ActionButton = Omit<BaseActionButtonProps, 'variant'>\n\n// Styled\n// -----------------------------------------------------------------------------\nconst Container = styled(Box, {\n background: 'transparent',\n padding: '$500',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '304px',\n maxWidth: '480px',\n textAlign: 'center',\n alignItems: 'center',\n})\n\nconst Illustration = styled('img', {\n width: '72px',\n minHeight: '72px',\n display: 'block',\n marginBottom: '$150',\n})\n\nconst Description = styled(Box, {\n color: '$text-neutrals-subtle',\n marginTop: '$100',\n maxWidth: '304px',\n})\n\nconst Actions = styled(Box, {\n marginTop: '$150',\n paddingY: '$200',\n display: 'flex',\n flexDirection: 'column',\n gap: '$100',\n alignItems: 'center',\n})\n\nconst BaseActionButton = React.forwardRef<\n ElementRef<typeof Button>,\n BaseActionButtonProps\n>(({ label, ...actionProps }, ref) => (\n <Button ref={ref} {...actionProps}>\n {label}\n </Button>\n))\n\n// Component\n// -----------------------------------------------------------------------------\nexport const PatternEmptyState = React.forwardRef<\n ElementRef<typeof Box>,\n PatternEmptyStateProps\n>(({ heading, description, illustration, actions, ...restProps }, ref) => {\n const [isCanvas26] = useCanvas26()\n\n return (\n <Container ref={ref} {...restProps}>\n {illustration != null && !isCanvas26 && (\n <Illustration src={illustration} aria-hidden alt='' />\n )}\n {heading != null && (\n <Heading\n ref={ref}\n level={2}\n css={{ fontFamily: '$display', fontSize: '$350' }}\n >\n {heading}\n </Heading>\n )}\n {description != null && (\n <Description css={{ color: '$text-neutrals-subtle' }}>\n {description}\n </Description>\n )}\n {actions != null && (\n <Actions>\n <BaseActionButton variant='primary' {...actions.primary} />\n\n {actions.secondary != null && (\n <BaseActionButton {...actions.secondary} variant='ghost' />\n )}\n </Actions>\n )}\n </Container>\n )\n})\n"],"names":["styled","Box","Button","useCanvas26","jsxs","jsx","Heading"],"mappings":";;;;;;;;;;AAgCA,MAAM,SAAA,GAAYA,4BAAOC,mBAAA,EAAK;AAAA,EAC5B,UAAA,EAAY,aAAA;AAAA,EACZ,OAAA,EAAS,MAAA;AAAA,EACT,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,QAAA,EAAU,OAAA;AAAA,EACV,QAAA,EAAU,OAAA;AAAA,EACV,SAAA,EAAW,QAAA;AAAA,EACX,UAAA,EAAY;AACd,CAAC,CAAA;AAED,MAAM,YAAA,GAAeD,4BAAO,KAAA,EAAO;AAAA,EACjC,KAAA,EAAO,MAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,OAAA,EAAS,OAAA;AAAA,EACT,YAAA,EAAc;AAChB,CAAC,CAAA;AAED,MAAM,WAAA,GAAcA,4BAAOC,mBAAA,EAAK;AAAA,EAC9B,KAAA,EAAO,uBAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,MAAM,OAAA,GAAUD,4BAAOC,mBAAA,EAAK;AAAA,EAC1B,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU,MAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,GAAA,EAAK,MAAA;AAAA,EACL,UAAA,EAAY;AACd,CAAC,CAAA;AAED,MAAM,mBAAmB,KAAA,CAAM,UAAA,CAG7B,CAAC,EAAE,OAAO,GAAG,WAAA,EAAY,EAAG,GAAA,oCAC3BC,yBAAA,EAAA,EAAO,GAAA,EAAW,GAAG,WAAA,EACnB,iBACH,CACD,CAAA;AAIM,MAAM,iBAAA,GAAoB,KAAA,CAAM,UAAA,CAGrC,CAAC,EAAE,OAAA,EAAS,WAAA,EAAa,YAAA,EAAc,OAAA,EAAS,GAAG,SAAA,EAAU,EAAG,GAAA,KAAQ;AACxE,EAAA,MAAM,CAAC,UAAU,CAAA,GAAIC,mCAAA,EAAY;AAEjC,EAAA,uBACEC,eAAA,CAAC,SAAA,EAAA,EAAU,GAAA,EAAW,GAAG,SAAA,EACtB,QAAA,EAAA;AAAA,IAAA,YAAA,IAAgB,IAAA,IAAQ,CAAC,UAAA,oBACxBC,cAAA,CAAC,YAAA,EAAA,EAAa,KAAK,YAAA,EAAc,aAAA,EAAW,IAAA,EAAC,GAAA,EAAI,EAAA,EAAG,CAAA;AAAA,IAErD,WAAW,IAAA,oBACVA,cAAA;AAAA,MAACC,8BAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAA,EAAO,CAAA;AAAA,QACP,GAAA,EAAK,EAAE,UAAA,EAAY,UAAA,EAAY,UAAU,MAAA,EAAO;AAAA,QAE/C,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IAED,WAAA,IAAe,wBACdD,cAAA,CAAC,WAAA,EAAA,EAAY,KAAK,EAAE,KAAA,EAAO,uBAAA,EAAwB,EAChD,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,IAED,OAAA,IAAW,IAAA,oBACVD,eAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,gBAAA,EAAA,EAAiB,OAAA,EAAQ,SAAA,EAAW,GAAG,QAAQ,OAAA,EAAS,CAAA;AAAA,MAExD,OAAA,CAAQ,aAAa,IAAA,oBACpBA,cAAA,CAAC,oBAAkB,GAAG,OAAA,CAAQ,SAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ;AAAA,KAAA,EAE7D;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAC;;;;"}
package/dist/module.js CHANGED
@@ -4,6 +4,7 @@ import { styled } from '@mirohq/design-system-stitches';
4
4
  import { Box } from '@mirohq/design-system-box';
5
5
  import { Button } from '@mirohq/design-system-button';
6
6
  import { Heading } from '@mirohq/design-system-typography';
7
+ import { useCanvas26 } from '@mirohq/design-system-experiments';
7
8
 
8
9
  const Container = styled(Box, {
9
10
  background: "transparent",
@@ -35,15 +36,26 @@ const Actions = styled(Box, {
35
36
  alignItems: "center"
36
37
  });
37
38
  const BaseActionButton = React.forwardRef(({ label, ...actionProps }, ref) => /* @__PURE__ */ jsx(Button, { ref, ...actionProps, children: label }));
38
- const PatternEmptyState = React.forwardRef(({ heading, description, illustration, actions, ...restProps }, ref) => /* @__PURE__ */ jsxs(Container, { ref, ...restProps, children: [
39
- illustration != null && /* @__PURE__ */ jsx(Illustration, { src: illustration, "aria-hidden": true, alt: "" }),
40
- heading != null && /* @__PURE__ */ jsx(Heading, { ref, level: 2, styledAs: "h3", children: heading }),
41
- description != null && /* @__PURE__ */ jsx(Description, { css: { color: "$text-neutrals-subtle" }, children: description }),
42
- actions != null && /* @__PURE__ */ jsxs(Actions, { children: [
43
- /* @__PURE__ */ jsx(BaseActionButton, { variant: "primary", ...actions.primary }),
44
- actions.secondary != null && /* @__PURE__ */ jsx(BaseActionButton, { ...actions.secondary, variant: "ghost" })
45
- ] })
46
- ] }));
39
+ const PatternEmptyState = React.forwardRef(({ heading, description, illustration, actions, ...restProps }, ref) => {
40
+ const [isCanvas26] = useCanvas26();
41
+ return /* @__PURE__ */ jsxs(Container, { ref, ...restProps, children: [
42
+ illustration != null && !isCanvas26 && /* @__PURE__ */ jsx(Illustration, { src: illustration, "aria-hidden": true, alt: "" }),
43
+ heading != null && /* @__PURE__ */ jsx(
44
+ Heading,
45
+ {
46
+ ref,
47
+ level: 2,
48
+ css: { fontFamily: "$display", fontSize: "$350" },
49
+ children: heading
50
+ }
51
+ ),
52
+ description != null && /* @__PURE__ */ jsx(Description, { css: { color: "$text-neutrals-subtle" }, children: description }),
53
+ actions != null && /* @__PURE__ */ jsxs(Actions, { children: [
54
+ /* @__PURE__ */ jsx(BaseActionButton, { variant: "primary", ...actions.primary }),
55
+ actions.secondary != null && /* @__PURE__ */ jsx(BaseActionButton, { ...actions.secondary, variant: "ghost" })
56
+ ] })
57
+ ] });
58
+ });
47
59
 
48
60
  export { PatternEmptyState };
49
61
  //# sourceMappingURL=module.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/empty-state/empty-state.tsx"],"sourcesContent":["import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n heading?: ReactNode\n description?: ReactNode\n illustration?: string\n actions?: {\n primary: ActionButton & {\n variant?: 'primary' | 'secondary'\n }\n secondary?: ActionButton\n }\n}\n\ntype BaseActionButtonProps = Omit<ButtonProps, 'children'> & {\n label: ReactNode\n}\n\ntype ActionButton = Omit<BaseActionButtonProps, 'variant'>\n\n// Styled\n// -----------------------------------------------------------------------------\nconst Container = styled(Box, {\n background: 'transparent',\n padding: '$500',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '304px',\n maxWidth: '480px',\n textAlign: 'center',\n alignItems: 'center',\n})\n\nconst Illustration = styled('img', {\n width: '72px',\n minHeight: '72px',\n display: 'block',\n marginBottom: '$150',\n})\n\nconst Description = styled(Box, {\n color: '$text-neutrals-subtle',\n marginTop: '$100',\n maxWidth: '304px',\n})\n\nconst Actions = styled(Box, {\n marginTop: '$150',\n paddingY: '$200',\n display: 'flex',\n flexDirection: 'column',\n gap: '$100',\n alignItems: 'center',\n})\n\nconst BaseActionButton = React.forwardRef<\n ElementRef<typeof Button>,\n BaseActionButtonProps\n>(({ label, ...actionProps }, ref) => (\n <Button ref={ref} {...actionProps}>\n {label}\n </Button>\n))\n\n// Component\n// -----------------------------------------------------------------------------\nexport const PatternEmptyState = React.forwardRef<\n ElementRef<typeof Box>,\n PatternEmptyStateProps\n>(({ heading, description, illustration, actions, ...restProps }, ref) => (\n <Container ref={ref} {...restProps}>\n {illustration != null && (\n <Illustration src={illustration} aria-hidden alt='' />\n )}\n {heading != null && (\n <Heading ref={ref} level={2} styledAs='h3'>\n {heading}\n </Heading>\n )}\n {description != null && (\n <Description css={{ color: '$text-neutrals-subtle' }}>\n {description}\n </Description>\n )}\n {actions != null && (\n <Actions>\n <BaseActionButton variant='primary' {...actions.primary} />\n\n {actions.secondary != null && (\n <BaseActionButton {...actions.secondary} variant='ghost' />\n )}\n </Actions>\n )}\n </Container>\n))\n"],"names":[],"mappings":";;;;;;;AA+BA,MAAM,SAAA,GAAY,OAAO,GAAA,EAAK;AAAA,EAC5B,UAAA,EAAY,aAAA;AAAA,EACZ,OAAA,EAAS,MAAA;AAAA,EACT,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,QAAA,EAAU,OAAA;AAAA,EACV,QAAA,EAAU,OAAA;AAAA,EACV,SAAA,EAAW,QAAA;AAAA,EACX,UAAA,EAAY;AACd,CAAC,CAAA;AAED,MAAM,YAAA,GAAe,OAAO,KAAA,EAAO;AAAA,EACjC,KAAA,EAAO,MAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,OAAA,EAAS,OAAA;AAAA,EACT,YAAA,EAAc;AAChB,CAAC,CAAA;AAED,MAAM,WAAA,GAAc,OAAO,GAAA,EAAK;AAAA,EAC9B,KAAA,EAAO,uBAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,MAAM,OAAA,GAAU,OAAO,GAAA,EAAK;AAAA,EAC1B,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU,MAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,GAAA,EAAK,MAAA;AAAA,EACL,UAAA,EAAY;AACd,CAAC,CAAA;AAED,MAAM,mBAAmB,KAAA,CAAM,UAAA,CAG7B,CAAC,EAAE,OAAO,GAAG,WAAA,EAAY,EAAG,GAAA,yBAC3B,MAAA,EAAA,EAAO,GAAA,EAAW,GAAG,WAAA,EACnB,iBACH,CACD,CAAA;AAIM,MAAM,oBAAoB,KAAA,CAAM,UAAA,CAGrC,CAAC,EAAE,SAAS,WAAA,EAAa,YAAA,EAAc,OAAA,EAAS,GAAG,WAAU,EAAG,GAAA,0BAC/D,SAAA,EAAA,EAAU,GAAA,EAAW,GAAG,SAAA,EACtB,QAAA,EAAA;AAAA,EAAA,YAAA,IAAgB,IAAA,wBACd,YAAA,EAAA,EAAa,GAAA,EAAK,cAAc,aAAA,EAAW,IAAA,EAAC,KAAI,EAAA,EAAG,CAAA;AAAA,EAErD,OAAA,IAAW,wBACV,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAU,KAAA,EAAO,CAAA,EAAG,QAAA,EAAS,IAAA,EACnC,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,EAED,WAAA,IAAe,wBACd,GAAA,CAAC,WAAA,EAAA,EAAY,KAAK,EAAE,KAAA,EAAO,uBAAA,EAAwB,EAChD,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,EAED,OAAA,IAAW,IAAA,oBACV,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,OAAA,EAAQ,SAAA,EAAW,GAAG,QAAQ,OAAA,EAAS,CAAA;AAAA,IAExD,OAAA,CAAQ,aAAa,IAAA,oBACpB,GAAA,CAAC,oBAAkB,GAAG,OAAA,CAAQ,SAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ;AAAA,GAAA,EAE7D;AAAA,CAAA,EAEJ,CACD;;;;"}
1
+ {"version":3,"file":"module.js","sources":["../src/empty-state/empty-state.tsx"],"sourcesContent":["import React from 'react'\nimport type { ReactNode, ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Box } from '@mirohq/design-system-box'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport type { BoxProps } from '@mirohq/design-system-box'\nimport { Heading } from '@mirohq/design-system-typography'\nimport { useCanvas26 } from '@mirohq/design-system-experiments'\n\n// Types\n// -----------------------------------------------------------------------------\nexport interface PatternEmptyStateProps extends Omit<BoxProps, 'children'> {\n heading?: ReactNode\n description?: ReactNode\n illustration?: string\n actions?: {\n primary: ActionButton & {\n variant?: 'primary' | 'secondary'\n }\n secondary?: ActionButton\n }\n}\n\ntype BaseActionButtonProps = Omit<ButtonProps, 'children'> & {\n label: ReactNode\n}\n\ntype ActionButton = Omit<BaseActionButtonProps, 'variant'>\n\n// Styled\n// -----------------------------------------------------------------------------\nconst Container = styled(Box, {\n background: 'transparent',\n padding: '$500',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '304px',\n maxWidth: '480px',\n textAlign: 'center',\n alignItems: 'center',\n})\n\nconst Illustration = styled('img', {\n width: '72px',\n minHeight: '72px',\n display: 'block',\n marginBottom: '$150',\n})\n\nconst Description = styled(Box, {\n color: '$text-neutrals-subtle',\n marginTop: '$100',\n maxWidth: '304px',\n})\n\nconst Actions = styled(Box, {\n marginTop: '$150',\n paddingY: '$200',\n display: 'flex',\n flexDirection: 'column',\n gap: '$100',\n alignItems: 'center',\n})\n\nconst BaseActionButton = React.forwardRef<\n ElementRef<typeof Button>,\n BaseActionButtonProps\n>(({ label, ...actionProps }, ref) => (\n <Button ref={ref} {...actionProps}>\n {label}\n </Button>\n))\n\n// Component\n// -----------------------------------------------------------------------------\nexport const PatternEmptyState = React.forwardRef<\n ElementRef<typeof Box>,\n PatternEmptyStateProps\n>(({ heading, description, illustration, actions, ...restProps }, ref) => {\n const [isCanvas26] = useCanvas26()\n\n return (\n <Container ref={ref} {...restProps}>\n {illustration != null && !isCanvas26 && (\n <Illustration src={illustration} aria-hidden alt='' />\n )}\n {heading != null && (\n <Heading\n ref={ref}\n level={2}\n css={{ fontFamily: '$display', fontSize: '$350' }}\n >\n {heading}\n </Heading>\n )}\n {description != null && (\n <Description css={{ color: '$text-neutrals-subtle' }}>\n {description}\n </Description>\n )}\n {actions != null && (\n <Actions>\n <BaseActionButton variant='primary' {...actions.primary} />\n\n {actions.secondary != null && (\n <BaseActionButton {...actions.secondary} variant='ghost' />\n )}\n </Actions>\n )}\n </Container>\n )\n})\n"],"names":[],"mappings":";;;;;;;;AAgCA,MAAM,SAAA,GAAY,OAAO,GAAA,EAAK;AAAA,EAC5B,UAAA,EAAY,aAAA;AAAA,EACZ,OAAA,EAAS,MAAA;AAAA,EACT,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,QAAA,EAAU,OAAA;AAAA,EACV,QAAA,EAAU,OAAA;AAAA,EACV,SAAA,EAAW,QAAA;AAAA,EACX,UAAA,EAAY;AACd,CAAC,CAAA;AAED,MAAM,YAAA,GAAe,OAAO,KAAA,EAAO;AAAA,EACjC,KAAA,EAAO,MAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,OAAA,EAAS,OAAA;AAAA,EACT,YAAA,EAAc;AAChB,CAAC,CAAA;AAED,MAAM,WAAA,GAAc,OAAO,GAAA,EAAK;AAAA,EAC9B,KAAA,EAAO,uBAAA;AAAA,EACP,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,MAAM,OAAA,GAAU,OAAO,GAAA,EAAK;AAAA,EAC1B,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU,MAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,GAAA,EAAK,MAAA;AAAA,EACL,UAAA,EAAY;AACd,CAAC,CAAA;AAED,MAAM,mBAAmB,KAAA,CAAM,UAAA,CAG7B,CAAC,EAAE,OAAO,GAAG,WAAA,EAAY,EAAG,GAAA,yBAC3B,MAAA,EAAA,EAAO,GAAA,EAAW,GAAG,WAAA,EACnB,iBACH,CACD,CAAA;AAIM,MAAM,iBAAA,GAAoB,KAAA,CAAM,UAAA,CAGrC,CAAC,EAAE,OAAA,EAAS,WAAA,EAAa,YAAA,EAAc,OAAA,EAAS,GAAG,SAAA,EAAU,EAAG,GAAA,KAAQ;AACxE,EAAA,MAAM,CAAC,UAAU,CAAA,GAAI,WAAA,EAAY;AAEjC,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAU,GAAA,EAAW,GAAG,SAAA,EACtB,QAAA,EAAA;AAAA,IAAA,YAAA,IAAgB,IAAA,IAAQ,CAAC,UAAA,oBACxB,GAAA,CAAC,YAAA,EAAA,EAAa,KAAK,YAAA,EAAc,aAAA,EAAW,IAAA,EAAC,GAAA,EAAI,EAAA,EAAG,CAAA;AAAA,IAErD,WAAW,IAAA,oBACV,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAA,EAAO,CAAA;AAAA,QACP,GAAA,EAAK,EAAE,UAAA,EAAY,UAAA,EAAY,UAAU,MAAA,EAAO;AAAA,QAE/C,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IAED,WAAA,IAAe,wBACd,GAAA,CAAC,WAAA,EAAA,EAAY,KAAK,EAAE,KAAA,EAAO,uBAAA,EAAwB,EAChD,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,IAED,OAAA,IAAW,IAAA,oBACV,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,OAAA,EAAQ,SAAA,EAAW,GAAG,QAAQ,OAAA,EAAS,CAAA;AAAA,MAExD,OAAA,CAAQ,aAAa,IAAA,oBACpB,GAAA,CAAC,oBAAkB,GAAG,OAAA,CAAQ,SAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ;AAAA,KAAA,EAE7D;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAC;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-patterns",
3
- "version": "1.2.27",
3
+ "version": "1.3.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,10 +26,11 @@
26
26
  "react": "^16.14 || ^17 || ^18 || ^19"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-box": "^3.2.22",
30
- "@mirohq/design-system-stitches": "^3.3.20",
31
- "@mirohq/design-system-typography": "^1.3.22",
32
- "@mirohq/design-system-button": "^5.3.0"
29
+ "@mirohq/design-system-box": "^3.2.23",
30
+ "@mirohq/design-system-button": "^5.3.1",
31
+ "@mirohq/design-system-experiments": "^1.1.0",
32
+ "@mirohq/design-system-typography": "^1.3.23",
33
+ "@mirohq/design-system-stitches": "^3.3.21"
33
34
  },
34
35
  "devDependencies": {
35
36
  "@mirohq/brand-assets": "^1.1.1"