@opentrons/components 0.2.0-alpha.0 → 0.2.0-alpha.4

package/lib/legacy-hardware-sim/ModuleItem.d.ts

@@ -0,0 +1,17 @@
+import type { DeckSlot, ModuleModel } from '@opentrons/shared-data';
+export interface ModuleProps {
+    /** module model */
+    model: ModuleModel;
+    /** display mode: 'default', 'present', 'missing', or 'info' */
+    mode: 'default' | 'present' | 'missing' | 'info';
+    /** slot details of the location of this module */
+    slot: DeckSlot;
+    /** USB port detail of the connected module */
+    usbInfoString?: string;
+}
+/**
+ * Legacy App-specific Module Rendering. Removable after Protocol Upload Revamp release
+ *
+ * @deprecated Use {@link Module}
+ */
+export declare function ModuleItem(props: ModuleProps): JSX.Element;

package/lib/legacy-hardware-sim/index.d.ts

@@ -1 +1,2 @@
 export * from './LabwareNameOverlay';
+export * from './ModuleItem';

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

@@ -1,11 +1,23 @@
-export interface DeckInfoLabelProps {
+import type { IconName, ModuleIconName } from '../../icons';
+import type { StyleProps } from '../../primitives';
+interface DeckLabelProps extends StyleProps {
+    /** deck label to display */
+    deckLabel: string;
+    /** deck info label icon name */
+    iconName?: IconName;
+    /** deck info label size large is for header text */
+    /** when use large, need to set svgSize to 1.25rem */
+    size?: 'default' | 'large';
+}
+interface HardwareIconProps extends StyleProps {
+    /** hardware icon name */
+    iconName: ModuleIconName | 'stacked';
     deckLabel?: string;
-    iconName?: string;
+}
+export type DeckInfoLabelProps = (DeckLabelProps | HardwareIconProps) & {
     highlight?: boolean;
-    size?: 'large' | 'default';
-    height?: string | number;
-    width?: string | number;
     svgSize?: string | number;
-    transform?: string;
-}
-export declare function DeckInfoLabel({ deckLabel, iconName, highlight, size, height, width, transform, svgSize, }: DeckInfoLabelProps): JSX.Element;
+};
+export declare const DeckInfoLabel: import("styled-components").StyledComponent<typeof DeckInfoLabelComponent, any, {}, never>;
+declare function DeckInfoLabelComponent({ deckLabel, iconName, highlight, size, ...styleProps }: DeckInfoLabelProps): JSX.Element;
+export {};

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

@@ -5,6 +5,7 @@ interface FixtureOptionProps {
     optionName: string;
     secondaryButtonText?: string;
     buttonText: string;
+    isOnDevice: boolean;
 }
 export declare function FixtureOption(props: FixtureOptionProps): JSX.Element;
 export {};

package/lib/primitives/ForeignObject.d.ts

