@manuscripts/style-guide 3.6.2 → 3.6.3

package/dist/cjs/components/ToggleSwitch.js

@@ -12,8 +12,8 @@ const Track = styled_components_1.default.button `
   height: 16px;
   border-radius: 999px;
   border: 1px solid
-    ${(props) => props.checked ? '#0d79d0' : props.theme.colors.text.secondary};
-  background: ${(props) => props.checked ? '#0d79d0' : props.theme.colors.text.secondary};
+    ${(props) => props.$checked ? '#0d79d0' : props.theme.colors.text.secondary};
+  background: ${(props) => props.$checked ? '#0d79d0' : props.theme.colors.text.secondary};
   padding: 0;
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   transition:
@@ -35,7 +35,7 @@ const Track = styled_components_1.default.button `
 const Thumb = styled_components_1.default.span `
   position: absolute;
   top: 0;
-  left: ${(props) => (props.checked ? '14px' : '0px')};
+  left: ${(props) => (props.$checked ? '14px' : '0px')};
   width: 14px;
   height: 14px;
   border-radius: 50%;
@@ -43,14 +43,14 @@ const Thumb = styled_components_1.default.span `
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   transition: left 120ms ease;
 
-  ${(props) => props.disabled &&
+  ${(props) => props.$disabled &&
     `
     background: #fdfdfd;
     box-shadow: none;
   `}
 `;
 const LabelText = styled_components_1.default.span `
-  color: ${(props) => props.disabled ? '#b3b3b3' : props.theme.colors.text.primary};
+  color: ${(props) => props.$disabled ? '#b3b3b3' : props.theme.colors.text.primary};
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.medium} / 1
     ${(props) => props.theme.font.family.sans};
