@opentrons/components 0.2.1-alpha.0 → 0.3.0-alpha.0

package/lib/src/styles/global.css

@@ -0,0 +1,179 @@
+/* this is global CSS for the components package and all other opentrons projects */
+:root {
+  /* colors */
+
+  /* currently we follow the order of colors.ts file */
+
+  /* green */
+  --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 */
+  --red-60: #941313;
+  --red-55: #c71a1b;
+  --red-50: #de1b1b;
+  --red-40: #f5b2b3;
+  --red-35: #f8c8c9;
+  --red-30: #fad6d6;
+  --red-20: #fce9e9;
+
+  /* yellow */
+  --yellow-60: #825512;
+  --yellow-50: #f09d20;
+  --yellow-40: #fcd48b;
+  --yellow-35: #ffe1a4;
+  --yellow-30: #ffe9be;
+  --yellow-20: #fdf3e2;
+
+  /* purple */
+  --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 */
+  --blue-60: #004196;
+  --blue-55: #0056c8;
+  --blue-40: #a9cefd;
+  --blue-35: #bfdcfd;
+  --blue-30: #d0e6fe;
+  --blue-20: #e1efff;
+  --blue-10: #f1f8ff;
+
+  /* gray */
+  --grey-60: #4a4c4e;
+  --grey-55: #626467;
+  --grey-50: #737578;
+  --grey-40: #b7b8b9;
+  --grey-35: #cbcccc;
+  --grey-30: #dedede;
+  --grey-20: #e9e9e9;
+  --grey-10: #f3f3f3;
+
+  /* core */
+  --black-90: #16212d;
+  --black-80: #24313f;
+  --black-70: #39495b;
+  --white: #fff;
+  --blue-50: #006cfa;
+
+  /* semi-opaques */
+  --transparent-white-80: #fffc;
+  --transparent-white-50: #ffffff80;
+  --transparent-black-80: #16212d80;
+
+  /* flex */
+  --flex-55: #0297cc;
+  --flex-50: #00bdff;
+  --flex-40: #aae3fc;
+
+  /* extras */
+  --transparent: #0000;
+
+  /* spacing */
+  --spacing-2: 0.125rem; /* 2px */
+  --spacing-4: 0.25rem; /* 4px */
+  --spacing-6: 0.375rem; /* 6px */
+  --spacing-8: 0.5rem; /* 8px */
+  --spacing-10: 0.625rem; /* 10px */
+  --spacing-12: 0.75rem; /* 12px */
+  --spacing-16: 1rem; /* 16px */
+  --spacing-20: 1.25rem; /* 20px */
+  --spacing-24: 1.5rem; /* 24px */
+  --spacing-32: 2rem; /* 32px */
+  --spacing-40: 2.5rem; /* 40px */
+  --spacing-44: 2.75rem; /* 44px */
+  --spacing-48: 3rem; /* 48px */
+  --spacing-60: 3.75rem; /* 60px */
+  --spacing-68: 4.25rem; /* 68px */
+  --spacing-80: 5rem; /* 80px */
+  --spacing-120: 7.5rem; /* 120px */
+
+  /* border-radius */
+  --border-radius-2: 0.125rem; /* 2px */
+  --border-radius-4: 0.25rem; /* 4px */
+  --border-radius-8: 0.5rem; /* 8px */
+  --border-radius-12: 0.75rem; /* 12px */
+  --border-radius-16: 1rem; /* 16px */
+  --border-radius-40: 2.5rem; /* 40px */
+  --border-radius-200: 50rem; /* 200px */
+
+  /* font-size */
+  --font-size-80: 5rem; /* 80px */
+  --font-size-38: 2.375rem; /* 38px */
+  --font-size-32: 2rem; /* 32px */
+  --font-size-28: 1.75rem; /* 28px */
+  --font-size-22: 1.375rem; /* 22px */
+  --font-size-20: 1.25rem; /* 20px */
+  --font-size-h1: 1.1875rem; /* H1 19px */
+  --font-size-h2: 0.9375rem; /* H2 15px */
+  --font-size-h3: 0.875rem; /* H3 14px */
+  --font-size-h4: 0.8125rem; /* H4 13px */
+  --font-size-h6: 0.5625rem; /* H6 9px */
+  --font-size-p: 0.8125rem; /* P 13px */
+  --font-size-label: 0.6875rem; /* Label 11px */
+  --font-size-caption: 0.625rem; /* Caption 10px */
+
+  /* line-height */
+  --line-height-96: 6rem; /* 96px */
+  --line-height-48: 3rem; /* 48px */
+  --line-height-42: 2.625rem; /* 42px */
+  --line-height-36: 2.25rem; /* 36px */
+  --line-height-28: 1.75rem; /* 28px */
+  --line-height-24: 1.5rem; /* 24px */
+  --line-height-20: 1.25rem; /* 20px */
+  --line-height-18: 1.125rem; /* 18px */
+  --line-height-16: 1rem; /* 16px */
+  --line-height-12: 0.75rem; /* 12px */
+
+  /* font-weight */
+
+  /* this might be removed. that depends on what StyledText looks like */
+  --font-weight-bold: 700;
+  --font-weight-semi-bold: 600;
+  --font-weight-regular: 400;
+  --font-weight-light: 300;
+}
+
+.enable_touchscreen_colors {
+  /* green */
+  --green-50: var(--green-50-touchscreen);
+  --green-40: var(--green-40-touchscreen);
+  --green-30: var(--green-30-touchscreen);
+
+  /* purple */
+  --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);
+}

package/lib/src/styles/index.module.css

@@ -0,0 +1,8 @@
+.clickable {
+  cursor: pointer;
+}
+
+.rotated {
+  transform: rotate(180deg);
+  transform-origin: center;
+}

package/lib/src/styles/typography.module.css

