@soul-refiner/design-system 2.0.3 → 2.1.1-alpha.1

package/dist/components/card/card.js

@@ -1,34 +1,2 @@
 "use client";
-'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;
+"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;

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

@@ -1,62 +1,5 @@
 "use client";
-'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: `
+"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:`
                   padding: 8px;
                   border-radius: 4px;
                   cursor: pointer;
@@ -65,8 +8,7 @@ const FeatureCard = ({ content = '', editable, href, image, onDelete, onSave, sx
                   &:hover {
                     background-color: var(--color-grey-10);
                   }
-                ` }),
-                    React__default.default.createElement(close.Close, { onClick: handleCancelEdit, sx: `
+                `}),React__default.default.createElement(close.Close,{onClick:()=>{p(n),x(e),u(!1)},sx:`
                   padding: 8px;
                   border-radius: 4px;
                   cursor: pointer;
@@ -75,8 +17,7 @@ const FeatureCard = ({ content = '', editable, href, image, onDelete, onSave, sx
                   &:hover {
                     background-color: var(--color-grey-10);
                   }
-                ` }),
-                    onDelete && (React__default.default.createElement(trash.Trash, { onClick: onDelete, sx: `
+                `}),o&&React__default.default.createElement(trash.Trash,{onClick:o,sx:`
                     padding: 8px;
                     border-radius: 4px;
                     cursor: pointer;
@@ -85,12 +26,9 @@ const FeatureCard = ({ content = '', editable, href, image, onDelete, onSave, sx
                     &:hover {
                       background-color: var(--color-grey-10);
                     }
-                  ` }))))))));
-};
-const Wrapper = styled.styled.div `
+                  `})))))},Wrapper=styled.styled.div`
   text-decoration: none;
-`;
-const Figure = styled.styled.figure `
+`,Figure=styled.styled.figure`
   max-width: min-content;
   box-sizing: border-box;
   display: flex;
@@ -103,9 +41,7 @@ const Figure = styled.styled.figure `
   border: 1px solid var(--color-white);
 
   &:hover {
-    ${({ $isLink }) => $isLink
-    ? 'border: 1px solid var(--color-primary-blue-3); cursor: pointer;'
-    : 'cursor: arrow;'}
+    ${({$isLink:e})=>e?"border: 1px solid var(--color-primary-blue-3); cursor: pointer;":"cursor: arrow;"}
 
     button {
       display: flex;
@@ -147,15 +83,12 @@ const Figure = styled.styled.figure `
     }
   }
 
-  ${({ $editing }) => $editing
-    ? `
-    background-color: var(--color-grey-9);`
-    : `
+  ${({$editing:e})=>e?`
+    background-color: var(--color-grey-9);`:`
     background-color: var(--color-white);`}
 
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-const Title = styled.styled.figcaption `
+  ${({$sx:e})=>e||""};
+`,Title=styled.styled.figcaption`
   position: relative;
   padding-right: 32px;
   color: var(--color-grey-2);
@@ -165,8 +98,7 @@ const Title = styled.styled.figcaption `
   line-height: 26px;
   letter-spacing: -0.252px;
   user-select: none;
-`;
-const Content = styled.styled.figcaption `
+`,Content=styled.styled.figcaption`
   font-size: 14px;
   font-family: var(--font-inter);
   font-weight: 400;
@@ -178,8 +110,7 @@ const Content = styled.styled.figcaption `
   line-clamp: 1;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
-`;
-const EditTitle = styled.styled.input `
+`,EditTitle=styled.styled.input`
   width: calc(100% - 24px);
   padding: 12px;
   background-color: var(--color-white);
@@ -191,14 +122,11 @@ const EditTitle = styled.styled.input `
   border: none;
   border-radius: 8px;
   outline: none;
-`;
-const EditContent = styled.styled(EditTitle) `
+`,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,93 +1,5 @@
 "use client";
-'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 `
+"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`
   min-width: 312px;
   position: relative;
   display: block;
@@ -99,7 +11,7 @@ const Wrapper = styled.styled.div `
   border: 1px solid var(--color-white);
 
   &:hover {
-    ${({ $isLink }) => $isLink ? 'border: 1px solid var(--color-primary-blue-3);' : ''}
+    ${({$isLink:e})=>e?"border: 1px solid var(--color-primary-blue-3);":""}
 
     #overlayBottom {
       opacity: 1;
@@ -117,20 +29,17 @@ const Wrapper = styled.styled.div `
     object-fit: cover;
   }
 
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-const MeetingInformation = styled.styled.div `
+  ${({$sx:e})=>e||""};
+`,MeetingInformation=styled.styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 16px;
   height: 128px;
-`;
-const Figure = styled.styled.figure `
+`,Figure=styled.styled.figure`
   position: relative;
   margin: 0;
-`;
-const OverlayBottomContainer = styled.styled.div `
+`,OverlayBottomContainer=styled.styled.div`
   position: absolute;
   right: 0;
   bottom: 0;
@@ -138,8 +47,7 @@ const OverlayBottomContainer = styled.styled.div `
   opacity: 0;
   display: flex;
   gap: 8px;
-`;
-const OverlayTopContainer = styled.styled.div `
+`,OverlayTopContainer=styled.styled.div`
   position: absolute;
   right: 0;
   top: 0;
@@ -147,6 +55,4 @@ const OverlayTopContainer = styled.styled.div `
   opacity: 0;
   display: flex;
   gap: 8px;
-`;
-
-exports.MeetingCard = MeetingCard;
+`;exports.MeetingCard=MeetingCard;

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

@@ -1,33 +1,5 @@
 "use client";
-'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 `
+"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`
   width: 312px;
   height: 400px;
   display: block;
@@ -43,8 +15,7 @@ const Wrapper = styled.styled.div `
     border-radius: 16px;
     object-fit: cover;
   }
-`;
-const Shadow = styled.styled.div `
+`,Shadow=styled.styled.div`
   border-radius: 16px;
   position: absolute;
   top: 0px;
@@ -54,8 +25,7 @@ const Shadow = styled.styled.div `
   height: 100%;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66.67%, #000 98.25%),
     transparent 50% / cover no-repeat;
-`;
-const Person = styled.styled.figure `
+`,Person=styled.styled.figure`
   position: relative;
   width: 100%;
   height: 100%;
@@ -69,15 +39,12 @@ const Person = styled.styled.figure `
     display: initial;
   }
 
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-const Figcaption = styled.styled.figcaption `
+  ${({$sx:e})=>e||""};
+`,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,56 +1,18 @@
 "use client";
-'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: `
+"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:`
           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: false, type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() })),
-        label && (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:!1,type:"outlined",size:"small",className:"icon"}),onClick:e=>e.preventDefault()}),l&&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": true, "$textClampLines": 1 }, label)))),
-        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:!0,$textClampLines:1},l))),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": 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 `
+        `},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`
   position: relative;
   z-index: 1;
   margin: 0px;
