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

package/dist/components/card/action/action.js

@@ -1,8 +1,28 @@
-"use client";
-"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const ActionCard=({actions:e,content:t,href:a,image:r,logo:o,subtitle:l,sx:i,title:d})=>{var n=!!a;return React__default.default.createElement(Wrapper,{as:n?"a":"div",href:a},React__default.default.createElement(Action,{$backgroundImage:r,$sx:i},React__default.default.createElement(ImgWrapper,null,React__default.default.createElement(Image__default.default,{alt:"",quality:100,src:r,fill:!0})),React__default.default.createElement(Figcaption,null,React__default.default.createElement(LogoWrapper,null,o),React__default.default.createElement(heading.H,{as:"span",$mediumBold:!0,$color:"grey-2",$fontSize:18,$lineHeight:26},d),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-4",$fontSize:12,$lineHeight:16},l),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-3",$fontSize:14,$lineHeight:20,$textAlign:"center",$textClampLines:3,sx:"margin-top: 12px;"},t),React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$gap:8,sx:"margin-top: auto; width: 100%;"},React__default.default.Children.toArray(e)))))},Wrapper=styled.styled.div`
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import { styled } from 'styled-components';
+import { Box } from '../../../components/atoms/box/box';
+import { H } from '../../../components/atoms/typography/heading';
+import { P } from '../../../components/atoms/typography/paragraph';
+export const ActionCard = ({ actions, content, href, image, logo, subtitle, sx, title, }) => {
+    const isAnchor = !!href;
+    return (React.createElement(Wrapper, { as: isAnchor ? 'a' : 'div', href: href },
+        React.createElement(Action, { "$backgroundImage": image, "$sx": sx },
+            React.createElement(ImgWrapper, null,
+                React.createElement(Image, { alt: "", quality: 100, src: image, fill: true })),
+            React.createElement(Figcaption, null,
+                React.createElement(LogoWrapper, null, logo),
+                React.createElement(H, { as: "span", "$mediumBold": true, "$color": "grey-2", "$fontSize": 18, "$lineHeight": 26 }, title),
+                React.createElement(P, { as: "span", "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle),
+                React.createElement(P, { as: "span", "$color": "grey-3", "$fontSize": 14, "$lineHeight": 20, "$textAlign": "center", "$textClampLines": 3, sx: "margin-top: 12px;" }, content),
+                React.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: auto; width: 100%;" }, React.Children.toArray(actions))))));
+};
+const Wrapper = styled.div `
   text-decoration: none;
-  ${({as:e})=>"a"===e?"cursor: pointer;":""}
-`,Action=styled.styled.figure`
+  ${({ as }) => (as === 'a' ? 'cursor: pointer;' : '')}
+`;
+const Action = styled.figure `
   position: relative;
   border-radius: 16px;
   width: 318px;
@@ -18,8 +38,9 @@
     border-color: var(--color-primary-blue-3);
   }
 
-  ${({$sx:e})=>e||""};
-`,ImgWrapper=styled.styled.div`
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const ImgWrapper = styled.div `
   width: 318px;
   height: 160px;
   position: relative;
@@ -31,7 +52,8 @@
     object-fit: cover;
     border-radius: 16px 16px 0 0;
   }
-`,Figcaption=styled.styled.figcaption`
+`;
+const Figcaption = styled.figcaption `
   position: relative;
   display: flex;
   align-items: center;
@@ -42,10 +64,11 @@
   background-color: var(--color-white);
   border-radius: 0px 0px 15px 15px;
   text-align: center;
-`,LogoWrapper=styled.styled.div`
+`;
+const LogoWrapper = styled.div `
   position: absolute;
   top: -28px;
   right: calc(50% - 28px);
   border: 4px solid var(--color-white);
   border-radius: 50%;
-`;exports.ActionCard=ActionCard;
+`;

package/dist/components/card/action/index.js

@@ -0,0 +1 @@
+export { ActionCard } from './action';

package/dist/components/card/audio/audio.js

@@ -1,5 +1,41 @@
-"use client";
-"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),rate=require("../../actions/rate/rate.js"),cart_filled=require("../../../icons/shopping/cart_filled.js"),styles=require("../styles.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const AudioEpisodeCard=({actions:e,actionDropdown:a,content:t,cta:r,href:l,image:i,logo:o,numRating:d,purchaseText:n,rating:p,subtitle:s,supportLabel:c,sx:u,title:f})=>{var x=!!o;return React__default.default.createElement(Wrapper,{$sx:u,href:l,$hasPurchaseText:!!n},React__default.default.createElement(Figure,null,a&&React__default.default.createElement(DropdownWrapper,null,a),!!n&&React__default.default.createElement(styles.PurchaseTextWrapper,{className:"not-hover"},React__default.default.createElement(cart_filled.CartFilled,{color:"yellow-5",size:24}),React__default.default.createElement(paragraph.P,{$bold:!0,$color:"white"},n)),React__default.default.createElement(Image__default.default,{alt:"",className:"thumbnail",height:228,quality:100,src:i,width:228}),React__default.default.createElement(Figcaption,null,React__default.default.createElement(box.Box,{$display:"block",className:"hidden"},r),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:16},o,React__default.default.createElement(box.Box,{$dir:"column",$gap:4,sx:"width: calc(100% - 56px);"},React__default.default.createElement(heading.H,{$color:"grey-2",$semiBold:!0,$fontSize:x?18:16,$textClampLines:1},f),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,$textClampLines:1,$sx:"display: flex; gap: 8px;"},s,c&&React__default.default.createElement(paragraph.P,{as:"span",className:"not-hover",$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"display: inline-block; flex: 1; text-align: right;"},c)))),React__default.default.createElement(paragraph.P,{$color:"grey-5",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:6,className:"hidden inline"},t),React__default.default.createElement(box.Box,{className:"hidden",$align:"center",$dir:"row"},React__default.default.createElement(rate.Rate,{isRateable:!1,percent:p,size:"small"}),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin: 0px auto 0px 4px;"},"(",d,")"),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:8},React__default.default.Children.toArray(e))))))},Wrapper=styled.styled.a`
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import { styled } from 'styled-components';
+import { Box } from '../../../components/atoms/box/box';
+import { H } from '../../../components/atoms/typography/heading';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { Rate } from '../../../components/actions/rate/rate';
+import { CartFilled } from '../../../icons/shopping/cart_filled';
+import { PurchaseTextWrapper } from '../styles';
+export const AudioEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, purchaseText, rating, subtitle, supportLabel, sx, title, }) => {
+    const hasLogo = !!logo;
+    return (React.createElement(Wrapper, { "$sx": sx, href: href, "$hasPurchaseText": !!purchaseText },
+        React.createElement(Figure, null,
+            actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
+            !!purchaseText && (React.createElement(PurchaseTextWrapper, { className: "not-hover" },
+                React.createElement(CartFilled, { color: "yellow-5", size: 24 }),
+                React.createElement(P, { "$bold": true, "$color": "white" }, purchaseText))),
+            React.createElement(Image, { alt: "", className: "thumbnail", height: 228, quality: 100, src: image, width: 228 }),
+            React.createElement(Figcaption, null,
+                React.createElement(Box, { "$display": "block", className: "hidden" }, cta),
+                React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16 },
+                    logo,
+                    React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "width: calc(100% - 56px);" },
+                        React.createElement(H, { "$color": "grey-2", "$semiBold": true, "$fontSize": hasLogo ? 18 : 16, "$textClampLines": 1 }, title),
+                        React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, "$textClampLines": 1, "$sx": "display: flex; gap: 8px;" },
+                            subtitle,
+                            supportLabel && (React.createElement(P, { as: "span", className: "not-hover", "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "display: inline-block; flex: 1; text-align: right;" }, supportLabel))))),
+                React.createElement(P, { "$color": "grey-5", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 6, className: "hidden inline" }, content),
+                React.createElement(Box, { className: "hidden", "$align": "center", "$dir": "row" },
+                    React.createElement(Rate, { isRateable: false, percent: rating, size: "small" }),
+                    React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin: 0px auto 0px 4px;" },
+                        "(",
+                        numRating,
+                        ")"),
+                    React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 8 }, React.Children.toArray(actions)))))));
+};
+const Wrapper = styled.a `
   cursor: pointer;
   display: block;
   position: relative;
@@ -12,7 +48,9 @@
   figure {
     transition: width 0.3s;
     width: 213px;
-    ${({$hasPurchaseText:e})=>e?"background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 25.1px, rgba(0, 0, 0, 0.00) 56px);":""}
+    ${({ $hasPurchaseText }) => $hasPurchaseText
+    ? 'background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 25.1px, rgba(0, 0, 0, 0.00) 56px);'
+    : ''}
 
     img {
       box-shadow: var(--elevation-3);
@@ -67,8 +105,9 @@
     }
   }
 
-  ${({$sx:e})=>e||""};
-`,Figure=styled.styled.figure`
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const Figure = styled.figure `
   margin: 0px;
   border-radius: 16px;
 
@@ -81,7 +120,8 @@
     height: 225px;
     aspect-ratio: 228 / 228;
   }
