npm - @mirohq/design-system-callout - Versions diffs - 1.3.21 → 1.4.0 - Mend

@mirohq/design-system-callout 1.3.21 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/main.js CHANGED Viewed

@@ -22,20 +22,29 @@ const StyledCallout = designSystemStitches.styled(designSystemPrimitive.Primitiv
   variants: {
     variant: {
       information: {
-        backgroundColor: "$background-primary-subtle",
-        borderColor: "$border-primary-subtle"
+        backgroundColor: "$status-background-info",
+        borderColor: "$status-border-info",
+        color: "$status-text-on-info"
       },
       warning: {
-        backgroundColor: "$background-warning-subtle",
-        borderColor: "$border-warning-subtle"
+        backgroundColor: "$status-background-warning",
+        borderColor: "$status-border-warning",
+        color: "$status-text-on-warning"
       },
       danger: {
-        backgroundColor: "$background-danger-subtle",
-        borderColor: "$border-danger-subtle"
+        backgroundColor: "$status-background-error",
+        borderColor: "$status-border-error",
+        color: "$status-text-on-error"
       },
       success: {
-        backgroundColor: "$background-success-subtle",
-        borderColor: "$border-success-subtle"
+        backgroundColor: "$status-background-success",
+        borderColor: "$status-border-success",
+        color: "$status-text-on-success"
+      },
+      neutral: {
+        backgroundColor: "$background-surface",
+        borderColor: "$border-default",
+        color: "$text-default"
       }
     },
     dismissible: {
@@ -60,7 +69,7 @@ const Content = designSystemStitches.styled(designSystemPrimitive.Primitive.div,
 Content.displayName = "Callout.Content";
 const Description = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  color: "$text-neutrals",
+  color: "inherit",
   fontSize: "$175",
   lineHeight: "$400",
   marginTop: "$25"
@@ -86,16 +95,19 @@ const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primiti
   variants: {
     variant: {
       information: {
-        color: "$icon-primary"
+        color: "$status-icon-on-info"
       },
       warning: {
-        color: "$icon-warning"
+        color: "$status-icon-on-warning"
       },
       danger: {
-        color: "$icon-danger"
+        color: "$status-icon-on-error"
       },
       success: {
-        color: "$icon-success"
+        color: "$status-icon-on-success"
+      },
+      neutral: {
+        color: "$icon-default"
       }
     }
   }
@@ -106,6 +118,7 @@ const iconVariant = {
   warning: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconExclamationPointCircle, {}),
   danger: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconExclamationPointCircle, {}),
   information: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconInformationMarkCircle, {}),
+  neutral: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconInformationMarkCircle, {}),
   default: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCheckMark, {})
 };
 const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {

package/dist/main.js.map CHANGED Viewed

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

package/dist/module.js CHANGED Viewed

@@ -20,20 +20,29 @@ const StyledCallout = styled(Primitive.div, {
   variants: {
     variant: {
       information: {
-        backgroundColor: "$background-primary-subtle",
-        borderColor: "$border-primary-subtle"
+        backgroundColor: "$status-background-info",
+        borderColor: "$status-border-info",
+        color: "$status-text-on-info"
       },
       warning: {
-        backgroundColor: "$background-warning-subtle",
-        borderColor: "$border-warning-subtle"
+        backgroundColor: "$status-background-warning",
+        borderColor: "$status-border-warning",
+        color: "$status-text-on-warning"
       },
       danger: {
-        backgroundColor: "$background-danger-subtle",
-        borderColor: "$border-danger-subtle"
+        backgroundColor: "$status-background-error",
+        borderColor: "$status-border-error",
+        color: "$status-text-on-error"
       },
       success: {
-        backgroundColor: "$background-success-subtle",
-        borderColor: "$border-success-subtle"
+        backgroundColor: "$status-background-success",
+        borderColor: "$status-border-success",
+        color: "$status-text-on-success"
+      },
+      neutral: {
+        backgroundColor: "$background-surface",
+        borderColor: "$border-default",
+        color: "$text-default"
       }
     },
     dismissible: {
@@ -58,7 +67,7 @@ const Content = styled(Primitive.div, {
 Content.displayName = "Callout.Content";
 const Description = styled(Primitive.div, {
-  color: "$text-neutrals",
+  color: "inherit",
   fontSize: "$175",
   lineHeight: "$400",
   marginTop: "$25"
@@ -84,16 +93,19 @@ const StyledIconSlot = styled(Primitive.div, {
   variants: {
     variant: {
       information: {
-        color: "$icon-primary"
+        color: "$status-icon-on-info"
       },
       warning: {
-        color: "$icon-warning"
+        color: "$status-icon-on-warning"
       },
       danger: {
-        color: "$icon-danger"
+        color: "$status-icon-on-error"
       },
       success: {
-        color: "$icon-success"
+        color: "$status-icon-on-success"
+      },
+      neutral: {
+        color: "$icon-default"
       }
     }
   }
@@ -104,6 +116,7 @@ const iconVariant = {
   warning: /* @__PURE__ */ jsx(IconExclamationPointCircle, {}),
   danger: /* @__PURE__ */ jsx(IconExclamationPointCircle, {}),
   information: /* @__PURE__ */ jsx(IconInformationMarkCircle, {}),
+  neutral: /* @__PURE__ */ jsx(IconInformationMarkCircle, {}),
   default: /* @__PURE__ */ jsx(IconCheckMark, {})
 };
 const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {

package/dist/module.js.map CHANGED Viewed

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

package/dist/types.d.ts CHANGED Viewed

@@ -25,10 +25,10 @@ type TransformProps<Props, Media> = {
 }
 declare const StyledCallout: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "variant" | "dismissible"> & TransformProps<{
-    variant?: "information" | "warning" | "danger" | "success" | undefined;
+    variant?: "information" | "warning" | "danger" | "success" | "neutral" | undefined;
     dismissible?: boolean | "true" | "false" | undefined;
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
-    variant?: "information" | "warning" | "danger" | "success" | undefined;
+    variant?: "information" | "warning" | "danger" | "success" | "neutral" | undefined;
     dismissible?: boolean | "true" | "false" | undefined;
 }, {}>;
 type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>;
@@ -38,9 +38,9 @@ declare const Content: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_
 declare const Description: 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">>, {}, {}>;
 declare const StyledIconSlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "variant"> & TransformProps<{
-    variant?: "information" | "warning" | "danger" | "success" | undefined;
+    variant?: "information" | "warning" | "danger" | "success" | "neutral" | undefined;
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
-    variant?: "information" | "warning" | "danger" | "success" | undefined;
+    variant?: "information" | "warning" | "danger" | "success" | "neutral" | undefined;
 }, {}>;
 type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-callout",
-  "version": "1.3.21",
+  "version": "1.4.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,11 +26,11 @@
     "react": "^16.14 || ^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@mirohq/design-system-icon-button": "^4.2.11",
-    "@mirohq/design-system-icons": "^1.35.7",
+    "@mirohq/design-system-icon-button": "^4.2.12",
+    "@mirohq/design-system-stitches": "^3.3.8",
     "@mirohq/design-system-primitive": "^2.2.1",
-    "@mirohq/design-system-stitches": "^3.3.7",
-    "@mirohq/design-system-typography": "^1.3.9"
+    "@mirohq/design-system-typography": "^1.3.10",
+    "@mirohq/design-system-icons": "^1.35.8"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",