@@ -1,13 +1,23 @@
-import type { ReactElement, ReactNode } from 'react';
-export interface ForeignObjectProps {
-    width: string | number;
-    height: string | number;
-    x: string | number;
-    y: string | number;
-    children?: ReactNode;
+import type { PrimitiveComponent, StyleProps } from './types';
+export interface ForeignObjectProps extends StyleProps {
+    /** attach a width attribute to the <svg> element */
+    svgWidth?: string | number;
+    /** attach a height attribute to the <svg> element */
+    svgHeight?: string | number;
+    /**
+     * internal helper prop to remap width style-prop to CSS
+     * @internal
+     */
+    _cssWidth?: string | number;
+    /**
+     * internal helper prop to remap height style-prop to CSS
+     * @internal
+     */
+    _cssHeight?: string | number;
 }
 /**
  * Foreign Object styled atomic component
+ *
  * @component
  */
-export declare const ForeignObject: ({ width, height, x, y, children, }: ForeignObjectProps) => ReactElement;
+export declare const ForeignObject: PrimitiveComponent<'foreignObject', ForeignObjectProps>;

package/lib/style.css

@@ -0,0 +1 @@
+:root{--green-60: #03683e;--green-35: #afedd3;--green-20: #e8f7ed;--green-50-non-touchscreen: #04aa65;--green-50-touchscreen: #1ca850;--green-50: var(--green-50-non-touchscreen);--green-40-non-touchscreen: #91e2c0;--green-40-touchscreen: #8ef3a8;--green-40: var(--green-40-non-touchscreen);--green-30-non-touchscreen: #c4f6e0;--green-30-touchscreen: #8afbab;--green-30: var(--green-30-non-touchscreen);--red-60: #941313;--red-55: #c71a1b;--red-50: #de1b1b;--red-40: #f5b2b3;--red-35: #f8c8c9;--red-30: #fad6d6;--red-20: #fce9e9;--yellow-60: #825512;--yellow-50: #f09d20;--yellow-40: #fcd48b;--yellow-35: #ffe1a4;--yellow-30: #ffe9be;--yellow-20: #fdf3e2;--purple-60-non-touchscreen: #562566;--purple-60-touchscreen: #612367;--purple-60: var(--purple-60-non-touchscreen);--purple-55-non-touchscreen: #713187;--purple-55-touchscreen: #822e89;--purple-55: var(--purple-55-non-touchscreen);--purple-50-non-touchscreen: #893ba4;--purple-50-touchscreen: #9e39a8;--purple-50: var(--purple-50-non-touchscreen);--purple-40-non-touchscreen: #cea4df;--purple-40-touchscreen: #e2a9ea;--purple-40: var(--purple-40-non-touchscreen);--purple-35-non-touchscreen: #dbbce7;--purple-35-touchscreen: #ecc2f2;--purple-35: var(--purple-35-non-touchscreen);--purple-30-non-touchscreen: #e6d5ec;--purple-30-touchscreen: #f4def7;--purple-30: var(--purple-30-non-touchscreen);--purple-20-non-touchscreen: #f1e8f5;--purple-20-touchscreen: #fff3fe;--purple-20: var(--purple-20-non-touchscreen);--blue-60: #004196;--blue-55: #0056c8;--blue-40: #a9cefd;--blue-35: #bfdcfd;--blue-30: #d0e6fe;--blue-20: #e1efff;--blue-10: #f1f8ff;--grey-60: #4a4c4e;--grey-55: #626467;--grey-50: #737578;--grey-40: #b7b8b9;--grey-35: #cbcccc;--grey-30: #dedede;--grey-20: #e9e9e9;--grey-10: #f3f3f3;--black-90: #16212d;--black-80: #24313f;--black-70: #39495b;--white: #fff;--blue-50: #006cfa;--transparent-white-80: rgba(255,255,255,.8);--transparent-white-50: rgba(255,255,255,.50196);--transparent-black-80: rgba(22,33,45,.50196);--flex-55: #0297cc;--flex-50: #00bdff;--flex-40: #aae3fc;--transparent: rgba(0,0,0,0);--spacing-2: .125rem;--spacing-4: .25rem;--spacing-6: .375rem;--spacing-8: .5rem;--spacing-10: .625rem;--spacing-12: .75rem;--spacing-16: 1rem;--spacing-20: 1.25rem;--spacing-24: 1.5rem;--spacing-32: 2rem;--spacing-40: 2.5rem;--spacing-44: 2.75rem;--spacing-48: 3rem;--spacing-60: 3.75rem;--spacing-68: 4.25rem;--spacing-80: 5rem;--spacing-120: 7.5rem;--border-radius-2: .125rem;--border-radius-4: .25rem;--border-radius-8: .5rem;--border-radius-12: .75rem;--border-radius-16: 1rem;--border-radius-40: 2.5rem;--border-radius-200: 50rem;--font-size-80: 5rem;--font-size-38: 2.375rem;--font-size-32: 2rem;--font-size-28: 1.75rem;--font-size-22: 1.375rem;--font-size-20: 1.25rem;--font-size-h1: 1.1875rem;--font-size-h2: .9375rem;--font-size-h3: .875rem;--font-size-h4: .8125rem;--font-size-h6: .5625rem;--font-size-p: .8125rem;--font-size-label: .6875rem;--font-size-caption: .625rem;--line-height-96: 6rem;--line-height-48: 3rem;--line-height-42: 2.625rem;--line-height-36: 2.25rem;--line-height-28: 1.75rem;--line-height-24: 1.5rem;--line-height-20: 1.25rem;--line-height-18: 1.125rem;--line-height-16: 1rem;--line-height-12: .75rem;--font-weight-bold: 700;--font-weight-semi-bold: 600;--font-weight-regular: 400;--font-weight-light: 300}.enable_touchscreen_colors{--green-50: var(--green-50-touchscreen);--green-40: var(--green-40-touchscreen);--green-30: var(--green-30-touchscreen);--purple-60: var(--purple-60-touchscreen);--purple-55: var(--purple-55-touchscreen);--purple-50: var(--purple-50-touchscreen);--purple-40: var(--purple-40-touchscreen);--purple-35: var(--purple-35-touchscreen);--purple-30: var(--purple-30-touchscreen);--purple-20: var(--purple-20-touchscreen)}@keyframes icon-module__spin___olUKz{to{transform:rotate(360deg)}}.icon-module__spin___olUKz{animation:icon-module__spin___olUKz .8s steps(8) infinite;transform-origin:center}.tooltips-module__tooltip_box___jYDx5{z-index:9001;padding:8px;background-color:#4a4a4a;background-color:var(--c-bg-dark);box-shadow:0 3px 6px #00000021,0 3px 6px #0000003b;color:#fff;color:var(--c-font-light);cursor:pointer;font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular)}.tooltips-module__arrow___A5Qms{position:absolute;bottom:0;left:0;width:1em;height:.5em;margin-bottom:-.5em}.tooltips-module__arrow___A5Qms:before{display:block;width:0;height:0;border-width:.5em .5em 0 .5em;border-style:solid;border-color:#4a4a4a transparent transparent transparent;border-color:var(--c-bg-dark) transparent transparent transparent;margin:auto;content:""}.tooltips-module__arrow___A5Qms.tooltips-module__bottom___wl7Zh{top:0;left:0;width:1em;height:.5em;margin-top:-.5em}.tooltips-module__arrow___A5Qms.tooltips-module__bottom___wl7Zh:before{border-width:0 .5em .5em .5em;border-color:transparent transparent #4a4a4a transparent;border-color:transparent transparent var(--c-bg-dark) transparent}.tooltips-module__arrow___A5Qms.tooltips-module__right___oFKgm{top:0;left:0;width:.5em;height:1em;margin-left:-.5em}.tooltips-module__arrow___A5Qms.tooltips-module__right___oFKgm:before{border-width:.5em .5em .5em 0;border-color:transparent #4a4a4a transparent transparent;border-color:transparent var(--c-bg-dark) transparent transparent}.tooltips-module__arrow___A5Qms.tooltips-module__left___-YwAj{top:0;right:0;width:.5em;height:1em;margin-right:-.5em}.tooltips-module__arrow___A5Qms.tooltips-module__left___-YwAj: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}:root --button-inverted:{border-color:var(--c-font-light);color:var(--c-font-light)}:root --button-inverted::active{background-color:#5c5c5c;font-weight:var(--fw-regular)}:root --button-inverted::focus{background-color:#535353}:root --button-inverted::hover{background-color:#535353}:root --button-inverted::disabled,:root --button-inverted:.disabled{border-color:var(--c-font-disabled);background-color:transparent;color:var(--c-font-disabled);cursor:default;fill:var(--c-font-disabled);font-weight:400;pointer-events:none}:root --button-inverted:.hover{background-color:#535353}.buttons-module__button_primary___f2Ik6{position:relative;display:inline-block;width:100%;padding:.5rem;padding:var(--button-pad);border:none;border-radius:2px;border-radius:var(--bd-radius-default);background:transparent;background-color:#4a4a4a;background-color:var(--c-bg-dark);box-shadow:0 0 2px #0000001f,0 2px 2px #0000003d;color:#fff;color:var(--c-font-light);cursor:pointer;font-size:.875rem;font-size:var(--fs-body-2);font-weight:600;font-weight:var(--fw-semibold);line-height:1.4;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase}.buttons-module__button_primary___f2Ik6:focus{background-color:#343434}.buttons-module__button_primary___f2Ik6:hover,.buttons-module__button_primary___f2Ik6.buttons-module__hover___-N37J{background-color:#343434}.buttons-module__button_primary___f2Ik6:active{background-color:gray;box-shadow:0 0 8px #0000001f,0 8px 8px #0000003d;font-weight:400;font-weight:var(--fw-regular)}.buttons-module__button_primary___f2Ik6.buttons-module__inverted___C5Tr9{background-color:#fafafa;background-color:var(--c-bg-light);color:#4a4a4a;color:var(--c-font-dark)}.buttons-module__button_primary___f2Ik6.buttons-module__inverted___C5Tr9:focus,.buttons-module__button_primary___f2Ik6.buttons-module__inverted___C5Tr9:hover,.buttons-module__button_primary___f2Ik6.buttons-module__inverted___C5Tr9.buttons-module__hover___-N37J{background-color:#eee}.buttons-module__button_primary___f2Ik6.buttons-module__inverted___C5Tr9:active{background-color:#e1e1e1}.buttons-module__button_primary___f2Ik6:disabled,.buttons-module__button_primary___f2Ik6.buttons-module__disabled___xQ5zg{border-color:#9c9c9c;border-color:var(--c-font-disabled);background-color:#c9c9c9;box-shadow:none;color:#9c9c9c;color:var(--c-font-disabled);cursor:default;fill:#9c9c9c;fill:var(--c-font-disabled);font-weight:400;pointer-events:none}.buttons-module__button_flat___u3SMd{position:relative;display:inline-block;width:9rem;padding:.5rem;padding:var(--button-pad);border:none;border-radius:2px;border-radius:var(--bd-radius-default);background:transparent;color:#4a4a4a;color:var(--c-font-dark);cursor:pointer;font-size:.875rem;font-size:var(--fs-body-2);font-weight:600;font-weight:var(--fw-semibold);line-height:1.4;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase}.buttons-module__button_flat___u3SMd:active{background-color:#e1e1e1;font-weight:400;font-weight:var(--fw-regular)}.buttons-module__button_flat___u3SMd:disabled,.buttons-module__button_flat___u3SMd.buttons-module__disabled___xQ5zg{border-color:#9c9c9c;border-color:var(--c-font-disabled);background-color:transparent;color:#9c9c9c;color:var(--c-font-disabled);cursor:default;fill:#9c9c9c;fill:var(--c-font-disabled);font-weight:400;pointer-events:none}.buttons-module__button_flat___u3SMd:focus{background-color:#9b9b9b40}.buttons-module__button_flat___u3SMd:hover,.buttons-module__button_flat___u3SMd.buttons-module__hover___-N37J{background-color:#9b9b9b40}.buttons-module__button_flat___u3SMd.buttons-module__inverted___C5Tr9{border-color:#fff;border-color:var(--c-font-light);color:#fff;color:var(--c-font-light)}.buttons-module__button_flat___u3SMd.buttons-module__inverted___C5Tr9:active{background-color:#5c5c5c;font-weight:400;font-weight:var(--fw-regular)}.buttons-module__button_flat___u3SMd.buttons-module__inverted___C5Tr9:disabled,.buttons-module__button_flat___u3SMd.buttons-module__inverted___C5Tr9.buttons-module__disabled___xQ5zg{border-color:#9c9c9c;border-color:var(--c-font-disabled);background-color:transparent;color:#9c9c9c;color:var(--c-font-disabled);cursor:default;fill:#9c9c9c;fill:var(--c-font-disabled);font-weight:400;pointer-events:none}.buttons-module__button_flat___u3SMd.buttons-module__inverted___C5Tr9:focus{background-color:#535353}.buttons-module__button_flat___u3SMd.buttons-module__inverted___C5Tr9:hover,.buttons-module__button_flat___u3SMd.buttons-module__inverted___C5Tr9.buttons-module__hover___-N37J{background-color:#535353}.buttons-module__button_outline___vZ22p{position:relative;display:inline-block;width:9rem;padding:.5rem;padding:var(--button-pad);border:1px solid #4a4a4a;border:1px solid var(--c-font-dark);border-radius:2px;border-radius:var(--bd-radius-default);background:transparent;color:#4a4a4a;color:var(--c-font-dark);cursor:pointer;font-size:.875rem;font-size:var(--fs-body-2);font-weight:600;font-weight:var(--fw-semibold);line-height:1.4;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase}.buttons-module__button_outline___vZ22p:active{background-color:#e1e1e1;font-weight:400;font-weight:var(--fw-regular)}.buttons-module__button_outline___vZ22p:disabled,.buttons-module__button_outline___vZ22p.buttons-module__disabled___xQ5zg{border-color:#9c9c9c;border-color:var(--c-font-disabled);background-color:transparent;color:#9c9c9c;color:var(--c-font-disabled);cursor:default;fill:#9c9c9c;fill:var(--c-font-disabled);font-weight:400;pointer-events:none}.buttons-module__button_outline___vZ22p:focus{background-color:#9b9b9b40}.buttons-module__button_outline___vZ22p:hover,.buttons-module__button_outline___vZ22p.buttons-module__hover___-N37J{background-color:#9b9b9b40}.buttons-module__button_outline___vZ22p.buttons-module__inverted___C5Tr9{border-color:#fff;border-color:var(--c-font-light);color:#fff;color:var(--c-font-light)}.buttons-module__button_outline___vZ22p.buttons-module__inverted___C5Tr9:active{background-color:#5c5c5c;font-weight:400;font-weight:var(--fw-regular)}.buttons-module__button_outline___vZ22p.buttons-module__inverted___C5Tr9:disabled,.buttons-module__button_outline___vZ22p.buttons-module__inverted___C5Tr9.buttons-module__disabled___xQ5zg{border-color:#9c9c9c;border-color:var(--c-font-disabled);background-color:transparent;color:#9c9c9c;color:var(--c-font-disabled);cursor:default;fill:#9c9c9c;fill:var(--c-font-disabled);font-weight:400;pointer-events:none}.buttons-module__button_outline___vZ22p.buttons-module__inverted___C5Tr9:focus{background-color:#535353}.buttons-module__button_outline___vZ22p.buttons-module__inverted___C5Tr9:hover,.buttons-module__button_outline___vZ22p.buttons-module__inverted___C5Tr9.buttons-module__hover___-N37J{background-color:#535353}.buttons-module__button_icon___BsXTh{width:auto}.buttons-module__button_icon___BsXTh>*{display:block;width:100%;height:100%}.buttons-module__button_icon___BsXTh.buttons-module__inverted___C5Tr9{color:#fff;fill:#fff;stroke:#fff}.buttons-module__button_icon___BsXTh.buttons-module__inverted___C5Tr9:disabled,.buttons-module__button_icon___BsXTh.buttons-module__inverted___C5Tr9.buttons-module__disabled___xQ5zg{border-color:#9c9c9c;border-color:var(--c-font-disabled);background-color:transparent;color:#9c9c9c;color:var(--c-font-disabled);cursor:default;fill:#9c9c9c;fill:var(--c-font-disabled);font-weight:400;pointer-events:none}.buttons-module__icon___og1yg{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))}.modals-module__modal___yhvHl{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;align-items:flex-start;justify-content:center;padding:4rem}.modals-module__modal_page___LwPsX{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:4.5rem 3rem 1rem}.modals-module__overlay___OZMiy{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000000e6}.modals-module__title_bar___scAdV{position:absolute;z-index:3;top:0;right:0;left:0;width:100%}.modals-module__modal_contents___CXHub{z-index:1;width:100%;max-width:38rem;padding:1rem;border-radius:.5rem;margin:0 auto;background-color:#fff}.modals-module__modal_page_contents___kv-as{z-index:1;width:100%;max-width:38rem;max-height:100%;padding:1rem;border-radius:.5rem;margin:0 auto;background-color:#fff;overflow-y:auto}.modals-module__modal_heading___tLYK-{margin-top:0;margin-bottom:1rem;color:#4a4a4a;color:var(--c-font-dark);font-size:1.125rem;font-size:var(--fs-header);font-weight:600;font-weight:var(--fw-semibold);text-transform:capitalize}.modals-module__alert_modal_wrapper___CXPbz{position:relative;max-height:100%;padding-top:4rem;border-radius:0}.modals-module__alert_modal_heading___wtjDm.modals-module__no_icon_heading___T6meP{padding-left:2rem}.modals-module__no_alert_header___LrlKY{padding-top:1.5rem}.modals-module__spinner_modal_contents___EPTC9{z-index:4;width:100%;max-width:30rem;flex-direction:column;padding:3rem 1rem 1rem;border-radius:.5rem;margin:0 auto;background-color:transparent;color:#fff;color:var(--c-font-light);font-size:.875rem;font-size:var(--fs-body-2);font-style:italic;font-weight:400;font-weight:var(--fw-regular);text-align:center}.modals-module__spinner_modal_icon___gPxu2{width:7.5rem;margin-bottom:3rem}.modals-module__clickable___uSH4v{cursor:pointer}.modals-module__alert_modal___9scZs{z-index:10}.modals-module__alert_modal_overlay___ubs9w{background-color:#737373e6}.modals-module__alert_modal_contents___uksSz{width:100%;max-height:100%;padding:1rem;color:#4a4a4a;color:var(--c-font-dark);font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular)}.modals-module__alert_modal_contents___uksSz>p{padding-bottom:1rem}.modals-module__alert_modal_heading___wtjDm{position:absolute;top:0;right:0;left:0;display:flex;align-items:center;padding:1rem;background-color:#e0e0e0;color:#4a4a4a;color:var(--c-font-dark);font-size:1.125rem;font-size:var(--fs-header);font-weight:400}.modals-module__alert_modal_icon___5TjB3{height:1.125rem;margin-right:.75rem}.modals-module__alert_modal_buttons___BSjom{margin-top:1rem;float:right}.modals-module__alert_button___CMl2s{margin-left:1rem}.structure-module__title_bar___aThX7{display:flex;height:3rem;align-items:center;background-color:#4a4a4a;background-color:var(--c-dark-gray);text-transform:uppercase}.structure-module__title_bar___aThX7,.structure-module__title_bar___aThX7 a{color:#fff}.structure-module__title___Ml8PZ,.structure-module__subtitle___DPXFy,.structure-module__separator___GTNl1{margin:0;font-size:1.125rem;font-size:var(--fs-header)}.structure-module__title___Ml8PZ,.structure-module__separator___GTNl1{font-weight:600;font-weight:var(--fw-semibold)}.structure-module__title___Ml8PZ{overflow:hidden;min-width:0;padding:0 1.5rem;text-overflow:ellipsis;white-space:nowrap}.structure-module__subtitle___DPXFy{padding:0 1.5rem;font-weight:400}.structure-module__title___Ml8PZ.structure-module__right___3sDPu{margin-left:auto}.structure-module__title_button___upv1k{flex:none}.structure-module__page_tabs___s-9ZJ{width:100%;text-align:center}.structure-module__tab_link___wigsH{display:inline-block;width:50%;padding:.25rem 0;background-color:#9b9b9b;background-color:var(--c-med-gray);color:#fff;font-size:3rem;font-size:var(--fs-huge);opacity:.2;text-transform:uppercase}.structure-module__active_tab_link___B3CHL{opacity:1}.structure-module__tab_title___yX3tj{font-weight:400}.structure-module__active_tab_link___B3CHL .structure-module__tab_title___yX3tj{font-weight:800;font-weight:var(--fw-bold)}.structure-module__disabled___XXREv{background-color:transparent;pointer-events:none}.structure-module__disabled___XXREv *{background-color:transparent;color:#9c9c9c;color:var(--c-font-disabled);fill:#9c9c9c;fill:var(--c-font-disabled)}.structure-module__labeled_value___Nny1e{color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);line-height:1.5}.structure-module__labeled_value___Nny1e svg{height:.875rem;height:var(--fs-body-2)}.structure-module__labeled_value_label___EWOH-{margin-top:0;margin-bottom:.25rem;font-weight:600;font-weight:var(--fw-semibold)}.structure-module__labeled_value_value___Xdl42{margin:0}.structure-module__right_node___vpN0U{display:flex;justify-content:flex-end;margin-left:auto}.Pill-module__pill___ip6EY{padding:.5em;border-radius:12px;border-radius:var(--bd-radius-pill);color:#fff;color:var(--c-white)}.Pill-module__pill___ip6EY:empty:before{content:"​"}.Pill-module__invert_text___BJjMt{color:#000;color:var(--c-black)}.Splash-module__splash___XdeJG{position:relative;width:100%;height:100%;color:#e5e2e2;color:var(--c-light-gray)}.Splash-module__splash___XdeJG>*{position:absolute;top:50%;left:50%;max-height:100%;transform:translate(-50%,-50%)}.styles-module__release_notes___od-dn{width:100%;max-height:100%;padding:0 .5rem}.styles-module__release_notes___od-dn>h1{margin-bottom:1rem;color:#4a4a4a;color:var(--c-font-dark);font-size:1.125rem;font-size:var(--fs-header);font-weight:600;font-weight:var(--fw-semibold)}.styles-module__release_notes___od-dn>h2{margin-top:1rem;margin-bottom:.75rem;color:#4a4a4a;color:var(--c-font-dark);font-size:1.125rem;font-size:var(--fs-header);font-weight:400;font-weight:var(--fw-regular)}.styles-module__release_notes___od-dn>h3{margin-top:.75rem;margin-bottom:.5rem;color:#4a4a4a;color:var(--c-font-dark);font-size:.875rem;font-size:var(--fs-body-2);font-weight:600;font-weight:var(--fw-semibold)}.styles-module__release_notes___od-dn ul,.styles-module__release_notes___od-dn ol{margin-bottom:.25rem;margin-left:1.25rem;color:#4a4a4a;color:var(--c-font-dark);font-size:.875rem;font-size:var(--fs-body-2)}.styles-module__release_notes___od-dn li{margin:.25rem 0;color:#4a4a4a;color:var(--c-font-dark);font-size:.875rem;font-size:var(--fs-body-2)}.styles-module__release_notes___od-dn code{color:#4a4a4a;color:var(--c-font-dark);font-family:monospace}.styles-module__release_notes___od-dn pre{padding:.5rem .75rem;margin:.5rem 0;background-color:#4a4a4a;background-color:var(--c-font-dark)}.styles-module__release_notes___od-dn pre code{color:#fff;color:var(--c-font-light)}.styles-module__release_notes___od-dn p{margin-bottom:1rem;color:#4a4a4a;color:var(--c-font-dark);font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular)}.alerts-module__alert___g105D{font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular)}.alerts-module__alert___g105D:not(:first-of-type){border-top:none}.alerts-module__title_bar___-o-3n{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1rem;font-weight:600;font-weight:var(--fw-semibold)}.alerts-module__title___aiHC5{width:100%}.alerts-module__success___WuTxb{border:1px solid #60b120;border:1px solid var(--c-success)}.alerts-module__success___WuTxb>.alerts-module__title_bar___-o-3n{background-color:#b6febc;background-color:var(--c-bg-success);color:#60b120;color:var(--c-success)}.alerts-module__success___WuTxb>.alerts-module__title_bar___-o-3n svg{color:#60b120;color:var(--c-success)}.alerts-module__info___CvwSE{border:1px solid #5fd8ee;border:1px solid var(--c-highlight)}.alerts-module__info___CvwSE>.alerts-module__title_bar___-o-3n{background-color:#f0f3ff;background-color:var(--c-bg-selected);color:#00c3e6;color:var(--c-selected-dark)}.alerts-module__info___CvwSE>.alerts-module__title_bar___-o-3n svg{color:#5fd8ee;color:var(--c-highlight)}.alerts-module__warning___WH7kv{border:1px solid #e28200;border:1px solid var(--c-warning)}.alerts-module__warning___WH7kv>.alerts-module__title_bar___-o-3n{background-color:#ffd58f;background-color:var(--c-warning-light);color:#9e5e00;color:var(--c-warning-dark)}.alerts-module__warning___WH7kv>.alerts-module__title_bar___-o-3n svg{fill:#e28200;fill:var(--c-warning)}.alerts-module__error___-yRV3{border:1px solid #d12929;border:1px solid var(--c-error)}.alerts-module__error___-yRV3>.alerts-module__title_bar___-o-3n{background-color:#ffc0c0;background-color:var(--c-error-light);color:#ac0505;color:var(--c-error-dark)}.alerts-module__error___-yRV3>.alerts-module__title_bar___-o-3n svg{fill:#d12929;fill:var(--c-error)}.alerts-module__message___Jy0ne{padding:1rem 3rem;background-color:#fff}.alerts-module__message___Jy0ne a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.alerts-module__message___Jy0ne:empty{padding:0}.alerts-module__icon___mq-6x{width:1.5rem;margin-right:.5rem}.alerts-module__close___bcdYi{width:2rem;padding:.125rem}.alerts-module__close___bcdYi:hover{background-color:#6464641a}:root{--mw-labeled-toggle: 25rem}.styles-module__toggled_on___MdTWy{color:#0ec9eb;fill:#0ec9eb}.styles-module__toggled_off___JAlN-{fill:#4a4a4a;fill:var(--c-dark-gray)}.styles-module__labeled_control_wrapper___kR9kv{display:block;width:100%;padding:1rem}.styles-module__labeled_control_wrapper___kR9kv:not(:last-child){border-bottom:1px solid #e5e2e2;border-bottom:1px solid var(--c-light-gray)}.styles-module__labeled_control___1kGsb{display:block}.styles-module__stacked_labeled_control___Lbis-{display:block;margin-top:.5rem;margin-left:1rem}.styles-module__stacked_labeled_control_label___PXonJ{display:inline-block;color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:600;font-weight:var(--fw-semibold)}.styles-module__labeled_control_label___JWPRU{display:inline-block;max-width:25rem;max-width:var(--mw-labeled-toggle);color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:600;font-weight:var(--fw-semibold)}.styles-module__labeled_toggle_button___c4bSG{width:2rem;padding:0;margin-right:1rem;float:right}.styles-module__labeled_toggle_button___c4bSG:hover{background-color:transparent}.styles-module__labeled_button___erkDy,.styles-module__labeled_select___cyTr0{width:9rem;margin-top:.5rem;float:right}.styles-module__labeled_select___cyTr0{color:#4a4a4a;color:var(--c-font-dark);font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular)}.styles-module__labeled_checkbox___pYmph{float:right}.styles-module__stacked_control_info___HsLlz{color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular)}.styles-module__stacked_control_info___HsLlz>p{margin-top:.5rem;margin-bottom:0;line-height:1.5}.styles-module__control_info___1cX9H{max-width:25rem;max-width:var(--mw-labeled-toggle);color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular)}.styles-module__control_info___1cX9H>p{margin-top:.5rem;margin-bottom:0;line-height:1.5}.forms-module__accessibly_hidden___gosAV{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0)}.forms-module__form_field___onbAk{display:flex;align-items:center;color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);line-height:1}.forms-module__label_text___eYVHX{flex:0 0 auto;padding:0 .5rem}.forms-module__label_text___eYVHX:empty{padding:0}.forms-module__form_group_label___jicAp{margin-bottom:.15rem;color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:600;font-weight:var(--fw-semibold);text-transform:capitalize}.forms-module__form_group_label___jicAp:after{content:":"}.forms-module__form_group_label_pipette_settings_slideout___FPY7D{margin-bottom:.5rem;color:#16212d;font-size:13px;font-weight:600;font-weight:var(--fw-semibold);text-transform:capitalize}.forms-module__checkbox_icon___r8cnN{display:flex;width:1.25rem;min-width:1.25rem;align-items:center;justify-content:center;color:#4a4a4a;color:var(--c-font-dark)}.forms-module__checkbox_icon___r8cnN:not(.forms-module__checkbox_disabled___tacwo):hover{cursor:pointer}.forms-module__checkbox_icon___r8cnN.forms-module__error___RvDUX{color:#9e5e00;color:var(--c-warning-dark)}.forms-module__checkbox_icon___r8cnN.forms-module__checked___7tVO1{color:#006cfa;color:var(--c-blue)}.forms-module__toggle_icon___BHl3R{display:block;width:2rem;min-width:2rem;color:#4a4a4a;color:var(--c-font-dark)}.forms-module__toggle_icon___BHl3R:not(.forms-module__toggle_disabled___FHlPq):hover{cursor:pointer}.forms-module__dropdown_disabled___DJqXm,.forms-module__checkbox_disabled___tacwo,.forms-module__toggle_disabled___FHlPq{opacity:.5}.forms-module__input_field_container___4zMtR{width:100%}.forms-module__input_field___c3wAH{display:flex;flex:1 1;padding:.25rem .25rem .25rem .5rem;border-radius:3px;border-radius:var(--bd-radius-form-field);background-color:#e5e2e2;background-color:var(--c-light-gray)}.forms-module__input_field___c3wAH input{width:100%;height:1rem;flex:1 1 auto;border:none;border-radius:inherit;background-color:inherit;color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular)}.forms-module__input_field___c3wAH input:focus{outline:none}.forms-module__input_field___c3wAH input::placeholder{color:#9b9b9b;color:var(--c-med-gray)}.forms-module__input_field___c3wAH:focus-within{background-color:#fff;background-color:var(--c-white);box-shadow:0 .125rem .25rem #00000080}.forms-module__input_field___c3wAH .forms-module__suffix___BVdzU{display:inline-block;flex:1 0;align-self:center;color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:600;font-weight:var(--fw-semibold);text-align:right}.forms-module__input_caption___5W7Sy{color:#9b9b9b;color:var(--c-med-gray);font-size:.625rem;font-size:var(--fs-caption);font-weight:600;font-weight:var(--fw-semibold);line-height:1.2}.forms-module__input_caption___5W7Sy .forms-module__right___hUbzm{float:right}.forms-module__inline___eOmRP{display:flex}.forms-module__inline___eOmRP .forms-module__label_text___eYVHX{padding-right:1.5rem}.forms-module__inline_item___zOTj7{flex:1}.forms-module__error___RvDUX div,.forms-module__error___RvDUX span{color:#9e5e00;color:var(--c-warning-dark)}.forms-module__error___RvDUX select,.forms-module__error___RvDUX .forms-module__input_field___c3wAH{background-color:#ffd58f;background-color:var(--c-warning-light)}.forms-module__dropdown___AS5fB{background-color:#e5e2e2;background-color:var(--c-light-gray)}.forms-module__dropdown_field___oMX7b{position:relative}.forms-module__dropdown_field___oMX7b select{overflow:hidden;width:100%;height:1.5rem;padding:.25rem .5rem;border:0;border-radius:3px;border-radius:var(--bd-radius-form-field);-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#4a4a4a;color:var(--c-font-dark);font-family:inherit;font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);outline:none}.forms-module__dropdown_field___oMX7b select:focus{background-color:#fff;background-color:var(--c-white);box-shadow:0 .125rem .25rem #00000080}.forms-module__dropdown_field___oMX7b .forms-module__dropdown_icon___l0UqQ{position:absolute;top:.2rem;right:.25rem;width:1.25rem;pointer-events:none}.forms-module__dropdown_field___oMX7b .forms-module__dropdown_icon___l0UqQ svg{color:#4a4a4a;color:var(--c-dark-gray)}.forms-module__error_icon___XN06X{display:inline-block;width:1.5rem;min-width:1.5rem;padding-right:.5rem}.forms-module__disabled___81PLn{pointer-events:none}.forms-module__disabled___81PLn .forms-module__form_group_label___jicAp{color:#e5e2e2;color:var(--c-light-gray)}.forms-module__disabled___81PLn input,.forms-module__disabled___81PLn .forms-module__suffix___BVdzU{color:#9b9b9b;color:var(--c-med-gray)}.Select-module__example_select_override___LlZd3 .ot_select__control{background-color:#00f}.Select-module__select___KKUl6{position:relative}.Select-module__select___KKUl6 .ot_select__control{position:relative;display:flex;height:1.75rem;padding:.25rem 0;border:none;border-radius:3px;border-radius:var(--bd-radius-form-field);background-color:#e5e2e2;background-color:var(--c-light-gray);box-shadow:none;color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);outline:none}.Select-module__select___KKUl6 .ot_select__control--menu-is-open{border-bottom-left-radius:0;border-bottom-right-radius:0}.Select-module__select___KKUl6 .ot_select__control--menu-is-open,.Select-module__select___KKUl6 .ot_select__control--is-focused{background-color:#fff;background-color:var(--c-white);box-shadow:0 .125rem .25rem #00000080}.Select-module__select___KKUl6 .ot_select__option{display:flex;padding:.25rem .75rem;cursor:default}.Select-module__select___KKUl6 .ot_select__option--is-focused{background-color:#e5e2e2;background-color:var(--c-light-gray)}.Select-module__select___KKUl6 .ot_select__option--is-disabled{color:#9c9c9c;color:var(--c-font-disabled)}.Select-module__select___KKUl6 .ot_select__group-heading{margin-left:.5rem;color:#9b9b9b;color:var(--c-med-gray);font-size:.625rem;font-size:var(--fs-caption);font-weight:600;font-weight:var(--fw-semibold);text-transform:uppercase}.Select-module__select___KKUl6 .ot_select__single-value{display:flex}.Select-module__select___KKUl6 .ot_select__group:not(:first-child){padding-top:.25rem;border-top:1px solid rgba(155,155,155,.4);margin-top:.25rem}.Select-module__dropdown_indicator___u4SGq{position:absolute;top:.25rem;right:.25rem;width:1.25rem;pointer-events:none}.Select-module__dropdown_indicator___u4SGq>svg{color:#4a4a4a;color:var(--c-dark-gray)}.Select-module__dropdown_indicator___u4SGq.Select-module__flipped___2O1dT>svg{transform:rotate(180deg)}.Select-module__dropdown_indicator_icon___YZsx7{width:100%}.Select-module__menu___0Uuo2{position:absolute;z-index:99;top:100%;right:0;left:0;padding-top:.25rem;padding-bottom:.25rem;background-color:#fff;background-color:var(--c-white);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);box-shadow:0 .125rem .25rem #00000080;color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular)}.Select-module__menu_control_bridge___WUNDT{position:absolute;z-index:99;top:calc(100% - 2px);right:0;left:0;height:4px;background-color:#fff;background-color:var(--c-white)}.SelectField-module__select_field___ZUrcY.SelectField-module__error___-SE1k .ot_select__control{background-color:#ffd58f;background-color:var(--c-warning-light)}.SelectField-module__select_caption___i3BBB{font-size:.625rem;font-size:var(--fs-caption)}.SelectField-module__select_caption___i3BBB.SelectField-module__error___-SE1k{color:#9e5e00;color:var(--c-warning-dark);font-weight:600;font-weight:var(--fw-semibold)}.LabwareNameOverlay-module__name_overlay___XitKl{width:100%;padding:.25rem;border-radius:0 0 .5rem .5rem;background-color:#000000bf;color:#fff;color:var(--c-font-light);font-size:.5rem}.LabwareNameOverlay-module__display_name___vck-x{color:#fff;color:var(--c-font-light);font-weight:600;font-weight:var(--fw-semibold);word-wrap:break-word}.LabwareNameOverlay-module__deck_slot___xFyBZ:active{cursor:grabbing}.ModuleItem-module__module___pGuMg{display:flex;width:100%;height:100%;border-radius:6px;background-color:#000;background-color:var(--c-black);color:#000;color:var(--c-black);opacity:.9}.ModuleItem-module__module_review_icon___i3UVi{width:12px;height:12px;margin:0 .25rem 0 0;color:#fff;color:var(--c-white)}.ModuleItem-module__module_review_icon_missing___Mf03Q{color:#f00000;color:var(--c-red)}.ModuleItem-module__module_review_icon_present___1SQGm{color:#7ed321;color:var(--c-green)}.ModuleItem-module__module_review_text___-9tRP{margin-bottom:.75rem;color:#fff;color:var(--c-white);fill:currentColor;font-size:.55rem;font-weight:600;font-weight:var(--fw-semibold);text-transform:capitalize;white-space:pre}.ModuleItem-module__module_name_overlay___Olq1z{color:#000;color:var(--c-black);opacity:.7}.ModuleItem-module__module_connect_info_wrapper___u3JMo{display:flex;flex-direction:row;color:#fff;color:var(--c-white);font-size:.5rem}.ModuleItem-module__module_port_text___Qm6D-{color:#fff;color:var(--c-white);fill:currentColor;font-size:.65rem;font-weight:600;font-weight:var(--fw-semibold);text-transform:uppercase}.ModuleItem-module__module_port_text_na___1QRvV{color:#9b9b9b;color:var(--c-med-gray);fill:currentColor;font-size:.65rem;font-weight:600;font-weight:var(--fw-semibold);text-transform:uppercase}.ModuleItem-module__module_wrapper___Bo6r1{display:flex;width:100%;flex-direction:column;align-items:flex-end;justify-content:center;padding:1.15rem}.ModuleItem-module__flipped_module_wrapper___hks1M{display:flex;width:100%;flex-direction:column;align-items:flex-start;justify-content:center;padding:1.15rem}.ModuleItem-module__module_name_text___zzobt{color:#fff;color:var(--c-white);fill:currentColor;font-size:.5rem;font-weight:600;font-weight:var(--fw-semibold);text-transform:uppercase}.ModuleItem-module__flipped___g-E3y{transform:rotate(180deg)}.ModuleItem-module__right_icon___cmgU-{margin:0 0 0 1rem}:root{--list-padding-large: 1rem;--list-padding-small: .75rem}.lists-module__clickable___xmuhv{cursor:pointer}.lists-module__disabled___lX9y-{background-color:transparent}.lists-module__disabled___lX9y- *{background-color:transparent;color:#9c9c9c;color:var(--c-font-disabled);fill:#9c9c9c;fill:var(--c-font-disabled);outline-color:#eee}.lists-module__panel_group___n4iBS,.lists-module__titled_list___rjc0y,.lists-module__list_item___DFjr8{background-color:#fff}.lists-module__panel_group___n4iBS{box-shadow:0 1px 2px #00000054}.lists-module__hover_border___lqFaV{outline:1px solid #5fd8ee;outline:var(--bd-width-default) solid var(--c-highlight)}.lists-module__header_text___fZ-zF{color:#9c9c9c;color:var(--c-font-disabled);font-size:.625rem;font-size:var(--fs-caption);font-weight:600;font-weight:var(--fw-semibold);text-transform:uppercase}.lists-module__title_bar___hW80Q{position:relative;display:flex;flex-direction:column;padding:1rem .75rem;padding:var(--list-padding-large) var(--list-padding-small);-webkit-text-decoration:none;text-decoration:none}.lists-module__titled_list_title_bar___LaZ1p{position:relative;display:flex;flex-direction:row;align-items:center;padding:1rem .75rem;padding:var(--list-padding-large) var(--list-padding-small);-webkit-text-decoration:none;text-decoration:none}.lists-module__titled_list_selected___455mA .lists-module__title_bar___hW80Q{background-color:#f0f3ff;background-color:var(--c-bg-selected)}.lists-module__titled_list_selected___455mA .lists-module__title_bar___hW80Q *{color:#00c3e6;color:var(--c-selected-dark);font-weight:600;font-weight:var(--fw-semibold)}.lists-module__title___AN80u{margin:0;font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular);text-transform:uppercase}.lists-module__title_enabled___ngQlu{color:#4a4a4a;color:var(--c-font-dark)}.lists-module__title_disabled___Ox4bE{color:#9c9c9c;color:var(--c-font-disabled)}.lists-module__title_bar_icon___A-L0-{height:1.5rem;color:#4a4a4a;color:var(--c-font-dark)}.lists-module__title_bar_error___41Xw7{background-color:#ffc0c0;background-color:var(--c-error-light)}.lists-module__icon_left_of_title___-yn3K{height:1.2rem;margin-right:.5rem}.lists-module__icon_left_of_title_container___JomEt{display:flex;justify-content:flex-start}.lists-module__title_bar_carat___hcJ6l{position:absolute;top:0;right:0;bottom:0;padding:calc(.75rem - 1px);padding:calc(var(--list-padding-small) - var(--bd-width-default));padding-top:1rem}.lists-module__title_bar_carat___hcJ6l:hover{background-color:#0000000d}.lists-module__list___08Rv3{padding-left:0;margin:0;list-style-type:none}.lists-module__list_item___DFjr8{display:flex;width:100%;flex-direction:row;align-items:center;padding:.75rem;padding:var(--list-padding-small);margin:0;color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular);line-height:1.25}.lists-module__list_item___DFjr8:hover{background-color:#f1f1f1;background-color:var(--c-bg-hover)}.lists-module__list_item___DFjr8.lists-module__active___rVnya{background-color:#f0f3ff;background-color:var(--c-bg-selected)}a.lists-module__list_item___DFjr8{-webkit-text-decoration:none;text-decoration:none}.lists-module__list_alert___U5vI2{width:100%;padding:.75rem;padding:var(--list-padding-small);background-color:#fafafa;background-color:var(--c-bg-light);color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-style:italic;font-weight:400;font-weight:var(--fw-regular)}.lists-module__item_icon___zyl-J{height:.9375rem;height:calc(1.25 * var(--fs-body-1));flex:none;margin-right:.5rem}:root{--sidebar-width: 18.25rem}.SidePanel-module__panel___4qNNn{position:relative;overflow:visible;flex-shrink:0;padding:0 4px;border-right:1px solid #e5e2e2;border-right:var(--bd-light);background-color:#fafafa;background-color:var(--c-bg-light)}.SidePanel-module__title_bar___8yh9F{display:flex;width:18.25rem;width:var(--sidebar-width);align-items:center}.SidePanel-module__title___xHJWW{margin:1rem auto;color:#4a4a4a;color:var(--c-font-dark);font-size:1.125rem;font-size:var(--fs-header);font-weight:600;font-weight:var(--fw-semibold)}.SidePanel-module__panel_contents___DbmrS{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}:root --transition-color:{transition:color .15s ease-in-out}:root --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}.styles-module__slot_rect___8v5MA{fill:none;stroke:#9b9b9b;stroke:var(--c-med-gray)}.styles-module__slot_occupied___kbyCd{fill:#e5e2e2;fill:var(--c-light-gray)}.styles-module__slot_occupied___kbyCd.styles-module__slot_error___mM6Kj{fill:#ffd58f;fill:var(--c-warning-light)}.styles-module__collision_icon___6XuQc{color:#9b9b9b;color:var(--c-med-gray)}

package/package.json

@@ -1,14 +1,20 @@
 {
   "name": "@opentrons/components",
-  "version": "0.2.0-alpha.0",
+  "version": "0.2.0-alpha.4",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
   "style": "src/index.module.css",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
+  "main": "lib/index.mjs",
+  "module": "lib/index.mjs",
   "exports": {
-    "./styles": "./src/styles/global.css"
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.mjs",
+      "require": "./lib/index.mjs",
+      "default": "./lib/index.mjs"
+    },
+    "./styles": "./lib/style.css"
   },
   "repository": {
     "type": "git",
@@ -21,11 +27,12 @@
   },
   "homepage": "https://github.com/Opentrons/opentrons#readme",
   "peerDependencies": {
+    "@opentrons/shared-data": "*",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.2.0-alpha.0",
+    "@opentrons/shared-data": "0.2.0-alpha.4",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -47,6 +54,18 @@
     "styled-components": "5.3.6"
   },
   "devDependencies": {
+    "@opentrons/step-generation": "link:../step-generation",
     "react-redux": "8.1.2"
-  }
+  },
+  "scripts": {
+    "build": "npm run build-ts && npm run build-lib",
+    "build-lib": "NODE_ENV=production vite build",
+    "build-ts": "tsc --build --emitDeclarationOnly",
+    "prepublishOnly": "npm run build",
+    "postpack": "echo 'Package ready for publishing with bundled step-generation'"
+  },
+  "files": [
+    "lib/",
+    "README.md"
+  ]
 }