@@ -0,0 +1,23 @@
+/* ToDo this file will be removed once the labware library, designer, and creator are updated */
+: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: 0.875rem;
+  --fs-body-1: 0.75rem;
+  --fs-caption: 0.625rem;
+  --fs-tiny: 0.325rem;
+  --fs-micro: 0.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;
+}

package/lib/src/tooltips/tooltips.module.css

@@ -0,0 +1,72 @@
+/* common styling for tooltips */
+@import '../index.module.css';
+
+.tooltip_box {
+  z-index: 9001;
+  padding: 8px;
+  background-color: var(--c-bg-dark);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.13), 0 3px 6px 0 rgba(0, 0, 0, 0.23);
+  color: var(--c-font-light); /* from legacy --font-body-1-light */
+  cursor: pointer;
+  font-size: var(--fs-body-1); /* from legacy --font-body-1-light */
+  font-weight: var(--fw-regular); /* from legacy --font-body-1-light */
+}
+
+.arrow {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 1em;
+  height: 0.5em;
+  margin-bottom: -0.5em;
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    border-width: 0.5em 0.5em 0 0.5em;
+    border-style: solid;
+    border-color: var(--c-bg-dark) transparent transparent transparent;
+    margin: auto;
+    content: '';
+  }
+}
+
+.arrow.bottom {
+  top: 0;
+  left: 0;
+  width: 1em;
+  height: 0.5em;
+  margin-top: -0.5em;
+
+  &::before {
+    border-width: 0 0.5em 0.5em 0.5em;
+    border-color: transparent transparent var(--c-bg-dark) transparent;
+  }
+}
+
+.arrow.right {
+  top: 0;
+  left: 0;
+  width: 0.5em;
+  height: 1em;
+  margin-left: -0.5em;
+
+  &::before {
+    border-width: 0.5em 0.5em 0.5em 0;
+    border-color: transparent var(--c-bg-dark) transparent transparent;
+  }
+}
+
+.arrow.left {
+  top: 0;
+  right: 0;
+  width: 0.5em;
+  height: 1em;
+  margin-right: -0.5em;
+
+  &::before {
+    border-width: 0.5em 0 0.5em 0.5em;
+    border-color: transparent transparent transparent var(--c-bg-dark);
+  }
+}

package/lib/structure/Pill.d.ts

