@mirohq/design-system-callout 1.4.37-reactdismissablelayer.0 → 1.5.1

package/dist/main.js

@@ -4,17 +4,22 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemStitches = require('@mirohq/design-system-stitches');
+var designSystemButton = require('@mirohq/design-system-button');
+var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemIcons = require('@mirohq/design-system-icons');
 var designSystemTypography = require('@mirohq/design-system-typography');
 var designSystemIconButton = require('@mirohq/design-system-icon-button');
 
 const StyledCallout = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   position: "relative",
-  gap: "$150",
+  // Row gap only: a column gap would indent content by 12px next to the empty
+  // icon track when no IconSlot is rendered. The icon-to-content spacing
+  // lives on StyledIconSlot instead.
+  rowGap: "$150",
   padding: "$200",
   borderWidth: "$sm",
   borderStyle: "solid",
-  borderRadius: "$75",
+  borderRadius: "$notification",
   display: "grid",
   justifyContent: "center",
   gridTemplateColumns: "auto 1fr",
@@ -49,7 +54,7 @@ const StyledCallout = designSystemStitches.styled(designSystemPrimitive.Primitiv
     },
     dismissible: {
       true: {
-        padding: "$200 $400 $200 $200"
+        padding: "$200 $500 $200 $200"
       },
       false: {
         gridTemplateColumns: "auto 1fr",
@@ -59,6 +64,87 @@ const StyledCallout = designSystemStitches.styled(designSystemPrimitive.Primitiv
   }
 });
 
+const CalloutContext = React.createContext({});
+const CalloutProvider = ({
+  children,
+  ...restProps
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  CalloutContext.Provider,
+  {
+    value: {
+      ...restProps
+    },
+    children
+  }
+);
+const useCalloutContext = () => React.useContext(CalloutContext);
+
+const PRIMARY_ACTION_COLORS = {
+  information: {
+    background: "$button-background-info",
+    backgroundHover: "$button-background-info-hover",
+    backgroundPressed: "$button-background-info-pressed",
+    text: "$text-on-static-dark"
+  },
+  warning: {
+    background: "$button-background-warning",
+    backgroundHover: "$button-background-warning-hover",
+    backgroundPressed: "$button-background-warning-pressed",
+    text: "$text-on-static-dark"
+  },
+  danger: {
+    background: "$button-background-danger",
+    backgroundHover: "$button-background-danger-hover",
+    backgroundPressed: "$button-background-danger-pressed",
+    text: "$button-text-on-danger"
+  }
+};
+const primaryActionColorVariants = designSystemUtils.mapKeysToVariants(
+  PRIMARY_ACTION_COLORS,
+  (key) => {
+    const colors = PRIMARY_ACTION_COLORS[key];
+    if (colors == null) {
+      return {};
+    }
+    return {
+      backgroundColor: colors.background,
+      color: colors.text,
+      "&:hover, &[data-hovered]": {
+        backgroundColor: colors.backgroundHover,
+        color: colors.text
+      },
+      "&:active, &[data-pressed]": {
+        backgroundColor: colors.backgroundPressed,
+        color: colors.text
+      }
+    };
+  }
+);
+
+const StyledAction = designSystemStitches.styled(designSystemButton.Button, {
+  variants: {
+    color: primaryActionColorVariants
+  }
+});
+const Action = React.forwardRef(
+  ({ variant = "primary", size = "medium", ...props }, forwardRef) => {
+    const { variant: calloutVariant } = useCalloutContext();
+    const isPrimary = variant === "primary";
+    const color = isPrimary && typeof calloutVariant === "string" && calloutVariant in primaryActionColorVariants ? calloutVariant : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledAction,
+      {
+        ...props,
+        ref: forwardRef,
+        size,
+        variant: isPrimary ? "primary" : "ghost",
+        color
+      }
+    );
+  }
+);
+Action.displayName = "Callout.Action";
+
 const Content = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
   display: "flex",
   flexDirection: "column",
@@ -76,22 +162,8 @@ const Description = designSystemStitches.styled(designSystemPrimitive.Primitive.
 });
 Description.displayName = "Callout.Description";
 