package/Makefile

@@ -1,51 +0,0 @@
-# opentrons component library makefile
-
-# dev server port
-port ?= 6060
-
-# These variables can be overriden when make is invoked to customize the
-# behavior of jest
-tests ?= src
-cov_opts ?= --coverage=true
-test_opts ?=
-
-# standard targets
-#####################################################################
-
-.PHONY: all
-all: clean dist
-
-.PHONY: clean
-clean:
-	cd .. && yarn shx rm -rf storybook-static
-
-# artifacts
-#####################################################################
-
-.PHONY: dist
-dist:
-	cd .. && yarn sb build
-
-.PHONY: lib
-lib: export NODE_ENV := production
-lib:
-	yarn vite build
-
-.PHONY: build-ts
-build-ts:
-	yarn tsc --build --emitDeclarationOnly
-
-# development
-#####################################################################
-
-.PHONY: dev
-dev:
-	cd .. && yarn sb dev --port $(port)
-
-.PHONY: test
-test:
-	$(MAKE) -C .. test-js-components tests="$(tests)" test_opts="$(test_opts)"
-
-.PHONY: test-cov
-test-cov:
-	make -C .. test-js-components tests=$(tests) test_opts="$(test_opts)" cov_opts="$(cov_opts)"

package/babel.config.cjs

