@mirohq/design-system-callout 1.1.1 → 1.2.0

package/dist/main.js

@@ -124,11 +124,11 @@ const IconSlot = React__default["default"].forwardRef(({ children, ...restProps
   return /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { ...restProps, ref: forwardRef, variant, children: formattedChildren });
 });
 
-const Title = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(designSystemTypography.Heading, { ...props, ref: forwardRef, level: 4 }));
-
-const StyledTitle = designSystemStitches.styled(Title, {
-  lineHeight: "$300"
-});
+const StyledTitle = designSystemStitches.styled(designSystemTypography.Heading, { lineHeight: "$300" });
+const Title = React__default["default"].forwardRef(
+  ({ level = 4, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledTitle, { ...props, ref: forwardRef, level, styledAs: "h4" })
+);
+Title.displayName = "Callout.Title";
 
 const Actions = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   gridColumn: "content",
@@ -138,8 +138,13 @@ const Actions = designSystemStitches.styled(designSystemPrimitive.Primitive.div,
 });
 Actions.displayName = "Callout.Actions";
 
+const StyledDismissButton = designSystemStitches.styled(designSystemIconButton.IconButton, {
+  position: "absolute",
+  right: "$50",
+  top: "$50"
+});
 const DismissButton = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-  designSystemIconButton.IconButton,
+  StyledDismissButton,
   {
     variant: "ghost",
     size: "medium",
@@ -148,12 +153,7 @@ const DismissButton = (props) => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
   }
 );