@@ -2,15 +2,15 @@ import type { ReactNode } from 'react';
 import type { UseHoverTooltipTargetProps } from '../tooltips';
 export interface PillProps {
     /** background color of pill (any CSS color string) */
-    color?: string | null | undefined;
+    color?: string | null;
     /** text black, instead of default white */
-    invertTextColor?: boolean | null | undefined;
+    invertTextColor?: boolean | null;
     /** additional class name */
     className?: string;
     /** contents of the pill */
     children?: ReactNode;
     /** handlers for HoverTooltipComponent */
-    hoverTooltipHandlers?: UseHoverTooltipTargetProps | null | undefined;
+    hoverTooltipHandlers?: UseHoverTooltipTargetProps | null;
 }
 /**
  * Colored Pill containing text or other contents

package/lib/style.css

@@ -1 +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)}
+@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin .8s steps(8) infinite;transform-origin:center}.btn_container{padding:0;border-width:0;border-style:solid;-webkit-appearance:none;appearance:none;background-color:transparent;cursor:pointer;white-space:nowrap}.btn_container *:disabled{cursor:default}@media (height: 600px) and (width: 1024px){.btn_container{cursor:default}}.new_secondary_btn{display:inline-block;padding:var(--spacing-8) var(--spacing-16);border-width:1px;border-style:solid;border-color:inherit;border-radius:var(--border-radius-2);background-color:var(--white);color:var(--blue-50);cursor:pointer;font-size:var(--font-size-h3);font-weight:var(--font-weight-semi-bold);line-height:1.4;text-align:center;text-transform:uppercase}.new_secondary_btn:hover,.new_secondary_btn:focus{border-width:2px;background-color:var(--white);box-shadow:0 3px 6px #0000003b;color:var(--blue-50)}.new_secondary_btn:active{border-width:2px;background-color:var(--white);box-shadow:none;color:#004aaa}.new_secondary_btn:disabled,.new_secondary_btn.disabled{border-width:2px;background-color:var(--white);box-shadow:none;color:#9c9c9c}.new_primary_btn{display:inline-block;padding:var(--spacing-8) var(--spacing-16);border:none;border-color:inherit;border-radius:var(--border-radius-4);background-color:#0070f3;box-shadow:0 1px 3px #0000001a,0 1px 2px #0003;color:var(--white);cursor:pointer;font-size:var(--font-size-h3);font-weight:var(--font-weight-semi-bold);line-height:1.4;text-align:center;text-transform:uppercase}.new_primary_btn:hover,.new_primary_btn:focus{background-color:#0070f3;box-shadow:0 3px 6px #0000003b}.new_primary_btn:active{background-color:#004aaa;box-shadow:none}.new_primary_btn:disabled,.new_primary_btn.disabled{background-color:#9ca3af;box-shadow:none;color:var(--white);cursor:default}:root{--button-pad: .5rem}.button_primary{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}.button_primary:focus{background-color:#343434}.button_primary:hover,.button_primary.hover{background-color:#343434}.button_primary:active{background-color:gray;box-shadow:0 0 8px #0000001f,0 8px 8px #0000003d;font-weight:400;font-weight:var(--fw-regular)}.button_primary.inverted{background-color:#fafafa;background-color:var(--c-bg-light);color:#4a4a4a;color:var(--c-font-dark)}.button_primary.inverted:focus,.button_primary.inverted:hover,.button_primary.inverted.hover{background-color:#eee}.button_primary.inverted:active{background-color:#e1e1e1}.button_primary:disabled,.button_primary.disabled{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}.button_flat{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}.button_flat:active{background-color:#e1e1e1;font-weight:400;font-weight:var(--fw-regular)}.button_flat:disabled,.button_flat.disabled{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}.button_flat:focus{background-color:#9b9b9b40}.button_flat:hover,.button_flat.hover{background-color:#9b9b9b40}.button_flat.inverted{border-color:#fff;border-color:var(--c-font-light);color:#fff;color:var(--c-font-light)}.button_flat.inverted:active{background-color:#5c5c5c;font-weight:400;font-weight:var(--fw-regular)}.button_flat.inverted:disabled,.button_flat.inverted.disabled{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}.button_flat.inverted:focus{background-color:#535353}.button_flat.inverted:hover,.button_flat.inverted.hover{background-color:#535353}.button_outline{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}.button_outline:active{background-color:#e1e1e1;font-weight:400;font-weight:var(--fw-regular)}.button_outline:disabled,.button_outline.disabled{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}.button_outline:focus{background-color:#9b9b9b40}.button_outline:hover,.button_outline.hover{background-color:#9b9b9b40}.button_outline.inverted{border-color:#fff;border-color:var(--c-font-light);color:#fff;color:var(--c-font-light)}.button_outline.inverted:active{background-color:#5c5c5c;font-weight:400;font-weight:var(--fw-regular)}.button_outline.inverted:disabled,.button_outline.inverted.disabled{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}.button_outline.inverted:focus{background-color:#535353}.button_outline.inverted:hover,.button_outline.inverted.hover{background-color:#535353}.button_icon{width:auto}.button_icon>*{display:block;width:100%;height:100%}.button_icon.inverted{color:#fff;fill:#fff;stroke:#fff}.button_icon.inverted:disabled,.button_icon.inverted.disabled{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}.icon{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{position:fixed;z-index:1;display:flex;align-items:center;align-items:flex-start;justify-content:center;padding:4rem;inset:0}.modal_page{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:4.5rem 3rem 1rem;inset:0}.overlay{position:absolute;background-color:#000000e6;inset:0}.title_bar{position:absolute;z-index:3;top:0;right:0;left:0;width:100%}.modal_contents{z-index:1;width:100%;max-width:38rem;padding:1rem;border-radius:.5rem;margin:0 auto;background-color:#fff}.modal_page_contents{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}.modal_heading{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}.alert_modal_wrapper{position:relative;max-height:100%;padding-top:4rem;border-radius:0}.alert_modal_heading.no_icon_heading{padding-left:2rem}.no_alert_header{padding-top:1.5rem}.spinner_modal_contents{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}.spinner_modal_icon{width:7.5rem;margin-bottom:3rem}.alert_modal{z-index:10}.alert_modal_overlay{background-color:#737373e6}.alert_modal_contents{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)}.alert_modal_contents>p{padding-bottom:1rem}.alert_modal_heading{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}.alert_modal_icon{height:1.125rem;margin-right:.75rem}.alert_modal_buttons{margin-top:1rem;float:right}.alert_button{margin-left:1rem}.alert_primary_button{padding:var(--spacing-8) var(--spacing-16);border:none;border-radius:var(--border-radius-8);background-color:var(--red-50);box-shadow:0 0;color:var(--white);cursor:pointer;font-weight:var(--font-weight-semi-bold);text-transform:none}.alert_primary_button:hover{background-color:var(--red-55);box-shadow:0 0}.alert_primary_button:disabled{background-color:var(--grey-30);color:var(--grey-40)}@media not all and (width: 1024px) and (height: 600px){.heading_small_bold{font-size:1.125rem;font-weight:var(--font-weight-bold);line-height:var(--line-height-24)}.heading_large_bold{font-size:2rem;font-weight:var(--font-weight-bold);line-height:var(--line-height-32)}.caption_bold{font-size:.75rem;font-weight:var(--font-weight-bold)}.body_default_semi_bold{font-size:var(--font-size-16);font-weight:var(--font-weight-semi-bold);line-height:var(--line-height-24)}}@media (width: 1024px) and (height: 600px){.small_body_text_bold{font-size:var(--font-size-20);font-weight:var(--font-weight-bold);line-height:var(--font-height-24)}}.checkbox_label{display:flex;width:max-content;width:var(--checkbox-width, max-content);flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-12) var(--spacing-16);border:none;gap:var(--spacing-12);-webkit-user-select:none;user-select:none}.checkbox_label_unchecked{background-color:var(--blue-30);color:var(--black-90)}.checkbox_label_checked{background-color:var(--blue-50);color:var(--white)}.checkbox_label_round{border-radius:200px}.checkbox_label_neutral{border-radius:var(--border-radius-8)}.checkbox_label_enabled{cursor:pointer}.checkbox_label_disabled{background-color:var(--grey-30);color:var(--grey-40);cursor:default}.checkbox_label_enabled.checkbox_label_unchecked:active{background-color:var(--blue-40)}.checkbox_label_enabled.checkbox_label_checked:active{background-color:var(--blue-55)}.checkbox_label_enabled.checkbox_label_unchecked:hover{background-color:var(--blue-35)}.checkbox_label_enabled.checkbox_label_checked:hover{background-color:var(--blue-55)}.checkbox_label:has(.checkbox_input_hidden:focus-visible){outline:3px solid var(--blue-50);outline-offset:2px}.checkbox_label_unchecked:has(.checkbox_input_hidden:focus-visible){background-color:var(--blue-35)}.checkbox_label_checked:has(.checkbox_input_hidden:focus-visible){background-color:var(--blue-50)}@media (height: 600px) and (width: 1024px){.checkbox_label{width:100%;padding:var(--spacing-20);border-radius:var(--border-radius-16);cursor:auto}}.checkbox_input_hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border-width:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}.checkbox_wrapper{display:flex;width:1rem;height:1rem}@media (height: 600px) and (width: 1024px){.checkbox_wrapper{width:1.75rem;height:1.75rem}}.checkbox_wrapper_unchecked{border:2px solid var(--black-90);border-radius:var(--border-radius-4)}.checkbox_wrapper_unchecked_disabled{border-color:var(--grey-40)}.tooltip_box{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)}.arrow{position:absolute;bottom:0;left:0;width:1em;height:.5em;margin-bottom:-.5em}.arrow:before{display:block;width:0;height:0;border-width:.5em .5em 0;border-style:solid;border-color:#4a4a4a transparent transparent transparent;border-color:var(--c-bg-dark) transparent transparent transparent;margin:auto;content:""}.arrow.bottom{top:0;left:0;width:1em;height:.5em;margin-top:-.5em}.arrow.bottom:before{border-width:0 .5em .5em;border-color:transparent transparent #4a4a4a transparent;border-color:transparent transparent var(--c-bg-dark) transparent}.arrow.right{top:0;left:0;width:.5em;height:1em;margin-left:-.5em}.arrow.right:before{border-width:.5em .5em .5em 0;border-color:transparent #4a4a4a transparent transparent;border-color:transparent var(--c-bg-dark) transparent transparent}.arrow.left{top:0;right:0;width:.5em;height:1em;margin-right:-.5em}.arrow.left:before{border-width:.5em 0 .5em .5em;border-color:transparent transparent transparent #4a4a4a;border-color:transparent transparent transparent var(--c-bg-dark)}.label{display:inline-flex;width:max-content;max-width:100%;align-items:center;justify-content:center;padding:var(--spacing-2) var(--spacing-4);border-width:1px;border-style:solid;border-radius:var(--border-radius-8);background-color:inherit;word-wrap:break-word;white-space:nowrap}.robot_info_label_highlight{border-color:transparent;background-color:var(--blue-50)}.robot_info_label_no_highlight{border-color:var(--black-90)}.large{min-height:1.75rem;border-width:2px}.default{min-height:1.25rem}@media (height: 600px) and (width: 1024px){.label{min-height:var(--spacing-32);padding:var(--spacing-4) var(--spacing-6);border-width:2px;border-radius:var(--border-radius-12)}.has_deck_label{padding-right:var(--spacing-8)}}.slider_container{display:flex;width:100%;flex-direction:column;gap:var(--spacing-8)}.slider_container_small{gap:var(--spacing-4)}.slider_text_container_label{display:flex;flex-direction:row;justify-content:space-between}.slider_text_container_no_label{justify-content:flex-end}.slider_track_wrapper{width:100%}.slider{width:100%;height:32px;border-radius:4px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--blue-50) 0%,var(--blue-50) var(--value-percent),var(--slider-unfilled, var(--blue-20)) var(--value-percent),var(--slider-unfilled, var(--blue-20)) 100%);cursor:pointer}.slider::-webkit-slider-runnable-track{height:0;background:transparent}.slider::-webkit-slider-thumb{width:12px;height:32px;border:4px solid var(--blue-50);border-radius:4px;margin-top:-16px;-webkit-appearance:none;appearance:none;background:var(--blue-30)}.step_meter_container{position:relative;height:var(--spacing-4);background-color:var(--grey-30)}@media (width: 1024px) and (height: 600px){.step_meter_container{height:var(--spacing-12)}}.step_meter_bar{position:absolute;top:0;height:100%;backface-visibility:hidden;background-color:var(--blue-50);perspective:1000px;transform:translate(0);will-change:transform}.step_meter_bar_animated{transition:width .5s ease-in-out}.title_bar{display:flex;height:3rem;align-items:center;background-color:#4a4a4a;background-color:var(--c-dark-gray);text-transform:uppercase}.title_bar,.title_bar a{color:#fff}.title,.subtitle,.separator{margin:0;font-size:1.125rem;font-size:var(--fs-header)}.title,.separator{font-weight:600;font-weight:var(--fw-semibold)}.title{overflow:hidden;min-width:0;padding:0 1.5rem;text-overflow:ellipsis;white-space:nowrap}.subtitle{padding:0 1.5rem;font-weight:400}.title.right{margin-left:auto}.title_button{flex:none}.page_tabs{width:100%;text-align:center}.tab_link{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}.active_tab_link{opacity:1}.tab_title{font-weight:400}.active_tab_link .tab_title{font-weight:800;font-weight:var(--fw-bold)}.disabled{background-color:transparent;pointer-events:none}.disabled *{background-color:transparent;color:#9c9c9c;color:var(--c-font-disabled);fill:#9c9c9c;fill:var(--c-font-disabled)}.labeled_value{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}.labeled_value svg{height:.875rem;height:var(--fs-body-2)}.labeled_value_label{margin-top:0;margin-bottom:.25rem;font-weight:600;font-weight:var(--fw-semibold)}.labeled_value_value{margin:0}.right_node{display:flex;justify-content:flex-end;margin-left:auto}.pill{padding:.5em;border-radius:12px;border-radius:var(--bd-radius-pill);color:#fff;color:var(--c-white)}.pill:empty:before{content:"​"}.invert_text{color:#000;color:var(--c-black)}.splash{position:relative;width:100%;height:100%;color:#e5e2e2;color:var(--c-light-gray)}.splash>*{position:absolute;top:50%;left:50%;max-height:100%;transform:translate(-50%,-50%)}.icon_button{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:center;padding:var(--spacing-12);border-radius:50%;background-color:var(--variant-default)}.icon_button:active{background-color:var(--variant-active)}.icon_button:hover{background-color:var(--variant-hover)}.icon_button:focus-visible:after{position:absolute;border:2px solid var(--variant-default);border-radius:50%;content:"";inset:-8px;pointer-events:none}.release_notes{width:100%;max-height:100%;padding:0 .5rem}.release_notes>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)}.release_notes>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)}.release_notes>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)}.release_notes ul,.release_notes ol{margin-bottom:.25rem;margin-left:1.25rem;color:#4a4a4a;color:var(--c-font-dark);font-size:.875rem;font-size:var(--fs-body-2)}.release_notes li{margin:.25rem 0;color:#4a4a4a;color:var(--c-font-dark);font-size:.875rem;font-size:var(--fs-body-2)}.release_notes code{color:#4a4a4a;color:var(--c-font-dark);font-family:monospace}.release_notes pre{padding:.5rem .75rem;margin:.5rem 0;background-color:#4a4a4a;background-color:var(--c-font-dark)}.release_notes pre code{color:#fff;color:var(--c-font-light)}.release_notes 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)}.step_group_container{border-radius:var(--border-4)}.step_group_header{display:flex;justify-content:space-between;padding:var(--spacing-8);gap:var(--spacing-4)}.step_group_icon{display:flex;align-items:center}.wrapper{display:flex;width:100%;align-items:center}.warning_color{color:var(--yellow-60)}.default_color{color:var(--black-90)}.disabled{opacity:.5}.column_container{display:flex;width:100%;flex-direction:column}.label_row{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-8)}.tooltip_wrapper{display:flex}.clickable_column{display:flex;width:100%;flex-direction:column}.textarea_row{display:flex;align-items:center}.textarea_row_with_icon{gap:var(--spacing-8)}.left_element_wrapper{display:flex}.right_element_wrapper{display:flex;cursor:pointer;text-align:right}.textarea{width:100%;height:100%;padding:var(--spacing-8);border:1px solid var(--grey-50);border-radius:var(--border-radius-4);background-color:var(--white);font-size:var(--font-size-h3);font-weight:var(--font-weight-regular);resize:none}.textarea:focus{border:1px solid var(--blue-50);outline:none}.textarea:disabled{border:1px solid var(--grey-30);background-color:var(--grey-20)}.textarea_error{border:1px solid var(--red-50)}.textarea_error:focus{border:1px solid var(--red-50)}.textarea_background_error{border:none;background-color:var(--red-30)}.textarea_keyboard_focus:focus{border:1px solid var(--blue-50);outline:2px solid var(--blue-50);outline-offset:2px}.label_text{padding-bottom:var(--spacing-4);color:var(--grey-60);font-size:var(--font-size-h3);font-weight:var(--font-weight-regular);line-height:var(--line-height-20)}.label_text_left{text-align:left}.label_text_center{text-align:center}.caption_text{padding-top:var(--spacing-4);color:var(--grey-60)}.error_text{padding-top:var(--spacing-4);color:var(--red-50)}.scrubber_container{display:flex;overflow:visible;width:100%;box-sizing:border-box;flex-direction:column;padding-bottom:var(--spacing-8);margin-bottom:calc(-1 * var(--spacing-8))}.track_container{position:relative;display:flex;width:100%;height:0;align-items:center;cursor:pointer}.track_container:before{position:absolute;top:50%;right:0;left:0;height:28px;content:"";cursor:pointer;transform:translateY(-50%)}.track_background,.track_progress{position:absolute;top:50%;height:6px;pointer-events:none;transform:translateY(-50%)}.track_background{width:100%;background-color:var(--grey-20)}.track_container:hover .track_background{background-color:var(--blue-30)}.track_progress{width:0;background-color:var(--blue-50)}.track_thumb{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background-color:var(--blue-50);opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8);transition:opacity .2s ease-in-out,transform .2s ease-in-out}.track_container:hover .track_thumb,.track_container.dragging .track_thumb{opacity:1;transform:translate(-50%,-50%) scale(1)}.container{display:flex;width:100%;align-items:center;color:var(--black-90);font-size:var(--font-size-28);font-weight:var(--font-weight-regular);line-height:1}.container_error{color:#9e5e00}.container_disabled{opacity:.5}.inner{display:flex;width:100%;flex-direction:column}.label_row{display:flex;flex-direction:row;align-items:center;-moz-column-gap:var(--spacing-8);column-gap:var(--spacing-8)}.outer{display:flex;width:100%;flex-direction:column;gap:var(--spacing-8)}.outer:focus-within{filter:drop-shadow(0 0 10px var(--blue-50))}.outer_error:focus-within{filter:none}.input_field{display:flex;width:100%;align-items:center;padding:var(--touch-input-padding, var(--spacing-16) var(--spacing-24));border:2px solid var(--grey-50);border-radius:var(--touch-input-border-radius, var(--border-radius-4));background-color:var(--white)}.background_error{border:none;background-color:var(--red-30)}.error{border-color:var(--red-50)}.input_field_small{height:var(--spacing-68);font-size:var(--font-size-28)}.input_field_medium{height:var(--spacing-80);font-size:var(--font-size-38)}.input_field:active{border:2px solid var(--blue-50)}.input_field.error:active{border:2px solid var(--red-50)}.input_field:focus-within{border:3px solid var(--blue-50);box-shadow:none}.input_field.error:focus-within{border:2px solid var(--red-50)}.input{width:100%;height:100%;flex:1 1 auto;border:none;border-radius:inherit;background-color:transparent;color:var(--black-90)}.input:focus{outline:none}.input::placeholder{color:var(--grey-40)}.input_small{font-size:var(--font-size-28);line-height:var(--line-height-36)}.input_medium{font-size:var(--font-size-38);line-height:var(--line-height-48)}.password_input.input_small{font-size:71px}.password_input.input_medium{font-size:77px}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.label{padding-bottom:var(--spacing-4);color:var(--grey-60);font-size:var(--font-size-22);font-weight:var(--font-weight-regular);line-height:var(--line-height-28)}.caption{padding:var(--spacing-8) 0 0}.error_text{padding-top:var(--spacing-8);color:var(--red-50);font-size:var(--font-size-22)}.units{color:var(--grey-50);font-size:var(--font-size-22);font-weight:var(--font-weight-regular);line-height:var(--line-height-28);text-align:right;white-space:nowrap}.units_disabled{color:var(--grey-40)}.align_left{justify-content:flex-start;text-align:left}.align_center{justify-content:center;text-align:center}.exit_button{color:var(--grey-60);font-weight:var(--font-weight-semi-bold);text-transform:capitalize}.exit_button:hover{color:var(--grey-50)}@media (width: 1024px) and (height: 600px){.exit_button{margin-right:1.75rem;font-size:var(--font-size-22);font-weight:var(--font-weight-bold)}.exit_button:hover{opacity:1}.exit_button:active{color:var(--grey-50)}}.box{background-color:var(--white)}@media (width: 1024px) and (height: 600px){.box{border-radius:var(--border-radius-16)}}.header_container{display:flex;flex-direction:row;justify-content:space-between;padding:var(--spacing-16) var(--spacing-32)}@media (width: 1024px) and (height: 600px){.header_container{padding:1.75rem var(--spacing-32);border-radius:var(--border-radius-16)}}.step_text{color:var(--grey-60);font-weight:var(--font-weight-semi-bold)}@media (width: 1024px) and (height: 600px){.step_text{margin-left:var(--spacing-16);font-size:var(--font-size-22)}}div.container{width:318px;padding:var(--spacing-16) var(--spacing-8);border-radius:var(--border-radius-4);background-color:var(--grey-20)}div.sub_title{display:flex;width:100%;flex-direction:column;color:var(--grey-60);gap:var(--spacing-8)}div.label{display:flex;width:88px;height:24px;align-items:center;justify-content:center;border-radius:var(--border-radius-4);background-color:var(--transparent-black-80)}.labware_info_container{padding:var(--spacing-4);border-radius:0 0 .4rem .4rem;color:#fff}.labware_info_text_container{display:flex;overflow:hidden;flex-direction:row;align-items:start;justify-content:space-between;font-size:.625rem;gap:var(--spacing-4);text-transform:none;white-space:normal;white-space:initial}.deck_labels_column{display:flex;width:2.5rem;height:100%;flex:1;flex-direction:column;align-items:center}.deck_label_column_container{display:flex;flex:1;align-items:center}.deck_labels_row{display:flex;width:5rem;width:var(--dynamic-width, 5rem);height:2.5rem;flex:1;align-items:center}.deck_label_row_container{display:flex;width:var(--dynamic-width);align-items:center;justify-content:center}.robot_coords_foreign_object_container{display:flex;width:100%;height:100%;transform:scaleY(-1)}.trash_container{display:flex;width:100%;height:100%;align-items:center;justify-content:center;border-radius:var(--border-4);gap:var(--spacing-8)}.trash_container_highlight{border:3px solid var(--blue-50)}.trash_container_rotate_copy,.selected_tip_text{transform-origin:center}.svg{transform:scaleY(-1)}.waste_chute_copy_container{display:flex;text-align:center}.waste_chute_fixture_container{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;gap:var(--spacing-4);padding-left:var(--spacing-8);padding-right:var(--spacing-8)}.waste_chute_fixture_container_highlight{border:3px solid var(--blue-50)}.alert{font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;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:.5rem 1rem;font-weight:600;font-weight:var(--fw-semibold)}.title{width:100%}.success{border:1px solid #60b120;border:1px solid var(--c-success)}.success>.title_bar{background-color:#b6febc;background-color:var(--c-bg-success);color:#60b120;color:var(--c-success)}.success>.title_bar svg{color:#60b120;color:var(--c-success)}.info{border:1px solid #5fd8ee;border:1px solid var(--c-highlight)}.info>.title_bar{background-color:#f0f3ff;background-color:var(--c-bg-selected);color:#00c3e6;color:var(--c-selected-dark)}.info>.title_bar svg{color:#5fd8ee;color:var(--c-highlight)}.warning{border:1px solid #e28200;border:1px solid var(--c-warning)}.warning>.title_bar{background-color:#ffd58f;background-color:var(--c-warning-light);color:#9e5e00;color:var(--c-warning-dark)}.warning>.title_bar svg{fill:#e28200;fill:var(--c-warning)}.error{border:1px solid #d12929;border:1px solid var(--c-error)}.error>.title_bar{background-color:#ffc0c0;background-color:var(--c-error-light);color:#ac0505;color:var(--c-error-dark)}.error>.title_bar svg{fill:#d12929;fill:var(--c-error)}.message{padding:1rem 3rem;background-color:#fff}.message a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.message:empty{padding:0}.icon{width:1.5rem;margin-right:.5rem}.close{width:2rem;padding:.125rem}.close:hover{background-color:#6464641a}:root{--mw-labeled-toggle: 25rem}.toggled_on{color:#0ec9eb;fill:#0ec9eb}.toggled_off{fill:#4a4a4a;fill:var(--c-dark-gray)}.labeled_control_wrapper{display:block;width:100%;padding:1rem}.labeled_control_wrapper:not(:last-child){border-bottom:1px solid #e5e2e2;border-bottom:1px solid var(--c-light-gray)}.labeled_control{display:block}.stacked_labeled_control{display:block;margin-top:.5rem;margin-left:1rem}.stacked_labeled_control_label{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)}.labeled_control_label{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)}.labeled_toggle_button{width:2rem;padding:0;margin-right:1rem;float:right}.labeled_toggle_button:hover{background-color:transparent}.labeled_button,.labeled_select{width:9rem;margin-top:.5rem;float:right}.labeled_select{color:#4a4a4a;color:var(--c-font-dark);font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular)}.labeled_checkbox{float:right}.stacked_control_info{color:#4a4a4a;color:var(--c-font-dark);font-size:.75rem;font-size:var(--fs-body-1);font-weight:400;font-weight:var(--fw-regular)}.stacked_control_info>p{margin-top:.5rem;margin-bottom:0;line-height:1.5}.control_info{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)}.control_info>p{margin-top:.5rem;margin-bottom:0;line-height:1.5}.accessibly_hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:rect(0 0 0 0)}.form_field{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}.label_text{flex:0 0 auto;padding:0 .5rem}.label_text:empty{padding:0}.form_group_label{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}.form_group_label:after{content:":"}.form_group_label_pipette_settings_slideout{margin-bottom:.5rem;color:#16212d;font-size:13px;font-weight:600;font-weight:var(--fw-semibold);text-transform:capitalize}.checkbox_icon{display:flex;width:1.25rem;min-width:1.25rem;align-items:center;justify-content:center;color:#4a4a4a;color:var(--c-font-dark)}.checkbox_icon:not(.checkbox_disabled):hover{cursor:pointer}.checkbox_icon.error{color:#9e5e00;color:var(--c-warning-dark)}.checkbox_icon.checked{color:#006cfa;color:var(--c-blue)}.toggle_icon{display:block;width:2rem;min-width:2rem;color:#4a4a4a;color:var(--c-font-dark)}.toggle_icon:not(.toggle_disabled):hover{cursor:pointer}.dropdown_disabled,.checkbox_disabled,.toggle_disabled{opacity:.5}.input_field_container{width:100%}.input_field{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)}.input_field 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)}.input_field input:focus{outline:none}.input_field input::placeholder{color:#9b9b9b;color:var(--c-med-gray)}.input_field:focus-within{background-color:#fff;background-color:var(--c-white);box-shadow:0 .125rem .25rem #00000080}.input_field .suffix{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}.input_caption{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}.input_caption .right{float:right}.inline{display:flex}.inline .label_text{padding-right:1.5rem}.inline_item{flex:1}.error div,.error span{color:#9e5e00;color:var(--c-warning-dark)}.error select,.error .input_field{background-color:#ffd58f;background-color:var(--c-warning-light)}.dropdown{background-color:#e5e2e2;background-color:var(--c-light-gray)}.dropdown_field{position:relative}.dropdown_field 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;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}.dropdown_field select:focus{background-color:#fff;background-color:var(--c-white);box-shadow:0 .125rem .25rem #00000080}.dropdown_field .dropdown_icon{position:absolute;top:.2rem;right:.25rem;width:1.25rem;pointer-events:none}.dropdown_field .dropdown_icon svg{color:#4a4a4a;color:var(--c-dark-gray)}.error_icon{display:inline-block;width:1.5rem;min-width:1.5rem;padding-right:.5rem}.disabled{pointer-events:none}.disabled .form_group_label{color:#e5e2e2;color:var(--c-light-gray)}.disabled input,.disabled .suffix{color:#9b9b9b;color:var(--c-med-gray)}.example_select_override .ot_select__control{background-color:#00f}.select{position:relative}.select .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 .ot_select__control--menu-is-open{border-bottom-left-radius:0;border-bottom-right-radius:0}.select .ot_select__control--menu-is-open,.select .ot_select__control--is-focused{background-color:#fff;background-color:var(--c-white);box-shadow:0 .125rem .25rem #00000080}.select .ot_select__option{display:flex;padding:.25rem .75rem;cursor:default}.select .ot_select__option--is-focused{background-color:#e5e2e2;background-color:var(--c-light-gray)}.select .ot_select__option--is-disabled{color:#9c9c9c;color:var(--c-font-disabled)}.select .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 .ot_select__single-value{display:flex}.select .ot_select__group:not(:first-child){padding-top:.25rem;border-top:1px solid rgba(155,155,155,.4);margin-top:.25rem}.dropdown_indicator{position:absolute;top:.25rem;right:.25rem;width:1.25rem;pointer-events:none}.dropdown_indicator>svg{color:#4a4a4a;color:var(--c-dark-gray)}.dropdown_indicator.flipped>svg{transform:rotate(180deg)}.dropdown_indicator_icon{width:100%}.menu{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)}.menu_control_bridge{position:absolute;z-index:99;top:calc(100% - 2px);right:0;left:0;height:4px;background-color:#fff;background-color:var(--c-white)}.select_field.error .ot_select__control{background-color:#ffd58f;background-color:var(--c-warning-light)}.select_caption{font-size:.625rem;font-size:var(--fs-caption)}.select_caption.error{color:#9e5e00;color:var(--c-warning-dark);font-weight:600;font-weight:var(--fw-semibold)}.name_overlay{width:100%;padding:.25rem;border-radius:0 0 .5rem .5rem;background-color:#000000bf;color:#fff;color:var(--c-font-light);font-size:.5rem}.display_name{color:#fff;color:var(--c-font-light);font-weight:600;font-weight:var(--fw-semibold);word-wrap:break-word}.deck_slot:active{cursor:grabbing}:root{--list-padding-large: 1rem;--list-padding-small: .75rem}.clickable{cursor:pointer}.disabled{background-color:transparent}.disabled *{background-color:transparent;color:#9c9c9c;color:var(--c-font-disabled);fill:#9c9c9c;fill:var(--c-font-disabled);outline-color:#eee}.panel_group,.titled_list,.list_item{background-color:#fff}.panel_group{box-shadow:0 1px 2px #00000054}.hover_border{outline:1px solid #5fd8ee;outline:var(--bd-width-default) solid var(--c-highlight)}.header_text{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}.title_bar{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}.titled_list_title_bar{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}.titled_list_selected .title_bar{background-color:#f0f3ff;background-color:var(--c-bg-selected)}.titled_list_selected .title_bar *{color:#00c3e6;color:var(--c-selected-dark);font-weight:600;font-weight:var(--fw-semibold)}.title{margin:0;font-size:.875rem;font-size:var(--fs-body-2);font-weight:400;font-weight:var(--fw-regular);text-transform:uppercase}.title_enabled{color:#4a4a4a;color:var(--c-font-dark)}.title_disabled{color:#9c9c9c;color:var(--c-font-disabled)}.title_bar_icon{height:1.5rem;color:#4a4a4a;color:var(--c-font-dark)}.title_bar_error{background-color:#ffc0c0;background-color:var(--c-error-light)}.icon_left_of_title{height:1.2rem;margin-right:.5rem}.icon_left_of_title_container{display:flex;justify-content:flex-start}.title_bar_carat{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}.title_bar_carat:hover{background-color:#0000000d}.list{padding-left:0;margin:0;list-style-type:none}.list_item{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}.list_item:hover{background-color:#f1f1f1;background-color:var(--c-bg-hover)}.list_item.active{background-color:#f0f3ff;background-color:var(--c-bg-selected)}a.list_item{-webkit-text-decoration:none;text-decoration:none}.list_alert{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)}.item_icon{height:.9375rem;height:calc(1.25 * var(--fs-body-1));flex:none;margin-right:.5rem}:root{--sidebar-width: 18.25rem}.panel{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)}.title_bar{display:flex;width:18.25rem;width:var(--sidebar-width);align-items:center}.title{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)}.panel_contents{overflow-x:auto;overflow-y:hidden;overflow:auto hidden;width:18.25rem;width:var(--sidebar-width);height:calc(100vh - 3.5rem)}: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: color .15s ease-in-out;--transition-background-color: 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{fill:none;stroke:#9b9b9b;stroke:var(--c-med-gray)}.slot_occupied{fill:#e5e2e2;fill:var(--c-light-gray)}.slot_occupied.slot_error{fill:#ffd58f;fill:var(--c-warning-light)}.collision_icon{color:#9b9b9b;color:var(--c-med-gray)}

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

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

package/lib/utils/__tests__/setRefs.test.d.ts

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

package/lib/utils/__tests__/truncateString.test.d.ts

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

package/lib/utils/humanizeLabwareType.d.ts

@@ -0,0 +1 @@
+export declare const humanizeLabwareType: (labwareType: string) => string;

package/lib/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './humanizeLabwareType';
+export * from './setRefs';
+export * from './truncateString';
+export * from './wellNameSplit';

package/lib/utils/setRefs.d.ts

@@ -0,0 +1,2 @@
+import type { Ref } from 'react';
+export declare const setRefs: <T>(...refs: (Ref<T> | undefined)[]) => (node: T | null) => void;

package/lib/{utils.d.ts → utils/truncateString.d.ts}

@@ -1,5 +1,3 @@
-export declare const humanizeLabwareType: (labwareType: string) => string;
-export declare const wellNameSplit: (wellName: string) => [string, string];
 /**
  * Truncate a long string to display it
  * @example

package/lib/utils/wellNameSplit.d.ts

@@ -0,0 +1 @@
+export declare const wellNameSplit: (wellName: string) => [string, string];

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "@opentrons/components",
-  "version": "0.2.1-alpha.0",
+  "version": "0.3.0-alpha.0",
   "description": "React components library for Opentrons' projects",
-  "source": "src/index.ts",
   "types": "lib/index.d.ts",
-  "style": "src/index.module.css",
-  "main": "lib/index.mjs",
+  "style": "lib/style.css",
+  "main": "lib/index.js",
   "module": "lib/index.mjs",
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
       "import": "./lib/index.mjs",
-      "require": "./lib/index.mjs",
+      "require": "./lib/index.js",
       "default": "./lib/index.mjs"
     },
-    "./styles": "./lib/style.css"
+    "./styles": "./lib/style.css",
+    "./styles/global": "./src/styles/global.css",
+    "./styles/legacy": "./src/index.module.css",
+    "./package.json": "./package.json"
   },
   "repository": {
     "type": "git",
@@ -27,24 +29,17 @@
   },
   "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.1-alpha.0",
+    "@opentrons/shared-data": "0.3.0-alpha.0",
+    "@opentrons/step-generation": "0.3.0-alpha.0",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
-    "@types/classnames": "2.2.5",
-    "@types/lodash": "^4.14.191",
-    "@types/styled-components": "^5.1.26",
-    "@types/webpack-env": "^1.16.0",
     "classnames": "2.2.5",
-    "interactjs": "^1.10.27",
-    "i18next": "^19.8.3",
-    "lodash": "4.17.21",
-    "react-i18next": "14.0.0",
+    "lodash": "4.18.1",
     "react-markdown": "9.0.3",
     "react-popper": "1.0.0",
     "react-remove-scroll": "2.4.3",
@@ -54,18 +49,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'"
+    "react-redux": "8.1.2",
+    "@types/classnames": "2.2.5",
+    "@types/lodash": "4.17.24",
+    "@types/styled-components": "^5.1.26",
+    "@types/webpack-env": "^1.16.0",
+    "interactjs": "^1.10.27"
   },
   "files": [
     "lib/",
-    "README.md"
+    "src/styles/",
+    "src/index.module.css",
+    "README.md",
+    "LICENSE"
   ]
 }

package/src/index.module.css

@@ -0,0 +1,9 @@
+/* opentrons style library */
+
+@import url('./styles/colors.module.css');
+@import url('./styles/typography.module.css');
+@import url('./styles/borders.module.css');
+
+:global(*) {
+  box-sizing: border-box;
+}

package/src/styles/borders.module.css

@@ -0,0 +1,20 @@
+@import url('./colors.module.css');
+
+:root {
+  /* borders */
+  --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);
+
+  /* dropshadows */
+
+  /* TODO: Ian 2018-07-26 consolidate all shadows here (eg from buttons) */
+  --shadow-lvl-1:
+    0 1px 3px 0 rgb(0 0 0 / 10%),
+    0 1px 2px 0 rgb(0 0 0 / 20%);
+  --shadow-lvl-2:
+    0 3px 6px 0 rgb(0 0 0 / 13%),
+    0 3px 6px 0 rgb(0 0 0 / 23%);
+}