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

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

@@ -1,5 +1,49 @@
 "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`
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var _function = require('../../../utils/function.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const DrawerContext = React__default.default.createContext([false, (() => undefined)]);
+const Drawer = ({ children, controlledOpen, onOpenChange, }) => {
+    const [open, setOpen] = React__default.default.useState(controlledOpen || false);
+    React__default.default.useEffect(() => {
+        if (controlledOpen !== undefined) {
+            setOpen(controlledOpen);
+        }
+    }, [controlledOpen]);
+    const _children = React__default.default.Children.toArray(children);
+    const triggers = [];
+    const content = [];
+    let footer = null;
+    let header = null;
+    for (const child of _children) {
+        if (React__default.default.isValidElement(child)) {
+            const type = child.type?.displayName;
+            if (type === 'Drawer.Trigger')
+                triggers.push(child);
+            else if (type === 'Drawer.Header')
+                header = child;
+            else if (type === 'Drawer.Footer')
+                footer = child;
+            else
+                content.push(child);
+        }
+    }
+    return (React__default.default.createElement(DrawerContext.Provider, { value: [open, setOpen] },
+        triggers,
+        open && (React__default.default.createElement(Background, { onClick: _function.callAll(() => setOpen(false), () => onOpenChange && onOpenChange()) })),
+        React__default.default.createElement(Component, { "$open": open },
+            header && React__default.default.createElement(HeaderWrapper, null, header),
+            React__default.default.createElement(ContentWrapper, null, content),
+            footer && React__default.default.createElement(FooterWrapper, null, footer))));
+};
+const Background = styled.styled.div `
   position: fixed;
   height: 100vh;
   width: 100vw;
@@ -11,7 +55,8 @@
   background: #000000;
   opacity: 0.5;
   cursor: pointer;
-`,Component=styled.styled.div`
+`;
+const Component = styled.styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -27,8 +72,9 @@
   transition: margin-right 0.5s;
   background-color: var(--color-grey-10);
 
-  ${({$open:e})=>e?"margin-right: 0px;":""}
-`,HeaderWrapper=styled.styled.div`
+  ${({ $open }) => ($open ? 'margin-right: 0px;' : '')}
+`;
+const HeaderWrapper = styled.styled.div `
   background-color: var(--color-white);
   box-shadow: var(--elevation-2);
   filter: drop-shadow(var(--elevation-2));
@@ -36,7 +82,8 @@
   position: sticky;
   top: 0;
   border-radius: 16px 0px 0px 0px;
-`,ContentWrapper=styled.styled.div`
+`;
+const ContentWrapper = styled.styled.div `
   height: calc(100vh - 224px);
   position: relative;
   display: flex;
@@ -62,11 +109,32 @@
     background-color: var(--color-grey-6);
     opacity: 30%;
   }
-`,FooterWrapper=styled.styled.div`
+`;
+const FooterWrapper = styled.styled.div `
   background-color: var(--color-white);
   box-shadow: var(--elevation-1);
   position: -webkit-sticky;
   position: sticky;
   bottom: 0;
   border-radius: 0px 0px 0px 16px;
-`,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;
+`;
+const DrawerTrigger = ({ children: child, }) => {
+    const [, setOpen] = React__default.default.useContext(DrawerContext);
+    return (child &&
+        React__default.default.cloneElement(child, {
+            onClick: _function.callAll(() => setOpen((prev) => !prev), child.props.onClick),
+        }));
+};
+DrawerTrigger.displayName = 'Drawer.Trigger';
+Drawer.Trigger = DrawerTrigger;
+const DrawerHeader = ({ children }) => (React__default.default.createElement("div", null, children));
+DrawerHeader.displayName = 'Drawer.Header';
+Drawer.Header = DrawerHeader;
+const DrawerContent = ({ children }) => (React__default.default.createElement("div", null, children));
+DrawerContent.displayName = 'Drawer.Content';
+Drawer.Content = DrawerContent;
+const DrawerFooter = ({ children }) => (React__default.default.createElement("div", null, children));
+DrawerFooter.displayName = 'Drawer.Footer';
+Drawer.Footer = DrawerFooter;
+
+exports.Drawer = Drawer;

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

@@ -1,5 +1,36 @@
 "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 strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var avatar = require('../../iconography/avatar/avatar.js');