-const CalloutContext = React.createContext({});
-const CalloutProvider = ({
-  children,
-  ...restProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  CalloutContext.Provider,
-  {
-    value: {
-      ...restProps
-    },
-    children
-  }
-);
-const useCalloutContext = () => React.useContext(CalloutContext);
-
 const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  marginRight: "$150",
   variants: {
     variant: {
       information: {
@@ -131,7 +203,15 @@ const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { ...restProps, ref: forwardRef, variant, children: formattedChildren });
 });
 
-const StyledTitle = designSystemStitches.styled(designSystemTypography.Heading, { lineHeight: "$300" });
+const TagSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  gap: "$50",
+  marginBottom: "calc($space$100 - $space$25)"
+});
+TagSlot.displayName = "Callout.TagSlot";
+
+const StyledTitle = designSystemStitches.styled(designSystemTypography.Heading, { lineHeight: "$300", color: "inherit" });
 const Title = React.forwardRef(
   ({ level = 4, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledTitle, { ...props, ref: forwardRef, level, styledAs: "h4" })
 );
@@ -147,8 +227,8 @@ Actions.displayName = "Callout.Actions";
 
 const StyledDismissButton = designSystemStitches.styled(designSystemIconButton.IconButton, {
   position: "absolute",
-  right: "$50",
-  top: "$50"
+  right: "$100",
+  top: "$100"
 });
 const DismissButton = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   StyledDismissButton,
@@ -205,9 +285,11 @@ const Callout = React.forwardRef(
     ) });
   }
 );
+Callout.Action = Action;
 Callout.Content = Content;
 Callout.Description = Description;
 Callout.IconSlot = IconSlot;
