@mirohq/design-system-callout 0.2.4 → 0.3.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
  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": {