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

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

@@ -0,0 +1,73 @@
+"use client";
+"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;
+  justify-content: center;
+  gap: 16px;
+  margin: 0px;
+  padding: 0px;
+
+  a {
+    text-decoration: none;
+  }
+
+  ${({$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;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+
+  ${({$size:e,$hasIcon:o})=>o?"padding: 16px 12px;":"small"===e?"padding: 10px 8px;":"medium"===e?"padding: 14px 10px;":"padding: 22px 12px;"}
+
+  ${({$hasIcon:e,$color:o,$disabled:r})=>r?`
+  cursor: initial;
+  `:e?`
+  &:hover {
+    p {
+      color: ${o};
+    }
+  }
+
+  div > svg {
+    fill: ${o};
+  }`:`
+  &:hover {
+    background-color: var(--color-grey-10);
+    &:after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 3px;
+      bottom: 0px;
+      left: 0px;
+      background-color: var(--color-primary-blue-3);
+      border-top-right-radius: 3px;
+      border-top-left-radius: 3px;
+    }
+  }
+  &:active {
+    background-color: var(--color-grey-9);
+  }`}
+
+  ${({$active:e,$color:o,$hasIcon:r})=>e?`
+  &:after {
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 3px;
+    bottom: 0px;
+    left: 0px;
+    background-color: ${r?o:"var(--color-primary-blue-2)"} !important;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  `:""}
+`,IconWrapper=styled.styled.div`
+  padding: 8px;
+  border-radius: 8px;
+  background-color: ${({$bg:e})=>e};
+`;(Tabs.Item=Item).displayName="Tabs.Item",exports.Tabs=Tabs;

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

@@ -0,0 +1,15 @@
+"use client";
+"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;
+  padding: 16px;
+  appearance: none;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  ${({$sx:e})=>e||""};
+`;(Accordion.Item=AccordionItem).displayName="Accordion.Item",exports.Accordion=Accordion;

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

@@ -0,0 +1,26 @@
+"use client";
+"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:e})=>e||""}
+`,CalendarContainer=styled.styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${({$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: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:e})=>"large"===e?"padding: 8px 16px;":"padding: 2px 16px;"}
+`,TimeContainer=styled.styled.div`
+  margin-top: 16px;
+`;exports.CalendarDate=CalendarDate;

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

@@ -0,0 +1,58 @@
+"use client";
+"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;
+
+  &:hover .carousel-navigation {
+    display: block;
+  }
+
+  ${({$sx:e})=>e||""}
+`,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;
+  }
+`,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:e})=>"left"===e?`
+    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,78 @@
+"use client";
+"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;
+  align-items: flex-start;
+  gap: 12px;
+  justify-content: space-between;
+  position: relative;
+`,ContentWrapper=styled.styled.div`
+  display: flex;
+  flex-direction: column;
+  ${({$hasReplies:e})=>e?`
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 32px;
+      left: -28px;
+      height: calc(100% - 12px);
+      border-left: 2px solid var(--color-grey-9);
+    }`:""}
+`,CommentBox=styled.styled.div`
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: var(--color-grey-10);
+  border-radius: 16px;
+`,PickerWrapper=styled.styled.div`
+  position: absolute;
+  z-index: 1000;
+
+  ${({$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:e})=>e?`
+    background-color: var(--color-primary-blue-4);
+    border: 1px solid var(--color-primary-blue-3);
+    `:""}
+`,RepliesWrapper=styled.styled.div`
+  padding-top: 12px;
+`,ReplyWrapper=styled.styled.div`
+  position: relative;
+  ${({$hasLine:e})=>e?`
+    &::before {
+      content: "";
+      position: absolute;
+      left: -28px;
+      height: 100%;
+      border-left: 2px solid var(--color-grey-9);
+    }`:""}
+`,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;
+`,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 @@
+"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;

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

@@ -0,0 +1,72 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),_function=require("../../../utils/function.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const DrawerContext=React__default.default.createContext([!1,()=>{}]),Drawer=({children:e,controlledOpen:r,onOpenChange:t})=>{const[a,o]=React__default.default.useState(r||!1);React__default.default.useEffect(()=>{void 0!==r&&o(r)},[r]);var l,d=[],n=[];let i=null,c=null;for(const p of React__default.default.Children.toArray(e))React__default.default.isValidElement(p)&&("Drawer.Trigger"===(l=p.type?.displayName)?d.push(p):"Drawer.Header"===l?c=p:"Drawer.Footer"===l?i=p:n.push(p));return React__default.default.createElement(DrawerContext.Provider,{value:[a,o]},d,a&&React__default.default.createElement(Background,{onClick:_function.callAll(()=>o(!1),()=>t&&t())}),React__default.default.createElement(Component,{$open:a},c&&React__default.default.createElement(HeaderWrapper,null,c),React__default.default.createElement(ContentWrapper,null,n),i&&React__default.default.createElement(FooterWrapper,null,i)))},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;
+`,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:e})=>e?"margin-right: 0px;":""}
+`,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;
+`,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%;
+  }
+`,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;
+`,DrawerTrigger=({children:e})=>{const[,r]=React__default.default.useContext(DrawerContext);return e&&React__default.default.cloneElement(e,{onClick:_function.callAll(()=>r(e=>!e),e.props.onClick)})},DrawerHeader=(DrawerTrigger.displayName="Drawer.Trigger",Drawer.Trigger=DrawerTrigger,({children:e})=>React__default.default.createElement("div",null,e)),DrawerContent=(DrawerHeader.displayName="Drawer.Header",Drawer.Header=DrawerHeader,({children:e})=>React__default.default.createElement("div",null,e)),DrawerFooter=(DrawerContent.displayName="Drawer.Content",Drawer.Content=DrawerContent,({children:e})=>React__default.default.createElement("div",null,e));DrawerFooter.displayName="Drawer.Footer",Drawer.Footer=DrawerFooter,exports.Drawer=Drawer;

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