+var box = require('../../atoms/box/box.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var heading = require('../../atoms/typography/heading.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Message = ({ messages, userId }) => {
+    const id = React__default.default.useId();
+    return (React__default.default.createElement(box.Box, { "$display": "flex", "$dir": "column", "$gap": 16 }, messages.map(({ content, createdDate, senderAvatarURI, senderHref, senderId, senderName, }, index) => {
+        const isSelf = senderId === userId;
+        const isFirstMessageBySender = messages?.[index - 1]?.senderId !== senderId;
+        if (isSelf) {
+            return (React__default.default.createElement(React__default.default.Fragment, { key: id + index },
+                isFirstMessageBySender && (React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin-top: 40px; margin-left: auto;" },
+                    createdDate.toLocaleDateString(),
+                    ' ',
+                    createdDate.toLocaleTimeString())),
+                React__default.default.createElement(Wrapper, { "$isSelf": isSelf }, content)));
+        }
+        return (React__default.default.createElement(React__default.default.Fragment, { key: id + index },
+            isFirstMessageBySender && (React__default.default.createElement(avatar.Avatar, { image: senderAvatarURI, href: senderHref, subtitle: React__default.default.createElement(paragraph.P, { as: "span", "$color": "blue-2", "$fontSize": 12, "$lineHeight": 16, sx: "vertical-align: top;" }, createdDate.toLocaleTimeString()), size: 56, sx: "margin-top: 40px;", textPosition: "right", title: React__default.default.createElement(heading.H, { as: "span", "$color": "blue-2", "$fontSize": 18, "$lineHeight": 26, "$mediumBold": true }, senderName) })),
+            React__default.default.createElement(Wrapper, { "$isSelf": isSelf }, content)));
+    })));
+};
+const Wrapper = styled.styled.div `
   max-width: 552px;
   padding: 16px;
   border-radius: 16px;
@@ -8,14 +39,18 @@
   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;
+`;
+
+exports.Message = Message;

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

@@ -1,11 +1,99 @@
 "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 strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var button = require('../../actions/button/button.js');