@@ -1,21 +0,0 @@
-'use strict'
-
-module.exports = {
-  env: {
-    // Note(isk: 3/2/20): Must have babel-plugin-styled-components in each env,
-    // see here for further details: s https://styled-components.com/docs/tooling#babel-plugin
-    production: {
-      plugins: ['babel-plugin-styled-components', 'babel-plugin-unassert'],
-    },
-    development: {
-      plugins: ['babel-plugin-styled-components'],
-    },
-    test: {
-      plugins: [
-        // NOTE(mc, 2020-05-08): disable ssr, displayName to fix toHaveStyleRule
-        // https://github.com/styled-components/jest-styled-components/issues/294
-        ['babel-plugin-styled-components', { ssr: false, displayName: false }],
-      ],
-    },
-  },
-}

package/cssModuleSideEffect.ts

@@ -1,22 +0,0 @@
-import type { Plugin } from 'vite'
-
-/**
- * Plugin to make sure CSS modules do not get tree shaked out of the dist.
- * see https://github.com/vitejs/vite/pull/16051
- *
- * @returns {Plugin} The Vite plugin object.
- */
-
-export const cssModuleSideEffect = (): Plugin => {
-  return {
-    name: 'css-module-side-effectful',
-    enforce: 'post',
-    transform(_: string, id: string) {
-      if (id.includes('.module.')) {
-        return {
-          moduleSideEffects: 'no-treeshake', // or true, which also works with slightly better treeshake
-        }
-      }
-    },
-  }
-}

