@manuscripts/style-guide 3.6.2 → 3.6.3

package/README.md

@@ -9,9 +9,9 @@ React components for Manuscripts applications.
 import { PrimaryButton } from '@manuscripts/style-guide'
 
 const Example: React.FunctionComponent<{ 
-  handleClick: React.MouseEventHandler<HTMLButtonElement> 
+  handleClick: React.MouseEventHandler<HTMLButtonElement>   
 }> = ({ handleClick }) => (
-  <div>
+  <div> 
     <PrimaryButton onClick={handleClick}>Done</PrimaryButton>
   </div> 
 )
@@ -19,7 +19,7 @@ const Example: React.FunctionComponent<{
 
 ## Development  
 
-Run `yarn build` to build the `dist` folder for distribution.   
+Run `yarn build` to build the `dist` folder for distribution.     
 
 Run `yarn dev` to automatically rebuild when a file is changed.
 

package/dist/cjs/components/Avatar.js

@@ -30,32 +30,32 @@ const AvatarContainer = styled_components_1.default.div `
   align-items: center;
   justify-content: center;
   position: relative;
-  opacity: ${(props) => props.opacity};
+  opacity: ${(props) => props.$opacity};
 `;
 const RoundedImage = styled_components_1.default.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 = (0, styled_components_1.default)(icons_1.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_components_1.default.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;
@@ -68,6 +68,6 @@ const Avatar = (props) => {
         setSrcError(true);
     }, []);
     const showInitials = (!props.src || srcError) && !!props.name;
-    return ((0, jsx_runtime_1.jsx)(AvatarContainer, { opacity: props.opacity || 1, children: props.src && !srcError ? ((0, jsx_runtime_1.jsx)(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : showInitials ? ((0, jsx_runtime_1.jsx)(InitialsCircle, { size: props.size, bg: INITIALS_PALETTE[props.name.charCodeAt(0) % INITIALS_PALETTE.length], children: getInitials(props.name) })) : ((0, jsx_runtime_1.jsx)(StyledAvatar, { height: props.size, width: props.size, color: props.color })) }));
+    return ((0, jsx_runtime_1.jsx)(AvatarContainer, { "$opacity": props.opacity || 1, children: props.src && !srcError ? ((0, jsx_runtime_1.jsx)(RoundedImage, { src: props.src, "$size": props.size, onError: handleSrcError })) : showInitials ? ((0, jsx_runtime_1.jsx)(InitialsCircle, { "$size": props.size, "$bg": INITIALS_PALETTE[props.name.charCodeAt(0) % INITIALS_PALETTE.length], children: getInitials(props.name) })) : ((0, jsx_runtime_1.jsx)(StyledAvatar, { height: props.size, width: props.size, "$color": props.color })) }));
 };
 exports.Avatar = Avatar;

package/dist/cjs/components/Button.js

@@ -104,10 +104,10 @@ const btnStyles = (0, styled_components_1.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}
   }
 
@@ -177,8 +177,8 @@ exports.IconTextButton = (0, styled_components_1.default)(ButtonTemplate) `
 `;
 exports.ToggleButton = (0, styled_components_1.default)(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};
 
@@ -200,14 +200,14 @@ exports.ToggleButton = (0, styled_components_1.default)(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};
     }
