@mirohq/design-system-callout 0.1.3 → 0.2.0

package/dist/main.js

@@ -42,6 +42,12 @@ const StyledCallout = designSystemStitches.styled(designSystemPrimitive.Primitiv
         backgroundColor: "$background-success-subtle",
         borderColor: "$border-success-subtle"
       }
+    },
+    dismissible: {
+      false: {
+        gridTemplateColumns: "auto 1fr",
+        gridTemplateAreas: "'icon content'"
+      }
     }
   }
 });
@@ -163,6 +169,7 @@ const Callout = React__default["default"].forwardRef(
         ...props,
         ref: forwardRef,
         variant,
+        dismissible,
         role: "alert",
         children: [
           children,

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/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  gap: '$150',\n  padding: '$200',\n  borderWidth: '$sm',\n  borderStyle: 'solid',\n  borderRadius: '$75',\n  display: 'grid',\n  justifyContent: 'center',\n  gridTemplateColumns: 'auto 1fr $8',\n  gridTemplateAreas: `'icon content close'`,\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  },\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: 'grid',\n  gap: '$25',\n  maxWidth: '48em',\n  gridArea: 'content',\n  gridTemplateRows: 'auto 1fr',\n  gridTemplateAreas: `'title'\n    'description'`,\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  gridArea: 'description',\n  color: '$text-neutrals-subtle',\n  fontSize: '$175',\n  lineHeight: '$400',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n  variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport type CalloutProviderProps = CalloutContextProps\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<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 { 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: React.FC<IconButtonProps> = props => (\n  <IconButton\n    css={{ gridArea: 'close' }}\n    variant='ghost'\n    size='medium'\n    data-testid='dismiss-button'\n    {...props}\n  >\n    <IconCross />\n  </IconButton>\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 { Title } from './partials/title'\nimport { Actions } from './partials/actions'\nimport { DismissButton } from './partials/dismiss-button'\nimport { CalloutProvider } from './hooks/use-callout-context'\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 = (StyledCalloutProps & {\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          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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"}
+{"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  gap: '$150',\n  padding: '$200',\n  borderWidth: '$sm',\n  borderStyle: 'solid',\n  borderRadius: '$75',\n  display: 'grid',\n  justifyContent: 'center',\n  gridTemplateColumns: 'auto 1fr $8',\n  gridTemplateAreas: `'icon content close'`,\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      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: 'grid',\n  gap: '$25',\n  maxWidth: '48em',\n  gridArea: 'content',\n  gridTemplateRows: 'auto 1fr',\n  gridTemplateAreas: `'title'\n    'description'`,\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  gridArea: 'description',\n  color: '$text-neutrals-subtle',\n  fontSize: '$175',\n  lineHeight: '$400',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n  variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport type CalloutProviderProps = CalloutContextProps\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<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 { 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: React.FC<IconButtonProps> = props => (\n  <IconButton\n    css={{ gridArea: 'close' }}\n    variant='ghost'\n    size='medium'\n    data-testid='dismiss-button'\n    {...props}\n  >\n    <IconCross />\n  </IconButton>\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 { Title } from './partials/title'\nimport { Actions } from './partials/actions'\nimport { DismissButton } from './partials/dismiss-button'\nimport { CalloutProvider } from './hooks/use-callout-context'\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

@@ -34,6 +34,12 @@ const StyledCallout = styled(Primitive.div, {
         backgroundColor: "$background-success-subtle",
         borderColor: "$border-success-subtle"
       }
+    },
+    dismissible: {
+      false: {
+        gridTemplateColumns: "auto 1fr",
+        gridTemplateAreas: "'icon content'"
+      }
     }
   }
 });
@@ -155,6 +161,7 @@ const Callout = React.forwardRef(
         ...props,
         ref: forwardRef,
         variant,
+        dismissible,
         role: "alert",
         children: [
           children,

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/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  gap: '$150',\n  padding: '$200',\n  borderWidth: '$sm',\n  borderStyle: 'solid',\n  borderRadius: '$75',\n  display: 'grid',\n  justifyContent: 'center',\n  gridTemplateColumns: 'auto 1fr $8',\n  gridTemplateAreas: `'icon content close'`,\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  },\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: 'grid',\n  gap: '$25',\n  maxWidth: '48em',\n  gridArea: 'content',\n  gridTemplateRows: 'auto 1fr',\n  gridTemplateAreas: `'title'\n    'description'`,\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  gridArea: 'description',\n  color: '$text-neutrals-subtle',\n  fontSize: '$175',\n  lineHeight: '$400',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n  variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport type CalloutProviderProps = CalloutContextProps\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<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 { 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: React.FC<IconButtonProps> = props => (\n  <IconButton\n    css={{ gridArea: 'close' }}\n    variant='ghost'\n    size='medium'\n    data-testid='dismiss-button'\n    {...props}\n  >\n    <IconCross />\n  </IconButton>\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 { Title } from './partials/title'\nimport { Actions } from './partials/actions'\nimport { DismissButton } from './partials/dismiss-button'\nimport { CalloutProvider } from './hooks/use-callout-context'\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 = (StyledCalloutProps & {\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          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":";;;;;;;;AAIa,MAAA,aAAA,GAAgB,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EACjD,GAAK,EAAA,MAAA;AAAA,EACL,OAAS,EAAA,MAAA;AAAA,EACT,WAAa,EAAA,KAAA;AAAA,EACb,WAAa,EAAA,OAAA;AAAA,EACb,YAAc,EAAA,KAAA;AAAA,EACd,OAAS,EAAA,MAAA;AAAA,EACT,cAAgB,EAAA,QAAA;AAAA,EAChB,mBAAqB,EAAA,aAAA;AAAA,EACrB,iBAAmB,EAAA,sBAAA;AAAA,EACnB,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,WAAa,EAAA;AAAA,QACX,eAAiB,EAAA,4BAAA;AAAA,QACjB,WAAa,EAAA,wBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,4BAAA;AAAA,QACjB,WAAa,EAAA,wBAAA;AAAA,OACf;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,eAAiB,EAAA,2BAAA;AAAA,QACjB,WAAa,EAAA,uBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,4BAAA;AAAA,QACjB,WAAa,EAAA,wBAAA;AAAA,OACf;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC/BY,MAAA,OAAA,GAAU,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAC3C,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,KAAA;AAAA,EACL,QAAU,EAAA,MAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,gBAAkB,EAAA,UAAA;AAAA,EAClB,iBAAmB,EAAA,4BAAA;AAErB,CAAC,CAAA,CAAA;AAED,OAAA,CAAQ,WAAc,GAAA,iBAAA;;ACVT,MAAA,WAAA,GAAc,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAC/C,QAAU,EAAA,aAAA;AAAA,EACV,KAAO,EAAA,uBAAA;AAAA,EACP,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,MAAA;AACd,CAAC,CAAA,CAAA;AAED,WAAA,CAAY,WAAc,GAAA,qBAAA;;ACG1B,MAAM,cAAA,GAAiB,aAAmC,CAAA,EAAS,CAAA,CAAA;AAE5D,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,GAAG,SAAA;AACL,CACE,qBAAA,GAAA;AAAA,EAAC,cAAe,CAAA,QAAA;AAAA,EAAf;AAAA,IACC,KAAO,EAAA;AAAA,MACL,GAAG,SAAA;AAAA,KACL;AAAA,IAEC,QAAA;AAAA,GAAA;AACH,CAAA,CAAA;AAGW,MAAA,iBAAA,GAAoB,MAC/B,UAAA,CAAW,cAAc,CAAA;;AC1Bd,MAAA,cAAA,GAAiB,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAClD,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,WAAa,EAAA;AAAA,QACX,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,KAAO,EAAA,cAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACAD,MAAM,WAAc,GAAA;AAAA,EAClB,OAAA,sBAAU,aAAc,EAAA,EAAA,CAAA;AAAA,EACxB,OAAA,sBAAU,0BAA2B,EAAA,EAAA,CAAA;AAAA,EACrC,MAAA,sBAAS,0BAA2B,EAAA,EAAA,CAAA;AAAA,EACpC,WAAA,sBAAc,yBAA0B,EAAA,EAAA,CAAA;AAAA,EACxC,OAAA,sBAAU,aAAc,EAAA,EAAA,CAAA;AAC1B,CAAA,CAAA;AAEa,MAAA,QAAA,GAAW,MAAM,UAG5B,CAAA,CAAC,EAAE,QAAU,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AA/B9C,EAAA,IAAA,EAAA,CAAA;AAgCE,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAEtC,EAAA,IAAI,iBAAoB,GAAA,QAAA,CAAA;AACxB,EAAA,IAAI,KAAM,CAAA,QAAA,CAAS,KAAM,CAAA,QAAQ,IAAI,CAAG,EAAA;AACtC,IAAA,iBAAA,GAAA,CACE,EAAY,GAAA,WAAA,CAAA,OAAmC,CAA/C,KAAA,IAAA,GAAA,EAAA,GAAoD,WAAY,CAAA,OAAA,CAAA;AAAA,GACpE;AAEA,EAAA,2BACG,cAAgB,EAAA,EAAA,GAAG,WAAW,GAAK,EAAA,UAAA,EAAY,SAC7C,QACH,EAAA,iBAAA,EAAA,CAAA,CAAA;AAEJ,CAAC,CAAA;;ACtCM,MAAM,KAAQ,GAAA,KAAA,CAAM,UAGzB,CAAA,CAAC,OAAO,UAAe,qBAAA,GAAA,CAAC,OAAS,EAAA,EAAA,GAAG,KAAO,EAAA,GAAA,EAAK,UAAY,EAAA,KAAA,EAAO,GAAG,CAAE,CAAA;;ACP7D,MAAA,OAAA,GAAU,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAC3C,UAAY,EAAA,SAAA;AAAA,EACZ,OAAS,EAAA,CAAA,CAAA;AAAA,EACT,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,MAAA;AACP,CAAC,CAAA,CAAA;AAED,OAAA,CAAQ,WAAc,GAAA,iBAAA;;ACNf,MAAM,gBAA2C,CACtD,KAAA,qBAAA,GAAA;AAAA,EAAC,UAAA;AAAA,EAAA;AAAA,IACC,GAAA,EAAK,EAAE,QAAA,EAAU,OAAQ,EAAA;AAAA,IACzB,OAAQ,EAAA,OAAA;AAAA,IACR,IAAK,EAAA,QAAA;AAAA,IACL,aAAY,EAAA,gBAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,8BAAC,SAAU,EAAA,EAAA,CAAA;AAAA,GAAA;AACb,CAAA;;ACmCK,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,SAAA;AAAA,IACA,WAAc,GAAA,IAAA;AAAA,IACd,SAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG,KAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAM,MAAA,CAAC,iBAAmB,EAAA,oBAAoB,CAAI,GAAA,QAAA;AAAA,MAChD,SAAa,IAAA,IAAA,GAAA,SAAA,GAAA,KAAA;AAAA,KACf,CAAA;AAEA,IAAA,IAAI,gCAAa,iBAAmB,EAAA;AAClC,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,MAAM,kBAAkB,MAAY;AAClC,MAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AACzB,MAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,EAAA,CAAA;AAAA,KACF,CAAA;AAEA,IACE,uBAAA,GAAA,CAAC,mBAAgB,OACf,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAK,EAAA,UAAA;AAAA,QACL,OAAA;AAAA,QACA,IAAK,EAAA,OAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,WAAe,IAAA,SAAA,IAAa,IAAQ,IAAA,CAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAc,UAAS,CAC1D,oBAAA,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,YAAY,EAAA,YAAA;AAAA,cACZ,OAAS,EAAA,eAAA;AAAA,aAAA;AAAA,WACX;AAAA,SAAA;AAAA,OAAA;AAAA,KAGN,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAUA,OAAA,CAAQ,OAAU,GAAA,OAAA,CAAA;AAClB,OAAA,CAAQ,WAAc,GAAA,WAAA,CAAA;AACtB,OAAA,CAAQ,QAAW,GAAA,QAAA,CAAA;AACnB,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AAChB,OAAA,CAAQ,OAAU,GAAA,OAAA;;;;"}
+{"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  gap: '$150',\n  padding: '$200',\n  borderWidth: '$sm',\n  borderStyle: 'solid',\n  borderRadius: '$75',\n  display: 'grid',\n  justifyContent: 'center',\n  gridTemplateColumns: 'auto 1fr $8',\n  gridTemplateAreas: `'icon content close'`,\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      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: 'grid',\n  gap: '$25',\n  maxWidth: '48em',\n  gridArea: 'content',\n  gridTemplateRows: 'auto 1fr',\n  gridTemplateAreas: `'title'\n    'description'`,\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  gridArea: 'description',\n  color: '$text-neutrals-subtle',\n  fontSize: '$175',\n  lineHeight: '$400',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n  variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport type CalloutProviderProps = CalloutContextProps\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<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 { 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: React.FC<IconButtonProps> = props => (\n  <IconButton\n    css={{ gridArea: 'close' }}\n    variant='ghost'\n    size='medium'\n    data-testid='dismiss-button'\n    {...props}\n  >\n    <IconCross />\n  </IconButton>\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 { Title } from './partials/title'\nimport { Actions } from './partials/actions'\nimport { DismissButton } from './partials/dismiss-button'\nimport { CalloutProvider } from './hooks/use-callout-context'\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

@@ -5,10 +5,12 @@ import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches'
 import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
 import { HeadingProps } from '@mirohq/design-system-typography';
 
-declare const StyledCallout: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "variant"> & _stitches_react_types_styled_component.TransformProps<{
+declare const StyledCallout: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "variant" | "dismissible"> & _stitches_react_types_styled_component.TransformProps<{
     variant?: "information" | "warning" | "danger" | "success" | undefined;
+    dismissible?: boolean | "false" | undefined;
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
     variant?: "information" | "warning" | "danger" | "success" | undefined;
+    dismissible?: boolean | "false" | undefined;
 }, {}>;
 declare type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>;
 
@@ -51,7 +53,7 @@ interface DismissibleProps {
      */
     dismissLabel: string;
 }
-declare type CalloutProps = (StyledCalloutProps & {
+declare type CalloutProps = (Omit<StyledCalloutProps, 'dismissible'> & {
     /**
      * Change the component style.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-callout",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -29,8 +29,8 @@
     "@mirohq/design-system-icon-button": "^3.2.1",
     "@mirohq/design-system-icons": "^0.58.1",
     "@mirohq/design-system-stitches": "^2.6.26",
-    "@mirohq/design-system-primitive": "^1.1.2",
-    "@mirohq/design-system-typography": "^0.6.4"
+    "@mirohq/design-system-typography": "^0.6.4",
+    "@mirohq/design-system-primitive": "^1.1.2"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",