@soul-refiner/design-system 1.1.7 → 1.1.8

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

@@ -7,7 +7,7 @@ export const ActionCard = ({ actions, content, href, image, logo, subtitle, sx,
     const isAnchor = !!href;
     return (React.createElement(Wrapper, { as: isAnchor ? 'a' : 'div', href: href },
         React.createElement(Action, { "$backgroundImage": image, "$sx": sx },
-            React.createElement(Image, { alt: "", height: 160, src: image, width: 310 }),
+            React.createElement(Image, { alt: "", height: 160, quality: 100, src: image, width: 310 }),
             React.createElement(Figcaption, null,
                 React.createElement(LogoWrapper, null, logo),
                 React.createElement(H, { as: "span", "$mediumBold": true, "$color": "grey-2", "$fontSize": 18, "$lineHeight": 26 }, title),

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

@@ -8,7 +8,7 @@ export const AudioEpisodeCard = ({ actions, actionDropdown, content, cta, href,
     return (React.createElement(Wrapper, { "$sx": sx, href: href },
         React.createElement(Figure, null,
             actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
-            React.createElement(Image, { alt: "", className: "thumbnail", height: 228, src: image, width: 228 }),
+            React.createElement(Image, { alt: "", className: "thumbnail", height: 228, quality: 100, src: image, width: 228 }),
             React.createElement(Figcaption, null,
                 React.createElement(Box, { "$display": "block", className: "hidden" }, cta),
                 React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16 },

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

@@ -28,7 +28,7 @@ export const FeatureCard = ({ content = '', editable, href, image, onDelete, onS
     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, src: image, width: 352 }),
+            React.createElement(Image, { alt: title, height: 352, quality: 100, src: image, width: 352 }),
             !editing && (React.createElement(Title, null,
                 editingTitle,
                 React.createElement("figure", null,

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

@@ -35,7 +35,7 @@ export const MeetingCard = ({ href, image, sx, title, actions, course, startDate
         });
     return (React.createElement(Wrapper, { "$isLink": !!href, "$sx": sx, as: href ? 'a' : 'div', href: href },
         React.createElement(Figure, null,
-            React.createElement(Image, { alt: "", height: 160, src: image, width: 312 }),
+            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,

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

@@ -8,7 +8,7 @@ export const PersonCard = ({ actions, dotsActions, href, image, subtitle, sx, ti
     return (React.createElement(Wrapper, { "$image": image, as: href ? 'a' : 'div', href: href },
         React.createElement(Person, { "$sx": sx },
             dotsActions && !!dotsActions.length && (React.createElement(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, { className: "icon", icon: React.createElement(EllipsisHorizontal, null), onClick: (event) => event.stopPropagation(), showChevron: false, size: "small", type: "outlined" }) })),
-            React.createElement(Image, { alt: "", height: 400, src: image, width: 312 }),
+            React.createElement(Image, { alt: "", height: 400, quality: 100, src: image, width: 312 }),
             React.createElement(Shadow, null),
             React.createElement(Figcaption, null,
                 React.createElement(H, { as: "span", "$bold": true, "$color": "white", "$fontSize": 24, "$lineHeight": 36 }, title),

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

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { Box } from '../../';
 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, src: image, width: 352 }),
+        React.createElement(Image, { alt: "", height: 352, quality: 100, src: image, width: 352 }),
         React.createElement(Box, { "$dir": "column", "$padding": 24 }, children)));
 };
 const Wrapper = styled.div `

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

@@ -8,7 +8,7 @@ export const VideoEpisodeCard = ({ actions, actionDropdown, content, cta, href,
     return (React.createElement(Wrapper, { "$sx": sx, href: href },
         React.createElement(Figure, null,
             actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
-            React.createElement(Image, { alt: "", className: "thumbnail", height: 213, src: image, width: 379 }),
+            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 },

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

@@ -8,7 +8,7 @@ export const WrittenEpisodeCard = ({ actions, actionDropdown, content, cta, href
     return (React.createElement(Wrapper, { "$sx": sx, href: href },
         React.createElement(Figure, null,
             actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
-            React.createElement(Image, { alt: "", className: "thumbnail", height: 228, src: image, width: 176 }),
+            React.createElement(Image, { alt: "", className: "thumbnail", height: 228, quality: 100, src: image, width: 176 }),
             React.createElement(Figcaption, null,
                 React.createElement(Box, { "$display": "block", className: "hidden" }, cta),
                 React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16 },

package/dist/components/custom/courses_selection/courses_selection.js

@@ -55,7 +55,7 @@ export const CoursesSelection = ({ closeOnChange = true, closeOnBlur = true, dis
                     alignItems: 'center',
                     marginTop: '16px',
                 } },
-                React.createElement(Image, { src: course.imageSrc }),
+                React.createElement(StyledImage, { alt: "", height: 64, src: course.imageSrc, width: 114 }),
                 React.createElement(P, { sx: "margin-left: 16px;" }, course.name),
                 React.createElement(Close, { sx: "cursor: pointer; margin-left: auto;", onClick: () => setCourseIsSelected({
                         ...courseIsSelected,
@@ -115,7 +115,7 @@ const OptionWrapper = styled.div `
     `;
 }}
 `;
-const Image = styled.img `
+const StyledImage = styled.img `
   border-radius: 8px;
   width: 113.78px;
   height: 64px;

package/dist/components/custom/users_selection/users_selection.js

@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import Image from 'next/image';
 import styled from 'styled-components';
 import { Button, P, Search, Checkbox, Box } from '../../';
 export const UsersSelection = ({ closeOnBlur = true, disabled = false, offset = [0, 0], sx, containerSx, searchSx, users, label, title, userIsChecked, setUserIsChecked, icon, ...rest }) => {
@@ -44,7 +45,7 @@ export const UsersSelection = ({ closeOnBlur = true, disabled = false, offset =
                         [user.id]: !userIsChecked[user.id],
                     }) },
                     React.createElement(Box, { "$display": "flex", "$align": "center" },
-                        React.createElement(Image, { src: user.imageSrc }),
+                        React.createElement(StyledImage, { alt: "", height: 40, src: user.imageSrc, width: 40 }),
                         React.createElement(P, { "$color": 'grey-4', "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, user.fullName),
                         React.createElement(Checkbox, { selected: userIsChecked[user.id], sx: "margin-left: auto;" }))),
                 React.createElement(Spacer, null))))))));
@@ -102,7 +103,7 @@ const OptionWrapper = styled.div `
     `;
 }}
 `;
-const Image = styled.img `
+const StyledImage = styled(Image) `
   border-radius: 50%;
   width: 40px;
   height: 40px;

package/dist/components/iconography/avatar/avatar.js

@@ -71,7 +71,7 @@ const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, t
         ${sx}
       `, ...rest },
         React.createElement(Container, { as: as, "$size": size, href: href },
-            !displayDefault && (React.createElement(Image, { alt: "avatar image", height: size, onError: () => setDisplayDefault(true), src: image ?? '', width: size })),
+            !displayDefault && (React.createElement(Image, { alt: "avatar image", height: size, onError: () => setDisplayDefault(true), quality: 100, sizes: "96 | 72 | 64 | 56 | 48 | 40 | 36 | 32 | 24 | 16", src: image ?? '', width: size })),
             displayDefault && React.createElement(Default, null),
             React.createElement("div", null,
                 React.createElement(Icon, null))),

package/dist/components/media/video/video.js

@@ -19,7 +19,7 @@ export const Video = ({ controls = true, loop = false, muted, playsInline, src,
                     srcLang: subtitle.locale,
                 })),
             },
-        }, controls: controls, height: "100%", light: thumbnail ? (React.createElement(Image, { alt: "thumbnail for trailer", layout: "fill", priority: true, src: thumbnail, style: { objectFit: 'contain' } })) : undefined, loop: loop, muted: muted, pip: false, playsinline: playsInline, playing: true, ref: ref, style: {
+        }, controls: controls, height: "100%", light: thumbnail ? (React.createElement(Image, { alt: "thumbnail for trailer", layout: "fill", priority: true, quality: 100, src: thumbnail, style: { objectFit: 'contain' } })) : undefined, loop: loop, muted: muted, pip: false, playsinline: playsInline, playing: true, ref: ref, style: {
             backgroundColor: 'var(--color-grey-0)',
             maxHeight: 720,
             maxWidth: 1280,

package/dist/components/media/video-player/playlist-item.js

@@ -8,7 +8,7 @@ import { PlaySolid } from '../../../icons/audio_video';
 export const PlaylistItem = ({ duration, onClick, playable, progress = 0, shortDescription, thumbnail, title, }) => {
     return (React.createElement(Wrapper, { onClick: playable ? onClick : undefined, "$playable": playable },
         React.createElement(PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" }),
-        React.createElement(Image, { alt: `thumbnail for ${title}`, height: 75, src: thumbnail, width: 133 }),
+        React.createElement(Image, { alt: `thumbnail for ${title}`, height: 75, quality: 100, src: thumbnail, width: 133 }),
         React.createElement(ProgressBar, { progressPercent: progress / duration }),
         React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;" },
             React.createElement(P, { "$color": "grey-10", "$semiBold": true }, title),

package/dist/components/media/video-player/video.js

@@ -46,7 +46,7 @@ export const VideoPlayer = ({ activeIndex, pip, playable, playlist, onPipChange,
                             srcLang: subtitle.locale,
                         })),
                     },
-                }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", priority: true, style: {
+                }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", priority: true, quality: 100, style: {
                         objectFit: 'contain',
                     }, src: mediaItem.thumbnail }), progressInterval: 4000, onDisablePIP: () => onPipChange && onPipChange(false), onEnablePIP: () => onPipChange && onPipChange(true), onProgress: onProgress, onReady: handleReady, pip: pip, playIcon: playable ? (React.createElement(PlaySolid, { color: "white", size: 24, sx: "position: absolute; width: 54px; height: 54px;" })) : (React.createElement(LockCircle, { color: "white", size: 24, sx: "position: absolute; width: 54px; height: 54px;" })), playing: playable, ref: ref, style: {
                     backgroundColor: 'var(--color-grey-0)',

package/dist/components/surfaces/post/post.js

@@ -20,7 +20,7 @@ export const Post = ({ actions, author, authorActive, authorHref, authorImage, a
             React.createElement(P, { "$textClampLines": isPaywalled ? 2 : undefined }, content))),
         !!images?.length && (React.createElement(ImagesWrapper, { "$numImages": images.length, "$isPaywalled": isPaywalled },
             images.slice(0, 4).map((url, i) => (React.createElement(ImageWrapper, { key: `${componentId}${url.slice(0, 15)}${i}` },
-                React.createElement(Image, { alt: "", fill: true, src: url })))),
+                React.createElement(Image, { alt: "", fill: true, quality: 100, src: url })))),
             images.length > 4 && (React.createElement(H, { as: "p", className: "more-than", "$color": "grey-10", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true },
                 "+",
                 images.length - 4)))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {