@mirohq/design-system-callout 1.5.14 → 1.5.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/main.js.map +1 -1
  2. package/dist/module.js.map +1 -1
  3. package/package.json +7 -7
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"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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"}
1
+ {"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'\nimport type { JSX } 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":";;;;;;;;;;;;AAIO,MAAM,aAAA,GAAgBA,2BAAA,CAAOC,+BAAA,CAAU,GAAA,EAAK;AAAA,EACjD,QAAA,EAAU,UAAA;AAAA;AAAA;AAAA;AAAA,EAIV,MAAA,EAAQ,MAAA;AAAA,EACR,OAAA,EAAS,MAAA;AAAA,EACT,WAAA,EAAa,KAAA;AAAA,EACb,WAAA,EAAa,OAAA;AAAA,EACb,YAAA,EAAc,eAAA;AAAA,EACd,OAAA,EAAS,MAAA;AAAA,EACT,cAAA,EAAgB,QAAA;AAAA,EAChB,mBAAA,EAAqB,UAAA;AAAA,EACrB,iBAAA,EAAmB,gBAAA;AAAA,EACnB,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,WAAA,EAAa;AAAA,QACX,eAAA,EAAiB,yBAAA;AAAA,QACjB,WAAA,EAAa,qBAAA;AAAA,QACb,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,eAAA,EAAiB,4BAAA;AAAA,QACjB,WAAA,EAAa,wBAAA;AAAA,QACb,KAAA,EAAO;AAAA,OACT;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,eAAA,EAAiB,0BAAA;AAAA,QACjB,WAAA,EAAa,sBAAA;AAAA,QACb,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,eAAA,EAAiB,4BAAA;AAAA,QACjB,WAAA,EAAa,wBAAA;AAAA,QACb,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,eAAA,EAAiB,qBAAA;AAAA,QACjB,WAAA,EAAa,iBAAA;AAAA,QACb,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS;AAAA,OACX;AAAA,MACA,KAAA,EAAO;AAAA,QACL,mBAAA,EAAqB,UAAA;AAAA,QACrB,iBAAA,EAAmB;AAAA;AACrB;AACF;AAEJ,CAAC,CAAA;;ACzCD,MAAM,cAAA,GAAiBC,mBAAA,CAAmC,EAAS,CAAA;AAE5D,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,GAAG;AACL,CAAA,qBACEC,cAAA;AAAA,EAAC,cAAA,CAAe,QAAA;AAAA,EAAf;AAAA,IACC,KAAA,EAAO;AAAA,MACL,GAAG;AAAA,KACL;AAAA,IAEC;AAAA;AACH,CAAA;AAGK,MAAM,iBAAA,GAAoB,MAC/BC,gBAAA,CAAW,cAAc,CAAA;;ACjB3B,MAAM,qBAAA,GAAyE;AAAA,EAC7E,WAAA,EAAa;AAAA,IACX,UAAA,EAAY,yBAAA;AAAA,IACZ,eAAA,EAAiB,+BAAA;AAAA,IACjB,iBAAA,EAAmB,iCAAA;AAAA,IACnB,IAAA,EAAM;AAAA,GACR;AAAA,EACA,OAAA,EAAS;AAAA,IACP,UAAA,EAAY,4BAAA;AAAA,IACZ,eAAA,EAAiB,kCAAA;AAAA,IACjB,iBAAA,EAAmB,oCAAA;AAAA,IACnB,IAAA,EAAM;AAAA,GACR;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,UAAA,EAAY,2BAAA;AAAA,IACZ,eAAA,EAAiB,iCAAA;AAAA,IACjB,iBAAA,EAAmB,mCAAA;AAAA,IACnB,IAAA,EAAM;AAAA;AAEV,CAAA;AAEO,MAAM,0BAAA,GAA6BC,mCAAA;AAAA,EACxC,qBAAA;AAAA,EACA,CAAA,GAAA,KAAO;AACL,IAAA,MAAM,MAAA,GAAS,sBAAsB,GAAG,CAAA;AACxC,IAAA,IAAI,UAAU,IAAA,EAAM;AAClB,MAAA,OAAO,EAAC;AAAA,IACV;AAEA,IAAA,OAAO;AAAA,MACL,iBAAiB,MAAA,CAAO,UAAA;AAAA,MACxB,OAAO,MAAA,CAAO,IAAA;AAAA,MACd,0BAAA,EAA4B;AAAA,QAC1B,iBAAiB,MAAA,CAAO,eAAA;AAAA,QACxB,OAAO,MAAA,CAAO;AAAA,OAChB;AAAA,MACA,2BAAA,EAA6B;AAAA,QAC3B,iBAAiB,MAAA,CAAO,iBAAA;AAAA,QACxB,OAAO,MAAA,CAAO;AAAA;AAChB,KACF;AAAA,EACF;AACF,CAAA;;AC/CA,MAAM,YAAA,GAAeL,4BAAOM,yBAAA,EAAQ;AAAA,EAClC,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAUM,MAAM,SAAS,KAAA,CAAM,UAAA;AAAA,EAC1B,CAAC,EAAE,OAAA,GAAU,SAAA,EAAW,OAAO,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,UAAA,KAAe;AAClE,IAAA,MAAM,EAAE,OAAA,EAAS,cAAA,EAAe,GAAI,iBAAA,EAAkB;AACtD,IAAA,MAAM,YAAY,OAAA,KAAY,SAAA;AAC9B,IAAA,MAAM,QACJ,SAAA,IACA,OAAO,mBAAmB,QAAA,IAC1B,cAAA,IAAkB,6BACb,cAAA,GACD,MAAA;AAEN,IAAA,uBACEH,cAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA,EAAK,UAAA;AAAA,QACL,IAAA;AAAA,QACA,OAAA,EAAS,YAAY,SAAA,GAAY,OAAA;AAAA,QACjC;AAAA;AAAA,KACF;AAAA,EAEJ;AACF,CAAA;AAEA,MAAA,CAAO,WAAA,GAAc,gBAAA;;AC3Cd,MAAM,OAAA,GAAUH,2BAAA,CAAOC,+BAAA,CAAU,GAAA,EAAK;AAAA,EAC3C,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,GAAA,EAAK,KAAA;AAAA,EACL,QAAA,EAAU,MAAA;AAAA,EACV,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,OAAA,CAAQ,WAAA,GAAc,iBAAA;;ACRf,MAAM,WAAA,GAAcD,2BAAA,CAAOC,+BAAA,CAAU,GAAA,EAAK;AAAA,EAC/C,KAAA,EAAO,SAAA;AAAA,EACP,QAAA,EAAU,MAAA;AAAA,EACV,UAAA,EAAY,MAAA;AAAA,EACZ,SAAA,EAAW;AACb,CAAC,CAAA;AAED,WAAA,CAAY,WAAA,GAAc,qBAAA;;ACPnB,MAAM,cAAA,GAAiBD,2BAAA,CAAOC,+BAAA,CAAU,GAAA,EAAK;AAAA,EAClD,WAAA,EAAa,MAAA;AAAA,EACb,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,WAAA,EAAa;AAAA,QACX,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,KAAA,EAAO;AAAA,OACT;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,KAAA,EAAO;AAAA;AACT;AACF;AAEJ,CAAC,CAAA;;ACJD,MAAM,WAAA,GAAc;AAAA,EAClB,OAAA,iCAAUM,+BAAA,EAAA,EAAc,CAAA;AAAA,EACxB,OAAA,iCAAUC,4CAAA,EAAA,EAA2B,CAAA;AAAA,EACrC,MAAA,iCAASA,4CAAA,EAAA,EAA2B,CAAA;AAAA,EACpC,WAAA,iCAAcC,2CAAA,EAAA,EAA0B,CAAA;AAAA,EACxC,OAAA,iCAAUA,2CAAA,EAAA,EAA0B,CAAA;AAAA,EACpC,OAAA,iCAAUF,+BAAA,EAAA,EAAc;AAC1B,CAAA;AAEO,MAAM,QAAA,GAAW,MAAM,UAAA,CAG5B,CAAC,EAAE,QAAA,EAAU,GAAG,SAAA,EAAU,EAAG,UAAA,KAAe;AAhC9C,EAAA,IAAA,EAAA;AAiCE,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,iBAAA,EAAkB;AAEtC,EAAA,IAAI,iBAAA,GAAoB,QAAA;AACxB,EAAA,IAAI,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,QAAQ,IAAI,CAAA,EAAG;AACtC,IAAA,iBAAA,GAAA,CACE,EAAA,GAAA,WAAA,CAAY,OAAmC,CAAA,KAA/C,IAAA,GAAA,EAAA,GAAoD,WAAA,CAAY,OAAA;AAAA,EACpE;AAEA,EAAA,sCACG,cAAA,EAAA,EAAgB,GAAG,WAAW,GAAA,EAAK,UAAA,EAAY,SAC7C,QAAA,EAAA,iBAAA,EACH,CAAA;AAEJ,CAAC,CAAA;;ACzCM,MAAM,OAAA,GAAUP,2BAAA,CAAOC,+BAAA,CAAU,GAAA,EAAK;AAAA,EAC3C,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,KAAA;AAAA,EACL,YAAA,EAAc;AAChB,CAAC,CAAA;AAED,OAAA,CAAQ,WAAA,GAAc,iBAAA;;ACNtB,MAAM,WAAA,GAAcD,4BAAOU,8BAAA,EAAS,EAAE,YAAY,MAAA,EAAQ,KAAA,EAAO,WAAW,CAAA;AAMrE,MAAM,QAAQ,KAAA,CAAM,UAAA;AAAA,EACzB,CAAC,EAAE,KAAA,GAAQ,CAAA,EAAG,GAAG,OAAM,EAAG,UAAA,qBACxBP,cAAA,CAAC,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAA,EAAK,UAAA,EAAY,KAAA,EAAc,UAAS,IAAA,EAAK;AAEzE,CAAA;AAEA,KAAA,CAAM,WAAA,GAAc,eAAA;;ACfb,MAAM,OAAA,GAAUH,2BAAA,CAAOC,+BAAA,CAAU,GAAA,EAAK;AAAA,EAC3C,UAAA,EAAY,SAAA;AAAA,EACZ,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,MAAA;AAAA,EACT,GAAA,EAAK;AACP,CAAC,CAAA;AAED,OAAA,CAAQ,WAAA,GAAc,iBAAA;;ACLtB,MAAM,mBAAA,GAAsBD,4BAAOW,iCAAA,EAAY;AAAA,EAC7C,QAAA,EAAU,UAAA;AAAA,EACV,KAAA,EAAO,MAAA;AAAA,EACP,GAAA,EAAK;AACP,CAAC,CAAA;AAEM,MAAM,aAAA,GAAgB,CAAC,KAAA,qBAC5BR,cAAA;AAAA,EAAC,mBAAA;AAAA,EAAA;AAAA,IACC,OAAA,EAAQ,OAAA;AAAA,IACR,IAAA,EAAK,QAAA;AAAA,IACL,aAAA,EAAY,gBAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,yCAACS,2BAAA,EAAA,EAAU;AAAA;AACb,CAAA;AAGF,aAAA,CAAc,WAAA,GAAc,uBAAA;;AC4BrB,MAAM,UAAU,KAAA,CAAM,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,SAAA;AAAA,IACA,WAAA,GAAc,IAAA;AAAA,IACd,SAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,KAEL,UAAA,KACG;AACH,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIC,cAAA;AAAA,MAChD,SAAA,IAAA,IAAA,GAAA,SAAA,GAAa;AAAA,KACf;AAEA,IAAA,IAAI,gCAAa,iBAAA,EAAmB;AAClC,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,MAAM,kBAAkB,MAAY;AAClC,MAAA,oBAAA,CAAqB,IAAI,CAAA;AACzB,MAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,EAAA;AAAA,IACF,CAAA;AAEA,IAAA,uBACEV,cAAA,CAAC,mBAAgB,OAAA,EACf,QAAA,kBAAAW,eAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA,EAAK,UAAA;AAAA,QACL,OAAA;AAAA,QACA,WAAA;AAAA,QACA,MAAM,IAAA,IAAA,IAAA,GAAA,IAAA,GAAQ,OAAA;AAAA,QAEb,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,WAAA,IAAe,SAAA,IAAa,IAAA,IAAA,CAAQ,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,UAAS,CAAA,oBAC1DX,cAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAY,YAAA;AAAA,cACZ,OAAA,EAAS;AAAA;AAAA;AACX;AAAA;AAAA,KAEJ,EACF,CAAA;AAAA,EAEJ;AACF;AAYA,OAAA,CAAQ,MAAA,GAAS,MAAA;AACjB,OAAA,CAAQ,OAAA,GAAU,OAAA;AAClB,OAAA,CAAQ,WAAA,GAAc,WAAA;AACtB,OAAA,CAAQ,QAAA,GAAW,QAAA;AACnB,OAAA,CAAQ,OAAA,GAAU,OAAA;AAClB,OAAA,CAAQ,KAAA,GAAQ,KAAA;AAChB,OAAA,CAAQ,OAAA,GAAU,OAAA;;;;"}
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"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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"}
1
+ {"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'\nimport type { JSX } 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-callout",
3
- "version": "1.5.14",
3
+ "version": "1.5.16",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,13 +26,13 @@
26
26
  "react": "^16.14 || ^17 || ^18 || ^19"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-button": "^5.3.22",
30
- "@mirohq/design-system-icons": "^1.51.0",
29
+ "@mirohq/design-system-icon-button": "^4.2.48",
30
+ "@mirohq/design-system-button": "^5.3.23",
31
+ "@mirohq/design-system-icons": "^1.52.0",
31
32
  "@mirohq/design-system-primitive": "^2.2.1",
32
- "@mirohq/design-system-stitches": "^3.3.36",
33
- "@mirohq/design-system-icon-button": "^4.2.47",
34
- "@mirohq/design-system-typography": "^1.3.38",
35
- "@mirohq/design-system-utils": "^1.5.0"
33
+ "@mirohq/design-system-stitches": "^3.3.37",
34
+ "@mirohq/design-system-typography": "^1.3.39",
35
+ "@mirohq/design-system-utils": "^1.5.1"
36
36
  },
37
37
  "scripts": {
38
38
  "build": "rollup -c ../../../rollup.config.js",