@opentrons/components 0.1.6-alpha.3 → 0.1.6-alpha.6

package/Makefile

@@ -5,7 +5,7 @@ port ?= 6060
 
 # These variables can be overriden when make is invoked to customize the
 # behavior of jest
-tests ?=
+tests ?= src
 cov_opts ?= --coverage=true
 test_opts ?=
 

package/lib/index.mjs

@@ -8,7 +8,7 @@ import * as React from "react";
 import { useState, useRef, useEffect, useLayoutEffect, useCallback, useMemo, useReducer, createElement } from "react";
 import interact from "interactjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import _styled, { css, keyframes } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 import isEqual from "lodash/isEqual.js";
 import { useTranslation } from "react-i18next";
 import "lodash/uniq.js";
@@ -11520,25 +11520,17 @@ function getFixtureDisplayName(cutoutFixtureId, usbPortNumber) {
     case STAGING_AREA_SLOT_WITH_WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE:
       return "Waste chute with staging area slot and cover";
     case HEATERSHAKER_MODULE_V1_FIXTURE:
-      return usbPortNumber != null ? `${getModuleDisplayName(
-        HEATERSHAKER_MODULE_V1
-      )} in USB-${usbPortNumber}` : getModuleDisplayName(HEATERSHAKER_MODULE_V1);
+      return getModuleDisplayName(HEATERSHAKER_MODULE_V1);
     case TEMPERATURE_MODULE_V2_FIXTURE:
-      return usbPortNumber != null ? `${getModuleDisplayName(
-        TEMPERATURE_MODULE_V2
-      )} in USB-${usbPortNumber}` : getModuleDisplayName(TEMPERATURE_MODULE_V2);
+      return getModuleDisplayName(TEMPERATURE_MODULE_V2);
     case MAGNETIC_BLOCK_V1_FIXTURE:
       return `${getModuleDisplayName(MAGNETIC_BLOCK_V1)}`;
     case STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE:
       return `${getModuleDisplayName(MAGNETIC_BLOCK_V1)} with staging area slot`;
     case THERMOCYCLER_V2_REAR_FIXTURE:
-      return usbPortNumber != null ? `${getModuleDisplayName(
-        THERMOCYCLER_MODULE_V2
-      )} in USB-${usbPortNumber}` : getModuleDisplayName(THERMOCYCLER_MODULE_V2);
+      return getModuleDisplayName(THERMOCYCLER_MODULE_V2);
     case THERMOCYCLER_V2_FRONT_FIXTURE:
-      return usbPortNumber != null ? `${getModuleDisplayName(
-        THERMOCYCLER_MODULE_V2
-      )} in USB-${usbPortNumber}` : getModuleDisplayName(THERMOCYCLER_MODULE_V2);
+      return getModuleDisplayName(THERMOCYCLER_MODULE_V2);
     default:
       return "Slot";
   }
@@ -12587,7 +12579,7 @@ const styleProps = (props) => ({
   ...transitionStyles(props)
 });
 const isntStyleProp = (prop) => !STYLE_PROPS.includes(prop);
