@soul-refiner/design-system 1.5.1 → 1.6.1-alpha.1

package/dist/components/actions/button/button.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconProps } from '../../';
-type NativeProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'dangerouslySetInnerHTML' | 'onClick' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'> & {
+type NativeProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'dangerouslySetInnerHTML' | 'onClick' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver' | 'onSubmit' | 'onKeyDown'> & {
     value?: string;
 };
 type ButtonTypes = 'primary' | 'secondary' | 'outlined' | 'danger' | 'text' | 'raised' | 'special' | 'dropdown';

package/dist/components/actions/dropdown/dropdown.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn, Meta } from '@storybook/react';
+import { DropdownProps } from './dropdown';
+declare const meta: Meta;
+export declare const Default: StoryFn<DropdownProps>;
+export default meta;

package/dist/components/actions/rate/rate.js

@@ -6,6 +6,7 @@ const LG_WIDTH = 147;
 const SM_HEIGHT = 16;
 const LG_HEIGHT = 24;
 export const Rate = ({ isRateable = true, onRate, percent, size, userRating, }) => {
+    const componentId = React.useId();
     const ref = React.useRef(null);
     const [hoveredRating, setHoveredRating] = React.useState();
     const width = size === 'small' ? SM_WIDTH : LG_WIDTH;
@@ -32,15 +33,15 @@ export const Rate = ({ isRateable = true, onRate, percent, size, userRating, })
         }
     };
     return (React.createElement("div", { ref: ref },
-        React.createElement(SVG, { width: width, height: height, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, onClick: handleClick, viewBox: "0 0 98 16", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement(SVG, { "$gradientId": componentId, width: width, height: height, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, onClick: handleClick, viewBox: "0 0 98 16", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M13.1437 16L8.61569 13.5529C8.55281 13.5529 8.48992 13.4902 8.42703 13.4902C8.36414 13.4902 8.30125 13.5529 8.23837 13.5529L3.64752 15.9373C3.58463 16 3.52174 16 3.39597 16C3.33308 16 3.27019 16 3.2073 15.9373C3.14441 15.8745 3.08153 15.8118 3.08153 15.749C3.08153 15.6863 3.01864 15.6235 3.08153 15.5608L3.96196 10.4784C3.96196 10.4157 3.96196 10.3529 3.89907 10.2902C3.89907 10.2275 3.83619 10.1647 3.83619 10.102L0.125777 6.52549C0.0628883 6.46275 0 6.4 0 6.33726C0 6.21177 0 6.14902 0 6.08628C0.0628883 6.02353 0.0628883 5.96079 0.125777 5.89804C0.188665 5.83529 0.251553 5.83529 0.37733 5.83529L5.47128 5.08235C5.53417 5.08235 5.59706 5.01961 5.65995 5.01961C5.65995 4.95686 5.72283 4.89412 5.78572 4.83137L8.0497 0.25098C8.11259 0.188235 8.11259 0.12549 8.17548 0.0627451C8.23837 0.0627451 8.36414 0 8.42703 0C8.48992 0 8.55281 0.0627451 8.61569 0.0627451C8.67858 0.12549 8.74147 0.188235 8.80436 0.25098L11.0683 4.89412C11.0683 4.89412 11.1312 4.95686 11.1941 5.01961C11.257 5.01961 11.3199 5.08235 11.3828 5.08235L16.4767 5.83529C16.5396 5.83529 16.6025 5.89804 16.6654 5.89804C16.7283 5.96079 16.7912 6.02353 16.7912 6.08628C16.8541 6.14902 16.8541 6.27451 16.7912 6.33726C16.7912 6.4 16.7283 6.46275 16.7283 6.52549L13.0179 10.102C12.955 10.1647 12.8921 10.2275 12.8921 10.2902C12.8921 10.3529 12.8921 10.4157 12.8921 10.4784L13.7725 15.5608C13.7725 15.6235 13.7725 15.6863 13.7096 15.749C13.7096 15.8118 13.6468 15.8745 13.5839 15.9373C13.521 16 13.4581 16 13.3952 16C13.3323 16 13.2065 16 13.1437 16Z M33.711 16L29.1201 13.5529C29.0572 13.5529 28.9943 13.4902 28.9315 13.4902C28.8686 13.4902 28.8057 13.5529 28.7428 13.5529L24.2148 15.9373C24.1519 16 24.0262 16 23.9633 16C23.9004 16 23.8375 15.9373 23.7746 15.9373C23.7117 15.8745 23.6488 15.8118 23.6488 15.749C23.5859 15.6863 23.5859 15.6235 23.5859 15.498L24.4664 10.4157C24.4664 10.3529 24.4664 10.2902 24.4664 10.2275C24.4664 10.1647 24.4035 10.102 24.3406 10.102L20.6931 6.46275C20.6302 6.4 20.5673 6.33725 20.5673 6.27451C20.5673 6.21176 20.5673 6.14902 20.5673 6.08628C20.5673 6.02353 20.6302 5.96079 20.6931 5.89804C20.756 5.83529 20.8189 5.83529 20.8818 5.77255L26.0386 5.08235C26.1015 5.01961 26.1644 5.01961 26.1644 4.95686C26.2273 4.95686 26.2901 4.89412 26.2901 4.83137L28.617 0.25098C28.617 0.12549 28.6799 0.12549 28.7428 0.0627451C28.8057 -7.45058e-09 28.8686 0 28.9315 0C29.0572 0 29.1201 -7.45058e-09 29.183 0.0627451C29.2459 0.12549 29.3088 0.12549 29.3088 0.25098L31.6356 4.83137C31.6356 4.89412 31.6985 4.95686 31.7614 5.01961C31.7614 5.01961 31.8243 5.08235 31.8872 5.08235L37.044 5.83529C37.1069 5.83529 37.1698 5.83529 37.2327 5.89804C37.2956 5.96079 37.2956 6.02353 37.3585 6.08628C37.3585 6.14902 37.3585 6.21176 37.3585 6.27451C37.3585 6.4 37.2956 6.46275 37.2327 6.52549L33.5223 10.102C33.5223 10.1647 33.4594 10.1647 33.4594 10.2275C33.3965 10.2902 33.3965 10.3529 33.4594 10.4784L34.277 15.5608C34.3398 15.6235 34.277 15.6863 34.277 15.749C34.277 15.8118 34.2141 15.8745 34.1512 15.9373C34.0883 16 34.0254 16 33.9625 16C33.8367 16 33.7738 16 33.711 16Z M53.5187 16L48.9279 13.5529C48.865 13.5529 48.8021 13.4902 48.7392 13.4902C48.6763 13.4902 48.6134 13.5529 48.5505 13.5529L44.0226 15.9373C43.9597 16 43.8968 16 43.8339 16C43.7081 16 43.6452 16 43.5824 15.9373C43.5195 15.8745 43.5195 15.8118 43.4566 15.749C43.4566 15.6863 43.4566 15.6235 43.4566 15.5608L44.337 10.4784C44.337 10.4157 44.337 10.3529 44.2741 10.2902C44.2741 10.2275 44.2741 10.1647 44.2112 10.102L40.5008 6.52549C40.4379 6.46275 40.4379 6.4 40.375 6.33726C40.375 6.21177 40.375 6.14902 40.375 6.08628C40.4379 6.02353 40.4379 5.96079 40.5008 5.89804C40.5637 5.83529 40.6266 5.83529 40.7524 5.83529L45.8463 5.08235C45.9092 5.08235 45.9721 5.01961 46.035 5.01961C46.0979 4.95686 46.0979 4.89412 46.1608 4.83137L48.4248 0.25098C48.4876 0.188235 48.4876 0.12549 48.5505 0.0627451C48.6134 0.0627451 48.7392 0 48.8021 0C48.865 0 48.9279 0.0627451 48.9907 0.0627451C49.0536 0.12549 49.1165 0.188235 49.1794 0.25098L51.4434 4.89412C51.4434 4.89412 51.5063 4.95686 51.5692 5.01961C51.6321 5.01961 51.6949 5.08235 51.7578 5.08235L56.8518 5.83529C56.9147 5.83529 56.9776 5.89804 57.0404 5.89804C57.1033 5.96079 57.1662 6.02353 57.1662 6.08628C57.1662 6.14902 57.2291 6.27451 57.1662 6.33726C57.1662 6.4 57.1033 6.46275 57.1033 6.52549L53.3929 10.102C53.33 10.1647 53.2671 10.2275 53.2671 10.2902C53.2671 10.3529 53.2671 10.4157 53.2671 10.4784L54.0847 15.5608C54.0847 15.6235 54.0847 15.6863 54.0847 15.749C54.0218 15.8118 53.9589 15.8745 53.896 15.9373C53.896 15.9373 53.7703 16 53.7074 16C53.6445 16 53.5816 16 53.5187 16Z M74.0858 16L69.4949 13.5529C69.4321 13.5529 69.3692 13.4902 69.3063 13.4902C69.2434 13.4902 69.1805 13.5529 69.1176 13.5529L64.5268 15.9373C64.4639 16 64.401 16 64.3381 16C64.2752 16 64.1494 15.9373 64.0865 15.9373C64.0865 15.8745 64.0237 15.8118 63.9608 15.749C63.9608 15.6863 63.9608 15.6235 63.9608 15.498L64.8412 10.4157C64.8412 10.3529 64.8412 10.2902 64.8412 10.2275C64.7783 10.1647 64.7783 10.102 64.7154 10.102L61.005 6.52549C60.9421 6.46275 60.9421 6.4 60.8792 6.33726C60.8792 6.21177 60.8792 6.14902 60.8792 6.08628C60.9421 6.02353 60.9421 5.96079 61.005 5.89804C61.0679 5.83529 61.1308 5.83529 61.2566 5.83529L66.3505 5.08235C66.4134 5.08235 66.4763 5.01961 66.5392 5.01961C66.6021 4.95686 66.6021 4.89412 66.665 4.83137L68.9289 0.25098C68.9918 0.188235 68.9918 0.12549 69.0547 0.0627451C69.1176 0.0627451 69.2434 0 69.3063 0C69.3692 0 69.4321 0.0627451 69.4949 0.0627451C69.5578 0.12549 69.6207 0.188235 69.6836 0.25098L71.9476 4.89412C71.9476 4.89412 72.0105 4.95686 72.0734 5.01961C72.1362 5.01961 72.1991 5.08235 72.262 5.08235L77.356 5.83529C77.4189 5.83529 77.4818 5.89804 77.5446 5.89804C77.6075 5.96079 77.6704 6.02353 77.6704 6.08628C77.7333 6.14902 77.7333 6.27451 77.6704 6.33726C77.6704 6.4 77.6075 6.46275 77.6075 6.52549L73.8971 10.102C73.8342 10.1647 73.7713 10.2275 73.7713 10.2902C73.7713 10.3529 73.7713 10.4157 73.7713 10.4784L74.6518 15.5608C74.6518 15.6235 74.6518 15.6863 74.5889 15.749C74.5889 15.8118 74.526 15.8745 74.4631 15.9373C74.4002 15.9373 74.3373 16 74.2744 16C74.2116 16 74.1487 16 74.0858 16Z M94.0831 16L89.5551 13.5529C89.4922 13.5529 89.4294 13.4902 89.3665 13.4902C89.3036 13.4902 89.2407 13.5529 89.1778 13.5529L84.587 15.9373C84.5241 16 84.4612 16 84.3983 16C84.2725 16 84.2096 15.9373 84.1468 15.9373C84.0839 15.8745 84.0839 15.8118 84.021 15.749C84.021 15.6863 84.021 15.6235 84.021 15.498L84.9014 10.4157C84.9014 10.3529 84.9014 10.2902 84.8385 10.2275C84.8385 10.1647 84.8385 10.102 84.7756 10.102L81.0652 6.46275C81.0023 6.4 81.0023 6.33725 80.9395 6.27451C80.9395 6.21176 80.9395 6.14902 80.9395 6.08628C81.0023 6.02353 81.0023 5.96079 81.0652 5.89804C81.1281 5.83529 81.191 5.83529 81.3168 5.77255L86.4107 5.08235C86.4736 5.01961 86.5365 5.01961 86.5994 4.95686C86.6623 4.95686 86.6623 4.89412 86.7252 4.83137L88.9892 0.25098C89.052 0.12549 89.1149 0.12549 89.1778 0.0627451C89.2407 -7.45058e-09 89.3036 0 89.3665 0C89.4294 0 89.4922 -7.45058e-09 89.5551 0.0627451C89.618 0.12549 89.6809 0.12549 89.7438 0.25098L92.0078 4.83137C92.0078 4.89412 92.0707 4.95686 92.1336 5.01961C92.1965 5.01961 92.2593 5.08235 92.3222 5.08235L97.4162 5.83529C97.4791 5.83529 97.542 5.83529 97.6048 5.89804C97.6677 5.96079 97.7306 6.02353 97.7306 6.08628C97.7935 6.14902 97.7935 6.21176 97.7306 6.27451C97.7306 6.4 97.6677 6.46275 97.6677 6.52549L93.9573 10.102C93.8944 10.1647 93.8315 10.1647 93.8315 10.2275C93.8315 10.2902 93.8315 10.3529 93.8315 10.4784L94.712 15.5608C94.712 15.6235 94.712 15.6863 94.6491 15.749C94.6491 15.8118 94.5862 15.8745 94.5233 15.9373C94.4604 16 94.3975 16 94.3346 16C94.2718 16 94.146 16 94.0831 16Z", stroke: "#D0D2D6", strokeWidth: "0.42154" }),
             React.createElement("defs", null,
-                React.createElement("linearGradient", { id: "MyGradient" },
+                React.createElement("linearGradient", { id: componentId },
                     React.createElement("stop", { offset: "0%", stopColor: "#FFB51F" }),
                     React.createElement("stop", { offset: `${displayPercent}%`, stopColor: "#FF870A" }),
                     React.createElement("stop", { offset: `${displayPercent}%`, stopColor: "#FFFFFF" }))))));
 };
 const SVG = styled.svg `
-  fill: url(#MyGradient);
+  fill: url(#${({ $gradientId }) => $gradientId});
   cursor: ${({ $isRateable }) => ($isRateable ? 'pointer' : 'initial')};
 `;

package/dist/components/atoms/hide/hide.js

@@ -3,7 +3,7 @@ export const HideButRender = ({ children, displaceContent = false, show = false,
     return (React.createElement("div", { style: {
             visibility: show ? 'visible' : 'hidden',
             position: displaceContent || show ? 'initial' : 'absolute',
-            zIndex: -100,
+            zIndex: show ? 'initial' : -100,
             ...styles,
         } }, children));
 };

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

@@ -77,7 +77,7 @@ const Wrapper = styled.div `
   text-decoration: none;
 `;
 const Figure = styled.figure `
-  max-width: 352px;
+  max-width: min-content;
   box-sizing: border-box;
   display: flex;
   flex-flow: column nowrap;

package/dist/components/custom/courses_selection/courses_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, Box, H } from '../..';
 import { GraduationCap, Search as SearchIcon, Plus, Close, } from '../../../icons';
@@ -55,7 +56,10 @@ export const CoursesSelection = ({ closeOnChange = true, closeOnBlur = true, dis
                     alignItems: 'center',
                     marginTop: '16px',
                 } },
-                React.createElement(StyledImage, { alt: "", height: 64, src: course.imageSrc, width: 114 }),
+                React.createElement(Image, { alt: "", height: 64, width: 114, src: course.imageSrc, quality: 100, style: {
+                        borderRadius: '8px',
+                        marginRight: '16px',
+                    } }),
                 React.createElement(P, { sx: "margin-left: 16px;" }, course.name),
                 React.createElement(Close, { sx: "cursor: pointer; margin-left: auto;", onClick: () => setCourseIsSelected({
                         ...courseIsSelected,
@@ -115,12 +119,6 @@ const OptionWrapper = styled.div `
     `;
 }}
 `;
-const StyledImage = styled.img `
-  border-radius: 8px;
-  width: 113.78px;
-  height: 64px;
-  margin-right: 16px;
-`;
 const IconWrapper = styled.div `
   padding: 12px;
   border-radius: 8px;

package/dist/components/custom/courses_selection/courses_selection.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn, Meta } from '@storybook/react';
+import { CoursesSelectionProps } from './courses_selection';
+declare const meta: Meta;
+export declare const DefaultStory: StoryFn<CoursesSelectionProps>;
+export default meta;

package/dist/components/custom/users_selection/users_selection.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn, Meta } from '@storybook/react';
+import { UsersSelectionProps } from './users_selection';
+declare const meta: Meta;
+export declare const Default: StoryFn<UsersSelectionProps>;
+export default meta;

package/dist/components/editor/constants.d.ts

@@ -20,3 +20,10 @@ export declare const DEFAULT_Q_N_A: {
     questionAnswerId: string;
     type: string;
 }[];
+export declare const DEFAULT_IMAGE: {
+    type: string;
+    id: number;
+    children: {
+        text: string;
+    }[];
+}[];

package/dist/components/editor/constants.js

@@ -36,3 +36,14 @@ export const DEFAULT_Q_N_A = [
         type: ELEMENT_QA,
     },
 ];
+export const DEFAULT_IMAGE = [
+    {
+        type: 'img',
+        id: 1,
+        children: [
+            {
+                text: '',
+            },
+        ],
+    },
+];

package/dist/components/editor/context.d.ts

@@ -7,6 +7,7 @@ export declare const EditorContext: React.Context<{
         questionAnswerId: string;
     }) => React.ReactElement;
     handleVideoClick?: ((id: number) => void) | undefined;
+    imageSrcLoader: (id: number) => Promise<string>;
     videoTitleLoader: (props: {
         courseMediaId: number;
     }) => React.ReactElement;

package/dist/components/editor/context.js

@@ -3,5 +3,6 @@ export const EditorContext = React.createContext({
     commentInputLoader: () => React.createElement(React.Fragment, null),
     commentLoader: () => React.createElement(React.Fragment, null),
     handleVideoClick: () => undefined,
+    imageSrcLoader: async () => '',
     videoTitleLoader: () => React.createElement(React.Fragment, null),
 });

package/dist/components/editor/editor.d.ts

@@ -7,10 +7,9 @@ export interface EditorProps {
     commentLoader: (props: {
         questionAnswerId: string;
     }) => React.ReactElement;
-    communityName: string;
     editable: boolean;
-    handleUploadImage?: (files: FileList) => Promise<string>;
-    handleVideoClick?: (id: number) => void;
+    handleVideoClick: (id: number) => void;
+    imageSrcLoader: (id: number) => Promise<string>;
     onChange: (newNodes: TElement[]) => void;
     previousContent?: TElement[];
     videoTitleLoader: (props: {
@@ -18,4 +17,4 @@ export interface EditorProps {
     }) => React.ReactElement;
 }
 export type EditorContent = TElement;
-export declare const Editor: ({ commentInputLoader, commentLoader, editable, handleUploadImage, handleVideoClick, onChange, previousContent, videoTitleLoader, }: EditorProps) => React.JSX.Element;
+export declare const Editor: ({ commentInputLoader, commentLoader, editable, handleVideoClick, imageSrcLoader, onChange, previousContent, videoTitleLoader, }: EditorProps) => React.JSX.Element;

package/dist/components/editor/editor.js

@@ -10,16 +10,17 @@ import { blocks, leafs, marks, utils } from './plugins';
 const plugins = createPlugins([...blocks, ...leafs, ...marks, ...utils], {
     components: plateUI,
 });
-export const Editor = ({ commentInputLoader, commentLoader, editable, handleUploadImage, handleVideoClick, onChange, previousContent, videoTitleLoader, }) => {
+export const Editor = ({ commentInputLoader, commentLoader, editable, handleVideoClick, imageSrcLoader, onChange, previousContent, videoTitleLoader, }) => {
     return (React.createElement(EditorContext.Provider, { value: {
             commentInputLoader,
             commentLoader,
             handleVideoClick,
+            imageSrcLoader,
             videoTitleLoader,
         } },
         React.createElement(Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins },
             React.createElement(Wrapper, null,
-                editable && React.createElement(EditorBar, { handleUploadImage: handleUploadImage }),
+                editable && React.createElement(EditorBar, null),
                 React.createElement(PlateContent, { id: "main", autoFocus: true, placeholder: PLACEHOLDER, readOnly: !editable, spellCheck: true, onContextMenu: (e) => e.preventDefault(), onCopy: () => {
                         if ('clipboard' in navigator) {
                             return navigator.clipboard.writeText('');
@@ -52,6 +53,27 @@ const Wrapper = styled.div `
     color: var(--color-grey-3);
   }
 
+  ul {
+    padding-left: 24px;
+
+    li {
+      list-style-type: disc;
+    }
+  }
+
+  ol {
+    padding-left: 24px;
+
+    li {
+      list-style-type: decimal;
+    }
+  }
+
+  a {
+    text-decoration: underline;
+    color: var(--color-primary-blue-1);
+  }
+
   .slate-code {
     & > * {
       font-family: 'Roboto Mono';

package/dist/components/editor/editor.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryFn, Meta } from '@storybook/react';
+import { EditorProps } from './editor';
+declare const meta: Meta;
+declare const Story: StoryFn<EditorProps>;
+export declare const Default: typeof Story;
+export default meta;

package/dist/components/editor/navbar/index.d.ts

@@ -1,2 +1 @@
 export { EditorBar } from './navbar';
-export type { EditorBarProps } from './navbar';

package/dist/components/editor/navbar/navbar.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
-export interface EditorBarProps {
-    handleUploadImage?: (files: FileList) => Promise<string>;
-}
-export declare const EditorBar: ({ handleUploadImage }: EditorBarProps) => React.JSX.Element;
+export declare const EditorBar: () => React.JSX.Element;
 export declare const MenuButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $active?: boolean | undefined;
 }>>;

package/dist/components/editor/navbar/navbar.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
-import { getPluginType, insertImage, insertNodes, insertTable, toggleNodeType, useLinkToolbarButton, useLinkToolbarButtonState, useListToolbarButton, useListToolbarButtonState, useMarkToolbarButton, useMarkToolbarButtonState, useEditorRef, useEditorState, } from '@udecode/plate';
+import { getPluginType, insertNodes, insertTable, toggleNodeType, useLinkToolbarButton, useLinkToolbarButtonState, useListToolbarButton, useListToolbarButtonState, useMarkToolbarButton, useMarkToolbarButtonState, useEditorRef, useEditorState, } from '@udecode/plate';
 import { Tooltip } from '../../';
 import { Bold, FileCode, Grid, Headphones, Image, Italic, Link, ListOrdered, ListUnordered, Quote, Redo, Strikethrough, Underline, Undo, Video, } from '../../../icons';
 import { ELEMENT_BLOCKQUOTE, ELEMENT_BUTTON, ELEMENT_OL, ELEMENT_UL, MARK_BOLD, MARK_CODE, MARK_ITALIC, MARK_STRIKETHROUGH, MARK_UNDERLINE, } from '../constants';
 import { AlignmentDropdown } from './alignment_dropdown';
 import { ButtonModal } from './button_modal';
 import { StyleDropdown } from './style_dropdown';
-export const EditorBar = ({ handleUploadImage }) => {
+export const EditorBar = () => {
     const editorRef = useEditorRef('main');
     const stateEditor = useEditorState();
     const audioRef = React.useRef(null);
@@ -59,15 +59,6 @@ export const EditorBar = ({ handleUploadImage }) => {
             },
         ]);
     };
-    const handleImageChange = async () => {
-        const files = imageRef.current?.files;
-        if (!files || !handleUploadImage)
-            return;
-        const imageurl = await handleUploadImage(files);
-        if (imageurl) {
-            insertImage(editorRef, imageurl);
-        }
-    };
     const handleRedo = () => editorRef.redo();
     const handleUndo = () => editorRef.undo();
     const handleVideoChange = async () => {
@@ -117,7 +108,7 @@ export const EditorBar = ({ handleUploadImage }) => {
                     React.createElement(MenuButton, { "$active": currLink, onClick: handleLink },
                         React.createElement(Link, { size: 24, color: "grey-5" }))),
                 React.createElement(Tooltip, { content: "Image", place: "top" },
-                    React.createElement(MenuButton, { "$active": false, as: "label", onChange: handleImageChange },
+                    React.createElement(MenuButton, { "$active": false, as: "label" },
                         React.createElement("div", { onClick: () => imageRef.current?.click() },
                             React.createElement("input", { accept: "image/*", ref: imageRef, style: { display: 'none' }, type: "file" }),
                             React.createElement(Image, { size: 24, color: "grey-5" })))),

package/dist/components/editor/plugins/blocks/image.d.ts

@@ -1,3 +1,9 @@
 import React from 'react';
-import { PlateElementProps, TImageElement, Value } from '@udecode/plate';
-export declare const ImageElement: ({ ...props }: PlateElementProps<Value, TImageElement>) => React.JSX.Element;
+export declare const ImageElement: React.ForwardRefExoticComponent<Omit<Omit<import("@udecode/plate-core").PlateRenderNodeProps<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> & Omit<import("slate-react").RenderElementProps, "element"> & {
+    element: import("@udecode/slate").TElement;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    as?: React.ElementType<any> | undefined;
+    asChild?: boolean | undefined;
+} & React.RefAttributes<any> & {
+    elementToAttributes?: ((element: import("@udecode/slate").TElement) => any) | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<any>, "ref"> & React.RefAttributes<unknown>>;

package/dist/components/editor/plugins/blocks/image.js

@@ -1,33 +1,36 @@
 import React from 'react';
-import styled from 'styled-components';
-import { Image, PlateElement, Resizable, useMediaState, } from '@udecode/plate';
-import { useReadOnly } from 'slate-react';
-const align = 'center';
-export const ImageElement = ({ ...props }) => {
-    const { children, nodeProps } = props;
-    const readOnly = useReadOnly();
-    useMediaState();
-    return (React.createElement(PlateElement, { ...props },
-        React.createElement(Figure, { className: "group", contentEditable: false },
-            React.createElement(Resizable, { style: {
-                    alignItems: 'center',
-                    width: '100%',
-                    maxWidth: '100%',
-                    marginLeft: 'auto',
-                    marginRight: 'auto',
-                }, options: {
-                    align,
-                    readOnly,
-                } },
-                React.createElement(Image, { ...nodeProps }))),
-        children));
-};
-const Figure = styled.figure `
-  position: relative;
-  margin: 0px;
-  width: 100%;
-
-  img {
-    width: 100%;
-  }
-`;
+import { cn, withRef } from '@udecode/cn';
+import { PlateElement, withHOC } from '@udecode/plate-common';
+import { ELEMENT_IMAGE, Image, useMediaState } from '@udecode/plate-media';
+import { ResizableProvider } from '@udecode/plate-resizable';
+import { MediaPopover } from './media-popover';
+import { mediaResizeHandleVariants, Resizable, ResizeHandle, } from './resizable';
+import { EditorContext } from '../../context';
+export const ImageElement = withHOC(ResizableProvider, withRef(({ className, children, element, nodeProps, ...props }, ref) => {
+    const { imageSrcLoader } = React.useContext(EditorContext);
+    const { readOnly, focused, selected, align = 'center' } = useMediaState();
+    const { id, url, ...restElement } = element;
+    const [src, setSrc] = React.useState(null);
+    React.useEffect(() => {
+        (async () => {
+            if (!id || !imageSrcLoader)
+                return;
+            const source = await imageSrcLoader(id);
+            if (source)
+                setSrc(source);
+        })();
+    }, [id, imageSrcLoader]);
+    return (React.createElement(MediaPopover, { pluginKey: ELEMENT_IMAGE },
+        React.createElement(PlateElement, { ref: ref, className: cn('py-2.5', className), element: restElement, ...props },
+            !src ? null : (React.createElement("figure", { className: "group relative m-0", contentEditable: false },
+                React.createElement(Resizable, { align: align, options: {
+                        align,
+                        readOnly,
+                    } },
+                    React.createElement(ResizeHandle, { options: { direction: 'left' }, className: mediaResizeHandleVariants({ direction: 'left' }) }),
+                    React.createElement(Image, { className: cn('block w-full max-w-full cursor-pointer object-cover px-0', 'rounded-sm', focused && selected && 'ring-2 ring-ring ring-offset-2'), alt: "", ...nodeProps, src: src }),
+                    React.createElement(ResizeHandle, { options: { direction: 'right' }, className: mediaResizeHandleVariants({
+                            direction: 'right',
+                        }) })))),
+            children)));
+}));

package/dist/components/editor/plugins/blocks/media-popover.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface MediaPopoverProps {
+    pluginKey?: string;
+    children: React.ReactNode;
+}
+export declare function MediaPopover({ children }: MediaPopoverProps): React.JSX.Element;

package/dist/components/editor/plugins/blocks/media-popover.js

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { isSelectionExpanded, useEditorSelector, useElement, useRemoveNodeButton, } from '@udecode/plate-common';
+import { floatingMediaActions, useFloatingMediaSelectors, } from '@udecode/plate-media';
+import { useReadOnly, useSelected } from 'slate-react';
+import { Button } from './plate-button';
+import { Popover, PopoverAnchor, PopoverContent } from './popover';
+import { Link, Trash } from 'lucide-react';
+export function MediaPopover({ children }) {
+    const readOnly = useReadOnly();
+    const selected = useSelected();
+    const selectionCollapsed = useEditorSelector((editor) => !isSelectionExpanded(editor), []);
+    const isOpen = !readOnly && selected && selectionCollapsed;
+    const isEditing = useFloatingMediaSelectors().isEditing();
+    useEffect(() => {
+        if (!isOpen && isEditing) {
+            floatingMediaActions.isEditing(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
+    const element = useElement();
+    const { props: buttonProps } = useRemoveNodeButton({ element });
+    if (readOnly)
+        return React.createElement(React.Fragment, null, children);
+    return (React.createElement(Popover, { open: isOpen, modal: false },
+        React.createElement(PopoverAnchor, null, children),
+        React.createElement(PopoverContent, { className: "w-auto p-1", onOpenAutoFocus: (e) => e.preventDefault() }, isEditing ? (React.createElement("div", { className: "flex w-[330px] flex-col" },
+            React.createElement("div", { className: "flex items-center" },
+                React.createElement("div", { className: "flex items-center pl-3 text-muted-foreground" },
+                    React.createElement(Link, { className: "h-4 w-4" }))))) : (React.createElement("div", { className: "box-content flex h-9 items-center gap-1" },
+            React.createElement(Button, { variant: "ghost", size: "sms", ...buttonProps },
+                React.createElement(Trash, { className: "h-4 w-4" })))))));
+}

package/dist/components/editor/plugins/plate.d.ts

@@ -29,7 +29,14 @@ export declare const plateUI: {
     } & {
         variant: "ol" | "ul";
     }, "ref"> & import("react").RefAttributes<any>>;
-    img: ({ ...props }: import("@udecode/plate-utils").PlateElementProps<import("@udecode/slate").Value, import("@udecode/plate-media").TImageElement>) => import("react").JSX.Element;
+    img: import("react").ForwardRefExoticComponent<Omit<Omit<import("@udecode/plate-core").PlateRenderNodeProps<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> & Omit<import("slate-react").RenderElementProps, "element"> & {
+        element: import("@udecode/slate").TElement;
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        as?: import("react").ElementType<any> | undefined;
+        asChild?: boolean | undefined;
+    } & import("react").RefAttributes<any> & {
+        elementToAttributes?: ((element: import("@udecode/slate").TElement) => any) | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<any>, "ref"> & import("react").RefAttributes<unknown>>;
     button: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
     table: import("react").ForwardRefExoticComponent<Omit<Omit<import("@udecode/plate-core").PlateRenderNodeProps<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> & Omit<import("slate-react").RenderElementProps, "element"> & {
         element: import("@udecode/slate").TElement;
@@ -71,4 +78,22 @@ export declare const plateUI: {
     } & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
         hideBorder?: boolean | undefined;
     } & import("react").RefAttributes<any>>;
+    subscript: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-core").PlateRenderNodeProps<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> & Omit<import("slate-react").RenderLeafProps, "text" | "leaf"> & {
+        leaf: import("@udecode/slate").TText;
+        text: import("@udecode/slate").TText;
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        as?: import("react").ElementType<any> | undefined;
+        asChild?: boolean | undefined;
+    } & import("react").RefAttributes<any> & {
+        leafToAttributes?: ((leaf: import("@udecode/slate").TText) => any) | undefined;
+    } & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<any>>;
+    superscript: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-core").PlateRenderNodeProps<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> & Omit<import("slate-react").RenderLeafProps, "text" | "leaf"> & {
+        leaf: import("@udecode/slate").TText;
+        text: import("@udecode/slate").TText;
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        as?: import("react").ElementType<any> | undefined;
+        asChild?: boolean | undefined;
+    } & import("react").RefAttributes<any> & {
+        leafToAttributes?: ((leaf: import("@udecode/slate").TText) => any) | undefined;
+    } & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<any>>;
 };

package/dist/components/editor/plugins/plate.js

@@ -1,4 +1,5 @@
 import { withProps } from '@udecode/cn';
+import { PlateLeaf } from '@udecode/plate-common';
 import { BlockquoteElement } from './blocks/blockquote';
 import { Button } from './blocks/buttons';
 import { ImageElement } from './blocks/image';
@@ -31,4 +32,6 @@ export const plateUI = {
     [Elements.ELEMENT_TD]: TableCellElement,
     [Elements.ELEMENT_TH]: TableCellHeaderElement,
     [Elements.ELEMENT_TR]: TableRowElement,
+    [Elements.MARK_SUBSCRIPT]: withProps(PlateLeaf, { as: 'sub' }),
+    [Elements.MARK_SUPERSCRIPT]: withProps(PlateLeaf, { as: 'sup' }),
 };

package/dist/components/iconography/avatar/avatar.d.ts

@@ -16,13 +16,14 @@ export interface AvatarProps extends NativeProps {
     title?: React.ReactNode;
     tooltipContent?: React.ReactElement;
     tooltipSx?: string;
+    fallbackImg?: string;
 }
 /**
  *
  * Avatar
  */
 declare const Avatar: {
-    ({ as, href, image, size, status, subtitle, sx, textPosition, title, tooltipContent, tooltipSx, ...rest }: AvatarProps): React.JSX.Element;
+    ({ as, href, image, fallbackImg, size, status, subtitle, sx, textPosition, title, tooltipContent, tooltipSx, ...rest }: AvatarProps): React.JSX.Element;
     displayName: string;
     Group: {
         ({ children, numDisplayed, total }: AvatarGroupProps): React.JSX.Element;

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

@@ -4,6 +4,7 @@ import Image from 'next/image';
 import styled from 'styled-components';
 import { Box, H, P } from '../../';
 import { Approved, Busy, Declined, Default, Focus, Locked, Offline, Online, Subscribed, } from './icons';
+import DefaultAvatar from './assets/default_avatar.png';
 /**
  * Lookup tables for sizes
  */
@@ -58,7 +59,7 @@ const iconOffsetY = {
  *
  * Avatar
  */
-const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, textPosition = 'left', title, tooltipContent, tooltipSx, ...rest }) => {
+const Avatar = ({ as = 'button', href, image, fallbackImg = DefaultAvatar, size = 64, status, subtitle, sx, textPosition = 'left', title, tooltipContent, tooltipSx, ...rest }) => {
     const [displayDefault, setDisplayDefault] = React.useState(false);
     const Icon = iconReference?.[status ?? 'none'];
     return (React.createElement(Box, { "$align": "center", "$gap": 18, sx: `
@@ -71,7 +72,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), quality: 100, sizes: "96 | 72 | 64 | 56 | 48 | 40 | 36 | 32 | 24 | 16", 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 ?? fallbackImg, width: size })),
             displayDefault && React.createElement(Default, null),
             React.createElement("div", null,
                 React.createElement(Icon, null))),

package/dist/components/iconography/avatar/avatar.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryFn, Meta } from '@storybook/react';
+import { AvatarGroupProps, AvatarProps } from './avatar';
+declare const meta: Meta;
+export declare const Default: StoryFn<AvatarProps>;
+export declare const Group: StoryFn<AvatarGroupProps>;
+export declare const WithTooltip: StoryFn<AvatarProps>;
+export default meta;

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

@@ -1,4 +1,3 @@
 import React from 'react';
-export const Default = () => (React.createElement("svg", { viewBox: "0 0 229 228", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("rect", { width: "228", height: "228", transform: "translate(0.599976)", fill: "#F8F9F9" }),
-    React.createElement("path", { d: "M114.6 114C107.381 114 101.202 111.43 96.0609 106.289C90.9203 101.148 88.35 94.9688 88.35 87.75C88.35 80.5312 90.9203 74.3516 96.0609 69.2109C101.202 64.0703 107.381 61.5 114.6 61.5C121.819 61.5 127.998 64.0703 133.139 69.2109C138.28 74.3516 140.85 80.5312 140.85 87.75C140.85 94.9688 138.28 101.148 133.139 106.289C127.998 111.43 121.819 114 114.6 114ZM62.1 166.5V148.125C62.1 144.406 63.0581 140.987 64.9744 137.868C66.8862 134.753 69.4281 132.375 72.6 130.734C79.3812 127.344 86.2719 124.8 93.2719 123.102C100.272 121.409 107.381 120.562 114.6 120.562C121.819 120.562 128.928 121.409 135.928 123.102C142.928 124.8 149.819 127.344 156.6 130.734C159.772 132.375 162.314 134.753 164.226 137.868C166.142 140.987 167.1 144.406 167.1 148.125V166.5H62.1ZM75.225 153.375H153.975V148.125C153.975 146.922 153.675 145.828 153.076 144.844C152.472 143.859 151.678 143.094 150.694 142.547C144.787 139.594 138.827 137.378 132.811 135.899C126.795 134.425 120.725 133.688 114.6 133.688C108.475 133.688 102.405 134.425 96.389 135.899C90.3734 137.378 84.4125 139.594 78.5062 142.547C77.5219 143.094 76.73 143.859 76.1306 144.844C75.5269 145.828 75.225 146.922 75.225 148.125V153.375ZM114.6 100.875C118.209 100.875 121.3 99.5887 123.873 97.0162C126.441 94.4481 127.725 91.3594 127.725 87.75C127.725 84.1406 126.441 81.0519 123.873 78.4837C121.3 75.9112 118.209 74.625 114.6 74.625C110.991 74.625 107.902 75.9112 105.334 78.4837C102.761 81.0519 101.475 84.1406 101.475 87.75C101.475 91.3594 102.761 94.4481 105.334 97.0162C107.902 99.5887 110.991 100.875 114.6 100.875Z", fill: "#D4E7FA" })));
+export const Default = () => (React.createElement("svg", { version: "1.0", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 228.000000 228.000000", preserveAspectRatio: "xMidYMid meet" },
+    React.createElement("g", { transform: "translate(0.000000,228.000000) scale(0.100000,-0.100000)", fill: "#000000", stroke: "none" })));

package/dist/components/input/text_input/text_input.d.ts

@@ -13,6 +13,7 @@ export type Props = {
     name?: string;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     onMultipleChange?: (values: string[]) => void;
+    onSubmit?: React.FormEventHandler<HTMLInputElement>;
     placeholder?: string;
     size?: TextInputSize;
     sx?: string;

package/dist/components/media/video-player/playlist-item.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 interface PlaylistItemProps {
-    duration: number;
+    duration?: number;
     onClick: () => void;
     playable?: boolean;
     progress?: number;
-    shortDescription: string;
+    shortDescription?: string;
     thumbnail: string;
     title: string;
 }

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

@@ -4,17 +4,17 @@ import styled from 'styled-components';
 import { Box } from '../../atoms/box';
 import { SecToDuration } from '../../atoms/seconds_to_duration';
 import { P } from '../../atoms/typography';
-import { PlaySolid } from '../../../icons/audio_video';
+import { Lock, PlaySolid } from '../../../icons';
 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;" }),
+        playable ? (React.createElement(PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })) : (React.createElement(Lock, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })),
         React.createElement(Image, { alt: `thumbnail for ${title}`, height: 75, quality: 100, src: thumbnail, width: 133 }),
-        React.createElement(ProgressBar, { progressPercent: progress / duration }),
+        progress && duration && (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),
-            React.createElement(P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription)),
-        React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
-            React.createElement(SecToDuration, { seconds: duration }))));
+            shortDescription && (React.createElement(P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription))),
+        duration && (React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
+            React.createElement(SecToDuration, { seconds: duration })))));
 };
 const Wrapper = styled.div `
   width: 100%;