@manuscripts/style-guide 3.6.1 → 3.6.3

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 })) }));
 };

package/dist/es/components/TextField.js

@@ -3,7 +3,7 @@ import { Field } from 'formik';
 import styled, { css } from 'styled-components';
 export const commonStyles = css `
   border: 1px solid
-    ${(props) => props.error
+    ${(props) => props.$error
     ? props.theme.colors.border.error
     : props.theme.colors.border.field.default};
   border-radius: 3px;
@@ -14,19 +14,19 @@ export const commonStyles = 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';
@@ -53,13 +53,13 @@ export const commonStyles = 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 &&
     css `
-        padding: ${(props) => props.variant === 'small' ? '0 11px' : '3px 15px'};
+        padding: ${(props) => props.$variant === 'small' ? '0 11px' : '3px 15px'};
       `}
   }
 

package/dist/es/components/ToggleSwitch.js

@@ -6,8 +6,8 @@ const Track = styled.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:
@@ -29,7 +29,7 @@ const Track = styled.button `
 const Thumb = styled.span `
   position: absolute;
   top: 0;
-  left: ${(props) => (props.checked ? '14px' : '0px')};
+  left: ${(props) => (props.$checked ? '14px' : '0px')};
   width: 14px;
   height: 14px;
   border-radius: 50%;
@@ -37,14 +37,14 @@ const Thumb = styled.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.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};
@@ -55,8 +55,8 @@ const Container = styled.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'};
 `;
 export const ToggleSwitch = ({ checked, disabled, onChange, label, id, labelPosition = 'left', }) => {
-    return (_jsxs(Container, { labelPosition: labelPosition, children: [label && _jsx(LabelText, { disabled: disabled, children: label }), _jsx(Track, { id: id, type: "button", role: "switch", "aria-checked": checked, "aria-label": label, checked: checked, disabled: disabled, onClick: () => !disabled && onChange(!checked), children: _jsx(Thumb, { checked: checked, disabled: disabled }) })] }));
+    return (_jsxs(Container, { "$labelPosition": labelPosition, children: [label && _jsx(LabelText, { "$disabled": disabled, children: label }), _jsx(Track, { id: id, type: "button", role: "switch", "aria-checked": checked, "aria-label": label, "$checked": checked, disabled: disabled, onClick: () => !disabled && onChange(!checked), children: _jsx(Thumb, { "$checked": checked, "$disabled": disabled }) })] }));
 };

package/dist/types/components/Button.d.ts

@@ -17,99 +17,88 @@ export declare const outlineStyle: import("styled-components").FlattenInterpolat
 export declare const SecondaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 }, "type">;
 export declare const PrimaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 }, "type">;
 export declare const LoginButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 }, "type">;
 export declare const TertiaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 }, "type">;
 export declare const IconTextButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 }, "type">;
 export declare const ToggleButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 } & {
-    selected?: boolean;
+    $selected?: boolean;
 }, "type">;
 export declare const ToggleButtonAlt: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 } & {
-    selected?: boolean;
+    $selected?: boolean;
 }, "type">;
 export declare const IconButton: 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 RoundIconButton: 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;
-}, "type" | "defaultColor">;
+    $defaultColor: boolean;
+}, "type" | "$defaultColor">;
 export declare const SecondaryIconButton: 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 ButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const IconButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    size?: number;
+    $size?: number;
 }, never>;
 export declare const TextButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 }, "type">;

package/dist/types/components/Checkbox.d.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 export declare const CheckboxLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
-    disabled?: boolean;
+    $disabled?: boolean;
 }, never>;
 export declare const CheckboxField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
     type: "checkbox";

package/dist/types/components/DateInput.d.ts

@@ -15,8 +15,8 @@
  */
 import React from 'react';
 export interface BaseDateInputProps {
-    error?: boolean | string;
-    variant?: 'small' | 'large';
+    $error?: boolean | string;
+    $variant?: 'small' | 'large';
 }
 export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>, BaseDateInputProps {
 }