+Callout.TagSlot = TagSlot;
 Callout.Title = Title;
 Callout.Actions = Actions;
 

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  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: '$status-background-info',\n        borderColor: '$status-border-info',\n        color: '$status-text-on-info',\n      },\n      warning: {\n        backgroundColor: '$status-background-warning',\n        borderColor: '$status-border-warning',\n        color: '$status-text-on-warning',\n      },\n      danger: {\n        backgroundColor: '$status-background-error',\n        borderColor: '$status-border-error',\n        color: '$status-text-on-error',\n      },\n      success: {\n        backgroundColor: '$status-background-success',\n        borderColor: '$status-border-success',\n        color: '$status-text-on-success',\n      },\n      neutral: {\n        backgroundColor: '$background-surface',\n        borderColor: '$border-default',\n        color: '$text-default',\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: 'inherit',\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: '$status-icon-on-info',\n      },\n      warning: {\n        color: '$status-icon-on-warning',\n      },\n      danger: {\n        color: '$status-icon-on-error',\n      },\n      success: {\n        color: '$status-icon-on-success',\n      },\n      neutral: {\n        color: '$icon-default',\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  neutral: <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      role,\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={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","Heading","IconButton","IconCross","useState","jsxs"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/callout.styled.tsx","../src/hooks/use-callout-context.tsx","../src/callout.colors.ts","../src/partials/action.tsx","../src/partials/content.tsx","../src/partials/description.tsx","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/tag-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  // Row gap only: a column gap would indent content by 12px next to the empty\n  // icon track when no IconSlot is rendered. The icon-to-content spacing\n  // lives on StyledIconSlot instead.\n  rowGap: '$150',\n  padding: '$200',\n  borderWidth: '$sm',\n  borderStyle: 'solid',\n  borderRadius: '$notification',\n  display: 'grid',\n  justifyContent: 'center',\n  gridTemplateColumns: 'auto 1fr',\n  gridTemplateAreas: `'icon content'`,\n  variants: {\n    variant: {\n      information: {\n        backgroundColor: '$status-background-info',\n        borderColor: '$status-border-info',\n        color: '$status-text-on-info',\n      },\n      warning: {\n        backgroundColor: '$status-background-warning',\n        borderColor: '$status-border-warning',\n        color: '$status-text-on-warning',\n      },\n      danger: {\n        backgroundColor: '$status-background-error',\n        borderColor: '$status-border-error',\n        color: '$status-text-on-error',\n      },\n      success: {\n        backgroundColor: '$status-background-success',\n        borderColor: '$status-border-success',\n        color: '$status-text-on-success',\n      },\n      neutral: {\n        backgroundColor: '$background-surface',\n        borderColor: '$border-default',\n        color: '$text-default',\n      },\n    },\n    dismissible: {\n      true: {\n        padding: '$200 $500 $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\n// Plain string union of the styled `variant` variants, mirroring BannerVariant:\n// `Extract<…, string>` drops the stitches responsive-object form.\nexport type CalloutVariant = Extract<StyledCalloutProps['variant'], string>\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 { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nimport type { CalloutVariant } from './callout.styled'\n\ninterface ActionColorSet {\n  background: string\n  backgroundHover: string\n  backgroundPressed: string\n  text: string\n}\n\n// Per-variant overrides agreed with the MDS team: Button-level status variants\n// are deferred until after the C26 token cleanup (NOTI-5461), so the colors\n// live here instead of in MDS Button.\nconst PRIMARY_ACTION_COLORS: Partial<Record<CalloutVariant, ActionColorSet>> = {\n  information: {\n    background: '$button-background-info',\n    backgroundHover: '$button-background-info-hover',\n    backgroundPressed: '$button-background-info-pressed',\n    text: '$text-on-static-dark',\n  },\n  warning: {\n    background: '$button-background-warning',\n    backgroundHover: '$button-background-warning-hover',\n    backgroundPressed: '$button-background-warning-pressed',\n    text: '$text-on-static-dark',\n  },\n  danger: {\n    background: '$button-background-danger',\n    backgroundHover: '$button-background-danger-hover',\n    backgroundPressed: '$button-background-danger-pressed',\n    text: '$button-text-on-danger',\n  },\n}\n\nexport const primaryActionColorVariants = mapKeysToVariants(\n  PRIMARY_ACTION_COLORS,\n  key => {\n    const colors = PRIMARY_ACTION_COLORS[key]\n    if (colors == null) {\n      return {}\n    }\n\n    return {\n      backgroundColor: colors.background,\n      color: colors.text,\n      '&:hover, &[data-hovered]': {\n        backgroundColor: colors.backgroundHover,\n        color: colors.text,\n      },\n      '&:active, &[data-pressed]': {\n        backgroundColor: colors.backgroundPressed,\n        color: colors.text,\n      },\n    }\n  }\n)\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { useCalloutContext } from '../hooks/use-callout-context'\nimport { primaryActionColorVariants } from '../callout.colors'\n\nconst StyledAction = styled(Button, {\n  variants: {\n    color: primaryActionColorVariants,\n  },\n})\n\nexport interface ActionProps extends Omit<ButtonProps, 'variant'> {\n  /**\n   * Visual prominence of the action.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary'\n}\n\nexport const Action = React.forwardRef<ElementRef<typeof Button>, ActionProps>(\n  ({ variant = 'primary', size = 'medium', ...props }, forwardRef) => {\n    const { variant: calloutVariant } = useCalloutContext()\n    const isPrimary = variant === 'primary'\n    const color =\n      isPrimary &&\n      typeof calloutVariant === 'string' &&\n      calloutVariant in primaryActionColorVariants\n        ? (calloutVariant as keyof typeof primaryActionColorVariants)\n        : undefined\n\n    return (\n      <StyledAction\n        {...props}\n        ref={forwardRef}\n        size={size}\n        variant={isPrimary ? 'primary' : 'ghost'}\n        color={color}\n      />\n    )\n  }\n)\n\nAction.displayName = 'Callout.Action'\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: 'inherit',\n  fontSize: '$175',\n  lineHeight: '$400',\n  marginTop: '$25',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n  marginRight: '$150',\n  variants: {\n    variant: {\n      information: {\n        color: '$status-icon-on-info',\n      },\n      warning: {\n        color: '$status-icon-on-warning',\n      },\n      danger: {\n        color: '$status-icon-on-error',\n      },\n      success: {\n        color: '$status-icon-on-success',\n      },\n      neutral: {\n        color: '$icon-default',\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  neutral: <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 { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\n// 6px margin + the 2px Content column gap = 8px between tag and title, per\n// design. There is no 6px space token, hence the calc.\nexport const TagSlot = styled(Primitive.div, {\n  display: 'flex',\n  alignItems: 'center',\n  gap: '$50',\n  marginBottom: 'calc($space$100 - $space$25)',\n})\n\nTagSlot.displayName = 'Callout.TagSlot'\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', color: 'inherit' })\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: '$100',\n  top: '$100',\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 { Action } from './partials/action'\nimport { Content } from './partials/content'\nimport { Description } from './partials/description'\nimport { IconSlot } from './partials/icon-slot'\nimport { TagSlot } from './partials/tag-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      role,\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={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  Action: typeof Action\n  Content: typeof Content\n  Description: typeof Description\n  IconSlot: typeof IconSlot\n  TagSlot: typeof TagSlot\n  Title: typeof Title\n  Actions: typeof Actions\n}\n\nCallout.Action = Action\nCallout.Content = Content\nCallout.Description = Description\nCallout.IconSlot = IconSlot\nCallout.TagSlot = TagSlot\nCallout.Title = Title\nCallout.Actions = Actions\n"],"names":["styled","Primitive","createContext","jsx","useContext","mapKeysToVariants","Button","IconCheckMark","IconExclamationPointCircle","IconInformationMarkCircle","Heading","IconButton","IconCross","useState","jsxs"],"mappings":"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"}

