@soul-refiner/design-system 2.0.0-alpha.9 → 2.0.1

package/dist/components/surfaces/accordion/accordion.js

@@ -0,0 +1,56 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var box = require('../../atoms/box/box.js');
+var _function = require('../../../utils/function.js');
+var chevron_down = require('../../../icons/arrow/chevron_down.js');
+var chevron_up = require('../../../icons/arrow/chevron_up.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const AccordionContext = React__default.default.createContext([-1, () => undefined]);
+const Accordion = ({ children, sx }) => {
+    const [openIndex, setOpenIndex] = React__default.default.useState(-1);
+    const handleIndexChange = (index) => {
+        setOpenIndex((prev) => (prev === index ? -1 : index));
+    };
+    return (React__default.default.createElement(AccordionContext.Provider, { value: [openIndex, handleIndexChange] },
+        React__default.default.createElement(Wrapper, { "$sx": sx }, React__default.default.Children.map(children, (child, index) => {
+            if (React__default.default.isValidElement(child))
+                return React__default.default.cloneElement(child, { index });
+            return null;
+        }))));
+};
+const Wrapper = styled.styled.div `
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const AccordionItem = ({ buttonSx, children, index, sx, trigger, }) => {
+    const [openIndex, setOpenIndex] = React__default.default.useContext(AccordionContext);
+    return (React__default.default.createElement(box.Box, { "$dir": "column" },
+        React__default.default.createElement(TriggerWrapper, { onClick: _function.callAll(
+            // eslint-disable-next-line
+            () => setOpenIndex(index), trigger?.props?.onClick), "$sx": buttonSx },
+            trigger,
+            openIndex === index ? React__default.default.createElement(chevron_up.ChevronUp, null) : React__default.default.createElement(chevron_down.ChevronDown, null)),
+        React__default.default.createElement(box.Box, { sx: openIndex === index ? sx : 'visibility: hidden; height: 0px;' }, children)));
+};
+const TriggerWrapper = styled.styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  appearance: none;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+Accordion.Item = AccordionItem;
+AccordionItem.displayName = 'Accordion.Item';
+
+exports.Accordion = Accordion;

package/dist/components/surfaces/calendar_date/calendar_date.js

@@ -0,0 +1,55 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var heading = require('../../atoms/typography/heading.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const CalendarDate = ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, sx, size = 'large', }) => {
+    return (React__default.default.createElement(Container, { "$sx": sx },
+        React__default.default.createElement(CalendarContainer, { "$size": size },
+            React__default.default.createElement(MonthContainer, { "$size": size },
+                size === 'large' && (React__default.default.createElement(heading.H.Seven, { "$color": "white", "$textAlign": "center", "$semiBold": true }, monthAbbreviation)),
+                size === 'small' && (React__default.default.createElement(paragraph.P, { "$color": "white", "$textAlign": "center", "$fontSize": 14 }, monthAbbreviation))),
+            React__default.default.createElement(DateContainer, { "$size": size },
+                size === 'large' && (React__default.default.createElement(heading.H.One, { "$textAlign": "center", "$semiBold": true }, date)),
+                size === 'small' && (React__default.default.createElement(heading.H.Six, { "$color": "grey-2", "$textAlign": "center" }, date)))),
+        dayOfWeek && startTime && endTime && (React__default.default.createElement(TimeContainer, null,
+            React__default.default.createElement(paragraph.P, { as: "span", "$color": "red-5" }, `${dayOfWeek}, ${startTime} -> ${endTime}`)))));
+};
+const Container = styled.styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const CalendarContainer = styled.styled.div `
+  display: flex;
+  flex-direction: column;
+
+  ${({ $size }) => ($size === 'large' ? 'width: 120px;' : 'width: 64px;')}
+`;
+const MonthContainer = styled.styled.div `
+  background-color: var(--color-red-5);
+  border-radius: 16px 16px 0 0;
+
+  ${({ $size }) => $size === 'large' ? 'padding: 8px 16px;' : 'padding: 2px 8px;'}
+`;
+const DateContainer = styled.styled.div `
+  background-color: white;
+  border-radius: 0 0 16px 16px;
+  box-shadow: var(--elevation-3);
+
+  ${({ $size }) => $size === 'large' ? 'padding: 8px 16px;' : 'padding: 2px 16px;'}
+`;
+const TimeContainer = styled.styled.div `
+  margin-top: 16px;
+`;
+
+exports.CalendarDate = CalendarDate;

package/dist/components/surfaces/carousel/card/card.js

@@ -0,0 +1,106 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var chevron_left = require('../../../../icons/arrow/chevron_left.js');
+var chevron_right = require('../../../../icons/arrow/chevron_right.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const DEFAULT_SCROLL_TRIGGER_DISTANCE = 11;
+const DEFAULT_SCROLL_DISTANCE = 450;
+const CardCarousel = ({ children, onScrollEnd, scrollTriggerDistance = DEFAULT_SCROLL_TRIGGER_DISTANCE, scrollDistance = DEFAULT_SCROLL_DISTANCE, sx, }) => {
+    const ref = React__default.default.useRef(null);
+    const handleScroll = (event) => {
+        const target = event.target;
+        const scrollDistance = target.scrollWidth - target.scrollLeft;
+        if (scrollDistance - target.clientWidth < scrollTriggerDistance &&
+            onScrollEnd) {
+            onScrollEnd();
+        }
+    };
+    const onNavigateRight = () => {
+        if (ref.current) {
+            const amount = ref.current.scrollLeft + scrollDistance;
+            ref.current.scrollLeft = amount;
+        }
+    };
+    const onNavigateLeft = () => {
+        if (ref.current) {
+            const amount = ref.current.scrollLeft - scrollDistance;
+            ref.current.scrollLeft = amount < 0 ? 0 : amount;
+        }
+    };
+    return (React__default.default.createElement(Wrapper, { "$sx": sx },
+        React__default.default.createElement(Button, { className: "carousel-navigation", onClick: onNavigateLeft, "$side": "left" },
+            React__default.default.createElement(chevron_left.ChevronLeft, { color: "white", size: 48 })),
+        React__default.default.createElement(Inner, { onScroll: handleScroll, ref: ref }, children),
+        React__default.default.createElement(Button, { className: "carousel-navigation", onClick: onNavigateRight, "$side": "right" },
+            React__default.default.createElement(chevron_right.ChevronRight, { color: "white", size: 48 }))));
+};
+const Wrapper = styled.styled.div `
+  position: relative;
+  height: 288px;
+
+  &:hover .carousel-navigation {
+    display: block;
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Inner = styled.styled.div `
+  position: absolute;
+  width: 100%;
+  z-index: 0;
+  top: 0px;
+  left: 0px;
+  overflow-x: scroll;
+  overflow-y: visible;
+  display: flex;
+  gap: 24px;
+  flex-flow: row nowrap;
+  scroll-behavior: smooth;
+  padding-right: 32px;
+  margin-top: -56px;
+  padding-top: 56px;
+  padding-bottom: 92px;
+
+  & > * {
+    flex-shrink: 0;
+  }
+
+  &::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+`;
+const Button = styled.styled.button `
+  position: absolute;
+  z-index: 1;
+  top: 0px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  border: none;
+  background: rgba(8, 8, 9, 0.5);
+  padding: 0px 16px;
+  cursor: pointer;
+
+  display: none;
+
+  ${({ $side }) => $side === 'left'
+    ? `
+    left: 0px;
+    border-radius: 0px 16px 16px 0px;
+    `
+    : `
+    right: 0px;
+    border-radius: 16px 0px 0px 16px;`};
+`;
+
+exports.CardCarousel = CardCarousel;

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

@@ -0,0 +1,211 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var Picker = require('@emoji-mart/react');
+var avatar = require('../../iconography/avatar/avatar.js');
+var box = require('../../atoms/box/box.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+require('../../input/checkbox/checkbox.js');
+require('../../input/date/date.js');
+require('../../input/filter/filter.js');
+require('../../input/radio/radio.js');
+require('../../input/search/search.js');
+require('../../input/select/select.js');
+require('../../input/text_area/text_area.js');
+var text_input = require('../../input/text_input/text_input.js');
+require('../../input/calendar/calendar.js');
+require('../../input/time/time.js');
+var button = require('../../actions/button/button.js');
+var portal = require('../portal/portal.js');
+var emojis = require('../../../emoji/emojis.json.js');
+var styles = require('../../../common/styles.js');
+var thumbs_up = require('../../../icons/basic/thumbs_up.js');
+var comment = require('../../../icons/message/comment.js');
+var helpers = require('./helpers.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var Picker__default = /*#__PURE__*/_interopDefaultCompat(Picker);
+
+const MAX_REACTIONS_SHOWN = 5;
+const Comment = ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, reactionModal, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }) => {
+    const [showPicker, setShowPicker] = React__default.default.useState(false);
+    const [pickerTriggerLoc, setPickerTriggerLoc] = React__default.default.useState({
+        x: 0,
+        y: 0,
+    });
+    const [pickerOrientation, setPickerOrientation] = React__default.default.useState('up');
+    const [toggleShowCommentInput, setShowCommentInput] = React__default.default.useState(false);
+    const [toggleShowReplies, setShowReplies] = React__default.default.useState(false);
+    const [comment$1, setComment] = React__default.default.useState('');
+    const _replies = React__default.default.Children.toArray(replies);
+    const handleCommentChange = (event) => {
+        setComment(event.target.value);
+    };
+    const handleCommentSubmit = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onComment(comment$1);
+        setComment('');
+    };
+    const handleReaction = ({ native }) => {
+        onReact(native);
+        setShowPicker(false);
+    };
+    const handlePicker = (event) => {
+        event.stopPropagation();
+        setShowPicker((prev) => !prev);
+        setPickerTriggerLoc({ y: event.clientY, x: event.clientX });
+        setPickerOrientation(event.clientY > 400 ? 'up' : 'down');
+    };
+    const handlePickerBlur = () => setShowPicker(false);
+    const handleToggleCommentInput = () => setShowCommentInput((prev) => !prev);
+    const handleToggleReplies = () => {
+        onShowReplies && onShowReplies();
+        setShowReplies(true);
+    };
+    const createdTime = helpers.abbrTimeBeforeDate(createdDate);
+    const reactionElements = reactions &&
+        Object.entries(reactions)
+            .slice(0, MAX_REACTIONS_SHOWN)
+            .sort((a, b) => (a[1] < b[1] ? 1 : -1))
+            .map((reaction) => (React__default.default.createElement(Reaction, { key: id + reaction[0], onClick: () => onReact(reaction[0]), "$align": "center", "$dir": "row", "$gap": 5, "$userSelected": userReactions?.includes(reaction[0]) },
+            reaction[0],
+            React__default.default.createElement(paragraph.P, { "$bold": true, "$fontSize": 10, "$lineHeight": 14 }, reaction[1]))));
+    const hasReplies = !!_replies?.length && _replies.length > 0;
+    const replyElements = hasReplies &&
+        _replies.map((reply, index) => {
+            if (!React__default.default.isValidElement(reply))
+                return null;
+            const key = reply.props?.id;
+            const hasLine = index !== _replies.length - 1 || hasMoreReplies;
+            return (React__default.default.createElement(ReplyWrapper, { "$hasLine": hasLine, key: key },
+                reply,
+                React__default.default.createElement(ReplyIndicator, null)));
+        });
+    return (React__default.default.createElement(Wrapper, { id: id },
+        React__default.default.createElement(avatar.Avatar, { href: userProfileUri, image: userImageUri, size: 32, tooltipContent: avatarTooltipContent, tooltipSx: avatarTooltipSx }),
+        React__default.default.createElement(box.Box, { "$flex": 1, "$dir": "column" },
+            React__default.default.createElement(ContentWrapper, { "$hasReplies": hasReplies || !!hasMoreReplies },
+                React__default.default.createElement(CommentBox, null,
+                    React__default.default.createElement(paragraph.P, { "$bold": true, "$color": "grey-2", "$fontSize": 14, "$lineHeight": 20 }, userName),
+                    React__default.default.createElement(paragraph.P, { sx: "letter-spacing: -0.176px;" }, content)),
+                React__default.default.createElement(box.Box, { "$align": "flex-start", "$dir": "row", "$display": "flex", "$gap": 16, sx: "margin: 8px 0px; position: relative;" },
+                    React__default.default.createElement(thumbs_up.ThumbsUp, { color: "primary-blue-2", onClick: handlePicker, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
+                    React__default.default.createElement(comment.Comment, { color: "primary-blue-2", onClick: handleToggleCommentInput, size: 24, sx: "border-radius: 50%; cursor: pointer; flex-shrink: 0;" }),
+                    React__default.default.createElement(paragraph.P, { "$color": "grey-7" }, "\u2022"),
+                    React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 24, sx: "flex-shrink: 0;" }, createdTime),
+                    React__default.default.createElement(box.Box, { "$display": "flex", "$flow": "row wrap", "$gap": 6, sx: "max-width: calc(100% - 190px); margin-left: auto;" },
+                        reactionElements,
+                        reactionModal),
+                    showPicker && (React__default.default.createElement(portal.Portal, null,
+                        React__default.default.createElement(PickerWrapper, { "$pickerOrientation": pickerOrientation, "$top": pickerTriggerLoc.y, "$left": pickerTriggerLoc.x },
+                            React__default.default.createElement(Picker__default.default, { data: emojis.default, onEmojiSelect: handleReaction, onClickOutside: handlePickerBlur, maxFrequentRows: 1, navPosition: "none", previewPosition: "none", perLine: 9, theme: "auto" })))))),
+            hasReplies && toggleShowReplies && (React__default.default.createElement(RepliesWrapper, null, replyElements)),
+            !toggleShowReplies && !hasMoreReplies && hasReplies && (React__default.default.createElement(RepliesWrapper, null,
+                React__default.default.createElement(ReplyWrapper, { "$hasLine": false },
+                    React__default.default.createElement(button.Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" }, "show replies"),
+                    React__default.default.createElement(ReplyIndicator, null)))),
+            hasMoreReplies && (React__default.default.createElement(RepliesWrapper, null,
+                React__default.default.createElement(ReplyWrapper, { "$hasLine": false },
+                    React__default.default.createElement(button.Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" }, "show more replies"),
+                    React__default.default.createElement(ReplyIndicator, null)))),
+            toggleShowCommentInput && (React__default.default.createElement(CommentWrapper, { onSubmit: handleCommentSubmit },
+                React__default.default.createElement(text_input.TextInput, { bg: "var(--color-grey-10)", placeholder: "Write a reply", onChange: handleCommentChange, value: comment$1 }))))));
+};
+const Wrapper = styled.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.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.styled.div `
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: var(--color-grey-10);
+  border-radius: 16px;
+`;
+const PickerWrapper = styled.styled.div `
+  position: absolute;
+  z-index: 1000;
+
+  ${({ $pickerOrientation }) => $pickerOrientation === 'up' ? 'transform: translateY(-345px);' : ''}
+  top: ${({ $top }) => $top}px;
+  left: ${({ $left }) => $left}px;
+`;
+const Reaction = styled.styled.div `
+  ${styles.Styles.flex}
+  display: flex;
+  padding: 2px 6px;
+  border-radius: 12px;
+  cursor: pointer;
+  ${({ $userSelected }) => $userSelected
+    ? `
+    background-color: var(--color-primary-blue-4);
+    border: 1px solid var(--color-primary-blue-3);
+    `
+    : ''}
+`;
+const RepliesWrapper = styled.styled.div `
+  padding-top: 12px;
+`;
+const ReplyWrapper = styled.styled.div `
+  position: relative;
+  ${({ $hasLine }) => $hasLine
+    ? `
+    &::before {
+      content: "";
+      position: absolute;
+      left: -28px;
+      height: 100%;
+      border-left: 2px solid var(--color-grey-9);
+    }`
+    : ''}
+`;
+const ReplyIndicator = styled.styled.div `
+  position: absolute;
+  top: -12px;
+  left: -28px;
+  width: 28px;
+  height: 32px;
+  border-bottom-left-radius: 16px;
+  border: 2px solid var(--color-grey-9);
+  border-top: none;
+  border-right: none;
+`;
+const CommentWrapper = styled.styled.form `
+  label {
+    margin-bottom: 16px;
+  }
+  label > div {
+    box-shadow: var(--elevation-6);
+    border-radius: 16px;
+  }
+`;
+
+exports.Comment = Comment;

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

@@ -0,0 +1,30 @@
+'use strict';
+
+const abbrTimeBeforeDate = (date) => {
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    if (diff < 60000) {
+        // under 1 min
+        return 'Now';
+    }
+    else if (diff < 3600000) {
+        // under one hour
+        const minutes = Math.floor(diff / 60000);
+        return `${minutes}m`;
+    }
+    else if (diff < 86400000) {
+        // under one day
+        const hours = Math.floor(diff / 3600000);
+        return `${hours}h`;
+    }
+    else if (diff < 604800000) {
+        // under one week
+        const days = Math.floor(diff / 86400000);
+        return `${days}d`;
+    }
+    else {
+        return `${Math.floor(diff / 604800000)}w`;
+    }
+};
+
+exports.abbrTimeBeforeDate = abbrTimeBeforeDate;

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

@@ -0,0 +1,140 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var _function = require('../../../utils/function.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const DrawerContext = React__default.default.createContext([false, (() => undefined)]);
+const Drawer = ({ children, controlledOpen, onOpenChange, }) => {
+    const [open, setOpen] = React__default.default.useState(controlledOpen || false);
+    React__default.default.useEffect(() => {
+        if (controlledOpen !== undefined) {
+            setOpen(controlledOpen);
+        }
+    }, [controlledOpen]);
+    const _children = React__default.default.Children.toArray(children);
+    const triggers = [];
+    const content = [];
+    let footer = null;
+    let header = null;
+    for (const child of _children) {
+        if (React__default.default.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__default.default.createElement(DrawerContext.Provider, { value: [open, setOpen] },
+        triggers,
+        open && (React__default.default.createElement(Background, { onClick: _function.callAll(() => setOpen(false), () => onOpenChange && onOpenChange()) })),
+        React__default.default.createElement(Component, { "$open": open },
+            header && React__default.default.createElement(HeaderWrapper, null, header),
+            React__default.default.createElement(ContentWrapper, null, content),
+            footer && React__default.default.createElement(FooterWrapper, null, footer))));
+};
+const Background = styled.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.styled.div `
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  max-width: 880px;
+  width: 100%;
+  z-index: 150;
+  display: flex;
+  flex-flow: column nowrap;
+  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.styled.div `
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-2);
+  filter: drop-shadow(var(--elevation-2));
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  border-radius: 16px 0px 0px 0px;
+`;
+const ContentWrapper = styled.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;
+  flex: 1;
+
+  &::-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.styled.div `
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-1);
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 0;
+  border-radius: 0px 0px 0px 16px;
+`;
+const DrawerTrigger = ({ children: child, }) => {
+    const [, setOpen] = React__default.default.useContext(DrawerContext);
+    return (child &&
+        React__default.default.cloneElement(child, {
+            onClick: _function.callAll(() => setOpen((prev) => !prev), child.props.onClick),
+        }));
+};
+DrawerTrigger.displayName = 'Drawer.Trigger';
+Drawer.Trigger = DrawerTrigger;
+const DrawerHeader = ({ children }) => (React__default.default.createElement("div", null, children));
+DrawerHeader.displayName = 'Drawer.Header';
+Drawer.Header = DrawerHeader;
+const DrawerContent = ({ children }) => (React__default.default.createElement("div", null, children));
+DrawerContent.displayName = 'Drawer.Content';
+Drawer.Content = DrawerContent;
+const DrawerFooter = ({ children }) => (React__default.default.createElement("div", null, children));
+DrawerFooter.displayName = 'Drawer.Footer';
+Drawer.Footer = DrawerFooter;
+
+exports.Drawer = Drawer;

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

@@ -0,0 +1,56 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var avatar = require('../../iconography/avatar/avatar.js');
+var box = require('../../atoms/box/box.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var heading = require('../../atoms/typography/heading.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Message = ({ messages, userId }) => {
+    const id = React__default.default.useId();
+    return (React__default.default.createElement(box.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__default.default.createElement(React__default.default.Fragment, { key: id + index },
+                isFirstMessageBySender && (React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin-top: 40px; margin-left: auto;" },
+                    createdDate.toLocaleDateString(),
+                    ' ',
+                    createdDate.toLocaleTimeString())),
+                React__default.default.createElement(Wrapper, { "$isSelf": isSelf }, content)));
+        }
+        return (React__default.default.createElement(React__default.default.Fragment, { key: id + index },
+            isFirstMessageBySender && (React__default.default.createElement(avatar.Avatar, { image: senderAvatarURI, href: senderHref, subtitle: React__default.default.createElement(paragraph.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__default.default.createElement(heading.H, { as: "span", "$color": "blue-2", "$fontSize": 18, "$lineHeight": 26, "$mediumBold": true }, senderName) })),
+            React__default.default.createElement(Wrapper, { "$isSelf": isSelf }, content)));
+    })));
+};
+const Wrapper = styled.styled.div `
+  max-width: 552px;
+  padding: 16px;
+  border-radius: 16px;
+  font-family: var(--font-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;`}
+`;
+
+exports.Message = Message;