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

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

@@ -1,54 +1,5 @@
-'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: `
+"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:`
                   padding: 8px;
                   border-radius: 4px;
                   cursor: pointer;
@@ -57,8 +8,7 @@ export const FeatureCard = ({ content = '', editable, href, image, onDelete, onS
                   &:hover {
                     background-color: var(--color-grey-10);
                   }
-                ` }),
-                    React.createElement(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;
@@ -67,8 +17,7 @@ export const FeatureCard = ({ content = '', editable, href, image, onDelete, onS
                   &:hover {
                     background-color: var(--color-grey-10);
                   }
-                ` }),
-                    onDelete && (React.createElement(Trash, { onClick: onDelete, sx: `
+                `}),o&&React__default.default.createElement(trash.Trash,{onClick:o,sx:`
                     padding: 8px;
                     border-radius: 4px;
                     cursor: pointer;
@@ -77,12 +26,9 @@ export const FeatureCard = ({ content = '', editable, href, image, onDelete, onS
                     &:hover {
                       background-color: var(--color-grey-10);
                     }
-                  ` }))))))));
-};
-const Wrapper = styled.div `
+                  `})))))},Wrapper=styled.styled.div`
   text-decoration: none;
-`;
-const Figure = styled.figure `
+`,Figure=styled.styled.figure`
   max-width: min-content;
   box-sizing: border-box;
   display: flex;
@@ -95,9 +41,7 @@ const Figure = 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;
@@ -139,15 +83,12 @@ const Figure = 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.figcaption `
+  ${({$sx:e})=>e||""};
+`,Title=styled.styled.figcaption`
   position: relative;
   padding-right: 32px;
   color: var(--color-grey-2);
@@ -157,8 +98,7 @@ const Title = styled.figcaption `
   line-height: 26px;
   letter-spacing: -0.252px;
   user-select: none;
-`;
-const Content = styled.figcaption `
+`,Content=styled.styled.figcaption`
   font-size: 14px;
   font-family: var(--font-inter);
   font-weight: 400;
@@ -170,8 +110,7 @@ const Content = styled.figcaption `
   line-clamp: 1;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
-`;
-const EditTitle = styled.input `
+`,EditTitle=styled.styled.input`
   width: calc(100% - 24px);
   padding: 12px;
   background-color: var(--color-white);
@@ -183,12 +122,11 @@ const EditTitle = styled.input `
   border: none;
   border-radius: 8px;
   outline: none;
-`;
-const EditContent = 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;

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

@@ -1,85 +1,5 @@
-'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 `
+"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`
   min-width: 312px;
   position: relative;
   display: block;
@@ -91,7 +11,7 @@ const Wrapper = 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;
@@ -109,20 +29,17 @@ const Wrapper = styled.div `
     object-fit: cover;
   }
 
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-const MeetingInformation = styled.div `
+  ${({$sx:e})=>e||""};
+`,MeetingInformation=styled.styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 16px;
   height: 128px;
-`;
-const Figure = styled.figure `
+`,Figure=styled.styled.figure`
   position: relative;
   margin: 0;
-`;
-const OverlayBottomContainer = styled.div `
+`,OverlayBottomContainer=styled.styled.div`
   position: absolute;
   right: 0;
   bottom: 0;
@@ -130,8 +47,7 @@ const OverlayBottomContainer = styled.div `
   opacity: 0;
   display: flex;
   gap: 8px;
-`;
-const OverlayTopContainer = styled.div `
+`,OverlayTopContainer=styled.styled.div`
   position: absolute;
   right: 0;
   top: 0;
@@ -139,4 +55,4 @@ const OverlayTopContainer = styled.div `
   opacity: 0;
   display: flex;
   gap: 8px;
-`;
+`;exports.MeetingCard=MeetingCard;

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

@@ -1,32 +1,11 @@
-'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 `
+"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,{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: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`
   display: flex;
   flex-direction: column;
   &:hover > div {
     display: initial;
   }
-`;
-const Wrapper = styled.div `
+`,Wrapper=styled.styled.div`
   width: 312px;
   height: 400px;
   display: block;
