@soul-refiner/design-system 2.0.4 → 2.1.1-alpha.1

package/dist/components/navigation/tabs/tabs.js

@@ -1,63 +1,5 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var Link = require('next/link');
-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);
-var Link__default = /*#__PURE__*/_interopDefaultCompat(Link);
-
-const colorLookup = {
-    blue: {
-        bg: 'var(--color-hue-blue-2)',
-        icon: 'var(--color-hue-blue-1)',
-    },
-    green: {
-        bg: 'var(--color-green-8)',
-        icon: 'var(--color-green-2)',
-    },
-    grey: {
-        bg: 'var(--color-grey-9)',
-        icon: 'var(--color-grey-7)',
-    },
-    mint: {
-        bg: 'var(--color-hue-mint-2)',
-        icon: 'var(--color-hue-mint-1)',
-    },
-    ocean: {
-        bg: 'var(--color-hue-ocean-2)',
-        icon: 'var(--color-hue-ocean-1)',
-    },
-    orange: {
-        bg: 'var(--color-hue-orange-2)',
-        icon: 'var(--color-hue-orange-1)',
-    },
-    pink: {
-        bg: 'var(--color-hue-pink-2)',
-        icon: 'var(--color-hue-pink-1)',
-    },
-    purple: {
-        bg: 'var(--color-hue-purple-2)',
-        icon: 'var(--color-hue-purple-1)',
-    },
-    red: {
-        bg: 'var(--color-red-9)',
-        icon: 'var(--color-red-3)',
-    },
-    yellow: {
-        bg: 'var(--color-yellow-8)',
-        icon: 'var(--color-yellow-3)',
-    },
-};
-const Tabs = ({ activeIndex, items, onChange, size = 'large', sx, }) => {
-    const id = React__default.default.useId();
-    return (React__default.default.createElement(Wrapper, { "$sx": sx }, items.map((item, index) => (React__default.default.createElement(Item, { active: activeIndex === index, color: item?.color, disabled: item?.disabled, href: item?.href, icon: item?.icon, key: id + index.toString(36), label: item.label, onClick: () => onChange && onChange(index), size: size })))));
-};
-const Wrapper = styled.styled.div `
+"use strict";var React=require("react"),styled=require("styled-components"),Link=require("next/link"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Link__default=_interopDefaultCompat(Link);const colorLookup={blue:{bg:"var(--color-hue-blue-2)",icon:"var(--color-hue-blue-1)"},green:{bg:"var(--color-green-8)",icon:"var(--color-green-2)"},grey:{bg:"var(--color-grey-9)",icon:"var(--color-grey-7)"},mint:{bg:"var(--color-hue-mint-2)",icon:"var(--color-hue-mint-1)"},ocean:{bg:"var(--color-hue-ocean-2)",icon:"var(--color-hue-ocean-1)"},orange:{bg:"var(--color-hue-orange-2)",icon:"var(--color-hue-orange-1)"},pink:{bg:"var(--color-hue-pink-2)",icon:"var(--color-hue-pink-1)"},purple:{bg:"var(--color-hue-purple-2)",icon:"var(--color-hue-purple-1)"},red:{bg:"var(--color-red-9)",icon:"var(--color-red-3)"},yellow:{bg:"var(--color-yellow-8)",icon:"var(--color-yellow-3)"}},Tabs=({activeIndex:r,items:e,onChange:a,size:l="large",sx:o})=>{const t=React__default.default.useId();return React__default.default.createElement(Wrapper,{$sx:o},e.map((e,o)=>React__default.default.createElement(Item,{active:r===o,color:e?.color,disabled:e?.disabled,href:e?.href,icon:e?.icon,key:t+o.toString(36),label:e.label,onClick:()=>a&&a(o),size:l})))},Wrapper=styled.styled.div`
   display: flex;
   flex-flow: row nowrap;
   align-items: flex-end;
