@manuscripts/body-editor 3.13.5 → 3.13.7

package/dist/types/components/references/ReferenceForm/styled-components.d.ts

@@ -1,49 +1,46 @@
-export declare const Button: import("styled-components").StyledComponent<"button", any, {
+export declare const Button: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 } & {
-    defaultColor?: boolean;
-    size?: number;
-    iconColor?: string;
+    $defaultColor?: boolean;
+    $size?: number;
+    $iconColor?: string;
 } & {
-    defaultColor: boolean;
-    size: number;
-}, "size" | "type" | "defaultColor">;
-export declare const Actions: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ReferenceTextField: import("styled-components").StyledComponent<"input", any, import("@manuscripts/style-guide").TextFieldProps, never>;
-export declare const ReferenceTextArea: import("styled-components").StyledComponent<"textarea", any, import("@manuscripts/style-guide").TextAreaProps, never>;
-export declare const FormFields: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DeleteButton: import("styled-components").StyledComponent<"button", any, {
+    $defaultColor: boolean;
+    $size: number;
+}, "type" | "$defaultColor" | "$size">;
+export declare const Actions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ReferenceTextField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, import("@manuscripts/style-guide").TextFieldProps, never>;
+export declare const ReferenceTextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, import("@manuscripts/style-guide").TextAreaProps, never>;
+export declare const FormFields: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DeleteButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 } & {
-    defaultColor?: boolean;
-    size?: number;
-    iconColor?: string;
+    $defaultColor?: boolean;
+    $size?: number;
+    $iconColor?: string;
 }, "type">;
