@soul-refiner/design-system 2.0.0-alpha.27 → 2.0.0-alpha.28

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

@@ -8,18 +8,23 @@ var box = require('../../atoms/box/box.js');
 var heading = require('../../atoms/typography/heading.js');
 var paragraph = require('../../atoms/typography/paragraph.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 ActionCard = ({ actions, content, href, image, logo, subtitle, sx, title, }) => {
     const isAnchor = !!href;
-    return (React.createElement(Wrapper, { as: isAnchor ? 'a' : 'div', href: href },
-        React.createElement(Action, { "$backgroundImage": image, "$sx": sx },
-            React.createElement(ImgWrapper, null,
-                React.createElement(Image, { alt: "", quality: 100, src: image, fill: true })),
-            React.createElement(Figcaption, null,
-                React.createElement(LogoWrapper, null, logo),
-                React.createElement(heading.H, { as: "span", "$mediumBold": true, "$color": "grey-2", "$fontSize": 18, "$lineHeight": 26 }, title),
-                React.createElement(paragraph.P, { as: "span", "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle),
-                React.createElement(paragraph.P, { as: "span", "$color": "grey-3", "$fontSize": 14, "$lineHeight": 20, "$textAlign": "center", "$textClampLines": 3, sx: "margin-top: 12px;" }, content),
-                React.createElement(box.Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: auto; width: 100%;" }, React.Children.toArray(actions))))));
+    return (React__default.default.createElement(Wrapper, { as: isAnchor ? 'a' : 'div', href: href },
+        React__default.default.createElement(Action, { "$backgroundImage": image, "$sx": sx },
+            React__default.default.createElement(ImgWrapper, null,
+                React__default.default.createElement(Image__default.default, { alt: "", quality: 100, src: image, fill: true })),
+            React__default.default.createElement(Figcaption, null,
+                React__default.default.createElement(LogoWrapper, null, logo),
+                React__default.default.createElement(heading.H, { as: "span", "$mediumBold": true, "$color": "grey-2", "$fontSize": 18, "$lineHeight": 26 }, title),
+                React__default.default.createElement(paragraph.P, { as: "span", "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle),
+                React__default.default.createElement(paragraph.P, { as: "span", "$color": "grey-3", "$fontSize": 14, "$lineHeight": 20, "$textAlign": "center", "$textClampLines": 3, sx: "margin-top: 12px;" }, content),
+                React__default.default.createElement(box.Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: auto; width: 100%;" }, React__default.default.Children.toArray(actions))))));
 };
 const Wrapper = styled.styled.div `
   text-decoration: none;

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

@@ -11,31 +11,36 @@ var rate = require('../../actions/rate/rate.js');
 var cart_filled = require('../../../icons/shopping/cart_filled.js');
 var styles = require('../styles.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 AudioEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, purchaseText, rating, subtitle, supportLabel, sx, title, }) => {
     const hasLogo = !!logo;
-    return (React.createElement(Wrapper, { "$sx": sx, href: href, "$hasPurchaseText": !!purchaseText },
-        React.createElement(Figure, null,
-            actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
-            !!purchaseText && (React.createElement(styles.PurchaseTextWrapper, { className: "not-hover" },
-                React.createElement(cart_filled.CartFilled, { color: "yellow-5", size: 24 }),
-                React.createElement(paragraph.P, { "$bold": true, "$color": "white" }, purchaseText))),
-            React.createElement(Image, { alt: "", className: "thumbnail", height: 228, quality: 100, src: image, width: 228 }),
-            React.createElement(Figcaption, null,
-                React.createElement(box.Box, { "$display": "block", className: "hidden" }, cta),
-                React.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 16 },
+    return (React__default.default.createElement(Wrapper, { "$sx": sx, href: href, "$hasPurchaseText": !!purchaseText },
+        React__default.default.createElement(Figure, null,
+            actionDropdown && React__default.default.createElement(DropdownWrapper, null, actionDropdown),
+            !!purchaseText && (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": true, "$color": "white" }, purchaseText))),
+            React__default.default.createElement(Image__default.default, { alt: "", className: "thumbnail", height: 228, quality: 100, src: image, width: 228 }),
+            React__default.default.createElement(Figcaption, null,
+                React__default.default.createElement(box.Box, { "$display": "block", className: "hidden" }, cta),
+                React__default.default.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 16 },
                     logo,
-                    React.createElement(box.Box, { "$dir": "column", "$gap": 4 },
-                        React.createElement(heading.H, { "$color": "grey-2", "$semiBold": true, "$fontSize": hasLogo ? 18 : 16 }, title),
-                        React.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle)),
-                    supportLabel && (React.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;" }, supportLabel))),
-                React.createElement(paragraph.P, { "$color": "grey-5", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 6, className: "hidden inline" }, content),
-                React.createElement(box.Box, { className: "hidden", "$align": "center", "$dir": "row" },
-                    React.createElement(rate.Rate, { isRateable: false, percent: rating, size: "small" }),
-                    React.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin: 0px auto 0px 4px;" },
+                    React__default.default.createElement(box.Box, { "$dir": "column", "$gap": 4 },
+                        React__default.default.createElement(heading.H, { "$color": "grey-2", "$semiBold": true, "$fontSize": hasLogo ? 18 : 16 }, title),
+                        React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle)),
+                    supportLabel && (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;" }, supportLabel))),
+                React__default.default.createElement(paragraph.P, { "$color": "grey-5", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 6, className: "hidden inline" }, content),
+                React__default.default.createElement(box.Box, { className: "hidden", "$align": "center", "$dir": "row" },
+                    React__default.default.createElement(rate.Rate, { isRateable: false, percent: rating, size: "small" }),
+                    React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin: 0px auto 0px 4px;" },
                         "(",
                         numRating,
                         ")"),
-                    React.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 8 }, React.Children.toArray(actions)))))));
+                    React__default.default.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 8 }, React__default.default.Children.toArray(actions)))))));
 };
 const Wrapper = styled.styled.a `
   cursor: pointer;

package/dist/components/card/card.js

@@ -12,17 +12,21 @@ 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.createElement(action.ActionCard, { ...rest }),
-        'audio-episode': React.createElement(audio.AudioEpisodeCard, { ...rest }),
-        feature: React.createElement(feature.FeatureCard, { ...rest }),
-        person: React.createElement(person.PersonCard, { ...rest }),
-        price: React.createElement(price.PriceCard, { ...rest }),
-        regular: React.createElement(regular.RegularCard, { ...rest }),
-        'video-episode': React.createElement(video.VideoEpisodeCard, { ...rest }),
-        'written-episode': (React.createElement(written.WrittenEpisodeCard, { ...rest })),
-        meeting: React.createElement(meeting.MeetingCard, { ...rest }),
+        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];
 };

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

@@ -13,10 +13,15 @@ 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.useState(false);
-    const [editingTitle, setTitle] = React.useState(() => title);
-    const [editingContent, setContent] = React.useState(() => content);
+    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);
@@ -35,23 +40,23 @@ const FeatureCard = ({ content = '', editable, href, image, onDelete, onSave, sx
     };
     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,
+    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.createElement("figure", null,
-                    React.createElement(Content, null, editingContent)),
-                showEditIcon && (React.createElement(pencil.Pencil, { className: "edit", onClick: handleSetEditing })),
-                editable && uploadModal && (React.createElement(modal.Modal, null,
-                    React.createElement(modal.Modal.Trigger, null,
-                        React.createElement(button.Button, { icon: React.createElement(camera.Camera, null), type: "outlined", size: "small", sx: "position: absolute; right: 8px; top: -72px;" }, "Edit")),
-                    React.createElement(modal.Modal.Content, null, uploadModal))))),
-            editing && (React.createElement(box.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.Box, { "$gap": 8 },
-                    React.createElement(checkmark.Checkmark, { onClick: handleSave, sx: `
+                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;
@@ -61,7 +66,7 @@ const FeatureCard = ({ content = '', editable, href, image, onDelete, onSave, sx
                     background-color: var(--color-grey-10);
                   }
                 ` }),
-                    React.createElement(close.Close, { onClick: handleCancelEdit, sx: `
+                    React__default.default.createElement(close.Close, { onClick: handleCancelEdit, sx: `
                   padding: 8px;
                   border-radius: 4px;
                   cursor: pointer;
@@ -71,7 +76,7 @@ const FeatureCard = ({ content = '', editable, href, image, onDelete, onSave, sx
                     background-color: var(--color-grey-10);
                   }
                 ` }),
-                    onDelete && (React.createElement(trash.Trash, { onClick: onDelete, sx: `
+                    onDelete && (React__default.default.createElement(trash.Trash, { onClick: onDelete, sx: `
                     padding: 8px;
                     border-radius: 4px;
                     cursor: pointer;

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

@@ -19,6 +19,11 @@ 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";
@@ -31,7 +36,7 @@ const MeetingCard = ({ href, image, sx, title, actions, course, startDate, endDa
             value: 'interested',
             label: 'Interested',
             onClick: handleInterestedOnClick,
-            icon: React.createElement(star_filled.StarFilled, { color: "yellow-5" }),
+            icon: React__default.default.createElement(star_filled.StarFilled, { color: "yellow-5" }),
             color: rsvp === RSVP.INTERESTED ? 'primary-blue-2' : undefined,
         });
     !!handleNotInterestedOnClick &&
@@ -39,7 +44,7 @@ const MeetingCard = ({ href, image, sx, title, actions, course, startDate, endDa
             value: 'notInterested',
             label: 'Not Interested',
             onClick: handleNotInterestedOnClick,
-            icon: React.createElement(star_filled.StarFilled, { color: "red-4" }),
+            icon: React__default.default.createElement(star_filled.StarFilled, { color: "red-4" }),
             color: rsvp === RSVP.NOT_INTERESTED ? 'primary-blue-2' : undefined,
         });
     !!handleVisibleToConnectionsOnClick &&
@@ -48,39 +53,39 @@ const MeetingCard = ({ href, image, sx, title, actions, course, startDate, endDa
             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.Dropdown, { hasArrow: true, maintainState: false, options: dotsActions, trigger: React.createElement(button.Button, { icon: React.createElement(ellipsis_horizontal.EllipsisHorizontal, null), showChevron: false, type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() }))),
-            React.createElement(OverlayBottomContainer, { id: "overlayBottom" },
-                shareModal && (React.createElement(modal.Modal, null,
-                    React.createElement(modal.Modal.Trigger, null,
-                        React.createElement(button.Button, { icon: React.createElement(forward_bold.ForwardBold, null), type: "outlined", size: "small", onClick: (e) => e.preventDefault(), className: "icon" })),
-                    React.createElement(modal.Modal.Content, { onClick: (e) => e.preventDefault() }, shareModal))),
-                !!secondaryActions.length && (React.createElement(dropdown.Dropdown, { open: "left", offset: [40, 10], maintainState: false, options: secondaryActions, trigger: React.createElement(button.Button, { icon: (rsvp === RSVP.INTERESTED && (React.createElement(star_filled.StarFilled, { sx: "color: var(--color-yellow-5);" }))) ||
-                            (rsvp === RSVP.NOT_INTERESTED && (React.createElement(star_filled.StarFilled, { sx: "color: var(--color-red-4);" }))) || React.createElement(star.Star, null), type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() })))),
-        React.createElement(box.Box, { "$dir": "column", "$padding": 24 },
-            React.createElement(heading.H.Eight, { "$textAlign": "center", "$color": "grey-2", "$mediumBold": true }, title),
-            React.createElement(MeetingInformation, null,
-                course && (React.createElement(box.Box, { "$align": "center", "$gap": 20 },
-                    React.createElement(graduation_cap.GraduationCap, { color: "grey-6" }),
-                    React.createElement(paragraph.P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 }, course))),
-                React.createElement(box.Box, { "$align": "center", "$gap": 20 },
-                    React.createElement(calendar.Calendar, { color: "grey-6" }),
-                    React.createElement(paragraph.P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 },
+    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.createElement(box.Box, { "$align": "center", "$gap": 20 },
-                    React.createElement(clock.Clock, { color: "grey-6" }),
-                    React.createElement(paragraph.P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 },
+                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.createElement(box.Box, { "$align": "center", "$gap": 20, sx: "max-width: 264px;" },
-                    React.createElement(pin.Pin, { color: "grey-6" }),
-                    React.createElement(paragraph.P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 }, location))),
-            React.createElement(box.Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 32px; width: 100%;" }, React.Children.toArray(actions)))));
+                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;

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

@@ -11,16 +11,21 @@ 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.createElement(Wrapper, { "$image": image, as: href ? 'a' : 'div', href: href },
-        React.createElement(Person, { "$sx": sx },
-            dotsActions && !!dotsActions.length && (React.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.createElement(button.Button, { className: "icon", icon: React.createElement(ellipsis_horizontal.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(Shadow, null),
-            React.createElement(Figcaption, null,
-                React.createElement(heading.H, { as: "span", "$bold": true, "$color": "white", "$fontSize": 24, "$lineHeight": 36 }, title),
-                React.createElement(paragraph.P, { as: "span", "$color": "white", "$fontSize": 14, "$lineHeight": 20 }, subtitle),
-                actions && (React.createElement(box.Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 16px;" }, React.Children.toArray(actions)))))));
+    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;

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

@@ -11,40 +11,44 @@ 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.useId();
-    return (React.createElement(Price, null,
-        dotsActions && !!dotsActions.length && (React.createElement(dropdown.Dropdown, { className: "dot-dropdown", hasArrow: true, maintainState: false, offset: [0, 32], options: dotsActions, sx: `
+    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.createElement(button.Button, { icon: React.createElement(ellipsis_horizontal.EllipsisHorizontal, null), showChevron: false, type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() })),
-        label && (React.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.createElement(Label, null,
-                React.createElement(paragraph.P, { as: "span", "$fontSize": 12, "$lineHeight": 16, "$mediumBold": true, "$textClampLines": 1 }, label)))),
-        React.createElement(box.Box, { "$align": "stretch", "$display": "flex", "$dir": "column", "$gap": 24, sx: `
+            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.createElement(heading.H, { as: "h6", "$fontSize": 24, "$lineHeight": 36, "$semiBold": true, "$textAlign": "center" }, title),
-            React.createElement(box.Box, { "$dir": "column" },
-                React.createElement(heading.H, { as: "p", "$bold": true, "$fontSize": 32, "$lineHeight": 48, "$textClampLines": 5, "$textAlign": "center" }, price),
-                React.createElement(paragraph.P, { as: "span", "$color": "grey-4", "$textAlign": "center" }, "/month")),
+            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.createElement(box.Box, { sx: "padding: 16px 24px; position: relative;", "$display": "flex", "$dir": "column" },
-            React.createElement(paragraph.P, { sx: "padding: 16px 0px;" }, content),
-            React.createElement(Divider, null),
-            React.createElement(box.Box, { sx: "padding: 16px 0px;", "$dir": "column", "$gap": 8 },
-                React.createElement(paragraph.P, { "$color": "grey-2", "$mediumBold": true }, featureTitle),
-                features.map((item, index) => (React.createElement(box.Box, { key: id + index.toString(36), "$align": "center", "$gap": 12 },
-                    React.createElement(checkmark.Checkmark, { color: "green-5", sx: "padding: 2px; border-radius: 50%; background-color: var(--color-green-9);" }),
-                    React.createElement(paragraph.P, { "$fontSize": 14, "$lineHeight": 20 }, item))))))));
+        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;

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

@@ -6,10 +6,15 @@ 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.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.Box, { "$dir": "column", "$padding": 24 }, children)));
+    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;

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

@@ -11,31 +11,36 @@ var rate = require('../../actions/rate/rate.js');
 var cart_filled = require('../../../icons/shopping/cart_filled.js');
 var styles = require('../styles.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 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(styles.PurchaseTextWrapper, { className: "not-hover" },
-                React.createElement(cart_filled.CartFilled, { color: "yellow-5", size: 24 }),
-                React.createElement(paragraph.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.Box, { "$display": "block", className: "hidden" }, cta),
-                React.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 16 },
+    return (React__default.default.createElement(Wrapper, { "$sx": sx, href: href, "$hasPurchaseText": !!purchaseText },
+        React__default.default.createElement(Figure, null,
+            actionDropdown && React__default.default.createElement(DropdownWrapper, null, actionDropdown),
+            !!purchaseText && (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": true, "$color": "white" }, purchaseText))),
+            React__default.default.createElement(Image__default.default, { alt: "", className: "thumbnail", height: 213, quality: 100, src: image, width: 379 }),
+            React__default.default.createElement(Figcaption, null,
+                React__default.default.createElement(box.Box, { "$display": "block", className: "hidden" }, cta),
+                React__default.default.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 16 },
                     logo,
-                    React.createElement(box.Box, { "$dir": "column", "$gap": 4 },
-                        React.createElement(heading.H, { "$color": "grey-2", "$semiBold": true, "$fontSize": hasLogo ? 18 : 16 }, title),
-                        React.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle)),
-                    supportLabel && (React.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;" }, supportLabel))),
-                React.createElement(paragraph.P, { "$color": "grey-5", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 4, className: "hidden" }, content),
-                React.createElement(box.Box, { className: "hidden", "$align": "center", "$dir": "row" },
-                    React.createElement(rate.Rate, { isRateable: false, percent: rating, size: "small" }),
-                    React.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin: 0px auto 0px 4px;" },
+                    React__default.default.createElement(box.Box, { "$dir": "column", "$gap": 4 },
+                        React__default.default.createElement(heading.H, { "$color": "grey-2", "$semiBold": true, "$fontSize": hasLogo ? 18 : 16 }, title),
+                        React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle)),
+                    supportLabel && (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;" }, supportLabel))),
+                React__default.default.createElement(paragraph.P, { "$color": "grey-5", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 4, className: "hidden" }, content),
+                React__default.default.createElement(box.Box, { className: "hidden", "$align": "center", "$dir": "row" },
+                    React__default.default.createElement(rate.Rate, { isRateable: false, percent: rating, size: "small" }),
+                    React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin: 0px auto 0px 4px;" },
                         "(",
                         numRating,
                         ")"),
-                    React.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 8 }, React.Children.toArray(actions)))))));
+                    React__default.default.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 8 }, React__default.default.Children.toArray(actions)))))));
 };
 const Wrapper = styled.styled.a `
   cursor: pointer;

package/dist/components/card/written/written.js

@@ -11,31 +11,36 @@ var rate = require('../../actions/rate/rate.js');
 var cart_filled = require('../../../icons/shopping/cart_filled.js');
 var styles = require('../styles.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 WrittenEpisodeCard = ({ 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(styles.PurchaseTextWrapper, { className: "not-hover" },
-                React.createElement(cart_filled.CartFilled, { color: "yellow-5", size: 24, sx: "flex-shrink: 0;" }),
-                React.createElement(paragraph.P, { "$bold": true, "$color": "white" }, purchaseText))),
-            React.createElement(Image, { alt: "", className: "thumbnail", height: 228, quality: 100, src: image, width: 176 }),
-            React.createElement(Figcaption, null,
-                React.createElement(box.Box, { "$display": "block", className: "hidden" }, cta),
-                React.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 16 },
+    return (React__default.default.createElement(Wrapper, { "$sx": sx, href: href, "$hasPurchaseText": !!purchaseText },
+        React__default.default.createElement(Figure, null,
+            actionDropdown && React__default.default.createElement(DropdownWrapper, null, actionDropdown),
+            !!purchaseText && (React__default.default.createElement(styles.PurchaseTextWrapper, { className: "not-hover" },
+                React__default.default.createElement(cart_filled.CartFilled, { color: "yellow-5", size: 24, sx: "flex-shrink: 0;" }),
+                React__default.default.createElement(paragraph.P, { "$bold": true, "$color": "white" }, purchaseText))),
+            React__default.default.createElement(Image__default.default, { alt: "", className: "thumbnail", height: 228, quality: 100, src: image, width: 176 }),
+            React__default.default.createElement(Figcaption, null,
+                React__default.default.createElement(box.Box, { "$display": "block", className: "hidden" }, cta),
+                React__default.default.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 16 },
                     logo,
-                    React.createElement(box.Box, { "$dir": "column", "$gap": 4 },
-                        React.createElement(heading.H, { "$color": "grey-2", "$semiBold": true, "$fontSize": hasLogo ? 18 : 16 }, title),
-                        React.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle)),
-                    supportLabel && (React.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;" }, supportLabel))),
-                React.createElement(paragraph.P, { "$color": "grey-5", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 6, className: "hidden inline" }, content),
-                React.createElement(box.Box, { className: "hidden", "$align": "center", "$dir": "row" },
-                    React.createElement(rate.Rate, { isRateable: false, percent: rating, size: "small" }),
-                    React.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin: 0px auto 0px 4px;" },
+                    React__default.default.createElement(box.Box, { "$dir": "column", "$gap": 4 },
+                        React__default.default.createElement(heading.H, { "$color": "grey-2", "$semiBold": true, "$fontSize": hasLogo ? 18 : 16 }, title),
+                        React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle)),
+                    supportLabel && (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;" }, supportLabel))),
+                React__default.default.createElement(paragraph.P, { "$color": "grey-5", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 6, className: "hidden inline" }, content),
+                React__default.default.createElement(box.Box, { className: "hidden", "$align": "center", "$dir": "row" },
+                    React__default.default.createElement(rate.Rate, { isRateable: false, percent: rating, size: "small" }),
+                    React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin: 0px auto 0px 4px;" },
                         "(",
                         numRating,
                         ")"),
-                    React.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 8 }, React.Children.toArray(actions)))))));
+                    React__default.default.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 8 }, React__default.default.Children.toArray(actions)))))));
 };
 const Wrapper = styled.styled.a `
   cursor: pointer;