@selfcommunity/react-ui 0.7.0-alpha.349 → 0.7.0-alpha.350

package/lib/cjs/components/ConsentSolution/Skeleton.js

@@ -5,45 +5,20 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
-const PREFIX = 'SCConsentSolutionSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    title: `${PREFIX}-title`,
-    content: `${PREFIX}-content`,
-    consent: `${PREFIX}-consent`,
-    consentSwitch: `${PREFIX}-consent-switch`,
-    consentSwitchLabel: `${PREFIX}-consent-switch-label`,
-    actions: `${PREFIX}-actions`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    title: `${constants_1.PREFIX}-title`,
+    content: `${constants_1.PREFIX}-content`,
+    consent: `${constants_1.PREFIX}-consent`,
+    consentSwitch: `${constants_1.PREFIX}-consent-switch`,
+    consentSwitchLabel: `${constants_1.PREFIX}-consent-switch-label`,
+    actions: `${constants_1.PREFIX}-actions`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.title}`]: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-    [`& .${classes.content}`]: {
-        paddingTop: theme.spacing(3),
-        paddingBottom: theme.spacing(5)
-    },
-    [`& .${classes.consent}`]: {
-        borderTop: 0,
-        overflowY: 'visible',
-        display: 'flex'
-    },
-    [`& .${classes.consentSwitch}`]: {
-        width: 64,
-        height: 31,
-        borderRadius: 22,
-        marginRight: theme.spacing()
-    },
-    [`& .${classes.consentSwitchLabel}`]: {
-        marginTop: 23
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS ConsentSolution Skeleton component. Learn about the available props and the CSS API.
 
@@ -55,18 +30,18 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 
  #### Component Name
 
- The name `SCConsentSolutionSkeleton` can be used when providing style overrides in the theme.
+ The name `SCConsentSolution-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCConsentSolutionSkeleton-root|Styles applied to the root element.|
- |title|.SCConsentSolutionSkeleton-title|Styles applied to the title element.|
- |content|.SCConsentSolutionSkeleton-content|Styles applied to the content element.|
- |consent|.SCConsentSolutionSkeleton-consent|Styles applied to the consent element.|
- |consentSwitch|.SCConsentSolutionSkeleton-consent-switch|Styles applied to the switch skeleton element.|
- |actions|.SCConsentSolutionSkeleton-actions|Styles applied to the actions section.|
+ |root|.SCConsentSolution-skeleton-root|Styles applied to the root element.|
+ |title|.SCConsentSolution-title|Styles applied to the title element.|
+ |content|.SCConsentSolution-content|Styles applied to the content element.|
+ |consent|.SCConsentSolution-consent|Styles applied to the consent element.|
+ |consentSwitch|.SCConsentSolution-consent-switch|Styles applied to the switch skeleton element.|
+ |actions|.SCConsentSolution-actions|Styles applied to the actions section.|
  *
  */
 function ConsentSolutionSkeleton() {

package/lib/cjs/components/ConsentSolution/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCConsentSolution";

package/lib/cjs/components/ConsentSolution/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCConsentSolution';

package/lib/cjs/components/CustomAdv/CustomAdv.js

@@ -10,38 +10,18 @@ const system_1 = require("@mui/system");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const use_deep_compare_effect_1 = require("use-deep-compare-effect");
 const use_resize_observer_1 = tslib_1.__importDefault(require("use-resize-observer"));
-const PREFIX = 'SCCustomAdv';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    wrap: `${PREFIX}-wrap`,
-    image: `${PREFIX}-image`,
-    embedCode: `${PREFIX}-embed-code`,
-    prefixedHeight: `${PREFIX}-prefixed-height`
+    root: `${constants_1.PREFIX}-root`,
+    wrap: `${constants_1.PREFIX}-wrap`,
+    image: `${constants_1.PREFIX}-image`,
+    embedCode: `${constants_1.PREFIX}-embed-code`,
+    prefixedHeight: `${constants_1.PREFIX}-prefixed-height`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    margin: theme.spacing(2, 0),
-    [`& .${classes.wrap}`]: {
-        width: '100%',
-        position: 'relative'
-    },
-    [`& .${classes.image}`]: {
-        width: '100%'
-    },
-    [`& .${classes.embedCode}`]: {
-        width: '100%'
-    },
-    [`& .${classes.prefixedHeight}`]: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS CustomAdv component. Learn about the available props and the CSS API.
  *
@@ -72,7 +52,7 @@ function CustomAdv(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { id = 'custom_adv', className, advId = null, position, categoriesId, prefixedHeight, onStateChange, onHeightChange } = props;
     // REFS

package/lib/cjs/components/CustomAdv/Skeleton.d.ts

@@ -9,13 +9,13 @@
 
  #### Component Name
 
- The name `SCCustomAdvSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCustomAdv-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCustomAdvSkeleton-root|Styles applied to the root element.|
+ |root|.SCCustomAdv-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function CustomAdvSkeleton(): JSX.Element;

package/lib/cjs/components/CustomAdv/Skeleton.js

@@ -4,14 +4,13 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Skeleton_1 = require("../Skeleton");
 const styles_1 = require("@mui/material/styles");
-const PREFIX = 'SCCustomAdvSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
 const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
 })(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS Custom Adv Skeleton component. Learn about the available props and the CSS API.
@@ -24,13 +23,13 @@ const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
 
  #### Component Name
 
- The name `SCCustomAdvSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCustomAdv-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCustomAdvSkeleton-root|Styles applied to the root element.|
+ |root|.SCCustomAdv-skeleton-root|Styles applied to the root element.|
  *
  */
 function CustomAdvSkeleton() {

package/lib/cjs/components/CustomAdv/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCustomAdv";

package/lib/cjs/components/CustomAdv/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCustomAdv';

package/lib/cjs/components/Editor/Editor.js

@@ -22,17 +22,17 @@ const LexicalListPlugin_1 = require("@lexical/react/LexicalListPlugin");
 const FloatingLinkPlugin_1 = tslib_1.__importDefault(require("./plugins/FloatingLinkPlugin"));
 const OnBlurPlugin_1 = tslib_1.__importDefault(require("./plugins/OnBlurPlugin"));
 const OnFocusPlugin_1 = tslib_1.__importDefault(require("./plugins/OnFocusPlugin"));
-const PREFIX = 'SCEditor';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    focused: `${PREFIX}-focused`,
-    toolbar: `${PREFIX}-toolbar`,
-    content: `${PREFIX}-content`,
-    placeholder: `${PREFIX}-placeholder`,
-    actions: `${PREFIX}-actions`
+    root: `${constants_1.PREFIX}-root`,
+    focused: `${constants_1.PREFIX}-focused`,
+    toolbar: `${constants_1.PREFIX}-toolbar`,
+    content: `${constants_1.PREFIX}-content`,
+    placeholder: `${constants_1.PREFIX}-placeholder`,
+    actions: `${constants_1.PREFIX}-actions`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
+    name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => {
         return [styles.root, props.className.includes(classes.toolbar) && styles.toolbar];
@@ -40,35 +40,35 @@ const Root = (0, styles_1.styled)(material_1.Box, {
 })(({ theme }) => ({}));
 const editorTheme = {
     heading: {
-        h1: `${PREFIX}-h1`,
-        h2: `${PREFIX}-h2`,
-        h3: `${PREFIX}-h3`,
-        h4: `${PREFIX}-h4`,
-        h5: `${PREFIX}-h5`,
-        h6: `${PREFIX}-h6`
+        h1: `${constants_1.PREFIX}-h1`,
+        h2: `${constants_1.PREFIX}-h2`,
+        h3: `${constants_1.PREFIX}-h3`,
+        h4: `${constants_1.PREFIX}-h4`,
+        h5: `${constants_1.PREFIX}-h5`,
+        h6: `${constants_1.PREFIX}-h6`
     },
-    link: `${PREFIX}-link`,
+    link: `${constants_1.PREFIX}-link`,
     list: {
-        listitem: `${PREFIX}-listItem`,
+        listitem: `${constants_1.PREFIX}-listItem`,
         nested: {
-            listitem: `${PREFIX}-nestedListItem`
+            listitem: `${constants_1.PREFIX}-nestedListItem`
         },
-        olDepth: [`${PREFIX}-ol1`, `${PREFIX}-ol2`, `${PREFIX}-ol3`, `${PREFIX}-ol4`, `${PREFIX}-ol5`],
-        ul: `${PREFIX}-ul`
+        olDepth: [`${constants_1.PREFIX}-ol1`, `${constants_1.PREFIX}-ol2`, `${constants_1.PREFIX}-ol3`, `${constants_1.PREFIX}-ol4`, `${constants_1.PREFIX}-ol5`],
+        ul: `${constants_1.PREFIX}-ul`
     },
-    ltr: `${PREFIX}-ltr`,
-    paragraph: `${PREFIX}-paragraph`,
-    image: `${PREFIX}-image`,
-    quote: `${PREFIX}-quote`,
-    rtl: `${PREFIX}-rtl`,
+    ltr: `${constants_1.PREFIX}-ltr`,
+    paragraph: `${constants_1.PREFIX}-paragraph`,
+    image: `${constants_1.PREFIX}-image`,
+    quote: `${constants_1.PREFIX}-quote`,
+    rtl: `${constants_1.PREFIX}-rtl`,
     text: {
-        bold: `${PREFIX}-textBold`,
-        italic: `${PREFIX}-textItalic`,
-        strikethrough: `${PREFIX}-textStrikethrough`,
-        subscript: `${PREFIX}-textSubscript`,
-        superscript: `${PREFIX}-textSuperscript`,
-        underline: `${PREFIX}-textUnderline`,
-        underlineStrikethrough: `${PREFIX}-textUnderlineStrikethrough`
+        bold: `${constants_1.PREFIX}-textBold`,
+        italic: `${constants_1.PREFIX}-textItalic`,
+        strikethrough: `${constants_1.PREFIX}-textStrikethrough`,
+        subscript: `${constants_1.PREFIX}-textSubscript`,
+        superscript: `${constants_1.PREFIX}-textSuperscript`,
+        underline: `${constants_1.PREFIX}-textUnderline`,
+        underlineStrikethrough: `${constants_1.PREFIX}-textUnderlineStrikethrough`
     }
 };
 /**
@@ -104,7 +104,7 @@ const Editor = (inProps, ref) => {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { id = 'editor', className = null, defaultValue = '', toolbar = false, uploadImage = false, editable = true, onChange = null, onFocus = null, onBlur = null } = props;
     const apiRef = (0, react_1.useRef)();

package/lib/cjs/components/Editor/Skeleton.d.ts

@@ -9,13 +9,13 @@
 
  #### Component Name
 
- The name `SCEditorSkeleton` can be used when providing style overrides in the theme.
+ The name `SCEditor-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCEditorSkeleton-root|Styles applied to the root element.|
+ |root|.SCEditor-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function EditorSkeleton(): JSX.Element;

package/lib/cjs/components/Editor/Skeleton.js

@@ -4,15 +4,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Skeleton_1 = require("../Skeleton");
 const styles_1 = require("@mui/material/styles");
-const PREFIX = 'SCEditorSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
 const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Editor Skeleton component. Learn about the available props and the CSS API.
 
@@ -24,13 +23,13 @@ const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
 
  #### Component Name
 
- The name `SCEditorSkeleton` can be used when providing style overrides in the theme.
+ The name `SCEditor-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCEditorSkeleton-root|Styles applied to the root element.|
+ |root|.SCEditor-skeleton-root|Styles applied to the root element.|
  *
  */
 function EditorSkeleton() {

package/lib/cjs/components/Editor/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCEditor";

package/lib/cjs/components/Editor/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCEditor';

package/lib/cjs/components/Editor/plugins/EmojiPlugin.js

@@ -7,6 +7,7 @@ const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext"
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const EmojiPicker_1 = tslib_1.__importDefault(require("../../../shared/EmojiPicker"));
+const constants_1 = require("../constants");
 function Emoji({ editor, className = '' }) {
     // STATE
     const theme = (0, material_1.useTheme)();
@@ -37,15 +38,13 @@ function Emoji({ editor, className = '' }) {
             } },
             react_1.default.createElement(EmojiPicker_1.default, { onEmojiClick: handleEmojiClick }))));
 }
-const PREFIX = 'SCEditorEmojiPlugin';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-emoji-plugin-root`
 };
 const Root = (0, styles_1.styled)(Emoji, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'EmojiPluginRoot'
+})(() => ({}));
 function EmojiPlugin() {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
     return react_1.default.createElement(Root, { editor: editor, className: classes.root });

package/lib/cjs/components/Editor/plugins/FloatingLinkPlugin.js

@@ -12,15 +12,14 @@ const utils_2 = require("@selfcommunity/utils");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
-const PREFIX = 'SCEditorFloatingLinkPlugin';
+const constants_1 = require("../constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-floating-link-plugin-root`
 };
 const Root = (0, styles_1.styled)(material_1.Popper, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'FloatingLinkPluginRoot'
+})(() => ({}));
 function FloatingLinkPlugin({ editor, isLink, setIsLink }) {
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const [linkUrl, setLinkUrl] = (0, react_1.useState)('');
@@ -102,13 +101,13 @@ function FloatingLinkPlugin({ editor, isLink, setIsLink }) {
             React.createElement(material_1.TextField, { size: "small", value: linkUrl, variant: "outlined", onChange: (event) => {
                     setLinkUrl(event.target.value);
                 }, InputProps: {
-                    endAdornment: React.createElement(material_1.InputAdornment, { position: "end" },
+                    endAdornment: (React.createElement(material_1.InputAdornment, { position: "end" },
                         React.createElement(material_1.IconButton, { size: "small", tabIndex: 0, onClick: () => {
                                 setIsLink(false);
                             } },
                             React.createElement(Icon_1.default, null, "close")),
                         React.createElement(material_1.IconButton, { size: "small", tabIndex: 1, onClick: handleLinkSubmission },
-                            React.createElement(Icon_1.default, null, "check")))
+                            React.createElement(Icon_1.default, null, "check"))))
                 } }))));
 }
 function useFloatingLinkEditorToolbar(editor) {

package/lib/cjs/components/Editor/plugins/HashtagPlugin.js

@@ -11,6 +11,7 @@ const HashtagNode_1 = require("../nodes/HashtagNode");
 const api_services_1 = require("@selfcommunity/api-services");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const styles_1 = require("@mui/material/styles");
+const constants_1 = require("../constants");
 const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
 const DocumentHashtagsRegex = {
@@ -347,15 +348,13 @@ function isSelectionOnEntityBoundary(editor, offset) {
         return false;
     });
 }