@@ -219,7 +219,7 @@ exports.ToggleButtonAlt = (0, styled_components_1.default)(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;
@@ -241,21 +241,21 @@ const svgColors = (0, styled_components_1.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 = (0, styled_components_1.default)(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}
 `;
 exports.IconButton = (0, styled_components_1.default)(IconButtonTemplate) `
   ${(props) => btnColors(props.theme.colors.text.primary, props.theme.colors.button.default.background.default, props.theme.colors.button.default.border.default, false)}
@@ -269,7 +269,7 @@ exports.IconButton = (0, styled_components_1.default)(IconButtonTemplate) `
   }
 `;
 exports.RoundIconButton = (0, styled_components_1.default)(exports.IconButton).attrs((props) => ({
-    defaultColor: true,
+    $defaultColor: true,
 })) `
   background: ${(props) => props.theme.colors.background.primary};
   border: 5px solid ${(props) => props.theme.colors.background.primary} !important;
@@ -316,8 +316,8 @@ exports.IconButtonGroup = styled_components_1.default.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;
   }
 `;
 exports.TextButton = (0, styled_components_1.default)(exports.IconTextButton) `

package/dist/cjs/components/Checkbox.js

@@ -40,14 +40,14 @@ exports.CheckboxLabel = styled_components_1.default.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/cjs/components/ContextMenu.js

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

package/dist/cjs/components/DateInput.js

@@ -40,10 +40,10 @@ const icons_1 = require("./icons");
 const inputStyles = (0, styled_components_1.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;
@@ -77,7 +77,7 @@ const inputStyles = (0, styled_components_1.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/cjs/components/Dialog.js

@@ -99,7 +99,7 @@ const SecondaryTextDanger = styled_components_1.default.button.attrs({ type: 'bu
     opacity: 0.5;
   }
 `;
-const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, { danger: true, disabled: props.disabled, form: "formDialog", type: "submit", children: props.title })) : ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, { danger: true, disabled: props.disabled, onClick: props.action, autoFocus: true, children: props.title }))) : props.hasForm ? ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, { disabled: props.disabled, form: "formDialog", type: "submit", children: props.title })) : ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, { disabled: props.disabled, onClick: props.action, autoFocus: true, children: props.title }));
+const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, { "$danger": true, disabled: props.disabled, form: "formDialog", type: "submit", children: props.title })) : ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, { "$danger": true, disabled: props.disabled, onClick: props.action, autoFocus: true, children: props.title }))) : props.hasForm ? ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, { disabled: props.disabled, form: "formDialog", type: "submit", children: props.title })) : ((0, jsx_runtime_1.jsx)(Button_1.PrimaryButton, { disabled: props.disabled, onClick: props.action, autoFocus: true, children: props.title }));
 const SecondaryAction = (props) => props.variant === 'textDanger' ? ((0, jsx_runtime_1.jsx)(SecondaryTextDanger, { disabled: props.disabled, onClick: props.action, children: props.title })) : ((0, jsx_runtime_1.jsx)(Button_1.SecondaryButton, { disabled: props.disabled, onClick: props.action, children: props.title }));
 class Dialog extends react_1.default.Component {
     constructor() {

package/dist/cjs/components/Drawer.js

@@ -47,7 +47,7 @@ const slideIn = (0, styled_components_1.keyframes) `
   }
 `;
 const DrawerContainer = (0, List_1.withFocusTrap)(styled_components_1.default.div `
-  width: ${(props) => props.width || '300px'};
+  width: ${(props) => props.$width || '300px'};
   background: ${(props) => props.theme.colors.background.primary};
   height: 100%;
   display: flex;
@@ -132,6 +132,6 @@ exports.DrawerItemMeta = styled_components_1.default.span `
   color: ${(props) => props.theme.colors.text.secondary};
 `;
 const Drawer = ({ title, onBack, width, children, }) => {
-    return ((0, jsx_runtime_1.jsxs)(DrawerContainer, { "data-cy": "drawer", width: width, children: [(0, jsx_runtime_1.jsxs)(DrawerBackButton, { onClick: onBack, children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2190" }), "Back"] }), (0, jsx_runtime_1.jsx)(DrawerTitle, { children: title }), children] }));
+    return ((0, jsx_runtime_1.jsxs)(DrawerContainer, { "data-cy": "drawer", "$width": width, children: [(0, jsx_runtime_1.jsxs)(DrawerBackButton, { onClick: onBack, children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2190" }), "Back"] }), (0, jsx_runtime_1.jsx)(DrawerTitle, { children: title }), children] }));
 };
 exports.Drawer = Drawer;

package/dist/cjs/components/Dropdown.js

@@ -5,7 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownButton = exports.DropdownContainer = exports.DropdownList = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.DropdownList = styled_components_1.default.div.attrs({ 'data-cy': 'dropdown' }) `
+exports.DropdownList = styled_components_1.default.div.attrs({
+    'data-cy': 'dropdown',
+}) `
   display: flex;
   flex-direction: column;
   border: 1px solid ${(props) => props.theme.colors.border.secondary};
@@ -13,10 +15,10 @@ exports.DropdownList = styled_components_1.default.div.attrs({ 'data-cy': 'dropd
   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/cjs/components/ExpandableSection.js

@@ -16,7 +16,7 @@ const ExpandableSection = ({ title, children, defaultOpen = true, bordered = fal
             setOpen((prev) => !prev);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Container, { bordered: bordered, children: [(0, jsx_runtime_1.jsxs)(Header, { onClick: () => setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": open, children: [(0, jsx_runtime_1.jsx)(Title, { children: title }), (0, jsx_runtime_1.jsx)(ArrowIcon, { open: open })] }), (0, jsx_runtime_1.jsx)(ContentOuter, { open: open, inert: !open || undefined, children: (0, jsx_runtime_1.jsx)(ContentInner, { children: (0, jsx_runtime_1.jsx)("div", { children: children }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Container, { bordered: bordered, children: [(0, jsx_runtime_1.jsxs)(Header, { onClick: () => setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": open, children: [(0, jsx_runtime_1.jsx)(Title, { children: title }), (0, jsx_runtime_1.jsx)(ArrowIcon, { "$open": open })] }), (0, jsx_runtime_1.jsx)(ContentOuter, { "$open": open, inert: !open || undefined, children: (0, jsx_runtime_1.jsx)(ContentInner, { children: (0, jsx_runtime_1.jsx)("div", { children: children }) }) })] }));
 };
 exports.ExpandableSection = ExpandableSection;
 const Container = styled_components_1.default.div `
@@ -40,15 +40,15 @@ const Title = styled_components_1.default.span `
 `;
 const ArrowIcon = (0, styled_components_1.default)(icons_1.ArrowDownCircleIcon) `
   transition: transform 0.25s ease;
-  transform: rotate(${(props) => (props.open ? '180deg' : '0deg')});
+  transform: rotate(${(props) => (props.$open ? '180deg' : '0deg')});
 `;
 const ContentOuter = styled_components_1.default.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_components_1.default.div `
   overflow: visible;

package/dist/cjs/components/Form.js

@@ -64,12 +64,12 @@ exports.FormField = styled_components_1.default.div `
 `;
 exports.FormRow = styled_components_1.default.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')};
 `;
 exports.FormLabel = styled_components_1.default.legend `
   &:not(:first-child) {

package/dist/cjs/components/Menus/Menus.js

@@ -27,10 +27,10 @@ const MenuContainer = styled_components_1.default.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')};
     }
   }
 `;
@@ -90,12 +90,12 @@ const Menus = ({ menus, innerRef, handleClick, close, }) => {
         }
     };
     return ((0, jsx_runtime_1.jsx)(MenusContainer, { ref: innerRef, "data-cy": 'manuscript-menus', onKeyDown: handleKeyDown, children: menus.map((menu, index) => {
-            return ((0, jsx_runtime_1.jsxs)(MenuContainer, { "data-cy": 'menu', isEnabled: menu.isEnabled, children: [(0, jsx_runtime_1.jsx)(MenuHeading, { ref: (el) => {
+            return ((0, jsx_runtime_1.jsxs)(MenuContainer, { "data-cy": 'menu', "$isEnabled": menu.isEnabled, children: [(0, jsx_runtime_1.jsx)(MenuHeading, { ref: (el) => {
                             menuHeadingsRef.current[index] = el;
                         }, onMouseDown: (e) => {
                             e.preventDefault();
                             handleClick([index]);
-                        }, isOpen: menu.isOpen, children: (0, jsx_runtime_1.jsx)(Submenu_1.Text, { children: menu.label }) }), menu.isEnabled && menu.isOpen && menu.submenu && ((0, jsx_runtime_1.jsx)(Submenu_1.SubmenusContainerWrapper, { children: (0, jsx_runtime_1.jsx)(Submenu_1.SubmenusContainer, { "data-submenu-container": true, tabIndex: -1, children: menu.submenu.map((submenu, sindex) => {
+                        }, "$isOpen": menu.isOpen, children: (0, jsx_runtime_1.jsx)(Submenu_1.Text, { children: menu.label }) }), menu.isEnabled && menu.isOpen && menu.submenu && ((0, jsx_runtime_1.jsx)(Submenu_1.SubmenusContainerWrapper, { children: (0, jsx_runtime_1.jsx)(Submenu_1.SubmenusContainer, { "data-submenu-container": true, tabIndex: -1, children: menu.submenu.map((submenu, sindex) => {
                                 return ((0, jsx_runtime_1.jsx)(Submenu_1.Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), close: close }, `${index}-${sindex}`));
                             }) }) }))] }, `menu-${index}`));
         }) }));

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

@@ -71,7 +71,7 @@ const Container = styled_components_1.default.div `
   cursor: pointer;
   padding: 8px 16px 8px 4px;
   outline: none;
-  ${(props) => props.isOpen && 'background: #f2fbfc;'}
+  ${(props) => props.$isOpen && 'background: #f2fbfc;'}
 
   &:hover, &:focus {
     background: #f2fbfc;
@@ -158,7 +158,7 @@ const SubmenuLabel = ({ menu, handleClick, close, }) => {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Container, { isOpen: menu.isOpen, "data-cy": 'submenu', "data-submenu-item": true, className: menu.isEnabled ? '' : 'disabled', tabIndex: -1, onMouseDown: (e) => {
+    return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(Active, { children: activeContent(menu) }), (0, jsx_runtime_1.jsx)(exports.Text, { children: menu.label }), menu.submenu && (0, jsx_runtime_1.jsx)(Arrow, {}), menu.shortcut && (0, jsx_runtime_1.jsx)(Shortcut_1.Shortcut, { shortcut: menu.shortcut })] }));

package/dist/cjs/components/NavDropdown.js

@@ -56,9 +56,9 @@ exports.NavDropdown = styled_components_1.default.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;
 `;
@@ -79,10 +79,10 @@ const commonStyles = (0, styled_components_1.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};
@@ -120,7 +120,7 @@ exports.NavDropdownToggle = (0, styled_components_1.default)(icons_1.ArrowUpIcon
   }
 `;
 exports.NotificationsBadge = styled_components_1.default.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};
@@ -136,13 +136,11 @@ exports.NotificationsBadge = styled_components_1.default.div `
   padding: 2px;
   border-radius: 50px;
 `;
-exports.NavDropdownButtonContainer = (0, styled_components_1.default)(Button_1.SecondaryButton).attrs((props) => ({
-    selected: props.isOpen,
-})) `
+exports.NavDropdownButtonContainer = (0, styled_components_1.default)(Button_1.SecondaryButton) `
   .inheritColors path {
     fill: currentColor;
     stroke: currentColor;
   }
 `;
-const NavDropdownButton = ({ as, children, disabled, isOpen, notificationsCount, onClick, removeChevron, buttonRef, }) => ((0, jsx_runtime_1.jsxs)(exports.NavDropdownButtonContainer, { ref: buttonRef, as: as, disabled: disabled, onClick: onClick, isOpen: isOpen, className: 'dropdown-toggle', tabIndex: 0, children: [(0, jsx_runtime_1.jsx)(exports.NavDropdownButtonText, { children: children }), !!notificationsCount && ((0, jsx_runtime_1.jsx)(exports.NotificationsBadge, { isOpen: isOpen, children: notificationsCount })), !removeChevron && (0, jsx_runtime_1.jsx)(exports.NavDropdownToggle, { className: isOpen ? 'open' : '' })] }));
+const NavDropdownButton = ({ as, children, disabled, isOpen, notificationsCount, onClick, removeChevron, buttonRef, }) => ((0, jsx_runtime_1.jsxs)(exports.NavDropdownButtonContainer, { ref: buttonRef, as: as, disabled: disabled, onClick: onClick, "$isOpen": isOpen, className: 'dropdown-toggle', tabIndex: 0, children: [(0, jsx_runtime_1.jsx)(exports.NavDropdownButtonText, { children: children }), !!notificationsCount && ((0, jsx_runtime_1.jsx)(exports.NotificationsBadge, { "$isOpen": isOpen, children: notificationsCount })), !removeChevron && (0, jsx_runtime_1.jsx)(exports.NavDropdownToggle, { className: isOpen ? 'open' : '' })] }));
 exports.NavDropdownButton = NavDropdownButton;

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

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

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

@@ -31,7 +31,7 @@ const ResizerButtonInner = styled_components_1.default.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};
   }
 
@@ -84,10 +84,10 @@ exports.HorizontalEndResizerButtonInner = (0, styled_components_1.default)(Horiz
   &: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')});
     }
   }
 `;
@@ -102,10 +102,10 @@ exports.HorizontalStartResizerButtonInner = (0, styled_components_1.default)(Hor
   &: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')});
     }
   }
 `;
@@ -140,10 +140,10 @@ exports.VerticalEndResizerButtonInner = (0, styled_components_1.default)(Vertica
   &: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')});
     }
   }
 `;
@@ -160,10 +160,10 @@ exports.VerticalStartResizerButtonInner = (0, styled_components_1.default)(Verti
   &: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/cjs/components/SelectedItemsBox.js

@@ -42,10 +42,10 @@ const Item = styled_components_1.default.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};
@@ -71,7 +71,7 @@ const RemoveButton = styled_components_1.default.button `
   }
 `;
 const SelectedItemsBox = ({ items, onRemove, placeholder = 'No items selected', ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(BoxContainer, { ...props, children: items.length > 0 ? ((0, jsx_runtime_1.jsx)(ItemsList, { children: items.map((item) => ((0, jsx_runtime_1.jsxs)(Item, { "data-cy": "item", disabled: !!props.disabled, children: [item.label, !props.disabled && ((0, jsx_runtime_1.jsx)(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" }))] }, item.id))) })) : ((0, jsx_runtime_1.jsx)(EmptyContainer, { children: (0, jsx_runtime_1.jsx)(Placeholder, { children: placeholder }) })) }));
+    return ((0, jsx_runtime_1.jsx)(BoxContainer, { ...props, children: items.length > 0 ? ((0, jsx_runtime_1.jsx)(ItemsList, { children: items.map((item) => ((0, jsx_runtime_1.jsxs)(Item, { "data-cy": "item", "$disabled": !!props.disabled, children: [item.label, !props.disabled && ((0, jsx_runtime_1.jsx)(RemoveButton, { onClick: () => onRemove(item.id), "aria-label": `Remove ${item.label}`, children: "x" }))] }, item.id))) })) : ((0, jsx_runtime_1.jsx)(EmptyContainer, { children: (0, jsx_runtime_1.jsx)(Placeholder, { children: placeholder }) })) }));
 };
 exports.SelectedItemsBox = SelectedItemsBox;
 exports.default = exports.SelectedItemsBox;

package/dist/cjs/components/StyledModal.js

@@ -179,8 +179,8 @@ exports.CloseButton = (0, styled_components_1.default)(Button_1.RoundIconButton)
   text-indent: -99999px;
   z-index: 2;
 
-  ::before,
-  ::after {
+  &::before,
+  &::after {
     background-color: ${(props) => props.theme.colors.text.secondary};
     border-radius: 2px;
     content: ' ';
@@ -192,7 +192,7 @@ exports.CloseButton = (0, styled_components_1.default)(Button_1.RoundIconButton)
     top: calc(50% - 7px);
     left: calc(50% - 1px);
   }
-  ::after {
+  &::after {
     transform: rotate(45deg);
   }
 `;
@@ -242,10 +242,10 @@ exports.ModalCardBody = styled_components_1.default.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/cjs/components/SystemUserAvatar.js

@@ -15,19 +15,19 @@ const SystemUserAvatarContainer = styled_components_1.default.div `
   position: relative;
 `;
 const RoundedImage = styled_components_1.default.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 = (0, styled_components_1.default)(icons_1.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};
   }
 `;
 const Avatar = (props) => {
@@ -35,6 +35,6 @@ const Avatar = (props) => {
     const handleSrcError = (0, react_1.useCallback)(() => {
         setSrcError(true);
     }, []);
-    return ((0, jsx_runtime_1.jsx)(SystemUserAvatarContainer, { children: props.src && !srcError ? ((0, jsx_runtime_1.jsx)(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : ((0, jsx_runtime_1.jsx)(StyledAvatar, { height: props.size, width: props.size, color: props.color })) }));
+    return ((0, jsx_runtime_1.jsx)(SystemUserAvatarContainer, { children: props.src && !srcError ? ((0, jsx_runtime_1.jsx)(RoundedImage, { src: props.src, "$size": props.size, onError: handleSrcError })) : ((0, jsx_runtime_1.jsx)(StyledAvatar, { height: props.size, width: props.size, "$color": props.color })) }));
 };
 exports.Avatar = Avatar;

package/dist/cjs/components/TextField.js

@@ -39,7 +39,7 @@ const formik_1 = require("formik");
 const styled_components_1 = __importStar(require("styled-components"));
 exports.commonStyles = (0, styled_components_1.css) `
   border: 1px solid
-    ${(props) => props.error
+    ${(props) => props.$error
     ? props.theme.colors.border.error
     : props.theme.colors.border.field.default};
   border-radius: 3px;
@@ -50,19 +50,19 @@ exports.commonStyles = (0, styled_components_1.css) `
   line-height: ${(props) => props.theme.font.lineHeight.large};
   outline: none;
   padding: ${(props) => {
-    if (props.variant === 'small') {
+    if (props.$variant === 'small') {
         return '0 12px';
     }
-    if (props.variant === 'large') {
+    if (props.$variant === 'large') {
         return '4px 16px';
     }
     return '0 12px';
 }};
   min-height: ${(props) => {
-    if (props.variant === 'small') {
+    if (props.$variant === 'small') {
         return '32px';
     }
-    if (props.variant === 'large') {
+    if (props.$variant === 'large') {
         return '40px';
     }
     return '40px';
@@ -89,13 +89,13 @@ exports.commonStyles = (0, styled_components_1.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;
-    ${(props) => props.variant &&
+    ${(props) => props.$variant &&
     (0, styled_components_1.css) `
-        padding: ${(props) => props.variant === 'small' ? '0 11px' : '3px 15px'};
+        padding: ${(props) => props.$variant === 'small' ? '0 11px' : '3px 15px'};
       `}
   }