package/dist/types/components/Dropdown.d.ts

@@ -1,10 +1,8 @@
 export declare const DropdownList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    'data-cy': string;
-} & {
-    direction?: "left" | "right";
-    width?: number;
-    height?: number;
-    top?: number;
-}, "data-cy">;
+    $direction?: "left" | "right";
+    $width?: number;
+    $height?: number;
+    $top?: number;
+}, never>;
 export declare const DropdownContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DropdownButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/Form.d.ts

@@ -26,9 +26,9 @@ export interface ErrorProps {
 export declare const FormContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FormField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FormRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    direction?: "row" | "column";
-    justify?: string;
-    align?: string;
+    $direction?: "row" | "column";
+    $justify?: string;
+    $align?: string;
 }, never>;
 export declare const FormLabel: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, {}, never>;
 export declare const FormActionsBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/NavDropdown.d.ts

@@ -17,33 +17,30 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 export declare const NavDropdownContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const NavDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    direction?: "left" | "right";
-    minWidth?: number;
-    top?: number;
+    $direction?: "left" | "right";
+    $minWidth?: number;
+    $top?: number;
 }, never>;
 export declare const InvitedBy: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const NavDropdownLink: import("styled-components").StyledComponent<typeof NavLink, import("styled-components").DefaultTheme, {
-    disabled?: boolean;
+    $disabled?: boolean;
 }, never>;
 export declare const NavDropdownElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    disabled?: boolean;
+    $disabled?: boolean;
 }, never>;
 export declare const NavDropdownSeparator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const NavDropdownButtonText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 interface DropdownProps {
-    isOpen: boolean;
+    $isOpen: boolean;
 }
 export declare const NavDropdownToggle: import("styled-components").StyledComponent<React.FC<import("./icons/types").IconProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const NotificationsBadge: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DropdownProps, never>;
 export declare const NavDropdownButtonContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
-} & {
-    selected: boolean;
-} & DropdownProps, "type" | "selected">;
+    $danger?: boolean;
+    $mini?: boolean;
+} & DropdownProps, "type">;
 interface DropdownButtonProps {
     as?: React.FunctionComponent<any>;
     disabled?: boolean;

package/dist/types/components/Resizer/ResizerButtonInner.d.ts

@@ -1,6 +1,6 @@
 export interface ResizerButtonInnerProps {
-    isCollapsed: boolean;
-    isVisible: boolean;
+    $isCollapsed: boolean;
+    $isVisible: boolean;
 }
 export declare const HorizontalEndResizerButtonInner: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ResizerButtonInnerProps, never>;
 export declare const HorizontalStartResizerButtonInner: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ResizerButtonInnerProps, never>;

package/dist/types/components/StyledModal.d.ts

@@ -35,18 +35,17 @@ export declare const ModalHeader: import("styled-components").StyledComponent<"d
 export declare const CloseButton: 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;
+    $defaultColor: boolean;
 } & {
     size?: number;
-}, "type" | "defaultColor">;
+}, "type" | "$defaultColor">;
 export declare const ModalBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ModalSidebar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ModalSidebarHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -54,7 +53,7 @@ export declare const ModalSidebarTitle: import("styled-components").StyledCompon
 export declare const ModelContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ScrollableModalContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ModalCardBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    width?: number | string;
+    $width?: number | string;
 }, never>;
 export declare const ModalTitle: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/dist/types/components/TextField.d.ts

@@ -16,8 +16,8 @@
 import { Field } from 'formik';
 import React from 'react';
 export interface BaseTextFieldProps {
-    error?: boolean | string;
-    variant?: 'small' | 'large';
+    $error?: boolean | string;
+    $variant?: 'small' | 'large';
 }
 export interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement>, BaseTextFieldProps {
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.6.1",
+  "version": "3.6.3",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",