@mirohq/design-system-callout 0.2.4 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. package/dist/main.js +23 -11
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +23 -11
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +5 -4
  6. package/package.json +2 -2
package/dist/main.js CHANGED
@@ -22,8 +22,8 @@ const StyledCallout = designSystemStitches.styled(designSystemPrimitive.Primitiv
22
22
  borderRadius: "$75",
23
23
  display: "grid",
24
24
  justifyContent: "center",
25
- gridTemplateColumns: "auto 1fr $8",
26
- gridTemplateAreas: "'icon content close'",
25
+ gridTemplateColumns: "auto 1fr",
26
+ gridTemplateAreas: "'icon content'",
27
27
  variants: {
28
28
  variant: {
29
29
  information: {
@@ -44,6 +44,9 @@ const StyledCallout = designSystemStitches.styled(designSystemPrimitive.Primitiv
44
44
  }
45
45
  },
46
46
  dismissible: {
47
+ true: {
48
+ padding: "$200 $400 $200 $200"
49
+ },
47
50
  false: {
48
51
  gridTemplateColumns: "auto 1fr",
49
52
  gridTemplateAreas: "'icon content'"
@@ -53,20 +56,19 @@ const StyledCallout = designSystemStitches.styled(designSystemPrimitive.Primitiv
53
56
  });
54
57
 
55
58
  const Content = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
56
- display: "grid",
59
+ display: "flex",
60
+ flexDirection: "column",
57
61
  gap: "$25",
58
62
  maxWidth: "48em",
59
- gridArea: "content",
60
- gridTemplateRows: "auto 1fr",
61
- gridTemplateAreas: "'title'\n 'description'"
63
+ gridArea: "content"
62
64
  });
63
65
  Content.displayName = "Callout.Content";
64
66
 
65
67
  const Description = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
66
- gridArea: "description",
67
- color: "$text-neutrals-subtle",
68
+ color: "$text-neutrals",
68
69
  fontSize: "$175",
69
- lineHeight: "$400"
70
+ lineHeight: "$400",
71
+ marginTop: "$25"
70
72
  });
71
73
  Description.displayName = "Callout.Description";
72
74
 
