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

package/dist/components/card/card.js

@@ -1,2 +1,34 @@
 "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 strict';
+
+var React = require('react');
+var action = require('./action/action.js');
+var audio = require('./audio/audio.js');
+var feature = require('./feature/feature.js');
+var person = require('./person/person.js');
+var price = require('./price/price.js');
+var regular = require('./regular/regular.js');
+var video = require('./video/video.js');
+var written = require('./written/written.js');
+var meeting = require('./meeting/meeting.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Card = ({ type = 'regular', ...rest }) => {
+    const lookup = {
+        action: React__default.default.createElement(action.ActionCard, { ...rest }),
+        'audio-episode': React__default.default.createElement(audio.AudioEpisodeCard, { ...rest }),
+        feature: React__default.default.createElement(feature.FeatureCard, { ...rest }),
+        person: React__default.default.createElement(person.PersonCard, { ...rest }),
+        price: React__default.default.createElement(price.PriceCard, { ...rest }),
+        regular: React__default.default.createElement(regular.RegularCard, { ...rest }),
+        'video-episode': React__default.default.createElement(video.VideoEpisodeCard, { ...rest }),
+        'written-episode': (React__default.default.createElement(written.WrittenEpisodeCard, { ...rest })),
+        meeting: React__default.default.createElement(meeting.MeetingCard, { ...rest }),
+    };
+    return lookup[type];
+};
+
+exports.Card = Card;

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

@@ -1,5 +1,62 @@
 "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 strict';
+
+var React = require('react');
+var Image = require('next/image');
+var styled = require('styled-components');
+var box = require('../../atoms/box/box.js');
+var button = require('../../actions/button/button.js');
+var modal = require('../../surfaces/modal/modal.js');
+var camera = require('../../../icons/basic/camera.js');
+var checkmark = require('../../../icons/basic/checkmark.js');
+var close = require('../../../icons/basic/close.js');
+var pencil = require('../../../icons/basic/pencil.js');
+var trash = require('../../../icons/basic/trash.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);
+
+const FeatureCard = ({ content = '', editable, href, image, onDelete, onSave, sx, title = '', uploadModal, }) => {
+    const [editing, setEditing] = React__default.default.useState(false);
+    const [editingTitle, setTitle] = React__default.default.useState(() => title);
+    const [editingContent, setContent] = React__default.default.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__default.default.createElement(Wrapper, { as: isLink ? 'a' : 'div', href: href },
+        React__default.default.createElement(Figure, { "$editing": editing, "$isLink": isLink, "$sx": sx },
+            React__default.default.createElement(Image__default.default, { alt: title, height: 352, quality: 100, src: image, width: 352 }),
+            !editing && (React__default.default.createElement(Title, null,
+                editingTitle,
+                React__default.default.createElement("figure", null,
+                    React__default.default.createElement(Content, null, editingContent)),
+                showEditIcon && (React__default.default.createElement(pencil.Pencil, { className: "edit", onClick: handleSetEditing })),
+                editable && uploadModal && (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, uploadModal))))),
+            editing && (React__default.default.createElement(box.Box, { "$align": "flex-end", "$display": "flex", "$dir": "column", "$gap": 8, sx: "position: relative;" },
+                React__default.default.createElement(EditTitle, { onChange: handleTitleChange, value: editingTitle }),
+                React__default.default.createElement(EditContent, { onChange: handleContentChange, value: editingContent }),
+                React__default.default.createElement(box.Box, { "$gap": 8 },
+                    React__default.default.createElement(checkmark.Checkmark, { onClick: handleSave, sx: `
                   padding: 8px;
                   border-radius: 4px;
                   cursor: pointer;
@@ -8,7 +65,8 @@
                   &:hover {
                     background-color: var(--color-grey-10);
                   }
-                `}),React__default.default.createElement(close.Close,{onClick:()=>{p(n),x(e),u(!1)},sx:`
+                ` }),
+                    React__default.default.createElement(close.Close, { onClick: handleCancelEdit, sx: `
                   padding: 8px;
                   border-radius: 4px;
                   cursor: pointer;
@@ -17,7 +75,8 @@
                   &:hover {
                     background-color: var(--color-grey-10);
                   }
-                `}),o&&React__default.default.createElement(trash.Trash,{onClick:o,sx:`
+                ` }),
+                    onDelete && (React__default.default.createElement(trash.Trash, { onClick: onDelete, sx: `
                     padding: 8px;
                     border-radius: 4px;
                     cursor: pointer;
@@ -26,9 +85,12 @@
                     &:hover {
                       background-color: var(--color-grey-10);
                     }
-                  `})))))},Wrapper=styled.styled.div`
+                  ` }))))))));
+};
+const Wrapper = styled.styled.div `
   text-decoration: none;
-`,Figure=styled.styled.figure`
+`;
+const Figure = styled.styled.figure `
   max-width: min-content;
   box-sizing: border-box;
   display: flex;
@@ -41,7 +103,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 +147,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.styled.figcaption `
   position: relative;
   padding-right: 32px;
   color: var(--color-grey-2);