package/lib/atoms/StyledText/PlaceholderStyledText.d.ts

@@ -1,14 +0,0 @@
-import type { ReactNode } from 'react';
-interface PlaceholderStyledTextProps {
-    children: ReactNode;
-    color?: string;
-    desktopStyle?: string;
-    oddStyle?: string;
-}
-/**
- * @deprecated: NOTE: YOU SHOULD NOT BE USING THIS - THIS IS A TEMP COMPONENT
- * USED FOR PROTOCOL LIBRARY TO NOT USE STYLED-COMPONENTS. USE THIS
- * UNTIL WE MIGRATE STYLEDTEXT PROPERLY
- */
-export declare const PlaceholderStyledText: (props: PlaceholderStyledTextProps) => JSX.Element;
-export {};

package/src/Components.mdx

@@ -1,12 +0,0 @@
-import { Meta } from '@storybook/blocks'
-
-<Meta title="Helix/AboutHelix" />
-
-# About Helix
-
-Helix is a design system for building user interfaces for Opentrons.
-Currently, it is used by the Desktop app, Touchscreen app, Protocol Designer, and Opentrons AI client.
-
-Figma: <a href="https://www.figma.com/design/1ot18My22DALIcjdLl5LJh/Helix-Design-System?node-id=302-1785&m=dev" target="_blank">Helix Design System</a>
-
-Contents will be added soon.