@@ -42,8 +21,7 @@ const Wrapper = styled.div `
     border-radius: 16px;
     object-fit: cover;
   }
-`;
-const Person = styled.figure `
+`,Person=styled.styled.figure`
   position: relative;
   width: 100%;
   height: 100%;
@@ -53,9 +31,8 @@ const Person = styled.figure `
   justify-content: flex-end;
   flex-direction: column;
 
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-const Figcaption = styled.figcaption `
+  ${({$sx:e})=>e||""};
+`,Figcaption=styled.styled.figcaption`
   position: relative;
   width: 100%;
   height: auto;
@@ -73,4 +50,4 @@ const Figcaption = styled.figcaption `
   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/price.js

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

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

@@ -1,14 +1,5 @@
-'use client';
-import React from 'react';
-import Image from 'next/image';
-import { styled } from 'styled-components';
-import { Box } from '../../../components/atoms/box/box';
-export const RegularCard = ({ children, href, image, sx, }) => {
-    return (React.createElement(Wrapper, { "$isLink": !!href, "$sx": sx, as: href ? 'a' : 'div', href: href },
-        React.createElement(Image, { alt: "", height: 352, quality: 100, src: image, width: 352 }),
-        React.createElement(Box, { "$dir": "column", "$padding": 24 }, children)));
-};
-const Wrapper = styled.div `
+"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`
   position: relative;
   display: block;
   text-decoration: none;
@@ -17,17 +8,15 @@ const Wrapper = 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 : '')};
-`;
+  ${({$sx:e})=>e||""};
+`;exports.RegularCard=RegularCard;

package/dist/components/card/styles.js

@@ -1,11 +1,9 @@
-'use client';
-import { styled } from 'styled-components';
-import { Box } from '../../components/atoms/box/box';
-export const PurchaseTextWrapper = styled(Box) `
+"use client";
+"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;

package/dist/components/card/video/video.js

@@ -1,40 +1,5 @@
-'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 VideoEpisodeCard = ({ 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: 213, quality: 100, src: image, width: 379 }),
-            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: "max-width: 60%;" },
-                        React.createElement(H, { "$color": "grey-2", "$textClampLines": 1, "$semiBold": true, "$fontSize": hasLogo ? 18 : 16 }, title),
-                        React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle)),
-                    supportLabel && (React.createElement(P, { className: "not-hover", "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;" }, supportLabel))),
-                React.createElement(P, { "$color": "grey-5", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 4, className: "hidden" }, 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 `
+"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 VideoEpisodeCard=({actions:e,actionDropdown:t,content:a,cta:r,href:l,image:i,logo:o,numRating:d,purchaseText:n,rating:p,subtitle:s,supportLabel:c,sx:u,title:f})=>{var g=!!o;return React__default.default.createElement(Wrapper,{$sx:u,href:l,$hasPurchaseText:!!n},React__default.default.createElement(Figure,null,t&&React__default.default.createElement(DropdownWrapper,null,t),!!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:213,quality:100,src:i,width:379}),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:"max-width: 60%;"},React__default.default.createElement(heading.H,{$color:"grey-2",$textClampLines:1,$semiBold:!0,$fontSize:g?18:16},f),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16},s)),c&&React__default.default.createElement(paragraph.P,{className:"not-hover",$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"},c)),React__default.default.createElement(paragraph.P,{$color:"grey-5",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:4,className:"hidden"},a),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`
   cursor: pointer;
   display: block;
   position: relative;
@@ -48,9 +13,7 @@ const Wrapper = styled.a `
   figure {
     transition: width 0.3s;
     width: 379px;
-    ${({ $hasPurchaseText }) => $hasPurchaseText
-    ? 'background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 25.1px, rgba(0, 0, 0, 0.00) 56px);'
-    : ''}
+    ${({$hasPurchaseText:e})=>e?"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);
@@ -99,9 +62,8 @@ const Wrapper = styled.a `
     }
   }
 
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-const Figure = styled.figure `
+  ${({$sx:e})=>e||""};
+`,Figure=styled.styled.figure`
   max-width: 410px;
   width: max-content;
   margin: 0px;
@@ -116,17 +78,15 @@ const Figure = styled.figure `
     height: 225px;
     border-radius: 16px;
   }
-`;
-const Figcaption = styled.figcaption `
+`,Figcaption=styled.styled.figcaption`
   display: flex;
   flex-flow: column nowrap;
   gap: 8px;
   padding: 8px;
   position: relative;
   width: 100%;
-`;
-const DropdownWrapper = styled.div `
+`,DropdownWrapper=styled.styled.div`
   position: absolute;
   top: 8px;
   right: 8px;
-`;
+`;exports.VideoEpisodeCard=VideoEpisodeCard;