@opentrons/components 0.1.5 → 0.1.6-alpha.10

package/lib/primitives/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { StyledComponent, CSSProperties } from 'styled-components';
 export interface ColorProps {
     color?: string;
@@ -93,4 +92,4 @@ export interface TransitionProps {
 export interface StyleProps extends ColorProps, TypographyProps, SpacingProps, BorderProps, FlexboxProps, GridProps, LayoutProps, PositionProps, TransitionProps {
     className?: string;
 }
-export type PrimitiveComponent<Instance extends keyof JSX.IntrinsicElements | React.ComponentType<any>, Props extends StyleProps = StyleProps> = StyledComponent<Instance, {}, Props>;
+export type PrimitiveComponent<Instance extends keyof JSX.IntrinsicElements | React.ComponentType<any>, Props extends StyleProps = StyleProps> = StyledComponent<Instance, any, Props, any>;

package/lib/slotmap/{SlotMap.d.ts → OT2SlotMap.d.ts}

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import { RobotType } from '@opentrons/shared-data';
 export interface SlotMapProps {
     /** Slot(s) to highlight */
     occupiedSlots: string[];
@@ -7,6 +5,5 @@ export interface SlotMapProps {
     collisionSlots?: string[];
     /** Optional error styling */
     isError?: boolean;
-    robotType?: RobotType;
 }
-export declare function SlotMap(props: SlotMapProps): JSX.Element;
+export declare function OT2SlotMap(props: SlotMapProps): JSX.Element;

package/lib/slotmap/__tests__/OT2SlotMap.test.d.ts

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

package/lib/slotmap/index.d.ts

@@ -1 +1 @@
-export * from './SlotMap';
+export * from './OT2SlotMap';

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/Splash.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IconName } from '../icons';
 export interface SplashProps {
     /** optional alternative icon name. Defaults to 'logo'. */

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

@@ -1,6 +1,7 @@
 export declare const FLEX_NONE = "none";
 export declare const FLEX_AUTO = "auto";
 export declare const FLEX_MIN_CONTENT = "min-content";
+export declare const FLEX_MAX_CONTENT = "max-content";
 export declare const ALIGN_NORMAL = "normal";
 export declare const ALIGN_START = "start";
 export declare const ALIGN_END = "end";
@@ -26,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/matchers.d.ts

@@ -1,6 +1,3 @@
 import type { Matcher } from '@testing-library/react';
-export declare const componentPropsMatcher: (matcher: unknown) => any;
 export declare const partialComponentPropsMatcher: (argsToMatch: unknown) => any;
-export declare const argAtIndex: (index: number, matcher: unknown) => any;
-export declare const anyProps: () => any;
 export declare const nestedTextMatcher: (textMatch: string | RegExp) => Matcher;

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 {

package/lib/tooltips/{Tooltip.d.ts → LegacyTooltip.d.ts}

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { CSSProperties } from 'react';
 import type { Placement } from './types';
 import type { StyleProps } from '../primitives';
-export interface TooltipProps extends StyleProps {
+export interface LegacyTooltipProps extends StyleProps {
     /** Whether or not the tooltip should be rendered */
     visible: boolean;
     /** Contents of the tooltip */
@@ -25,7 +25,7 @@ export interface TooltipProps extends StyleProps {
  * Tooltip component that renders based on its `visible` prop. For use with the
  * `useTooltip` and `useHoverTooltip` hooks. See examples in `Tooltip.md`.
  */
-export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+export declare const LegacyTooltip: React.ForwardRefExoticComponent<LegacyTooltipProps & React.RefAttributes<HTMLDivElement>>;
 export interface ArrowProps {
     placement: Placement | null;
     arrowRef: React.RefCallback<HTMLElement>;

package/lib/tooltips/__tests__/Tooltip.test.d.ts

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

package/lib/tooltips/__tests__/useHoverTooltip.test.d.ts

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

package/lib/tooltips/__tests__/usePopper.test.d.ts

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

package/lib/tooltips/__tests__/useTooltip.test.d.ts

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

package/lib/tooltips/index.d.ts

@@ -1,6 +1,6 @@
 export * from './DeprecatedTooltip';
 export * from './HoverTooltip';
-export * from './Tooltip';
+export * from './LegacyTooltip';
 export * from './useTooltip';
 export * from './useHoverTooltip';
 export * from './usePopper';

package/lib/ui-style-constants/index.d.ts

@@ -1,4 +1,4 @@
-export * as BORDERS from './borders';
 export * as RESPONSIVENESS from './responsiveness';
-export * as TYPOGRAPHY from './typography';
 export * as SPACING from './spacing';
+export * as TYPOGRAPHY from './typography';
+export * as VIEWPORT from './viewport';

package/lib/ui-style-constants/responsiveness.d.ts

@@ -1,2 +1,3 @@
 export declare const touchscreenMediaQuerySpecs = "(height: 600px) and (width: 1024px)";
+export declare const isTouchscreenDynamic: () => boolean;
 export declare const isTouchscreen: boolean;

package/lib/ui-style-constants/spacing.d.ts

@@ -9,6 +9,7 @@ export declare const spacing20: "1.25rem";
 export declare const spacing24: "1.5rem";
 export declare const spacing32: "2rem";
 export declare const spacing40: "2.5rem";
+export declare const spacing44: "2.75rem";
 export declare const spacing48: "3rem";
 export declare const spacing60: "3.75rem";
 export declare const spacing68: "4.25rem";

package/lib/ui-style-constants/typography.d.ts

@@ -26,6 +26,7 @@ export declare const lineHeight20 = "1.25rem";
 export declare const lineHeight18 = "1.125rem";
 export declare const lineHeight16 = "1rem";
 export declare const lineHeight12 = "0.75rem";
+export declare const lineHeightNormal = "normal";
 export declare const fontStyleNormal = "normal";
 export declare const fontStyleItalic = "italic";
 export declare const textTransformNone = "none";

package/lib/ui-style-constants/viewport.d.ts

@@ -0,0 +1,15 @@
+export declare const touchScreenViewport: {
+    viewport: {
+        viewports: {
+            onDeviceDisplay: {
+                name: string;
+                type: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+        };
+        defaultViewport: string;
+    };
+};

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.5",
+  "version": "0.1.6-alpha.10",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
-  "style": "src/index.css",
-  "main": "lib/opentrons-components.js",
+  "style": "src/index.module.css",
+  "main": "lib/index.mjs",
   "module": "src/index.ts",
   "repository": {
     "type": "git",
@@ -20,11 +20,10 @@
   "peerDependencies": {
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "5.3.4",
-    "@types/react-router-dom": "5.3.3"
+    "styled-components": "5.3.6"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.5",
+    "@opentrons/shared-data": "0.1.6-alpha.10",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -33,14 +32,16 @@
     "@types/styled-components": "^5.1.26",
     "@types/webpack-env": "^1.16.0",
     "classnames": "2.2.5",
-    "interactjs": "^1.10.17",
+    "interactjs": "^1.10.27",
     "lodash": "4.17.21",
+    "react-i18next": "14.0.0",
     "react-popper": "1.0.0",
     "react-remove-scroll": "2.4.3",
     "react-select": "5.4.0",
+    "redux": "4.0.5",
     "styled-components": "5.3.6"
   },
-  "browser": {
-    "jest-when": false
+  "devDependencies": {
+    "react-redux": "8.1.2"
   }
 }

package/tsconfig.json

@@ -8,8 +8,8 @@
   "compilerOptions": {
     "composite": true,
     "rootDir": "src",
-    "outDir": "lib"
+    "outDir": "lib",
   },
   "include": ["typings", "src"],
   "exclude": ["**/*.stories.tsx"]
-}
+}

package/typings/global.d.ts

@@ -1,2 +1 @@
-import 'jest-styled-components'
 import 'styled-components/cssprop'

package/vite.config.mts

@@ -0,0 +1,65 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import postCssImport from 'postcss-import'
+import postCssApply from 'postcss-apply'
+import postColorModFunction from 'postcss-color-mod-function'
+import postCssPresetEnv from 'postcss-preset-env'
+import lostCss from 'lost'
+
+export default defineConfig({
+  build: {
+    // Relative to the root
+    outDir: 'lib',
+    // do not delete the outdir, typescript types might live there and we dont want to delete them
+    emptyOutDir: false,
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es', 'cjs'], // Generate both ES Module and CommonJS outputs
+      fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.cjs'),
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'styled-components'], // Ensure peer dependencies are not bundled
+    },
+    target: 'es2017', // Transpile down to a compatible version for Next.js (for Protocol Library)
+  },
+  plugins: [
+    react({
+      include: '**/*.tsx',
+      babel: {
+        // Use babel.config.js files
+        configFile: true,
+      },
+    }),
+  ],
+  optimizeDeps: {
+    esbuildOptions: {
+      target: 'es2020',
+    },
+    exclude: ['styled-components'], // Avoid pre-bundling styled-components
+  },
+  css: {
+    postcss: {
+      plugins: [
+        postCssImport({ root: 'src/' }),
+        postCssApply(),
+        postColorModFunction(),
+        postCssPresetEnv({ stage: 0 }),
+        lostCss(),
+      ],
+    },
+  },
+  define: {
+    'process.env': process.env,
+    global: 'globalThis',
+  },
+  resolve: {
+    alias: {
+      '@opentrons/shared-data': path.resolve('../shared-data/js/index.ts'),
+      '@opentrons/components/styles': path.resolve(
+        '../components/src/index.module.css'
+      ),
+    },
+    dedupe: ['styled-components'], // Prevent duplicate styled-components instances
+  },
+})

package/lib/hardware-sim/Deck/getDeckDefinitions.d.ts

@@ -1,2 +0,0 @@
-import type { DeckDefinition } from '@opentrons/shared-data';
-export declare function getDeckDefinitions(): Record<string, DeckDefinition>;

package/lib/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithDOMCoords.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { Svg } from '../../primitives';
-import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data';
-export interface RobotCoordinateSpaceWithDOMCoordsRenderProps {
-    deckSlotsById: {
-        [slotId: string]: DeckSlot;
-    };
-    getRobotCoordsFromDOMCoords: (domX: number, domY: number) => {
-        x: number;
-        y: number;
-    };
-}
-interface RobotCoordinateSpaceWithDOMCoordsProps extends React.ComponentProps<typeof Svg> {
-    viewBox?: string | null;
-    deckDef?: DeckDefinition;
-    children?: (props: RobotCoordinateSpaceWithDOMCoordsRenderProps) => React.ReactNode;
-}
-export declare function RobotCoordinateSpaceWithDOMCoords(props: RobotCoordinateSpaceWithDOMCoordsProps): JSX.Element | null;
-export {};

package/lib/instrument/InfoItem.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-export interface InfoItemProps {
-    title: string;
-    value: string;
-    className?: string;
-}
-/**
- * Used by `InstrumentInfo` for its titled values.
- * But if you're using this, you probably want `LabeledValue` instead.
- */
-export declare function InfoItem(props: InfoItemProps): JSX.Element;

package/lib/lists/ListItem.d.ts

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import type { IconName } from '../icons';
-interface ListItemProps {
-    /** click handler */
-    onClick?: (event: React.SyntheticEvent) => unknown;
-    /** mouse enter handler */
-    onMouseEnter?: (event: React.MouseEvent) => unknown;
-    /** mouse leave handler */
-    onMouseLeave?: (event: React.MouseEvent) => unknown;
-    /** mouse enter handler */
-    onPointerEnter?: (event: React.PointerEvent) => unknown;
-    /** mouse leave handler */
-    onPointerLeave?: (event: React.PointerEvent) => unknown;
-    /** if URL is specified, ListItem is wrapped in a React Router NavLink */
-    url?: string | null;
-    /** if URL is specified NavLink can receive an active class name */
-    activeClassName?: string;
-    /** if URL is specified NavLink can receive an exact property for matching routes */
-    exact?: boolean;
-    /** Additional class name */
-    className?: string;
-    /** if disabled, the onClick handler will be disabled */
-    isDisabled?: boolean;
-    /** name constant of the icon to display */
-    iconName?: IconName;
-    'aria-describedby'?: string;
-    ref?: {
-        current: Element | null;
-    } | ((current: Element | null) => unknown);
-    children?: React.ReactNode;
-}
-/**
- * A styled `<li>` with an optional icon, and an optional url for a React Router `NavLink`
- *
- */
-export declare const ListItem: React.ForwardRefExoticComponent<Pick<ListItemProps, "className" | "exact" | "children" | "aria-describedby" | "onClick" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "url" | "iconName" | "isDisabled" | "activeClassName"> & React.RefAttributes<HTMLLIElement>>;
-export {};

package/lib/modals/BaseModal.d.ts

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import type { StyleProps } from '../primitives';
-export interface BaseModalProps extends StyleProps {
-    /** Overlay color, defaults to `OVERLAY_GRAY_90` */
-    overlayColor?: string;
-    /** Optional close on outside click **/
-    onOutsideClick?: React.MouseEventHandler;
-    /** Optional sticky header */
-    header?: React.ReactNode;
-    /** Option to turn off headerStyles */
-    noHeaderStyles?: boolean;
-    /** Optional sticky footer */
-    footer?: React.ReactNode;
-    /** Modal content */
-    children?: React.ReactNode;
-}
-/**
- * A BaseModal is a layout component for building more specific modals.
- *
- * It includes:
- * - An overlay, customizable with the `overlayColor` prop
- * - A content area, with `overflow-y: auto` and customizable with style props
- * - An optional sticky header
- * - An optional sticky footer
- */
-export declare function BaseModal(props: BaseModalProps): JSX.Element;

package/lib/modals/ModalPage.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { Box } from '../primitives';
-import type { TitleBarProps } from '../structure';
-export interface ModalPageProps {
-    /** Props for title bar at top of modal page */
-    titleBar: TitleBarProps;
-    contentsClassName?: string;
-    heading?: React.ReactNode;
-    children?: React.ReactNode;
-    innerProps?: React.ComponentProps<typeof Box>;
-    outerProps?: React.ComponentProps<typeof Box>;
-}
-/**
- * @deprecated Use `Interstitial` instead
- */
-export declare function ModalPage(props: ModalPageProps): JSX.Element;

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

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import type { IconName } from '../../icons';
-import type { StyleProps } from '../../primitives';
-interface SlotLocationProps extends StyleProps {
-    /** name constant of the slot to display */
-    slotName: string;
-    iconName?: undefined;
-}
-interface HardwareIconProps extends StyleProps {
-    /** hardware icon name */
-    iconName: IconName;
-    slotName?: undefined;
-}
-type LocationIconProps = SlotLocationProps | HardwareIconProps;
-export declare function LocationIcon({ slotName, iconName, color, ...styleProps }: LocationIconProps): JSX.Element;
-export {};

package/lib/molecules/RoundTab.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Btn } from '../primitives';
-interface RoundTabProps extends React.ComponentProps<typeof Btn> {
-    isCurrent: boolean;
-    disabled?: boolean;
-}
-export declare function RoundTab({ isCurrent, children, disabled, ...restProps }: RoundTabProps): JSX.Element;
-export {};