@@ -70,19 +12,8 @@ const Wrapper = styled.styled.div `
     text-decoration: none;
   }
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Item = ({ active, color, disabled, href, icon, label, onClick, size = 'large', }) => {
-    const inputColor = disabled ? 'grey' : color ? color : 'blue';
-    const iconColor = colorLookup[inputColor].icon;
-    const bgColor = colorLookup[inputColor].bg;
-    const fontSize = size === 'large' ? 16 : size === 'medium' ? 14 : 12;
-    const lineHeight = size === 'large' ? 24 : size === 'medium' ? 20 : 16;
-    return (React__default.default.createElement(Element, { onClick: !disabled && onClick ? onClick : undefined, href: href || '#', scroll: false, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
-        icon && React__default.default.createElement(IconWrapper, { "$bg": bgColor }, icon),
-        React__default.default.createElement(paragraph.P, { "$fontSize": fontSize, "$lineHeight": lineHeight, "$semiBold": true }, label)));
-};
-const Element = styled.styled(Link__default.default) `
+  ${({$sx:e})=>e||""}
+`,Item=({active:e,color:o,disabled:r,href:a,icon:l,label:t,onClick:i,size:c="large"})=>{var o=r?"grey":o||"blue",n=colorLookup[o].icon,o=colorLookup[o].bg,p="large"===c?16:"medium"===c?14:12,d="large"===c?24:"medium"===c?20:16;return React__default.default.createElement(Element,{onClick:!r&&i?i:void 0,href:a||"#",scroll:!1,$active:e,$color:n,$disabled:r,$hasIcon:!!l,$size:c},l&&React__default.default.createElement(IconWrapper,{$bg:o},l),React__default.default.createElement(paragraph.P,{$fontSize:p,$lineHeight:d,$semiBold:!0},t))},Element=styled.styled(Link__default.default)`
   position: relative;
   display: flex;
   align-items: center;
@@ -90,30 +21,20 @@ const Element = styled.styled(Link__default.default) `
   cursor: pointer;
   user-select: none;
 
-  ${({ $size, $hasIcon }) => $hasIcon
-    ? 'padding: 16px 12px;'
-    : $size === 'small'
-        ? 'padding: 10px 8px;'
-        : $size === 'medium'
-            ? 'padding: 14px 10px;'
-            : 'padding: 22px 12px;'}
+  ${({$size:e,$hasIcon:o})=>o?"padding: 16px 12px;":"small"===e?"padding: 10px 8px;":"medium"===e?"padding: 14px 10px;":"padding: 22px 12px;"}
 
-  ${({ $hasIcon, $color, $disabled }) => $disabled
-    ? `
+  ${({$hasIcon:e,$color:o,$disabled:r})=>r?`
   cursor: initial;
-  `
-    : $hasIcon
-        ? `
+  `:e?`
   &:hover {
     p {
-      color: ${$color};
+      color: ${o};
     }
   }
 
   div > svg {
-    fill: ${$color};
-  }`
-        : `
+    fill: ${o};
+  }`:`
   &:hover {
     background-color: var(--color-grey-10);
     &:after {
@@ -132,8 +53,7 @@ const Element = styled.styled(Link__default.default) `
     background-color: var(--color-grey-9);
   }`}
 
-  ${({ $active, $color, $hasIcon }) => $active
-    ? `
+  ${({$active:e,$color:o,$hasIcon:r})=>e?`
   &:after {
     position: absolute;
     content: '';
@@ -141,19 +61,13 @@ const Element = styled.styled(Link__default.default) `
     height: 3px;
     bottom: 0px;
     left: 0px;
-    background-color: ${$hasIcon ? $color : 'var(--color-primary-blue-2)'} !important;
+    background-color: ${r?o:"var(--color-primary-blue-2)"} !important;
     border-top-right-radius: 3px;
     border-top-left-radius: 3px;
   }
-  `
-    : ''}
-`;
-const IconWrapper = styled.styled.div `
+  `:""}
+`,IconWrapper=styled.styled.div`
   padding: 8px;
   border-radius: 8px;
-  background-color: ${({ $bg }) => $bg};
-`;
-Tabs.Item = Item;
-Item.displayName = 'Tabs.Item';
-
-exports.Tabs = Tabs;
+  background-color: ${({$bg:e})=>e};
+`;(Tabs.Item=Item).displayName="Tabs.Item",exports.Tabs=Tabs;

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

@@ -1,44 +1,7 @@
 "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 `
