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

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

@@ -1,5 +1,29 @@
-"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`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Avatar } from '../../../components/iconography/avatar/avatar';
+import { Box } from '../../../components/atoms/box/box';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { H } from '../../../components/atoms/typography/heading';
+export const Message = ({ messages, userId }) => {
+    const id = React.useId();
+    return (React.createElement(Box, { "$display": "flex", "$dir": "column", "$gap": 16 }, messages.map(({ content, createdDate, senderAvatarURI, senderHref, senderId, senderName, }, index) => {
+        const isSelf = senderId === userId;
+        const isFirstMessageBySender = messages?.[index - 1]?.senderId !== senderId;
+        if (isSelf) {
+            return (React.createElement(React.Fragment, { key: id + index },
+                isFirstMessageBySender && (React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin-top: 40px; margin-left: auto;" },
+                    createdDate.toLocaleDateString(),
+                    ' ',
+                    createdDate.toLocaleTimeString())),
+                React.createElement(Wrapper, { "$isSelf": isSelf }, content)));
+        }
+        return (React.createElement(React.Fragment, { key: id + index },
+            isFirstMessageBySender && (React.createElement(Avatar, { image: senderAvatarURI, href: senderHref, subtitle: React.createElement(P, { as: "span", "$color": "blue-2", "$fontSize": 12, "$lineHeight": 16, sx: "vertical-align: top;" }, createdDate.toLocaleTimeString()), size: 56, sx: "margin-top: 40px;", textPosition: "right", title: React.createElement(H, { as: "span", "$color": "blue-2", "$fontSize": 18, "$lineHeight": 26, "$mediumBold": true }, senderName) })),
+            React.createElement(Wrapper, { "$isSelf": isSelf }, content)));
+    })));
+};
+const Wrapper = styled.div `
   max-width: 552px;
   padding: 16px;
   border-radius: 16px;
@@ -8,14 +32,16 @@
   line-height: 20px;
   letter-spacing: -0.006em;
 
-  ${({$isSelf:e})=>e?`
+  ${({ $isSelf }) => $isSelf
+    ? `
     margin-left: auto;
     color: var(--color-white);
     background-color: var(--color-primary-blue-2);
-    border-top-right-radius: 0px;`:`
+    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/index.js

@@ -0,0 +1 @@
+export { Modal } from './modal';

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

@@ -1,11 +1,93 @@
-"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;
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Button } from '../../../components/actions/button/button';
+import { Close } from '../../../icons/basic/close';
+import { callAll } from '../../../utils/function';
+const ModalContext = React.createContext([false, (() => undefined)]);
+const Modal = ({ alwaysRender = true, controlledOpen, onChange, children, ...props }) => {
+    const [open, setOpen] = React.useState(controlledOpen || false);
+    React.useEffect(() => {
+        if (controlledOpen !== undefined) {
+            setOpen(controlledOpen);
+        }
+    }, [controlledOpen]);
+    React.useEffect(() => {
+        onChange && onChange(open);
+    }, [open]);
+    let trigger;
+    const rest = [];
+    React.Children.forEach(children, (child) => {
+        const type = React.isValidElement(child) && child.type?.displayName;
+        if (type && type.toLowerCase().includes('trigger')) {
+            trigger = child;
+        }
+        else {
+            rest.push(child);
+        }
+    });
+    return (React.createElement(ModalContext.Provider, { value: [open, setOpen], ...props },
+        trigger,
+        (open || alwaysRender) && rest));
+};
+const ModalTrigger = ({ children: child, }) => {
+    const [, setOpen] = React.useContext(ModalContext);
+    return (child &&
+        React.cloneElement(child, {
+            onClick: callAll(() => setOpen(true), child.props.onClick, (event) => {
+                event?.stopPropagation();
+                event?.preventDefault();
+            }),
+        }));
+};
+ModalTrigger.displayName = 'Modal.Trigger';
+Modal.Trigger = ModalTrigger;
+const ModalDismiss = ({ children: child, setClosed, }) => {
+    const [, setOpen] = React.useContext(ModalContext);
+    return (child &&
+        React.cloneElement(child, {
+            onClick: callAll(() => setOpen(false), child.props.onClick, (event) => {
+                setClosed && setClosed();
+                event?.stopPropagation();
+                event?.preventDefault();
+            }),
+        }));
+};
+ModalDismiss.displayName = 'Modal.Dismiss';
+Modal.Dismiss = ModalDismiss;
+const ModalContent = ({ backgroundDark = true, children, footer, header, setClosed, sx, ...props }) => {
+    const [open, setOpen] = React.useContext(ModalContext);
+    const handleOutsideClick = (event) => {
+        if (event.currentTarget != event.target)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.preventDefault();
+        setClosed ? setClosed() : setOpen(false);
+    };
+    return (React.createElement(Wrapper, { "$backgroundDark": backgroundDark, "$open": open, onClick: handleOutsideClick },
+        React.createElement(Content, { ...props, "$sx": sx },
+            header && (React.createElement("div", { className: "header" },
+                React.createElement("div", null, header),
+                React.createElement(Modal.Dismiss, { setClosed: setClosed },
+                    React.createElement(Button, { icon: React.createElement(Close, null), type: "special" })))),
+            children,
+            footer && React.createElement("div", { className: "footer" }, footer))));
+};
+ModalContent.displayName = 'Modal.Content';
+Modal.Content = ModalContent;
+export { Modal };
+const Wrapper = styled.div `
+  ${({ $open }) => $open
+    ? `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;`:""}
+    justify-content: center;`
+    : 'display: none;'}
+  ${({ $backgroundDark }) => $backgroundDark
+    ? `background: rgba(0, 0, 0, 0.5);
+    cursor: pointer;`
+    : ''}
   position: fixed;
   top: 0;
   left: 0;
@@ -15,7 +97,8 @@
   padding: 0px;
   margin: 0px;
   overflow: hidden;
-`),Content=styled.styled.div`
+`;
+const Content = styled.div `
   position: absolute;
   z-index: 101;
   background-color: var(--color-white);
@@ -40,5 +123,5 @@
     position: relative;
     padding-top: 16px;
   }
-  ${({$sx:e})=>e||""}
-`;exports.Modal=Modal;
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;

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

