@soul-refiner/design-system 2.5.0-alpha.4 → 2.5.0-alpha.5

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

@@ -1,21 +0,0 @@
-"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

@@ -1,44 +0,0 @@
-"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

@@ -1,2 +0,0 @@
-"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

@@ -1,104 +0,0 @@
-"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:c,hasComments:u,id:p,images:f,isPaidUser:h,isPaywalled:m=!1,onJoin:g})=>{const _=React__default.default.useId(),[x,y]=React__default.default.useState(-1),[v,w]=React__default.default.useState({x:"30vw",y:"30vh"});React__default.default.useEffect(()=>{const e=e=>{"ArrowLeft"===e.key?R():"ArrowRight"===e.key?b():"Escape"!==e.key&&"Enter"!==e.key||y(-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 b=()=>{y(e=>f?.length&&e!==f.length-1?e+1:e)},R=()=>{y(e=>f?.length&&0!==e?e-1:e)};return React__default.default.createElement(Wrapper,{id:p},-1<x&&!!f?.[x]&&React__default.default.createElement(modal.Modal,{alwaysRender:!1,controlledOpen:!0,onChange:e=>!e&&y(-1)},React__default.default.createElement(modal.Modal.Content,{sx:`
-            position: relative; 
-            height: ${v.y}; 
-            width: ${v.x};
-            margin: 0 auto;
-            `},React__default.default.createElement(NavArrow,{$side:"left",$visible:0!==x,onClick:R},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"),w({x:a,y:l})},priority:!0,sizes:"100vw",src:f[x],style:{objectFit:"cover"}}),React__default.default.createElement(NavArrow,{$side:"right",$visible:x!==f.length-1,onClick:b},React__default.default.createElement(chevron_right.ChevronRight,{color:"white",size:48})))),React__default.default.createElement(Header,null,React__default.default.createElement(avatar.Avatar,{isPaidUser:h,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}),c),!!d?.length&&React__default.default.createElement("div",{style:{padding:"16px 24px"}},React__default.default.createElement(paragraph.P,{$textClampLines:m?2:void 0},d)),!!f?.length&&React__default.default.createElement(ImagesWrapper,{$numImages:f.length,$isPaywalled:m},f.slice(0,4).map((e,t)=>React__default.default.createElement(ImageWrapper,{key:""+_+e.slice(0,15)+t},React__default.default.createElement(Image__default.default,{alt:"",fill:!0,onClick:()=>y(t),quality:100,src:e,style:{cursor:"pointer",objectFit:"cover"}}))),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&&m&&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:g,size:"small",sx:"width: 213px;",type:"outlined"},"Join now")),!!e.length&&React__default.default.createElement(ActionsWrapper,null,!m&&e),u&&!!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

@@ -1,101 +0,0 @@
-"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;