-export declare const Section: import("styled-components").StyledComponent<"section", any, {}, never>;
-export declare const PersonForm: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Title: import("styled-components").StyledComponent<"h4", any, {
-    isInvalid?: boolean;
+export declare const Section: import("styled-components").StyledComponent<"section", import("styled-components").DefaultTheme, {}, never>;
+export declare const PersonForm: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"h4", import("styled-components").DefaultTheme, {
+    $isInvalid?: boolean;
 }, never>;
-export declare const DropdownIndicator: import("styled-components").StyledComponent<import("react").FC<import("@manuscripts/style-guide/dist/types/components/icons/types").IconProps>, any, {}, never>;
-export declare const ToggleButton: import("styled-components").StyledComponent<"button", any, {
-    isOpen: boolean;
+export declare const DropdownIndicator: import("styled-components").StyledComponent<import("react").FC<import("@manuscripts/style-guide/dist/types/components/icons/types").IconProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const ToggleButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    $isOpen: boolean;
 }, never>;
-export declare const RemoveButton: import("styled-components").StyledComponent<"button", any, {
+export declare const RemoveButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 } & {
-    defaultColor?: boolean;
-    size?: number;
-    iconColor?: string;
+    $defaultColor?: boolean;
+    $size?: number;
+    $iconColor?: string;
 }, "type">;

package/dist/types/components/references/ReferenceLine.d.ts

@@ -15,8 +15,8 @@
  */
 import { BibliographyItemAttrs } from '@manuscripts/transform';
 import React from 'react';
-export declare const Metadata: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MetadataContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Metadata: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const MetadataContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ReferenceLine: React.FC<{
     item: BibliographyItemAttrs;
 }>;

package/dist/types/components/references/ReferenceSearchResults.d.ts

@@ -20,7 +20,7 @@ export declare const ReferenceSearchResultsContainer: import("styled-components"
     [x: number]: any;
     [x: symbol]: any;
 } & {
-    theme?: any;
+    theme?: import("styled-components").DefaultTheme | undefined;
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
@@ -30,7 +30,7 @@ export declare const ReferenceSearchResult: import("styled-components").StyledCo
     [x: number]: any;
     [x: symbol]: any;
 } & {
-    theme?: any;
+    theme?: import("styled-components").DefaultTheme | undefined;
 } & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;

package/dist/types/components/references/SearchInput.d.ts

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 import React, { InputHTMLAttributes } from 'react';
-export declare const SearchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SearchInput: React.FC<InputHTMLAttributes<HTMLInputElement>>;

package/dist/types/components/toolbar/ListMenuItem.d.ts

@@ -7,10 +7,10 @@ export interface ListSubmenuItemsProps {
     styleRefs?: React.MutableRefObject<(HTMLDivElement | null)[]>;
 }
 export declare const ListStyles: React.FC<ListSubmenuItemsProps>;
-export declare const ListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyleBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BlockItem: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Block: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Label: import("styled-components").StyledComponent<"div", any, {
-    hide?: boolean;
+export declare const ListContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyleBlock: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const BlockItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Block: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $hide?: boolean;
 }, never>;

package/dist/types/components/toolbar/type-selector/styles.d.ts

@@ -1,6 +1,6 @@
 import { CSSObjectWithLabel, GroupBase, Props } from 'react-select';
 import { Option } from './TypeSelector';
-export declare const StyledSelect: import("styled-components").StyledComponent<import("react").FunctionComponent<Props<Option, false, GroupBase<Option>>>, any, {}, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<import("react").FunctionComponent<Props<Option, false, GroupBase<Option>>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const customStyles: {
     control: (styles: CSSObjectWithLabel) => CSSObjectWithLabel;
     indicatorSeparator: () => CSSObjectWithLabel;

package/dist/types/components/views/LinkForm.d.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-export declare const Open: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const Open: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
 export interface LinkValue {
     text: string;
     href: string;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.13.5";
+export declare const VERSION = "3.13.7";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.13.5",
+  "version": "3.13.7",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,9 +41,9 @@
     "@citation-js/plugin-pubmed": "0.3.0",
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
-    "@manuscripts/style-guide": "3.6.2",
+    "@manuscripts/style-guide": "3.6.3",
     "@manuscripts/track-changes-plugin": "2.4.0",
-    "@manuscripts/transform": "4.4.3",
+    "@manuscripts/transform": "4.4.4",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",

package/src/components/LanguageDropdown/index.tsx

@@ -201,10 +201,10 @@ const LanguageDropdown: React.FC<LanguageDropdownProps> = ({
       {isOpen && (
         <DropdownMenu
           ref={dropdownMenuRef}
-          direction="right"
-          width={231}
-          height={400}
-          top={18}
+          $direction="right"
+          $width={231}
+          $height={400}
+          $top={18}
           onKeyDown={handleMenuKeyDown}
           role="menu"
         >

package/src/components/affiliations/AffiliationForm.tsx

@@ -124,7 +124,7 @@ export const AffiliationForm: React.FC<AffiliationFormProps> = ({
                 <TextField
                   id="institution"
                   {...props.field}
-                  error={showInstitutionError}
+                  $error={showInstitutionError}
                 />
                 {showInstitutionError && (
                   <InputErrorText>

package/src/components/affiliations/AffiliationItem.tsx

@@ -139,7 +139,7 @@ export const AffiliationItem: React.FC<AffiliationContainerProps> = ({
       )}
       {isSelected && (
         <RemoveButton
-          size={13}
+          $size={13}
           onClick={() => onDelete()}
           data-tooltip-content="Delete"
         >

package/src/components/authors/AuthorDetailsForm.tsx

@@ -225,7 +225,7 @@ export const AuthorDetailsForm: React.FC<AuthorDetailsFormProps> = ({
                   <TextFieldWithError
                     id={'given-name'}
                     {...props.field}
-                    error={showNamePairError}
+                    $error={showNamePairError}
                   />
                   {showNamePairError && (
                     <InputErrorText>
@@ -251,7 +251,7 @@ export const AuthorDetailsForm: React.FC<AuthorDetailsFormProps> = ({
                   <TextFieldWithError
                     id={'family-name'}
                     {...props.field}
-                    error={showNamePairError}
+                    $error={showNamePairError}
                   />
                   {showNamePairError && (
                     <InputErrorText>
@@ -329,7 +329,7 @@ export const AuthorDetailsForm: React.FC<AuthorDetailsFormProps> = ({
                     type="email"
                     required={isEmailRequired}
                     {...props.field}
-                    error={hasError}
+                    $error={hasError}
                   />
                   {hasError && (
                     <InputErrorText>
@@ -374,7 +374,7 @@ export const AuthorDetailsForm: React.FC<AuthorDetailsFormProps> = ({
                     {...props.field}
                     pattern={ORCID_INPUT_PATTERN}
                     title="Please enter a valid ORCID URL: https://orcid.org/xxxx-xxxx-xxxx-xxxx"
-                    error={hasError}
+                    $error={hasError}
                   />
                   {hasError && (
                     <InputErrorText>

package/src/components/authors/DraggableAuthor.tsx

@@ -215,7 +215,7 @@ export const DraggableAuthor: React.FC<DraggableAuthorProps> = React.memo(
         <AuthorName data-cy="author-name">{authorLabel(author)}</AuthorName>
         {isSelected && (
           <RemoveButton
-            size={13}
+            $size={13}
             onClick={() => onDelete()}
             data-tooltip-content="Delete"
           >

package/src/components/awards/AwardForm.tsx

@@ -221,7 +221,7 @@ export const AwardForm = ({
 }
 // TODO:: All that react-select component and styles should be in style-guide with a standard select component
 
-const SearchIconContainer = styled.span<{ isFocused: boolean }>`
+const SearchIconContainer = styled.span<{ $isFocused: boolean }>`
   display: flex;
   align-items: center;
   padding-left: ${(props) => props.theme.grid.unit * 4}px;
@@ -229,22 +229,22 @@ const SearchIconContainer = styled.span<{ isFocused: boolean }>`
 
   path {
     stroke: ${(props) =>
-      props.isFocused
+      props.$isFocused
         ? props.theme.colors.brand.medium
         : props.theme.colors.text.primary};
   }
 `
 
-const OptionWrapper = styled.div<{ focused?: boolean; selected?: boolean }>`
+const OptionWrapper = styled.div<{ $focused?: boolean; $selected?: boolean }>`
   padding-left: ${(props) => props.theme.grid.unit * 4}px;
   padding-top: ${(props) => props.theme.grid.unit * 2}px;
   padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
   background-color: ${(props) => {
-    if (props.selected) {
+    if (props.$selected) {
       return props.theme.colors.background.selected
     }
-    if (props.focused) {
+    if (props.$focused) {
       return props.theme.colors.background.fifth
     }
     return 'transparent'
@@ -266,8 +266,8 @@ const Option: React.FC<OptionProps<FunderOption, false>> = ({
     <OptionWrapper
       {...innerProps}
       ref={innerRef}
-      focused={isFocused}
-      selected={isSelected}
+      $focused={isFocused}
+      $selected={isSelected}
     >
       {data.label}
     </OptionWrapper>
@@ -277,7 +277,7 @@ const Option: React.FC<OptionProps<FunderOption, false>> = ({
 const Control = ({ children, ...props }: ControlProps<FunderOption, false>) => {
   return (
     <components.Control {...props}>
-      <SearchIconContainer isFocused={props.isFocused}>
+      <SearchIconContainer $isFocused={props.isFocused}>
         <SearchIcon />
       </SearchIconContainer>
       {children}

package/src/components/awards/AwardModal.tsx

@@ -82,7 +82,7 @@ export const AwardModal: React.FC<AwardModalProps> = ({
         <ModalHeader>
           <CloseButton onClick={handleClose} data-cy="modal-close-button" />
         </ModalHeader>
-        <ModalCardBody width={480}>
+        <ModalCardBody $width={480}>
           <ModalTitle>Add Funder information</ModalTitle>
           <AwardForm
             values={normalizedValues}

package/src/components/outline/DraggableTree.tsx

@@ -392,7 +392,7 @@ export const DraggableTree: React.FC<DraggableTreeProps> = ({
     <Outline ref={ref} className={classNames}>
       {!isTop && node.type.name != 'manuscript' && (
         <OutlineItem
-          depth={isHeroImage || isSupplements || isMainDocument ? 1 : depth}
+          $depth={isHeroImage || isSupplements || isMainDocument ? 1 : depth}
           onContextMenu={handleContextMenu}
           onKeyDown={handleKeyDown}
           tabIndex={-1}

package/src/components/outline/Outline.tsx

@@ -28,7 +28,7 @@ export const OutlineItemIcon = styled.span`
 `
 
 export const OutlineItem = styled.div<{
-  depth: number
+  $depth: number
 }>`
   align-items: center;
   color: ${(props) => props.theme.colors.text.primary};
@@ -36,7 +36,7 @@ export const OutlineItem = styled.div<{
   cursor: pointer;
   display: flex;
   font-size: ${(props) =>
-    props.depth === 0
+    props.$depth === 0
       ? props.theme.font.size.large
       : props.theme.font.size.medium};
   line-height: 30px;
@@ -44,7 +44,7 @@ export const OutlineItem = styled.div<{
   margin-right: -${(props) => props.theme.grid.unit * 5}px;
   overflow-x: hidden;
   padding-right: ${(props) => props.theme.grid.unit * 5}px;
-  padding-left: ${(props) => 20 + props.depth * 20}px;
+  padding-left: ${(props) => 20 + props.$depth * 20}px;
   white-space: nowrap;
 
   &:hover {

package/src/components/references/CitationEditor.tsx

@@ -54,9 +54,9 @@ const CitedItemActions = styled.div`
 `
 
 const ActionButton = styled(IconButton).attrs({
-  size: 24,
+  $size: 24,
 })`
-  :disabled {
+  &:disabled {
     background-color: transparent !important;
     border-color: transparent !important;
     color: rgb(255, 255, 255);
@@ -65,8 +65,8 @@ const ActionButton = styled(IconButton).attrs({
       fill: ${(props) => props.theme.colors.background.tertiary} !important;
     }
   }
-  :not(:disabled):focus,
-  :not(:disabled):hover {
+  &:not(:disabled):focus,
+  &:not(:disabled):hover {
     path,
     g {
       fill: ${(props) => props.theme.colors.brand.medium} !important;

package/src/components/references/ImportBibliographyForm.tsx

@@ -138,7 +138,7 @@ export const ImportBibliographyForm = ({
           }}
           onDragLeave={() => setDragging(false)}
           onKeyDown={handleOnKeyDown}
-          active={dragging}
+          $active={dragging}
         >
           <input
             id="file"
@@ -203,13 +203,13 @@ const activeBoxStyle = css`
   border: 1px dashed #bce7f6;
 `
 
-const DropContainer = styled.div<{ active: boolean }>`
+const DropContainer = styled.div<{ $active: boolean }>`
   background: ${(props) => props.theme.colors.background.secondary};
   border: 1px dashed ${(props) => props.theme.colors.border.secondary};
   box-sizing: border-box;
   border-radius: ${(props) => props.theme.grid.radius.default};
   cursor: pointer;
-  ${({ active }) => active && activeBoxStyle};
+  ${({ $active }) => $active && activeBoxStyle};
 
   &:hover {
     ${activeBoxStyle}

package/src/components/references/ImportBibliographyModal.tsx

@@ -97,7 +97,7 @@ export const ImportBibliographyModal: React.FC<
         <ModalHeader>
           <CloseButton onClick={onCancel} data-cy="modal-close-button" />
         </ModalHeader>
-        <ModalCardBody width={640}>
+        <ModalCardBody $width={640}>
           <ModalTitle>Import Bibliography</ModalTitle>
           <p>
             <SpanWithExample

package/src/components/references/ReferenceForm/PersonDropDown.tsx

@@ -49,13 +49,13 @@ export const PersonDropDown = (props: PersonDropDownProps) => {
         <ToggleButton
           type="button"
           onClick={() => setIsOpen(!isOpen)}
-          isOpen={isOpen}
+          $isOpen={isOpen}
         >
           <DropdownIndicator />
           {title}
         </ToggleButton>
         <RemoveButton
-          size={13}
+          $size={13}
           type="button"
           aria-label="Delete this editor"
           onClick={() => remove(index)}

package/src/components/references/ReferenceForm/ReferenceForm.tsx

@@ -153,7 +153,7 @@ export const ReferenceForm: React.FC<{
                   <LinkIcon />
                 </IconButton>
                 <DeleteButton
-                  defaultColor
+                  $defaultColor
                   disabled={!showDelete}
                   data-tooltip-content="Unable to delete because the item is used in the document"
                   data-tooltip-hidden={showDelete}
@@ -236,9 +236,9 @@ export const ReferenceForm: React.FC<{
                   name={'author'}
                   render={({ push, remove }) => (
                     <FormRow
-                      direction="row"
-                      justify="space-between"
-                      align="center"
+                      $direction="row"
+                      $justify="space-between"
+                      $align="center"
                     >
                       <Label>Authors</Label>
 

package/src/components/references/ReferenceForm/styled-components.ts

@@ -24,8 +24,8 @@ import {
 import styled from 'styled-components'
 
 export const Button = styled(IconButton).attrs({
-  defaultColor: true,
-  size: 24,
+  $defaultColor: true,
+  $size: 24,
 })`
   circle,
   use {
@@ -93,7 +93,7 @@ export const PersonForm = styled.div`
 `
 
 export const Title = styled.h4<{
-  isInvalid?: boolean
+  $isInvalid?: boolean
 }>`
   margin: 0;
   display: flex;
@@ -101,9 +101,9 @@ export const Title = styled.h4<{
   font-size: 0.875rem;
   padding-right: 0.5rem;
   background: ${(props) =>
-    props.isInvalid ? props.theme.colors.background.warning : 'transparent'};
+    props.$isInvalid ? props.theme.colors.background.warning : 'transparent'};
   color: ${(props) =>
-    props.isInvalid ? props.theme.colors.text.warning : 'inherit'};
+    props.$isInvalid ? props.theme.colors.text.warning : 'inherit'};
 `
 
 export const DropdownIndicator = styled(ArrowDownIcon)`
@@ -114,7 +114,7 @@ export const DropdownIndicator = styled(ArrowDownIcon)`
 `
 
 export const ToggleButton = styled.button<{
-  isOpen: boolean
+  $isOpen: boolean
 }>`
   flex-grow: 1;
   display: flex;
@@ -134,7 +134,7 @@ export const ToggleButton = styled.button<{
   }
 
   svg {
-    transform: ${(props) => (props.isOpen ? 'rotateX(180deg)' : 'initial')};
+    transform: ${(props) => (props.$isOpen ? 'rotateX(180deg)' : 'initial')};
   }
   ${outlineStyle}
 `

package/src/components/references/ReferencesModal.tsx

@@ -71,7 +71,7 @@ const ReferenceButton = withNavigableListItem(styled.div`
     fill: #c9c9c9;
   }
 
-  :hover {
+  &:hover {
     background: ${(props) => props.theme.colors.background.info};
   }
 

package/src/components/toolbar/InsertEmbedDialog.tsx

@@ -110,7 +110,7 @@ export const InsertEmbedDialog: React.FC<InsertEmbedDialogProps> = ({
 
         <MessageContainer>
           <Container>
-            <FormRow direction={'row'}>
+            <FormRow $direction={'row'}>
               <Label htmlFor={'embed-link'}>Media link</Label>
               {url && allowedHref(url) && (
                 <Open

package/src/components/toolbar/InsertTableDialog.tsx

@@ -43,16 +43,16 @@ const Container = styled.div`
   align-items: center;
   padding-bottom: 16px;
 `
-const OptionWrapper = styled.div<{ focused?: boolean; selected?: boolean }>`
+const OptionWrapper = styled.div<{ $focused?: boolean; $selected?: boolean }>`
   padding-left: ${(props) => props.theme.grid.unit * 4}px;
   padding-top: ${(props) => props.theme.grid.unit * 2}px;
   padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
   background-color: ${(props) => {
-    if (props.selected) {
+    if (props.$selected) {
       return props.theme.colors.background.selected
     }
-    if (props.focused) {
+    if (props.$focused) {
       return props.theme.colors.background.fifth
     }
     return 'transparent'
@@ -103,8 +103,8 @@ export const InsertTableDialog: React.FC<InsertTableDialogProps> = ({
       <OptionWrapper
         {...innerProps}
         ref={innerRef}
-        focused={isFocused}
-        selected={isSelected}
+        $focused={isFocused}
+        $selected={isSelected}
       >
         {data.label}
       </OptionWrapper>

package/src/components/toolbar/ListMenuItem.tsx

@@ -130,7 +130,7 @@ export const ListStyles: React.FC<ListSubmenuItemsProps> = ({
         >
           {styleItems[style].map((item, index) => (
             <BlockItem key={index}>
-              <Label hide={item === '-'}>{item}</Label>
+              <Label $hide={item === '-'}>{item}</Label>
               <Block />
             </BlockItem>
           ))}
@@ -193,11 +193,11 @@ export const Block = styled.div`
   background: ${(props) => props.theme.colors.border.tertiary};
 `
 
-export const Label = styled.div<{ hide?: boolean }>`
+export const Label = styled.div<{ $hide?: boolean }>`
   font-family: Lato, serif;
   font-size: ${(props) => props.theme.font.size.small};
   font-weight: ${(props) => props.theme.font.weight.normal};
   line-height: ${(props) => props.theme.font.lineHeight.small};
   font-style: normal;
-  color: ${(props) => (props.hide && 'white') || 'initial'};
+  color: ${(props) => (props.$hide && 'white') || 'initial'};
 `

package/src/components/toolbar/type-selector/OptionComponent.tsx

@@ -21,14 +21,14 @@ import styled from 'styled-components'
 import { optionName, titleCase } from '../helpers'
 import { Option } from './TypeSelector'
 
-const OptionContainer = styled.div<{ isFocused?: boolean }>`
+const OptionContainer = styled.div<{ $isFocused?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 14px;
   cursor: pointer;
   padding: 8px;
-  background: ${(props) => (props.isFocused ? '#f2fbfc' : 'transparent')};
+  background: ${(props) => (props.$isFocused ? '#f2fbfc' : 'transparent')};
 
   &:hover {
     background: ${(props) => props.theme.colors.background.fifth};
@@ -44,7 +44,7 @@ export const OptionComponent: React.FC<OptionProps<Option, false>> = ({
   innerRef,
 }) => {
   return (
-    <OptionContainer {...innerProps} isFocused={isFocused} ref={innerRef}>
+    <OptionContainer {...innerProps} $isFocused={isFocused} ref={innerRef}>
       <OptionLabel>{titleCase(optionName(data.nodeType))}</OptionLabel>
       {data.isSelected && (
         <TickIconWrapper>