@opentrons/components 0.1.6-alpha.7 → 0.1.6-alpha.9

package/lib/instrument/InstrumentDiagram.d.ts

@@ -1,4 +1,4 @@
-import { FlattenSimpleInterpolation } from 'styled-components';
+import type { FlattenSimpleInterpolation } from 'styled-components';
 import type { PipetteV2Specs } from '@opentrons/shared-data';
 import type { Mount } from '../robot-types';
 import type { StyleProps } from '..';

package/lib/instrument/InstrumentInfo.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Mount } from '../robot-types';
 import type { InstrumentDiagramProps } from './InstrumentDiagram';
 export interface InstrumentInfoProps {

package/lib/lists/SidePanelGroup.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { IconName } from '../icons';
 export interface SidePanelGroupProps {
     /** text of title */

package/lib/lists/index.d.ts

@@ -1,3 +1,2 @@
 export * from './SidePanelGroup';
 export * from './TitledList';
-export * from './ListItem';

package/lib/modals/AlertModal.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ButtonProps } from '../buttons';
 import type { IconName } from '../icons';
 export interface AlertModalProps {
@@ -22,6 +22,7 @@ export interface AlertModalProps {
     restrictOuterScroll?: boolean;
 }
 /**
+ * @deprecated use Modal instead
  * Generic alert modal with a heading and a set of buttons at the bottom
  */
 export declare function AlertModal(props: AlertModalProps): JSX.Element;

package/lib/modals/ContinueModal.d.ts

@@ -4,6 +4,7 @@ export interface ContinueModalProps extends Omit<AlertModalProps, 'buttons'> {
     onContinueClick: () => unknown;
 }
 /**
+ * * @deprecated use Modal instead
  * AlertModal variant to prompt user to "Cancel" or "Continue" a given action
  */
 export declare function ContinueModal(props: ContinueModalProps): JSX.Element;

package/lib/modals/LegacyModal.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface LegacyModalProps {
+    /** handler to close the modal (attached to `Overlay` onClick) */
+    onCloseClick?: React.MouseEventHandler;
+    /** Optional styled heading **/
+    heading?: string;
+    /** modal contents */
+    children: React.ReactNode;
+    /** classes to apply */
+    className?: string;
+    /** classes to apply to the contents box */
+    contentsClassName?: string;
+    /** lightens overlay (alert modal over existing modal) */
+    alertOverlay?: boolean;
+    /** restricts scroll outside of Modal when open, true by default */
+    restrictOuterScroll?: boolean;
+    innerRef?: React.Ref<HTMLDivElement>;
+}
+/**
+ * @deprecated use Modal instead
+ * Base modal component that fills its nearest `display:relative` ancestor
+ * with a dark overlay and displays `children` as its contents in a white box
+ */
+export declare function LegacyModal(props: LegacyModalProps): JSX.Element;

package/lib/modals/Modal.d.ts

@@ -1,23 +1,24 @@
-import * as React from 'react';
-export interface ModalProps {
-    /** handler to close the modal (attached to `Overlay` onClick) */
-    onCloseClick?: React.MouseEventHandler;
-    /** Optional styled heading **/
-    heading?: string;
-    /** modal contents */
-    children: React.ReactNode;
-    /** classes to apply */
-    className?: string;
-    /** classes to apply to the contents box */
-    contentsClassName?: string;
-    /** lightens overlay (alert modal over existing modal) */
-    alertOverlay?: boolean;
-    /** restricts scroll outside of Modal when open, true by default */
-    restrictOuterScroll?: boolean;
-    innerRef?: React.Ref<HTMLDivElement>;
+import type * as React from 'react';
+import type { StyleProps } from '../primitives';
+import type { Position } from './ModalShell';
+type ModalType = 'info' | 'warning' | 'error';
+export interface ModalProps extends StyleProps {
+    type?: ModalType;
+    onClose?: React.MouseEventHandler;
+    closeOnOutsideClick?: boolean;
+    title?: React.ReactNode;
+    titleElement1?: JSX.Element;
+    titleElement2?: JSX.Element;
+    fullPage?: boolean;
+    childrenPadding?: string | number;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    zIndexOverlay?: number;
+    showOverlay?: boolean;
+    position?: Position;
 }
 /**
- * Base modal component that fills its nearest `display:relative` ancestor
- * with a dark overlay and displays `children` as its contents in a white box
+ * For Desktop app and Helix (which includes Protocol Designer) use only.
  */
-export declare function Modal(props: ModalProps): JSX.Element;
+export declare const Modal: (props: ModalProps) => JSX.Element;
+export {};

package/lib/modals/ModalHeader.d.ts

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+import type { IconProps } from '../icons';
+export interface ModalHeaderProps {
+    title: React.ReactNode;
+    onClose?: React.MouseEventHandler;
+    titleElement1?: JSX.Element;
+    titleElement2?: JSX.Element;
+    backgroundColor?: string;
+    color?: string;
+    icon?: IconProps;
+    closeButton?: React.ReactNode;
+}
+export declare const ModalHeader: (props: ModalHeaderProps) => JSX.Element;

package/lib/modals/ModalShell.d.ts

@@ -1,5 +1,6 @@
-import * as React from 'react';
-import { StyleProps } from '../primitives';
+import type * as React from 'react';
+import type { StyleProps } from '../primitives';
+export type Position = 'center' | 'bottomRight';
 export interface ModalShellProps extends StyleProps {
     /** Modal content */
     children: React.ReactNode;
@@ -11,6 +12,14 @@ export interface ModalShellProps extends StyleProps {
     footer?: React.ReactNode;
     /** Optional full page takeover */
     fullPage?: boolean;
+    /** Optional zIndex for the overlay */
+    zIndexOverlay?: number;
+    /** Optional position to make the modal appear at the center or bottom right */
+    position?: Position;
+    /** Optional visible overlay */
+    showOverlay?: boolean;
+    /** Optional remove padding */
+    noPadding?: boolean;
 }
 /**
  * A ModalShell is a layout component for building more specific modals.

package/lib/modals/Overlay.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { Flex } from '..';
 export interface OverlayProps extends React.ComponentProps<typeof Flex> {
     /** optional onClick handler */

package/lib/modals/SpinnerModal.d.ts

@@ -7,6 +7,7 @@ export interface SpinnerModalProps {
     alertOverlay?: boolean;
 }
 /**
+ * @deprecated use Modal instead
  * Spinner Modal with no background and optional message
  */
 export declare function SpinnerModal(props: SpinnerModalProps): JSX.Element;

package/lib/modals/SpinnerModalPage.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { SpinnerModal } from './SpinnerModal';
 import type { TitleBarProps } from '../structure';
 export interface SpinnerModalPageProps extends React.ComponentProps<typeof SpinnerModal> {
@@ -6,6 +6,7 @@ export interface SpinnerModalPageProps extends React.ComponentProps<typeof Spinn
     titleBar: TitleBarProps;
 }
 /**
+ * @deprecated use Modal instead
  * Spinner Modal variant with TitleBar
  */
 export declare function SpinnerModalPage(props: SpinnerModalPageProps): JSX.Element;

package/lib/modals/__tests__/Modal.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/modals/__tests__/ModalHeader.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/modals/__tests__/ModalShell.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/modals/index.d.ts

@@ -1,9 +1,9 @@
-export * from './Modal';
 export * from './AlertModal';
 export * from './ContinueModal';
-export * from './SpinnerModal';
-export * from './ModalPage';
+export * from './LegacyModal';
+export * from './Modal';
+export * from './ModalHeader';
 export * from './ModalShell';
-export * from './SpinnerModalPage';
-export * from './BaseModal';
 export * from './Overlay';
+export * from './SpinnerModal';
+export * from './SpinnerModalPage';

package/lib/molecules/Banner/__tests__/Banner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/molecules/Banner/index.d.ts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { StyleProps } from '../../primitives';
+import type { IconProps } from '../../icons';
+export type BannerType = 'success' | 'warning' | 'error' | 'updating' | 'informing';
+export interface BannerProps extends StyleProps {
+    /** name constant of the icon to display */
+    type: BannerType;
+    /** Banner contents */
+    children?: React.ReactNode;
+    /** optional handler to show close button/clear alert  */
+    onCloseClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
+    /** Override the default Alert Icon */
+    icon?: IconProps;
+    /** some banner onCloseClicks fire events, this allows a spinner after click but before event finishes */
+    isCloseActionLoading?: boolean;
+    /** Override the Exit icon */
+    closeButton?: React.ReactNode;
+    /** Icon margin right for large banners */
+    iconMarginRight?: string;
+    /** Icon margin left for large banners */
+    iconMarginLeft?: string;
+}
+export declare function Banner(props: BannerProps): JSX.Element;

package/lib/molecules/DeckInfoLabel/__tests__/DeckInfoLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/molecules/DeckInfoLabel/index.d.ts

@@ -0,0 +1,19 @@
+import type { ModuleIconName } from '../../icons';
+import type { StyleProps } from '../../primitives';
+interface DeckLabelProps extends StyleProps {
+    /** deck label to display */
+    deckLabel: string;
+    iconName?: undefined;
+}
+interface HardwareIconProps extends StyleProps {
+    /** hardware icon name */
+    iconName: ModuleIconName | 'stacked';
+    deckLabel?: undefined;
+}
+export type DeckInfoLabelProps = (DeckLabelProps | HardwareIconProps) & {
+    highlight?: boolean;
+    svgSize?: string | number;
+};
+export declare const DeckInfoLabel: import("styled-components").StyledComponent<typeof DeckInfoLabelComponent, any, {}, never>;
+declare function DeckInfoLabelComponent({ deckLabel, iconName, highlight, ...styleProps }: DeckInfoLabelProps): JSX.Element;
+export {};

package/lib/molecules/DeckLabel/__tests__/DeckLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/molecules/DeckLabel/index.d.ts

@@ -0,0 +1,10 @@
+import type { ModuleModel } from '@opentrons/shared-data';
+export interface DeckLabelProps {
+    text: string;
+    isSelected: boolean;
+    moduleModel?: ModuleModel;
+    maxWidth?: string;
+    labelBorderRadius?: string;
+    isLast?: boolean;
+}
+export declare function DeckLabel({ text, isSelected, labelBorderRadius, moduleModel, maxWidth, isLast, }: DeckLabelProps): JSX.Element;

package/lib/molecules/DropdownMenu/__tests__/DropdownMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/molecules/DropdownMenu/index.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+export interface DropdownOption {
+    name: string;
+    value: string;
+    /** optional dropdown option for adding the liquid color icon */
+    liquidColor?: string;
+    disabled?: boolean;
+    tooltipText?: string;
+}
+export type DropdownBorder = 'rounded' | 'neutral';
+export interface DropdownMenuProps {
+    /** dropdown options */
+    filterOptions: DropdownOption[];
+    /** click handler */
+    onClick: (value: string) => void;
+    /** current selected option */
+    currentOption: DropdownOption;
+    /** dropdown */
+    width?: string;
+    /** dropdown style type  */
+    dropdownType?: DropdownBorder;
+    /** dropdown title */
+    title?: string;
+    /** dropdown item caption */
+    caption?: string | null;
+    /** text for tooltip */
+    tooltipText?: string | null;
+    /** html tabindex property */
+    tabIndex?: number;
+    /** optional error */
+    error?: string | null;
+    /** focus handler */
+    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+    /** blur handler */
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    /** optional disabled */
+    disabled?: boolean;
+    /** force direction for pd after release this will be fixed and remove */
+    forceDirection?: boolean;
+}
+export declare function DropdownMenu(props: DropdownMenuProps): JSX.Element;

package/lib/molecules/InfoScreen/__tests__/InfoScreen.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/molecules/InfoScreen/index.d.ts

@@ -0,0 +1,6 @@
+interface InfoScreenProps {
+    content: string;
+    backgroundColor?: string;
+}
+export declare function InfoScreen({ content, backgroundColor, }: InfoScreenProps): JSX.Element;
+export {};

package/lib/molecules/LiquidIcon/__tests__/LiquidIcon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/molecules/LiquidIcon/index.d.ts

@@ -0,0 +1,9 @@
+type LiquidIconSize = 'small' | 'medium';
+interface LiquidIconProps {
+    color: string;
+    size?: LiquidIconSize;
+    onClick?: () => void;
+    hasError?: boolean;
+}
+export declare function LiquidIcon(props: LiquidIconProps): JSX.Element;
+export {};

package/lib/molecules/Tabs/__tests__/Tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/molecules/Tabs/index.d.ts

@@ -0,0 +1,10 @@
+export interface TabProps {
+    text: string;
+    onClick: () => void;
+    isActive?: boolean;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    tabs: TabProps[];
+}
+export declare function Tabs(props: TabsProps): JSX.Element;

package/lib/molecules/index.d.ts

@@ -1,4 +1,8 @@
-export * from './LocationIcon';
-export * from './RoundTab';
+export * from './Banner';
+export * from './DeckInfoLabel';
+export * from './DeckLabel';
+export * from './DropdownMenu';
+export * from './InfoScreen';
+export * from './LiquidIcon';
 export * from './ParametersTable';
-export * from './ParametersTable/InfoScreen';
+export * from './Tabs';

package/lib/nav/SidePanel.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 export interface SidePanelProps {
     title?: string;
     children?: React.ReactNode;

package/lib/organisms/DeckLabelSet/__tests__/DeckLabelSet.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/organisms/DeckLabelSet/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { DeckLabelProps } from '../../molecules/DeckLabel';
+interface DeckLabelSetProps {
+    deckLabels: DeckLabelProps[];
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare const DeckLabelSet: React.ForwardRefExoticComponent<DeckLabelSetProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/organisms/EndUserAgreementFooter/__tests__/EndUserAgreementFooter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/organisms/EndUserAgreementFooter/index.d.ts

@@ -0,0 +1 @@
+export declare function EndUserAgreementFooter(): JSX.Element;

package/lib/organisms/Toolbox/__tests__/Toolbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/organisms/Toolbox/index.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface ToolboxProps {
+    title: JSX.Element;
+    children: React.ReactNode;
+    disableCloseButton?: boolean;
+    width?: string;
+    height?: string;
+    confirmButtonText?: string;
+    onConfirmClick?: () => void;
+    confirmButton?: JSX.Element;
+    onCloseClick?: () => void;
+    closeButton?: JSX.Element;
+    side?: 'left' | 'right';
+    horizontalSide?: 'top' | 'bottom';
+    childrenPadding?: string;
+    subHeader?: JSX.Element | null;
+    secondaryHeaderButton?: JSX.Element;
+    position?: string;
+}
+export declare function Toolbox(props: ToolboxProps): JSX.Element;

package/lib/organisms/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DeckLabelSet';
+export * from './EndUserAgreementFooter';
+export * from './Toolbox';

package/lib/primitives/Btn.d.ts

@@ -1,4 +1,4 @@
-import { StyledComponent } from 'styled-components';
+import type { StyledComponent } from 'styled-components';
 import type { StyleProps } from './types';
 export declare const BUTTON_TYPE_SUBMIT: 'submit';
 export declare const BUTTON_TYPE_RESET: 'reset';

package/lib/structure/Card.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { StyleProps } from '../primitives';
 export interface CardProps extends StyleProps {
     /** Title for card, all cards should receive a title. */

package/lib/structure/LabeledValue.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 export interface LabeledValueProps {
     /** Label */
     label: React.ReactNode;

package/lib/structure/Pill.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { UseHoverTooltipTargetProps } from '../tooltips';
 export interface PillProps {
     /** background color of pill (any CSS color string) */

package/lib/structure/TitleBar.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ButtonProps } from '../buttons';
 export interface TitleBarProps {
     id?: string;
@@ -12,6 +12,6 @@ export interface TitleBarProps {
     backButtonLabel?: string;
 }
 /**
- * @deprecated Use `InterstitialTitleBar` instead
+ * @deprecated Use 'ModalHeader' instead
  */
 export declare function TitleBar(props: TitleBarProps): JSX.Element;

package/lib/structure/index.d.ts

@@ -1,4 +1,3 @@
-export * from './PageTabs';
 export * from './TitleBar';
 export * from './Card';
 export * from './Splash';

package/lib/style.css

@@ -0,0 +1 @@
+._tooltip_box_1izoa_4{font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);color:#fff;color:var(--c-font-light);background-color:#4a4a4a;background-color:var(--c-bg-dark);box-shadow:0 3px 6px #00000021,0 3px 6px #0000003b;padding:8px;cursor:pointer;z-index:9001}._arrow_1izoa_15{position:absolute;bottom:0;left:0;margin-bottom:-.5em;width:1em;height:.5em}._arrow_1izoa_15:before{border-width:.5em .5em 0 .5em;content:"";margin:auto;display:block;width:0;height:0;border-style:solid;border-color:#4a4a4a transparent transparent transparent;border-color:var(--c-bg-dark) transparent transparent transparent}._arrow_1izoa_15._bottom_1izoa_35{top:0;left:0;margin-top:-.5em;width:1em;height:.5em}._arrow_1izoa_15._bottom_1izoa_35:before{border-width:0 .5em .5em .5em;border-color:transparent transparent #4a4a4a transparent;border-color:transparent transparent var(--c-bg-dark) transparent}._arrow_1izoa_15._right_1izoa_48{top:0;left:0;margin-left:-.5em;height:1em;width:.5em}._arrow_1izoa_15._right_1izoa_48:before{border-width:.5em .5em .5em 0;border-color:transparent #4a4a4a transparent transparent;border-color:transparent var(--c-bg-dark) transparent transparent}._arrow_1izoa_15._left_1izoa_61{top:0;right:0;margin-right:-.5em;height:1em;width:.5em}._arrow_1izoa_15._left_1izoa_61:before{border-width:.5em 0 .5em .5em;border-color:transparent transparent transparent #4a4a4a;border-color:transparent transparent transparent var(--c-bg-dark)}:root{--button-pad: .5rem;--button-inverted:{color:var(--c-font-light);border-color:var(--c-font-light);&:active{font-weight:var(--fw-regular);background-color:#5c5c5c}&:focus{background-color:#535353}&:hover{background-color:#535353}&:disabled,&.disabled{background-color:transparent;font-weight:400;border-color:var(--c-font-disabled);color:var(--c-font-disabled);fill:var(--c-font-disabled);cursor:default;pointer-events:none}&.hover{background-color:#535353}}}._button_primary_17eni_60{display:inline-block;-webkit-text-decoration:none;text-decoration:none;position:relative;line-height:1.4;border:none;padding:.5rem;padding:var(--button-pad);font-size:.875rem;font-size:var(--fs-body-2);font-weight:600;font-weight:var(--fw-semibold);text-align:center;text-transform:uppercase;cursor:pointer;background:transparent;border-radius:2px;border-radius:var(--bd-radius-default);width:100%;color:#fff;color:var(--c-font-light);background-color:#4a4a4a;background-color:var(--c-bg-dark);box-shadow:0 0 2px #0000001f,0 2px 2px #0000003d}._button_primary_17eni_60:focus{background-color:#343434}._button_primary_17eni_60:hover,._button_primary_17eni_60._hover_17eni_50{background-color:#343434}._button_primary_17eni_60:active{font-weight:400;font-weight:var(--fw-regular);background-color:gray;box-shadow:0 0 8px #0000001f,0 8px 8px #0000003d}._button_primary_17eni_60._inverted_17eni_109{background-color:#fafafa;background-color:var(--c-bg-light);color:#4a4a4a;color:var(--c-font-dark)}._button_primary_17eni_60._inverted_17eni_109:focus,._button_primary_17eni_60._inverted_17eni_109:hover,._button_primary_17eni_60._inverted_17eni_109._hover_17eni_50{background-color:#eee}._button_primary_17eni_60._inverted_17eni_109:active{background-color:#e1e1e1}._button_primary_17eni_60:disabled,._button_primary_17eni_60._disabled_17eni_26{font-weight:400;border-color:#9c9c9c;border-color:var(--c-font-disabled);fill:#9c9c9c;fill:var(--c-font-disabled);cursor:default;pointer-events:none;background-color:#c9c9c9;box-shadow:none;color:#9c9c9c;color:var(--c-font-disabled)}._button_flat_17eni_149{display:inline-block;-webkit-text-decoration:none;text-decoration:none;position:relative;line-height:1.4;border:none;padding:.5rem;padding:var(--button-pad);font-size:.875rem;font-size:var(--fs-body-2);font-weight:600;font-weight:var(--fw-semibold);text-align:center;text-transform:uppercase;cursor:pointer;color:#4a4a4a;color:var(--c-font-dark);background:transparent;border-radius:2px;border-radius:var(--bd-radius-default);width:9rem}._button_flat_17eni_149:active{font-weight:400;font-weight:var(--fw-regular);background-color:#e1e1e1}._button_flat_17eni_149:disabled,._button_flat_17eni_149._disabled_17eni_26{background-color:transparent;font-weight:400;border-color:#9c9c9c;border-color:var(--c-font-disabled);color:#9c9c9c;color:var(--c-font-disabled);fill:#9c9c9c;fill:var(--c-font-disabled);cursor:default;pointer-events:none}._button_flat_17eni_149:focus{background-color:#9b9b9b40}._button_flat_17eni_149:hover,._button_flat_17eni_149._hover_17eni_50{background-color:#9b9b9b40}._button_flat_17eni_149._inverted_17eni_109{color:#fff;color:var(--c-font-light);border-color:#fff;border-color:var(--c-font-light)}._button_flat_17eni_149._inverted_17eni_109:active{font-weight:400;font-weight:var(--fw-regular);background-color:#5c5c5c}._button_flat_17eni_149._inverted_17eni_109:disabled,._button_flat_17eni_149._inverted_17eni_109._disabled_17eni_26{background-color:transparent;font-weight:400;border-color:#9c9c9c;border-color:var(--c-font-disabled);color:#9c9c9c;color:var(--c-font-disabled);fill:#9c9c9c;fill:var(--c-font-disabled);cursor:default;pointer-events:none}._button_flat_17eni_149._inverted_17eni_109:focus{background-color:#535353}._button_flat_17eni_149._inverted_17eni_109:hover,._button_flat_17eni_149._inverted_17eni_109._hover_17eni_50{background-color:#535353}._button_outline_17eni_263{display:inline-block;-webkit-text-decoration:none;text-decoration:none;position:relative;line-height:1.4;padding:.5rem;padding:var(--button-pad);font-size:.875rem;font-size:var(--fs-body-2);font-weight:600;font-weight:var(--fw-semibold);text-align:center;text-transform:uppercase;cursor:pointer;color:#4a4a4a;color:var(--c-font-dark);background:transparent;border-radius:2px;border-radius:var(--bd-radius-default);width:9rem;border:1px solid #4a4a4a;border:1px solid var(--c-font-dark)}._button_outline_17eni_263:active{font-weight:400;font-weight:var(--fw-regular);background-color:#e1e1e1}._button_outline_17eni_263:disabled,._button_outline_17eni_263._disabled_17eni_26{background-color:transparent;font-weight:400;border-color:#9c9c9c;border-color:var(--c-font-disabled);color:#9c9c9c;color:var(--c-font-disabled);fill:#9c9c9c;fill:var(--c-font-disabled);cursor:default;pointer-events:none}._button_outline_17eni_263:focus{background-color:#9b9b9b40}._button_outline_17eni_263:hover,._button_outline_17eni_263._hover_17eni_50{background-color:#9b9b9b40}._button_outline_17eni_263._inverted_17eni_109{color:#fff;color:var(--c-font-light);border-color:#fff;border-color:var(--c-font-light)}._button_outline_17eni_263._inverted_17eni_109:active{font-weight:400;font-weight:var(--fw-regular);background-color:#5c5c5c}._button_outline_17eni_263._inverted_17eni_109:disabled,._button_outline_17eni_263._inverted_17eni_109._disabled_17eni_26{background-color:transparent;font-weight:400;border-color:#9c9c9c;border-color:var(--c-font-disabled);color:#9c9c9c;color:var(--c-font-disabled);fill:#9c9c9c;fill:var(--c-font-disabled);cursor:default;pointer-events:none}._button_outline_17eni_263._inverted_17eni_109:focus{background-color:#535353}._button_outline_17eni_263._inverted_17eni_109:hover,._button_outline_17eni_263._inverted_17eni_109._hover_17eni_50{background-color:#535353}._button_icon_17eni_379{width:auto}._button_icon_17eni_379>*{display:block;height:100%;width:100%}._button_icon_17eni_379._inverted_17eni_109{color:#fff;fill:#fff;stroke:#fff}._button_icon_17eni_379._inverted_17eni_109:disabled,._button_icon_17eni_379._inverted_17eni_109._disabled_17eni_26{background-color:transparent;font-weight:400;border-color:#9c9c9c;border-color:var(--c-font-disabled);color:#9c9c9c;color:var(--c-font-disabled);fill:#9c9c9c;fill:var(--c-font-disabled);cursor:default;pointer-events:none}._icon_17eni_423{position:absolute;top:.5rem;top:var(--button-pad);left:.5rem;left:var(--button-pad);height:calc(100% - 1rem);height:calc(100% - 2 * var(--button-pad))}._modal_h7kfv_4{inset:0;display:flex;justify-content:center;align-items:center;align-items:flex-start;position:fixed;z-index:1;padding:4rem}._modal_page_h7kfv_34{position:absolute;inset:0;display:flex;justify-content:flex-start;align-items:center;flex-direction:column;padding:4.5rem 3rem 1rem}._overlay_h7kfv_65{position:absolute;inset:0;background-color:#000000e6}._title_bar_h7kfv_85{position:absolute;top:0;left:0;right:0;width:100%;z-index:3}._modal_contents_h7kfv_94{z-index:1;width:100%;max-width:38rem;margin:0 auto;padding:1rem;border-radius:.5rem;background-color:#fff}._modal_page_contents_h7kfv_117{z-index:1;width:100%;max-width:38rem;margin:0 auto;padding:1rem;border-radius:.5rem;background-color:#fff;max-height:100%;overflow-y:auto}._modal_heading_h7kfv_143{font-size:1.125rem;font-size:var(--fs-header);font-weight:600;font-weight:var(--fw-semibold);color:#4a4a4a;color:var(--c-font-dark);margin-top:0;margin-bottom:1rem;text-transform:capitalize}._alert_modal_wrapper_h7kfv_159{position:relative;max-height:100%;padding-top:4rem;border-radius:0}._alert_modal_heading_h7kfv_166._no_icon_heading_h7kfv_166{padding-left:2rem}._no_alert_header_h7kfv_170{padding-top:1.5rem}._spinner_modal_contents_h7kfv_174{width:100%;margin:0 auto;padding:3rem 1rem 1rem;border-radius:.5rem;font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular);color:#fff;color:var(--c-font-light);max-width:30rem;background-color:transparent;flex-direction:column;font-style:italic;text-align:center;z-index:4}._spinner_modal_icon_h7kfv_207{width:7.5rem;margin-bottom:3rem}._clickable_h7kfv_212{cursor:pointer}._alert_modal_h7kfv_159{z-index:10}._alert_modal_overlay_h7kfv_220{background-color:#737373e6}._alert_modal_contents_h7kfv_224{font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark);width:100%;max-height:100%;padding:1rem}._alert_modal_contents_h7kfv_224>p{padding-bottom:1rem}._alert_modal_heading_h7kfv_166{font-size:1.125rem;font-size:var(--fs-header);color:#4a4a4a;color:var(--c-font-dark);font-weight:400;position:absolute;top:0;left:0;right:0;display:flex;align-items:center;padding:1rem;background-color:#e0e0e0}._alert_modal_icon_h7kfv_263{height:1.125rem;margin-right:.75rem}._alert_modal_buttons_h7kfv_268{float:right;margin-top:1rem}._alert_button_h7kfv_273{margin-left:1rem}._title_bar_1lfcn_4{display:flex;align-items:center;height:3rem;text-transform:uppercase;background-color:#4a4a4a;background-color:var(--c-dark-gray)}._title_bar_1lfcn_4,._title_bar_1lfcn_4 a{color:#fff}._title_1lfcn_4,._subtitle_1lfcn_18,._separator_1lfcn_19{font-size:1.125rem;font-size:var(--fs-header);margin:0}._title_1lfcn_4,._separator_1lfcn_19{font-weight:600;font-weight:var(--fw-semibold)}._title_1lfcn_4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding:0 1.5rem}._subtitle_1lfcn_18{padding:0 1.5rem;font-weight:400}._title_1lfcn_4._right_1lfcn_42{margin-left:auto}._title_button_1lfcn_46{flex:none}._page_tabs_1lfcn_50{width:100%;text-align:center}._tab_link_1lfcn_55{display:inline-block;width:50%;padding:.25rem 0;font-size:3rem;font-size:var(--fs-huge);opacity:.2;background-color:#9b9b9b;background-color:var(--c-med-gray);color:#fff;text-transform:uppercase}._active_tab_link_1lfcn_66{opacity:1}._tab_title_1lfcn_70{font-weight:400}._active_tab_link_1lfcn_66 ._tab_title_1lfcn_70{font-weight:800;font-weight:var(--fw-bold)}._disabled_1lfcn_78{pointer-events:none;background-color:transparent}._disabled_1lfcn_78 *{color:#9c9c9c;color:var(--c-font-disabled);fill:#9c9c9c;fill:var(--c-font-disabled);background-color:transparent}._labeled_value_1lfcn_89{font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark);line-height:1.5}._labeled_value_1lfcn_89 svg{height:.875rem;height:var(--fs-body-2)}._labeled_value_label_1lfcn_100{font-weight:600;font-weight:var(--fw-semibold);margin-top:0;margin-bottom:.25rem}._labeled_value_value_1lfcn_106{margin:0}._right_node_1lfcn_110{display:flex;justify-content:flex-end;margin-left:auto}._splash_yl85l_3{position:relative;width:100%;height:100%;color:#e5e2e2;color:var(--c-light-gray)}._splash_yl85l_3>*{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-height:100%}._pill_11mvp_3{border-radius:12px;border-radius:var(--bd-radius-pill);color:#fff;color:var(--c-white);padding:.5em}._pill_11mvp_3:empty:before{content:"​"}._invert_text_11mvp_14{color:#000;color:var(--c-black)}._alert_15d5j_3{font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular)}._alert_15d5j_3:not(:first-of-type){border-top:none}._title_bar_15d5j_12{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:.5rem 1rem;font-weight:600;font-weight:var(--fw-semibold)}._title_15d5j_12{width:100%}._success_15d5j_25{border:1px solid #60b120;border:1px solid var(--c-success)}._success_15d5j_25>._title_bar_15d5j_12{background-color:#b6febc;background-color:var(--c-bg-success);color:#60b120;color:var(--c-success)}._success_15d5j_25>._title_bar_15d5j_12 svg{color:#60b120;color:var(--c-success)}._info_15d5j_38{border:1px solid #5fd8ee;border:1px solid var(--c-highlight)}._info_15d5j_38>._title_bar_15d5j_12{background-color:#f0f3ff;background-color:var(--c-bg-selected);color:#00c3e6;color:var(--c-selected-dark)}._info_15d5j_38>._title_bar_15d5j_12 svg{color:#5fd8ee;color:var(--c-highlight)}._warning_15d5j_51{border:1px solid #e28200;border:1px solid var(--c-warning)}._warning_15d5j_51>._title_bar_15d5j_12{background-color:#ffd58f;background-color:var(--c-warning-light);color:#9e5e00;color:var(--c-warning-dark)}._warning_15d5j_51>._title_bar_15d5j_12 svg{fill:#e28200;fill:var(--c-warning)}._error_15d5j_64{border:1px solid #d12929;border:1px solid var(--c-error)}._error_15d5j_64>._title_bar_15d5j_12{background-color:#ffc0c0;background-color:var(--c-error-light);color:#ac0505;color:var(--c-error-dark)}._error_15d5j_64>._title_bar_15d5j_12 svg{fill:#d12929;fill:var(--c-error)}._message_15d5j_77{padding:1rem 3rem;background-color:#fff}._message_15d5j_77 a{-webkit-text-decoration:underline;text-decoration:underline;color:inherit}._message_15d5j_77:empty{padding:0}._icon_15d5j_91{width:1.5rem;margin-right:.5rem}._close_15d5j_96{width:2rem;padding:.125rem}._close_15d5j_96:hover{background-color:#6464641a}:root{--mw-labeled-toggle: 25rem}._toggled_on_yhddc_8{fill:#0ec9eb;color:#0ec9eb}._toggled_off_yhddc_13{fill:#4a4a4a;fill:var(--c-dark-gray)}._labeled_control_wrapper_yhddc_17{width:100%;padding:1rem;display:block}._labeled_control_wrapper_yhddc_17:not(:last-child){border-bottom:1px solid #e5e2e2;border-bottom:1px solid var(--c-light-gray)}._labeled_control_yhddc_17{display:block}._stacked_labeled_control_yhddc_31{display:block;margin-left:1rem;margin-top:.5rem}._stacked_labeled_control_label_yhddc_37{font-size:.75rem;font-size:var(--fs-body-1);color:#4a4a4a;color:var(--c-font-dark);display:inline-block;font-weight:600;font-weight:var(--fw-semibold)}._labeled_control_label_yhddc_44{font-size:.75rem;font-size:var(--fs-body-1);color:#4a4a4a;color:var(--c-font-dark);max-width:25rem;max-width:var(--mw-labeled-toggle);display:inline-block;font-weight:600;font-weight:var(--fw-semibold)}._labeled_toggle_button_yhddc_52{float:right;width:2rem;margin-right:1rem;padding:0}._labeled_toggle_button_yhddc_52:hover{background-color:transparent}._labeled_button_yhddc_63,._labeled_select_yhddc_64{float:right;width:9rem;margin-top:.5rem}._labeled_select_yhddc_64{font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark)}._labeled_checkbox_yhddc_76{float:right}._stacked_control_info_yhddc_80{font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark)}._stacked_control_info_yhddc_80>p{margin-top:.5rem;margin-bottom:0;line-height:1.5}._control_info_yhddc_92{font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark);max-width:25rem;max-width:var(--mw-labeled-toggle)}._control_info_yhddc_92>p{margin-top:.5rem;margin-bottom:0;line-height:1.5}._accessibly_hidden_18cab_3{position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}._form_field_18cab_14{font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark);display:flex;align-items:center;line-height:1}._label_text_18cab_23{flex:0 0 auto;padding:0 .5rem}._label_text_18cab_23:empty{padding:0}._form_group_label_18cab_32{font-size:.75rem;font-size:var(--fs-body-1);color:#4a4a4a;color:var(--c-font-dark);font-weight:600;font-weight:var(--fw-semibold);margin-bottom:.15rem;text-transform:capitalize}._form_group_label_18cab_32:after{content:":"}._form_group_label_pipette_settings_slideout_18cab_44{font-weight:600;font-weight:var(--fw-semibold);margin-bottom:.5rem;text-transform:capitalize;font-size:13px;color:#16212d}._checkbox_icon_18cab_52{width:1.25rem;min-width:1.25rem;color:#4a4a4a;color:var(--c-font-dark);display:flex;justify-content:center;align-items:center}._checkbox_icon_18cab_52:not(._checkbox_disabled_18cab_61):hover{cursor:pointer}._checkbox_icon_18cab_52._error_18cab_65{color:#9e5e00;color:var(--c-warning-dark)}._checkbox_icon_18cab_52._checked_18cab_70{color:#006cfa;color:var(--c-blue)}._toggle_icon_18cab_74{display:block;width:2rem;min-width:2rem;color:#4a4a4a;color:var(--c-font-dark)}._toggle_icon_18cab_74:not(._toggle_disabled_18cab_81):hover{cursor:pointer}._dropdown_disabled_18cab_86,._checkbox_disabled_18cab_61,._toggle_disabled_18cab_81{opacity:.5}._input_field_container_18cab_92{width:100%}._input_field_18cab_92{display:flex;flex:1 1;background-color:#e5e2e2;background-color:var(--c-light-gray);border-radius:3px;border-radius:var(--bd-radius-form-field);padding:.25rem .25rem .25rem .5rem}._input_field_18cab_92 input{font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark);background-color:inherit;border-radius:inherit;border:none;flex:1 1 auto;width:100%;height:1rem}._input_field_18cab_92 input:focus{outline:none}._input_field_18cab_92 input::placeholder{color:#9b9b9b;color:var(--c-med-gray)}._input_field_18cab_92:focus-within{background-color:#fff;background-color:var(--c-white);box-shadow:0 .125rem .25rem #00000080}._input_field_18cab_92 ._suffix_18cab_135{font-size:.75rem;font-size:var(--fs-body-1);color:#4a4a4a;color:var(--c-font-dark);font-weight:600;font-weight:var(--fw-semibold);display:inline-block;flex:1 0;text-align:right;align-self:center}._input_caption_18cab_146{font-size:.625rem;font-size:var(--fs-caption);font-weight:600;font-weight:var(--fw-semibold);color:#9b9b9b;color:var(--c-med-gray);line-height:1.2}._input_caption_18cab_146 ._right_18cab_152{float:right}._inline_18cab_157{display:flex}._inline_18cab_157 ._label_text_18cab_23{padding-right:1.5rem}._inline_item_18cab_165{flex:1}._error_18cab_65 div,._error_18cab_65 span{color:#9e5e00;color:var(--c-warning-dark)}._error_18cab_65 select,._error_18cab_65 ._input_field_18cab_92{background-color:#ffd58f;background-color:var(--c-warning-light)}._dropdown_18cab_86{background-color:#e5e2e2;background-color:var(--c-light-gray)}._dropdown_field_18cab_183{position:relative}._dropdown_field_18cab_183 select{font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark);border:0;padding:.25rem .5rem;outline:none;height:1.5rem;border-radius:3px;border-radius:var(--bd-radius-form-field);font-family:inherit;width:100%;-webkit-appearance:none;appearance:none;overflow:hidden}._dropdown_field_18cab_183 select:focus{background-color:#fff;background-color:var(--c-white);box-shadow:0 .125rem .25rem #00000080}._dropdown_field_18cab_183 ._dropdown_icon_18cab_206{position:absolute;top:.2rem;right:.25rem;width:1.25rem;pointer-events:none}._dropdown_field_18cab_183 ._dropdown_icon_18cab_206 svg{color:#4a4a4a;color:var(--c-dark-gray)}._error_icon_18cab_219{display:inline-block;width:1.5rem;min-width:1.5rem;padding-right:.5rem}._disabled_18cab_226{pointer-events:none}._disabled_18cab_226 ._form_group_label_18cab_32{color:#e5e2e2;color:var(--c-light-gray)}._disabled_18cab_226 input,._disabled_18cab_226 ._suffix_18cab_135{color:#9b9b9b;color:var(--c-med-gray)}._example_select_override_154j2_5 .ot_select__control{background-color:#00f}._select_154j2_11{position:relative}._select_154j2_11 .ot_select__control{font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark);display:flex;position:relative;background-color:#e5e2e2;background-color:var(--c-light-gray);border:none;padding:.25rem 0;outline:none;border-radius:3px;border-radius:var(--bd-radius-form-field);height:1.75rem;box-shadow:none}._select_154j2_11 .ot_select__control--menu-is-open{border-bottom-left-radius:0;border-bottom-right-radius:0}._select_154j2_11 .ot_select__control--menu-is-open,._select_154j2_11 .ot_select__control--is-focused{background-color:#fff;background-color:var(--c-white);box-shadow:0 .125rem .25rem #00000080}._select_154j2_11 .ot_select__option{display:flex;padding:.25rem .75rem;cursor:default}._select_154j2_11 .ot_select__option--is-focused{background-color:#e5e2e2;background-color:var(--c-light-gray)}._select_154j2_11 .ot_select__option--is-disabled{color:#9c9c9c;color:var(--c-font-disabled)}._select_154j2_11 .ot_select__group-heading{font-size:.625rem;font-size:var(--fs-caption);font-weight:600;font-weight:var(--fw-semibold);color:#9b9b9b;color:var(--c-med-gray);text-transform:uppercase;margin-left:.5rem}._select_154j2_11 .ot_select__single-value{display:flex}._select_154j2_11 .ot_select__group:not(:first-child){margin-top:.25rem;border-top:1px solid rgba(155,155,155,.4);padding-top:.25rem}._dropdown_indicator_154j2_73{position:absolute;top:.25rem;right:.25rem;width:1.25rem;pointer-events:none}._dropdown_indicator_154j2_73>svg{color:#4a4a4a;color:var(--c-dark-gray)}._dropdown_indicator_154j2_73._flipped_154j2_84>svg{transform:rotate(180deg)}._dropdown_indicator_icon_154j2_89{width:100%}._menu_154j2_93{font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark);position:absolute;top:100%;left:0;right:0;z-index:99;background-color:#fff;background-color:var(--c-white);box-shadow:0 .125rem .25rem #00000080;border-bottom-left-radius:3px;border-bottom-left-radius:var(--bd-radius-form-field);border-bottom-right-radius:3px;border-bottom-right-radius:var(--bd-radius-form-field);padding-top:.25rem;padding-bottom:.25rem}._menu_control_bridge_154j2_110{position:absolute;background-color:#fff;background-color:var(--c-white);top:calc(100% - 2px);left:0;right:0;z-index:99;height:4px}._select_field_10v6n_3._error_10v6n_3 .ot_select__control{background-color:#ffd58f;background-color:var(--c-warning-light)}._select_caption_10v6n_9{font-size:.625rem;font-size:var(--fs-caption)}._select_caption_10v6n_9._error_10v6n_3{color:#9e5e00;color:var(--c-warning-dark);font-weight:600;font-weight:var(--fw-semibold)}._name_overlay_lyt13_3{width:100%;font-size:.5rem;color:#fff;color:var(--c-font-light);background-color:#000000bf;padding:.25rem;border-radius:0 0 .5rem .5rem}._display_name_lyt13_12{font-weight:600;font-weight:var(--fw-semibold);color:#fff;color:var(--c-font-light);word-wrap:break-word}._deck_slot_lyt13_18:active{cursor:grabbing}._module_18o7c_3{color:#000;color:var(--c-black);background-color:#000;background-color:var(--c-black);opacity:.9;border-radius:6px;width:100%;height:100%;display:flex}._module_review_icon_18o7c_13{color:#fff;color:var(--c-white);margin:0 .25rem 0 0;height:12px;width:12px}._module_review_icon_missing_18o7c_20{color:#f00000;color:var(--c-red)}._module_review_icon_present_18o7c_24{color:#7ed321;color:var(--c-green)}._module_review_text_18o7c_28{fill:currentColor;font-size:.55rem;font-weight:600;font-weight:var(--fw-semibold);color:#fff;color:var(--c-white);text-transform:capitalize;white-space:pre;margin-bottom:.75rem}._module_name_overlay_18o7c_38{color:#000;color:var(--c-black);opacity:.7}._module_connect_info_wrapper_18o7c_43{display:flex;flex-direction:row;font-size:.5rem;color:#fff;color:var(--c-white)}._module_port_text_18o7c_50{fill:currentColor;color:#fff;color:var(--c-white);font-size:.65rem;font-weight:600;font-weight:var(--fw-semibold);text-transform:uppercase}._module_port_text_na_18o7c_58{fill:currentColor;color:#9b9b9b;color:var(--c-med-gray);font-size:.65rem;font-weight:600;font-weight:var(--fw-semibold);text-transform:uppercase}._module_wrapper_18o7c_66{display:flex;width:100%;padding:1.15rem;justify-content:center;flex-direction:column;align-items:flex-end}._flipped_module_wrapper_18o7c_75{display:flex;width:100%;padding:1.15rem;justify-content:center;flex-direction:column;align-items:flex-start}._module_name_text_18o7c_84{fill:currentColor;color:#fff;color:var(--c-white);font-size:.5rem;font-weight:600;font-weight:var(--fw-semibold);text-transform:uppercase}._flipped_18o7c_75{transform:rotate(180deg)}._right_icon_18o7c_96{margin:0 0 0 1rem}._pipette_group_df8d3_3{margin:0 auto;max-width:46rem;padding-bottom:2rem;display:grid;grid-template-columns:50% 50%;grid-template-areas:"left right"}._right_df8d3_12{grid-area:right;grid-template-columns:40% 80%;grid-template-areas:"img info"}._pipette_info_df8d3_18{grid-area:info;min-height:8rem}._flipped_image_df8d3_23{transform:scaleX(-1);filter:FlipH}._pipette_icon_df8d3_28{grid-area:img;text-align:center}._title_df8d3_33{font-size:.875rem;font-size:var(--fs-body-2);font-weight:600;font-weight:var(--fw-semibold);color:#4a4a4a;color:var(--c-font-dark);text-transform:capitalize;margin:2rem 0 .25rem}._value_df8d3_41{font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark)}._pipette_volume_class_1eicr_1{cursor:default;min-width:3.5rem}._pipette_channels_1eicr_6{cursor:default;min-width:7rem}._pipette_category_1eicr_11{cursor:default;min-width:2.5rem}:root{--list-padding-large: 1rem;--list-padding-small: .75rem}._clickable_1842h_8{cursor:pointer}._disabled_1842h_12{background-color:transparent}._disabled_1842h_12 *{color:#9c9c9c;color:var(--c-font-disabled);outline-color:#eee;fill:#9c9c9c;fill:var(--c-font-disabled);background-color:transparent}._panel_group_1842h_23,._titled_list_1842h_24,._list_item_1842h_25{background-color:#fff}._panel_group_1842h_23{box-shadow:0 1px 2px #00000054}._hover_border_1842h_33{outline:1px solid #5fd8ee;outline:var(--bd-width-default) solid var(--c-highlight)}._header_text_1842h_37{text-transform:uppercase;font-size:.625rem;font-size:var(--fs-caption);font-weight:600;font-weight:var(--fw-semibold);color:#9c9c9c;color:var(--c-font-disabled)}._title_bar_1842h_46{position:relative;display:flex;-webkit-text-decoration:none;text-decoration:none;padding:1rem .75rem;padding:var(--list-padding-large) var(--list-padding-small);flex-direction:column}._titled_list_title_bar_1842h_47{position:relative;display:flex;-webkit-text-decoration:none;text-decoration:none;padding:1rem .75rem;padding:var(--list-padding-large) var(--list-padding-small);flex-direction:row;align-items:center}._titled_list_selected_1842h_68 ._title_bar_1842h_46{background-color:#f0f3ff;background-color:var(--c-bg-selected)}._titled_list_selected_1842h_68 ._title_bar_1842h_46 *{color:#00c3e6;color:var(--c-selected-dark);font-weight:600;font-weight:var(--fw-semibold)}._title_1842h_24{font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular);margin:0;text-transform:uppercase}._title_enabled_1842h_86{color:#4a4a4a;color:var(--c-font-dark)}._title_disabled_1842h_90{color:#9c9c9c;color:var(--c-font-disabled)}._title_bar_icon_1842h_94{color:#4a4a4a;color:var(--c-font-dark);height:1.5rem}._title_bar_error_1842h_99{background-color:#ffc0c0;background-color:var(--c-error-light)}._icon_left_of_title_1842h_103{margin-right:.5rem;height:1.2rem}._icon_left_of_title_container_1842h_108{display:flex;justify-content:flex-start}._title_bar_carat_1842h_113{position:absolute;top:0;bottom:0;right:0;padding:calc(.75rem - 1px);padding:calc(var(--list-padding-small) - var(--bd-width-default));padding-top:1rem}._title_bar_carat_1842h_113:hover{background-color:#0000000d}._list_1842h_25{list-style-type:none;padding-left:0;margin:0}._list_item_1842h_25{font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark);display:flex;flex-direction:row;align-items:center;width:100%;line-height:1.25;margin:0;padding:.75rem;padding:var(--list-padding-small)}._list_item_1842h_25:hover{background-color:#f1f1f1;background-color:var(--c-bg-hover)}._list_item_1842h_25._active_1842h_148{background-color:#f0f3ff;background-color:var(--c-bg-selected)}a._list_item_1842h_25{-webkit-text-decoration:none;text-decoration:none}._list_alert_1842h_157{font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);color:#4a4a4a;color:var(--c-font-dark);width:100%;padding:.75rem;padding:var(--list-padding-small);background-color:#fafafa;background-color:var(--c-bg-light);font-style:italic}._item_icon_1842h_167{flex:none;height:.9375rem;height:calc(1.25 * var(--fs-body-1));margin-right:.5rem}:root{--sidebar-width: 18.25rem}._panel_6dvfp_7{flex-shrink:0;overflow:visible;border-right:1px solid #e5e2e2;border-right:var(--bd-light);background-color:#fafafa;background-color:var(--c-bg-light);position:relative;padding:0 4px}._title_bar_6dvfp_16{display:flex;align-items:center;width:18.25rem;width:var(--sidebar-width)}._title_6dvfp_16{font-size:1.125rem;font-size:var(--fs-header);font-weight:600;font-weight:var(--fw-semibold);color:#4a4a4a;color:var(--c-font-dark);margin:1rem auto}._panel_contents_6dvfp_29{width:18.25rem;width:var(--sidebar-width);height:calc(100vh - 3.5rem);overflow-x:hidden;overflow-y:auto}:root{--c-mustard: #ffd252;--c-blue: #006cfa;--c-light-blue: hsl(214.08, 100%, 85%);--c-near-black: #a4a4a4;--c-dark-gray: #4a4a4a;--c-charcoal: #979797;--c-med-gray: #9b9b9b;--c-light-gray: #e5e2e2;--c-lightest-gray: #ededed;--c-bg-dark: #4a4a4a;--c-bg-light: #fafafa;--c-bg-selected: #f0f3ff;--c-bg-hover: #f1f1f1;--c-bg-success: #b6febc;--c-highlight: #5fd8ee;--c-selected-dark: #00c3e6;--c-warning-dark: #9e5e00;--c-warning: #e28200;--c-warning-light: #ffd58f;--c-error-dark: #ac0505;--c-error: #d12929;--c-error-light: #ffc0c0;--c-success: #60b120;--c-blue-enabled: #006cfa;--c-light-grey-hover: #c6c6c6;--c-selection-overlay: rgba(95, 216, 238, .3);--c-plate-bg: #ccc;--c-white: #fff;--c-black: #000;--c-green: #7ed321;--c-red: #f00000;--c-orange: #f5a623;--transition-color:{transition:color .15s ease-in-out}--transition-background-color:{transition:background-color .15s ease-in-out}}:root{--c-font-dark: #4a4a4a;--c-font-icon: #6f6f6f;--c-font-light: white;--c-font-disabled: #9c9c9c;--fs-huge: 3rem;--fs-header: 1.125rem;--fs-default: 1rem;--fs-body-2: .875rem;--fs-body-1: .75rem;--fs-caption: .625rem;--fs-tiny: .325rem;--fs-micro: .2rem;--fw-bold: 800;--fw-semibold: 600;--fw-regular: 400;--fw-light: 300;--ff-code: Consolas, monaco, monospace;--lh-solid: 1;--lh-title: 1.25;--lh-copy: 1.5}:root{--bd-radius-default: 2px;--bd-radius-form-field: 3px;--bd-radius-pill: 12px;--bd-width-default: 1px;--bd-light: var(--bd-width-default) solid var(--c-light-gray);--shadow-lvl-1: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .2);--shadow-lvl-2: 0 3px 6px 0 rgba(0, 0, 0, .13), 0 3px 6px 0 rgba(0, 0, 0, .23)}*{box-sizing:border-box}._slot_rect_v9we7_3{stroke:#9b9b9b;stroke:var(--c-med-gray);fill:none}._slot_occupied_v9we7_8{fill:#e5e2e2;fill:var(--c-light-gray)}._slot_occupied_v9we7_8._slot_error_v9we7_12{fill:#ffd58f;fill:var(--c-warning-light)}._collision_icon_v9we7_16{color:#9b9b9b;color:var(--c-med-gray)}

package/lib/styles/cursor.d.ts

@@ -0,0 +1,10 @@
+export declare const CURSOR_AUTO = "auto";
+export declare const CURSOR_CROSSHAIR = "crosshair";
+export declare const CURSOR_DEFAULT = "default";
+export declare const CURSOR_GRAB = "grab";
+export declare const CURSOR_GRABBING = "grabbing";
+export declare const CURSOR_HELP = "help";
+export declare const CURSOR_NOT_ALLOWED = "not-allowed";
+export declare const CURSOR_POINTER = "pointer";
+export declare const CURSOR_ZOOM_IN = "zoom-in";
+export declare const CURSOR_WAIT = "wait";

package/lib/styles/flexbox.d.ts

@@ -27,3 +27,8 @@ export declare const DIRECTION_COLUMN_REVERSE = "column-reverse";
 export declare const WRAP = "wrap";
 export declare const NO_WRAP = "nowrap";
 export declare const WRAP_REVERSE = "wrap-reverse";
+export declare const WHITE_SPACE_NORMAL = "normal";
+export declare const WHITE_SPACE_PRE = "pre";
+export declare const WHITE_SPACE_PRE_WRAP = "pre-wrap";
+export declare const WHITE_SPACE_PRE_LINE = "pre-line";
+export declare const WHITE_SPACE_BREAK_SPACES = "break-spaces";

package/lib/styles/index.d.ts

@@ -1,5 +1,6 @@
 export * from './borders';
 export * from './colors';
+export * from './cursor';
 export * from './flexbox';
 export * from './layout';
 export * from './position';

package/lib/styles/layout.d.ts

@@ -6,6 +6,7 @@ export declare const DISPLAY_FLEX = "flex";
 export declare const DISPLAY_TABLE = "table";
 export declare const DISPLAY_TABLE_ROW = "table-row";
 export declare const DISPLAY_TABLE_CELL = "table-cell";
+export declare const DISPLAY_GRID = "grid";
 export declare const SIZE_AUTO = "auto";
 export declare const SIZE_1 = "1rem";
 export declare const SIZE_2 = "2rem";

package/lib/testing/utils/renderWithProviders.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { I18nextProvider } from 'react-i18next';
-import { RenderResult } from '@testing-library/react';
+import type { RenderResult, RenderOptions } from '@testing-library/react';
 import type { Store } from 'redux';
-import type { RenderOptions } from '@testing-library/react';
 export interface RenderWithProvidersOptions<State> extends RenderOptions {
     initialState?: State;
     i18nInstance: React.ComponentProps<typeof I18nextProvider>['i18n'];

package/lib/tooltips/DeprecatedTooltip.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { Popper } from 'react-popper';
 type PopperProps = React.ComponentProps<typeof Popper>;
 export interface DeprecatedTooltipProps {