@@ -98,7 +165,8 @@
   line-height: 26px;
   letter-spacing: -0.252px;
   user-select: none;
-`,Content=styled.styled.figcaption`
+`;
+const Content = styled.styled.figcaption `
   font-size: 14px;
   font-family: var(--font-inter);
   font-weight: 400;
@@ -110,7 +178,8 @@
   line-clamp: 1;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
-`,EditTitle=styled.styled.input`
+`;
+const EditTitle = styled.styled.input `
   width: calc(100% - 24px);
   padding: 12px;
   background-color: var(--color-white);
@@ -122,11 +191,14 @@
   border: none;
   border-radius: 8px;
   outline: none;
-`,EditContent=styled.styled(EditTitle)`
+`;
+const EditContent = styled.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;
+`;
+
+exports.FeatureCard = FeatureCard;

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

@@ -1,5 +1,93 @@
 "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 strict';
+
+var React = require('react');
+var Image = require('next/image');
+var styled = require('styled-components');
+var box = require('../../atoms/box/box.js');
+var heading = require('../../atoms/typography/heading.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var modal = require('../../surfaces/modal/modal.js');
+var button = require('../../actions/button/button.js');
+var dropdown = require('../../actions/dropdown/dropdown.js');
+var calendar = require('../../../icons/time/calendar.js');
+var graduation_cap = require('../../../icons/basic/graduation_cap.js');
+var clock = require('../../../icons/time/clock.js');
+var pin = require('../../../icons/maps/pin.js');
+var forward_bold = require('../../../icons/arrow/forward_bold.js');
+var star_filled = require('../../../icons/basic/star_filled.js');
+var star = require('../../../icons/basic/star.js');
+var ellipsis_horizontal = require('../../../icons/basic/ellipsis_horizontal.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 RSVP;
+(function (RSVP) {
+    RSVP["INTERESTED"] = "INTERESTED";
+    RSVP["NOT_INTERESTED"] = "NOT_INTERESTED";
+})(RSVP || (RSVP = {}));
+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__default.default.createElement(star_filled.StarFilled, { color: "yellow-5" }),
+            color: rsvp === RSVP.INTERESTED ? 'primary-blue-2' : undefined,
+        });
+    !!handleNotInterestedOnClick &&
+        secondaryActions.push({
+            value: 'notInterested',
+            label: 'Not Interested',
+            onClick: handleNotInterestedOnClick,
+            icon: React__default.default.createElement(star_filled.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__default.default.createElement(Wrapper, { "$isLink": !!href, "$sx": sx, as: href ? 'a' : 'div', href: href },
+        React__default.default.createElement(Figure, null,
+            React__default.default.createElement(Image__default.default, { alt: "", height: 160, quality: 100, src: image, width: 312 }),
+            React__default.default.createElement(OverlayTopContainer, { id: "overlayTop" }, dotsActions && !!dotsActions.length && (React__default.default.createElement(dropdown.Dropdown, { hasArrow: true, maintainState: false, options: dotsActions, trigger: React__default.default.createElement(button.Button, { icon: React__default.default.createElement(ellipsis_horizontal.EllipsisHorizontal, null), showChevron: false, type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() }))),
+            React__default.default.createElement(OverlayBottomContainer, { id: "overlayBottom" },
+                shareModal && (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() }, shareModal))),
+                !!secondaryActions.length && (React__default.default.createElement(dropdown.Dropdown, { open: "left", offset: [40, 10], maintainState: false, options: secondaryActions, trigger: React__default.default.createElement(button.Button, { icon: (rsvp === RSVP.INTERESTED && (React__default.default.createElement(star_filled.StarFilled, { sx: "color: var(--color-yellow-5);" }))) ||
+                            (rsvp === 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": true }, title),
+            React__default.default.createElement(MeetingInformation, null,
+                course && (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 }, course))),
+                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 },
+                        startDate,
+                        " - ",
+                        endDate)),
+                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 },
+                        startTime,
+                        " - ",
+                        endTime)),
+                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 }, location))),
+            React__default.default.createElement(box.Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 32px; width: 100%;" }, React__default.default.Children.toArray(actions)))));
+};
+const Wrapper = styled.styled.div `
   min-width: 312px;
   position: relative;
   display: block;
@@ -11,7 +99,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 +117,20 @@
     object-fit: cover;
   }
 
-  ${({$sx:e})=>e||""};
-`,MeetingInformation=styled.styled.div`
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const MeetingInformation = styled.styled.div `
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 16px;
   height: 128px;