@@ -69,8 +31,7 @@ const Price = styled.styled.figure `
       display: flex;
     }
   }
-`;
-const Label = styled.styled.div `
+`,Label=styled.styled.div`
   max-width: calc(100% - 32px);
   box-sizing: border-box;
   padding: 8px 24px;
@@ -78,12 +39,9 @@ const Label = styled.styled.div `
   background-color: var(--color-grey-10);
   box-shadow: var(--elevation-2);
   border-bottom: 1px solid var(--color-grey-9);
-`;
-const Divider = styled.styled.div `
+`,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,22 +1,5 @@
 "use client";
-'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 `
+"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`
   position: relative;
   display: block;
   text-decoration: none;
@@ -25,19 +8,15 @@ const Wrapper = styled.styled.div `
   border-radius: 16px;
   background-color: var(--color-white);
 
-  ${({ $isLink }) => $isLink
-    ? `
+  ${({$isLink:e})=>e?`
     &:hover {
       border: 1px solid var(--color-primary-blue-3);
-    }`
-    : ''}
+    }`:""}
 
   img {
     border-radius: 16px 16px 0px 0px;
     object-fit: cover;
   }
 
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-
-exports.RegularCard = RegularCard;
+  ${({$sx:e})=>e||""};
+`;exports.RegularCard=RegularCard;

package/dist/components/card/styles.js

@@ -1,16 +1,9 @@
 "use client";
-'use strict';
-
-var styled = require('styled-components');
-var box = require('../atoms/box/box.js');
-
-const PurchaseTextWrapper = styled.styled(box.Box) `
+"use strict";var styled=require("styled-components"),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;