package/src/__mocks__/file.js

@@ -1,10 +0,0 @@
-// File transformer for Jest
-// Makes asset filenames appear in snapshots
-// see https://facebook.github.io/jest/docs/en/webpack.html
-const path = require('path')
-
-module.exports = {
-  process(src, filename, config, options) {
-    return 'module.exports = ' + JSON.stringify(path.basename(filename))
-  },
-}

package/src/__tests__/utils.test.ts

@@ -1,28 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { truncateString } from '../utils'
-
-describe('truncateString', () => {
-  it('when an input string less than max length, return the original input', () => {
-    // Note (kj:05/03/2023) the max length and breakPoints are the same as what we use for the Desktop app
-    const str = 'opentrons-dev'
-    const result = truncateString(str, 80, 65)
-    expect(result).toEqual(str)
-  })
-
-  it('when an input string is more than 80 characters, return the truncated string', () => {
-    const str = `Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum Has Been The Industry's Standard Dummy Text Ever Since The 1500s, When An Unknown Printer Took A Galley Of Type And Scrambled It To Make A Type Specimen Book.Py`
-    const result = truncateString(str, 80, 65)
-    const truncatedStr =
-      'Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting ...imen Book.Py'
-    expect(result).toEqual(truncatedStr)
-  })
-
-  it('when an input string is more than 80 characters without specifying the break point, return the truncated string', () => {
-    const str = `Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum Has Been The Industry's Standard Dummy Text Ever Since The 1500s, When An Unknown Printer Took A Galley Of Type And Scrambled It To Make A Type Specimen Book.Py`
-    const result = truncateString(str, 80)
-    const truncatedStr =
-      'Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lo...'
-    expect(result).toEqual(truncatedStr)
-  })
-})