-`,Figure=styled.styled.figure`
+`;
+const Figure = styled.styled.figure `
   position: relative;
   margin: 0;
-`,OverlayBottomContainer=styled.styled.div`
+`;
+const OverlayBottomContainer = styled.styled.div `
   position: absolute;
   right: 0;
   bottom: 0;
@@ -47,7 +138,8 @@
   opacity: 0;
   display: flex;
   gap: 8px;
-`,OverlayTopContainer=styled.styled.div`
+`;
+const OverlayTopContainer = styled.styled.div `
   position: absolute;
   right: 0;
   top: 0;
@@ -55,4 +147,6 @@
   opacity: 0;
   display: flex;
   gap: 8px;
-`;exports.MeetingCard=MeetingCard;
+`;
+
+exports.MeetingCard = MeetingCard;

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

@@ -1,5 +1,33 @@
 "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:i,subtitle:o,sx:r,title:l})=>React__default.default.createElement(Wrapper,{$image:i,as:a?"a":"div",href:a},React__default.default.createElement(Person,{$sx:r},t&&!!t.length&&React__default.default.createElement(dropdown.Dropdown,{containerSx:"",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:i,width:312}),React__default.default.createElement(Shadow,null),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},o),e&&React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$gap:8,sx:"margin-top: 16px;"},React__default.default.Children.toArray(e))))),Wrapper=styled.styled.div`