-const Box = _styled.div.withConfig({
+const Box = styled.div.withConfig({
   shouldForwardProp: isntStyleProp
 }).withConfig({
   displayName: "Box",
@@ -13257,7 +13249,7 @@ const BUTTON_TYPE_RESET = "reset";
 const BUTTON_TYPE_BUTTON = "button";
 const BUTTON_BASE_STYLE = css(["appearance:none;padding:0;border-width:0;border-style:solid;background-color:transparent;cursor:pointer;&:disabled,&.disabled{cursor:default;}@media ", "{cursor:default;}"], touchscreenMediaQuerySpecs);
 const BUTTON_VARIANT_STYLE = css(["border-color:inherit;border-radius:", ";display:", ";font-size:", ";font-weight:", ";line-height:1.4;padding-left:", ";padding-right:", ";padding-top:", ";padding-bottom:", ";text-align:", ";text-transform:", ";"], BORDER_RADIUS_DEFAULT, DISPLAY_INLINE_BLOCK, FONT_SIZE_BODY_2, FONT_WEIGHT_SEMIBOLD, SPACING_4, SPACING_4, SPACING_2, SPACING_2, TEXT_ALIGN_CENTER, TEXT_TRANSFORM_UPPERCASE);
-const Btn = _styled.button.withConfig({
+const Btn = styled.button.withConfig({
   shouldForwardProp: isntStyleProp
 }).attrs((props) => ({
   type: props.type ?? BUTTON_TYPE_BUTTON
@@ -13265,46 +13257,46 @@ const Btn = _styled.button.withConfig({
   displayName: "Btn",
   componentId: "sc-o3dtr1-0"
 })(["", " ", ""], BUTTON_BASE_STYLE, styleProps);
-const PrimaryBtn = _styled(Btn).withConfig({
+const PrimaryBtn = styled(Btn).withConfig({
   displayName: "Btn__PrimaryBtn",
   componentId: "sc-o3dtr1-1"
 })(["", " background-color:", ";color:", ";box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.2);&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled,&.disabled{background-color:", ";color:", ";box-shadow:none;}", ""], BUTTON_VARIANT_STYLE, C_DARK_GRAY, C_WHITE, C_BLACK, C_MED_DARK_GRAY, C_LIGHT_GRAY, C_MED_GRAY, styleProps);
-const SecondaryBtn = _styled(Btn).withConfig({
+const SecondaryBtn = styled(Btn).withConfig({
   displayName: "Btn__SecondaryBtn",
   componentId: "sc-o3dtr1-2"
 })(["", " background-color:", ";border-width:", ";color:", ";&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled,&.disabled{background-color:", ";color:", ";}", ""], BUTTON_VARIANT_STYLE, C_WHITE, BORDER_WIDTH_DEFAULT, C_DARK_GRAY, C_LIGHT_GRAY, C_MED_LIGHT_GRAY, C_WHITE, C_MED_GRAY, styleProps);
-const NewPrimaryBtn = _styled(PrimaryBtn).withConfig({
+const NewPrimaryBtn = styled(PrimaryBtn).withConfig({
   displayName: "Btn__NewPrimaryBtn",
   componentId: "sc-o3dtr1-3"
 })(["background-color:", ";color:", ";&:hover,&:focus{background-color:", ";box-shadow:0px 3px 6px 0px rgba(0,0,0,0.23);}&:active{background-color:#004aaa;box-shadow:none;}&:disabled,&.disabled{background-color:", ";color:", ";box-shadow:none;}", ""], C_BLUE, C_WHITE, C_BLUE, C_FONT_DISABLED, C_WHITE, styleProps);
-const NewSecondaryBtn = _styled(SecondaryBtn).withConfig({
+const NewSecondaryBtn = styled(SecondaryBtn).withConfig({
   displayName: "Btn__NewSecondaryBtn",
   componentId: "sc-o3dtr1-4"
 })(["background-color:", ";color:", ";&:hover,&:focus{border-width:'2px';background-color:", ";color:", ";box-shadow:0px 3px 6px 0px rgba(0,0,0,0.23);}&:active{border-width:'2px';background-color:", ";color:", ";color:#004aaa;box-shadow:none;}&:disabled,&.disabled{border-width:'2px';background-color:", ";color:", ";box-shadow:none;}", ""], C_WHITE, C_BLUE, C_WHITE, C_BLUE, C_WHITE, C_BLUE, C_WHITE, C_FONT_DISABLED, styleProps);
-const NewAlertPrimaryBtn = _styled(NewPrimaryBtn).withConfig({
+const NewAlertPrimaryBtn = styled(NewPrimaryBtn).withConfig({
   displayName: "Btn__NewAlertPrimaryBtn",
   componentId: "sc-o3dtr1-5"
 })(["background-color:", ";&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", ""], C_ERROR_DARK, C_ERROR_DARK, C_ERROR_LIGHT, styleProps);
-const NewAlertSecondaryBtn = _styled(NewSecondaryBtn).withConfig({
+const NewAlertSecondaryBtn = styled(NewSecondaryBtn).withConfig({
   displayName: "Btn__NewAlertSecondaryBtn",
   componentId: "sc-o3dtr1-6"
 })(["color:", ";&:hover,&:focus{color:", ";}&:active{color:", ";}", ""], C_ERROR_DARK, C_ERROR_DARK, C_ERROR_LIGHT, styleProps);
-const LightSecondaryBtn = _styled(SecondaryBtn).withConfig({
+const LightSecondaryBtn = styled(SecondaryBtn).withConfig({
   displayName: "Btn__LightSecondaryBtn",
   componentId: "sc-o3dtr1-7"
 })(["background-color:", ";color:", ";&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled,&.disabled{background-color:", ";color:", ";}", ""], C_TRANSPARENT, C_WHITE, OVERLAY_WHITE_10, OVERLAY_WHITE_20, C_TRANSPARENT, C_MED_GRAY, styleProps);
-const TertiaryBtn = _styled(LightSecondaryBtn).withConfig({
+const TertiaryBtn = styled(LightSecondaryBtn).withConfig({
   displayName: "Btn__TertiaryBtn",
   componentId: "sc-o3dtr1-8"
 })(["border-width:0;"]);
-const Flex = _styled.div.withConfig({
+const Flex = styled.div.withConfig({
   shouldForwardProp: isntStyleProp
 }).withConfig({
   displayName: "Flex",
   componentId: "sc-1qhp8l7-0"
 })(["display:flex;", ""], styleProps);
 const SVG_PROPS$1 = ["x", "y", "svgWidth", "svgHeight", "_cssWidth", "_cssHeight"];
-const ForeignObject = _styled.foreignObject.withConfig({
+const ForeignObject = styled.foreignObject.withConfig({
   shouldForwardProp: (p) => {
     return (
       // do not forward style-props or Svg-props to the underlying <svg>
@@ -13334,7 +13326,7 @@ const ForeignObject = _styled.foreignObject.withConfig({
     height: otherProps._cssHeight
   });
 });
-const Link = _styled.a.withConfig({
+const Link = styled.a.withConfig({
   shouldForwardProp: (p) => isntStyleProp(p) && p !== "external"
 }).attrs((props) => {
   return props.external === true ? {
@@ -13350,7 +13342,7 @@ const Link = _styled.a.withConfig({
 const SVG_VERSION = "1.1";
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 const SVG_PROPS = ["svgWidth", "svgHeight", "_cssWidth", "_cssHeight"];
-const Svg = _styled.svg.withConfig({
+const Svg = styled.svg.withConfig({
   shouldForwardProp: (p) => {
     return (
       // do not forward style-props or Svg-props to the underlying <svg>
@@ -13382,7 +13374,7 @@ const Svg = _styled.svg.withConfig({
     height: otherProps._cssHeight
   });
 });
-const Text = _styled.p.withConfig({
+const Text = styled.p.withConfig({
   shouldForwardProp: isntStyleProp
 }).withConfig({
   displayName: "Text",
@@ -13425,7 +13417,7 @@ function RobotCoordinateSpace(props) {
   };
   return animated2 ? /* @__PURE__ */ jsx(AnimatedSvg, { ...allPassThroughProps, children }) : /* @__PURE__ */ jsx(Svg, { ...allPassThroughProps, children });
 }
-const AnimatedSvg = _styled(animated.svg).withConfig({
+const AnimatedSvg = styled(animated.svg).withConfig({
   displayName: "RobotCoordinateSpace__AnimatedSvg",
   componentId: "sc-xlzjc5-0"
 })([""]);
@@ -14157,7 +14149,7 @@ function Icon(props) {
     props.children
   ] });
 }
-var _StyledSvg = _styled(Svg).withConfig({
+var _StyledSvg = styled(Svg).withConfig({
   displayName: "Icon___StyledSvg",
   componentId: "sc-1gt4gyz-0"
 })(["", ""], spinStyle);
@@ -14208,7 +14200,7 @@ const RobotCoordsForeignObject = (props) => {
     width
   }, children: /* @__PURE__ */ jsx(_StyledFlex$2, { height: "100%", width: "100%", ...foreignObjectProps, children: /* @__PURE__ */ jsx(Flex, { ...flexProps, children }) }) });
 };
-var _StyledFlex$2 = _styled(Flex).withConfig({
+var _StyledFlex$2 = styled(Flex).withConfig({
   displayName: "RobotCoordsForeignObject___StyledFlex",
   componentId: "sc-1wzsjcc-0"
 })(["transform:scale(1,-1);"]);
@@ -14266,13 +14258,10 @@ const FlexTrash = ({
     rotateDegrees === "0" ? /* @__PURE__ */ jsx(_StyledText2, { color: white, $_css2: bodyTextSemiBold, children: "Trash bin" }) : null
   ] }) }) }) : null;
 };
-var _StyledText$c = _styled(Text).withConfig({
-  displayName: "FlexTrash___StyledText",
-  componentId: "sc-b6k3wl-0"
-})(["", ""], (p) => p.$_css);
-var _StyledText2 = _styled(Text).withConfig({
+var _StyledText$c = styled(Text)`${(p) => p.$_css}`;
+var _StyledText2 = styled(Text).withConfig({
   displayName: "FlexTrash___StyledText2",
-  componentId: "sc-b6k3wl-1"
+  componentId: "sc-b6k3wl-0"
 })(["", ""], (p) => p.$_css2);
 const IDENTITY_AFFINE_TRANSFORM = [
   [1, 0, 0, 0],
@@ -14431,7 +14420,7 @@ function MoveLabwareOnDeck(props) {
     ] }) })
   ] });
 }
-const AnimatedG = _styled(animated.g).withConfig({
+const AnimatedG = styled(animated.g).withConfig({
   displayName: "MoveLabwareOnDeck__AnimatedG",
   componentId: "sc-1axftuu-0"
 })([""]);
@@ -14541,13 +14530,10 @@ function LocationIcon({
 }) {
   return /* @__PURE__ */ jsx(_StyledFlex$1, { "data-testid": slotName != null ? `LocationIcon_${slotName}` : `LocationIcon_${String(iconName)}`, ...styleProps2, children: iconName != null ? /* @__PURE__ */ jsx(Icon, { name: iconName, size: "1.25rem", color: color ?? black90, "aria-label": iconName }) : /* @__PURE__ */ jsx(_StyledText$b, { children: slotName }) });
 }
-var _StyledFlex$1 = _styled(Flex).withConfig({
-  displayName: "LocationIcon___StyledFlex",
-  componentId: "sc-71okg-0"
-})(["", ""], LOCATION_ICON_STYLE);
-var _StyledText$b = _styled(Text).withConfig({
+var _StyledFlex$1 = styled(Flex)`${LOCATION_ICON_STYLE}`;
+var _StyledText$b = styled(Text).withConfig({
   displayName: "LocationIcon___StyledText",
-  componentId: "sc-71okg-1"
+  componentId: "sc-71okg-0"
 })(["", ""], SLOT_NAME_TEXT_STYLE);
 const defaultTabStyle = css(["", " color:", ";background-color:", ";border:0px ", " ", ";border-radius:", ";padding:", " ", ";position:", ";&:hover{background-color:", ";}&:focus-visible{outline:2px ", " ", ";}"], pSemiBold, black90, purple30, styleSolid, purple30, borderRadius8, spacing8, spacing16, POSITION_RELATIVE, purple35, styleSolid, yellow50);
 const currentTabStyle = css(["", " color:", ";background-color:", ";&:hover{background-color:", ";}"], defaultTabStyle, white, purple50, purple55);
@@ -14565,7 +14551,7 @@ function RoundTab({
     tabStyle = currentTabStyle;
   return /* @__PURE__ */ jsx(_StyledBtn$9, { ...restProps, $_css: tabStyle, children });
 }
-var _StyledBtn$9 = _styled(Btn).withConfig({
+var _StyledBtn$9 = styled(Btn).withConfig({
   displayName: "RoundTab___StyledBtn",
   componentId: "sc-yqd6yj-0"
 })(["", ""], (p) => p.$_css);
@@ -14589,7 +14575,7 @@ const styleMap = {
   pBold: bodyTextBold,
   labelBold: smallBodyTextBold
 };
-const StyledText = _styled(Text).withConfig({
+const StyledText = styled(Text).withConfig({
   displayName: "StyledText",
   componentId: "sc-9x05o6-0"
 })(["", ""], (props) => {
@@ -14758,13 +14744,10 @@ function Arrow(props) {
   const arrowCss = ARROW_CSS_BY_PLACEMENT_BASE[placementBase];
   return /* @__PURE__ */ jsx(_StyledDiv, { ref: props.arrowRef, style: props.arrowStyle, $_css2: arrowCss });
 }
-var _StyledBox$2 = _styled(Box).withConfig({
-  displayName: "Tooltip___StyledBox",
-  componentId: "sc-b3ng4r-0"
-})(["", ""], (p) => p.$_css);
-var _StyledDiv = _styled("div").withConfig({
+var _StyledBox$2 = styled(Box)`${(p) => p.$_css}`;
+var _StyledDiv = styled("div").withConfig({
   displayName: "Tooltip___StyledDiv",
-  componentId: "sc-b3ng4r-1"
+  componentId: "sc-b3ng4r-0"
 })(["", ""], (p) => p.$_css2);
 const DISABLED_APPLY_STYLES_MODIFIER = {
   name: "applyStyles",
@@ -15071,27 +15054,27 @@ const ParameterName = (props) => {
     ] }) : null
   ] });
 };
-const StyledTable = _styled.table.withConfig({
+const StyledTable = styled.table.withConfig({
   displayName: "ParametersTable__StyledTable",
   componentId: "sc-16k3q66-0"
 })(["width:100%;border-collapse:collapse;text-align:left;"]);
-const StyledTableHeader = _styled.th.withConfig({
+const StyledTableHeader = styled.th.withConfig({
   displayName: "ParametersTable__StyledTableHeader",
   componentId: "sc-16k3q66-1"
 })(["", " grid-gap:", ";padding-bottom:", ";border-bottom:", ";"], labelSemiBold, spacing16, spacing8, lineBorder);
-const StyledTableRow = _styled.tr.withConfig({
+const StyledTableRow = styled.tr.withConfig({
   displayName: "ParametersTable__StyledTableRow",
   componentId: "sc-16k3q66-2"
 })(["grid-gap:", ";border-bottom:", ";"], spacing16, (props) => props.isLast ? "none" : lineBorder);
-const StyledTableCell = _styled.td.withConfig({
+const StyledTableCell = styled.td.withConfig({
   displayName: "ParametersTable__StyledTableCell",
   componentId: "sc-16k3q66-3"
 })(["width:33%;display:", ";padding-top:", ";padding-bottom:", ";padding-right:", ";"], (props) => props.display != null ? props.display : "table-cell", spacing12, (props) => props.isLast ? 0 : spacing12, (props) => props.paddingRight != null ? props.paddingRight : spacing16);
-var _StyledStyledText$1 = _styled(StyledText).withConfig({
+var _StyledStyledText$1 = styled(StyledText).withConfig({
   displayName: "ParametersTable___StyledStyledText",
   componentId: "sc-16k3q66-4"
 })(["display:", ";padding-right:", ";"], DISPLAY_INLINE, (p) => p.$_css);
-var _StyledTooltip = _styled(Tooltip).withConfig({
+var _StyledTooltip = styled(Tooltip).withConfig({
   displayName: "ParametersTable___StyledTooltip",
   componentId: "sc-16k3q66-5"
 })(["", ""], (p) => p.$_css2);
@@ -15915,7 +15898,7 @@ const TipDecoration = React.memo(function TipDecoration2(props) {
   }
   return null;
 });
-const LabwareDetailGroup = _styled.g.withConfig({
+const LabwareDetailGroup = styled.g.withConfig({
   displayName: "StaticLabware__LabwareDetailGroup",
   componentId: "sc-18xrwft-0"
 })(["fill:none;stroke:", ";stroke-width:1;"], black90);
@@ -16311,7 +16294,7 @@ function WasteChute(props) {
     /* @__PURE__ */ jsx(_StyledText$a, { color: white, textAlign: TEXT_ALIGN_CENTER, $_css: bodyTextSemiBold, children: "Waste chute" })
   ] }) });
 }
-var _StyledText$a = _styled(Text).withConfig({
+var _StyledText$a = styled(Text).withConfig({
   displayName: "WasteChuteFixture___StyledText",
   componentId: "sc-zw2793-0"
 })(["", ""], (p) => p.$_css);
@@ -16789,7 +16772,7 @@ function LabwareInfo(props) {
     justifyContent: JUSTIFY_FLEX_END
   }, children: /* @__PURE__ */ jsx(Box, { backgroundColor: "#000000B3", borderRadius: "0 0 0.4rem 0.4rem", fontSize: fontSizeCaption, padding: spacing4, color: white, children: /* @__PURE__ */ jsx(Flex, { flexDirection: DIRECTION_ROW, justifyContent: JUSTIFY_SPACE_BETWEEN, alignItems: ALIGN_FLEX_START, gridGap: spacing4, children: /* @__PURE__ */ jsx(_StyledText$9, { as: "h6", lineHeight: fontSizeCaption, children: props.children }) }) }) });
 }
-var _StyledText$9 = _styled(Text).withConfig({
+var _StyledText$9 = styled(Text).withConfig({
   displayName: "LabwareInfo___StyledText",
   componentId: "sc-gwiewj-0"
 })(["", ""], labwareDisplayNameStyle);
@@ -16994,7 +16977,7 @@ function EmptyConfigFixture(props) {
   }, children: /* @__PURE__ */ jsx(_StyledBtn$8, { onClick: () => handleClickAdd(fixtureLocation), children: /* @__PURE__ */ jsx(Icon, { name: "add", color: blue50, size: "2rem" }) }) });
 }
 const EMPTY_CONFIG_STYLE = css(["display:", ";align-items:", ";justify-content:", ";background-color:", ";border:3px dashed ", ";border-radius:", ";width:100%;@media ", "{background-color:", ";}&:active{border:3px solid ", ";background-color:", ";}&:focus{border:3px solid ", ";background-color:", ";}&:hover{background-color:", ";}&:focus-visible{border:3px solid ", ";background-color:", ";@media ", "{background-color:", ";}}"], DISPLAY_FLEX, ALIGN_CENTER, JUSTIFY_CENTER, blue30, blue50, borderRadius4, touchscreenMediaQuerySpecs, blue35, blue50, blue40, blue50, blue40, blue35, blue50, blue35, touchscreenMediaQuerySpecs, blue40);
-var _StyledBtn$8 = _styled(Btn).withConfig({
+var _StyledBtn$8 = styled(Btn).withConfig({
   displayName: "EmptyConfigFixture___StyledBtn",
   componentId: "sc-1ym7jpi-0"
 })(["", ""], EMPTY_CONFIG_STYLE);
@@ -17021,13 +17004,10 @@ function StagingAreaConfigFixture(props) {
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
 }
-var _StyledBtn$7 = _styled(Btn).withConfig({
-  displayName: "StagingAreaConfigFixture___StyledBtn",
-  componentId: "sc-1jplm20-0"
-})(["", ""], (p) => p.$_css);
-var _StyledText$8 = _styled(Text).withConfig({
+var _StyledBtn$7 = styled(Btn)`${(p) => p.$_css}`;
+var _StyledText$8 = styled(Text).withConfig({
   displayName: "StagingAreaConfigFixture___StyledText",
-  componentId: "sc-1jplm20-1"
+  componentId: "sc-1jplm20-0"
 })(["", ""], (p) => p.$_css2);
 function TrashBinConfigFixture(props) {
   const {
@@ -17054,13 +17034,10 @@ function TrashBinConfigFixture(props) {
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
 }
-var _StyledBtn$6 = _styled(Btn).withConfig({
-  displayName: "TrashBinConfigFixture___StyledBtn",
-  componentId: "sc-1h29irg-0"
-})(["", ""], (p) => p.$_css);
-var _StyledText$7 = _styled(Text).withConfig({
+var _StyledBtn$6 = styled(Btn)`${(p) => p.$_css}`;
+var _StyledText$7 = styled(Text).withConfig({
   displayName: "TrashBinConfigFixture___StyledText",
-  componentId: "sc-1h29irg-1"
+  componentId: "sc-1h29irg-0"
 })(["", ""], (p) => p.$_css2);
 function WasteChuteConfigFixture(props) {
   const {
@@ -17086,13 +17063,10 @@ function WasteChuteConfigFixture(props) {
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
 }
-var _StyledBtn$5 = _styled(Btn).withConfig({
-  displayName: "WasteChuteConfigFixture___StyledBtn",
-  componentId: "sc-1dt8wwl-0"
-})(["", ""], (p) => p.$_css);
-var _StyledText$6 = _styled(Text).withConfig({
+var _StyledBtn$5 = styled(Btn)`${(p) => p.$_css}`;
+var _StyledText$6 = styled(Text).withConfig({
   displayName: "WasteChuteConfigFixture___StyledText",
-  componentId: "sc-1dt8wwl-1"
+  componentId: "sc-1dt8wwl-0"
 })(["", ""], (p) => p.$_css2);
 function StaticFixture(props) {
   const {
@@ -17111,13 +17085,10 @@ function StaticFixture(props) {
   }, children: /* @__PURE__ */ jsx(_StyledBtn$4, { cursor: "default", onClick: () => {
   }, children: /* @__PURE__ */ jsx(_StyledText$5, { $_css: smallBodyTextSemiBold, children: label }) }) });
 }
-var _StyledBtn$4 = _styled(Btn).withConfig({
-  displayName: "StaticFixture___StyledBtn",
-  componentId: "sc-1pijcys-0"
-})(["", ""], CONFIG_STYLE_READ_ONLY);
-var _StyledText$5 = _styled(Text).withConfig({
+var _StyledBtn$4 = styled(Btn)`${CONFIG_STYLE_READ_ONLY}`;
+var _StyledText$5 = styled(Text).withConfig({
   displayName: "StaticFixture___StyledText",
-  componentId: "sc-1pijcys-1"
+  componentId: "sc-1pijcys-0"
 })(["", ""], (p) => p.$_css);
 const TEMPERATURE_MODULE_FIXTURE_DISPLAY_NAME = "Temperature";
 function TemperatureModuleFixture(props) {
@@ -17145,13 +17116,10 @@ function TemperatureModuleFixture(props) {
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
 }
-var _StyledBtn$3 = _styled(Btn).withConfig({
-  displayName: "TemperatureModuleFixture___StyledBtn",
-  componentId: "sc-j8juq6-0"
-})(["", ""], (p) => p.$_css);
-var _StyledText$4 = _styled(Text).withConfig({
+var _StyledBtn$3 = styled(Btn)`${(p) => p.$_css}`;
+var _StyledText$4 = styled(Text).withConfig({
   displayName: "TemperatureModuleFixture___StyledText",
-  componentId: "sc-j8juq6-1"
+  componentId: "sc-j8juq6-0"
 })(["", ""], (p) => p.$_css2);
 const HEATER_SHAKER_MODULE_FIXTURE_DISPLAY_NAME = "Heater-Shaker";
 function HeaterShakerFixture(props) {
@@ -17179,13 +17147,10 @@ function HeaterShakerFixture(props) {
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
 }
-var _StyledBtn$2 = _styled(Btn).withConfig({
-  displayName: "HeaterShakerFixture___StyledBtn",
-  componentId: "sc-uiy636-0"
-})(["", ""], (p) => p.$_css);
-var _StyledText$3 = _styled(Text).withConfig({
+var _StyledBtn$2 = styled(Btn)`${(p) => p.$_css}`;
+var _StyledText$3 = styled(Text).withConfig({
   displayName: "HeaterShakerFixture___StyledText",
-  componentId: "sc-uiy636-1"
+  componentId: "sc-uiy636-0"
 })(["", ""], (p) => p.$_css2);
 const MAGNETIC_BLOCK_FIXTURE_DISPLAY_NAME = "Mag Block";
 const STAGING_AREA_WITH_MAGNETIC_BLOCK_DISPLAY_NAME = "Mag + staging";
@@ -17242,13 +17207,10 @@ function MagneticBlockFixture(props) {
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
 }
-var _StyledBtn$1 = _styled(Btn).withConfig({
-  displayName: "MagneticBlockFixture___StyledBtn",
-  componentId: "sc-ct8c9g-0"
-})(["", ""], (p) => p.$_css);
-var _StyledText$2 = _styled(Text).withConfig({
+var _StyledBtn$1 = styled(Btn)`${(p) => p.$_css}`;
+var _StyledText$2 = styled(Text).withConfig({
   displayName: "MagneticBlockFixture___StyledText",
-  componentId: "sc-ct8c9g-1"
+  componentId: "sc-ct8c9g-0"
 })(["", ""], (p) => p.$_css2);
 const THERMOCYCLER_FIXTURE_DISPLAY_NAME = "Thermocycler";
 function ThermocyclerFixture(props) {
@@ -17274,13 +17236,10 @@ function ThermocyclerFixture(props) {
     handleClickRemove != null ? /* @__PURE__ */ jsx(Icon, { name: "remove", color: white, size: "2rem" }) : null
   ] }) });
 }
-var _StyledBtn = _styled(Btn).withConfig({
-  displayName: "ThermocyclerFixture___StyledBtn",
-  componentId: "sc-ada076-0"
-})(["", ""], (p) => p.$_css);
-var _StyledText$1 = _styled(Text).withConfig({
+var _StyledBtn = styled(Btn)`${(p) => p.$_css}`;
+var _StyledText$1 = styled(Text).withConfig({
   displayName: "ThermocyclerFixture___StyledText",
-  componentId: "sc-ada076-1"
+  componentId: "sc-ada076-0"
 })(["", ""], (p) => p.$_css2);
 function DeckConfigurator(props) {
   const {
@@ -17584,7 +17543,7 @@ const INNER_DIV_PROPS = {
   height: "100%",
   gridGap: spacing4
 };
-var _StyledText = _styled(Text).withConfig({
+var _StyledText = styled(Text).withConfig({
   displayName: "useSelectDeckLocation___StyledText",
   componentId: "sc-d8yjkg-0"
 })(["", ""], (p) => p.$_css);
@@ -18373,116 +18332,121 @@ function ModuleItemContents(props) {
     ] })
   ] }) });
 }
+const FOOTPRINT_IMAGE_RELATIVE_PATH = "./images/dimensions/footprint@3x.png";
+const DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH = "./images/dimensions/height-plate-and-reservoir@3x.png";
+const DIMENSIONS_HEIGHT_TIP_RACK_IMAGE_RELATIVE_PATH = "./images/dimensions/height-tip-rack@3x.png";
+const DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_RELATIVE_PATH = "./images/dimensions/height-tube-rack@3x.png";
+const DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_IRREGULAR_RELATIVE_PATH = "./images/dimensions/height-tube-rack-irregular@3x.png";
+const HEIGHT_ALUM_BLOCK_TUBES_IMAGE_RELATIVE_PATH = "./images/dimensions/height-alum-block-tubes@3x.png";
+const HEIGHT_ALUM_BLOCK_PLATE_IMAGE_RELATIVE_PATH = "./images/dimensions/height-alum-block-plate@3x.png";
+const OFFSET_RESEVOIR_IMAGE_RELATIVE_PATH = "./images/offset/offset-reservoir@3x.png";
+const SPACING_RESEVOIR_IMAGE_RELATIVE_PATH = "./images/spacing/spacing-reservoir@3x.png";
+const SPACING_RESEVOIR_MULTI_ROW_IMAGE_RELATIVE_PATH = "./images/spacing/spacing-reservoir-multi-row@3x.png";
+const OFFSET_WELL_CIRCULAR_IMAGE_RELATIVE_PATH = "./images/offset/offset-well-circular@3x.png";
+const SPACING_WELL_CIRCULAR_IMAGE_RELATIVE_PATH = "./images/spacing/spacing-well-circular@3x.png";
+const OFFSET_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH = "./images/offset/offset-well-rectangular@3x.png";
+const SPACING_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH = "./images/spacing/spacing-well-rectangular@3x.png";
+const DEPTH_LENGTH_TIP_RACK_IMAGE_RELATIVE_PATH = "./images/depth/length-tip-rack@3x.png";
+const SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH = "./images/shape/shape-circular@3x.png";
+const DEPTH_PLATE_FLAT_IMAGE_RELATIVE_PATH = "./images/depth/depth-plate-flat@3x.png";
+const SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH = "./images/shape/shape-rectangular@3x.png";
+const DEPTH_PLATE_ROUND_IMAGE_RELATIVE_PATH = "./images/depth/depth-plate-round@3x.png";
+const DEPTH_PLATE_V_SHAPE_IMAGE_RELATIVE_PATH = "./images/depth/depth-plate-v@3x.png";
+const DEPTH_RESEVOIR_AND_TUBES_FLAT_IMAGE_RELATIVE_PATH = "./images/depth/depth-reservoir-and-tubes-flat@3x.png";
+const DEPTH_RESEVOIR_AND_TUBES_ROUND_IMAGE_RELATIVE_PATH = "./images/depth/depth-reservoir-and-tubes-round@3x.png";
+const DEPTH_RESEVOIR_AND_TUBES_V_SHAPE_IMAGE_RELATIVE_PATH = "./images/depth/depth-reservoir-and-tubes-v@3x.png";
 const FOOTPRINT_DIAGRAMS = {
   wellPlate: [
-    new URL("./images/dimensions/footprint@3x.png", import.meta.url).href,
-    new URL(
-      "./images/dimensions/height-plate-and-reservoir@3x.png",
-      import.meta.url
-    ).href
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href
   ],
   tipRack: [
-    new URL("./images/dimensions/footprint@3x.png", import.meta.url).href,
-    new URL("./images/dimensions/height-tip-rack@3x.png", import.meta.url).href
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_TIP_RACK_IMAGE_RELATIVE_PATH, import.meta.url).href
   ],
   tubeRack: [
-    new URL("./images/dimensions/footprint@3x.png", import.meta.url).href,
-    new URL("./images/dimensions/height-tube-rack@3x.png", import.meta.url).href
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_RELATIVE_PATH, import.meta.url).href
   ],
   reservoir: [
-    new URL("./images/dimensions/footprint@3x.png", import.meta.url).href,
-    new URL(
-      "./images/dimensions/height-plate-and-reservoir@3x.png",
-      import.meta.url
-    ).href
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href
   ],
   irregular: [
-    new URL("./images/dimensions/footprint@3x.png", import.meta.url).href,
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
     new URL(
-      "./images/dimensions/height-tube-rack-irregular@3x.png",
+      DIMENSIONS_HEIGHT_TUBE_RACK_IMAGE_IRREGULAR_RELATIVE_PATH,
       import.meta.url
     ).href
   ],
   adapter: [
-    new URL("./images/dimensions/footprint@3x.png", import.meta.url).href,
-    new URL(
-      "./images/dimensions/height-plate-and-reservoir@3x.png",
-      import.meta.url
-    ).href
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(DIMENSIONS_HEIGHT_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href
   ]
 };
 const ALUM_BLOCK_FOOTPRINTS = {
   tubeRack: [
-    new URL("./images/dimensions/footprint@3x.png", import.meta.url).href,
-    new URL(
-      "./images/dimensions/height-alum-block-tubes@3x.png",
-      import.meta.url
-    ).href
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(HEIGHT_ALUM_BLOCK_TUBES_IMAGE_RELATIVE_PATH, import.meta.url).href
   ],
   wellPlate: [
-    new URL("./images/dimensions/footprint@3x.png", import.meta.url).href,
-    new URL(
-      "./images/dimensions/height-alum-block-plate@3x.png",
-      import.meta.url
-    ).href
+    new URL(FOOTPRINT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(HEIGHT_ALUM_BLOCK_PLATE_IMAGE_RELATIVE_PATH, import.meta.url).href
   ]
 };
 const RESERVOIR_SPACING_DIAGRAMS = {
   singleRow: [
-    new URL("./images/offset/offset-reservoir@3x.png", import.meta.url).href,
-    new URL("./images/spacing/spacing-reservoir@3x.png", import.meta.url).href
+    new URL(OFFSET_RESEVOIR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_RESEVOIR_IMAGE_RELATIVE_PATH, import.meta.url).href
   ],
   multiRow: [
-    new URL("./images/offset/offset-reservoir@3x.png", import.meta.url).href,
-    new URL(
-      "./images/spacing/spacing-reservoir-multi-row@3x.png",
-      import.meta.url
-    ).href
+    new URL(OFFSET_RESEVOIR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_RESEVOIR_MULTI_ROW_IMAGE_RELATIVE_PATH, import.meta.url).href
   ]
 };
 const SPACING_DIAGRAMS = {
   circular: [
-    new URL("./images/offset/offset-well-circular@3x.png", import.meta.url).href,
-    new URL("./images/spacing/spacing-well-circular@3x.png", import.meta.url).href
+    new URL(OFFSET_WELL_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_WELL_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
   ],
   rectangular: [
-    new URL("./images/offset/offset-well-rectangular@3x.png", import.meta.url).href,
-    new URL("./images/spacing/spacing-well-rectangular@3x.png", import.meta.url).href
+    new URL(OFFSET_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href,
+    new URL(SPACING_WELL_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
   ]
 };
 const TIPRACK_MEASUREMENT_DIAGRAMS = [
-  new URL("./images/depth/length-tip-rack@3x.png", import.meta.url).href,
-  new URL("./images/shape/shape-circular@3x.png", import.meta.url).href
+  new URL(DEPTH_LENGTH_TIP_RACK_IMAGE_RELATIVE_PATH, import.meta.url).href,
+  new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
 ];
 const PLATE_MEASUREMENT_DIAGRAMS = {
   flat: {
     circular: [
-      new URL("./images/depth/depth-plate-flat@3x.png", import.meta.url).href,
-      new URL("./images/shape/shape-circular@3x.png", import.meta.url).href
+      new URL(DEPTH_PLATE_FLAT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
     ],
     rectangular: [
-      new URL("./images/depth/depth-plate-flat@3x.png", import.meta.url).href,
-      new URL("./images/shape/shape-rectangular@3x.png", import.meta.url).href
+      new URL(DEPTH_PLATE_FLAT_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
     ]
   },
   u: {
     circular: [
-      new URL("./images/depth/depth-plate-round@3x.png", import.meta.url).href,
-      new URL("./images/shape/shape-circular@3x.png", import.meta.url).href
+      new URL(DEPTH_PLATE_ROUND_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
     ],
     rectangular: [
-      new URL("./images/depth/depth-plate-round@3x.png", import.meta.url).href,
-      new URL("./images/shape/shape-rectangular@3x.png", import.meta.url).href
+      new URL(DEPTH_PLATE_ROUND_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
     ]
   },
   v: {
     circular: [
-      new URL("./images/depth/depth-plate-v@3x.png", import.meta.url).href,
-      new URL("./images/shape/shape-circular@3x.png", import.meta.url).href
+      new URL(DEPTH_PLATE_V_SHAPE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
     ],
     rectangular: [
-      new URL("./images/depth/depth-plate-v@3x.png", import.meta.url).href,
-      new URL("./images/shape/shape-rectangular@3x.png", import.meta.url).href
+      new URL(DEPTH_PLATE_V_SHAPE_IMAGE_RELATIVE_PATH, import.meta.url).href,
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
     ]
   }
 };
@@ -18490,49 +18454,49 @@ const MEASUREMENT_DIAGRAMS = {
   flat: {
     circular: [
       new URL(
-        "./images/depth/depth-reservoir-and-tubes-flat@3x.png",
+        DEPTH_RESEVOIR_AND_TUBES_FLAT_IMAGE_RELATIVE_PATH,
         import.meta.url
       ).href,
-      new URL("./images/shape/shape-circular@3x.png", import.meta.url).href
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
     ],
     rectangular: [
       new URL(
-        "./images/depth/depth-reservoir-and-tubes-flat@3x.png",
+        DEPTH_RESEVOIR_AND_TUBES_FLAT_IMAGE_RELATIVE_PATH,
         import.meta.url
       ).href,
-      new URL("./images/shape/shape-rectangular@3x.png", import.meta.url).href
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
     ]
   },
   u: {
     circular: [
       new URL(
-        "./images/depth/depth-reservoir-and-tubes-round@3x.png",
+        DEPTH_RESEVOIR_AND_TUBES_ROUND_IMAGE_RELATIVE_PATH,
         import.meta.url
       ).href,
-      new URL("./images/shape/shape-circular@3x.png", import.meta.url).href
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
     ],
     rectangular: [
       new URL(
-        "./images/depth/depth-reservoir-and-tubes-round@3x.png",
+        DEPTH_RESEVOIR_AND_TUBES_ROUND_IMAGE_RELATIVE_PATH,
         import.meta.url
       ).href,
-      new URL("./images/shape/shape-rectangular@3x.png", import.meta.url).href
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
     ]
   },
   v: {
     circular: [
       new URL(
-        "./images/depth/depth-reservoir-and-tubes-v@3x.png",
+        DEPTH_RESEVOIR_AND_TUBES_V_SHAPE_IMAGE_RELATIVE_PATH,
         import.meta.url
       ).href,
-      new URL("./images/shape/shape-circular@3x.png", import.meta.url).href
+      new URL(SHAPE_CIRCULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
     ],
     rectangular: [
       new URL(
-        "./images/depth/depth-reservoir-and-tubes-v@3x.png",
+        DEPTH_RESEVOIR_AND_TUBES_V_SHAPE_IMAGE_RELATIVE_PATH,
         import.meta.url
       ).href,
-      new URL("./images/shape/shape-rectangular@3x.png", import.meta.url).href
+      new URL(SHAPE_RECTANGULAR_IMAGE_RELATIVE_PATH, import.meta.url).href
     ]
   }
 };
@@ -18597,19 +18561,19 @@ function InstrumentDiagram(props) {
   }
   return /* @__PURE__ */ jsx(Flex, { className, transform: mount === "right" ? "scaleX(-1)" : "", filter: mount === "right" ? "FlipH" : "", ...styleProps2, alignItems: ALIGN_CENTER, justifyContent: JUSTIFY_CENTER, children: /* @__PURE__ */ jsx(_StyledImg, { src: channels === 96 ? ninetySixSrc : imgSrc, height: "100%", $_css: imageStyle }) });
 }
-var _StyledImg = _styled("img").withConfig({
+var _StyledImg = styled("img").withConfig({
   displayName: "InstrumentDiagram___StyledImg",
   componentId: "sc-1k3ew1b-0"
 })(["", ""], (p) => p.$_css);
-const AlertPrimaryButton = _styled(NewAlertPrimaryBtn).withConfig({
+const AlertPrimaryButton = styled(NewAlertPrimaryBtn).withConfig({
   displayName: "AlertPrimaryButton",
   componentId: "sc-oex82u-0"
 })(["background-color:", ";border-radius:", ";padding-left:", ";padding-right:", ";text-transform:", ";box-shadow:0 0 0;", " ", " &:hover{box-shadow:0 0 0;background-color:", ";}&:disabled{background-color:", ";color:", ";}"], red50, borderRadius8, spacing16, spacing16, textTransformNone, pSemiBold, styleProps, red55, grey30, grey40);
-const PrimaryButton = _styled(NewPrimaryBtn).withConfig({
+const PrimaryButton = styled(NewPrimaryBtn).withConfig({
   displayName: "PrimaryButton",
   componentId: "sc-1bbed59-0"
 })(["background-color:", ";border-radius:", ";box-shadow:none;padding-left:", ";padding-right:", ";line-height:", ";text-transform:", ";", " ", " &:hover,&:focus{background-color:", ";box-shadow:none;}&:focus-visible{box-shadow:0 0 0 3px ", ";}&:active{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], blue50, borderRadius8, spacing16, spacing16, lineHeight20, textTransformNone, pSemiBold, styleProps, blue55, yellow50, blue60, grey30, grey40);
-const SecondaryButton = _styled.button.withConfig({
+const SecondaryButton = styled.button.withConfig({
   shouldForwardProp: (p) => isntStyleProp(p) && p !== "isDangerous"
 }).withConfig({
   displayName: "SecondaryButton",
@@ -18648,21 +18612,12 @@ function CheckboxField(props) {
     /* @__PURE__ */ jsx(_StyledBox$1, { tabIndex, children: label })
   ] });
 }
-var _StyledLabel = _styled("label").withConfig({
-  displayName: "CheckboxField___StyledLabel",
-  componentId: "sc-z2lf4u-0"
-})(["", ""], OUTER_STYLE);
-var _StyledIcon$1 = _styled(Icon).withConfig({
-  displayName: "CheckboxField___StyledIcon",
-  componentId: "sc-z2lf4u-1"
-})(["", ""], (p) => p.$_css);
-var _StyledInput = _styled("input").withConfig({
-  displayName: "CheckboxField___StyledInput",
-  componentId: "sc-z2lf4u-2"
-})(["", ""], INPUT_STYLE);
-var _StyledBox$1 = _styled(Box).withConfig({
+var _StyledLabel = styled("label")`${OUTER_STYLE}`;
+var _StyledIcon$1 = styled(Icon)`${(p) => p.$_css}`;
+var _StyledInput = styled("input")`${INPUT_STYLE}`;
+var _StyledBox$1 = styled(Box).withConfig({
   displayName: "CheckboxField___StyledBox",
-  componentId: "sc-z2lf4u-3"
+  componentId: "sc-z2lf4u-0"
 })(["", ""], LABEL_TEXT_STYLE);
 const CHIP_PROPS_BY_TYPE = {
   basic: {
@@ -18725,17 +18680,11 @@ function Chip(props) {
 }
 const WEB_MEDIUM_TEXT_STYLE = css(["font-size:", ";line-height:", ";font-weight:", ";"], fontSizeH4, lineHeight20, fontWeightSemiBold);
 const WEB_SMALL_TEXT_STYLE = css(["font-size:", ";line-height:", ";font-weight:", ";"], fontSizeLabel, lineHeight12, fontWeightSemiBold);
-var _StyledFlex = _styled(Flex).withConfig({
-  displayName: "Chip___StyledFlex",
-  componentId: "sc-6cb56h-0"
-})(["", ""], (p) => p.$_css);
-var _StyledIcon = _styled(Icon).withConfig({
-  displayName: "Chip___StyledIcon",
-  componentId: "sc-6cb56h-1"
-})(["", ""], (p) => p.$_css2);
-var _StyledStyledText = _styled(StyledText).withConfig({
+var _StyledFlex = styled(Flex)`${(p) => p.$_css}`;
+var _StyledIcon = styled(Icon)`${(p) => p.$_css2}`;
+var _StyledStyledText = styled(StyledText).withConfig({
   displayName: "Chip___StyledStyledText",
-  componentId: "sc-6cb56h-2"
+  componentId: "sc-6cb56h-0"
 })(["", ""], (p) => p.$_css3);
 const StepMeter = (props) => {
   const {
@@ -18750,13 +18699,10 @@ const StepMeter = (props) => {
   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", ...styleProps2, $_css: StepMeterContainer, children: /* @__PURE__ */ jsx(_StyledBox2, { "data-testid": "StepMeter_StepMeterBar", $_css2: StepMeterBar }) });
 };
-var _StyledBox = _styled(Box).withConfig({
-  displayName: "StepMeter___StyledBox",
-  componentId: "sc-1lyj6st-0"
-})(["", ""], (p) => p.$_css);
-var _StyledBox2 = _styled(Box).withConfig({
+var _StyledBox = styled(Box)`${(p) => p.$_css}`;
+var _StyledBox2 = styled(Box).withConfig({
   displayName: "StepMeter___StyledBox2",
-  componentId: "sc-1lyj6st-1"
+  componentId: "sc-1lyj6st-0"
 })(["", ""], (p) => p.$_css2);
 const pipette_group = "_pipette_group_df8d3_3";
 const right$1 = "_right_df8d3_12";
@@ -19283,7 +19229,7 @@ function Card(props) {
     children
   ] });
 }
-const Section = _styled.section.withConfig({
+const Section = styled.section.withConfig({
   shouldForwardProp: isntStyleProp
 }).withConfig({
   displayName: "Card__Section",
@@ -19291,7 +19237,7 @@ const Section = _styled.section.withConfig({
 })(["font-size:", ";position:relative;overflow:visible;box-shadow:0 1px 2px 0 rgba(0,0,0,0.33);", " ", ""], FONT_SIZE_BODY_2, ({
   disabled: disabled2
 }) => disabled2 && css(["pointer-events:none;background-color:transparent;& *{color:", ";fill:", ";background-color:transparent;}"], C_FONT_DISABLED, C_FONT_DISABLED), styleProps);
-const Title = _styled.h3.withConfig({
+const Title = styled.h3.withConfig({
   displayName: "Card__Title",
   componentId: "sc-r4iqug-1"
 })(["", " font-weight:", ";margin:0;padding:", " ", " 0;text-transform:capitalize;"], FONT_HEADER_DARK, FONT_WEIGHT_REGULAR, SPACING_3, SPACING_3);
@@ -19373,27 +19319,27 @@ function ModalShell(props) {
     footer != null ? /* @__PURE__ */ jsx(Footer, { children: footer }) : null
   ] }) }) });
 }
-const Overlay = _styled.div.withConfig({
+const Overlay = styled.div.withConfig({
   displayName: "ModalShell__Overlay",
   componentId: "sc-1far9wb-0"
 })(["position:", ";left:0;right:0;top:0;bottom:0;z-index:1;background-color:", "", ";cursor:default;"], POSITION_FIXED, black90, opacity60HexCode);
-const ContentArea = _styled.div.withConfig({
+const ContentArea = styled.div.withConfig({
   displayName: "ModalShell__ContentArea",
   componentId: "sc-1far9wb-1"
 })(["display:flex;position:", ";align-items:", ";justify-content:", ";top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:", ";padding:", ";"], POSITION_ABSOLUTE, ALIGN_CENTER, JUSTIFY_CENTER, ({
   zIndex
 }) => zIndex, spacing16);
-const ModalArea = _styled.div.withConfig({
+const ModalArea = styled.div.withConfig({
   displayName: "ModalShell__ModalArea",
   componentId: "sc-1far9wb-2"
 })(["position:", ";overflow-y:", ";max-height:100%;width:100%;border-radius:", ";box-shadow:", ";height:", ";background-color:", ";", ";"], POSITION_RELATIVE, OVERFLOW_AUTO, borderRadius8, smallDropShadow, ({
   isFullPage
 }) => isFullPage ? "100%" : "auto", white, styleProps);
-const Footer = _styled.div.withConfig({
+const Footer = styled.div.withConfig({
   displayName: "ModalShell__Footer",
   componentId: "sc-1far9wb-3"
 })(["background-color:", ";position:", ";bottom:0;"], white, POSITION_STICKY);
-const Header = _styled.div.withConfig({
+const Header = styled.div.withConfig({
   displayName: "ModalShell__Header",
   componentId: "sc-1far9wb-4"
 })(["background-color:", ";position:", ";top:0;"], white, POSITION_STICKY);

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.6-alpha.3",
+  "version": "0.1.6-alpha.6",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
   "style": "src/index.module.css",
-  "main": "lib/opentrons-components.js",
+  "main": "lib/index.mjs",
   "module": "src/index.ts",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
     "@types/react-router-dom": "5.3.3"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.6-alpha.3",
+    "@opentrons/shared-data": "0.1.6-alpha.6",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -35,8 +35,10 @@
     "classnames": "2.2.5",
     "interactjs": "^1.10.17",
     "lodash": "4.17.21",
+    "react-i18next": "13.5.0",
     "react-popper": "1.0.0",
     "react-remove-scroll": "2.4.3",
+    "react-router-dom": "5.3.4",
     "react-select": "5.4.0",
     "redux": "4.0.5",
     "styled-components": "5.3.6"