-`,Figcaption=styled.styled.figcaption`
+`;
+const Figcaption = styled.figcaption `
   display: flex;
   flex-flow: column nowrap;
   gap: 8px;
@@ -89,8 +129,9 @@
   width: 100%;
   position: relative;
   box-sizing: border-box;
-`,DropdownWrapper=styled.styled.div`
+`;
+const DropdownWrapper = styled.div `
   position: absolute;
   top: 8px;
   right: 8px;
-`;exports.AudioEpisodeCard=AudioEpisodeCard;
+`;

package/dist/components/card/audio/index.js

@@ -0,0 +1 @@
+export { AudioEpisodeCard } from './audio';

package/dist/components/card/card.js

@@ -1,2 +1,25 @@
-"use client";
-"use strict";var React=require("react"),action=require("./action/action.js"),audio=require("./audio/audio.js"),feature=require("./feature/feature.js"),person=require("./person/person.js"),price=require("./price/price.js"),regular=require("./regular/regular.js"),video=require("./video/video.js"),written=require("./written/written.js"),meeting=require("./meeting/meeting.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Card=({type:e="regular",...t})=>{return{action:React__default.default.createElement(action.ActionCard,{...t}),"audio-episode":React__default.default.createElement(audio.AudioEpisodeCard,{...t}),feature:React__default.default.createElement(feature.FeatureCard,{...t}),person:React__default.default.createElement(person.PersonCard,{...t}),price:React__default.default.createElement(price.PriceCard,{...t}),regular:React__default.default.createElement(regular.RegularCard,{...t}),"video-episode":React__default.default.createElement(video.VideoEpisodeCard,{...t}),"written-episode":React__default.default.createElement(written.WrittenEpisodeCard,{...t}),meeting:React__default.default.createElement(meeting.MeetingCard,{...t})}[e]};exports.Card=Card;
+'use client';
+import React from 'react';
+import { ActionCard } from './action/action';
+import { AudioEpisodeCard } from './audio/audio';
+import { FeatureCard } from './feature/feature';
+import { PersonCard } from './person/person';
+import { PriceCard } from './price/price';
+import { RegularCard } from './regular/regular';
+import { VideoEpisodeCard } from './video/video';
+import { WrittenEpisodeCard } from './written/written';
+import { MeetingCard } from './meeting/meeting';
+export const Card = ({ type = 'regular', ...rest }) => {
+    const lookup = {
+        action: React.createElement(ActionCard, { ...rest }),
+        'audio-episode': React.createElement(AudioEpisodeCard, { ...rest }),
+        feature: React.createElement(FeatureCard, { ...rest }),
+        person: React.createElement(PersonCard, { ...rest }),
+        price: React.createElement(PriceCard, { ...rest }),
+        regular: React.createElement(RegularCard, { ...rest }),
+        'video-episode': React.createElement(VideoEpisodeCard, { ...rest }),
+        'written-episode': (React.createElement(WrittenEpisodeCard, { ...rest })),
+        meeting: React.createElement(MeetingCard, { ...rest }),
+    };
+    return lookup[type];
+};

package/dist/components/card/feature/feature.js

@@ -1,5 +1,54 @@
-"use client";
-"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),modal=require("../../surfaces/modal/modal.js"),camera=require("../../../icons/basic/camera.js"),checkmark=require("../../../icons/basic/checkmark.js"),close=require("../../../icons/basic/close.js"),pencil=require("../../../icons/basic/pencil.js"),trash=require("../../../icons/basic/trash.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const FeatureCard=({content:e="",editable:t,href:a,image:r,onDelete:o,onSave:l,sx:i,title:n="",uploadModal:d})=>{const[c,u]=React__default.default.useState(!1),[s,p]=React__default.default.useState(()=>n),[f,x]=React__default.default.useState(()=>e);var g=!c&&t,m=!!a;return React__default.default.createElement(Wrapper,{as:m?"a":"div",href:a},React__default.default.createElement(Figure,{$editing:c,$isLink:m,$sx:i},React__default.default.createElement(Image__default.default,{alt:n,height:352,quality:100,src:r,width:352}),!c&&React__default.default.createElement(Title,null,s,React__default.default.createElement("figure",null,React__default.default.createElement(Content,null,f)),g&&React__default.default.createElement(pencil.Pencil,{className:"edit",onClick:()=>u(!0)}),t&&d&&React__default.default.createElement(modal.Modal,null,React__default.default.createElement(modal.Modal.Trigger,null,React__default.default.createElement(button.Button,{icon:React__default.default.createElement(camera.Camera,null),type:"outlined",size:"small",sx:"position: absolute; right: 8px; top: -72px;"},"Edit")),React__default.default.createElement(modal.Modal.Content,null,d))),c&&React__default.default.createElement(box.Box,{$align:"flex-end",$display:"flex",$dir:"column",$gap:8,sx:"position: relative;"},React__default.default.createElement(EditTitle,{onChange:e=>{p(e.target.value)},value:s}),React__default.default.createElement(EditContent,{onChange:e=>{x(e.target.value)},value:f}),React__default.default.createElement(box.Box,{$gap:8},React__default.default.createElement(checkmark.Checkmark,{onClick:()=>{u(!1),l&&l(s,f)},sx:`
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import { styled } from 'styled-components';
+import { Box } from '../../../components/atoms/box/box';
+import { Button } from '../../../components/actions/button/button';
+import { Modal } from '../../../components/surfaces/modal/modal';
+import { Camera } from '../../../icons/basic/camera';
+import { Checkmark } from '../../../icons/basic/checkmark';
+import { Close } from '../../../icons/basic/close';
+import { Pencil } from '../../../icons/basic/pencil';
+import { Trash } from '../../../icons/basic/trash';
+export const FeatureCard = ({ content = '', editable, href, image, onDelete, onSave, sx, title = '', uploadModal, }) => {
+    const [editing, setEditing] = React.useState(false);
+    const [editingTitle, setTitle] = React.useState(() => title);
+    const [editingContent, setContent] = React.useState(() => content);
+    const handleSetEditing = () => setEditing(true);
+    const handleCancelEdit = () => {
+        setTitle(title);
+        setContent(content);
+        setEditing(false);
+    };
+    const handleSave = () => {
+        setEditing(false);
+        onSave && onSave(editingTitle, editingContent);
+    };
+    const handleTitleChange = (event) => {
+        setTitle(event.target.value);
+    };
+    const handleContentChange = (event) => {
+        setContent(event.target.value);
+    };
+    const showEditIcon = !editing && editable;
+    const isLink = !!href;
+    return (React.createElement(Wrapper, { as: isLink ? 'a' : 'div', href: href },
+        React.createElement(Figure, { "$editing": editing, "$isLink": isLink, "$sx": sx },
+            React.createElement(Image, { alt: title, height: 352, quality: 100, src: image, width: 352 }),
+            !editing && (React.createElement(Title, null,
+                editingTitle,
+                React.createElement("figure", null,
+                    React.createElement(Content, null, editingContent)),
+                showEditIcon && (React.createElement(Pencil, { className: "edit", onClick: handleSetEditing })),
+                editable && uploadModal && (React.createElement(Modal, null,
+                    React.createElement(Modal.Trigger, null,
+                        React.createElement(Button, { icon: React.createElement(Camera, null), type: "outlined", size: "small", sx: "position: absolute; right: 8px; top: -72px;" }, "Edit")),
+                    React.createElement(Modal.Content, null, uploadModal))))),
+            editing && (React.createElement(Box, { "$align": "flex-end", "$display": "flex", "$dir": "column", "$gap": 8, sx: "position: relative;" },
+                React.createElement(EditTitle, { onChange: handleTitleChange, value: editingTitle }),
+                React.createElement(EditContent, { onChange: handleContentChange, value: editingContent }),
+                React.createElement(Box, { "$gap": 8 },
+                    React.createElement(Checkmark, { onClick: handleSave, sx: `
                   padding: 8px;
                   border-radius: 4px;
                   cursor: pointer;
@@ -8,7 +57,8 @@
                   &:hover {
                     background-color: var(--color-grey-10);
                   }
-                `}),React__default.default.createElement(close.Close,{onClick:()=>{p(n),x(e),u(!1)},sx:`
+                ` }),
+                    React.createElement(Close, { onClick: handleCancelEdit, sx: `
                   padding: 8px;
                   border-radius: 4px;
                   cursor: pointer;
@@ -17,7 +67,8 @@
                   &:hover {
                     background-color: var(--color-grey-10);
                   }
-                `}),o&&React__default.default.createElement(trash.Trash,{onClick:o,sx:`
+                ` }),
+                    onDelete && (React.createElement(Trash, { onClick: onDelete, sx: `
                     padding: 8px;
                     border-radius: 4px;
                     cursor: pointer;
@@ -26,9 +77,12 @@
                     &:hover {
                       background-color: var(--color-grey-10);
                     }
-                  `})))))},Wrapper=styled.styled.div`
+                  ` }))))))));
+};
+const Wrapper = styled.div `
   text-decoration: none;
-`,Figure=styled.styled.figure`
+`;
+const Figure = styled.figure `
   max-width: min-content;
   box-sizing: border-box;
   display: flex;
@@ -41,7 +95,9 @@
   border: 1px solid var(--color-white);
 
   &:hover {
-    ${({$isLink:e})=>e?"border: 1px solid var(--color-primary-blue-3); cursor: pointer;":"cursor: arrow;"}
+    ${({ $isLink }) => $isLink
+    ? 'border: 1px solid var(--color-primary-blue-3); cursor: pointer;'
+    : 'cursor: arrow;'}
 
     button {
       display: flex;
@@ -83,12 +139,15 @@
     }
   }
 
-  ${({$editing:e})=>e?`
-    background-color: var(--color-grey-9);`:`
+  ${({ $editing }) => $editing
+    ? `
+    background-color: var(--color-grey-9);`
+    : `
     background-color: var(--color-white);`}
 
-  ${({$sx:e})=>e||""};
-`,Title=styled.styled.figcaption`
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const Title = styled.figcaption `
   position: relative;
   padding-right: 32px;
   color: var(--color-grey-2);
@@ -98,7 +157,8 @@
   line-height: 26px;
   letter-spacing: -0.252px;
   user-select: none;
-`,Content=styled.styled.figcaption`
+`;
+const Content = styled.figcaption `
   font-size: 14px;
   font-family: var(--font-inter);
   font-weight: 400;
@@ -110,7 +170,8 @@
   line-clamp: 1;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
-`,EditTitle=styled.styled.input`
+`;
+const EditTitle = styled.input `
   width: calc(100% - 24px);
   padding: 12px;
   background-color: var(--color-white);
@@ -122,11 +183,12 @@
   border: none;
   border-radius: 8px;
   outline: none;
-`,EditContent=styled.styled(EditTitle)`
+`;
+const EditContent = styled(EditTitle) `
   padding: 6px 12px;
   font-size: 14px;
   font-family: var(--font-inter);
   font-weight: 400;
   line-height: 20px;
   letter-spacing: -0.084px;
-`;exports.FeatureCard=FeatureCard;
+`;

package/dist/components/card/feature/index.js

@@ -0,0 +1 @@
+export { FeatureCard } from './feature';

package/dist/components/card/index.js

@@ -0,0 +1 @@
+export { Card } from './card';

package/dist/components/card/meeting/index.js

@@ -0,0 +1 @@
+export { MeetingCard } from './meeting';

package/dist/components/card/meeting/meeting.js

@@ -1,5 +1,85 @@
-"use client";
-"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),modal=require("../../surfaces/modal/modal.js"),button=require("../../actions/button/button.js"),dropdown=require("../../actions/dropdown/dropdown.js"),calendar=require("../../../icons/time/calendar.js"),graduation_cap=require("../../../icons/basic/graduation_cap.js"),clock=require("../../../icons/time/clock.js"),pin=require("../../../icons/maps/pin.js"),forward_bold=require("../../../icons/arrow/forward_bold.js"),star_filled=require("../../../icons/basic/star_filled.js"),star=require("../../../icons/basic/star.js"),ellipsis_horizontal=require("../../../icons/basic/ellipsis_horizontal.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var RSVP,React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);!function(e){e.INTERESTED="INTERESTED",e.NOT_INTERESTED="NOT_INTERESTED"}(RSVP=RSVP||{});const MeetingCard=({href:e,image:t,sx:a,title:l,actions:r,course:o,startDate:i,endDate:n,startTime:d,endTime:c,location:u,shareModal:s,handleInterestedOnClick:p,handleNotInterestedOnClick:f,handleVisibleToConnectionsOnClick:_,rsvp:m,dotsActions:g})=>{var E=[];return p&&E.push({value:"interested",label:"Interested",onClick:p,icon:React__default.default.createElement(star_filled.StarFilled,{color:"yellow-5"}),color:m===RSVP.INTERESTED?"primary-blue-2":void 0}),f&&E.push({value:"notInterested",label:"Not Interested",onClick:f,icon:React__default.default.createElement(star_filled.StarFilled,{color:"red-4"}),color:m===RSVP.NOT_INTERESTED?"primary-blue-2":void 0}),_&&E.push("break",{value:"visibleToConnections",label:"Visible to connections",onClick:_}),React__default.default.createElement(Wrapper,{$isLink:!!e,$sx:a,as:e?"a":"div",href:e},React__default.default.createElement(Figure,null,React__default.default.createElement(Image__default.default,{alt:"",height:160,quality:100,src:t,width:312}),React__default.default.createElement(OverlayTopContainer,{id:"overlayTop"},g&&!!g.length&&React__default.default.createElement(dropdown.Dropdown,{hasArrow:!0,maintainState:!1,options:g,trigger:React__default.default.createElement(button.Button,{icon:React__default.default.createElement(ellipsis_horizontal.EllipsisHorizontal,null),showChevron:!1,type:"outlined",size:"small",className:"icon"}),onClick:e=>e.preventDefault()})),React__default.default.createElement(OverlayBottomContainer,{id:"overlayBottom"},s&&React__default.default.createElement(modal.Modal,null,React__default.default.createElement(modal.Modal.Trigger,null,React__default.default.createElement(button.Button,{icon:React__default.default.createElement(forward_bold.ForwardBold,null),type:"outlined",size:"small",onClick:e=>e.preventDefault(),className:"icon"})),React__default.default.createElement(modal.Modal.Content,{onClick:e=>e.preventDefault()},s)),!!E.length&&React__default.default.createElement(dropdown.Dropdown,{open:"left",offset:[40,10],maintainState:!1,options:E,trigger:React__default.default.createElement(button.Button,{icon:m===RSVP.INTERESTED&&React__default.default.createElement(star_filled.StarFilled,{sx:"color: var(--color-yellow-5);"})||m===RSVP.NOT_INTERESTED&&React__default.default.createElement(star_filled.StarFilled,{sx:"color: var(--color-red-4);"})||React__default.default.createElement(star.Star,null),type:"outlined",size:"small",className:"icon"}),onClick:e=>e.preventDefault()}))),React__default.default.createElement(box.Box,{$dir:"column",$padding:24},React__default.default.createElement(heading.H.Eight,{$textAlign:"center",$color:"grey-2",$mediumBold:!0},l),React__default.default.createElement(MeetingInformation,null,o&&React__default.default.createElement(box.Box,{$align:"center",$gap:20},React__default.default.createElement(graduation_cap.GraduationCap,{color:"grey-6"}),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-3",$lineHeight:20,$fontSize:14},o)),React__default.default.createElement(box.Box,{$align:"center",$gap:20},React__default.default.createElement(calendar.Calendar,{color:"grey-6"}),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-3",$lineHeight:20,$fontSize:14},i," - ",n)),React__default.default.createElement(box.Box,{$align:"center",$gap:20},React__default.default.createElement(clock.Clock,{color:"grey-6"}),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-3",$lineHeight:20,$fontSize:14},d," - ",c)),React__default.default.createElement(box.Box,{$align:"center",$gap:20,sx:"max-width: 264px;"},React__default.default.createElement(pin.Pin,{color:"grey-6"}),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-3",$lineHeight:20,$fontSize:14},u))),React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$gap:8,sx:"margin-top: 32px; width: 100%;"},React__default.default.Children.toArray(r))))},Wrapper=styled.styled.div`
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import { styled } from 'styled-components';
+import { Box } from '../../../components/atoms/box/box';
+import { H } from '../../../components/atoms/typography/heading';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { Modal } from '../../../components/surfaces/modal/modal';
+import { Button } from '../../../components/actions/button/button';
+import { Dropdown } from '../../../components/actions/dropdown/dropdown';
+import { Calendar } from '../../../icons/time/calendar';
+import { GraduationCap } from '../../../icons/basic/graduation_cap';
+import { Clock } from '../../../icons/time/clock';
+import { Pin } from '../../../icons/maps/pin';
+import { ForwardBold } from '../../../icons/arrow/forward_bold';
+import { StarFilled } from '../../../icons/basic/star_filled';
+import { Star } from '../../../icons/basic/star';
+import { EllipsisHorizontal } from '../../../icons/basic/ellipsis_horizontal';
+var RSVP;
+(function (RSVP) {
+    RSVP["INTERESTED"] = "INTERESTED";
+    RSVP["NOT_INTERESTED"] = "NOT_INTERESTED";
+})(RSVP || (RSVP = {}));
+export const MeetingCard = ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, rsvp, dotsActions, }) => {
+    const secondaryActions = [];
+    !!handleInterestedOnClick &&
+        secondaryActions.push({
+            value: 'interested',
+            label: 'Interested',
+            onClick: handleInterestedOnClick,
+            icon: React.createElement(StarFilled, { color: "yellow-5" }),
+            color: rsvp === RSVP.INTERESTED ? 'primary-blue-2' : undefined,
+        });
+    !!handleNotInterestedOnClick &&
+        secondaryActions.push({
+            value: 'notInterested',
+            label: 'Not Interested',
+            onClick: handleNotInterestedOnClick,
+            icon: React.createElement(StarFilled, { color: "red-4" }),
+            color: rsvp === RSVP.NOT_INTERESTED ? 'primary-blue-2' : undefined,
+        });
+    !!handleVisibleToConnectionsOnClick &&
+        secondaryActions.push('break', {
+            value: 'visibleToConnections',
+            label: 'Visible to connections',
+            onClick: handleVisibleToConnectionsOnClick,
+        });
+    return (React.createElement(Wrapper, { "$isLink": !!href, "$sx": sx, as: href ? 'a' : 'div', href: href },
+        React.createElement(Figure, null,
+            React.createElement(Image, { alt: "", height: 160, quality: 100, src: image, width: 312 }),
+            React.createElement(OverlayTopContainer, { id: "overlayTop" }, dotsActions && !!dotsActions.length && (React.createElement(Dropdown, { hasArrow: true, maintainState: false, options: dotsActions, trigger: React.createElement(Button, { icon: React.createElement(EllipsisHorizontal, null), showChevron: false, type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() }))),
+            React.createElement(OverlayBottomContainer, { id: "overlayBottom" },
+                shareModal && (React.createElement(Modal, null,
+                    React.createElement(Modal.Trigger, null,
+                        React.createElement(Button, { icon: React.createElement(ForwardBold, null), type: "outlined", size: "small", onClick: (e) => e.preventDefault(), className: "icon" })),
+                    React.createElement(Modal.Content, { onClick: (e) => e.preventDefault() }, shareModal))),
+                !!secondaryActions.length && (React.createElement(Dropdown, { open: "left", offset: [40, 10], maintainState: false, options: secondaryActions, trigger: React.createElement(Button, { icon: (rsvp === RSVP.INTERESTED && (React.createElement(StarFilled, { sx: "color: var(--color-yellow-5);" }))) ||
+                            (rsvp === RSVP.NOT_INTERESTED && (React.createElement(StarFilled, { sx: "color: var(--color-red-4);" }))) || React.createElement(Star, null), type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() })))),
+        React.createElement(Box, { "$dir": "column", "$padding": 24 },
+            React.createElement(H.Eight, { "$textAlign": "center", "$color": "grey-2", "$mediumBold": true }, title),
+            React.createElement(MeetingInformation, null,
+                course && (React.createElement(Box, { "$align": "center", "$gap": 20 },
+                    React.createElement(GraduationCap, { color: "grey-6" }),
+                    React.createElement(P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 }, course))),
+                React.createElement(Box, { "$align": "center", "$gap": 20 },
+                    React.createElement(Calendar, { color: "grey-6" }),
+                    React.createElement(P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 },
+                        startDate,
+                        " - ",
+                        endDate)),
+                React.createElement(Box, { "$align": "center", "$gap": 20 },
+                    React.createElement(Clock, { color: "grey-6" }),
+                    React.createElement(P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 },
+                        startTime,
+                        " - ",
+                        endTime)),
+                React.createElement(Box, { "$align": "center", "$gap": 20, sx: "max-width: 264px;" },
+                    React.createElement(Pin, { color: "grey-6" }),
+                    React.createElement(P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 }, location))),
+            React.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 32px; width: 100%;" }, React.Children.toArray(actions)))));
+};
+const Wrapper = styled.div `
   min-width: 312px;
   position: relative;
   display: block;
@@ -11,7 +91,7 @@
   border: 1px solid var(--color-white);
 
   &:hover {
-    ${({$isLink:e})=>e?"border: 1px solid var(--color-primary-blue-3);":""}
+    ${({ $isLink }) => $isLink ? 'border: 1px solid var(--color-primary-blue-3);' : ''}
 
     #overlayBottom {
       opacity: 1;
@@ -29,17 +109,20 @@
     object-fit: cover;
   }
 
-  ${({$sx:e})=>e||""};
-`,MeetingInformation=styled.styled.div`
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const MeetingInformation = styled.div `
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 16px;
   height: 128px;
-`,Figure=styled.styled.figure`
+`;
+const Figure = styled.figure `
   position: relative;
   margin: 0;
-`,OverlayBottomContainer=styled.styled.div`
+`;
+const OverlayBottomContainer = styled.div `
   position: absolute;
   right: 0;
   bottom: 0;
@@ -47,7 +130,8 @@
   opacity: 0;
   display: flex;
   gap: 8px;
-`,OverlayTopContainer=styled.styled.div`
+`;
+const OverlayTopContainer = styled.div `
   position: absolute;
   right: 0;
   top: 0;
@@ -55,4 +139,4 @@
   opacity: 0;
   display: flex;
   gap: 8px;
-`;exports.MeetingCard=MeetingCard;
+`;

package/dist/components/card/person/index.js

@@ -0,0 +1 @@
+export { PersonCard } from './person';

package/dist/components/card/person/person.js

@@ -1,11 +1,32 @@
-"use client";
-"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),dropdown=require("../../actions/dropdown/dropdown.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),ellipsis_horizontal=require("../../../icons/basic/ellipsis_horizontal.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const PersonCard=({actions:e,dotsActions:t,href:a,image:o,subtitle:i,sx:r,title:l})=>React__default.default.createElement(Wrapper,{$image:o},React__default.default.createElement(Person,{$sx:r},React__default.default.createElement(ContentWrapper,{as:a?"a":"div",href:a},t&&!!t.length&&React__default.default.createElement(dropdown.Dropdown,{hasArrow:!0,maintainState:!1,onClick:e=>e.preventDefault(),options:t,sx:"position: absolute; top: 8px; right: 8px; z-index: 24; display: none;",trigger:React__default.default.createElement(button.Button,{className:"icon",icon:React__default.default.createElement(ellipsis_horizontal.EllipsisHorizontal,null),onClick:e=>e.stopPropagation(),showChevron:!1,size:"small",type:"outlined"})}),React__default.default.createElement(Image__default.default,{alt:"",height:400,quality:100,src:o,width:312})),React__default.default.createElement(Figcaption,null,React__default.default.createElement(heading.H,{as:"span",$bold:!0,$color:"white",$fontSize:24,$lineHeight:36},l),React__default.default.createElement(paragraph.P,{as:"span",$color:"white",$fontSize:14,$lineHeight:20},i),e&&React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$gap:8,sx:"margin-top: 16px;"},React__default.default.Children.toArray(e))))),ContentWrapper=styled.styled.div`
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import { styled } from 'styled-components';
+import { Box } from '../../../components/atoms/box/box';
+import { Button } from '../../../components/actions/button/button';
+import { Dropdown } from '../../../components/actions/dropdown/dropdown';
+import { H } from '../../../components/atoms/typography/heading';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { EllipsisHorizontal } from '../../../icons/basic/ellipsis_horizontal';
+export const PersonCard = ({ actions, dotsActions, href, image, subtitle, sx, title, }) => {
+    return (React.createElement(Wrapper, { "$image": image },
+        React.createElement(Person, { "$sx": sx },
+            React.createElement(ContentWrapper, { as: href ? 'a' : 'div', href: href },
+                dotsActions && !!dotsActions.length && (React.createElement(Dropdown, { hasArrow: true, maintainState: false, onClick: (e) => e.preventDefault(), options: dotsActions, sx: "position: absolute; top: 8px; right: 8px; z-index: 24; display: none;", trigger: React.createElement(Button, { className: "icon", icon: React.createElement(EllipsisHorizontal, null), onClick: (event) => event.stopPropagation(), showChevron: false, size: "small", type: "outlined" }) })),
+                React.createElement(Image, { alt: "", height: 400, quality: 100, src: image, width: 312 })),
+            React.createElement(Figcaption, null,
+                React.createElement(H, { as: "span", "$bold": true, "$color": "white", "$fontSize": 24, "$lineHeight": 36 }, title),
+                React.createElement(P, { as: "span", "$color": "white", "$fontSize": 14, "$lineHeight": 20 }, subtitle),
+                actions && (React.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 16px;" }, React.Children.toArray(actions)))))));
+};
+const ContentWrapper = styled.div `
   display: flex;
   flex-direction: column;
   &:hover > div {
     display: initial;
   }
-`,Wrapper=styled.styled.div`
+`;
+const Wrapper = styled.div `
   width: 312px;
   height: 400px;
   display: block;
@@ -21,7 +42,8 @@
     border-radius: 16px;
     object-fit: cover;
   }
-`,Person=styled.styled.figure`
+`;
+const Person = styled.figure `
   position: relative;
   width: 100%;
   height: 100%;
@@ -31,8 +53,9 @@
   justify-content: flex-end;
   flex-direction: column;
 
-  ${({$sx:e})=>e||""};
-`,Figcaption=styled.styled.figcaption`
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const Figcaption = styled.figcaption `
   position: relative;
   width: 100%;
   height: auto;
@@ -50,4 +73,4 @@
   padding: 16px 24px;
   box-shadow: 0 -10px 20px 0 rgba(0, 0, 0, 0.001);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-`;exports.PersonCard=PersonCard;
+`;

package/dist/components/card/price/index.js

@@ -0,0 +1 @@
+export { PriceCard } from './price';