+"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),_function=require("../../../utils/function.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../icons/arrow/chevron_up.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const AccordionContext=React__default.default.createContext([-1,()=>{}]),Accordion=({children:e,sx:t})=>{const[n,r]=React__default.default.useState(-1);return React__default.default.createElement(AccordionContext.Provider,{value:[n,t=>{r(e=>e===t?-1:t)}]},React__default.default.createElement(Wrapper,{$sx:t},React__default.default.Children.map(e,(e,t)=>React__default.default.isValidElement(e)?React__default.default.cloneElement(e,{index:t}):null)))},Wrapper=styled.styled.div`
+  ${({$sx:e})=>e||""};
+`,AccordionItem=({buttonSx:e,children:t,index:n,sx:r,trigger:a})=>{const[o,c]=React__default.default.useContext(AccordionContext);return React__default.default.createElement(box.Box,{$dir:"column"},React__default.default.createElement(TriggerWrapper,{onClick:_function.callAll(()=>c(n),a?.props?.onClick),$sx:e},a,o===n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)),React__default.default.createElement(box.Box,{sx:o===n?r:"visibility: hidden; height: 0px;"},t))},TriggerWrapper=styled.styled.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -48,9 +11,5 @@ const TriggerWrapper = styled.styled.button `
   outline: none;
   background-color: transparent;
   cursor: pointer;
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-Accordion.Item = AccordionItem;
-AccordionItem.displayName = 'Accordion.Item';
-
-exports.Accordion = Accordion;
+  ${({$sx:e})=>e||""};
+`;(Accordion.Item=AccordionItem).displayName="Accordion.Item",exports.Accordion=Accordion;

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

@@ -1,55 +1,26 @@
 "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 `