+var close = require('../../../icons/basic/close.js');
+var _function = require('../../../utils/function.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ModalContext = React__default.default.createContext([false, (() => undefined)]);
+const Modal = ({ alwaysRender = true, controlledOpen, onChange, children, ...props }) => {
+    const [open, setOpen] = React__default.default.useState(controlledOpen || false);
+    React__default.default.useEffect(() => {
+        if (controlledOpen !== undefined) {
+            setOpen(controlledOpen);
+        }
+    }, [controlledOpen]);
+    React__default.default.useEffect(() => {
+        onChange && onChange(open);
+    }, [open]);
+    let trigger;
+    const rest = [];
+    React__default.default.Children.forEach(children, (child) => {
+        const type = React__default.default.isValidElement(child) && child.type?.displayName;
+        if (type && type.toLowerCase().includes('trigger')) {
+            trigger = child;
+        }
+        else {
+            rest.push(child);
+        }
+    });
+    return (React__default.default.createElement(ModalContext.Provider, { value: [open, setOpen], ...props },
+        trigger,
+        (open || alwaysRender) && rest));
+};
+const ModalTrigger = ({ children: child, }) => {
+    const [, setOpen] = React__default.default.useContext(ModalContext);
+    return (child &&
+        React__default.default.cloneElement(child, {
+            onClick: _function.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__default.default.useContext(ModalContext);
+    return (child &&
+        React__default.default.cloneElement(child, {
+            onClick: _function.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__default.default.useContext(ModalContext);
+    const handleOutsideClick = (event) => {
+        if (event.currentTarget != event.target)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.preventDefault();
+        setClosed ? setClosed() : setOpen(false);
+    };
+    return (React__default.default.createElement(Wrapper, { "$backgroundDark": backgroundDark, "$open": open, onClick: handleOutsideClick },
+        React__default.default.createElement(Content, { ...props, "$sx": sx },
+            header && (React__default.default.createElement("div", { className: "header" },
+                React__default.default.createElement("div", null, header),
+                React__default.default.createElement(Modal.Dismiss, { setClosed: setClosed },
+                    React__default.default.createElement(button.Button, { icon: React__default.default.createElement(close.Close, null), type: "special" })))),
+            children,
+            footer && React__default.default.createElement("div", { className: "footer" }, footer))));
+};
+ModalContent.displayName = 'Modal.Content';
+Modal.Content = ModalContent;
+const Wrapper = styled.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 +103,8 @@
   padding: 0px;
   margin: 0px;
   overflow: hidden;
-`),Content=styled.styled.div`
+`;
+const Content = styled.styled.div `
   position: absolute;
   z-index: 101;
   background-color: var(--color-white);
@@ -40,5 +129,7 @@
     position: relative;
     padding-top: 16px;
   }
-  ${({$sx:e})=>e||""}
-`;exports.Modal=Modal;
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+exports.Modal = Modal;

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

@@ -1,2 +1,36 @@
 "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 strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
+
+const Portal = ({ children, wrapperId = 'root-portal-wrapper', }) => {
+    const [wrapper, setWrapper] = React__default.default.useState(null);
+    React__default.default.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__default.default.createPortal(children, wrapper);
+};
+
+exports.Portal = Portal;

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

@@ -1,10 +1,136 @@
 "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:`
+'use strict';
+
+var React = require('react');
+var Image = require('next/image');
+var Link = require('next/link');
+var styled = require('styled-components');
+var heading = require('../../atoms/typography/heading.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+require('../../atoms/box/box.js');
+require('../../atoms/typography/display.js');
+require('../../atoms/typography/typography.js');
+var time_ago = require('../../atoms/time_ago/time_ago.js');
+var button = require('../../actions/button/button.js');
+var avatar = require('../../iconography/avatar/avatar.js');
+var lock = require('../../../icons/security/lock.js');
+var modal = require('../modal/modal.js');
+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);
+var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
+var Link__default = /*#__PURE__*/_interopDefaultCompat(Link);
+
+const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled = false, onJoin, }) => {
+    const componentId = React__default.default.useId();
+    const [curr, setCurr] = React__default.default.useState(-1);
+    const [modalContentSize, setModalContentSize] = React__default.default.useState({
+        x: '30vw',
+        y: '30vh',
+    });
+    React__default.default.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__default.default.Children.toArray(actions);
+    const _comments = React__default.default.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__default.default.createElement(Wrapper, { id: id },
+        curr > -1 && !!images?.[curr] && (React__default.default.createElement(modal.Modal, { alwaysRender: false, controlledOpen: true, onChange: (open) => !open && setCurr(-1) },
+            React__default.default.createElement(modal.Modal.Content, { sx: `
             position: relative; 
-            height: ${y.y}; 
-            width: ${y.x};
+            height: ${modalContentSize.y}; 
+            width: ${modalContentSize.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`
+            ` },
+                React__default.default.createElement(NavArrow, { "$side": "left", "$visible": curr !== 0, onClick: handleDecrement },
+                    React__default.default.createElement(chevron_left.ChevronLeft, { color: "white", size: 48 })),
+                React__default.default.createElement(Image__default.default, { alt: "", fill: true, quality: 100, onLoad: handleImageLoad, priority: true, sizes: "100vw", src: images[curr], style: { objectFit: 'cover' } }),
+                React__default.default.createElement(NavArrow, { "$side": "right", "$visible": curr !== images.length - 1, onClick: handleIncrement },
+                    React__default.default.createElement(chevron_right.ChevronRight, { color: "white", size: 48 }))))),
+        React__default.default.createElement(Header, null,
+            React__default.default.createElement(avatar.Avatar, { as: !!authorHref ? Link__default.default : 'button', href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, 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(createdDate) })), title: React__default.default.createElement(heading.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__default.default.createElement("div", { style: { padding: '16px 24px' } },
+            React__default.default.createElement(paragraph.P, { "$textClampLines": isPaywalled ? 2 : undefined }, content))),
+        !!images?.length && (React__default.default.createElement(ImagesWrapper, { "$numImages": images.length, "$isPaywalled": isPaywalled },
+            images.slice(0, 4).map((url, i) => (React__default.default.createElement(ImageWrapper, { key: `${componentId}${url.slice(0, 15)}${i}` },
+                React__default.default.createElement(Image__default.default, { alt: "", fill: true, onClick: () => setCurr(i), quality: 100, src: url, style: { cursor: 'pointer' } })))),
+            images.length > 4 && (React__default.default.createElement(heading.H, { as: "p", className: "more-than", "$color": "grey-10", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true },
+                "+",
+                images.length - 4)))),
+        !!images?.length && isPaywalled && (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": true, "$lineHeight": 20, "$color": "white" },
+                "Become a member",
+                React__default.default.createElement("br", null),
+                "to unlock this post"),
+            React__default.default.createElement(button.Button, { onClick: onJoin, size: "small", sx: "width: 213px;", type: "outlined" }, "Join now"))),
+        !!_actions.length && (React__default.default.createElement(ActionsWrapper, null, !isPaywalled && _actions)),
+        hasComments && !!_comments.length && (React__default.default.createElement(CommentWrapper, null, _comments))));
+};
+const Wrapper = styled.styled.div `
   position: relative;
   max-width: 700px;
   width: 100%;
@@ -16,13 +142,15 @@
     box-shadow: var(--elevation-6);
     border-radius: 16px;
   }
-`,Header=styled.styled.div`
+`;
+const 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`
+`;
+const ImagesWrapper = styled.styled.div `
   position: relative;
   display: flex;
   gap: 8px;
@@ -40,7 +168,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 +180,8 @@
         width: 100%;
         height: 100%;
       }
-    }`:`
+    }`
+    : `
     div > img {
       object-fit: contain;
       width: 100%;
@@ -59,15 +189,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.styled.div `
   position: relative;
   aspect-ratio: 700 / 427;
   flex: 1;
   min-width: min(227px, 80vw);
-`,PaywallWrapper=styled.styled.div`
+`;
+const PaywallWrapper = styled.styled.div `
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -75,17 +210,20 @@
   align-items: center;
   top: 310px;
   left: 242px;
-`,ActionsWrapper=styled.styled.div`
+`;
+const ActionsWrapper = styled.styled.div `
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 24px;
-`,CommentWrapper=styled.styled.div`
+`;
+const CommentWrapper = styled.styled.div `
   padding: 24px;
   display: flex;
   flex-flow: column nowrap;
   gap: 24px;
-`,NavArrow=styled.styled.button`
+`;
+const NavArrow = styled.styled.button `
   width: 48px;
   height: 150px;
   display: flex;
@@ -95,10 +233,14 @@
   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;
+`;
+
+exports.Post = Post;