@@ -0,0 +1 @@
+export { Portal } from './portal';

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

@@ -1,2 +1,26 @@
-"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;
+'use client';
+import React from 'react';
+import ReactDOM from 'react-dom';
+export const Portal = ({ children, wrapperId = 'root-portal-wrapper', }) => {
+    const [wrapper, setWrapper] = React.useState(null);
+    React.useEffect(() => {
+        let element = document.getElementById(wrapperId);
+        let portalCreated = false;
+        if (!element) {
+            portalCreated = true;
+            element = document.createElement('div');
+            element.setAttribute('id', wrapperId);
+            document.body.appendChild(element);
+        }
+        setWrapper(element);
+        return () => {
+            if (portalCreated && element?.parentNode) {
+                element.parentNode.removeChild(element);
+            }
+        };
+    }, [wrapperId]);
+    if (!wrapper) {
+        return null;
+    }
+    return ReactDOM.createPortal(children, wrapper);
+};

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

@@ -0,0 +1 @@
+export { Post } from './post';

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

@@ -1,10 +1,127 @@
-"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:`
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { styled } from 'styled-components';
+import { H } from '../../../components/atoms/typography/heading';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { TimeAgo } from '../../../components/atoms';
+import { Button } from '../../../components/actions/button/button';
+import { Avatar } from '../../../components/iconography/avatar/avatar';
+import { Lock } from '../../../icons/security/lock';
+import { Modal } from '../../../components/surfaces/modal/modal';
+import { ChevronLeft } from '../../../icons/arrow/chevron_left';
+import { ChevronRight } from '../../../icons/arrow/chevron_right';
+export const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaidUser, isPaywalled = false, onJoin, }) => {
+    const componentId = React.useId();
+    const [curr, setCurr] = React.useState(-1);
+    const [modalContentSize, setModalContentSize] = React.useState({
+        x: '30vw',
+        y: '30vh',
+    });
+    React.useEffect(() => {
+        const handleKeyEvent = (event) => {
+            if (event.key === 'ArrowLeft') {
+                handleDecrement();
+            }
+            else if (event.key === 'ArrowRight') {
+                handleIncrement();
+            }
+            else if (event.key === 'Escape' || event.key === 'Enter') {
+                setCurr(-1);
+            }
+        };
+        if (typeof document !== 'undefined' && !!images?.length) {
+            document.addEventListener('keydown', handleKeyEvent);
+        }
+        return () => {
+            images?.length &&
+                document.removeEventListener('keydown', handleKeyEvent);
+        };
+    }, []);
+    const _actions = React.Children.toArray(actions);
+    const _comments = React.Children.toArray(children);
+    const handleImageLoad = (event) => {
+        const { naturalHeight, naturalWidth } = event.target;
+        let x = `${naturalWidth}px`;
+        let y = `${naturalHeight}px`;
+        // if natural size is smaller than window height and width
+        if (window?.innerHeight < naturalHeight &&
+            window?.innerWidth < naturalWidth) {
+            x = `${Math.floor((window.innerHeight * 0.95 * naturalWidth) / naturalHeight)}px`;
+            y = `${Math.round((window.innerWidth * 0.95 * naturalHeight) / naturalWidth)}px`;
+            // just smaller than height
+        }
+        else if (window?.innerHeight < naturalHeight) {
+            x = `${Math.floor((window.innerHeight * 0.95 * naturalWidth) / naturalHeight)}px`;
+            y = '95vh';
+            // just smaller than width
+        }
+        else if (window?.innerWidth < naturalWidth) {
+            x = '95vw';
+            y = `${Math.round((window.innerWidth * 0.95 * naturalHeight) / naturalWidth)}px`;
+        }
+        setModalContentSize({ x, y });
+    };
+    const handleIncrement = () => {
+        setCurr((prev) => {
+            if (images?.length && prev !== images.length - 1) {
+                return prev + 1;
+            }
+            else {
+                return prev;
+            }
+        });
+    };
+    const handleDecrement = () => {
+        setCurr((prev) => {
+            if (images?.length && prev !== 0) {
+                return prev - 1;
+            }
+            else {
+                return prev;
+            }
+        });
+    };
+    return (React.createElement(Wrapper, { id: id },
+        curr > -1 && !!images?.[curr] && (React.createElement(Modal, { alwaysRender: false, controlledOpen: true, onChange: (open) => !open && setCurr(-1) },
+            React.createElement(Modal.Content, { sx: `
             position: relative; 
-            height: ${v.y}; 
-            width: ${v.x};
+            height: ${modalContentSize.y}; 
+            width: ${modalContentSize.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`
+            ` },
+                React.createElement(NavArrow, { "$side": "left", "$visible": curr !== 0, onClick: handleDecrement },
+                    React.createElement(ChevronLeft, { color: "white", size: 48 })),
+                React.createElement(Image, { alt: "", fill: true, quality: 100, onLoad: handleImageLoad, priority: true, sizes: "100vw", src: images[curr], style: { objectFit: 'cover' } }),
+                React.createElement(NavArrow, { "$side": "right", "$visible": curr !== images.length - 1, onClick: handleIncrement },
+                    React.createElement(ChevronRight, { color: "white", size: 48 }))))),
+        React.createElement(Header, null,
+            React.createElement(Avatar, { isPaidUser: isPaidUser, as: !!authorHref ? Link : 'button', href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, subtitle: React.createElement(P, { as: "span", sx: "vertical-align: top;", "$fontSize": 14, "$lineHeight": 20 },
+                    React.createElement(TimeAgo, { date: new Date(createdDate) })), title: React.createElement(H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right", tooltipContent: avatarTooltipContent, tooltipSx: avatarTooltipSx, sx: !!authorHref ? 'img { cursor: pointer; }' : undefined }),
+            dropdown),
+        !!content?.length && (React.createElement("div", { style: { padding: '16px 24px' } },
+            React.createElement(P, { "$textClampLines": isPaywalled ? 2 : undefined }, content))),
+        !!images?.length && (React.createElement(ImagesWrapper, { "$numImages": images.length, "$isPaywalled": isPaywalled },
+            images.slice(0, 4).map((url, i) => (React.createElement(ImageWrapper, { key: `${componentId}${url.slice(0, 15)}${i}` },
+                React.createElement(Image, { alt: "", fill: true, onClick: () => setCurr(i), quality: 100, src: url, style: {
+                        cursor: 'pointer',
+                        objectFit: 'cover',
+                    } })))),
+            images.length > 4 && (React.createElement(H, { as: "p", className: "more-than", "$color": "grey-10", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true },
+                "+",
+                images.length - 4)))),
+        !!images?.length && isPaywalled && (React.createElement(PaywallWrapper, null,
+            React.createElement(Lock, { size: 40, color: "grey-7" }),
+            React.createElement(P, { "$fontSize": 14, "$bold": true, "$lineHeight": 20, "$color": "white" },
+                "Become a member",
+                React.createElement("br", null),
+                "to unlock this post"),
+            React.createElement(Button, { onClick: onJoin, size: "small", sx: "width: 213px;", type: "outlined" }, "Join now"))),
+        !!_actions.length && (React.createElement(ActionsWrapper, null, !isPaywalled && _actions)),
+        hasComments && !!_comments.length && (React.createElement(CommentWrapper, null, _comments))));
+};
+const Wrapper = styled.div `
   position: relative;
   max-width: 700px;
   width: 100%;
@@ -16,13 +133,15 @@
     box-shadow: var(--elevation-6);
     border-radius: 16px;
   }
-`,Header=styled.styled.div`
+`;
+const Header = 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`
+`;
+const ImagesWrapper = styled.div `
   position: relative;
   display: flex;
   gap: 8px;
@@ -40,7 +159,8 @@
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
   }
 
-  ${({$numImages:e})=>1<e?`
+  ${({ $numImages }) => $numImages > 1
+    ? `
     div {
       min-width: calc(50% - 4px);
       max-width: calc(50% - 4px);
@@ -51,7 +171,8 @@
         width: 100%;
         height: 100%;
       }
-    }`:`
+    }`
+    : `
     div > img {
       object-fit: contain;
       width: 100%;
@@ -59,15 +180,20 @@
     }
     `}
 
-  ${({$isPaywalled:e})=>e?`
+  ${({ $isPaywalled }) => $isPaywalled
+    ? /** TODO REMOVE USER CAN CHANGE -> SECURITY */
+        `
     filter: blur(10px) brightness(0.6);
-    clip-path: inset(0px 0px 0px 0px);`:""}
-`,ImageWrapper=styled.styled.div`
+    clip-path: inset(0px 0px 0px 0px);`
+    : ''}
+`;
+const ImageWrapper = styled.div `
   position: relative;
   aspect-ratio: 700 / 427;
   flex: 1;
   min-width: min(227px, 80vw);
-`,PaywallWrapper=styled.styled.div`
+`;
+const PaywallWrapper = styled.div `
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -75,17 +201,20 @@
   align-items: center;
   top: 310px;
   left: 242px;
-`,ActionsWrapper=styled.styled.div`
+`;
+const ActionsWrapper = styled.div `
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 24px;
-`,CommentWrapper=styled.styled.div`
+`;
+const CommentWrapper = styled.div `
   padding: 24px;
   display: flex;
   flex-flow: column nowrap;
   gap: 24px;
-`,NavArrow=styled.styled.button`
+`;
+const NavArrow = styled.button `
   width: 48px;
   height: 150px;
   display: flex;
@@ -95,10 +224,12 @@
   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;"}
+  ${({ $side }) => $side}: 0;
+  border-radius: ${({ $side }) => $side === 'left' ? '0 12px 12px 0' : '12px 0 0 12px'};
+  ${({ $visible }) => $visible
+    ? '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/index.js

@@ -0,0 +1 @@
+export { Table } from './table';

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

@@ -0,0 +1 @@
+export { Table } from './table';