@@ -123,6 +125,10 @@ const IconSlot = React__default["default"].forwardRef(({ children, ...restProps
123
125
 
124
126
  const Title = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(designSystemTypography.Heading, { ...props, ref: forwardRef, level: 4 }));
125
127
 
128
+ const StyledTitle = designSystemStitches.styled(Title, {
129
+ lineHeight: "$300"
130
+ });
131
+
126
132
  const Actions = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
127
133
  gridColumn: "content",
128
134
  gridRow: -1,
@@ -143,6 +149,12 @@ const DismissButton = (props) => /* @__PURE__ */ jsxRuntime.jsx(
143
149
  }
144
150
  );
145
151
 
152
+ const StyledDismissButton = designSystemStitches.styled(DismissButton, {
153
+ position: "absolute",
154
+ right: "$300",
155
+ top: "$300"
156
+ });
157
+
146
158
  const Callout = React__default["default"].forwardRef(
147
159
  ({
148
160
  dismissed,
@@ -174,7 +186,7 @@ const Callout = React__default["default"].forwardRef(
174
186
  children: [
175
187
  children,
176
188
  dismissible && onDismiss != null && (dismissLabel == null ? void 0 : dismissLabel.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
177
- DismissButton,
189
+ StyledDismissButton,
178
190
  {
179
191
  "aria-label": dismissLabel,
180
192
  onPress: handleDismissed
@@ -188,7 +200,7 @@ const Callout = React__default["default"].forwardRef(
188
200
  Callout.Content = Content;
189
201
  Callout.Description = Description;
190
202
  Callout.IconSlot = IconSlot;
191
- Callout.Title = Title;
203
+ Callout.Title = StyledTitle;
192
204
  Callout.Actions = Actions;
193
205
 
194
206
  exports.Callout = Callout;
package/dist/main.js.map CHANGED
@@ -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 gap: '$150',\n padding: '$200',\n borderWidth: '$sm',\n borderStyle: 'solid',\n borderRadius: '$75',\n display: 'grid',\n justifyContent: 'center',\n gridTemplateColumns: 'auto 1fr $8',\n gridTemplateAreas: `'icon content close'`,\n variants: {\n variant: {\n information: {\n backgroundColor: '$background-primary-subtle',\n borderColor: '$border-primary-subtle',\n },\n warning: {\n backgroundColor: '$background-warning-subtle',\n borderColor: '$border-warning-subtle',\n },\n danger: {\n backgroundColor: '$background-danger-subtle',\n borderColor: '$border-danger-subtle',\n },\n success: {\n backgroundColor: '$background-success-subtle',\n borderColor: '$border-success-subtle',\n },\n },\n dismissible: {\n false: {\n gridTemplateColumns: 'auto 1fr',\n gridTemplateAreas: `'icon content'`,\n },\n },\n },\n})\n\nexport type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Content = styled(Primitive.div, {\n display: 'grid',\n gap: '$25',\n maxWidth: '48em',\n gridArea: 'content',\n gridTemplateRows: 'auto 1fr',\n gridTemplateAreas: `'title'\n 'description'`,\n})\n\nContent.displayName = 'Callout.Content'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Description = styled(Primitive.div, {\n gridArea: 'description',\n color: '$text-neutrals-subtle',\n fontSize: '$175',\n lineHeight: '$400',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport type CalloutProviderProps = CalloutContextProps\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n children,\n ...restProps\n}: PropsWithChildren<CalloutProviderProps>): JSX.Element => (\n <CalloutContext.Provider\n value={{\n ...restProps,\n }}\n >\n {children}\n </CalloutContext.Provider>\n)\n\nexport const useCalloutContext = (): CalloutContextProps =>\n useContext(CalloutContext)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n variants: {\n variant: {\n information: {\n color: '$icon-primary',\n },\n warning: {\n color: '$icon-warning',\n },\n danger: {\n color: '$icon-danger',\n },\n success: {\n color: '$icon-success',\n },\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport {\n IconCheckMark,\n IconExclamationPointCircle,\n IconInformationMarkCircle,\n} from '@mirohq/design-system-icons'\n\nimport { useCalloutContext } from '../hooks/use-callout-context'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children?: React.ReactNode\n}\n\nconst iconVariant = {\n success: <IconCheckMark />,\n warning: <IconExclamationPointCircle />,\n danger: <IconExclamationPointCircle />,\n information: <IconInformationMarkCircle />,\n default: <IconCheckMark />,\n}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { variant } = useCalloutContext()\n\n let formattedChildren = children\n if (React.Children.count(children) < 1) {\n formattedChildren =\n iconVariant[variant as keyof typeof iconVariant] ?? iconVariant.default\n }\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n {formattedChildren}\n </StyledIconSlot>\n )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Heading } from '@mirohq/design-system-typography'\nimport type { HeadingProps } from '@mirohq/design-system-typography'\n\nexport interface GroupLabelProps extends Omit<HeadingProps, 'level'> {}\n\nexport const Title = React.forwardRef<\n ElementRef<typeof Heading>,\n GroupLabelProps\n>((props, forwardRef) => <Heading {...props} ref={forwardRef} level={4} />)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Actions = styled(Primitive.div, {\n gridColumn: 'content',\n gridRow: -1,\n display: 'flex',\n gap: '$100',\n})\n\nActions.displayName = 'Callout.Actions'\n","import { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nexport const DismissButton: React.FC<IconButtonProps> = props => (\n <IconButton\n css={{ gridArea: 'close' }}\n variant='ghost'\n size='medium'\n data-testid='dismiss-button'\n {...props}\n >\n <IconCross />\n </IconButton>\n)\n","import React, { useState } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledCallout } from './callout.styled'\nimport type { StyledCalloutProps } from './callout.styled'\nimport { Content } from './partials/content'\nimport { Description } from './partials/description'\nimport { IconSlot } from './partials/icon-slot'\nimport { Title } from './partials/title'\nimport { Actions } from './partials/actions'\nimport { DismissButton } from './partials/dismiss-button'\nimport { CalloutProvider } from './hooks/use-callout-context'\n\ninterface DismissibleProps {\n /**\n * Whether or not the component is dismissed (hidden)\n */\n dismissed?: boolean\n\n /**\n * Callback invoked once dismiss button is clicked\n */\n onDismiss?: () => void\n\n /**\n * aria-label for the dismiss button\n */\n dismissLabel: string\n}\n\nexport type CalloutProps = (Omit<StyledCalloutProps, 'dismissible'> & {\n /**\n * Change the component style.\n */\n variant: StyledCalloutProps['variant']\n\n /**\n * Whether or not the component should display dismiss button\n * @default true\n */\n dismissible?: boolean\n}) &\n (\n | DismissibleProps // uncontrolled\n | Required<DismissibleProps> // controlled\n | ({ dismissible?: false } & { [K in keyof DismissibleProps]?: never })\n )\n\nexport const Callout = React.forwardRef<\n ElementRef<typeof StyledCallout>,\n CalloutProps\n>(\n (\n {\n dismissed,\n dismissible = true,\n onDismiss,\n dismissLabel,\n children,\n variant,\n ...props\n },\n forwardRef\n ) => {\n const [internalDismissed, setInternalDismissed] = useState<boolean>(\n dismissed ?? false\n )\n\n if (dismissed ?? internalDismissed) {\n return null\n }\n\n const handleDismissed = (): void => {\n setInternalDismissed(true)\n onDismiss?.()\n }\n\n return (\n <CalloutProvider variant={variant}>\n <StyledCallout\n {...props}\n ref={forwardRef}\n variant={variant}\n dismissible={dismissible}\n role='alert'\n >\n {children}\n {dismissible && onDismiss != null && dismissLabel?.length > 0 && (\n <DismissButton\n aria-label={dismissLabel}\n onPress={handleDismissed}\n />\n )}\n </StyledCallout>\n </CalloutProvider>\n )\n }\n) as ForwardRefExoticComponent<CalloutProps> & Partials\n\nexport interface Partials {\n Content: typeof Content\n Description: typeof Description\n IconSlot: typeof IconSlot\n Title: typeof Title\n Actions: typeof Actions\n}\n\nCallout.Content = Content\nCallout.Description = Description\nCallout.IconSlot = IconSlot\nCallout.Title = Title\nCallout.Actions = Actions\n"],"names":["styled","Primitive","createContext","jsx","useContext","IconCheckMark","IconExclamationPointCircle","IconInformationMarkCircle","React","Heading","IconButton","IconCross","useState","jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/callout.styled.tsx","../src/partials/content.tsx","../src/partials/description.tsx","../src/hooks/use-callout-context.tsx","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/title.tsx","../src/partials/title-styled.ts","../src/partials/actions.tsx","../src/partials/dismiss-button.tsx","../src/partials/dismiss-button-styled.ts","../src/callout.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledCallout = styled(Primitive.div, {\n 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'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport type CalloutProviderProps = CalloutContextProps\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n children,\n ...restProps\n}: PropsWithChildren<CalloutProviderProps>): JSX.Element => (\n <CalloutContext.Provider\n value={{\n ...restProps,\n }}\n >\n {children}\n </CalloutContext.Provider>\n)\n\nexport const useCalloutContext = (): CalloutContextProps =>\n useContext(CalloutContext)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n variants: {\n variant: {\n information: {\n color: '$icon-primary',\n },\n warning: {\n color: '$icon-warning',\n },\n danger: {\n color: '$icon-danger',\n },\n success: {\n color: '$icon-success',\n },\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport {\n IconCheckMark,\n IconExclamationPointCircle,\n IconInformationMarkCircle,\n} from '@mirohq/design-system-icons'\n\nimport { useCalloutContext } from '../hooks/use-callout-context'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children?: React.ReactNode\n}\n\nconst iconVariant = {\n success: <IconCheckMark />,\n warning: <IconExclamationPointCircle />,\n danger: <IconExclamationPointCircle />,\n information: <IconInformationMarkCircle />,\n default: <IconCheckMark />,\n}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { variant } = useCalloutContext()\n\n let formattedChildren = children\n if (React.Children.count(children) < 1) {\n formattedChildren =\n iconVariant[variant as keyof typeof iconVariant] ?? iconVariant.default\n }\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n {formattedChildren}\n </StyledIconSlot>\n )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Heading } from '@mirohq/design-system-typography'\nimport type { HeadingProps } from '@mirohq/design-system-typography'\n\nexport interface GroupLabelProps extends Omit<HeadingProps, 'level'> {}\n\nexport const Title = React.forwardRef<\n ElementRef<typeof Heading>,\n GroupLabelProps\n>((props, forwardRef) => <Heading {...props} ref={forwardRef} level={4} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Title } from './title'\n\nexport const StyledTitle = styled(Title, {\n lineHeight: '$300',\n})\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Actions = styled(Primitive.div, {\n gridColumn: 'content',\n gridRow: -1,\n display: 'flex',\n gap: '$100',\n})\n\nActions.displayName = 'Callout.Actions'\n","import { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nexport const DismissButton: React.FC<IconButtonProps> = props => (\n <IconButton\n css={{ gridArea: 'close' }}\n variant='ghost'\n size='medium'\n data-testid='dismiss-button'\n {...props}\n >\n <IconCross />\n </IconButton>\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { DismissButton } from './dismiss-button'\n\nexport const StyledDismissButton = styled(DismissButton, {\n position: 'absolute',\n right: '$300',\n top: '$300',\n})\n","import React, { useState } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledCallout } from './callout.styled'\nimport type { StyledCalloutProps } from './callout.styled'\nimport { Content } from './partials/content'\nimport { Description } from './partials/description'\nimport { IconSlot } from './partials/icon-slot'\nimport { StyledTitle } from './partials/title-styled'\nimport { Actions } from './partials/actions'\nimport { CalloutProvider } from './hooks/use-callout-context'\nimport { StyledDismissButton } from './partials/dismiss-button-styled'\n\ninterface DismissibleProps {\n /**\n * Whether or not the component is dismissed (hidden)\n */\n dismissed?: boolean\n\n /**\n * Callback invoked once dismiss button is clicked\n */\n onDismiss?: () => void\n\n /**\n * aria-label for the dismiss button\n */\n dismissLabel: string\n}\n\nexport type CalloutProps = (Omit<StyledCalloutProps, 'dismissible'> & {\n /**\n * Change the component style.\n */\n variant: StyledCalloutProps['variant']\n\n /**\n * Whether or not the component should display dismiss button\n * @default true\n */\n dismissible?: boolean\n}) &\n (\n | DismissibleProps // uncontrolled\n | Required<DismissibleProps> // controlled\n | ({ dismissible?: false } & { [K in keyof DismissibleProps]?: never })\n )\n\nexport const Callout = React.forwardRef<\n ElementRef<typeof StyledCallout>,\n CalloutProps\n>(\n (\n {\n dismissed,\n dismissible = true,\n onDismiss,\n dismissLabel,\n children,\n variant,\n ...props\n },\n forwardRef\n ) => {\n const [internalDismissed, setInternalDismissed] = useState<boolean>(\n dismissed ?? false\n )\n\n if (dismissed ?? internalDismissed) {\n return null\n }\n\n const handleDismissed = (): void => {\n setInternalDismissed(true)\n onDismiss?.()\n }\n\n return (\n <CalloutProvider variant={variant}>\n <StyledCallout\n {...props}\n ref={forwardRef}\n variant={variant}\n dismissible={dismissible}\n role='alert'\n >\n {children}\n {dismissible && onDismiss != null && dismissLabel?.length > 0 && (\n <StyledDismissButton\n aria-label={dismissLabel}\n onPress={handleDismissed}\n />\n )}\n </StyledCallout>\n </CalloutProvider>\n )\n }\n) as ForwardRefExoticComponent<CalloutProps> & Partials\n\nexport interface Partials {\n Content: typeof Content\n Description: typeof Description\n IconSlot: typeof IconSlot\n Title: typeof StyledTitle\n Actions: typeof Actions\n}\n\nCallout.Content = Content\nCallout.Description = Description\nCallout.IconSlot = IconSlot\nCallout.Title = StyledTitle\nCallout.Actions = Actions\n"],"names":["styled","Primitive","createContext","jsx","useContext","IconCheckMark","IconExclamationPointCircle","IconInformationMarkCircle","React","Heading","IconButton","IconCross","useState","jsxs"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -14,8 +14,8 @@ const StyledCallout = styled(Primitive.div, {
14
14
  borderRadius: "$75",
15
15
  display: "grid",
16
16
  justifyContent: "center",
17
- gridTemplateColumns: "auto 1fr $8",
18
- gridTemplateAreas: "'icon content close'",
17
+ gridTemplateColumns: "auto 1fr",
18
+ gridTemplateAreas: "'icon content'",
19
19
  variants: {
20
20
  variant: {
21
21
  information: {
@@ -36,6 +36,9 @@ const StyledCallout = styled(Primitive.div, {
36
36
  }
37
37
  },
38
38
  dismissible: {
39
+ true: {
40
+ padding: "$200 $400 $200 $200"
41
+ },
39
42
  false: {
40
43
  gridTemplateColumns: "auto 1fr",
41
44
  gridTemplateAreas: "'icon content'"
@@ -45,20 +48,19 @@ const StyledCallout = styled(Primitive.div, {
45
48
  });
46
49
 
47
50
  const Content = styled(Primitive.div, {
48
- display: "grid",
51
+ display: "flex",
52
+ flexDirection: "column",
49
53
  gap: "$25",
50
54
  maxWidth: "48em",
51
- gridArea: "content",
52
- gridTemplateRows: "auto 1fr",
53
- gridTemplateAreas: "'title'\n 'description'"
55
+ gridArea: "content"
54
56
  });
55
57
  Content.displayName = "Callout.Content";
56
58
 
57
59
  const Description = styled(Primitive.div, {
58
- gridArea: "description",
59
- color: "$text-neutrals-subtle",
60
+ color: "$text-neutrals",
60
61
  fontSize: "$175",
61
- lineHeight: "$400"
62
+ lineHeight: "$400",
63
+ marginTop: "$25"
62
64
  });
63
65
  Description.displayName = "Callout.Description";
64
66
 
@@ -115,6 +117,10 @@ const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
115
117
 
116
118
  const Title = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(Heading, { ...props, ref: forwardRef, level: 4 }));
117
119
 
120
+ const StyledTitle = styled(Title, {
121
+ lineHeight: "$300"
122
+ });
123
+
118
124
  const Actions = styled(Primitive.div, {
119
125
  gridColumn: "content",
120
126
  gridRow: -1,
@@ -135,6 +141,12 @@ const DismissButton = (props) => /* @__PURE__ */ jsx(
135
141
  }
136
142
  );
137
143
 
144
+ const StyledDismissButton = styled(DismissButton, {
145
+ position: "absolute",
146
+ right: "$300",
147
+ top: "$300"
148
+ });
149
+
138
150
  const Callout = React.forwardRef(
139
151
  ({
140
152
  dismissed,
@@ -166,7 +178,7 @@ const Callout = React.forwardRef(
166
178
  children: [
167
179
  children,
168
180
  dismissible && onDismiss != null && (dismissLabel == null ? void 0 : dismissLabel.length) > 0 && /* @__PURE__ */ jsx(
169
- DismissButton,
181
+ StyledDismissButton,
170
182
  {
171
183
  "aria-label": dismissLabel,
172
184
  onPress: handleDismissed
@@ -180,7 +192,7 @@ const Callout = React.forwardRef(
180
192
  Callout.Content = Content;
181
193
  Callout.Description = Description;
182
194
  Callout.IconSlot = IconSlot;
183
- Callout.Title = Title;
195
+ Callout.Title = StyledTitle;
184
196
  Callout.Actions = Actions;
185
197
 
186
198
  export { Callout };
package/dist/module.js.map CHANGED
@@ -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 gap: '$150',\n padding: '$200',\n borderWidth: '$sm',\n borderStyle: 'solid',\n borderRadius: '$75',\n display: 'grid',\n justifyContent: 'center',\n gridTemplateColumns: 'auto 1fr $8',\n gridTemplateAreas: `'icon content close'`,\n variants: {\n variant: {\n information: {\n backgroundColor: '$background-primary-subtle',\n borderColor: '$border-primary-subtle',\n },\n warning: {\n backgroundColor: '$background-warning-subtle',\n borderColor: '$border-warning-subtle',\n },\n danger: {\n backgroundColor: '$background-danger-subtle',\n borderColor: '$border-danger-subtle',\n },\n success: {\n backgroundColor: '$background-success-subtle',\n borderColor: '$border-success-subtle',\n },\n },\n dismissible: {\n false: {\n gridTemplateColumns: 'auto 1fr',\n gridTemplateAreas: `'icon content'`,\n },\n },\n },\n})\n\nexport type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Content = styled(Primitive.div, {\n display: 'grid',\n gap: '$25',\n maxWidth: '48em',\n gridArea: 'content',\n gridTemplateRows: 'auto 1fr',\n gridTemplateAreas: `'title'\n 'description'`,\n})\n\nContent.displayName = 'Callout.Content'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Description = styled(Primitive.div, {\n gridArea: 'description',\n color: '$text-neutrals-subtle',\n fontSize: '$175',\n lineHeight: '$400',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport type CalloutProviderProps = CalloutContextProps\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n children,\n ...restProps\n}: PropsWithChildren<CalloutProviderProps>): JSX.Element => (\n <CalloutContext.Provider\n value={{\n ...restProps,\n }}\n >\n {children}\n </CalloutContext.Provider>\n)\n\nexport const useCalloutContext = (): CalloutContextProps =>\n useContext(CalloutContext)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n variants: {\n variant: {\n information: {\n color: '$icon-primary',\n },\n warning: {\n color: '$icon-warning',\n },\n danger: {\n color: '$icon-danger',\n },\n success: {\n color: '$icon-success',\n },\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport {\n IconCheckMark,\n IconExclamationPointCircle,\n IconInformationMarkCircle,\n} from '@mirohq/design-system-icons'\n\nimport { useCalloutContext } from '../hooks/use-callout-context'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children?: React.ReactNode\n}\n\nconst iconVariant = {\n success: <IconCheckMark />,\n warning: <IconExclamationPointCircle />,\n danger: <IconExclamationPointCircle />,\n information: <IconInformationMarkCircle />,\n default: <IconCheckMark />,\n}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { variant } = useCalloutContext()\n\n let formattedChildren = children\n if (React.Children.count(children) < 1) {\n formattedChildren =\n iconVariant[variant as keyof typeof iconVariant] ?? iconVariant.default\n }\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n {formattedChildren}\n </StyledIconSlot>\n )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Heading } from '@mirohq/design-system-typography'\nimport type { HeadingProps } from '@mirohq/design-system-typography'\n\nexport interface GroupLabelProps extends Omit<HeadingProps, 'level'> {}\n\nexport const Title = React.forwardRef<\n ElementRef<typeof Heading>,\n GroupLabelProps\n>((props, forwardRef) => <Heading {...props} ref={forwardRef} level={4} />)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Actions = styled(Primitive.div, {\n gridColumn: 'content',\n gridRow: -1,\n display: 'flex',\n gap: '$100',\n})\n\nActions.displayName = 'Callout.Actions'\n","import { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nexport const DismissButton: React.FC<IconButtonProps> = props => (\n <IconButton\n css={{ gridArea: 'close' }}\n variant='ghost'\n size='medium'\n data-testid='dismiss-button'\n {...props}\n >\n <IconCross />\n </IconButton>\n)\n","import React, { useState } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledCallout } from './callout.styled'\nimport type { StyledCalloutProps } from './callout.styled'\nimport { Content } from './partials/content'\nimport { Description } from './partials/description'\nimport { IconSlot } from './partials/icon-slot'\nimport { Title } from './partials/title'\nimport { Actions } from './partials/actions'\nimport { DismissButton } from './partials/dismiss-button'\nimport { CalloutProvider } from './hooks/use-callout-context'\n\ninterface DismissibleProps {\n /**\n * Whether or not the component is dismissed (hidden)\n */\n dismissed?: boolean\n\n /**\n * Callback invoked once dismiss button is clicked\n */\n onDismiss?: () => void\n\n /**\n * aria-label for the dismiss button\n */\n dismissLabel: string\n}\n\nexport type CalloutProps = (Omit<StyledCalloutProps, 'dismissible'> & {\n /**\n * Change the component style.\n */\n variant: StyledCalloutProps['variant']\n\n /**\n * Whether or not the component should display dismiss button\n * @default true\n */\n dismissible?: boolean\n}) &\n (\n | DismissibleProps // uncontrolled\n | Required<DismissibleProps> // controlled\n | ({ dismissible?: false } & { [K in keyof DismissibleProps]?: never })\n )\n\nexport const Callout = React.forwardRef<\n ElementRef<typeof StyledCallout>,\n CalloutProps\n>(\n (\n {\n dismissed,\n dismissible = true,\n onDismiss,\n dismissLabel,\n children,\n variant,\n ...props\n },\n forwardRef\n ) => {\n const [internalDismissed, setInternalDismissed] = useState<boolean>(\n dismissed ?? false\n )\n\n if (dismissed ?? internalDismissed) {\n return null\n }\n\n const handleDismissed = (): void => {\n setInternalDismissed(true)\n onDismiss?.()\n }\n\n return (\n <CalloutProvider variant={variant}>\n <StyledCallout\n {...props}\n ref={forwardRef}\n variant={variant}\n dismissible={dismissible}\n role='alert'\n >\n {children}\n {dismissible && onDismiss != null && dismissLabel?.length > 0 && (\n <DismissButton\n aria-label={dismissLabel}\n onPress={handleDismissed}\n />\n )}\n </StyledCallout>\n </CalloutProvider>\n )\n }\n) as ForwardRefExoticComponent<CalloutProps> & Partials\n\nexport interface Partials {\n Content: typeof Content\n Description: typeof Description\n IconSlot: typeof IconSlot\n Title: typeof Title\n Actions: typeof Actions\n}\n\nCallout.Content = Content\nCallout.Description = Description\nCallout.IconSlot = IconSlot\nCallout.Title = Title\nCallout.Actions = Actions\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/callout.styled.tsx","../src/partials/content.tsx","../src/partials/description.tsx","../src/hooks/use-callout-context.tsx","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/title.tsx","../src/partials/title-styled.ts","../src/partials/actions.tsx","../src/partials/dismiss-button.tsx","../src/partials/dismiss-button-styled.ts","../src/callout.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledCallout = styled(Primitive.div, {\n 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'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport type CalloutProviderProps = CalloutContextProps\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n children,\n ...restProps\n}: PropsWithChildren<CalloutProviderProps>): JSX.Element => (\n <CalloutContext.Provider\n value={{\n ...restProps,\n }}\n >\n {children}\n </CalloutContext.Provider>\n)\n\nexport const useCalloutContext = (): CalloutContextProps =>\n useContext(CalloutContext)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n variants: {\n variant: {\n information: {\n color: '$icon-primary',\n },\n warning: {\n color: '$icon-warning',\n },\n danger: {\n color: '$icon-danger',\n },\n success: {\n color: '$icon-success',\n },\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport {\n IconCheckMark,\n IconExclamationPointCircle,\n IconInformationMarkCircle,\n} from '@mirohq/design-system-icons'\n\nimport { useCalloutContext } from '../hooks/use-callout-context'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n /**\n * The icon.\n */\n children?: React.ReactNode\n}\n\nconst iconVariant = {\n success: <IconCheckMark />,\n warning: <IconExclamationPointCircle />,\n danger: <IconExclamationPointCircle />,\n information: <IconInformationMarkCircle />,\n default: <IconCheckMark />,\n}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { variant } = useCalloutContext()\n\n let formattedChildren = children\n if (React.Children.count(children) < 1) {\n formattedChildren =\n iconVariant[variant as keyof typeof iconVariant] ?? iconVariant.default\n }\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n {formattedChildren}\n </StyledIconSlot>\n )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Heading } from '@mirohq/design-system-typography'\nimport type { HeadingProps } from '@mirohq/design-system-typography'\n\nexport interface GroupLabelProps extends Omit<HeadingProps, 'level'> {}\n\nexport const Title = React.forwardRef<\n ElementRef<typeof Heading>,\n GroupLabelProps\n>((props, forwardRef) => <Heading {...props} ref={forwardRef} level={4} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Title } from './title'\n\nexport const StyledTitle = styled(Title, {\n lineHeight: '$300',\n})\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Actions = styled(Primitive.div, {\n gridColumn: 'content',\n gridRow: -1,\n display: 'flex',\n gap: '$100',\n})\n\nActions.displayName = 'Callout.Actions'\n","import { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nexport const DismissButton: React.FC<IconButtonProps> = props => (\n <IconButton\n css={{ gridArea: 'close' }}\n variant='ghost'\n size='medium'\n data-testid='dismiss-button'\n {...props}\n >\n <IconCross />\n </IconButton>\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { DismissButton } from './dismiss-button'\n\nexport const StyledDismissButton = styled(DismissButton, {\n position: 'absolute',\n right: '$300',\n top: '$300',\n})\n","import React, { useState } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledCallout } from './callout.styled'\nimport type { StyledCalloutProps } from './callout.styled'\nimport { Content } from './partials/content'\nimport { Description } from './partials/description'\nimport { IconSlot } from './partials/icon-slot'\nimport { StyledTitle } from './partials/title-styled'\nimport { Actions } from './partials/actions'\nimport { CalloutProvider } from './hooks/use-callout-context'\nimport { StyledDismissButton } from './partials/dismiss-button-styled'\n\ninterface DismissibleProps {\n /**\n * Whether or not the component is dismissed (hidden)\n */\n dismissed?: boolean\n\n /**\n * Callback invoked once dismiss button is clicked\n */\n onDismiss?: () => void\n\n /**\n * aria-label for the dismiss button\n */\n dismissLabel: string\n}\n\nexport type CalloutProps = (Omit<StyledCalloutProps, 'dismissible'> & {\n /**\n * Change the component style.\n */\n variant: StyledCalloutProps['variant']\n\n /**\n * Whether or not the component should display dismiss button\n * @default true\n */\n dismissible?: boolean\n}) &\n (\n | DismissibleProps // uncontrolled\n | Required<DismissibleProps> // controlled\n | ({ dismissible?: false } & { [K in keyof DismissibleProps]?: never })\n )\n\nexport const Callout = React.forwardRef<\n ElementRef<typeof StyledCallout>,\n CalloutProps\n>(\n (\n {\n dismissed,\n dismissible = true,\n onDismiss,\n dismissLabel,\n children,\n variant,\n ...props\n },\n forwardRef\n ) => {\n const [internalDismissed, setInternalDismissed] = useState<boolean>(\n dismissed ?? false\n )\n\n if (dismissed ?? internalDismissed) {\n return null\n }\n\n const handleDismissed = (): void => {\n setInternalDismissed(true)\n onDismiss?.()\n }\n\n return (\n <CalloutProvider variant={variant}>\n <StyledCallout\n {...props}\n ref={forwardRef}\n variant={variant}\n dismissible={dismissible}\n role='alert'\n >\n {children}\n {dismissible && onDismiss != null && dismissLabel?.length > 0 && (\n <StyledDismissButton\n aria-label={dismissLabel}\n onPress={handleDismissed}\n />\n )}\n </StyledCallout>\n </CalloutProvider>\n )\n }\n) as ForwardRefExoticComponent<CalloutProps> & Partials\n\nexport interface Partials {\n Content: typeof Content\n Description: typeof Description\n IconSlot: typeof IconSlot\n Title: typeof StyledTitle\n Actions: typeof Actions\n}\n\nCallout.Content = Content\nCallout.Description = Description\nCallout.IconSlot = IconSlot\nCallout.Title = StyledTitle\nCallout.Actions = Actions\n"],"names":[],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -7,10 +7,10 @@ import { HeadingProps } from '@mirohq/design-system-typography';
7
7
 
8
8
  declare const StyledCallout: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "variant" | "dismissible"> & _stitches_react_types_styled_component.TransformProps<{
9
9
  variant?: "information" | "warning" | "danger" | "success" | undefined;
10
- dismissible?: boolean | "false" | undefined;
10
+ dismissible?: boolean | "true" | "false" | undefined;
11
11
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
12
12
  variant?: "information" | "warning" | "danger" | "success" | undefined;
13
- dismissible?: boolean | "false" | undefined;
13
+ dismissible?: boolean | "true" | "false" | undefined;
14
14
  }, {}>;
15
15
  declare type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>;
16
16
 
@@ -35,7 +35,8 @@ declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<IconSlotPr
35
35
 
36
36
  interface GroupLabelProps extends Omit<HeadingProps, 'level'> {
37
37
  }
38
- declare const Title: react__default.ForwardRefExoticComponent<Omit<GroupLabelProps, "ref"> & react__default.RefAttributes<HTMLHeadingElement>>;
38
+
39
+ declare const StyledTitle: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<Omit<GroupLabelProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLHeadingElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<Omit<GroupLabelProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>, {}, {}>;
39
40
 
40
41
  declare const Actions: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
41
42
 
@@ -73,7 +74,7 @@ interface Partials {
73
74
  Content: typeof Content;
74
75
  Description: typeof Description;
75
76
  IconSlot: typeof IconSlot;
76
- Title: typeof Title;
77
+ Title: typeof StyledTitle;
77
78
  Actions: typeof Actions;
78
79
  }
79
80
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-callout",
3
- "version": "0.2.4",
3
+ "version": "0.3.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,9 +27,9 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@mirohq/design-system-icon-button": "^3.2.3",
30
+ "@mirohq/design-system-icons": "^0.60.0",
30
31
  "@mirohq/design-system-primitive": "^1.1.2",
31
32
  "@mirohq/design-system-stitches": "^2.6.28",
32
- "@mirohq/design-system-icons": "^0.60.0",
33
33
  "@mirohq/design-system-typography": "^0.6.6"
34
34
  },
35
35
  "scripts": {