@soul-refiner/design-system 0.1.28 → 0.1.30

package/dist/components/surfaces/comment/comment.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import styled from 'styled-components';
+import Picker from '@emoji-mart/react';
+import { Avatar, Box, P } from 'components';
+import emojis from 'emoji/emojis.json';
+import { ThumbsUp, Comment as CommentIcon } from 'icons';
+import { abbrTimeBeforeDate } from './helpers';
+import { Styles } from 'common';
+export const Comment = ({ content, createdDate, onCommentClick, onReact, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }) => {
+    const id = React.useId();
+    const [showPicker, setShowPicker] = React.useState(false);
+    const handleReaction = ({ native }) => {
+        onReact(native);
+        setShowPicker(false);
+    };
+    const handlePicker = (event) => {
+        event.stopPropagation();
+        setShowPicker((prev) => !prev);
+    };
+    const handlePickerBlur = () => setShowPicker(false);
+    const createdTime = abbrTimeBeforeDate(createdDate, { message: true });
+    const reactionElements = reactions &&
+        Object.entries(reactions)
+            .sort((a, b) => (a[1] < b[1] ? 1 : -1))
+            .map((reaction) => (React.createElement(Reaction, { key: id + reaction[0], "$align": "center", "$dir": "row", "$gap": 5, "$userSelected": userReactions?.includes(reaction[0]) },
+            reaction[0],
+            React.createElement(P, { "$bold": true, "$fontSize": 10, "$lineHeight": 14 }, reaction[1]))));
+    const hasReplies = !!replies?.length && replies.length > 0;
+    const replyElements = hasReplies &&
+        replies.map((reply, index) => (React.createElement(ReplyWrapper, { "$isNotLastReply": index !== replies.length - 1, key: id + reply.createdDate.getTime().toString(36) },
+            React.createElement(Comment, { ...reply }),
+            React.createElement(ReplyIndicator, null))));
+    return (React.createElement(Wrapper, null,
+        React.createElement(Avatar, { href: userProfileUri, image: userImageUri, size: 32 }),
+        React.createElement(Box, { "$flex": 1, "$dir": "column" },
+            React.createElement(ContentWrapper, { "$hasReplies": hasReplies },
+                React.createElement(CommentBox, null,
+                    React.createElement(P, { "$bold": true, "$color": "grey-2", "$fontSize": 14, "$lineHeight": 20 }, userName),
+                    React.createElement(P, { sx: "letter-spacing: -0.176px;" }, content)),
+                React.createElement(Box, { "$align": "flex-start", "$dir": "row", "$display": "flex", "$gap": 16, sx: "margin: 8px 0px; position: relative;" },
+                    React.createElement(ThumbsUp, { color: "primary-blue-2", onClick: handlePicker, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
+                    React.createElement(CommentIcon, { color: "primary-blue-2", onClick: onCommentClick, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
+                    React.createElement(P, { "$color": "grey-7" }, "\u2022"),
+                    React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 24, sx: "flex-shrink: 0;" }, createdTime),
+                    React.createElement(Box, { "$display": "flex", "$flow": "row wrap", "$gap": 6, sx: "max-width: calc(100% - 190px); margin-left: auto;" }, reactionElements),
+                    showPicker && (React.createElement(PickerWrapper, null,
+                        React.createElement(Picker, { data: emojis, onEmojiSelect: handleReaction, onClickOutside: handlePickerBlur, maxFrequentRows: 1, navPosition: "none", previewPosition: "none", perLine: 9, theme: "auto" }))))),
+            hasReplies && React.createElement(RepliesWrapper, null, replyElements))));
+};
+const Wrapper = styled.div `
+  max-width: 700px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+  justify-content: space-between;
+  position: relative;
+`;
+const ContentWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  ${({ $hasReplies }) => $hasReplies
+    ? `
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 32px;
+      left: -28px;
+      height: calc(100% - 12px);
+      border-left: 2px solid var(--color-grey-9);
+    }`
+    : ''}
+`;
+const CommentBox = styled.div `
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: var(--color-grey-10);
+  border-radius: 16px;
+`;
+const PickerWrapper = styled.div `
+  position: absolute;
+  z-index: 5;
+`;
+const Reaction = styled.div `
+  ${Styles.flex}
+  display: flex;
+  padding: 2px 6px;
+  border-radius: 12px;
+  ${({ $userSelected }) => $userSelected
+    ? `
+    background-color: var(--color-primary-blue-4);
+    border: 1px solid var(--color-primary-blue-3);
+    `
+    : ''}
+`;
+const RepliesWrapper = styled.div `
+  padding-top: 12px;
+`;
+const ReplyWrapper = styled.div `
+  position: relative;
+  ${({ $isNotLastReply }) => $isNotLastReply
+    ? `
+    &::before {
+      content: "";
+      position: absolute;
+      left: -28px;
+      height: 100%;
+      border-left: 2px solid var(--color-grey-9);
+    }`
+    : ''}
+`;
+const ReplyIndicator = styled.div `
+  position: absolute;
+  top: 0;
+  left: -28px;
+  width: 28px;
+  height: 16px;
+  border-bottom-left-radius: 16px;
+  border: 2px solid var(--color-grey-9);
+  border-top: none;
+  border-right: none;
+`;

package/dist/components/surfaces/comment/comment.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { CommentProps } from './comment';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, Pick<CommentProps, "content" | "createdDate" | "userImageUri" | "userName" | "userProfileUri">>;
+export default meta;

package/dist/components/surfaces/comment/comment.stories.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Comment } from './comment';
+const meta = {
+    title: 'Surfaces/Comment',
+};
+const Story = (args) => {
+    const [reactions, setReactions] = React.useState({
+        '✋': 12,
+        '👋': 1,
+        '💯': 501,
+        '😀': 6,
+        '😁': 1,
+        '😃': 8,
+        '😊': 2,
+        '😎': 7,
+        '🤚': 2,
+        '🤣': 24,
+        '🫲': 15,
+        '🫳': 1,
+    });
+    const [userReactions, setUserReactions] = React.useState(['💯']);
+    const handleReaction = (reaction) => {
+        setReactions((prev) => ({
+            ...prev,
+            [reaction]: prev?.[reaction] ? prev[reaction] + 1 : 1,
+        }));
+        setUserReactions((prev) => {
+            if (prev.includes(reaction)) {
+                return prev.filter((item) => item !== reaction);
+            }
+            else {
+                return [...prev, reaction];
+            }
+        });
+    };
+    return (React.createElement(Comment, { onCommentClick: () => undefined, onReact: handleReaction, replies: [
+            {
+                content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt.',
+                createdDate: new Date(new Date('16 June 2023').getTime() - 500024),
+                onCommentClick: () => undefined,
+                onReact: () => undefined,
+                reactions: {
+                    '✋': 12,
+                    '👋': 1,
+                    '💯': 501,
+                    '😀': 6,
+                    '😁': 1,
+                    '😃': 8,
+                    '😊': 2,
+                    '😎': 7,
+                    '🤚': 2,
+                    '🤣': 24,
+                    '🫲': 15,
+                    '🫳': 1,
+                },
+                replies: [
+                    {
+                        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt.',
+                        createdDate: new Date(new Date('16 June 2023').getTime() - 500024),
+                        onCommentClick: () => undefined,
+                        onReact: () => undefined,
+                        userName: 'Bohdan Popkov',
+                        userImageUri: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+                        userProfileUri: '#',
+                    },
+                ],
+                userName: 'Bohdan Popkov',
+                userImageUri: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+                userProfileUri: '#',
+            },
+        ], reactions: reactions, userReactions: userReactions, ...args }));
+};
+export const Default = Story.bind({});
+Default.argTypes = {};
+Default.args = {
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt.',
+    createdDate: new Date('June 6, 2023'),
+    userName: 'Bohdan Popkov',
+    userImageUri: 'https://f005.backblazeb2.com/file/sr-platform/avatar.jpg',
+    userProfileUri: '#',
+};
+export default meta;

package/dist/components/surfaces/comment/helpers.d.ts

@@ -0,0 +1,5 @@
+type Options = {
+    message?: boolean;
+};
+export declare const abbrTimeBeforeDate: (date: Date, options?: Options) => string;
+export {};

package/dist/components/surfaces/comment/helpers.js

@@ -0,0 +1,38 @@
+export const abbrTimeBeforeDate = (date, options) => {
+    const { message } = options ?? {};
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    if (diff < 60000) {
+        // under 1 min
+        if (message)
+            return 'Now';
+        return 'Just now';
+    }
+    else if (diff < 3600000) {
+        // under one hour
+        const minutes = Math.floor(diff / 60000);
+        if (message)
+            return `${minutes}m`;
+        return `${minutes} ${minutes === 1 ? 'min' : 'mins'}`;
+    }
+    else if (diff < 86400000) {
+        // under one day
+        const hours = Math.floor(diff / 3600000);
+        if (message)
+            return `${hours}h`;
+        return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+    }
+    else if (diff < 604800000) {
+        // under one week
+        const days = Math.floor(diff / 86400000);
+        if (message)
+            return `${days}d`;
+        return `${days} ${days === 1 ? 'day' : 'days'}`;
+    }
+    else {
+        if (message) {
+            return `${Math.floor(diff / 604800000)}w`;
+        }
+        return date.toDateString().slice(4);
+    }
+};

package/dist/components/surfaces/comment/index.d.ts

@@ -0,0 +1,2 @@
+export { Comment } from './comment';
+export type { CommentProps } from './comment';

package/dist/components/surfaces/comment/index.js

@@ -0,0 +1 @@
+export { Comment } from './comment';

package/dist/components/surfaces/drawer/drawer.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export interface DrawerProps extends React.PropsWithChildren {
+    /**
+     * This is to make the Modal a controlled component,
+     * instead of it managing its own state
+     */
+    controlledOpen?: boolean;
+    onOpenChange?: () => void;
+}
+export declare const Drawer: {
+    ({ children, controlledOpen, onOpenChange, }: DrawerProps): React.JSX.Element;
+    Trigger: {
+        ({ children: child, }: {
+            children: React.ReactElement;
+        }): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Header: {
+        ({ children }: React.PropsWithChildren): React.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ children }: React.PropsWithChildren): React.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children }: React.PropsWithChildren): React.JSX.Element;
+        displayName: string;
+    };
+};

package/dist/components/surfaces/drawer/drawer.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import styled from 'styled-components';
+import { callAll } from 'utils';
+const DrawerContext = React.createContext([false, (() => undefined)]);
+export const Drawer = ({ children, controlledOpen, onOpenChange, }) => {
+    const [open, setOpen] = React.useState(controlledOpen || false);
+    React.useEffect(() => {
+        if (controlledOpen !== undefined) {
+            setOpen(controlledOpen);
+        }
+    }, [controlledOpen]);
+    const _children = React.Children.toArray(children);
+    const triggers = [];
+    const content = [];
+    let footer = null;
+    let header = null;
+    for (const child of _children) {
+        if (React.isValidElement(child)) {
+            const type = child.type?.displayName;
+            if (type === 'Drawer.Trigger')
+                triggers.push(child);
+            else if (type === 'Drawer.Header')
+                header = child;
+            else if (type === 'Drawer.Footer')
+                footer = child;
+            else
+                content.push(child);
+        }
+    }
+    return (React.createElement(DrawerContext.Provider, { value: [open, setOpen] },
+        triggers,
+        open && (React.createElement(Background, { onClick: callAll(() => setOpen(false), () => onOpenChange && onOpenChange()) })),
+        React.createElement(Component, { "$open": open },
+            header && React.createElement(HeaderWrapper, null, header),
+            React.createElement(ContentWrapper, null, content),
+            footer && React.createElement(FooterWrapper, null, footer))));
+};
+const Background = styled.div `
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 149;
+  overflow: hidden;
+  background: #000000;
+  opacity: 0.5;
+  cursor: pointer;
+`;
+const Component = styled.div `
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  max-width: 880px;
+  width: 100%;
+  z-index: 150;
+  border-radius: 16px 0px 0px 16px;
+  background-color: var(--background-color);
+  margin-right: -100vw;
+  transition: margin-right 0.5s;
+  background-color: var(--color-grey-10);
+
+  ${({ $open }) => ($open ? 'margin-right: 0px;' : '')}
+`;
+const HeaderWrapper = styled.div `
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-2);
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  top: 0;
+`;
+const ContentWrapper = styled.div `
+  height: calc(100vh - 224px);
+  position: relative;
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 24px 16px 24px 24px;
+  margin-right: 8px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    -webkit-box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    background-color: var(--color-white);
+    margin: 40px 0px 15px 0px;
+  }
+  &::-webkit-scrollbar {
+    width: 8px;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: var(--color-grey-6);
+    opacity: 30%;
+  }
+`;
+const FooterWrapper = styled.div `
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-1);
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  bottom: 0;
+`;
+const DrawerTrigger = ({ children: child, }) => {
+    const [, setOpen] = React.useContext(DrawerContext);
+    return (child &&
+        React.cloneElement(child, {
+            onClick: callAll(() => setOpen((prev) => !prev), child.props.onClick),
+        }));
+};
+DrawerTrigger.displayName = 'Drawer.Trigger';
+Drawer.Trigger = DrawerTrigger;
+const DrawerHeader = ({ children }) => (React.createElement("div", null, children));
+DrawerHeader.displayName = 'Drawer.Header';
+Drawer.Header = DrawerHeader;
+const DrawerContent = ({ children }) => (React.createElement("div", null, children));
+DrawerContent.displayName = 'Drawer.Content';
+Drawer.Content = DrawerContent;
+const DrawerFooter = ({ children }) => (React.createElement("div", null, children));
+DrawerFooter.displayName = 'Drawer.Footer';
+Drawer.Footer = DrawerFooter;

package/dist/components/surfaces/drawer/drawer.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { DrawerProps } from './drawer';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, DrawerProps>;
+export default meta;

package/dist/components/surfaces/drawer/drawer.stories.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button, H, P } from 'components';
+import { Drawer } from './drawer';
+const meta = {
+    title: 'Surfaces/Drawer',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Header = styled.div `
+  height: 60px;
+  padding: 16px 24px;
+`;
+const Footer = styled.div `
+  height: 60px;
+  padding: 16px 24px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+`;
+const Content = styled.div `
+  margin: 32px 0px;
+  padding: 16px;
+  border-radius: 8px;
+  background-color: var(--color-white);
+`;
+const Story = (args) => (React.createElement(Drawer, { ...args },
+    React.createElement(Drawer.Trigger, null,
+        React.createElement(Button, null, "Open Drawer")),
+    React.createElement(Drawer.Header, null,
+        React.createElement(Header, null,
+            React.createElement(H.Six, { "$bold": true }, "Let\u2019s setup your community!"),
+            React.createElement(P, null, "This just takes a few minutes."))),
+    React.createElement(Drawer.Content, null,
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes.")),
+        React.createElement(Content, null,
+            React.createElement(P, null, "This just takes a few minutes."),
+            React.createElement(P, null, "This just takes a few minutes."))),
+    React.createElement(Drawer.Footer, null,
+        React.createElement(Footer, null,
+            React.createElement(Drawer.Trigger, null,
+                React.createElement(Button, { size: "small", type: "outlined" }, "Cancel")),
+            React.createElement(Button, { size: "small" }, "Create")))));
+export const Default = Story.bind({});
+Default.args = {};
+export default meta;

package/dist/components/surfaces/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer } from './drawer';
+export type { DrawerProps } from './drawer';

package/dist/components/surfaces/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer } from './drawer';

package/dist/components/surfaces/index.d.ts

@@ -0,0 +1,10 @@
+export { Accordion } from './accordion';
+export type { AccordionProps, AccordionItemProps } from './accordion';
+export { Comment } from './comment';
+export type { CommentProps } from './comment';
+export { Drawer } from './drawer';
+export type { DrawerProps } from './drawer';
+export { Message } from './message';
+export type { MessageProps } from './message';
+export { Modal } from './modal';
+export type { ModalContentProps, ModalProps } from './modal';

package/dist/components/surfaces/index.js

@@ -0,0 +1,5 @@
+export { Accordion } from './accordion';
+export { Comment } from './comment';
+export { Drawer } from './drawer';
+export { Message } from './message';
+export { Modal } from './modal';

package/dist/components/surfaces/message/index.d.ts

@@ -0,0 +1,2 @@
+export { Message } from './message';
+export type { MessageProps } from './message';

package/dist/components/surfaces/message/index.js

@@ -0,0 +1 @@
+export { Message } from './message';

package/dist/components/surfaces/message/message.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface MessageProps {
+    messages: {
+        content: string;
+        senderHref: string;
+        senderId: string;
+        senderName: string;
+        senderAvatarURI: string;
+        createdDate: Date;
+    }[];
+    userId: string;
+}
+export declare const Message: ({ messages, userId }: MessageProps) => React.JSX.Element;

package/dist/components/surfaces/message/message.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Avatar, Box, P, H } from 'components';
+export const Message = ({ messages, userId }) => {
+    const id = React.useId();
+    return (React.createElement(Box, { "$display": "flex", "$dir": "column", "$gap": 16 }, messages.map(({ content, createdDate, senderAvatarURI, senderHref, senderId, senderName, }, index) => {
+        const isSelf = senderId === userId;
+        const isFirstMessageBySender = messages?.[index - 1]?.senderId !== senderId;
+        if (isSelf) {
+            return (React.createElement(React.Fragment, { key: id + index },
+                isFirstMessageBySender && (React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin-top: 40px; margin-left: auto;" },
+                    createdDate.toLocaleDateString(),
+                    ' ',
+                    createdDate.toLocaleTimeString())),
+                React.createElement(Wrapper, { "$isSelf": isSelf }, content)));
+        }
+        return (React.createElement(React.Fragment, { key: id + index },
+            isFirstMessageBySender && (React.createElement(Avatar, { image: senderAvatarURI, href: senderHref, subtitle: React.createElement(P, { as: "span", "$color": "blue-2", "$fontSize": 12, "$lineHeight": 16, sx: "vertical-align: top;" }, createdDate.toLocaleTimeString()), size: 56, sx: "margin-top: 40px;", textPosition: "right", title: React.createElement(H, { as: "span", "$color": "blue-2", "$fontSize": 18, "$lineHeight": 26, "$mediumBold": true }, senderName) })),
+            React.createElement(Wrapper, { "$isSelf": isSelf }, content)));
+    })));
+};
+const Wrapper = styled.div `
+  max-width: 552px;
+  padding: 16px;
+  border-radius: 16px;
+  font-family: Inter;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: -0.006em;
+
+  ${({ $isSelf }) => $isSelf
+    ? `
+    margin-left: auto;
+    color: var(--color-white);
+    background-color: var(--color-primary-blue-2);
+    border-top-right-radius: 0px;`
+    : `
+    margin-left: 68px;
+    margin-right: auto;
+    color: var(--color-grey-3);
+    background-color: var(--color-grey-9);
+    border-top-left-radius: 0px;`}
+`;

package/dist/components/surfaces/message/message.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { MessageProps } from './message';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, MessageProps>;
+export default meta;