+"use strict";var React=require("react"),styled=require("styled-components"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const CalendarDate=({monthAbbreviation:e,date:t,dayOfWeek:a,startTime:r,endTime:l,sx:n,size:d="large"})=>React__default.default.createElement(Container,{$sx:n},React__default.default.createElement(CalendarContainer,{$size:d},React__default.default.createElement(MonthContainer,{$size:d},"large"===d&&React__default.default.createElement(heading.H.Seven,{$color:"white",$textAlign:"center",$semiBold:!0},e),"small"===d&&React__default.default.createElement(paragraph.P,{$color:"white",$textAlign:"center",$fontSize:14},e)),React__default.default.createElement(DateContainer,{$size:d},"large"===d&&React__default.default.createElement(heading.H.One,{$textAlign:"center",$semiBold:!0},t),"small"===d&&React__default.default.createElement(heading.H.Six,{$color:"grey-2",$textAlign:"center"},t))),a&&r&&l&&React__default.default.createElement(TimeContainer,null,React__default.default.createElement(paragraph.P,{as:"span",$color:"red-5"},a+`, ${r} -> `+l))),Container=styled.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const CalendarContainer = styled.styled.div `
+  ${({$sx:e})=>e||""}
+`,CalendarContainer=styled.styled.div`
   display: flex;
   flex-direction: column;
 
-  ${({ $size }) => ($size === 'large' ? 'width: 120px;' : 'width: 64px;')}
-`;
-const MonthContainer = styled.styled.div `
+  ${({$size:e})=>"large"===e?"width: 120px;":"width: 64px;"}
+`,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 `
+  ${({$size:e})=>"large"===e?"padding: 8px 16px;":"padding: 2px 8px;"}
+`,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 `
+  ${({$size:e})=>"large"===e?"padding: 8px 16px;":"padding: 2px 16px;"}
+`,TimeContainer=styled.styled.div`
   margin-top: 16px;
-`;
-
-exports.CalendarDate = CalendarDate;
+`;exports.CalendarDate=CalendarDate;

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

@@ -1,47 +1,5 @@
 "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 `
+"use strict";var React=require("react"),styled=require("styled-components"),chevron_left=require("../../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../../icons/arrow/chevron_right.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const DEFAULT_SCROLL_TRIGGER_DISTANCE=11,DEFAULT_SCROLL_DISTANCE=450,CardCarousel=({children:e,onScrollEnd:t,scrollTriggerDistance:r=DEFAULT_SCROLL_TRIGGER_DISTANCE,scrollDistance:l=DEFAULT_SCROLL_DISTANCE,sx:o})=>{const a=React__default.default.useRef(null);return React__default.default.createElement(Wrapper,{$sx:o},React__default.default.createElement(Button,{className:"carousel-navigation",onClick:()=>{var e;a.current&&(e=a.current.scrollLeft-l,a.current.scrollLeft=e<0?0:e)},$side:"left"},React__default.default.createElement(chevron_left.ChevronLeft,{color:"white",size:48})),React__default.default.createElement(Inner,{onScroll:e=>{e=e.target;e.scrollWidth-e.scrollLeft-e.clientWidth<r&&t&&t()},ref:a},e),React__default.default.createElement(Button,{className:"carousel-navigation",onClick:()=>{var e;a.current&&(e=a.current.scrollLeft+l,a.current.scrollLeft=e)},$side:"right"},React__default.default.createElement(chevron_right.ChevronRight,{color:"white",size:48})))},Wrapper=styled.styled.div`
   position: relative;
   height: 288px;
 
@@ -49,9 +7,8 @@ const Wrapper = styled.styled.div `
     display: block;
   }
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Inner = styled.styled.div `
+  ${({$sx:e})=>e||""}
+`,Inner=styled.styled.div`
   position: absolute;
   width: 100%;
   z-index: 0;
@@ -76,8 +33,7 @@ const Inner = styled.styled.div `
     width: 0px;
     height: 0px;
   }
-`;
-const Button = styled.styled.button `
+`,Button=styled.styled.button`
   position: absolute;
   z-index: 1;
   top: 0px;
@@ -93,14 +49,10 @@ const Button = styled.styled.button `
 
   display: none;
 
-  ${({ $side }) => $side === 'left'
-    ? `
+  ${({$side:e})=>"left"===e?`
     left: 0px;
     border-radius: 0px 16px 16px 0px;
-    `
-    : `
+    `:`
     right: 0px;
     border-radius: 16px 0px 0px 16px;`};
-`;
-
-exports.CardCarousel = CardCarousel;
+`;exports.CardCarousel=CardCarousel;

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

@@ -1,122 +1,5 @@
 "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 `
+"use strict";var React=require("react"),styled=require("styled-components"),Picker=require("@emoji-mart/react"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),text_input=(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"),require("../../input/text_input/text_input.js")),button=(require("../../input/calendar/calendar.js"),require("../../input/time/time.js"),require("../../actions/button/button.js")),portal=require("../portal/portal.js"),emojis=require("../../../emoji/emojis.json.js"),styles=require("../../../common/styles.js"),thumbs_up=require("../../../icons/basic/thumbs_up.js"),comment=require("../../../icons/message/comment.js"),helpers=require("./helpers.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Picker__default=_interopDefaultCompat(Picker);const MAX_REACTIONS_SHOWN=5,Comment=({avatarTooltipContent:e,avatarTooltipSx:t,content:a,createdDate:r,hasMoreReplies:l,id:o,onComment:i,onReact:n,onShowReplies:u,reactionModal:p,reactions:d,replies:s,userImageUri:c,userName:f,userReactions:m,userProfileUri:_})=>{const[x,y]=React__default.default.useState(!1),[R,b]=React__default.default.useState({x:0,y:0}),[h,g]=React__default.default.useState("up"),[$,v]=React__default.default.useState(!1),[E,j]=React__default.default.useState(!1),[C,q]=React__default.default.useState(""),k=React__default.default.Children.toArray(s);var s=()=>{u&&u(),j(!0)},r=helpers.abbrTimeBeforeDate(r),d=d&&Object.entries(d).slice(0,MAX_REACTIONS_SHOWN).sort((e,t)=>e[1]<t[1]?1:-1).map(e=>React__default.default.createElement(Reaction,{key:o+e[0],onClick:()=>n(e[0]),$align:"center",$dir:"row",$gap:5,$userSelected:m?.includes(e[0])},e[0],React__default.default.createElement(paragraph.P,{$bold:!0,$fontSize:10,$lineHeight:14},e[1]))),S=!!k?.length&&0<k.length,W=S&&k.map((e,t)=>{var a;return React__default.default.isValidElement(e)?(a=e.props?.id,t=t!==k.length-1||l,React__default.default.createElement(ReplyWrapper,{$hasLine:t,key:a},e,React__default.default.createElement(ReplyIndicator,null))):null});return React__default.default.createElement(Wrapper,{id:o},React__default.default.createElement(avatar.Avatar,{href:_,image:c,size:32,tooltipContent:e,tooltipSx:t}),React__default.default.createElement(box.Box,{$flex:1,$dir:"column"},React__default.default.createElement(ContentWrapper,{$hasReplies:S||!!l},React__default.default.createElement(CommentBox,null,React__default.default.createElement(paragraph.P,{$bold:!0,$color:"grey-2",$fontSize:14,$lineHeight:20},f),React__default.default.createElement(paragraph.P,{sx:"letter-spacing: -0.176px;"},a)),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:e=>{e.stopPropagation(),y(e=>!e),b({y:e.clientY,x:e.clientX}),g(400<e.clientY?"up":"down")},size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(comment.Comment,{color:"primary-blue-2",onClick:()=>v(e=>!e),size:24,sx:"border-radius: 50%; cursor: pointer; flex-shrink: 0;"}),React__default.default.createElement(paragraph.P,{$color:"grey-7"},"•"),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:24,sx:"flex-shrink: 0;"},r),React__default.default.createElement(box.Box,{$display:"flex",$flow:"row wrap",$gap:6,sx:"max-width: calc(100% - 190px); margin-left: auto;"},d,p),x&&React__default.default.createElement(portal.Portal,null,React__default.default.createElement(PickerWrapper,{$pickerOrientation:h,$top:R.y,$left:R.x},React__default.default.createElement(Picker__default.default,{data:emojis.default,onEmojiSelect:({native:e})=>{n(e),y(!1)},onClickOutside:()=>y(!1),maxFrequentRows:1,navPosition:"none",previewPosition:"none",perLine:9,theme:"auto"}))))),S&&E&&React__default.default.createElement(RepliesWrapper,null,W),!E&&!l&&S&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show replies"),React__default.default.createElement(ReplyIndicator,null))),l&&React__default.default.createElement(RepliesWrapper,null,React__default.default.createElement(ReplyWrapper,{$hasLine:!1},React__default.default.createElement(button.Button,{onClick:s,size:"small",sx:"color: var(--color-grey-3);",type:"text"},"show more replies"),React__default.default.createElement(ReplyIndicator,null))),$&&React__default.default.createElement(CommentWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault(),i(C),q("")}},React__default.default.createElement(text_input.TextInput,{bg:"var(--color-grey-10)",placeholder:"Write a reply",onChange:e=>{q(e.target.value)},value:C}))))},Wrapper=styled.styled.div`
   max-width: 700px;
   display: flex;
   flex-direction: row;
@@ -124,12 +7,10 @@ const Wrapper = styled.styled.div `
   gap: 12px;
   justify-content: space-between;
   position: relative;
-`;
-const ContentWrapper = styled.styled.div `
+`,ContentWrapper=styled.styled.div`
   display: flex;
   flex-direction: column;
-  ${({ $hasReplies }) => $hasReplies
-    ? `
+  ${({$hasReplies:e})=>e?`
     position: relative;
 
     &::before {
@@ -139,55 +20,44 @@ const ContentWrapper = styled.styled.div `
       left: -28px;
       height: calc(100% - 12px);
       border-left: 2px solid var(--color-grey-9);
-    }`
-    : ''}
-`;
-const CommentBox = styled.styled.div `
+    }`:""}
+`,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 `
+`,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 `
+  ${({$pickerOrientation:e})=>"up"===e?"transform: translateY(-345px);":""}
+  top: ${({$top:e})=>e}px;
+  left: ${({$left:e})=>e}px;
+`,Reaction=styled.styled.div`
   ${styles.Styles.flex}
   display: flex;
   padding: 2px 6px;
   border-radius: 12px;
   cursor: pointer;
-  ${({ $userSelected }) => $userSelected
-    ? `
+  ${({$userSelected:e})=>e?`
     background-color: var(--color-primary-blue-4);
     border: 1px solid var(--color-primary-blue-3);
-    `
-    : ''}
-`;
-const RepliesWrapper = styled.styled.div `
+    `:""}
+`,RepliesWrapper=styled.styled.div`
   padding-top: 12px;
-`;
-const ReplyWrapper = styled.styled.div `
+`,ReplyWrapper=styled.styled.div`
   position: relative;
-  ${({ $hasLine }) => $hasLine
-    ? `
+  ${({$hasLine:e})=>e?`
     &::before {
       content: "";
       position: absolute;
       left: -28px;
       height: 100%;
       border-left: 2px solid var(--color-grey-9);
-    }`
-    : ''}
-`;
-const ReplyIndicator = styled.styled.div `
+    }`:""}
+`,ReplyIndicator=styled.styled.div`
   position: absolute;
   top: -12px;
   left: -28px;
@@ -197,8 +67,7 @@ const ReplyIndicator = styled.styled.div `
   border: 2px solid var(--color-grey-9);
   border-top: none;
   border-right: none;
-`;
-const CommentWrapper = styled.styled.form `
+`,CommentWrapper=styled.styled.form`
   label {
     margin-bottom: 16px;
   }
@@ -206,6 +75,4 @@ const CommentWrapper = styled.styled.form `
     box-shadow: var(--elevation-6);
     border-radius: 16px;
   }
-`;
-
-exports.Comment = Comment;
+`;exports.Comment=Comment;

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

@@ -1,30 +1 @@
-'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;
+"use strict";const abbrTimeBeforeDate=e=>{e=(new Date).getTime()-e.getTime();return e<6e4?"Now":e<36e5?Math.floor(e/6e4)+"m":e<864e5?Math.floor(e/36e5)+"h":e<6048e5?Math.floor(e/864e5)+"d":Math.floor(e/6048e5)+"w"};exports.abbrTimeBeforeDate=abbrTimeBeforeDate;