@@ -61,9 +61,9 @@ const Container = styled_components_1.default.label `
   align-items: center;
   gap: 8px;
   cursor: pointer;
-  flex-direction: ${(props) => props.labelPosition === 'left' ? 'row' : 'row-reverse'};
+  flex-direction: ${(props) => props.$labelPosition === 'left' ? 'row' : 'row-reverse'};
 `;
 const ToggleSwitch = ({ checked, disabled, onChange, label, id, labelPosition = 'left', }) => {
-    return ((0, jsx_runtime_1.jsxs)(Container, { labelPosition: labelPosition, children: [label && (0, jsx_runtime_1.jsx)(LabelText, { disabled: disabled, children: label }), (0, jsx_runtime_1.jsx)(Track, { id: id, type: "button", role: "switch", "aria-checked": checked, "aria-label": label, checked: checked, disabled: disabled, onClick: () => !disabled && onChange(!checked), children: (0, jsx_runtime_1.jsx)(Thumb, { checked: checked, disabled: disabled }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Container, { "$labelPosition": labelPosition, children: [label && (0, jsx_runtime_1.jsx)(LabelText, { "$disabled": disabled, children: label }), (0, jsx_runtime_1.jsx)(Track, { id: id, type: "button", role: "switch", "aria-checked": checked, "aria-label": label, "$checked": checked, disabled: disabled, onClick: () => !disabled && onChange(!checked), children: (0, jsx_runtime_1.jsx)(Thumb, { "$checked": checked, "$disabled": disabled }) })] }));
 };
 exports.ToggleSwitch = ToggleSwitch;

package/dist/es/components/Avatar.js

@@ -24,32 +24,32 @@ const AvatarContainer = styled.div `
   align-items: center;
   justify-content: center;
   position: relative;
-  opacity: ${(props) => props.opacity};
+  opacity: ${(props) => props.$opacity};
 `;
 const RoundedImage = styled.img `
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
   border-radius: 50%;
   align-items: center;
   justify-content: center;
 `;
 const StyledAvatar = styled(ProfileIcon) `
   path {
-    fill: ${(props) => props.color || props.theme.colors.text.secondary};
+    fill: ${(props) => props.$color || props.theme.colors.text.secondary};
   }
 
   &:hover path {
-    fill: ${(props) => props.color || props.theme.colors.text.info};
+    fill: ${(props) => props.$color || props.theme.colors.text.info};
   }
 `;
 const InitialsCircle = styled.div `
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
   border-radius: 50%;
-  background: ${(props) => props.bg};
+  background: ${(props) => props.$bg};
   color: #ffffff;
   font-weight: bold;
-  font-size: ${(props) => Math.round(props.size * 0.4)}px;
+  font-size: ${(props) => Math.round(props.$size * 0.4)}px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -62,5 +62,5 @@ export const Avatar = (props) => {
         setSrcError(true);
     }, []);
     const showInitials = (!props.src || srcError) && !!props.name;
-    return (_jsx(AvatarContainer, { opacity: props.opacity || 1, children: props.src && !srcError ? (_jsx(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : showInitials ? (_jsx(InitialsCircle, { size: props.size, bg: INITIALS_PALETTE[props.name.charCodeAt(0) % INITIALS_PALETTE.length], children: getInitials(props.name) })) : (_jsx(StyledAvatar, { height: props.size, width: props.size, color: props.color })) }));
+    return (_jsx(AvatarContainer, { "$opacity": props.opacity || 1, children: props.src && !srcError ? (_jsx(RoundedImage, { src: props.src, "$size": props.size, onError: handleSrcError })) : showInitials ? (_jsx(InitialsCircle, { "$size": props.size, "$bg": INITIALS_PALETTE[props.name.charCodeAt(0) % INITIALS_PALETTE.length], children: getInitials(props.name) })) : (_jsx(StyledAvatar, { height: props.size, width: props.size, "$color": props.color })) }));
 };

package/dist/es/components/Button.js

@@ -68,10 +68,10 @@ const btnStyles = css `
     margin-left: ${(props) => props.theme.grid.unit}px;
   }
 
-  ${(props) => props.danger && dangerBtnStyles}
-  ${(props) => props.mini && miniBtnStyles}
+  ${(props) => props.$danger && dangerBtnStyles}
+  ${(props) => props.$mini && miniBtnStyles}
 
-  :disabled {
+  &:disabled {
     ${disabledBtnStyles}
   }
 
@@ -141,8 +141,8 @@ export const IconTextButton = styled(ButtonTemplate) `
 `;
 export const ToggleButton = styled(ButtonTemplate) `
   color: ${(props) => props.theme.colors.text.primary};
-  background-color: ${(props) => props.selected ? props.theme.colors.background.fifth : 'transparent'};
-  border-color: ${(props) => props.selected
+  background-color: ${(props) => props.$selected ? props.theme.colors.background.fifth : 'transparent'};
+  border-color: ${(props) => props.$selected
     ? props.theme.colors.border.primary
     : props.theme.colors.border.secondary};
 
@@ -164,14 +164,14 @@ export const ToggleButton = styled(ButtonTemplate) `
 
   svg {
     path[stroke] {
-      stroke: ${(props) => props.selected
+      stroke: ${(props) => props.$selected
     ? props.theme.colors.brand.medium
     : props.theme.colors.text.primary};
     }
     text[fill],
     rect[fill],
     path[fill] {
-      fill: ${(props) => props.selected
+      fill: ${(props) => props.$selected
     ? props.theme.colors.brand.medium
     : props.theme.colors.text.primary};
     }
@@ -183,7 +183,7 @@ export const ToggleButtonAlt = styled(ButtonTemplate) `
   border: none;
   border-bottom: 1px solid transparent;
   border-radius: 0;
-  ${(props) => props.selected && 'border-color: ' + props.theme.colors.border.info};
+  ${(props) => props.$selected && 'border-color: ' + props.theme.colors.border.info};
 
   font-size: ${(props) => props.theme.font.size.normal};
   padding: 0 ${(props) => props.theme.grid.unit}px;
@@ -205,21 +205,21 @@ const svgColors = css `
 
   svg {
     path[stroke] {
-      stroke: ${(props) => props.iconColor || 'currentColor'};
+      stroke: ${(props) => props.$iconColor || 'currentColor'};
     }
     text[fill],
     rect[fill],
     path[fill] {
-      fill: ${(props) => props.iconColor || 'currentColor'};
+      fill: ${(props) => props.$iconColor || 'currentColor'};
     }
   }
 `;
 const IconButtonTemplate = styled(ButtonTemplate) `
   padding: 0;
-  height: ${(props) => props.size || 40}px;
-  width: ${(props) => props.size || 40}px;
+  height: ${(props) => props.$size || 40}px;
+  width: ${(props) => props.$size || 40}px;
 
-  ${(props) => !props.defaultColor && svgColors}
+  ${(props) => !props.$defaultColor && svgColors}
 `;
 export const IconButton = styled(IconButtonTemplate) `
   ${(props) => btnColors(props.theme.colors.text.primary, props.theme.colors.button.default.background.default, props.theme.colors.button.default.border.default, false)}
@@ -233,7 +233,7 @@ export const IconButton = styled(IconButtonTemplate) `
   }
 `;
 export const RoundIconButton = styled(IconButton).attrs((props) => ({
-    defaultColor: true,
+    $defaultColor: true,
 })) `
   background: ${(props) => props.theme.colors.background.primary};
   border: 5px solid ${(props) => props.theme.colors.background.primary} !important;
@@ -280,8 +280,8 @@ export const IconButtonGroup = styled.div `
   justify-content: flex-start;
   align-items: center;
   button {
-    width: ${(props) => props.size || 28}px;
-    height: ${(props) => props.size || 28}px;
+    width: ${(props) => props.$size || 28}px;
+    height: ${(props) => props.$size || 28}px;
   }
 `;
 export const TextButton = styled(IconTextButton) `

package/dist/es/components/Checkbox.js

@@ -34,14 +34,14 @@ export const CheckboxLabel = styled.label `
     font-family: ${(props) => props.theme.font.family.sans};
     font-size: ${(props) => props.theme.font.size.normal};
     font-weight: ${(props) => props.theme.font.weight.normal};
-    color: ${(props) => props.disabled
+    color: ${(props) => props.$disabled
     ? props.theme.colors.text.muted
     : props.theme.colors.text.primary};
     display: flex;
     flex-wrap: nowrap;
     line-height: 20px;
     margin: 8px 0;
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    cursor: ${(props) => (props.$disabled ? 'not-allowed' : 'pointer')};
 
     &::before {
       content: '';

package/dist/es/components/ContextMenu.js

@@ -63,7 +63,7 @@ export const ContextMenu = ({ actions }) => {
             container.removeEventListener('keydown', handleKeyDown);
         };
     }, [actions]);
-    return (_jsx(IconButtonGroup, { size: 32, ref: containerRef, children: actions.map((action) => {
+    return (_jsx(IconButtonGroup, { "$size": 32, ref: containerRef, children: actions.map((action) => {
             const Icon = icons[action.icon];
             return (_jsx(ContextMenuIconButton, { "data-tooltip-content": action.label, onClick: action.disabled === true ? () => null : action.action, className: action.selected ? 'selected' : '', disabled: !!action.disabled, children: _jsx(Icon, { width: 18, height: 18 }) }, action.icon));
         }) }));

package/dist/es/components/DateInput.js

@@ -4,10 +4,10 @@ import { CalendarIcon } from './icons';
 const inputStyles = css `
   box-sizing: border-box;
   width: 100%;
-  min-height: ${(props) => (props.variant === 'small' ? '32px' : '40px')};
+  min-height: ${(props) => (props.$variant === 'small' ? '32px' : '40px')};
   padding: 0 36px 0 12px;
   border: 1px solid
-    ${(props) => props.error
+    ${(props) => props.$error
     ? props.theme.colors.border.error
     : props.theme.colors.border.field.default};
   border-radius: 3px;
@@ -41,7 +41,7 @@ const inputStyles = css `
 
   &:focus:not(:disabled) {
     border: 2px solid
-      ${(props) => props.error
+      ${(props) => props.$error
     ? props.theme.colors.border.error
     : props.theme.colors.brand.default};
     background-color: #f2fbfc;

package/dist/es/components/Dialog.js

@@ -93,7 +93,7 @@ const SecondaryTextDanger = styled.button.attrs({ type: 'button' }) `
     opacity: 0.5;
   }
 `;
-const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? (_jsx(PrimaryButton, { danger: true, disabled: props.disabled, form: "formDialog", type: "submit", children: props.title })) : (_jsx(PrimaryButton, { danger: true, disabled: props.disabled, onClick: props.action, autoFocus: true, children: props.title }))) : props.hasForm ? (_jsx(PrimaryButton, { disabled: props.disabled, form: "formDialog", type: "submit", children: props.title })) : (_jsx(PrimaryButton, { disabled: props.disabled, onClick: props.action, autoFocus: true, children: props.title }));
+const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? (_jsx(PrimaryButton, { "$danger": true, disabled: props.disabled, form: "formDialog", type: "submit", children: props.title })) : (_jsx(PrimaryButton, { "$danger": true, disabled: props.disabled, onClick: props.action, autoFocus: true, children: props.title }))) : props.hasForm ? (_jsx(PrimaryButton, { disabled: props.disabled, form: "formDialog", type: "submit", children: props.title })) : (_jsx(PrimaryButton, { disabled: props.disabled, onClick: props.action, autoFocus: true, children: props.title }));
 const SecondaryAction = (props) => props.variant === 'textDanger' ? (_jsx(SecondaryTextDanger, { disabled: props.disabled, onClick: props.action, children: props.title })) : (_jsx(SecondaryButton, { disabled: props.disabled, onClick: props.action, children: props.title }));
 export class Dialog extends React.Component {
     constructor() {

package/dist/es/components/Drawer.js

@@ -11,7 +11,7 @@ const slideIn = keyframes `
   }
 `;
 const DrawerContainer = withFocusTrap(styled.div `
-  width: ${(props) => props.width || '300px'};
+  width: ${(props) => props.$width || '300px'};
   background: ${(props) => props.theme.colors.background.primary};
   height: 100%;
   display: flex;
@@ -96,5 +96,5 @@ export const DrawerItemMeta = styled.span `
   color: ${(props) => props.theme.colors.text.secondary};
 `;
 export const Drawer = ({ title, onBack, width, children, }) => {
-    return (_jsxs(DrawerContainer, { "data-cy": "drawer", width: width, children: [_jsxs(DrawerBackButton, { onClick: onBack, children: [_jsx("span", { children: "\u2190" }), "Back"] }), _jsx(DrawerTitle, { children: title }), children] }));
+    return (_jsxs(DrawerContainer, { "data-cy": "drawer", "$width": width, children: [_jsxs(DrawerBackButton, { onClick: onBack, children: [_jsx("span", { children: "\u2190" }), "Back"] }), _jsx(DrawerTitle, { children: title }), children] }));
 };

package/dist/es/components/Dropdown.js

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
-export const DropdownList = styled.div.attrs({ 'data-cy': 'dropdown' }) `
+export const DropdownList = styled.div.attrs({
+    'data-cy': 'dropdown',
+}) `
   display: flex;
   flex-direction: column;
   border: 1px solid ${(props) => props.theme.colors.border.secondary};
@@ -7,10 +9,10 @@ export const DropdownList = styled.div.attrs({ 'data-cy': 'dropdown' }) `
   border-radius: 4px;
   box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
   background: ${(props) => props.theme.colors.background.primary};
-  width: ${(props) => (props.width ? props.width + 'px' : 'auto')};
-  ${(props) => props.height && `max-height: ${props.height}px`};
-  ${(props) => (props.direction === 'right' ? ' right: 0' : 'left : 0')};
-  top: ${(props) => props.theme.grid.unit * (props.top || 3)}px;
+  width: ${(props) => (props.$width ? props.$width + 'px' : 'auto')};
+  ${(props) => props.$height && `max-height: ${props.$height}px`};
+  ${(props) => (props.$direction === 'right' ? ' right: 0' : 'left : 0')};
+  top: ${(props) => props.theme.grid.unit * (props.$top || 3)}px;
   position: absolute;
   z-index: 10;
   justify-content: space-evenly;

package/dist/es/components/ExpandableSection.js

@@ -10,7 +10,7 @@ export const ExpandableSection = ({ title, children, defaultOpen = true, bordere
             setOpen((prev) => !prev);
         }
     };
-    return (_jsxs(Container, { bordered: bordered, children: [_jsxs(Header, { onClick: () => setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": open, children: [_jsx(Title, { children: title }), _jsx(ArrowIcon, { open: open })] }), _jsx(ContentOuter, { open: open, inert: !open || undefined, children: _jsx(ContentInner, { children: _jsx("div", { children: children }) }) })] }));
+    return (_jsxs(Container, { bordered: bordered, children: [_jsxs(Header, { onClick: () => setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": open, children: [_jsx(Title, { children: title }), _jsx(ArrowIcon, { "$open": open })] }), _jsx(ContentOuter, { "$open": open, inert: !open || undefined, children: _jsx(ContentInner, { children: _jsx("div", { children: children }) }) })] }));
 };
 const Container = styled.div `
   border: ${(props) => props.bordered
@@ -33,15 +33,15 @@ const Title = styled.span `
 `;
 const ArrowIcon = styled(ArrowDownCircleIcon) `
   transition: transform 0.25s ease;
-  transform: rotate(${(props) => (props.open ? '180deg' : '0deg')});
+  transform: rotate(${(props) => (props.$open ? '180deg' : '0deg')});
 `;
 const ContentOuter = styled.div `
   display: grid;
-  grid-template-rows: ${(props) => (props.open ? '1fr' : '0fr')};
-  overflow: ${(props) => (props.open ? 'visible' : 'hidden')};
+  grid-template-rows: ${(props) => (props.$open ? '1fr' : '0fr')};
+  overflow: ${(props) => (props.$open ? 'visible' : 'hidden')};
   transition:
     grid-template-rows 0.25s ease,
-    overflow 0s ${(props) => (props.open ? '0.25s' : '0s')} allow-discrete;
+    overflow 0s ${(props) => (props.$open ? '0.25s' : '0s')} allow-discrete;
 `;
 const ContentInner = styled.div `
   overflow: visible;

package/dist/es/components/Form.js

@@ -58,12 +58,12 @@ export const FormField = styled.div `
 `;
 export const FormRow = styled.div `
   display: flex;
-  flex-direction: ${(props) => props.direction ?? 'column'};
+  flex-direction: ${(props) => props.$direction ?? 'column'};
   gap: ${(props) => props.theme.grid.unit * 2}px;
   margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
-  justify-content: ${(props) => props.justify ?? 'flex-start'};
-  align-items: ${(props) => props.align ?? (props.direction === 'row' ? 'center' : 'stretch')};
-  flex-wrap: ${(props) => (props.direction === 'row' ? 'wrap' : 'nowrap')};
+  justify-content: ${(props) => props.$justify ?? 'flex-start'};
+  align-items: ${(props) => props.$align ?? (props.$direction === 'row' ? 'center' : 'stretch')};
+  flex-wrap: ${(props) => (props.$direction === 'row' ? 'wrap' : 'nowrap')};
 `;
 export const FormLabel = styled.legend `
   &:not(:first-child) {

package/dist/es/components/Menus/Menus.js

@@ -21,10 +21,10 @@ const MenuContainer = styled.div `
   & ${MenuHeading} {
     background-color: ${(props) => props.theme.colors.background.secondary};
     line-height: 24px;
-    color: ${(props) => (props.isEnabled ? '#353535' : '#e2e2e2')};
+    color: ${(props) => (props.$isEnabled ? '#353535' : '#e2e2e2')};
 
     &:hover {
-      background-color: ${(props) => (props.isEnabled ? '#f2fbfc' : '#fff')};
+      background-color: ${(props) => (props.$isEnabled ? '#f2fbfc' : '#fff')};
     }
   }
 `;
@@ -84,12 +84,12 @@ export const Menus = ({ menus, innerRef, handleClick, close, }) => {
         }
     };
     return (_jsx(MenusContainer, { ref: innerRef, "data-cy": 'manuscript-menus', onKeyDown: handleKeyDown, children: menus.map((menu, index) => {
-            return (_jsxs(MenuContainer, { "data-cy": 'menu', isEnabled: menu.isEnabled, children: [_jsx(MenuHeading, { ref: (el) => {
+            return (_jsxs(MenuContainer, { "data-cy": 'menu', "$isEnabled": menu.isEnabled, children: [_jsx(MenuHeading, { ref: (el) => {
                             menuHeadingsRef.current[index] = el;
                         }, onMouseDown: (e) => {
                             e.preventDefault();
                             handleClick([index]);
-                        }, isOpen: menu.isOpen, children: _jsx(Text, { children: menu.label }) }), menu.isEnabled && menu.isOpen && menu.submenu && (_jsx(SubmenusContainerWrapper, { children: _jsx(SubmenusContainer, { "data-submenu-container": true, tabIndex: -1, children: menu.submenu.map((submenu, sindex) => {
+                        }, "$isOpen": menu.isOpen, children: _jsx(Text, { children: menu.label }) }), menu.isEnabled && menu.isOpen && menu.submenu && (_jsx(SubmenusContainerWrapper, { children: _jsx(SubmenusContainer, { "data-submenu-container": true, tabIndex: -1, children: menu.submenu.map((submenu, sindex) => {
                                 return (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), close: close }, `${index}-${sindex}`));
                             }) }) }))] }, `menu-${index}`));
         }) }));

package/dist/es/components/Menus/Submenu.js

@@ -65,7 +65,7 @@ const Container = styled.div `
   cursor: pointer;
   padding: 8px 16px 8px 4px;
   outline: none;
-  ${(props) => props.isOpen && 'background: #f2fbfc;'}
+  ${(props) => props.$isOpen && 'background: #f2fbfc;'}
 
   &:hover, &:focus {
     background: #f2fbfc;
@@ -152,7 +152,7 @@ export const SubmenuLabel = ({ menu, handleClick, close, }) => {
             }
         }
     };
-    return (_jsxs(Container, { isOpen: menu.isOpen, "data-cy": 'submenu', "data-submenu-item": true, className: menu.isEnabled ? '' : 'disabled', tabIndex: -1, onMouseDown: (e) => {
+    return (_jsxs(Container, { "$isOpen": menu.isOpen, "data-cy": 'submenu', "data-submenu-item": true, className: menu.isEnabled ? '' : 'disabled', tabIndex: -1, onMouseDown: (e) => {
             e.preventDefault();
             handleClick([]);
         }, onKeyDown: handleKeyDown, children: [_jsx(Active, { children: activeContent(menu) }), _jsx(Text, { children: menu.label }), menu.submenu && _jsx(Arrow, {}), menu.shortcut && _jsx(Shortcut, { shortcut: menu.shortcut })] }));

package/dist/es/components/NavDropdown.js

@@ -20,9 +20,9 @@ export const NavDropdown = styled.div `
   font-weight: ${(props) => props.theme.font.weight.normal};
   max-height: 80vh;
   max-width: 300px;
-  ${(props) => props.minWidth && 'min-width: ' + props.minWidth + 'px;'}
-  ${(props) => (props.direction === 'right' ? ' right: 0' : 'left : 0')};
-  top: ${(props) => (props.top ? props.top : props.theme.grid.unit * 10)}px;
+  ${(props) => props.$minWidth && 'min-width: ' + props.$minWidth + 'px;'}
+  ${(props) => (props.$direction === 'right' ? ' right: 0' : 'left : 0')};
+  top: ${(props) => (props.$top ? props.$top : props.theme.grid.unit * 10)}px;
   position: absolute;
   z-index: 10;
 `;
@@ -43,10 +43,10 @@ const commonStyles = css `
   align-items: center;
   text-decoration: none;
   white-space: nowrap;
-  color: ${(props) => props.disabled
+  color: ${(props) => props.$disabled
     ? props.theme.colors.text.secondary
     : props.theme.colors.text.primary};
-  pointer-events: ${(props) => (props.disabled ? 'none' : 'unset')};
+  pointer-events: ${(props) => (props.$disabled ? 'none' : 'unset')};
 
   &:hover {
     background: ${(props) => props.theme.colors.background.fifth};
@@ -84,7 +84,7 @@ export const NavDropdownToggle = styled(ArrowUpIcon) `
   }
 `;
 export const NotificationsBadge = styled.div `
-  background-color: ${(props) => props.isOpen
+  background-color: ${(props) => props.$isOpen
     ? props.theme.colors.background.success
     : props.theme.colors.brand.default};
   color: ${(props) => props.theme.colors.text.onDark};
@@ -100,12 +100,10 @@ export const NotificationsBadge = styled.div `
   padding: 2px;
   border-radius: 50px;
 `;
-export const NavDropdownButtonContainer = styled(SecondaryButton).attrs((props) => ({
-    selected: props.isOpen,
-})) `
+export const NavDropdownButtonContainer = styled(SecondaryButton) `
   .inheritColors path {
     fill: currentColor;
     stroke: currentColor;
   }
 `;
-export const NavDropdownButton = ({ as, children, disabled, isOpen, notificationsCount, onClick, removeChevron, buttonRef, }) => (_jsxs(NavDropdownButtonContainer, { ref: buttonRef, as: as, disabled: disabled, onClick: onClick, isOpen: isOpen, className: 'dropdown-toggle', tabIndex: 0, children: [_jsx(NavDropdownButtonText, { children: children }), !!notificationsCount && (_jsx(NotificationsBadge, { isOpen: isOpen, children: notificationsCount })), !removeChevron && _jsx(NavDropdownToggle, { className: isOpen ? 'open' : '' })] }));
+export const NavDropdownButton = ({ as, children, disabled, isOpen, notificationsCount, onClick, removeChevron, buttonRef, }) => (_jsxs(NavDropdownButtonContainer, { ref: buttonRef, as: as, disabled: disabled, onClick: onClick, "$isOpen": isOpen, className: 'dropdown-toggle', tabIndex: 0, children: [_jsx(NavDropdownButtonText, { children: children }), !!notificationsCount && (_jsx(NotificationsBadge, { "$isOpen": isOpen, children: notificationsCount })), !removeChevron && _jsx(NavDropdownToggle, { className: isOpen ? 'open' : '' })] }));

package/dist/es/components/Resizer/ResizerButton.js

@@ -14,6 +14,6 @@ const inners = {
 export const ResizerButton = React.memo(({ buttonInner, direction, side, isCollapsed = false, isVisible = false, onClick, }) => {
     const preventMouseDown = useCallback((event) => event.preventDefault(), []);
     const ResizerButtonInner = buttonInner || inners[direction][side];
-    return (_jsx(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: preventMouseDown, tabIndex: 0 }));
+    return (_jsx(ResizerButtonInner, { "aria-expanded": !isCollapsed, "$isCollapsed": isCollapsed, "$isVisible": isVisible, onClick: onClick, onMouseDown: preventMouseDown, tabIndex: 0 }));
 });
 ResizerButton.displayName = 'ResizerButton';

package/dist/es/components/Resizer/ResizerButtonInner.js

@@ -25,7 +25,7 @@ const ResizerButtonInner = styled.button `
     background-color: #ddd;
     border-radius: ${toggleArrowDepth}px;
     position: absolute;
-    opacity: ${(props) => (props.isVisible ? 1 : 0.5)};
+    opacity: ${(props) => (props.$isVisible ? 1 : 0.5)};
     transition: ${transformTransition}, ${opacityTransition};
   }
 
@@ -78,10 +78,10 @@ export const HorizontalEndResizerButtonInner = styled(HorizontalResizerButtonInn
   &:hover,
   &:focus {
     &::before {
-      transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
+      transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
     }
     &::after {
-      transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
+      transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
     }
   }
 `;
@@ -96,10 +96,10 @@ export const HorizontalStartResizerButtonInner = styled(HorizontalResizerButtonI
   &:hover,
   &:focus {
     &::before {
-      transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
+      transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
     }
     &::after {
-      transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
+      transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
     }
   }
 `;
@@ -134,10 +134,10 @@ export const VerticalEndResizerButtonInner = styled(VerticalResizerButtonInner)
   &:hover,
   &:focus {
     &::before {
-      transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
+      transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
     }
     &::after {
-      transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
+      transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
     }
   }
 `;
@@ -154,10 +154,10 @@ export const VerticalStartResizerButtonInner = styled(VerticalResizerButtonInner
   &:hover,
   &:focus {
     &::before {
-      transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
+      transform: rotate(${(props) => (props.$isCollapsed ? '-40deg' : '40deg')});
     }
     &::after {
-      transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
+      transform: rotate(${(props) => (props.$isCollapsed ? '40deg' : '-40deg')});
     }
   }
 `;

package/dist/es/components/SelectedItemsBox.js

@@ -36,10 +36,10 @@ const Item = styled.div `
   display: flex;
   align-items: center;
   gap: 4px;
-  background: ${(props) => (props.disabled ? '#dddcdc' : '#f2f2f2')};
+  background: ${(props) => (props.$disabled ? '#dddcdc' : '#f2f2f2')};
   border-radius: 6px;
   padding: 4px;
-  color: ${(props) => props.disabled ? '#707070' : props.theme.colors.text.primary};
+  color: ${(props) => props.$disabled ? '#707070' : props.theme.colors.text.primary};
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.small}
     ${(props) => props.theme.font.family.sans};
@@ -65,6 +65,6 @@ const RemoveButton = styled.button `
   }
 `;
 export const SelectedItemsBox = ({ items, onRemove, placeholder = 'No items selected', ...props }) => {
-    return (_jsx(BoxContainer, { ...props, children: items.length > 0 ? (_jsx(ItemsList, { children: items.map((item) => (_jsxs(Item, { "data-cy": "item", disabled: !!props.disabled, children: [item.label, !props.disabled && (_jsx(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" }))] }, item.id))) })) : (_jsx(EmptyContainer, { children: _jsx(Placeholder, { children: placeholder }) })) }));
+    return (_jsx(BoxContainer, { ...props, children: items.length > 0 ? (_jsx(ItemsList, { children: items.map((item) => (_jsxs(Item, { "data-cy": "item", "$disabled": !!props.disabled, children: [item.label, !props.disabled && (_jsx(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" }))] }, item.id))) })) : (_jsx(EmptyContainer, { children: _jsx(Placeholder, { children: placeholder }) })) }));
 };
 export default SelectedItemsBox;

package/dist/es/components/StyledModal.js

@@ -141,8 +141,8 @@ export const CloseButton = styled(RoundIconButton) `
   text-indent: -99999px;
   z-index: 2;
 
-  ::before,
-  ::after {
+  &::before,
+  &::after {
     background-color: ${(props) => props.theme.colors.text.secondary};
     border-radius: 2px;
     content: ' ';
@@ -154,7 +154,7 @@ export const CloseButton = styled(RoundIconButton) `
     top: calc(50% - 7px);
     left: calc(50% - 1px);
   }
-  ::after {
+  &::after {
     transform: rotate(45deg);
   }
 `;
@@ -204,10 +204,10 @@ export const ModalCardBody = styled.div `
   box-sizing: border-box;
   padding: ${(props) => 6 * props.theme.grid.unit}px;
   background-color: ${(props) => props.theme.colors.background.primary};
-  width: ${(props) => props.width
-    ? typeof props.width === 'number'
-        ? `${props.width}px`
-        : props.width
+  width: ${(props) => props.$width
+    ? typeof props.$width === 'number'
+        ? `${props.$width}px`
+        : props.$width
     : '640px'};
   max-width: 60vw;
   max-height: 80vh;

package/dist/es/components/SystemUserAvatar.js

@@ -9,19 +9,19 @@ const SystemUserAvatarContainer = styled.div `
   position: relative;
 `;
 const RoundedImage = styled.img `
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
   border-radius: 50%;
   align-items: center;
   justify-content: center;
 `;
 const StyledAvatar = styled(SystemUserAvatarIcon) `
   path {
-    fill: ${(props) => props.color || props.theme.colors.text.secondary};
+    fill: ${(props) => props.$color || props.theme.colors.text.secondary};
   }
 
   &:hover path {
-    fill: ${(props) => props.color || props.theme.colors.text.info};
+    fill: ${(props) => props.$color || props.theme.colors.text.info};
   }
 `;
 export const Avatar = (props) => {
@@ -29,5 +29,5 @@ export const Avatar = (props) => {
     const handleSrcError = useCallback(() => {
         setSrcError(true);
     }, []);
-    return (_jsx(SystemUserAvatarContainer, { children: props.src && !srcError ? (_jsx(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : (_jsx(StyledAvatar, { height: props.size, width: props.size, color: props.color })) }));
+    return (_jsx(SystemUserAvatarContainer, { children: props.src && !srcError ? (_jsx(RoundedImage, { src: props.src, "$size": props.size, onError: handleSrcError })) : (_jsx(StyledAvatar, { height: props.size, width: props.size, "$color": props.color })) }));
 };