+'use strict';
+
+var React = require('react');
+var Image = require('next/image');
+var styled = require('styled-components');
+var box = require('../../atoms/box/box.js');
+var button = require('../../actions/button/button.js');
+var dropdown = require('../../actions/dropdown/dropdown.js');
+var heading = require('../../atoms/typography/heading.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var ellipsis_horizontal = require('../../../icons/basic/ellipsis_horizontal.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);
+
+const PersonCard = ({ actions, dotsActions, href, image, subtitle, sx, title, }) => {
+    return (React__default.default.createElement(Wrapper, { "$image": image, as: href ? 'a' : 'div', href: href },
+        React__default.default.createElement(Person, { "$sx": sx },
+            dotsActions && !!dotsActions.length && (React__default.default.createElement(dropdown.Dropdown, { containerSx: "", hasArrow: true, maintainState: false, onClick: (e) => e.preventDefault(), options: dotsActions, 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: (event) => event.stopPropagation(), showChevron: false, size: "small", type: "outlined" }) })),
+            React__default.default.createElement(Image__default.default, { alt: "", height: 400, quality: 100, src: image, width: 312 }),
+            React__default.default.createElement(Shadow, null),
+            React__default.default.createElement(Figcaption, null,
+                React__default.default.createElement(heading.H, { as: "span", "$bold": true, "$color": "white", "$fontSize": 24, "$lineHeight": 36 }, title),
+                React__default.default.createElement(paragraph.P, { as: "span", "$color": "white", "$fontSize": 14, "$lineHeight": 20 }, subtitle),
+                actions && (React__default.default.createElement(box.Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 16px;" }, React__default.default.Children.toArray(actions)))))));
+};
+const Wrapper = styled.styled.div `
   width: 312px;
   height: 400px;
   display: block;
@@ -15,7 +43,8 @@
     border-radius: 16px;
     object-fit: cover;
   }
-`,Shadow=styled.styled.div`
+`;
+const Shadow = styled.styled.div `
   border-radius: 16px;
   position: absolute;
   top: 0px;
@@ -25,7 +54,8 @@
   height: 100%;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66.67%, #000 98.25%),
     transparent 50% / cover no-repeat;
-`,Person=styled.styled.figure`
+`;
+const Person = styled.styled.figure `
   position: relative;
   width: 100%;
   height: 100%;
@@ -39,12 +69,15 @@
     display: initial;
   }
 
-  ${({$sx:e})=>e||""};
-`,Figcaption=styled.styled.figcaption`
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const Figcaption = styled.styled.figcaption `
   position: relative;
   width: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   padding: 16px 24px;
-`;exports.PersonCard=PersonCard;
+`;
+
+exports.PersonCard = PersonCard;

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

@@ -1,18 +1,56 @@
 "use client";
-"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),dropdown=require("../../actions/dropdown/dropdown.js"),checkmark=require("../../../icons/basic/checkmark.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);const PriceCard=({actions:e,content:t,dotsActions:a,featureTitle:r,features:o,label:l,price:d,title:i})=>{const n=React__default.default.useId();return React__default.default.createElement(Price,null,a&&!!a.length&&React__default.default.createElement(dropdown.Dropdown,{className:"dot-dropdown",hasArrow:!0,maintainState:!1,offset:[0,32],options:a,sx:`
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var box = require('../../atoms/box/box.js');
+var button = require('../../actions/button/button.js');
+var heading = require('../../atoms/typography/heading.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var dropdown = require('../../actions/dropdown/dropdown.js');
+var checkmark = require('../../../icons/basic/checkmark.js');
+var ellipsis_horizontal = require('../../../icons/basic/ellipsis_horizontal.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const PriceCard = ({ actions, content, dotsActions, featureTitle, features, label, price, title, }) => {
+    const id = React__default.default.useId();
+    return (React__default.default.createElement(Price, null,
+        dotsActions && !!dotsActions.length && (React__default.default.createElement(dropdown.Dropdown, { className: "dot-dropdown", hasArrow: true, maintainState: false, offset: [0, 32], options: dotsActions, sx: `
           position: absolute; 
           top: 6px; 
           right: 6px; 
           display: none;
-          `,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()}),l&&React__default.default.createElement(box.Box,{$justify:"center",sx:`
+          `, trigger: React__default.default.createElement(button.Button, { icon: React__default.default.createElement(ellipsis_horizontal.EllipsisHorizontal, null), showChevron: false, type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() })),
+        label && (React__default.default.createElement(box.Box, { "$justify": "center", sx: `
             width: 100%;
             position: absolute;
             z-index: -1;
-            top: -33px;`},React__default.default.createElement(Label,null,React__default.default.createElement(paragraph.P,{as:"span",$fontSize:12,$lineHeight:16,$mediumBold:!0,$textClampLines:1},l))),React__default.default.createElement(box.Box,{$align:"stretch",$display:"flex",$dir:"column",$gap:24,sx:`
+            top: -33px;` },
+            React__default.default.createElement(Label, null,
+                React__default.default.createElement(paragraph.P, { as: "span", "$fontSize": 12, "$lineHeight": 16, "$mediumBold": true, "$textClampLines": 1 }, label)))),
+        React__default.default.createElement(box.Box, { "$align": "stretch", "$display": "flex", "$dir": "column", "$gap": 24, sx: `
           padding: 24px 48px; 
           background-color: var(--color-grey-10); 
           border-radius: 16px 16px 0px 0px;
-        `},React__default.default.createElement(heading.H,{as:"h6",$fontSize:24,$lineHeight:36,$semiBold:!0,$textAlign:"center"},i),React__default.default.createElement(box.Box,{$dir:"column"},React__default.default.createElement(heading.H,{as:"p",$bold:!0,$fontSize:32,$lineHeight:48,$textClampLines:5,$textAlign:"center"},d),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-4",$textAlign:"center"},"/month")),e),React__default.default.createElement(box.Box,{sx:"padding: 16px 24px; position: relative;",$display:"flex",$dir:"column"},React__default.default.createElement(paragraph.P,{sx:"padding: 16px 0px;"},t),React__default.default.createElement(Divider,null),React__default.default.createElement(box.Box,{sx:"padding: 16px 0px;",$dir:"column",$gap:8},React__default.default.createElement(paragraph.P,{$color:"grey-2",$mediumBold:!0},r),o.map((e,t)=>React__default.default.createElement(box.Box,{key:n+t.toString(36),$align:"center",$gap:12},React__default.default.createElement(checkmark.Checkmark,{color:"green-5",sx:"padding: 2px; border-radius: 50%; background-color: var(--color-green-9);"}),React__default.default.createElement(paragraph.P,{$fontSize:14,$lineHeight:20},e))))))},Price=styled.styled.figure`
+        ` },
+            React__default.default.createElement(heading.H, { as: "h6", "$fontSize": 24, "$lineHeight": 36, "$semiBold": true, "$textAlign": "center" }, title),
+            React__default.default.createElement(box.Box, { "$dir": "column" },
+                React__default.default.createElement(heading.H, { as: "p", "$bold": true, "$fontSize": 32, "$lineHeight": 48, "$textClampLines": 5, "$textAlign": "center" }, price),
+                React__default.default.createElement(paragraph.P, { as: "span", "$color": "grey-4", "$textAlign": "center" }, "/month")),
+            actions),
+        React__default.default.createElement(box.Box, { sx: "padding: 16px 24px; position: relative;", "$display": "flex", "$dir": "column" },
+            React__default.default.createElement(paragraph.P, { sx: "padding: 16px 0px;" }, content),
+            React__default.default.createElement(Divider, null),
+            React__default.default.createElement(box.Box, { sx: "padding: 16px 0px;", "$dir": "column", "$gap": 8 },
+                React__default.default.createElement(paragraph.P, { "$color": "grey-2", "$mediumBold": true }, featureTitle),
+                features.map((item, index) => (React__default.default.createElement(box.Box, { key: id + index.toString(36), "$align": "center", "$gap": 12 },
+                    React__default.default.createElement(checkmark.Checkmark, { color: "green-5", sx: "padding: 2px; border-radius: 50%; background-color: var(--color-green-9);" }),
+                    React__default.default.createElement(paragraph.P, { "$fontSize": 14, "$lineHeight": 20 }, item))))))));
+};
+const Price = styled.styled.figure `
   position: relative;
   z-index: 1;
   margin: 0px;
@@ -31,7 +69,8 @@
       display: flex;
     }
   }
-`,Label=styled.styled.div`
+`;
+const Label = styled.styled.div `
   max-width: calc(100% - 32px);
   box-sizing: border-box;
   padding: 8px 24px;
@@ -39,9 +78,12 @@
   background-color: var(--color-grey-10);
   box-shadow: var(--elevation-2);
   border-bottom: 1px solid var(--color-grey-9);
-`,Divider=styled.styled.div`
+`;
+const Divider = styled.styled.div `
   height: 1px;
   width: 100%;
   box-sizing: border-box;
   background-color: var(--color-grey-9);
-`;exports.PriceCard=PriceCard;
+`;
+
+exports.PriceCard = PriceCard;

package/dist/components/card/regular/regular.js

@@ -1,5 +1,22 @@
 "use client";
-"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const RegularCard=({children:e,href:t,image:a,sx:r})=>React__default.default.createElement(Wrapper,{$isLink:!!t,$sx:r,as:t?"a":"div",href:t},React__default.default.createElement(Image__default.default,{alt:"",height:352,quality:100,src:a,width:352}),React__default.default.createElement(box.Box,{$dir:"column",$padding:24},e)),Wrapper=styled.styled.div`
+'use strict';
+
+var React = require('react');
+var Image = require('next/image');
+var styled = require('styled-components');
+var box = require('../../atoms/box/box.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);
+
+const RegularCard = ({ children, href, image, sx, }) => {
+    return (React__default.default.createElement(Wrapper, { "$isLink": !!href, "$sx": sx, as: href ? 'a' : 'div', href: href },
+        React__default.default.createElement(Image__default.default, { alt: "", height: 352, quality: 100, src: image, width: 352 }),
+        React__default.default.createElement(box.Box, { "$dir": "column", "$padding": 24 }, children)));
+};
+const Wrapper = styled.styled.div `
   position: relative;
   display: block;
   text-decoration: none;
@@ -8,15 +25,19 @@
   border-radius: 16px;
   background-color: var(--color-white);
 
-  ${({$isLink:e})=>e?`
+  ${({ $isLink }) => $isLink
+    ? `
     &:hover {
       border: 1px solid var(--color-primary-blue-3);
-    }`:""}
+    }`
+    : ''}
 
   img {
     border-radius: 16px 16px 0px 0px;
     object-fit: cover;
   }
 
-  ${({$sx:e})=>e||""};
-`;exports.RegularCard=RegularCard;
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+exports.RegularCard = RegularCard;

package/dist/components/card/styles.js

@@ -1,9 +1,16 @@
 "use client";
-"use strict";var styled=require("styled-components"),box=require("../atoms/box/box.js");const PurchaseTextWrapper=styled.styled(box.Box)`
+'use strict';
+
+var styled = require('styled-components');
+var box = require('../atoms/box/box.js');
+
+const PurchaseTextWrapper = styled.styled(box.Box) `
   position: absolute;
   top: 16px;
   left: 16px;
   width: calc(100% - 32px);
   gap: 8px;
   align-items: center;
-`;exports.PurchaseTextWrapper=PurchaseTextWrapper;
+`;
+
+exports.PurchaseTextWrapper = PurchaseTextWrapper;