@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.5

package/lib/index.mjs

@@ -11352,7 +11352,7 @@ const orderRuntimeParameterRangeOptions = (choices) => {
       return numA - numB;
     }).join(", ");
   } else {
-    return displayNames.sort().join(", ");
+    return displayNames.join(", ");
   }
 };
 const getLabwareDefIsStandard = (def) => (def == null ? void 0 : def.namespace) === OPENTRONS_LABWARE_NAMESPACE;
@@ -11462,8 +11462,7 @@ function getCutoutFixturesForModuleModel(moduleModel, deckDef) {
     return moduleFixture != null ? [...acc, moduleFixture] : acc;
   }, []);
 }
-function getFixtureIdByCutoutIdFromModuleSlotName(slotName, moduleFixtures, deckDef) {
-  const anchorCutoutId = getCutoutIdForSlotName(slotName, deckDef);
+function getFixtureIdByCutoutIdFromModuleAnchorCutoutId(anchorCutoutId, moduleFixtures) {
   const anchorFixture = moduleFixtures.find(
     (fixture) => fixture.mayMountTo.some((cutoutId) => cutoutId === anchorCutoutId)
   );
@@ -11473,6 +11472,13 @@ function getFixtureIdByCutoutIdFromModuleSlotName(slotName, moduleFixtures, deck
   }
   return {};
 }
+function getFixtureIdByCutoutIdFromModuleSlotName(slotName, moduleFixtures, deckDef) {
+  const anchorCutoutId = getCutoutIdForSlotName(slotName, deckDef);
+  return getFixtureIdByCutoutIdFromModuleAnchorCutoutId(
+    anchorCutoutId,
+    moduleFixtures
+  );
+}
 function getCutoutIdsFromModuleSlotName(slotName, moduleFixtures, deckDef) {
   const fixtureIdByCutoutId = getFixtureIdByCutoutIdFromModuleSlotName(
     slotName,
@@ -12779,6 +12785,7 @@ const spacing20 = "1.25rem";
 const spacing24 = "1.5rem";
 const spacing32 = "2rem";
 const spacing40 = "2.5rem";
+const spacing44 = "2.75rem";
 const spacing48 = "3rem";
 const spacing60 = "3.75rem";
 const spacing68 = "4.25rem";
@@ -12797,6 +12804,7 @@ const spacing = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   spacing32,
   spacing4,
   spacing40,
+  spacing44,
   spacing48,
   spacing6,
   spacing60,
@@ -13775,8 +13783,8 @@ const ICON_DATA_BY_NAME = {
     viewBox: "0 0 24 24"
   },
   "menu-down": {
-    path: "M7,10L12,15L17,10H7Z",
-    viewBox: "0 0 24 24"
+    path: "M2.0672 4.46744C1.9125 4.28307 2.04206 4 2.28116 4L9.71887 4.00001C9.95795 4.00001 10.0875 4.28307 9.93281 4.46744L6.21412 8.89982C6.10205 9.03339 5.89826 9.0334 5.78619 8.89983L2.0672 4.46744Z",
+    viewBox: "0 0 12 12"
   },
   minus: {
     path: "M19,13H5V11H19V13Z",
@@ -14058,6 +14066,10 @@ const ICON_DATA_BY_NAME = {
     path: "M8.01487 8.84912C8.47511 8.84912 8.84821 8.47603 8.84821 8.01579C8.84821 7.55555 8.47511 7.18245 8.01487 7.18245C7.55464 7.18245 7.18154 7.55555 7.18154 8.01579C7.18154 8.47603 7.55464 8.84912 8.01487 8.84912Z M8.66654 0.928711V2.36089C11.27 2.66533 13.3354 4.73075 13.6398 7.33418H15.072V8.66751H13.6398C13.3354 11.2709 11.27 13.3363 8.66654 13.6408V15.073H7.3332V13.6408C4.72979 13.3363 2.66437 11.2709 2.35992 8.66751H0.927734V7.33418H2.35992C2.66436 4.73075 4.72978 2.66533 7.3332 2.36089V0.928711H8.66654ZM12.2944 7.33418H11.6184C11.2502 7.33418 10.9518 7.63266 10.9518 8.00085C10.9518 8.36904 11.2502 8.66751 11.6184 8.66751H12.2944C12.0071 10.5336 10.5326 12.008 8.66654 12.2953V11.6194C8.66654 11.2512 8.36806 10.9527 7.99987 10.9527C7.63168 10.9527 7.3332 11.2512 7.3332 11.6194V12.2953C5.46716 12.008 3.99268 10.5336 3.70536 8.66751H4.38132C4.74951 8.66751 5.04798 8.36904 5.04798 8.00085C5.04798 7.63266 4.74951 7.33418 4.38132 7.33418H3.70536C3.99267 5.46812 5.46715 3.99364 7.3332 3.70632V4.38229C7.3332 4.75048 7.63168 5.04896 7.99987 5.04896C8.36806 5.04896 8.66654 4.75048 8.66654 4.38229V3.70632C10.5326 3.99364 12.0071 5.46812 12.2944 7.33418Z",
     viewBox: "0 0 16 16"
   },
+  send: {
+    path: "M6.96216 26.6667V5.33337L32.2955 16L6.96216 26.6667ZM9.62882 22.6667L25.4288 16L9.62882 9.33337V14L17.6288 16L9.62882 18V22.6667Z",
+    viewBox: "0 0 32 32"
+  },
   settings: {
     path: "M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z",
     viewBox: "0 0 24 24"
@@ -15084,9 +15096,26 @@ var _StyledTooltip = _styled(Tooltip).withConfig({
   componentId: "sc-16k3q66-5"
 })(["", ""], (p) => p.$_css2);
 function InfoScreen({
-  contentType
+  contentType,
+  t
 }) {
-  const bodyText = contentType === "parameters" ? "No parameters specified in this protocol" : "Connect modules to see controls";
+  let bodyText = "";
+  switch (contentType) {
+    case "parameters":
+      bodyText = t != null ? t("no_parameters_specified_in_protocol") : "No parameters specified in this protocol";
+      break;
+    case "moduleControls":
+      bodyText = t != null ? t("connect_modules_for_controls") : "Connect modules to see controls";
+      break;
+    case "runNotStarted":
+      bodyText = t != null ? t("run_never_started") : "Run was never started";
+      break;
+    case "labware":
+      bodyText = "No labware specified in this protocol";
+      break;
+    default:
+      bodyText = contentType;
+  }
   return /* @__PURE__ */ jsxs(Flex, { alignItems: ALIGN_CENTER, width: "100%", flexDirection: DIRECTION_COLUMN, gridGap: spacing12, backgroundColor: grey30, borderRadius: borderRadius8, padding: `${spacing40} ${spacing16}`, "data-testid": `InfoScreen_${contentType}`, children: [
     /* @__PURE__ */ jsx(Icon, { name: "ot-alert", size: "1.25rem", color: grey60, "aria-label": "alert" }),
     /* @__PURE__ */ jsx(StyledText, { as: "p", fontWeight: fontWeightSemiBold, children: bodyText })
@@ -16333,8 +16362,9 @@ function BaseDeck(props) {
     svgProps = {}
   } = props;
   const deckDef = getDeckDefFromRobotType(robotType);
-  const singleSlotFixtures = deckConfig.filter((fixture) => fixture.cutoutFixtureId != null && SINGLE_SLOT_FIXTURES.includes(fixture.cutoutFixtureId));
-  const stagingAreaFixtures = deckConfig.filter((fixture) => fixture.cutoutFixtureId === STAGING_AREA_RIGHT_SLOT_FIXTURE && STAGING_AREA_CUTOUTS.includes(fixture.cutoutId));
+  const singleSlotFixtures = deckConfig.filter((fixture) => fixture.cutoutFixtureId != null && (SINGLE_SLOT_FIXTURES.includes(fixture.cutoutFixtureId) || // If module fixture is loaded, still visualize singleSlotFixture underneath for consistency
+  Object.entries(MODULE_FIXTURES_BY_MODEL).reduce((acc, [_model, fixtures]) => [...acc, ...fixtures], []).includes(fixture.cutoutFixtureId)));
+  const stagingAreaFixtures = deckConfig.filter((fixture) => (fixture.cutoutFixtureId === STAGING_AREA_RIGHT_SLOT_FIXTURE || fixture.cutoutFixtureId === STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE) && STAGING_AREA_CUTOUTS.includes(fixture.cutoutId));
   const trashBinFixtures = deckConfig.filter((fixture) => fixture.cutoutFixtureId === TRASH_BIN_ADAPTER_FIXTURE && MOVABLE_TRASH_CUTOUTS.includes(fixture.cutoutId));
   const wasteChuteOnlyFixtures = deckConfig.filter((fixture) => fixture.cutoutFixtureId != null && WASTE_CHUTE_ONLY_FIXTURES.includes(fixture.cutoutFixtureId) && fixture.cutoutId === WASTE_CHUTE_CUTOUT);
   const wasteChuteStagingAreaFixtures = deckConfig.filter((fixture) => fixture.cutoutFixtureId != null && WASTE_CHUTE_STAGING_AREA_FIXTURES.includes(fixture.cutoutFixtureId) && fixture.cutoutId === WASTE_CHUTE_CUTOUT);
@@ -16900,6 +16930,26 @@ const CONFIG_STYLE_EDITABLE = css`
     }
   }
 `;
+const CONFIG_STYLE_SELECTED = css`
+  ${CONFIG_STYLE_EDITABLE}
+  background-color: ${blue50};
+
+  &:active {
+    background-color: ${blue60};
+  }
+
+  &:hover {
+    background-color: ${blue55};
+  }
+
+  &:focus-visible {
+    border: 3px solid ${yellow50};
+    background-color: ${blue55};
+    @media ${touchscreenMediaQuerySpecs} {
+      background-color: ${blue60};
+    }
+  }
+`;
 function EmptyConfigFixture(props) {
   const {
     deckDefinition,
@@ -16953,18 +17003,20 @@ function StagingAreaConfigFixture(props) {
     deckDefinition,
     handleClickRemove,
     fixtureLocation,
-    cutoutFixtureId
+    cutoutFixtureId,
+    selected: selected2 = false
   } = props;
   const stagingAreaCutout = deckDefinition.locations.cutouts.find((cutout) => cutout.id === fixtureLocation);
   const [xSlotPosition = 0, ySlotPosition = 0] = (stagingAreaCutout == null ? void 0 : stagingAreaCutout.position) ?? [];
   const x = xSlotPosition + COLUMN_3_X_ADJUSTMENT;
   const y = ySlotPosition + Y_ADJUSTMENT;
+  const editableStyle = selected2 ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE;
   return /* @__PURE__ */ jsx(RobotCoordsForeignObject, { width: STAGING_AREA_FIXTURE_WIDTH, height: FIXTURE_HEIGHT, x, y, flexProps: {
     flex: "1"
   }, foreignObjectProps: {
     flex: "1"
   }, children: /* @__PURE__ */ jsxs(_StyledBtn$7, { cursor: handleClickRemove != null ? "pointer" : "default", onClick: handleClickRemove != null ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) : () => {
-  }, $_css: handleClickRemove != null ? CONFIG_STYLE_EDITABLE : CONFIG_STYLE_READ_ONLY, children: [
+  }, $_css: handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY, children: [
     /* @__PURE__ */ jsx(_StyledText$8, { $_css2: smallBodyTextSemiBold, children: STAGING_AREA_DISPLAY_NAME }),
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
@@ -16982,7 +17034,8 @@ function TrashBinConfigFixture(props) {
     deckDefinition,
     handleClickRemove,
     fixtureLocation,
-    cutoutFixtureId
+    cutoutFixtureId,
+    selected: selected2 = false
   } = props;
   const trashBinCutout = deckDefinition.locations.cutouts.find((cutout) => cutout.id === fixtureLocation);
   const [xSlotPosition = 0, ySlotPosition = 0] = (trashBinCutout == null ? void 0 : trashBinCutout.position) ?? [];
@@ -16990,12 +17043,13 @@ function TrashBinConfigFixture(props) {
   const xAdjustment = isColumnOne ? COLUMN_1_X_ADJUSTMENT : COLUMN_3_X_ADJUSTMENT;
   const x = xSlotPosition + xAdjustment;
   const y = ySlotPosition + Y_ADJUSTMENT;
+  const editableStyle = selected2 ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE;
   return /* @__PURE__ */ jsx(RobotCoordsForeignObject, { width: COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH, height: FIXTURE_HEIGHT, x, y, flexProps: {
     flex: "1"
   }, foreignObjectProps: {
     flex: "1"
   }, children: /* @__PURE__ */ jsxs(_StyledBtn$6, { cursor: handleClickRemove != null ? "pointer" : "default", onClick: handleClickRemove != null ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) : () => {
-  }, $_css: handleClickRemove != null ? CONFIG_STYLE_EDITABLE : CONFIG_STYLE_READ_ONLY, children: [
+  }, $_css: handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY, children: [
     /* @__PURE__ */ jsx(_StyledText$7, { $_css2: smallBodyTextSemiBold, children: TRASH_BIN_DISPLAY_NAME }),
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
@@ -17014,18 +17068,20 @@ function WasteChuteConfigFixture(props) {
     handleClickRemove,
     fixtureLocation,
     cutoutFixtureId,
-    hasStagingAreas = false
+    hasStagingAreas = false,
+    selected: selected2 = false
   } = props;
   const wasteChuteCutout = deckDefinition.locations.cutouts.find((cutout) => cutout.id === fixtureLocation);
   const [xSlotPosition = 0, ySlotPosition = 0] = (wasteChuteCutout == null ? void 0 : wasteChuteCutout.position) ?? [];
   const x = xSlotPosition + COLUMN_3_X_ADJUSTMENT;
   const y = ySlotPosition + Y_ADJUSTMENT;
+  const editableStyle = selected2 ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE;
   return /* @__PURE__ */ jsx(RobotCoordsForeignObject, { width: hasStagingAreas ? STAGING_AREA_FIXTURE_WIDTH : COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH, height: FIXTURE_HEIGHT, x, y, flexProps: {
     flex: "1"
   }, foreignObjectProps: {
     flex: "1"
   }, children: /* @__PURE__ */ jsxs(_StyledBtn$5, { cursor: handleClickRemove != null ? "pointer" : "default", onClick: handleClickRemove != null ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) : () => {
-  }, $_css: handleClickRemove != null ? CONFIG_STYLE_EDITABLE : CONFIG_STYLE_READ_ONLY, children: [
+  }, $_css: handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY, children: [
     /* @__PURE__ */ jsx(_StyledText$6, { $_css2: smallBodyTextSemiBold, children: WASTE_CHUTE_DISPLAY_NAME }),
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
@@ -17069,7 +17125,8 @@ function TemperatureModuleFixture(props) {
     deckDefinition,
     handleClickRemove,
     fixtureLocation,
-    cutoutFixtureId
+    cutoutFixtureId,
+    selected: selected2 = false
   } = props;
   const cutoutDef = deckDefinition.locations.cutouts.find((cutout) => cutout.id === fixtureLocation);
   const [xSlotPosition = 0, ySlotPosition = 0] = (cutoutDef == null ? void 0 : cutoutDef.position) ?? [];
@@ -17077,12 +17134,13 @@ function TemperatureModuleFixture(props) {
   const xAdjustment = isColumnOne ? COLUMN_1_X_ADJUSTMENT : COLUMN_3_X_ADJUSTMENT;
   const x = xSlotPosition + xAdjustment;
   const y = ySlotPosition + Y_ADJUSTMENT;
+  const editableStyle = selected2 ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE;
   return /* @__PURE__ */ jsx(RobotCoordsForeignObject, { width: COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH, height: FIXTURE_HEIGHT, x, y, flexProps: {
     flex: "1"
   }, foreignObjectProps: {
     flex: "1"
   }, children: /* @__PURE__ */ jsxs(_StyledBtn$3, { cursor: handleClickRemove != null ? "pointer" : "default", onClick: handleClickRemove != null ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) : () => {
-  }, $_css: handleClickRemove != null ? CONFIG_STYLE_EDITABLE : CONFIG_STYLE_READ_ONLY, children: [
+  }, $_css: handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY, children: [
     /* @__PURE__ */ jsx(_StyledText$4, { $_css2: smallBodyTextSemiBold, children: TEMPERATURE_MODULE_FIXTURE_DISPLAY_NAME }),
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
@@ -17095,13 +17153,14 @@ var _StyledText$4 = _styled(Text).withConfig({
   displayName: "TemperatureModuleFixture___StyledText",
   componentId: "sc-j8juq6-1"
 })(["", ""], (p) => p.$_css2);
-const HEATER_SHAKER_MODULE_FIXTURE_DISPLAY_NAME = "Heater Shaker Module";
+const HEATER_SHAKER_MODULE_FIXTURE_DISPLAY_NAME = "Heater-Shaker";
 function HeaterShakerFixture(props) {
   const {
     deckDefinition,
     handleClickRemove,
     fixtureLocation,
-    cutoutFixtureId
+    cutoutFixtureId,
+    selected: selected2 = false
   } = props;
   const cutoutDef = deckDefinition.locations.cutouts.find((cutout) => cutout.id === fixtureLocation);
   const [xSlotPosition = 0, ySlotPosition = 0] = (cutoutDef == null ? void 0 : cutoutDef.position) ?? [];
@@ -17109,12 +17168,13 @@ function HeaterShakerFixture(props) {
   const xAdjustment = isColumnOne ? COLUMN_1_X_ADJUSTMENT : COLUMN_3_X_ADJUSTMENT;
   const x = xSlotPosition + xAdjustment;
   const y = ySlotPosition + Y_ADJUSTMENT;
+  const editableStyle = selected2 ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE;
   return /* @__PURE__ */ jsx(RobotCoordsForeignObject, { width: COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH, height: FIXTURE_HEIGHT, x, y, flexProps: {
     flex: "1"
   }, foreignObjectProps: {
     flex: "1"
   }, children: /* @__PURE__ */ jsxs(_StyledBtn$2, { cursor: handleClickRemove != null ? "pointer" : "default", onClick: handleClickRemove != null ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) : () => {
-  }, $_css: handleClickRemove != null ? CONFIG_STYLE_EDITABLE : CONFIG_STYLE_READ_ONLY, children: [
+  }, $_css: handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY, children: [
     /* @__PURE__ */ jsx(_StyledText$3, { $_css2: smallBodyTextSemiBold, children: HEATER_SHAKER_MODULE_FIXTURE_DISPLAY_NAME }),
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
@@ -17135,7 +17195,8 @@ function MagneticBlockFixture(props) {
     fixtureLocation,
     handleClickRemove,
     cutoutFixtureId,
-    hasStagingArea
+    hasStagingArea,
+    selected: selected2 = false
   } = props;
   const standardSlotCutout = deckDefinition.locations.cutouts.find((cutout) => cutout.id === fixtureLocation);
   const [xSlotPosition = 0, ySlotPosition = 0] = (standardSlotCutout == null ? void 0 : standardSlotCutout.position) ?? [];
@@ -17170,12 +17231,13 @@ function MagneticBlockFixture(props) {
     }
   }
   const y = ySlotPosition + Y_ADJUSTMENT;
+  const editableStyle = selected2 ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE;
   return /* @__PURE__ */ jsx(RobotCoordsForeignObject, { width, height: FIXTURE_HEIGHT, x, y, flexProps: {
     flex: "1"
   }, foreignObjectProps: {
     flex: "1"
   }, children: /* @__PURE__ */ jsxs(_StyledBtn$1, { cursor: handleClickRemove != null ? "pointer" : "default", onClick: handleClickRemove != null ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) : () => {
-  }, $_css: handleClickRemove != null ? CONFIG_STYLE_EDITABLE : CONFIG_STYLE_READ_ONLY, children: [
+  }, $_css: handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY, children: [
     /* @__PURE__ */ jsx(_StyledText$2, { $_css2: smallBodyTextSemiBold, children: displayName2 }),
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
@@ -17194,18 +17256,20 @@ function ThermocyclerFixture(props) {
     deckDefinition,
     handleClickRemove,
     fixtureLocation,
-    cutoutFixtureId
+    cutoutFixtureId,
+    selected: selected2 = false
   } = props;
   const cutoutDef = deckDefinition.locations.cutouts.find((cutout) => cutout.id === fixtureLocation);
   const [xSlotPosition = 0, ySlotPosition = 0] = (cutoutDef == null ? void 0 : cutoutDef.position) ?? [];
   const x = xSlotPosition + COLUMN_1_X_ADJUSTMENT;
   const y = ySlotPosition + Y_ADJUSTMENT;
+  const editableStyle = selected2 ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE;
   return /* @__PURE__ */ jsx(RobotCoordsForeignObject, { width: COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH, height: THERMOCYCLER_FIXTURE_HEIGHT, x, y, flexProps: {
     flex: "1"
   }, foreignObjectProps: {
     flex: "1"
   }, children: /* @__PURE__ */ jsxs(_StyledBtn, { cursor: handleClickRemove != null ? "pointer" : "default", onClick: handleClickRemove != null ? () => handleClickRemove(fixtureLocation, cutoutFixtureId) : () => {
-  }, $_css: handleClickRemove != null ? CONFIG_STYLE_EDITABLE : CONFIG_STYLE_READ_ONLY, children: [
+  }, $_css: handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY, children: [
     /* @__PURE__ */ jsx(_StyledText$1, { $_css2: smallBodyTextSemiBold, children: THERMOCYCLER_FIXTURE_DISPLAY_NAME }),
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
@@ -17223,96 +17287,90 @@ function DeckConfigurator(props) {
     deckConfig,
     handleClickAdd,
     handleClickRemove,
+    additionalStaticFixtures,
+    children,
+    selectedCutoutId,
     lightFill = grey35,
     darkFill = black90,
-    readOnly = false,
+    editableCutoutIds = deckConfig.map(({
+      cutoutId
+    }) => cutoutId),
     showExpansion = true,
-    additionalStaticFixtures,
-    children
+    height = "455px"
   } = props;
   const deckDef = getDeckDefFromRobotType(FLEX_ROBOT_TYPE);
-  const configurableFixtureLocations = ["cutoutA1", "cutoutB1", "cutoutC1", "cutoutD1", "cutoutA2", "cutoutB2", "cutoutC2", "cutoutD2", "cutoutA3", "cutoutB3", "cutoutC3", "cutoutD3"];
-  const configurableDeckConfig = deckConfig.filter(({
-    cutoutId
-  }) => configurableFixtureLocations.includes(cutoutId));
-  const stagingAreaFixtures = configurableDeckConfig.filter(({
+  const stagingAreaFixtures = deckConfig.filter(({
     cutoutFixtureId
   }) => cutoutFixtureId === STAGING_AREA_RIGHT_SLOT_FIXTURE);
-  const wasteChuteFixtures = configurableDeckConfig.filter(({
+  const wasteChuteFixtures = deckConfig.filter(({
     cutoutFixtureId
   }) => cutoutFixtureId != null && WASTE_CHUTE_ONLY_FIXTURES.includes(cutoutFixtureId));
-  const wasteChuteStagingAreaFixtures = configurableDeckConfig.filter(({
+  const wasteChuteStagingAreaFixtures = deckConfig.filter(({
     cutoutFixtureId
   }) => cutoutFixtureId != null && WASTE_CHUTE_STAGING_AREA_FIXTURES.includes(cutoutFixtureId));
-  const emptyFixtures = readOnly ? [] : configurableDeckConfig.filter(({
-    cutoutFixtureId
-  }) => cutoutFixtureId != null && SINGLE_SLOT_FIXTURES.includes(cutoutFixtureId));
-  const trashBinFixtures = configurableDeckConfig.filter(({
+  const emptyCutouts = deckConfig.filter(({
+    cutoutFixtureId,
+    cutoutId
+  }) => editableCutoutIds.includes(cutoutId) && cutoutFixtureId != null && SINGLE_SLOT_FIXTURES.includes(cutoutFixtureId));
+  const trashBinFixtures = deckConfig.filter(({
     cutoutFixtureId
   }) => cutoutFixtureId === TRASH_BIN_ADAPTER_FIXTURE);
-  const thermocyclerFixtures = configurableDeckConfig.filter(({
+  const thermocyclerFixtures = deckConfig.filter(({
     cutoutFixtureId
   }) => cutoutFixtureId === THERMOCYCLER_V2_FRONT_FIXTURE);
-  const heaterShakerFixtures = configurableDeckConfig.filter(({
+  const heaterShakerFixtures = deckConfig.filter(({
     cutoutFixtureId
   }) => cutoutFixtureId === HEATERSHAKER_MODULE_V1_FIXTURE);
-  const temperatureModuleFixtures = configurableDeckConfig.filter(({
+  const temperatureModuleFixtures = deckConfig.filter(({
     cutoutFixtureId
   }) => cutoutFixtureId === TEMPERATURE_MODULE_V2_FIXTURE);
-  const magneticBlockFixtures = configurableDeckConfig.filter(({
+  const magneticBlockFixtures = deckConfig.filter(({
     cutoutFixtureId
   }) => [MAGNETIC_BLOCK_V1_FIXTURE, STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE].includes(cutoutFixtureId));
-  return /* @__PURE__ */ jsxs(
-    RobotCoordinateSpace,
-    {
-      height: "455px",
-      viewBox: `${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`,
-      children: [
-        deckDef.locations.cutouts.map((cutout) => (
-          // give the outside of the base fixture svgs a stroke for extra spacing
-          /* @__PURE__ */ jsx("g", { stroke: white, strokeWidth: "4", children: /* @__PURE__ */ jsx(SingleSlotFixture, { cutoutId: cutout.id, deckDefinition: deckDef, slotClipColor: transparent, fixtureBaseColor: lightFill, showExpansion }) }, cutout.id)
-        )),
-        stagingAreaFixtures.map(({
-          cutoutId,
-          cutoutFixtureId
-        }) => /* @__PURE__ */ jsx(StagingAreaConfigFixture, { deckDefinition: deckDef, handleClickRemove: readOnly ? void 0 : handleClickRemove, fixtureLocation: cutoutId, cutoutFixtureId }, cutoutId)),
-        emptyFixtures.map(({
-          cutoutId
-        }) => /* @__PURE__ */ jsx(EmptyConfigFixture, { deckDefinition: deckDef, handleClickAdd, fixtureLocation: cutoutId }, cutoutId)),
-        wasteChuteFixtures.map(({
-          cutoutId,
-          cutoutFixtureId
-        }) => /* @__PURE__ */ jsx(WasteChuteConfigFixture, { deckDefinition: deckDef, handleClickRemove: readOnly ? void 0 : handleClickRemove, fixtureLocation: cutoutId, cutoutFixtureId }, cutoutId)),
-        wasteChuteStagingAreaFixtures.map(({
-          cutoutId,
-          cutoutFixtureId
-        }) => /* @__PURE__ */ jsx(WasteChuteConfigFixture, { deckDefinition: deckDef, handleClickRemove: readOnly ? void 0 : handleClickRemove, fixtureLocation: cutoutId, cutoutFixtureId, hasStagingAreas: true }, cutoutId)),
-        trashBinFixtures.map(({
-          cutoutId,
-          cutoutFixtureId
-        }) => /* @__PURE__ */ jsx(TrashBinConfigFixture, { deckDefinition: deckDef, handleClickRemove: readOnly ? void 0 : handleClickRemove, fixtureLocation: cutoutId, cutoutFixtureId }, cutoutId)),
-        temperatureModuleFixtures.map(({
-          cutoutId,
-          cutoutFixtureId
-        }) => /* @__PURE__ */ jsx(TemperatureModuleFixture, { deckDefinition: deckDef, handleClickRemove: readOnly ? void 0 : handleClickRemove, fixtureLocation: cutoutId, cutoutFixtureId }, cutoutId)),
-        heaterShakerFixtures.map(({
-          cutoutId,
-          cutoutFixtureId
-        }) => /* @__PURE__ */ jsx(HeaterShakerFixture, { deckDefinition: deckDef, handleClickRemove: readOnly ? void 0 : handleClickRemove, fixtureLocation: cutoutId, cutoutFixtureId }, cutoutId)),
-        magneticBlockFixtures.map(({
-          cutoutId,
-          cutoutFixtureId
-        }) => /* @__PURE__ */ jsx(MagneticBlockFixture, { deckDefinition: deckDef, handleClickRemove: readOnly ? void 0 : handleClickRemove, fixtureLocation: cutoutId, cutoutFixtureId, hasStagingArea: cutoutFixtureId === STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE }, cutoutId)),
-        thermocyclerFixtures.map(({
-          cutoutId,
-          cutoutFixtureId
-        }) => /* @__PURE__ */ jsx(ThermocyclerFixture, { deckDefinition: deckDef, handleClickRemove: readOnly ? void 0 : handleClickRemove, fixtureLocation: cutoutId, cutoutFixtureId }, cutoutId)),
-        additionalStaticFixtures == null ? void 0 : additionalStaticFixtures.map((staticFixture) => /* @__PURE__ */ jsx(StaticFixture, { deckDefinition: deckDef, label: staticFixture.label, fixtureLocation: staticFixture.location }, staticFixture.location)),
-        /* @__PURE__ */ jsx(SlotLabels, { robotType: FLEX_ROBOT_TYPE, color: darkFill, show4thColumn: stagingAreaFixtures.length > 0 || wasteChuteStagingAreaFixtures.length > 0 }),
-        children
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(RobotCoordinateSpace, { height, viewBox: `${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`, children: [
+    deckDef.locations.cutouts.map((cutout) => (
+      // give the outside of the base fixture svgs a stroke for extra spacing
+      /* @__PURE__ */ jsx("g", { stroke: white, strokeWidth: "4", children: /* @__PURE__ */ jsx(SingleSlotFixture, { cutoutId: cutout.id, deckDefinition: deckDef, slotClipColor: transparent, fixtureBaseColor: lightFill, showExpansion }) }, cutout.id)
+    )),
+    stagingAreaFixtures.map(({
+      cutoutId,
+      cutoutFixtureId
+    }) => /* @__PURE__ */ jsx(StagingAreaConfigFixture, { deckDefinition: deckDef, handleClickRemove: editableCutoutIds.includes(cutoutId) ? handleClickRemove : void 0, fixtureLocation: cutoutId, cutoutFixtureId, selected: cutoutId === selectedCutoutId }, cutoutId)),
+    emptyCutouts.map(({
+      cutoutId
+    }) => /* @__PURE__ */ jsx(EmptyConfigFixture, { deckDefinition: deckDef, handleClickAdd, fixtureLocation: cutoutId }, cutoutId)),
+    wasteChuteFixtures.map(({
+      cutoutId,
+      cutoutFixtureId
+    }) => /* @__PURE__ */ jsx(WasteChuteConfigFixture, { deckDefinition: deckDef, handleClickRemove: editableCutoutIds.includes(cutoutId) ? handleClickRemove : void 0, fixtureLocation: cutoutId, cutoutFixtureId, selected: cutoutId === selectedCutoutId }, cutoutId)),
+    wasteChuteStagingAreaFixtures.map(({
+      cutoutId,
+      cutoutFixtureId
+    }) => /* @__PURE__ */ jsx(WasteChuteConfigFixture, { deckDefinition: deckDef, handleClickRemove: editableCutoutIds.includes(cutoutId) ? handleClickRemove : void 0, fixtureLocation: cutoutId, cutoutFixtureId, selected: cutoutId === selectedCutoutId, hasStagingAreas: true }, cutoutId)),
+    trashBinFixtures.map(({
+      cutoutId,
+      cutoutFixtureId
+    }) => /* @__PURE__ */ jsx(TrashBinConfigFixture, { deckDefinition: deckDef, handleClickRemove: editableCutoutIds.includes(cutoutId) ? handleClickRemove : void 0, fixtureLocation: cutoutId, cutoutFixtureId, selected: cutoutId === selectedCutoutId }, cutoutId)),
+    temperatureModuleFixtures.map(({
+      cutoutId,
+      cutoutFixtureId
+    }) => /* @__PURE__ */ jsx(TemperatureModuleFixture, { deckDefinition: deckDef, handleClickRemove: editableCutoutIds.includes(cutoutId) ? handleClickRemove : void 0, fixtureLocation: cutoutId, cutoutFixtureId, selected: cutoutId === selectedCutoutId }, cutoutId)),
+    heaterShakerFixtures.map(({
+      cutoutId,
+      cutoutFixtureId
+    }) => /* @__PURE__ */ jsx(HeaterShakerFixture, { deckDefinition: deckDef, handleClickRemove: editableCutoutIds.includes(cutoutId) ? handleClickRemove : void 0, fixtureLocation: cutoutId, cutoutFixtureId, selected: cutoutId === selectedCutoutId }, cutoutId)),
+    magneticBlockFixtures.map(({
+      cutoutId,
+      cutoutFixtureId
+    }) => /* @__PURE__ */ jsx(MagneticBlockFixture, { deckDefinition: deckDef, handleClickRemove: editableCutoutIds.includes(cutoutId) ? handleClickRemove : void 0, fixtureLocation: cutoutId, cutoutFixtureId, selected: cutoutId === selectedCutoutId, hasStagingArea: cutoutFixtureId === STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE }, cutoutId)),
+    thermocyclerFixtures.map(({
+      cutoutId,
+      cutoutFixtureId
+    }) => /* @__PURE__ */ jsx(ThermocyclerFixture, { deckDefinition: deckDef, handleClickRemove: editableCutoutIds.includes(cutoutId) ? handleClickRemove : void 0, fixtureLocation: cutoutId, cutoutFixtureId, selected: cutoutId === selectedCutoutId }, cutoutId)),
+    additionalStaticFixtures == null ? void 0 : additionalStaticFixtures.map((staticFixture) => /* @__PURE__ */ jsx(StaticFixture, { deckDefinition: deckDef, label: staticFixture.label, fixtureLocation: staticFixture.location }, staticFixture.location)),
+    /* @__PURE__ */ jsx(SlotLabels, { robotType: FLEX_ROBOT_TYPE, color: darkFill, show4thColumn: stagingAreaFixtures.length > 0 || wasteChuteStagingAreaFixtures.length > 0 }),
+    children
+  ] });
 }
 const OT2_FIXED_TRASH_X_DIMENSION = 172.86;
 const OT2_FIXED_TRASH_Y_DIMENSION = 165.86;
@@ -18682,14 +18740,15 @@ var _StyledStyledText = _styled(StyledText).withConfig({
 const StepMeter = (props) => {
   const {
     totalSteps,
-    currentStep
+    currentStep,
+    ...styleProps2
   } = props;
   const progress = currentStep != null ? currentStep : 0;
   const percentComplete = `${//    this logic puts a cap at 100% percentComplete which we should never run into
   currentStep != null && currentStep > totalSteps ? 100 : progress / totalSteps * 100}%`;
-  const StepMeterContainer = css(["position:", ";height:", ";background-color:", ";@media ", "{height:", ";}"], POSITION_RELATIVE, spacing4, grey30, touchscreenMediaQuerySpecs, spacing12);
+  const StepMeterContainer = css(["position:", ";height:", ";background-color:", ";@media ", "{height:", ";}"], styleProps2.position ? styleProps2.position : POSITION_RELATIVE, spacing4, grey30, touchscreenMediaQuerySpecs, spacing12);
   const StepMeterBar = css(["position:", ";top:0;height:100%;background-color:", ";width:", ";webkit-transition:width 0.5s ease-in-out;moz-transition:width 0.5s ease-in-out;o-transition:width 0.5s ease-in-out;transition:width 0.5s ease-in-out;"], POSITION_ABSOLUTE, blue50, percentComplete);
-  return /* @__PURE__ */ jsx(_StyledBox, { "data-testid": "StepMeter_StepMeterContainer", $_css: StepMeterContainer, children: /* @__PURE__ */ jsx(_StyledBox2, { "data-testid": "StepMeter_StepMeterBar", $_css2: StepMeterBar }) });
+  return /* @__PURE__ */ jsx(_StyledBox, { "data-testid": "StepMeter_StepMeterContainer", ...styleProps2, $_css: StepMeterContainer, children: /* @__PURE__ */ jsx(_StyledBox2, { "data-testid": "StepMeter_StepMeterBar", $_css2: StepMeterBar }) });
 };
 var _StyledBox = _styled(Box).withConfig({
   displayName: "StepMeter___StyledBox",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.6-alpha.2",
+  "version": "0.1.6-alpha.5",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
@@ -24,7 +24,7 @@
     "@types/react-router-dom": "5.3.3"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.6-alpha.2",
+    "@opentrons/shared-data": "0.1.6-alpha.5",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",