package/src/alerts/AlertItem.stories.tsx

@@ -1,49 +0,0 @@
-import { AlertItem } from './AlertItem'
-
-import type { Meta, Story } from '@storybook/react'
-import type * as React from 'react'
-
-export default {
-  title: 'Library/Molecules/AlertItem',
-  component: AlertItem,
-  argTypes: { onCloseClick: { action: 'clicked' } },
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof AlertItem>> = args => (
-  <AlertItem {...args} />
-)
-
-export const Basic = Template.bind({})
-Basic.args = {
-  type: 'success',
-  title: 'good job!',
-}
-
-export const OverriddenIcon = Template.bind({})
-OverriddenIcon.args = {
-  type: 'info',
-  title: 'Alert with overridden icon',
-  icon: { name: 'pause-circle' },
-}
-
-export const Stackable: Story<
-  React.ComponentProps<typeof AlertItem>
-> = args => (
-  <div>
-    <Template {...args} type="warning" title={'Warning with close button'} />
-    <Template
-      {...args}
-      onCloseClick={undefined}
-      type="warning"
-      title={'Warning with no close button'}
-    />
-    <Template {...args} type="warning" title={'Warning with no children'} />
-    <Template
-      {...args}
-      type="warning"
-      title={'Warning with React Node children'}
-    >
-      <p>Some additional info</p>
-    </Template>
-  </div>
-)

package/src/alerts/AlertItem.tsx

@@ -1,86 +0,0 @@
-import cx from 'classnames'
-
-import { IconButton } from '../buttons'
-import { Icon } from '../icons'
-import styles from './alerts.module.css'
-
-import type { ReactNode } from 'react'
-import type { IconProps } from '../icons'
-
-export type AlertType = 'success' | 'warning' | 'error' | 'info'
-
-export interface AlertItemProps {
-  /** name constant of the icon to display */
-  type: AlertType
-  /** title/main message of colored alert bar */
-  title: ReactNode
-  /** Alert message body contents */
-  children?: ReactNode
-  /** Additional class name */
-  className?: string
-  /** optional handler to show close button/clear alert  */
-  onCloseClick?: () => unknown
-  /** Override the default Alert Icon */
-  icon?: IconProps
-}
-
-/**
- * Alert overlay,
- * change style and icon by using type 'success' 'warning' 'error'
- */
-
-const ALERT_PROPS_BY_TYPE: Record<
-  AlertType,
-  { icon: IconProps; className: string }
-> = {
-  success: {
-    icon: { name: 'check-circle' },
-    className: styles.success,
-  },
-  error: {
-    icon: { name: 'alert-circle' },
-    className: styles.error,
-  },
-  warning: {
-    icon: { name: 'alert-circle' },
-    className: styles.warning,
-  },
-  info: {
-    icon: { name: 'information' },
-    className: styles.info,
-  },
-}
-
-/**
- * @deprecated Use 'Banner' instead
- */
-
-export function AlertItem(props: AlertItemProps): JSX.Element {
-  const alertProps = ALERT_PROPS_BY_TYPE[props.type]
-  const icon = props.icon ? props.icon : alertProps.icon
-  const className = cx(styles.alert, alertProps.className, props.className)
-
-  const iconProps = {
-    ...icon,
-    className: styles.icon,
-  }
-
-  return (
-    <div className={className}>
-      <div className={styles.title_bar}>
-        <Icon {...iconProps} />
-        <span className={styles.title} data-testid="alert_item_title">
-          {props.title}
-        </span>
-        {props.onCloseClick && (
-          <IconButton
-            name="close"
-            onClick={props.onCloseClick}
-            className={styles.close}
-          />
-        )}
-      </div>
-      {props.children && <div className={styles.message}>{props.children}</div>}
-    </div>
-  )
-}

package/src/alerts/alerts.module.css

@@ -1,103 +0,0 @@
-@import '../index.module.css';
-
-.alert {
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-regular);
-}
-
-.alert:not(:first-of-type) {
-  border-top: none;
-}
-
-.title_bar {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 1rem;
-  font-weight: var(--fw-semibold);
-}
-
-.title {
-  width: 100%;
-}
-
-.success {
-  border: 1px solid var(--c-success);
-
-  & > .title_bar {
-    background-color: var(--c-bg-success);
-    color: var(--c-success);
-
-    & svg {
-      color: var(--c-success);
-    }
-  }
-}
-
-.info {
-  border: 1px solid var(--c-highlight);
-
-  & > .title_bar {
-    background-color: var(--c-bg-selected);
-    color: var(--c-selected-dark);
-
-    & svg {
-      color: var(--c-highlight);
-    }
-  }
-}
-
-.warning {
-  border: 1px solid var(--c-warning);
-
-  & > .title_bar {
-    background-color: var(--c-warning-light);
-    color: var(--c-warning-dark);
-
-    & svg {
-      fill: var(--c-warning);
-    }
-  }
-}
-
-.error {
-  border: 1px solid var(--c-error);
-
-  & > .title_bar {
-    background-color: var(--c-error-light);
-    color: var(--c-error-dark);
-
-    & svg {
-      fill: var(--c-error);
-    }
-  }
-}
-
-.message {
-  padding: 1rem 3rem;
-  background-color: white;
-
-  & a {
-    color: inherit;
-    text-decoration: underline;
-  }
-
-  &:empty {
-    padding: 0;
-  }
-}
-
-.icon {
-  width: 1.5rem;
-  margin-right: 0.5rem;
-}
-
-.close {
-  width: 2rem;
-  padding: 0.125rem;
-
-  &:hover {
-    background-color: rgba(100, 100, 100, 0.1);
-  }
-}

package/src/alerts/index.ts

@@ -1,3 +0,0 @@
-// alert components
-
-export * from './AlertItem'