@@ -0,0 +1,21 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),avatar=require("../../iconography/avatar/avatar.js"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),heading=require("../../atoms/typography/heading.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Message=({messages:d,userId:u})=>{const c=React__default.default.useId();return React__default.default.createElement(box.Box,{$display:"flex",$dir:"column",$gap:16},d.map(({content:e,createdDate:a,senderAvatarURI:t,senderHref:r,senderId:l,senderName:o},i)=>{var n=l===u,l=d?.[i-1]?.senderId!==l;return n?React__default.default.createElement(React__default.default.Fragment,{key:c+i},l&&React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin-top: 40px; margin-left: auto;"},a.toLocaleDateString()," ",a.toLocaleTimeString()),React__default.default.createElement(Wrapper,{$isSelf:n},e)):React__default.default.createElement(React__default.default.Fragment,{key:c+i},l&&React__default.default.createElement(avatar.Avatar,{image:t,href:r,subtitle:React__default.default.createElement(paragraph.P,{as:"span",$color:"blue-2",$fontSize:12,$lineHeight:16,sx:"vertical-align: top;"},a.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:!0},o)}),React__default.default.createElement(Wrapper,{$isSelf:n},e))}))},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:e})=>e?`
+    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;

package/dist/components/surfaces/modal/modal.js

@@ -0,0 +1,44 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),button=require("../../actions/button/button.js"),close=require("../../../icons/basic/close.js"),_function=require("../../../utils/function.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const ModalContext=React__default.default.createContext([!1,()=>{}]),Modal=({alwaysRender:e=!0,controlledOpen:t,onChange:a,children:l,...o})=>{const[n,d]=React__default.default.useState(t||!1);React__default.default.useEffect(()=>{void 0!==t&&d(t)},[t]),React__default.default.useEffect(()=>{a&&a(n)},[n]);let r;const i=[];return React__default.default.Children.forEach(l,e=>{var t=React__default.default.isValidElement(e)&&e.type?.displayName;t&&t.toLowerCase().includes("trigger")?r=e:i.push(e)}),React__default.default.createElement(ModalContext.Provider,{value:[n,d],...o},r,(n||e)&&i)},ModalTrigger=({children:e})=>{const[,t]=React__default.default.useContext(ModalContext);return e&&React__default.default.cloneElement(e,{onClick:_function.callAll(()=>t(!0),e.props.onClick,e=>{e?.stopPropagation(),e?.preventDefault()})})},ModalDismiss=(ModalTrigger.displayName="Modal.Trigger",Modal.Trigger=ModalTrigger,({children:e,setClosed:t})=>{const[,a]=React__default.default.useContext(ModalContext);return e&&React__default.default.cloneElement(e,{onClick:_function.callAll(()=>a(!1),e.props.onClick,e=>{t&&t(),e?.stopPropagation(),e?.preventDefault()})})}),ModalContent=(ModalDismiss.displayName="Modal.Dismiss",Modal.Dismiss=ModalDismiss,({backgroundDark:e=!0,children:t,footer:a,header:l,setClosed:o,sx:n,...d})=>{const[r,i]=React__default.default.useContext(ModalContext);return React__default.default.createElement(Wrapper,{$backgroundDark:e,$open:r,onClick:e=>{e.currentTarget==e.target&&(e.preventDefault(),e.stopPropagation(),e.preventDefault(),o?o():i(!1))}},React__default.default.createElement(Content,{...d,$sx:n},l&&React__default.default.createElement("div",{className:"header"},React__default.default.createElement("div",null,l),React__default.default.createElement(Modal.Dismiss,{setClosed:o},React__default.default.createElement(button.Button,{icon:React__default.default.createElement(close.Close,null),type:"special"}))),t,a&&React__default.default.createElement("div",{className:"footer"},a)))}),Wrapper=(ModalContent.displayName="Modal.Content",Modal.Content=ModalContent,styled.styled.div`
+  ${({$open:e})=>e?`display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;`:"display: none;"}
+  ${({$backgroundDark:e})=>e?`background: rgba(0, 0, 0, 0.5);
+    cursor: pointer;`:""}
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100vw;
+  height: 100vh;
+  padding: 0px;
+  margin: 0px;
+  overflow: hidden;
+`),Content=styled.styled.div`
+  position: absolute;
+  z-index: 101;
+  background-color: var(--color-white);
+  box-shadow: var(--elevation-2);
+  border-radius: var(--small);
+  cursor: initial;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  [class~='header'] {
+    display: flex;
+    align-items: center;
+
+    div:first-child {
+      flex: 1;
+    }
+  }
+
+  [class~='footer'] {
+    position: relative;
+    padding-top: 16px;
+  }
+  ${({$sx:e})=>e||""}
+`;exports.Modal=Modal;

package/dist/components/surfaces/portal/portal.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";var React=require("react"),ReactDOM=require("react-dom");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),ReactDOM__default=_interopDefaultCompat(ReactDOM);const Portal=({children:e,wrapperId:a="root-portal-wrapper"})=>{const[t,r]=React__default.default.useState(null);return React__default.default.useEffect(()=>{let e=document.getElementById(a),t=!1;return e||(t=!0,(e=document.createElement("div")).setAttribute("id",a),document.body.appendChild(e)),r(e),()=>{t&&e?.parentNode&&e.parentNode.removeChild(e)}},[a]),t?ReactDOM__default.default.createPortal(e,t):null};exports.Portal=Portal;

package/dist/components/surfaces/post/post.js

@@ -0,0 +1,104 @@
+"use client";
+"use strict";var React=require("react"),Image=require("next/image"),Link=require("next/link"),styled=require("styled-components"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),time_ago=(require("../../atoms/box/box.js"),require("../../atoms/typography/display.js"),require("../../atoms/typography/typography.js"),require("../../atoms/time_ago/time_ago.js")),button=require("../../actions/button/button.js"),avatar=require("../../iconography/avatar/avatar.js"),lock=require("../../../icons/security/lock.js"),modal=require("../modal/modal.js"),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),Image__default=_interopDefaultCompat(Image),Link__default=_interopDefaultCompat(Link);const Post=({actions:e,author:t,authorActive:a,authorHref:l,authorImage:i,avatarTooltipContent:r,avatarTooltipSx:o,children:n,content:d,createdDate:s,dropdown:u,hasComments:c,id:p,images:f,isPaywalled:h=!1,onJoin:m})=>{const g=React__default.default.useId(),[_,x]=React__default.default.useState(-1),[y,v]=React__default.default.useState({x:"30vw",y:"30vh"});React__default.default.useEffect(()=>{const e=e=>{"ArrowLeft"===e.key?b():"ArrowRight"===e.key?w():"Escape"!==e.key&&"Enter"!==e.key||x(-1)};return"undefined"!=typeof document&&f?.length&&document.addEventListener("keydown",e),()=>{f?.length&&document.removeEventListener("keydown",e)}},[]);e=React__default.default.Children.toArray(e),n=React__default.default.Children.toArray(n);const w=()=>{x(e=>f?.length&&e!==f.length-1?e+1:e)},b=()=>{x(e=>f?.length&&0!==e?e-1:e)};return React__default.default.createElement(Wrapper,{id:p},-1<_&&!!f?.[_]&&React__default.default.createElement(modal.Modal,{alwaysRender:!1,controlledOpen:!0,onChange:e=>!e&&x(-1)},React__default.default.createElement(modal.Modal.Content,{sx:`
+            position: relative; 
+            height: ${y.y}; 
+            width: ${y.x};
+            margin: 0 auto;
+            `},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==_,onClick:b},React__default.default.createElement(chevron_left.ChevronLeft,{color:"white",size:48})),React__default.default.createElement(Image__default.default,{alt:"",fill:!0,quality:100,onLoad:e=>{var{naturalHeight:e,naturalWidth:t}=e.target;let a=t+"px",l=e+"px";window?.innerHeight<e&&window?.innerWidth<t?(a=Math.floor(.95*window.innerHeight*t/e)+"px",l=Math.round(.95*window.innerWidth*e/t)+"px"):window?.innerHeight<e?(a=Math.floor(.95*window.innerHeight*t/e)+"px",l="95vh"):window?.innerWidth<t&&(a="95vw",l=Math.round(.95*window.innerWidth*e/t)+"px"),v({x:a,y:l})},priority:!0,sizes:"100vw",src:f[_],style:{objectFit:"cover"}}),React__default.default.createElement(NavArrow,{$side:"right",$visible:_!==f.length-1,onClick:w},React__default.default.createElement(chevron_right.ChevronRight,{color:"white",size:48})))),React__default.default.createElement(Header,null,React__default.default.createElement(avatar.Avatar,{as:l?Link__default.default:"button",href:l,image:i,size:64,status:a?"online":void 0,subtitle:React__default.default.createElement(paragraph.P,{as:"span",sx:"vertical-align: top;",$fontSize:14,$lineHeight:20},React__default.default.createElement(time_ago.TimeAgo,{date:new Date(s)})),title:React__default.default.createElement(heading.H,{as:"span",$bold:!0,$fontSize:18,$lineHeight:26},t),textPosition:"right",tooltipContent:r,tooltipSx:o,sx:l?"img { cursor: pointer; }":void 0}),u),!!d?.length&&React__default.default.createElement("div",{style:{padding:"16px 24px"}},React__default.default.createElement(paragraph.P,{$textClampLines:h?2:void 0},d)),!!f?.length&&React__default.default.createElement(ImagesWrapper,{$numImages:f.length,$isPaywalled:h},f.slice(0,4).map((e,t)=>React__default.default.createElement(ImageWrapper,{key:""+g+e.slice(0,15)+t},React__default.default.createElement(Image__default.default,{alt:"",fill:!0,onClick:()=>x(t),quality:100,src:e,style:{cursor:"pointer"}}))),4<f.length&&React__default.default.createElement(heading.H,{as:"p",className:"more-than",$color:"grey-10",$fontSize:28,$lineHeight:36,$semiBold:!0},"+",f.length-4)),!!f?.length&&h&&React__default.default.createElement(PaywallWrapper,null,React__default.default.createElement(lock.Lock,{size:40,color:"grey-7"}),React__default.default.createElement(paragraph.P,{$fontSize:14,$bold:!0,$lineHeight:20,$color:"white"},"Become a member",React__default.default.createElement("br",null),"to unlock this post"),React__default.default.createElement(button.Button,{onClick:m,size:"small",sx:"width: 213px;",type:"outlined"},"Join now")),!!e.length&&React__default.default.createElement(ActionsWrapper,null,!h&&e),c&&!!n.length&&React__default.default.createElement(CommentWrapper,null,n))},Wrapper=styled.styled.div`
+  position: relative;
+  max-width: 700px;
+  width: 100%;
+  background-color: var(--color-white);
+  border-radius: 24px;
+  box-shadow: var(--elevation-7);
+
+  label > div {
+    box-shadow: var(--elevation-6);
+    border-radius: 16px;
+  }
+`,Header=styled.styled.div`
+  padding: 16px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid var(--color-grey-9);
+`,ImagesWrapper=styled.styled.div`
+  position: relative;
+  display: flex;
+  gap: 8px;
+  flex-flow: row wrap;
+  justify-content: space-between;
+
+  @media screen and (max-width: 532px) {
+    overflow-y: auto;
+  }
+
+  .more-than {
+    position: absolute;
+    bottom: 94px;
+    right: 154px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
+  }
+
+  ${({$numImages:e})=>1<e?`
+    div {
+      min-width: calc(50% - 4px);
+      max-width: calc(50% - 4px);
+
+      flex:1;
+      img {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+      }
+    }`:`
+    div > img {
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+    }
+    `}
+
+  ${({$isPaywalled:e})=>e?`
+    filter: blur(10px) brightness(0.6);
+    clip-path: inset(0px 0px 0px 0px);`:""}
+`,ImageWrapper=styled.styled.div`
+  position: relative;
+  aspect-ratio: 700 / 427;
+  flex: 1;
+  min-width: min(227px, 80vw);
+`,PaywallWrapper=styled.styled.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  top: 310px;
+  left: 242px;
+`,ActionsWrapper=styled.styled.div`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 24px;
+`,CommentWrapper=styled.styled.div`
+  padding: 24px;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 24px;
+`,NavArrow=styled.styled.button`
+  width: 48px;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  z-index: 100;
+  top: calc(50vh - 75px);
+  background-color: rgba(0, 0, 0, 0.5);
+  ${({$side:e})=>e}: 0;
+  border-radius: ${({$side:e})=>"left"===e?"0 12px 12px 0":"12px 0 0 12px"};
+  ${({$visible:e})=>e?"visibility: visible; cursor: pointer;":"visibility: hidden; pointer-events: none;"}
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+`;exports.Post=Post;