-const PREFIX = 'SCEditorHashtagPlugin';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-hashtag-plugin-root`
 };
 const Root = (0, styles_1.styled)(HashtagsTypeahead, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'HashtagPluginRoot'
+})(() => ({}));
 function useHashtags(editor, containerSelector = null) {
     const [resolution, setResolution] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {

package/lib/cjs/components/Editor/plugins/ImagePlugin.js

@@ -15,6 +15,7 @@ const MediaChunkUploader_1 = tslib_1.__importDefault(require("../../../shared/Me
 const upload_button_1 = require("@rpldy/upload-button");
 const notistack_1 = require("notistack");
 const ImageNode_1 = require("../nodes/ImageNode");
+const constants_1 = require("../constants");
 exports.INSERT_IMAGE_COMMAND = (0, lexical_1.createCommand)();
 const UploadButton = (0, upload_button_1.asUploadButton)((0, react_1.forwardRef)((_a, ref) => {
     var { progress = null } = _a, rest = tslib_1.__rest(_a, ["progress"]);
@@ -68,15 +69,13 @@ function Image({ editor, className = '' }) {
                 progress: Object.keys(uploading).length !== 0 ? Object.values(uploading)[0].completed : null
             } })));
 }
-const PREFIX = 'SCEditorImagePlugin';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-image-plugin-root`
 };
 const Root = (0, styles_1.styled)(Image, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'ImagePluginRoot'
+})(() => ({}));
 function ImagePlugin() {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
     (0, react_1.useEffect)(() => {

package/lib/cjs/components/Editor/plugins/MentionsPlugin.js

@@ -13,6 +13,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const ClickAwayListener_1 = tslib_1.__importDefault(require("@mui/material/ClickAwayListener"));
+const constants_1 = require("../constants");
 const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
 const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
 const DocumentMentionsRegex = {
@@ -476,15 +477,13 @@ function isSelectionOnEntityBoundary(editor, offset) {
         return false;
     });
 }
-const PREFIX = 'SCEditorMentionPlugin';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-mention-plugin-root`
 };
 const Root = (0, styles_1.styled)(MentionsTypeahead, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'MentionPluginRoot'
+})(() => ({}));
 function useMentions(editor, anchorClassName = null) {
     const [resolution, setResolution] = (0, react_1.useState)(null);
     const anchorElementRef = useMenuAnchorRef(resolution, setResolution, anchorClassName);

package/lib/cjs/components/Editor/plugins/ToolbarPlugin.js

@@ -27,6 +27,7 @@ const system_1 = require("@mui/system");
 const ImagePlugin_1 = tslib_1.__importDefault(require("./ImagePlugin"));
 const EmojiPlugin_1 = tslib_1.__importDefault(require("./EmojiPlugin"));
 const LexicalHorizontalRuleNode_1 = require("@lexical/react/LexicalHorizontalRuleNode");
+const constants_1 = require("../constants");
 const blockTypeToBlockIcon = {
     h1: 'format_heading_1',
     h2: 'format_heading_2',
@@ -126,21 +127,19 @@ function BlockFormatIconButton({ className = '', editor, blockType, disabled = f
         React.createElement(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose }, Object.keys(blockTypeToBlockIcon).map((block) => (React.createElement(material_1.MenuItem, { key: block, onClick: handleSelect(block) },
             React.createElement(material_1.Icon, null, blockTypeToBlockIcon[block])))))));
 }
-const PREFIX = 'SCEditorToolbarPlugin';
 const classes = {
-    root: `${PREFIX}-root`,
-    blockFormat: `${PREFIX}-block-format`
+    root: `${constants_1.PREFIX}-toolbar-plugin-root`,
+    blockFormat: `${constants_1.PREFIX}-block-format`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'ToolbarPluginRoot'
+})(() => ({}));
 function ToolbarPlugin(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { uploadImage = false } = props;
     // STATE

package/lib/cjs/components/Feed/Feed.js

@@ -24,22 +24,21 @@ const Footer_1 = tslib_1.__importDefault(require("../Footer"));
 const Skeleton_2 = tslib_1.__importDefault(require("./Skeleton"));
 const use_deep_compare_effect_1 = require("use-deep-compare-effect");
 const StickyBox_1 = tslib_1.__importDefault(require("../../shared/StickyBox"));
-const PREFIX = 'SCFeed';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    left: `${PREFIX}-left`,
-    leftItems: `${PREFIX}-left-items`,
-    start: `${PREFIX}-start`,
-    end: `${PREFIX}-end`,
-    endMessage: `${PREFIX}-end-message`,
-    right: `${PREFIX}-right`,
-    refresh: `${PREFIX}-refresh`,
-    paginationLink: `${PREFIX}-pagination-link`
+    root: `${constants_1.PREFIX}-root`,
+    left: `${constants_1.PREFIX}-left`,
+    leftItems: `${constants_1.PREFIX}-left-items`,
+    start: `${constants_1.PREFIX}-start`,
+    end: `${constants_1.PREFIX}-end`,
+    endMessage: `${constants_1.PREFIX}-end-message`,
+    right: `${constants_1.PREFIX}-right`,
+    refresh: `${constants_1.PREFIX}-refresh`,
+    paginationLink: `${constants_1.PREFIX}-pagination-link`
 };
 const Root = (0, styles_1.styled)(material_1.Grid, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    name: constants_1.PREFIX,
+    slot: 'Root'
 })(() => ({}));
 const PREFERENCES = [react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED, react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED];
 /**
@@ -76,7 +75,7 @@ const Feed = (inProps, ref) => {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { id = 'feed', className, endpoint, endpointQueryParams = { limit: Pagination_1.DEFAULT_PAGINATION_LIMIT, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, endMessage = react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feed.noOtherFeedObject", defaultMessage: "ui.feed.noOtherFeedObject" }), refreshMessage = react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feed.refreshRelease", defaultMessage: "ui.feed.refreshRelease" }), HeaderComponent, FooterComponent = Footer_1.default, FooterComponentProps = {}, widgets = [], ItemComponent, itemPropsGenerator, itemIdGenerator, ItemProps = {}, ItemSkeleton, ItemSkeletonProps = {}, onNextData, onPreviousData, FeedSidebarProps = {}, CustomAdvProps = {}, enabledCustomAdvPositions = [types_1.SCCustomAdvPosition.POSITION_FEED_SIDEBAR, types_1.SCCustomAdvPosition.POSITION_FEED], requireAuthentication = false, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, prefetchedData, scrollableTargetId, VirtualizedScrollerProps = {}, disablePaginationLinks = false, hidePaginationLinks = true, paginationLinksPageQueryParam = Pagination_1.DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, hideAdvs = false } = props;
     // CONTEXT

package/lib/cjs/components/Feed/Skeleton.d.ts

@@ -23,15 +23,15 @@ export declare type FeedSkeletonProps = React.PropsWithChildren<FeedSkeletonMap>
 
  #### Component Name
 
- The name `SCFeedSkeleton` can be used when providing style overrides in the theme.
+ The name `SCFeed-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCFeedSkeleton-root|Styles applied to the root element.|
- |left|.SCFeedSkeleton-left|Styles applied to the left section.|
- |right|.SCFeedSkeleton-right|Styles applied to the right section.|
+ |root|.SCFeed-skeleton-root|Styles applied to the root element.|
+ |left|.SCFeed-left|Styles applied to the left section.|
+ |right|.SCFeed-right|Styles applied to the right section.|
  *
  */
 export default function FeedSkeleton(props: FeedSkeletonProps): JSX.Element;