package/dist/module.js

@@ -2,17 +2,22 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useContext, useState } from 'react';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { styled } from '@mirohq/design-system-stitches';
+import { Button } from '@mirohq/design-system-button';
+import { mapKeysToVariants } from '@mirohq/design-system-utils';
 import { IconCheckMark, IconInformationMarkCircle, IconExclamationPointCircle, IconCross } from '@mirohq/design-system-icons';
 import { Heading } from '@mirohq/design-system-typography';
 import { IconButton } from '@mirohq/design-system-icon-button';
 
 const StyledCallout = styled(Primitive.div, {
   position: "relative",
-  gap: "$150",
+  // Row gap only: a column gap would indent content by 12px next to the empty
+  // icon track when no IconSlot is rendered. The icon-to-content spacing
+  // lives on StyledIconSlot instead.
+  rowGap: "$150",
   padding: "$200",
   borderWidth: "$sm",
   borderStyle: "solid",
-  borderRadius: "$75",
+  borderRadius: "$notification",
   display: "grid",
   justifyContent: "center",
   gridTemplateColumns: "auto 1fr",
@@ -47,7 +52,7 @@ const StyledCallout = styled(Primitive.div, {
     },
     dismissible: {
       true: {
-        padding: "$200 $400 $200 $200"
+        padding: "$200 $500 $200 $200"
       },
       false: {
         gridTemplateColumns: "auto 1fr",
@@ -57,6 +62,87 @@ const StyledCallout = styled(Primitive.div, {
   }
 });
 
+const CalloutContext = createContext({});
+const CalloutProvider = ({
+  children,
+  ...restProps
+}) => /* @__PURE__ */ jsx(
+  CalloutContext.Provider,
+  {
+    value: {
+      ...restProps
+    },
+    children
+  }
+);
+const useCalloutContext = () => useContext(CalloutContext);
+
+const PRIMARY_ACTION_COLORS = {
+  information: {
+    background: "$button-background-info",
+    backgroundHover: "$button-background-info-hover",
+    backgroundPressed: "$button-background-info-pressed",
+    text: "$text-on-static-dark"
+  },
+  warning: {
+    background: "$button-background-warning",
+    backgroundHover: "$button-background-warning-hover",
+    backgroundPressed: "$button-background-warning-pressed",
+    text: "$text-on-static-dark"
+  },
+  danger: {
+    background: "$button-background-danger",
+    backgroundHover: "$button-background-danger-hover",
+    backgroundPressed: "$button-background-danger-pressed",
+    text: "$button-text-on-danger"
+  }
+};
+const primaryActionColorVariants = mapKeysToVariants(
+  PRIMARY_ACTION_COLORS,
+  (key) => {
+    const colors = PRIMARY_ACTION_COLORS[key];
+    if (colors == null) {
+      return {};
+    }
+    return {
+      backgroundColor: colors.background,
+      color: colors.text,
+      "&:hover, &[data-hovered]": {
+        backgroundColor: colors.backgroundHover,
+        color: colors.text
+      },
+      "&:active, &[data-pressed]": {
+        backgroundColor: colors.backgroundPressed,
+        color: colors.text
+      }
+    };
+  }
+);
+
+const StyledAction = styled(Button, {
+  variants: {
+    color: primaryActionColorVariants
+  }
+});
+const Action = React.forwardRef(
+  ({ variant = "primary", size = "medium", ...props }, forwardRef) => {
+    const { variant: calloutVariant } = useCalloutContext();
+    const isPrimary = variant === "primary";
+    const color = isPrimary && typeof calloutVariant === "string" && calloutVariant in primaryActionColorVariants ? calloutVariant : void 0;
+    return /* @__PURE__ */ jsx(
+      StyledAction,
+      {
+        ...props,
+        ref: forwardRef,
+        size,
+        variant: isPrimary ? "primary" : "ghost",
+        color
+      }
+    );
+  }
+);
+Action.displayName = "Callout.Action";
+
 const Content = styled(Primitive.div, {
   display: "flex",
   flexDirection: "column",
@@ -74,22 +160,8 @@ const Description = styled(Primitive.div, {
 });
 Description.displayName = "Callout.Description";
 
-const CalloutContext = createContext({});
-const CalloutProvider = ({
-  children,
-  ...restProps
-}) => /* @__PURE__ */ jsx(
-  CalloutContext.Provider,
-  {
-    value: {
-      ...restProps
-    },
-    children
-  }
-);
-const useCalloutContext = () => useContext(CalloutContext);
-
 const StyledIconSlot = styled(Primitive.div, {
+  marginRight: "$150",
   variants: {
     variant: {
       information: {
@@ -129,7 +201,15 @@ const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
   return /* @__PURE__ */ jsx(StyledIconSlot, { ...restProps, ref: forwardRef, variant, children: formattedChildren });
 });
 
-const StyledTitle = styled(Heading, { lineHeight: "$300" });
+const TagSlot = styled(Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  gap: "$50",
+  marginBottom: "calc($space$100 - $space$25)"
+});
+TagSlot.displayName = "Callout.TagSlot";
+
+const StyledTitle = styled(Heading, { lineHeight: "$300", color: "inherit" });
 const Title = React.forwardRef(
   ({ level = 4, ...props }, forwardRef) => /* @__PURE__ */ jsx(StyledTitle, { ...props, ref: forwardRef, level, styledAs: "h4" })
 );
@@ -145,8 +225,8 @@ Actions.displayName = "Callout.Actions";
 
 const StyledDismissButton = styled(IconButton, {
   position: "absolute",
-  right: "$50",
-  top: "$50"
+  right: "$100",
+  top: "$100"
 });
 const DismissButton = (props) => /* @__PURE__ */ jsx(
   StyledDismissButton,
@@ -203,9 +283,11 @@ const Callout = React.forwardRef(
     ) });
   }
 );
+Callout.Action = Action;
 Callout.Content = Content;
 Callout.Description = Description;
 Callout.IconSlot = IconSlot;
+Callout.TagSlot = TagSlot;
 Callout.Title = Title;
 Callout.Actions = Actions;
 

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  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: '$status-background-info',\n        borderColor: '$status-border-info',\n        color: '$status-text-on-info',\n      },\n      warning: {\n        backgroundColor: '$status-background-warning',\n        borderColor: '$status-border-warning',\n        color: '$status-text-on-warning',\n      },\n      danger: {\n        backgroundColor: '$status-background-error',\n        borderColor: '$status-border-error',\n        color: '$status-text-on-error',\n      },\n      success: {\n        backgroundColor: '$status-background-success',\n        borderColor: '$status-border-success',\n        color: '$status-text-on-success',\n      },\n      neutral: {\n        backgroundColor: '$background-surface',\n        borderColor: '$border-default',\n        color: '$text-default',\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: 'inherit',\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: '$status-icon-on-info',\n      },\n      warning: {\n        color: '$status-icon-on-warning',\n      },\n      danger: {\n        color: '$status-icon-on-error',\n      },\n      success: {\n        color: '$status-icon-on-success',\n      },\n      neutral: {\n        color: '$icon-default',\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  neutral: <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      role,\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={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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"}
+{"version":3,"file":"module.js","sources":["../src/callout.styled.tsx","../src/hooks/use-callout-context.tsx","../src/callout.colors.ts","../src/partials/action.tsx","../src/partials/content.tsx","../src/partials/description.tsx","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/tag-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  // Row gap only: a column gap would indent content by 12px next to the empty\n  // icon track when no IconSlot is rendered. The icon-to-content spacing\n  // lives on StyledIconSlot instead.\n  rowGap: '$150',\n  padding: '$200',\n  borderWidth: '$sm',\n  borderStyle: 'solid',\n  borderRadius: '$notification',\n  display: 'grid',\n  justifyContent: 'center',\n  gridTemplateColumns: 'auto 1fr',\n  gridTemplateAreas: `'icon content'`,\n  variants: {\n    variant: {\n      information: {\n        backgroundColor: '$status-background-info',\n        borderColor: '$status-border-info',\n        color: '$status-text-on-info',\n      },\n      warning: {\n        backgroundColor: '$status-background-warning',\n        borderColor: '$status-border-warning',\n        color: '$status-text-on-warning',\n      },\n      danger: {\n        backgroundColor: '$status-background-error',\n        borderColor: '$status-border-error',\n        color: '$status-text-on-error',\n      },\n      success: {\n        backgroundColor: '$status-background-success',\n        borderColor: '$status-border-success',\n        color: '$status-text-on-success',\n      },\n      neutral: {\n        backgroundColor: '$background-surface',\n        borderColor: '$border-default',\n        color: '$text-default',\n      },\n    },\n    dismissible: {\n      true: {\n        padding: '$200 $500 $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\n// Plain string union of the styled `variant` variants, mirroring BannerVariant:\n// `Extract<…, string>` drops the stitches responsive-object form.\nexport type CalloutVariant = Extract<StyledCalloutProps['variant'], string>\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 { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nimport type { CalloutVariant } from './callout.styled'\n\ninterface ActionColorSet {\n  background: string\n  backgroundHover: string\n  backgroundPressed: string\n  text: string\n}\n\n// Per-variant overrides agreed with the MDS team: Button-level status variants\n// are deferred until after the C26 token cleanup (NOTI-5461), so the colors\n// live here instead of in MDS Button.\nconst PRIMARY_ACTION_COLORS: Partial<Record<CalloutVariant, ActionColorSet>> = {\n  information: {\n    background: '$button-background-info',\n    backgroundHover: '$button-background-info-hover',\n    backgroundPressed: '$button-background-info-pressed',\n    text: '$text-on-static-dark',\n  },\n  warning: {\n    background: '$button-background-warning',\n    backgroundHover: '$button-background-warning-hover',\n    backgroundPressed: '$button-background-warning-pressed',\n    text: '$text-on-static-dark',\n  },\n  danger: {\n    background: '$button-background-danger',\n    backgroundHover: '$button-background-danger-hover',\n    backgroundPressed: '$button-background-danger-pressed',\n    text: '$button-text-on-danger',\n  },\n}\n\nexport const primaryActionColorVariants = mapKeysToVariants(\n  PRIMARY_ACTION_COLORS,\n  key => {\n    const colors = PRIMARY_ACTION_COLORS[key]\n    if (colors == null) {\n      return {}\n    }\n\n    return {\n      backgroundColor: colors.background,\n      color: colors.text,\n      '&:hover, &[data-hovered]': {\n        backgroundColor: colors.backgroundHover,\n        color: colors.text,\n      },\n      '&:active, &[data-pressed]': {\n        backgroundColor: colors.backgroundPressed,\n        color: colors.text,\n      },\n    }\n  }\n)\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Button } from '@mirohq/design-system-button'\nimport type { ButtonProps } from '@mirohq/design-system-button'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { useCalloutContext } from '../hooks/use-callout-context'\nimport { primaryActionColorVariants } from '../callout.colors'\n\nconst StyledAction = styled(Button, {\n  variants: {\n    color: primaryActionColorVariants,\n  },\n})\n\nexport interface ActionProps extends Omit<ButtonProps, 'variant'> {\n  /**\n   * Visual prominence of the action.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary'\n}\n\nexport const Action = React.forwardRef<ElementRef<typeof Button>, ActionProps>(\n  ({ variant = 'primary', size = 'medium', ...props }, forwardRef) => {\n    const { variant: calloutVariant } = useCalloutContext()\n    const isPrimary = variant === 'primary'\n    const color =\n      isPrimary &&\n      typeof calloutVariant === 'string' &&\n      calloutVariant in primaryActionColorVariants\n        ? (calloutVariant as keyof typeof primaryActionColorVariants)\n        : undefined\n\n    return (\n      <StyledAction\n        {...props}\n        ref={forwardRef}\n        size={size}\n        variant={isPrimary ? 'primary' : 'ghost'}\n        color={color}\n      />\n    )\n  }\n)\n\nAction.displayName = 'Callout.Action'\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: 'inherit',\n  fontSize: '$175',\n  lineHeight: '$400',\n  marginTop: '$25',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n  marginRight: '$150',\n  variants: {\n    variant: {\n      information: {\n        color: '$status-icon-on-info',\n      },\n      warning: {\n        color: '$status-icon-on-warning',\n      },\n      danger: {\n        color: '$status-icon-on-error',\n      },\n      success: {\n        color: '$status-icon-on-success',\n      },\n      neutral: {\n        color: '$icon-default',\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  neutral: <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 { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\n// 6px margin + the 2px Content column gap = 8px between tag and title, per\n// design. There is no 6px space token, hence the calc.\nexport const TagSlot = styled(Primitive.div, {\n  display: 'flex',\n  alignItems: 'center',\n  gap: '$50',\n  marginBottom: 'calc($space$100 - $space$25)',\n})\n\nTagSlot.displayName = 'Callout.TagSlot'\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', color: 'inherit' })\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: '$100',\n  top: '$100',\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 { Action } from './partials/action'\nimport { Content } from './partials/content'\nimport { Description } from './partials/description'\nimport { IconSlot } from './partials/icon-slot'\nimport { TagSlot } from './partials/tag-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      role,\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={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  Action: typeof Action\n  Content: typeof Content\n  Description: typeof Description\n  IconSlot: typeof IconSlot\n  TagSlot: typeof TagSlot\n  Title: typeof Title\n  Actions: typeof Actions\n}\n\nCallout.Action = Action\nCallout.Content = Content\nCallout.Description = Description\nCallout.IconSlot = IconSlot\nCallout.TagSlot = TagSlot\nCallout.Title = Title\nCallout.Actions = Actions\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import react__default, { ComponentPropsWithRef, ForwardRefExoticComponent } from 'react';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
 import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
+import { ButtonProps } from '@mirohq/design-system-button';
 import { HeadingProps } from '@mirohq/design-system-typography';
 
 /* Utilities */
@@ -32,6 +33,16 @@ declare const StyledCallout: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
     dismissible?: boolean | "true" | "false" | undefined;
 }, {}>;
 type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>;
+type CalloutVariant = Extract<StyledCalloutProps['variant'], string>;
+
+interface ActionProps extends Omit<ButtonProps, 'variant'> {
+    /**
+     * Visual prominence of the action.
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary';
+}
+declare const Action: react__default.ForwardRefExoticComponent<Omit<ActionProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
 
 declare const Content: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
 
@@ -52,6 +63,8 @@ interface IconSlotProps extends StyledIconSlotProps {
 }
 declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<IconSlotProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
+declare const TagSlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
+
 interface TitleProps extends Omit<HeadingProps, 'level' | 'styledAs'> {
     level?: HeadingProps['level'];
 }
@@ -90,12 +103,14 @@ type CalloutProps = (Omit<StyledCalloutProps, 'dismissible'> & {
 }));
 declare const Callout: ForwardRefExoticComponent<CalloutProps> & Partials;
 interface Partials {
+    Action: typeof Action;
     Content: typeof Content;
     Description: typeof Description;
     IconSlot: typeof IconSlot;
+    TagSlot: typeof TagSlot;
     Title: typeof Title;
     Actions: typeof Actions;
 }
 
 export { Callout };
-export type { CalloutProps };
+export type { ActionProps as CalloutActionProps, CalloutProps, CalloutVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-callout",
-  "version": "1.4.37-reactdismissablelayer.0",
+  "version": "1.5.1",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,11 +26,13 @@
     "react": "^16.14 || ^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@mirohq/design-system-icon-button": "^4.2.40-reactdismissablelayer.0",
-    "@mirohq/design-system-icons": "^1.45.1-reactdismissablelayer.0",
-    "@mirohq/design-system-primitive": "^2.2.2-reactdismissablelayer.0",
+    "@mirohq/design-system-button": "^5.3.14",
+    "@mirohq/design-system-icon-button": "^4.2.39",
+    "@mirohq/design-system-icons": "^1.45.0",
     "@mirohq/design-system-stitches": "^3.3.32",
-    "@mirohq/design-system-typography": "^1.3.35-reactdismissablelayer.0"
+    "@mirohq/design-system-primitive": "^2.2.1",
+    "@mirohq/design-system-typography": "^1.3.34",
+    "@mirohq/design-system-utils": "^1.3.0"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",