package/dist/components/table/table/table.js

@@ -0,0 +1,101 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Table=({border:e=!0,children:t,compact:l,footer:a,header:o,separated:r,striped:d,sx:i,padding:n=32})=>React__default.default.createElement(box.Box,{$backgroundColor:"white",$borderRadius:"large",$display:"flex",$dir:"column",$gap:32,$padding:n,sx:l?"width: fit-content;":""},!!o&&o,React__default.default.createElement(box.Box,{$borderRadius:"small",sx:e?"border: 1px solid var(--color-grey-8);":""},React__default.default.createElement(TableElement,{$compact:l,$separated:r,$striped:d,$sx:i},t)),!!a&&a),TableElement=styled.styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  ${({$compact:e})=>e?"width: fit-content;":""}
+  ${({$separated:e})=>e?`
+    & > tbody > * {
+      border-bottom: 1px solid var(--color-grey-9);
+      &:last-child {
+        border-bottom: none;
+      }
+    }`:""}
+  ${({$striped:e})=>e?`
+    & > tbody > *:nth-of-type(even) {
+      background-color: var(--color-grey-10);
+    }`:""}
+  ${({$sx:e})=>e||""}
+`,Head=({children:e,...t})=>React__default.default.createElement(HeadElement,{...t},e),HeadElement=styled.styled.thead`
+  tr {
+    background-color: var(--color-grey-10);
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+
+    & > *:first-of-type {
+      border-top-left-radius: 8px;
+    }
+
+    & > *:last-of-type {
+      border-top-right-radius: 8px;
+    }
+  }
+`,Body=(Head.displayName="Table.Head",Table.Head=Head,({children:e,...t})=>React__default.default.createElement(BodyElement,{...t},e)),BodyElement=styled.styled.tbody`
+  & > tr:last-of-type {
+    & > *:first-child {
+      border-bottom-left-radius: 8px;
+    }
+
+    & > *:last-child {
+      border-bottom-right-radius: 8px;
+    }
+  }
+`,Foot=(Body.displayName="Table.Body",Table.Body=Body,({children:e,...t})=>React__default.default.createElement("tfoot",{...t},e)),Row=(Foot.displayName="Table.Foot",Table.Footer=Foot,({children:e,disabled:t,href:l,hoverable:a=!1,onClick:o,selected:r,sx:d,...i})=>{var n=l?e=>{e.metaKey||e.ctrlKey?window.open(l,"_blank")?.focus():window.location.href=l}:o?e=>{o(e)}:void 0;return React__default.default.createElement(RowElement,{onClick:n,$disabled:t,$hoverable:a,$isAnchor:!!l,$selected:r,$sx:d,...i},e)}),RowElement=styled.styled.tr`
+  display: table-row;
+
+  ${({$disabled:e})=>e?`
+    background-color: var(--color-grey-9) !important;
+    color: var(--color-grey-7);
+    & > * {
+      color: var(--color-grey-7) !important;
+    }`:""}
+
+  ${({$disabled:e,$hoverable:t})=>!e&&t?"background-color: var(--color-grey-9);":""}
+
+  ${({$disabled:e,$selected:t})=>!e&&t?"background-color: var(--color-grey-8;":""}
+
+  ${({$disabled:e,$isAnchor:t})=>!e&&t?`
+    cursor: pointer;
+    padding-right: 24px;
+
+    &:hover {
+      background-color: var(--color-grey-10);
+
+      & > td:last-child {
+        position: relative;
+      }
+      & > td:last-child::after {
+        content: "❯";
+        color: var(--color-blue-3);
+        position: absolute;
+        right: 12px;
+        top: calc(50% - 11px);
+      }
+    }`:""}
+  ${({$sx:e})=>e||""}
+`,Cell=(Row.displayName="Table.Row",Table.Row=Row,({children:e,lines:t,padding:l="16px 24px",sx:a,textAlign:o="left",verticalAlign:r="middle",width:d})=>{d=d?d*(1/16)+"%":void 0;return React__default.default.createElement(CellElement,{$clamp:t,$padding:l,$sx:a,$textAlign:o,$verticalAlign:r,$width:d||"fit-content"},React__default.default.createElement("div",null,e))}),CellElement=styled.styled.td`
+  width: ${({$width:e})=>e};
+  height: 20px;
+  font-family: var(--font-inter);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--color-grey-3);
+  vertical-align: ${({$verticalAlign:e})=>e||""};
+  text-align: ${({$textAlign:e})=>e||""};
+  padding: ${({$padding:e})=>e};
+  ${({$clamp:e})=>e?`
+  & > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: ${e};
+    -webkit-line-clamp: ${e};
+    -webkit-box-orient: vertical;
+  }`:""}
+  ${({$sx:e})=>e||""}
+`,HeaderCell=(Cell.displayName="Table.Cell",Table.Cell=Cell,({children:e,lines:t,padding:l="16px 24px",sx:a,textAlign:o="left",verticalAlign:r="middle",width:d})=>{d=d?6.25*d+"%":void 0;return React__default.default.createElement(HeadCellElement,{as:"th",$clamp:t,$padding:l,$sx:a,$textAlign:o,$verticalAlign:r,$width:d||"fit-content"},e)}),HeadCellElement=styled.styled(CellElement)`
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+`;HeaderCell.displayName="Table.HeaderCell",Table.HeaderCell=HeaderCell,exports.Table=Table;