@soul-refiner/design-system 2.5.0-alpha.7 → 2.5.0-alpha.8

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

@@ -1,42 +1,5 @@
-'use client';
-import React from 'react';
-import { styled } from 'styled-components';
-import { callAll } from '../../../utils/function';
-const DrawerContext = React.createContext([false, (() => undefined)]);
-export const Drawer = ({ children, controlledOpen, onOpenChange, }) => {
-    const [open, setOpen] = React.useState(controlledOpen || false);
-    React.useEffect(() => {
-        if (controlledOpen !== undefined) {
-            setOpen(controlledOpen);
-        }
-    }, [controlledOpen]);
-    const _children = React.Children.toArray(children);
-    const triggers = [];
-    const content = [];
-    let footer = null;
-    let header = null;
-    for (const child of _children) {
-        if (React.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.createElement(DrawerContext.Provider, { value: [open, setOpen] },
-        triggers,
-        open && (React.createElement(Background, { onClick: callAll(() => setOpen(false), () => onOpenChange && onOpenChange()) })),
-        React.createElement(Component, { "$open": open },
-            header && React.createElement(HeaderWrapper, null, header),
-            React.createElement(ContentWrapper, null, content),
-            footer && React.createElement(FooterWrapper, null, footer))));
-};
-const Background = styled.div `
+"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;
@@ -48,8 +11,7 @@ const Background = styled.div `
   background: #000000;
   opacity: 0.5;
   cursor: pointer;
-`;
-const Component = styled.div `
+`,Component=styled.styled.div`
   position: fixed;
   top: 0;
   right: 0;
@@ -65,9 +27,8 @@ const Component = styled.div `
   transition: margin-right 0.5s;
   background-color: var(--color-grey-10);
 
-  ${({ $open }) => ($open ? 'margin-right: 0px;' : '')}
-`;
-const HeaderWrapper = styled.div `
+  ${({$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));
@@ -75,8 +36,7 @@ const HeaderWrapper = styled.div `
   position: sticky;
   top: 0;
   border-radius: 16px 0px 0px 0px;
-`;
-const ContentWrapper = styled.div `
+`,ContentWrapper=styled.styled.div`
   height: calc(100vh - 224px);
   position: relative;
   display: flex;
@@ -102,30 +62,11 @@ const ContentWrapper = styled.div `
     background-color: var(--color-grey-6);
     opacity: 30%;
   }
-`;
-const FooterWrapper = styled.div `
+`,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;
-`;
-const DrawerTrigger = ({ children: child, }) => {
-    const [, setOpen] = React.useContext(DrawerContext);
-    return (child &&
-        React.cloneElement(child, {
-            onClick: callAll(() => setOpen((prev) => !prev), child.props.onClick),
-        }));
-};
-DrawerTrigger.displayName = 'Drawer.Trigger';
-Drawer.Trigger = DrawerTrigger;
-const DrawerHeader = ({ children }) => (React.createElement("div", null, children));
-DrawerHeader.displayName = 'Drawer.Header';
-Drawer.Header = DrawerHeader;
-const DrawerContent = ({ children }) => (React.createElement("div", null, children));
-DrawerContent.displayName = 'Drawer.Content';
-Drawer.Content = DrawerContent;
-const DrawerFooter = ({ children }) => (React.createElement("div", null, children));
-DrawerFooter.displayName = 'Drawer.Footer';
-Drawer.Footer = DrawerFooter;
+`,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

@@ -1,29 +1,5 @@
-'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 `
+"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;
@@ -32,16 +8,14 @@ const Wrapper = styled.div `
   line-height: 20px;
   letter-spacing: -0.006em;
 
-  ${({ $isSelf }) => $isSelf
-    ? `
+  ${({$isSelf:e})=>e?`
     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/modal.js

@@ -1,93 +1,11 @@
-'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;
+"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 }) => $backgroundDark
-    ? `background: rgba(0, 0, 0, 0.5);
-    cursor: pointer;`
-    : ''}
+    justify-content: center;`:"display: none;"}
+  ${({$backgroundDark:e})=>e?`background: rgba(0, 0, 0, 0.5);
+    cursor: pointer;`:""}
   position: fixed;
   top: 0;
   left: 0;
@@ -97,8 +15,7 @@ const Wrapper = styled.div `
   padding: 0px;
   margin: 0px;
   overflow: hidden;
-`;
-const Content = styled.div `
+`),Content=styled.styled.div`
   position: absolute;
   z-index: 101;
   background-color: var(--color-white);
@@ -123,5 +40,5 @@ const Content = styled.div `
     position: relative;
     padding-top: 16px;
   }
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
+  ${({$sx:e})=>e||""}
+`;exports.Modal=Modal;

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

@@ -1,26 +1,2 @@
-'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);
-};
+"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,127 +1,10 @@
-'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: `
+"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: ${modalContentSize.y}; 
-            width: ${modalContentSize.x};
+            height: ${v.y}; 
+            width: ${v.x};
             margin: 0 auto;
-            ` },
-                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 `
+            `},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%;
@@ -133,15 +16,13 @@ const Wrapper = styled.div `
     box-shadow: var(--elevation-6);
     border-radius: 16px;
   }
-`;
-const Header = styled.div `
+`,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);
-`;
-const ImagesWrapper = styled.div `
+`,ImagesWrapper=styled.styled.div`
   position: relative;
   display: flex;
   gap: 8px;
@@ -159,8 +40,7 @@ const ImagesWrapper = styled.div `
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
   }
 
-  ${({ $numImages }) => $numImages > 1
-    ? `
+  ${({$numImages:e})=>1<e?`
     div {
       min-width: calc(50% - 4px);
       max-width: calc(50% - 4px);
@@ -171,8 +51,7 @@ const ImagesWrapper = styled.div `
         width: 100%;
         height: 100%;
       }
-    }`
-    : `
+    }`:`
     div > img {
       object-fit: contain;
       width: 100%;
@@ -180,20 +59,15 @@ const ImagesWrapper = styled.div `
     }
     `}
 
-  ${({ $isPaywalled }) => $isPaywalled
-    ? /** TODO REMOVE USER CAN CHANGE -> SECURITY */
-        `
+  ${({$isPaywalled:e})=>e?`
     filter: blur(10px) brightness(0.6);
-    clip-path: inset(0px 0px 0px 0px);`
-    : ''}
-`;
-const ImageWrapper = styled.div `
+    clip-path: inset(0px 0px 0px 0px);`:""}
+`,ImageWrapper=styled.styled.div`
   position: relative;
   aspect-ratio: 700 / 427;
   flex: 1;
   min-width: min(227px, 80vw);
-`;
-const PaywallWrapper = styled.div `
+`,PaywallWrapper=styled.styled.div`
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -201,20 +75,17 @@ const PaywallWrapper = styled.div `
   align-items: center;
   top: 310px;
   left: 242px;
-`;
-const ActionsWrapper = styled.div `
+`,ActionsWrapper=styled.styled.div`
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 24px;
-`;
-const CommentWrapper = styled.div `
+`,CommentWrapper=styled.styled.div`
   padding: 24px;
   display: flex;
   flex-flow: column nowrap;
   gap: 24px;
-`;
-const NavArrow = styled.button `
+`,NavArrow=styled.styled.button`
   width: 48px;
   height: 150px;
   display: flex;
@@ -224,12 +95,10 @@ const NavArrow = styled.button `
   z-index: 100;
   top: calc(50vh - 75px);
   background-color: rgba(0, 0, 0, 0.5);
-  ${({ $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;'}
+  ${({$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;