-
-const StyledDismissButton = designSystemStitches.styled(DismissButton, {
-  position: "absolute",
-  right: "$50",
-  top: "$50"
-});
+DismissButton.displayName = "Callout.DismissButton";
 
 const Callout = React__default["default"].forwardRef(
   ({
@@ -186,7 +186,7 @@ const Callout = React__default["default"].forwardRef(
         children: [
           children,
           dismissible && onDismiss != null && (dismissLabel == null ? void 0 : dismissLabel.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            StyledDismissButton,
+            DismissButton,
             {
               "aria-label": dismissLabel,
               onPress: handleDismissed
@@ -200,7 +200,7 @@ const Callout = React__default["default"].forwardRef(
 Callout.Content = Content;
 Callout.Description = Description;
 Callout.IconSlot = IconSlot;
-Callout.Title = StyledTitle;
+Callout.Title = Title;
 Callout.Actions = Actions;
 
 exports.Callout = Callout;

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/callout.styled.tsx","../src/partials/content.tsx","../src/partials/description.tsx","../src/hooks/use-callout-context.tsx","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/title.tsx","../src/partials/title-styled.ts","../src/partials/actions.tsx","../src/partials/dismiss-button.tsx","../src/partials/dismiss-button-styled.ts","../src/callout.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledCallout = styled(Primitive.div, {\n  position: 'relative',\n  gap: '$150',\n  padding: '$200',\n  borderWidth: '$sm',\n  borderStyle: 'solid',\n  borderRadius: '$75',\n  display: 'grid',\n  justifyContent: 'center',\n  gridTemplateColumns: 'auto 1fr',\n  gridTemplateAreas: `'icon content'`,\n  variants: {\n    variant: {\n      information: {\n        backgroundColor: '$background-primary-subtle',\n        borderColor: '$border-primary-subtle',\n      },\n      warning: {\n        backgroundColor: '$background-warning-subtle',\n        borderColor: '$border-warning-subtle',\n      },\n      danger: {\n        backgroundColor: '$background-danger-subtle',\n        borderColor: '$border-danger-subtle',\n      },\n      success: {\n        backgroundColor: '$background-success-subtle',\n        borderColor: '$border-success-subtle',\n      },\n    },\n    dismissible: {\n      true: {\n        padding: '$200 $400 $200 $200',\n      },\n      false: {\n        gridTemplateColumns: 'auto 1fr',\n        gridTemplateAreas: `'icon content'`,\n      },\n    },\n  },\n})\n\nexport type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Content = styled(Primitive.div, {\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '$25',\n  maxWidth: '48em',\n  gridArea: 'content',\n})\n\nContent.displayName = 'Callout.Content'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Description = styled(Primitive.div, {\n  color: '$text-neutrals',\n  fontSize: '$175',\n  lineHeight: '$400',\n  marginTop: '$25',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { createContext, useContext } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n  variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport interface CalloutProviderProps extends CalloutContextProps {\n  children: React.ReactNode\n}\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n  children,\n  ...restProps\n}: CalloutProviderProps): JSX.Element => (\n  <CalloutContext.Provider\n    value={{\n      ...restProps,\n    }}\n  >\n    {children}\n  </CalloutContext.Provider>\n)\n\nexport const useCalloutContext = (): CalloutContextProps =>\n  useContext(CalloutContext)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n  variants: {\n    variant: {\n      information: {\n        color: '$icon-primary',\n      },\n      warning: {\n        color: '$icon-warning',\n      },\n      danger: {\n        color: '$icon-danger',\n      },\n      success: {\n        color: '$icon-success',\n      },\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport {\n  IconCheckMark,\n  IconExclamationPointCircle,\n  IconInformationMarkCircle,\n} from '@mirohq/design-system-icons'\n\nimport { useCalloutContext } from '../hooks/use-callout-context'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children?: React.ReactNode\n}\n\nconst iconVariant = {\n  success: <IconCheckMark />,\n  warning: <IconExclamationPointCircle />,\n  danger: <IconExclamationPointCircle />,\n  information: <IconInformationMarkCircle />,\n  default: <IconCheckMark />,\n}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { variant } = useCalloutContext()\n\n  let formattedChildren = children\n  if (React.Children.count(children) < 1) {\n    formattedChildren =\n      iconVariant[variant as keyof typeof iconVariant] ?? iconVariant.default\n  }\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Heading } from '@mirohq/design-system-typography'\nimport type { HeadingProps } from '@mirohq/design-system-typography'\n\nexport interface GroupLabelProps extends Omit<HeadingProps, 'level'> {}\n\nexport const Title = React.forwardRef<\n  ElementRef<typeof Heading>,\n  GroupLabelProps\n>((props, forwardRef) => <Heading {...props} ref={forwardRef} level={4} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Title } from './title'\n\nexport const StyledTitle = styled(Title, {\n  lineHeight: '$300',\n})\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Actions = styled(Primitive.div, {\n  gridColumn: 'content',\n  gridRow: -1,\n  display: 'flex',\n  gap: '$100',\n})\n\nActions.displayName = 'Callout.Actions'\n","import { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nexport const DismissButton = (props: IconButtonProps): React.ReactNode => (\n  <IconButton\n    variant='ghost'\n    size='medium'\n    data-testid='dismiss-button'\n    {...props}\n  >\n    <IconCross />\n  </IconButton>\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { DismissButton } from './dismiss-button'\n\nexport const StyledDismissButton = styled(DismissButton, {\n  position: 'absolute',\n  right: '$50',\n  top: '$50',\n})\n","import React, { useState } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledCallout } from './callout.styled'\nimport type { StyledCalloutProps } from './callout.styled'\nimport { Content } from './partials/content'\nimport { Description } from './partials/description'\nimport { IconSlot } from './partials/icon-slot'\nimport { StyledTitle } from './partials/title-styled'\nimport { Actions } from './partials/actions'\nimport { CalloutProvider } from './hooks/use-callout-context'\nimport { StyledDismissButton } from './partials/dismiss-button-styled'\n\ninterface DismissibleProps {\n  /**\n   * Whether or not the component is dismissed (hidden)\n   */\n  dismissed?: boolean\n\n  /**\n   * Callback invoked once dismiss button is clicked\n   */\n  onDismiss?: () => void\n\n  /**\n   * aria-label for the dismiss button\n   */\n  dismissLabel: string\n}\n\nexport type CalloutProps = (Omit<StyledCalloutProps, 'dismissible'> & {\n  /**\n   * Change the component style.\n   */\n  variant: StyledCalloutProps['variant']\n\n  /**\n   * Whether or not the component should display dismiss button\n   * @default true\n   */\n  dismissible?: boolean\n}) &\n  (\n    | DismissibleProps // uncontrolled\n    | Required<DismissibleProps> // controlled\n    | ({ dismissible?: false } & { [K in keyof DismissibleProps]?: never })\n  )\n\nexport const Callout = React.forwardRef<\n  ElementRef<typeof StyledCallout>,\n  CalloutProps\n>(\n  (\n    {\n      dismissed,\n      dismissible = true,\n      onDismiss,\n      dismissLabel,\n      children,\n      variant,\n      ...props\n    },\n    forwardRef\n  ) => {\n    const [internalDismissed, setInternalDismissed] = useState<boolean>(\n      dismissed ?? false\n    )\n\n    if (dismissed ?? internalDismissed) {\n      return null\n    }\n\n    const handleDismissed = (): void => {\n      setInternalDismissed(true)\n      onDismiss?.()\n    }\n\n    return (\n      <CalloutProvider variant={variant}>\n        <StyledCallout\n          {...props}\n          ref={forwardRef}\n          variant={variant}\n          dismissible={dismissible}\n          role='alert'\n        >\n          {children}\n          {dismissible && onDismiss != null && dismissLabel?.length > 0 && (\n            <StyledDismissButton\n              aria-label={dismissLabel}\n              onPress={handleDismissed}\n            />\n          )}\n        </StyledCallout>\n      </CalloutProvider>\n    )\n  }\n) as ForwardRefExoticComponent<CalloutProps> & Partials\n\nexport interface Partials {\n  Content: typeof Content\n  Description: typeof Description\n  IconSlot: typeof IconSlot\n  Title: typeof StyledTitle\n  Actions: typeof Actions\n}\n\nCallout.Content = Content\nCallout.Description = Description\nCallout.IconSlot = IconSlot\nCallout.Title = StyledTitle\nCallout.Actions = Actions\n"],"names":["styled","Primitive","createContext","jsx","useContext","IconCheckMark","IconExclamationPointCircle","IconInformationMarkCircle","React","Heading","IconButton","IconCross","useState","jsxs"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/callout.styled.tsx","../src/partials/content.tsx","../src/partials/description.tsx","../src/hooks/use-callout-context.tsx","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/title.tsx","../src/partials/actions.tsx","../src/partials/dismiss-button.tsx","../src/callout.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledCallout = styled(Primitive.div, {\n  position: 'relative',\n  gap: '$150',\n  padding: '$200',\n  borderWidth: '$sm',\n  borderStyle: 'solid',\n  borderRadius: '$75',\n  display: 'grid',\n  justifyContent: 'center',\n  gridTemplateColumns: 'auto 1fr',\n  gridTemplateAreas: `'icon content'`,\n  variants: {\n    variant: {\n      information: {\n        backgroundColor: '$background-primary-subtle',\n        borderColor: '$border-primary-subtle',\n      },\n      warning: {\n        backgroundColor: '$background-warning-subtle',\n        borderColor: '$border-warning-subtle',\n      },\n      danger: {\n        backgroundColor: '$background-danger-subtle',\n        borderColor: '$border-danger-subtle',\n      },\n      success: {\n        backgroundColor: '$background-success-subtle',\n        borderColor: '$border-success-subtle',\n      },\n    },\n    dismissible: {\n      true: {\n        padding: '$200 $400 $200 $200',\n      },\n      false: {\n        gridTemplateColumns: 'auto 1fr',\n        gridTemplateAreas: `'icon content'`,\n      },\n    },\n  },\n})\n\nexport type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Content = styled(Primitive.div, {\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '$25',\n  maxWidth: '48em',\n  gridArea: 'content',\n})\n\nContent.displayName = 'Callout.Content'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Description = styled(Primitive.div, {\n  color: '$text-neutrals',\n  fontSize: '$175',\n  lineHeight: '$400',\n  marginTop: '$25',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { createContext, useContext } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n  variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport interface CalloutProviderProps extends CalloutContextProps {\n  children: React.ReactNode\n}\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n  children,\n  ...restProps\n}: CalloutProviderProps): JSX.Element => (\n  <CalloutContext.Provider\n    value={{\n      ...restProps,\n    }}\n  >\n    {children}\n  </CalloutContext.Provider>\n)\n\nexport const useCalloutContext = (): CalloutContextProps =>\n  useContext(CalloutContext)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n  variants: {\n    variant: {\n      information: {\n        color: '$icon-primary',\n      },\n      warning: {\n        color: '$icon-warning',\n      },\n      danger: {\n        color: '$icon-danger',\n      },\n      success: {\n        color: '$icon-success',\n      },\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport {\n  IconCheckMark,\n  IconExclamationPointCircle,\n  IconInformationMarkCircle,\n} from '@mirohq/design-system-icons'\n\nimport { useCalloutContext } from '../hooks/use-callout-context'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children?: React.ReactNode\n}\n\nconst iconVariant = {\n  success: <IconCheckMark />,\n  warning: <IconExclamationPointCircle />,\n  danger: <IconExclamationPointCircle />,\n  information: <IconInformationMarkCircle />,\n  default: <IconCheckMark />,\n}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { variant } = useCalloutContext()\n\n  let formattedChildren = children\n  if (React.Children.count(children) < 1) {\n    formattedChildren =\n      iconVariant[variant as keyof typeof iconVariant] ?? iconVariant.default\n  }\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Heading } from '@mirohq/design-system-typography'\nimport type { HeadingProps } from '@mirohq/design-system-typography'\n\nconst StyledTitle = styled(Heading, { lineHeight: '$300' })\n\nexport interface TitleProps extends Omit<HeadingProps, 'level' | 'styledAs'> {\n  level?: HeadingProps['level']\n}\n\nexport const Title = React.forwardRef<ElementRef<typeof Heading>, TitleProps>(\n  ({ level = 4, ...props }, forwardRef) => (\n    <StyledTitle {...props} ref={forwardRef} level={level} styledAs='h4' />\n  )\n)\n\nTitle.displayName = 'Callout.Title'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Actions = styled(Primitive.div, {\n  gridColumn: 'content',\n  gridRow: -1,\n  display: 'flex',\n  gap: '$100',\n})\n\nActions.displayName = 'Callout.Actions'\n","import { styled } from '@mirohq/design-system-stitches'\nimport { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nconst StyledDismissButton = styled(IconButton, {\n  position: 'absolute',\n  right: '$50',\n  top: '$50',\n})\n\nexport const DismissButton = (props: IconButtonProps): React.ReactNode => (\n  <StyledDismissButton\n    variant='ghost'\n    size='medium'\n    data-testid='dismiss-button'\n    {...props}\n  >\n    <IconCross />\n  </StyledDismissButton>\n)\n\nDismissButton.displayName = 'Callout.DismissButton'\n","import React, { useState } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledCallout } from './callout.styled'\nimport type { StyledCalloutProps } from './callout.styled'\nimport { Content } from './partials/content'\nimport { Description } from './partials/description'\nimport { IconSlot } from './partials/icon-slot'\nimport { Title } from './partials/title'\nimport { Actions } from './partials/actions'\nimport { CalloutProvider } from './hooks/use-callout-context'\nimport { DismissButton } from './partials/dismiss-button'\n\ninterface DismissibleProps {\n  /**\n   * Whether or not the component is dismissed (hidden)\n   */\n  dismissed?: boolean\n\n  /**\n   * Callback invoked once dismiss button is clicked\n   */\n  onDismiss?: () => void\n\n  /**\n   * aria-label for the dismiss button\n   */\n  dismissLabel: string\n}\n\nexport type CalloutProps = (Omit<StyledCalloutProps, 'dismissible'> & {\n  /**\n   * Change the component style.\n   */\n  variant: StyledCalloutProps['variant']\n\n  /**\n   * Whether or not the component should display dismiss button\n   * @default true\n   */\n  dismissible?: boolean\n}) &\n  (\n    | DismissibleProps // uncontrolled\n    | Required<DismissibleProps> // controlled\n    | ({ dismissible?: false } & { [K in keyof DismissibleProps]?: never })\n  )\n\nexport const Callout = React.forwardRef<\n  ElementRef<typeof StyledCallout>,\n  CalloutProps\n>(\n  (\n    {\n      dismissed,\n      dismissible = true,\n      onDismiss,\n      dismissLabel,\n      children,\n      variant,\n      ...props\n    },\n    forwardRef\n  ) => {\n    const [internalDismissed, setInternalDismissed] = useState<boolean>(\n      dismissed ?? false\n    )\n\n    if (dismissed ?? internalDismissed) {\n      return null\n    }\n\n    const handleDismissed = (): void => {\n      setInternalDismissed(true)\n      onDismiss?.()\n    }\n\n    return (\n      <CalloutProvider variant={variant}>\n        <StyledCallout\n          {...props}\n          ref={forwardRef}\n          variant={variant}\n          dismissible={dismissible}\n          role='alert'\n        >\n          {children}\n          {dismissible && onDismiss != null && dismissLabel?.length > 0 && (\n            <DismissButton\n              aria-label={dismissLabel}\n              onPress={handleDismissed}\n            />\n          )}\n        </StyledCallout>\n      </CalloutProvider>\n    )\n  }\n) as ForwardRefExoticComponent<CalloutProps> & Partials\n\nexport interface Partials {\n  Content: typeof Content\n  Description: typeof Description\n  IconSlot: typeof IconSlot\n  Title: typeof Title\n  Actions: typeof Actions\n}\n\nCallout.Content = Content\nCallout.Description = Description\nCallout.IconSlot = IconSlot\nCallout.Title = Title\nCallout.Actions = Actions\n"],"names":["styled","Primitive","createContext","jsx","useContext","IconCheckMark","IconExclamationPointCircle","IconInformationMarkCircle","React","Heading","IconButton","IconCross","useState","jsxs"],"mappings":"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"}

package/dist/module.js

@@ -116,11 +116,11 @@ const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
   return /* @__PURE__ */ jsx(StyledIconSlot, { ...restProps, ref: forwardRef, variant, children: formattedChildren });
 });
 
-const Title = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(Heading, { ...props, ref: forwardRef, level: 4 }));
-
-const StyledTitle = styled(Title, {
-  lineHeight: "$300"
-});
+const StyledTitle = styled(Heading, { lineHeight: "$300" });
+const Title = React.forwardRef(
+  ({ level = 4, ...props }, forwardRef) => /* @__PURE__ */ jsx(StyledTitle, { ...props, ref: forwardRef, level, styledAs: "h4" })
+);
+Title.displayName = "Callout.Title";
 
 const Actions = styled(Primitive.div, {
   gridColumn: "content",
@@ -130,8 +130,13 @@ const Actions = styled(Primitive.div, {
 });
 Actions.displayName = "Callout.Actions";
 
+const StyledDismissButton = styled(IconButton, {
+  position: "absolute",
+  right: "$50",
+  top: "$50"
+});
 const DismissButton = (props) => /* @__PURE__ */ jsx(
-  IconButton,
+  StyledDismissButton,
   {
     variant: "ghost",
     size: "medium",
@@ -140,12 +145,7 @@ const DismissButton = (props) => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx(IconCross, {})
   }
 );
-
-const StyledDismissButton = styled(DismissButton, {
-  position: "absolute",
-  right: "$50",
-  top: "$50"
-});
+DismissButton.displayName = "Callout.DismissButton";
 
 const Callout = React.forwardRef(
   ({
@@ -178,7 +178,7 @@ const Callout = React.forwardRef(
         children: [
           children,
           dismissible && onDismiss != null && (dismissLabel == null ? void 0 : dismissLabel.length) > 0 && /* @__PURE__ */ jsx(
-            StyledDismissButton,
+            DismissButton,
             {
               "aria-label": dismissLabel,
               onPress: handleDismissed
@@ -192,7 +192,7 @@ const Callout = React.forwardRef(
 Callout.Content = Content;
 Callout.Description = Description;
 Callout.IconSlot = IconSlot;
-Callout.Title = StyledTitle;
+Callout.Title = Title;
 Callout.Actions = Actions;
 
 export { Callout };

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/callout.styled.tsx","../src/partials/content.tsx","../src/partials/description.tsx","../src/hooks/use-callout-context.tsx","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/title.tsx","../src/partials/title-styled.ts","../src/partials/actions.tsx","../src/partials/dismiss-button.tsx","../src/partials/dismiss-button-styled.ts","../src/callout.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledCallout = styled(Primitive.div, {\n  position: 'relative',\n  gap: '$150',\n  padding: '$200',\n  borderWidth: '$sm',\n  borderStyle: 'solid',\n  borderRadius: '$75',\n  display: 'grid',\n  justifyContent: 'center',\n  gridTemplateColumns: 'auto 1fr',\n  gridTemplateAreas: `'icon content'`,\n  variants: {\n    variant: {\n      information: {\n        backgroundColor: '$background-primary-subtle',\n        borderColor: '$border-primary-subtle',\n      },\n      warning: {\n        backgroundColor: '$background-warning-subtle',\n        borderColor: '$border-warning-subtle',\n      },\n      danger: {\n        backgroundColor: '$background-danger-subtle',\n        borderColor: '$border-danger-subtle',\n      },\n      success: {\n        backgroundColor: '$background-success-subtle',\n        borderColor: '$border-success-subtle',\n      },\n    },\n    dismissible: {\n      true: {\n        padding: '$200 $400 $200 $200',\n      },\n      false: {\n        gridTemplateColumns: 'auto 1fr',\n        gridTemplateAreas: `'icon content'`,\n      },\n    },\n  },\n})\n\nexport type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Content = styled(Primitive.div, {\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '$25',\n  maxWidth: '48em',\n  gridArea: 'content',\n})\n\nContent.displayName = 'Callout.Content'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Description = styled(Primitive.div, {\n  color: '$text-neutrals',\n  fontSize: '$175',\n  lineHeight: '$400',\n  marginTop: '$25',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { createContext, useContext } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n  variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport interface CalloutProviderProps extends CalloutContextProps {\n  children: React.ReactNode\n}\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n  children,\n  ...restProps\n}: CalloutProviderProps): JSX.Element => (\n  <CalloutContext.Provider\n    value={{\n      ...restProps,\n    }}\n  >\n    {children}\n  </CalloutContext.Provider>\n)\n\nexport const useCalloutContext = (): CalloutContextProps =>\n  useContext(CalloutContext)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n  variants: {\n    variant: {\n      information: {\n        color: '$icon-primary',\n      },\n      warning: {\n        color: '$icon-warning',\n      },\n      danger: {\n        color: '$icon-danger',\n      },\n      success: {\n        color: '$icon-success',\n      },\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport {\n  IconCheckMark,\n  IconExclamationPointCircle,\n  IconInformationMarkCircle,\n} from '@mirohq/design-system-icons'\n\nimport { useCalloutContext } from '../hooks/use-callout-context'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children?: React.ReactNode\n}\n\nconst iconVariant = {\n  success: <IconCheckMark />,\n  warning: <IconExclamationPointCircle />,\n  danger: <IconExclamationPointCircle />,\n  information: <IconInformationMarkCircle />,\n  default: <IconCheckMark />,\n}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { variant } = useCalloutContext()\n\n  let formattedChildren = children\n  if (React.Children.count(children) < 1) {\n    formattedChildren =\n      iconVariant[variant as keyof typeof iconVariant] ?? iconVariant.default\n  }\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Heading } from '@mirohq/design-system-typography'\nimport type { HeadingProps } from '@mirohq/design-system-typography'\n\nexport interface GroupLabelProps extends Omit<HeadingProps, 'level'> {}\n\nexport const Title = React.forwardRef<\n  ElementRef<typeof Heading>,\n  GroupLabelProps\n>((props, forwardRef) => <Heading {...props} ref={forwardRef} level={4} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Title } from './title'\n\nexport const StyledTitle = styled(Title, {\n  lineHeight: '$300',\n})\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Actions = styled(Primitive.div, {\n  gridColumn: 'content',\n  gridRow: -1,\n  display: 'flex',\n  gap: '$100',\n})\n\nActions.displayName = 'Callout.Actions'\n","import { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nexport const DismissButton = (props: IconButtonProps): React.ReactNode => (\n  <IconButton\n    variant='ghost'\n    size='medium'\n    data-testid='dismiss-button'\n    {...props}\n  >\n    <IconCross />\n  </IconButton>\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { DismissButton } from './dismiss-button'\n\nexport const StyledDismissButton = styled(DismissButton, {\n  position: 'absolute',\n  right: '$50',\n  top: '$50',\n})\n","import React, { useState } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledCallout } from './callout.styled'\nimport type { StyledCalloutProps } from './callout.styled'\nimport { Content } from './partials/content'\nimport { Description } from './partials/description'\nimport { IconSlot } from './partials/icon-slot'\nimport { StyledTitle } from './partials/title-styled'\nimport { Actions } from './partials/actions'\nimport { CalloutProvider } from './hooks/use-callout-context'\nimport { StyledDismissButton } from './partials/dismiss-button-styled'\n\ninterface DismissibleProps {\n  /**\n   * Whether or not the component is dismissed (hidden)\n   */\n  dismissed?: boolean\n\n  /**\n   * Callback invoked once dismiss button is clicked\n   */\n  onDismiss?: () => void\n\n  /**\n   * aria-label for the dismiss button\n   */\n  dismissLabel: string\n}\n\nexport type CalloutProps = (Omit<StyledCalloutProps, 'dismissible'> & {\n  /**\n   * Change the component style.\n   */\n  variant: StyledCalloutProps['variant']\n\n  /**\n   * Whether or not the component should display dismiss button\n   * @default true\n   */\n  dismissible?: boolean\n}) &\n  (\n    | DismissibleProps // uncontrolled\n    | Required<DismissibleProps> // controlled\n    | ({ dismissible?: false } & { [K in keyof DismissibleProps]?: never })\n  )\n\nexport const Callout = React.forwardRef<\n  ElementRef<typeof StyledCallout>,\n  CalloutProps\n>(\n  (\n    {\n      dismissed,\n      dismissible = true,\n      onDismiss,\n      dismissLabel,\n      children,\n      variant,\n      ...props\n    },\n    forwardRef\n  ) => {\n    const [internalDismissed, setInternalDismissed] = useState<boolean>(\n      dismissed ?? false\n    )\n\n    if (dismissed ?? internalDismissed) {\n      return null\n    }\n\n    const handleDismissed = (): void => {\n      setInternalDismissed(true)\n      onDismiss?.()\n    }\n\n    return (\n      <CalloutProvider variant={variant}>\n        <StyledCallout\n          {...props}\n          ref={forwardRef}\n          variant={variant}\n          dismissible={dismissible}\n          role='alert'\n        >\n          {children}\n          {dismissible && onDismiss != null && dismissLabel?.length > 0 && (\n            <StyledDismissButton\n              aria-label={dismissLabel}\n              onPress={handleDismissed}\n            />\n          )}\n        </StyledCallout>\n      </CalloutProvider>\n    )\n  }\n) as ForwardRefExoticComponent<CalloutProps> & Partials\n\nexport interface Partials {\n  Content: typeof Content\n  Description: typeof Description\n  IconSlot: typeof IconSlot\n  Title: typeof StyledTitle\n  Actions: typeof Actions\n}\n\nCallout.Content = Content\nCallout.Description = Description\nCallout.IconSlot = IconSlot\nCallout.Title = StyledTitle\nCallout.Actions = Actions\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/callout.styled.tsx","../src/partials/content.tsx","../src/partials/description.tsx","../src/hooks/use-callout-context.tsx","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/title.tsx","../src/partials/actions.tsx","../src/partials/dismiss-button.tsx","../src/callout.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledCallout = styled(Primitive.div, {\n  position: 'relative',\n  gap: '$150',\n  padding: '$200',\n  borderWidth: '$sm',\n  borderStyle: 'solid',\n  borderRadius: '$75',\n  display: 'grid',\n  justifyContent: 'center',\n  gridTemplateColumns: 'auto 1fr',\n  gridTemplateAreas: `'icon content'`,\n  variants: {\n    variant: {\n      information: {\n        backgroundColor: '$background-primary-subtle',\n        borderColor: '$border-primary-subtle',\n      },\n      warning: {\n        backgroundColor: '$background-warning-subtle',\n        borderColor: '$border-warning-subtle',\n      },\n      danger: {\n        backgroundColor: '$background-danger-subtle',\n        borderColor: '$border-danger-subtle',\n      },\n      success: {\n        backgroundColor: '$background-success-subtle',\n        borderColor: '$border-success-subtle',\n      },\n    },\n    dismissible: {\n      true: {\n        padding: '$200 $400 $200 $200',\n      },\n      false: {\n        gridTemplateColumns: 'auto 1fr',\n        gridTemplateAreas: `'icon content'`,\n      },\n    },\n  },\n})\n\nexport type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Content = styled(Primitive.div, {\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '$25',\n  maxWidth: '48em',\n  gridArea: 'content',\n})\n\nContent.displayName = 'Callout.Content'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Description = styled(Primitive.div, {\n  color: '$text-neutrals',\n  fontSize: '$175',\n  lineHeight: '$400',\n  marginTop: '$25',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { createContext, useContext } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n  variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport interface CalloutProviderProps extends CalloutContextProps {\n  children: React.ReactNode\n}\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n  children,\n  ...restProps\n}: CalloutProviderProps): JSX.Element => (\n  <CalloutContext.Provider\n    value={{\n      ...restProps,\n    }}\n  >\n    {children}\n  </CalloutContext.Provider>\n)\n\nexport const useCalloutContext = (): CalloutContextProps =>\n  useContext(CalloutContext)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n  variants: {\n    variant: {\n      information: {\n        color: '$icon-primary',\n      },\n      warning: {\n        color: '$icon-warning',\n      },\n      danger: {\n        color: '$icon-danger',\n      },\n      success: {\n        color: '$icon-success',\n      },\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport {\n  IconCheckMark,\n  IconExclamationPointCircle,\n  IconInformationMarkCircle,\n} from '@mirohq/design-system-icons'\n\nimport { useCalloutContext } from '../hooks/use-callout-context'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children?: React.ReactNode\n}\n\nconst iconVariant = {\n  success: <IconCheckMark />,\n  warning: <IconExclamationPointCircle />,\n  danger: <IconExclamationPointCircle />,\n  information: <IconInformationMarkCircle />,\n  default: <IconCheckMark />,\n}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { variant } = useCalloutContext()\n\n  let formattedChildren = children\n  if (React.Children.count(children) < 1) {\n    formattedChildren =\n      iconVariant[variant as keyof typeof iconVariant] ?? iconVariant.default\n  }\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Heading } from '@mirohq/design-system-typography'\nimport type { HeadingProps } from '@mirohq/design-system-typography'\n\nconst StyledTitle = styled(Heading, { lineHeight: '$300' })\n\nexport interface TitleProps extends Omit<HeadingProps, 'level' | 'styledAs'> {\n  level?: HeadingProps['level']\n}\n\nexport const Title = React.forwardRef<ElementRef<typeof Heading>, TitleProps>(\n  ({ level = 4, ...props }, forwardRef) => (\n    <StyledTitle {...props} ref={forwardRef} level={level} styledAs='h4' />\n  )\n)\n\nTitle.displayName = 'Callout.Title'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Actions = styled(Primitive.div, {\n  gridColumn: 'content',\n  gridRow: -1,\n  display: 'flex',\n  gap: '$100',\n})\n\nActions.displayName = 'Callout.Actions'\n","import { styled } from '@mirohq/design-system-stitches'\nimport { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nconst StyledDismissButton = styled(IconButton, {\n  position: 'absolute',\n  right: '$50',\n  top: '$50',\n})\n\nexport const DismissButton = (props: IconButtonProps): React.ReactNode => (\n  <StyledDismissButton\n    variant='ghost'\n    size='medium'\n    data-testid='dismiss-button'\n    {...props}\n  >\n    <IconCross />\n  </StyledDismissButton>\n)\n\nDismissButton.displayName = 'Callout.DismissButton'\n","import React, { useState } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledCallout } from './callout.styled'\nimport type { StyledCalloutProps } from './callout.styled'\nimport { Content } from './partials/content'\nimport { Description } from './partials/description'\nimport { IconSlot } from './partials/icon-slot'\nimport { Title } from './partials/title'\nimport { Actions } from './partials/actions'\nimport { CalloutProvider } from './hooks/use-callout-context'\nimport { DismissButton } from './partials/dismiss-button'\n\ninterface DismissibleProps {\n  /**\n   * Whether or not the component is dismissed (hidden)\n   */\n  dismissed?: boolean\n\n  /**\n   * Callback invoked once dismiss button is clicked\n   */\n  onDismiss?: () => void\n\n  /**\n   * aria-label for the dismiss button\n   */\n  dismissLabel: string\n}\n\nexport type CalloutProps = (Omit<StyledCalloutProps, 'dismissible'> & {\n  /**\n   * Change the component style.\n   */\n  variant: StyledCalloutProps['variant']\n\n  /**\n   * Whether or not the component should display dismiss button\n   * @default true\n   */\n  dismissible?: boolean\n}) &\n  (\n    | DismissibleProps // uncontrolled\n    | Required<DismissibleProps> // controlled\n    | ({ dismissible?: false } & { [K in keyof DismissibleProps]?: never })\n  )\n\nexport const Callout = React.forwardRef<\n  ElementRef<typeof StyledCallout>,\n  CalloutProps\n>(\n  (\n    {\n      dismissed,\n      dismissible = true,\n      onDismiss,\n      dismissLabel,\n      children,\n      variant,\n      ...props\n    },\n    forwardRef\n  ) => {\n    const [internalDismissed, setInternalDismissed] = useState<boolean>(\n      dismissed ?? false\n    )\n\n    if (dismissed ?? internalDismissed) {\n      return null\n    }\n\n    const handleDismissed = (): void => {\n      setInternalDismissed(true)\n      onDismiss?.()\n    }\n\n    return (\n      <CalloutProvider variant={variant}>\n        <StyledCallout\n          {...props}\n          ref={forwardRef}\n          variant={variant}\n          dismissible={dismissible}\n          role='alert'\n        >\n          {children}\n          {dismissible && onDismiss != null && dismissLabel?.length > 0 && (\n            <DismissButton\n              aria-label={dismissLabel}\n              onPress={handleDismissed}\n            />\n          )}\n        </StyledCallout>\n      </CalloutProvider>\n    )\n  }\n) as ForwardRefExoticComponent<CalloutProps> & Partials\n\nexport interface Partials {\n  Content: typeof Content\n  Description: typeof Description\n  IconSlot: typeof IconSlot\n  Title: typeof Title\n  Actions: typeof Actions\n}\n\nCallout.Content = Content\nCallout.Description = Description\nCallout.IconSlot = IconSlot\nCallout.Title = Title\nCallout.Actions = Actions\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -33,10 +33,10 @@ interface IconSlotProps extends StyledIconSlotProps {
 }
 declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<IconSlotProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-interface GroupLabelProps extends Omit<HeadingProps, 'level'> {
+interface TitleProps extends Omit<HeadingProps, 'level' | 'styledAs'> {
+    level?: HeadingProps['level'];
 }
-
-declare const StyledTitle: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<Omit<GroupLabelProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLHeadingElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<Omit<GroupLabelProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>, {}, {}>;
+declare const Title: react__default.ForwardRefExoticComponent<Omit<TitleProps, "ref"> & react__default.RefAttributes<HTMLHeadingElement>>;
 
 declare const Actions: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
 
@@ -74,7 +74,7 @@ interface Partials {
     Content: typeof Content;
     Description: typeof Description;
     IconSlot: typeof IconSlot;
-    Title: typeof StyledTitle;
+    Title: typeof Title;
     Actions: typeof Actions;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-callout",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@mirohq/design-system-icon-button": "^4.1.0",
-    "@mirohq/design-system-icons": "^1.19.0",
+    "@mirohq/design-system-icons": "^1.19.1",
     "@mirohq/design-system-primitive": "^2.1.0",
     "@mirohq/design-system-stitches": "^3.1.0",
     "@mirohq/design-system-typography": "^1.1.0"