@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.0

package/src/hardware-sim/Deck/OT2Layers.tsx

@@ -0,0 +1,160 @@
+import { COLORS } from '../../helix-design-system'
+
+export function FixedBase(): JSX.Element {
+  return (
+    <g id="fixedBase">
+      <path
+        d="M506.326,494.546h-619.653V-65.506h68.503V397c0,2.935,2.388,5.324,5.324,5.324H260c2.935,0,5.324-2.388,5.324-5.324V284.5c0-6.99,5.687-12.676,12.677-12.676h154.5c2.936,0,5.324-2.388,5.324-5.324V-65.506h68.503V494.546z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(204, 204, 204)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+
+interface FixedTrashProps {
+  highlight?: boolean
+}
+export function FixedTrash(props: FixedTrashProps): JSX.Element {
+  const { highlight = false } = props
+  return (
+    <g id="fixedTrash">
+      <path
+        d="M441.107,289.57v135.86c0,8.368-6.808,15.176-15.176,15.176H283.07c-8.368,0-15.176-6.808-15.176-15.176V289.57c0-8.368,6.808-15.177,15.176-15.177h142.86C434.298,274.394,441.107,281.202,441.107,289.57z M425.053,434H283.947c-1.24,0-2.484-0.034-3.702-0.287c-2-0.416-3.81-1.446-4.884-3.227c-1.152-1.91-1.289-4.185-1.289-6.359v-88.629c0-2.683,0.259-5.609,2.263-7.612c2.004-2.003,4.928-2.263,7.612-2.263h25.939c1.693,0.006,3.545-0.167,4.807-1.429c1.262-1.262,1.435-3.115,1.429-4.807v-28.94c0-2.124,0.129-4.338,1.209-6.225c1.059-1.851,2.904-2.933,4.954-3.36c1.222-0.255,2.468-0.289,3.712-0.289h99.056c2.124,0,4.339,0.129,6.226,1.209c1.851,1.06,2.933,2.904,3.36,4.954c0.255,1.222,0.289,2.468,0.289,3.712v133.68c0,2.684-0.259,5.607-2.263,7.611C430.661,433.741,427.737,434,425.053,434z"
+        style={{
+          fill: highlight ? 'none' : 'rgb(237, 237, 237)',
+          stroke: highlight ? COLORS.blue50 : 'none',
+          fillRule: 'evenodd',
+          strokeWidth: 2,
+        }}
+      ></path>
+    </g>
+  )
+}
+export function DoorStops(): JSX.Element {
+  return (
+    <g id="doorStops">
+      <path
+        d="M-63.6-67.68v2.35h8.06v-2.35H-63.6z M-75.45-65.33h27.95c1.381,0,2.5,1.119,2.5,2.5v15c0,1.381-1.119,2.5-2.5,2.5h-27.95c-1.381,0-2.5-1.119-2.5-2.5v-15C-77.95-64.211-76.831-65.33-75.45-65.33z M468.45-45.33H440.5c-1.381,0-2.5-1.119-2.5-2.5v-15c0-1.381,1.119-2.5,2.5-2.5h27.95c1.381,0,2.5,1.119,2.5,2.5v15C470.95-46.449,469.831-45.33,468.45-45.33z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(204, 204, 204)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+
+export function MetalFrame(): JSX.Element {
+  return (
+    <g id="metalFrame">
+      <path
+        d="M506.65,443.07v51.05h2v-51.05H506.65z M-113.65,494.12h-2v-51.05h2V494.12z M506.65-65.08h2v51.05h-2V-65.08z M-113.65-14.03v-51.05h-2v51.05H-113.65z M-113.15-66.08v51.55h3v-12.5h5c0.803,0,1.588-0.242,2.252-0.694l23.2-15.8c1.094-0.745,1.748-1.983,1.748-3.306v-19.25h12.5v-2h-50.2v2H-113.15z M-113.15,495.12h-2.5v2h50.2v-2h-12.5v-19.25c0-1.323-0.654-2.561-1.748-3.306l-23.2-15.8c-0.664-0.452-1.449-0.694-2.252-0.694h-5v-12.5h-3V495.12z M506.15,495.12v-51.55h-3v12.5h-5c-0.803,0-1.588,0.242-2.252,0.694l-23.2,15.8c-1.094,0.745-1.748,1.983-1.748,3.306v19.25h-12.5v2h50.2v-2H506.15z M506.15-14.53v-51.55h2.5v-2h-50.2v2h12.5v19.25c0,1.323,0.654,2.561,1.748,3.306l23.2,15.8c0.664,0.452,1.449,0.694,2.252,0.694h5v12.5H506.15z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(204, 204, 204)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+
+export function RemovableDeckOutline(): JSX.Element {
+  return (
+    <g id="removableDeckOutline">
+      <path
+        d="M-44.5-60.33c0-2.761,2.239-5,5-5h472c2.761,0,5,2.239,5,5V266.5c0,2.761-2.239,5-5,5H278c-7.18,0-13,5.82-13,13v0l0,112.5c0,2.761-2.239,5-5,5H-39.5c-2.761,0-5-2.239-5-5L-44.5-60.33z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(237, 237, 237)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+
+export function SlotRidges(): JSX.Element {
+  return (
+    <g id="slotRidges">
+      <path
+        d="M265,278.75h-4.5v71.5h4.5V278.75z M120.75,357.5H7.25v4.5h113.5V357.5z M7.25,271.5h113.5V267H7.25V271.5z M-4.5,350.25H0l0-71.5h-4.5V350.25 M139.75,357.5h113.5v4.5h-113.5V357.5z M132.5,350.25v-71.5H128v71.5H132.5z M253.25,267h-113.5v4.5h113.5V267z M385.75,267h-113.5v4.5h113.5V267z M120.75,176.5H7.25v4.5h113.5V176.5z M0,188.25l0,71.5h-4.5v-71.5H0z M0,97.75l0,71.5h-4.5v-71.5H0z M393,188.25v71.5h4.5v-71.5H393z M260.5,188.25v71.5h4.5v-71.5H260.5z M385.75,176.5h-113.5v4.5h113.5V176.5z M128,188.25v71.5h4.5v-71.5H128z M393,97.75v71.5h4.5v-71.5H393z M253.25,176.5h-113.5v4.5h113.5V176.5z M260.5,97.75v71.5h4.5v-71.5H260.5z M128,97.75v71.5h4.5v-71.5H128z M385.75,86h-113.5v4.5h113.5V86z M393,7.25v71.5h4.5V7.25H393z M385.75,0l-113.5,0v-4.5h113.5V0z M253.25,86h-113.5v4.5h113.5V86z M260.5,7.25v71.5h4.5V7.25H260.5z M253.25,0l-113.5,0v-4.5h113.5V0z M120.75,0L7.25,0v-4.5h113.5V0z M120.75,86H7.25v4.5h113.5V86z M128,7.25v71.5h4.5V7.25H128z M0,7.25l0,71.5h-4.5V7.25H0z"
+        style={{
+          fill: 'rgb(237, 237, 237)',
+          stroke: 'none',
+          fillRule: 'evenodd',
+        }}
+      ></path>
+    </g>
+  )
+}
+export function SlotNumbers(): JSX.Element {
+  return (
+    <g id="slotNumbers">
+      <path
+        d="M327.879,29.245c7.276,0,12.41,1.696,12.41,9.687c0,5.216-2.252,7.894-7.698,8.111c-0.157,0.006-0.301,0.085-0.391,0.214c-0.158,0.227-0.102,0.538,0.125,0.696c3.058,2.129,5.114,3.655,6.89,5.262c0.314,0.284,0.494,0.688,0.494,1.112v4.22c0,0.828-0.672,1.5-1.5,1.5h-16.687c-0.828,0-1.5-0.672-1.5-1.5v-3.428c0-0.828,0.672-1.5,1.5-1.5h7.347c0.137,0,0.268-0.057,0.362-0.156c0.19-0.2,0.181-0.517-0.019-0.707c-0.953-0.901-3.261-2.616-6.8-5.055c-0.406-0.28-0.649-0.742-0.649-1.235v-2.418c0-0.828,0.672-1.5,1.5-1.5h0.732c6.116,0,7.902-0.58,7.902-3.125c0-3.169-1.652-3.616-5.268-3.616c-1.169,0-3.183,0.141-4.79,0.355c-0.026,0.003-0.051,0.006-0.077,0.008c-0.826,0.067-1.549-0.548-1.616-1.374l-0.267-3.31c-0.062-0.773,0.474-1.465,1.238-1.598C323.4,29.49,325.902,29.245,327.879,29.245z M219.767,307.843v-3.651c0-0.828-0.672-1.5-1.5-1.5h-16.195c-0.828,0-1.5,0.672-1.5,1.5v3.651c0,0.828,0.672,1.5,1.5,1.5h4.16c0.276,0,0.5,0.224,0.5,0.5v15.853c0,0.276-0.223,0.5-0.5,0.5c-0.037,0-0.075-0.004-0.111-0.012l-4.163-0.946c-0.808-0.184-1.612,0.322-1.795,1.13c-0.025,0.109-0.037,0.22-0.037,0.332v3.568c0,0.706,0.492,1.316,1.181,1.466l5.305,1.154c0.489,0.106,0.987,0.159,1.487,0.159h4.901c0.828,0,1.5-0.672,1.5-1.5v-21.704c0-0.276,0.224-0.5,0.5-0.5h3.267C219.095,309.343,219.767,308.672,219.767,307.843z M83.865,304.076c-1.964-1.384-3.527-1.83-7.009-1.83c-3.437,0-4.955,0.447-6.919,1.83c-3.08,2.187-4.152,9.107-4.152,13.794c0,4.731,1.072,11.606,4.152,13.793c1.964,1.384,3.482,1.831,6.919,1.831c3.482,0,5.045-0.447,7.009-1.831c3.08-2.187,4.107-9.062,4.107-13.793C87.972,313.182,86.945,306.263,83.865,304.076z M72.548,125.549v-3.357c0-0.828-0.672-1.5-1.5-1.5h-4.41c-0.828,0-1.5,0.672-1.5,1.5v3.357c0,0.276-0.224,0.5-0.5,0.5H54.094c-0.828,0-1.5,0.672-1.5,1.5v4.129c0,1.218,0.223,2.427,0.657,3.565l5.662,14.84c0.222,0.581,0.78,0.965,1.402,0.965h4.335c0.828,0,1.5-0.671,1.5-1.5c0-0.199-0.04-0.396-0.116-0.58c-3.975-9.491-5.932-14.562-6.181-15.9c-0.051-0.271,0.128-0.533,0.4-0.583c0.03-0.006,0.061-0.008,0.091-0.008h4.294c0.276,0,0.5,0.224,0.5,0.5v6.482c0,0.828,0.672,1.5,1.5,1.5h4.41c0.828,0,1.5-0.672,1.5-1.5v-6.482c0-0.276,0.224-0.5,0.5-0.5h0.991c0.828,0,1.5-0.672,1.5-1.5v-3.428c0-0.828-0.672-1.5-1.5-1.5h-0.991C72.772,126.049,72.548,125.825,72.548,125.549z M61.008,307.843v-3.651c0-0.828-0.672-1.5-1.5-1.5H43.312c-0.828,0-1.5,0.672-1.5,1.5v3.651c0,0.828,0.672,1.5,1.5,1.5h4.161c0.276,0,0.5,0.224,0.5,0.5v15.853c0,0.276-0.223,0.5-0.5,0.5c-0.038,0-0.075-0.004-0.111-0.012l-4.164-0.946c-0.808-0.183-1.611,0.323-1.795,1.131c-0.025,0.109-0.037,0.22-0.037,0.331v3.568c0,0.706,0.492,1.316,1.181,1.466l5.306,1.154c0.489,0.106,0.987,0.159,1.487,0.159h4.9c0.828,0,1.5-0.672,1.5-1.5v-21.704c0-0.276,0.224-0.5,0.5-0.5h3.268C60.337,309.343,61.008,308.672,61.008,307.843z M74.017,235.738c-2.57-6.341-5.287-9.609-7.183-15.297c-0.915-2.705-1.156-4.772-1.198-7.275c-0.014-0.819-0.681-1.475-1.5-1.475h-5.534c-0.828,0-1.5,0.672-1.5,1.5l0,0v0.196c0,10.461,7.661,17.867,8.146,21.122c0.041,0.273-0.148,0.528-0.421,0.568c-0.025,0.004-0.049,0.005-0.074,0.005h-9.454c-0.828,0-1.5,0.672-1.5,1.5v3.964c0,0.828,0.672,1.5,1.5,1.5H72.7c0.828,0,1.5-0.672,1.5-1.5v-3.871C74.2,236.355,74.138,236.036,74.017,235.738z M56.192,29.692c-0.828,0-1.5,0.672-1.5,1.5v3.651c0,0.828,0.672,1.5,1.5,1.5h4.16c0.276,0,0.5,0.224,0.5,0.5v15.853c0,0.276-0.223,0.5-0.5,0.5c-0.038,0-0.075-0.004-0.111-0.012l-4.163-0.946c-0.808-0.184-1.612,0.322-1.796,1.13c-0.025,0.109-0.037,0.221-0.037,0.333v3.567c0,0.706,0.492,1.316,1.182,1.466l5.306,1.154c0.489,0.106,0.987,0.159,1.487,0.159h4.9c0.828,0,1.5-0.672,1.5-1.5v0V36.843c0-0.276,0.224-0.5,0.5-0.5h3.268c0.828,0,1.5-0.672,1.5-1.5v-3.651c0-0.828-0.672-1.5-1.5-1.5H56.192z M341.048,130.379c0-8.571-4.152-10.133-10.848-10.133c-7.812,0-11.205,2.054-11.205,10c0,6.72,1.021,11.132,8.721,20.269c0.285,0.338,0.705,0.533,1.147,0.533h5.726c0.828,0,1.5-0.672,1.5-1.5c0-0.346-0.119-0.681-0.338-0.948c-1.522-1.866-3.89-4.796-5.903-8.096c-0.144-0.236-0.069-0.543,0.166-0.687c0.078-0.048,0.168-0.073,0.26-0.073c0.025,0,0.05,0.002,0.075,0.006c0.891,0.134,1.625,0.317,2.798,0.317C339.396,140.066,341.048,137.075,341.048,130.379 M196.977,211.245c-6.562,0-11.339,1.562-11.339,8.08c0,3.832,1,6.143,4.714,7.79c0.252,0.112,0.366,0.407,0.254,0.66c-0.049,0.111-0.137,0.2-0.246,0.251c-2.893,1.345-3.963,3.473-3.963,7.013c0,5.803,4.107,7.455,10.58,7.455s10.58-1.652,10.58-7.455c0-3.5-1.1-5.505-4.084-6.844c-0.252-0.113-0.365-0.409-0.251-0.661c0.049-0.108,0.134-0.196,0.242-0.247c3.968-1.884,4.808-4.157,4.808-7.961C208.271,212.808,203.54,211.245,196.977,211.245z M191.04,133.772h-1.958c-0.828,0-1.5,0.672-1.5,1.5c0,0.017,0,0.034,0.001,0.051l0.481,14.276c0.027,0.808,0.69,1.45,1.499,1.45h15.244c0.828,0,1.5-0.672,1.5-1.5l0,0v-3.428c0-0.828-0.672-1.5-1.5-1.5h-8.632c-0.266,0-0.485-0.208-0.499-0.474l-0.208-3.956c-0.015-0.276,0.197-0.511,0.473-0.526c0.008,0,0.016-0.001,0.024-0.001c7.602-0.031,11.1-1.59,11.1-8.571c0-9.151-5.268-10.848-12.767-10.848c-2.045,0-4.508,0.239-6.314,0.546c-0.764,0.13-1.304,0.821-1.244,1.594l0.264,3.437c0.063,0.826,0.785,1.444,1.611,1.381c0.037-0.003,0.073-0.007,0.11-0.013c1.531-0.232,3.543-0.338,4.815-0.338c3.661,0,5.089,0.625,5.089,3.437C198.629,133.325,197.468,133.772,191.04,133.772z M188.299,29.692h17.713h0c0.828,0,1.5,0.672,1.5,1.5v3.651v0c0,0.828-0.672,1.5-1.5,1.5H195.96c-0.276,0-0.5,0.224-0.5,0.5v0.08c0,1.295,1.428,2.545,4.821,5.313l2.901,2.366c3.482,2.812,4.152,4.419,4.152,8.303c0,6.384-3.482,7.589-9.91,7.589c-2.799,0-6.477-0.305-8.442-0.767c-0.708-0.166-1.194-0.816-1.155-1.542l0.201-3.677c0.044-0.795,0.701-1.418,1.498-1.418c0.088,0,0.176,0.008,0.262,0.023c1.687,0.3,4.047,0.595,5.225,0.595c2.544,0,3.75-0.178,3.75-2.187c0.044-1.652-1.116-2.812-4.062-5.223l-2.723-2.187c-5-4.063-5.178-6.072-5.178-10.312v-2.607C186.799,30.364,187.471,29.692,188.299,29.692z M189.24,309.343h3.268c0.828,0,1.5-0.672,1.5-1.5v-3.651c0-0.828-0.672-1.5-1.5-1.5h-16.196c-0.828,0-1.5,0.672-1.5,1.5v3.651c0,0.828,0.672,1.5,1.5,1.5h4.161c0.276,0,0.5,0.224,0.5,0.5v15.853c0,0.276-0.223,0.5-0.5,0.5c-0.037,0-0.075-0.004-0.111-0.012l-4.164-0.946c-0.808-0.184-1.612,0.322-1.795,1.13c-0.025,0.109-0.037,0.22-0.037,0.332v3.568c0,0.706,0.492,1.316,1.181,1.466l5.305,1.154c0.489,0.106,0.987,0.159,1.487,0.159h4.9c0.828,0,1.5-0.672,1.5-1.5v-21.704C188.74,309.567,188.964,309.343,189.24,309.343 M332.282,212.225c7.701,9.137,8.721,13.55,8.721,20.269c0,7.946-3.392,10-11.249,10c-6.652,0-10.803-1.563-10.803-10.134c0-6.696,1.607-9.687,7.901-9.687c1.173,0,1.906,0.183,2.797,0.317c0.118,0.018,0.238-0.007,0.339-0.069c0.235-0.146,0.307-0.454,0.161-0.688c-1.965-3.17-4.225-6.18-5.782-8.094c-0.218-0.267-0.336-0.602-0.337-0.946c0-0.828,0.671-1.5,1.5-1.5h5.605C331.577,211.692,331.997,211.887,332.282,212.225z M329.933,134.887c-2.724,0-3.259-0.625-3.259-4.375c0-3.705,0.848-4.107,3.259-4.107c2.544,0,3.258,0.402,3.258,4.107C333.191,134.307,332.388,134.887,329.933,134.887z M196.933,224.772c-2.321,0-3.527-1.83-3.527-4.375c0-2.634,0.982-3.08,3.571-3.08c2.589,0,3.616,0.491,3.616,3.08C200.593,222.941,199.299,224.772,196.933,224.772z M197.022,236.959c-2.5,0-3.259-0.625-3.259-3.169c0-2.098,0.804-3.928,3.169-3.928c2.321,0,3.169,1.83,3.169,3.928C200.102,236.244,199.388,236.959,197.022,236.959z M74.981,309.254c0.492-0.759,0.938-0.893,1.875-0.893c1.027,0,1.518,0.134,1.92,0.893c0.759,1.205,1.205,5.401,1.205,8.616c0,3.258-0.401,7.454-1.205,8.705c-0.446,0.758-0.893,0.848-1.92,0.848c-0.937,0-1.428-0.134-1.875-0.848c-0.714-1.206-1.205-5.447-1.205-8.705C73.776,314.655,74.267,310.414,74.981,309.254z M330.066,236.289c-2.589,0-3.169-0.312-3.169-4.062c0-3.794,0.714-4.33,3.169-4.33c2.679,0,3.259,0.58,3.259,4.33C333.325,235.976,332.477,236.289,330.066,236.289z"
+        style={{
+          fill: 'rgb(204, 204, 204)',
+          stroke: 'none',
+          fillRule: 'evenodd',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+export function CalibrationMarkings(): JSX.Element {
+  return (
+    <g id="calibrationMarkings">
+      <path
+        d="M12.13,352c0.276,0,0.5-0.224,0.5-0.5c0-0.276-0.224-0.5-0.5-0.5s-0.5,0.224-0.5,0.5C11.63,351.776,11.854,352,12.13,352z M11.88,348.75v1.253c-0.001,0.074,0.022,0.134,0.067,0.181c0.047,0.045,0.108,0.067,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.181v-1.253h1.253c0.074,0.001,0.134-0.022,0.181-0.067c0.045-0.047,0.067-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.068-0.181-0.067H12.38v-1.253c0.001-0.074-0.022-0.134-0.067-0.181c-0.047-0.045-0.108-0.067-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.068,0.107-0.067,0.181v1.253h-1.253c-0.074-0.001-0.134,0.022-0.181,0.067c-0.045,0.047-0.067,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.068,0.181,0.067H11.88z M248.37,352c0.276,0,0.5-0.224,0.5-0.5c0-0.276-0.224-0.5-0.5-0.5c-0.276,0-0.5,0.224-0.5,0.5C247.87,351.776,248.094,352,248.37,352z M248.62,348.75h1.253c0.075,0.001,0.135-0.022,0.182-0.067c0.045-0.047,0.066-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.068-0.182-0.067h-1.253v-1.253c0-0.074-0.022-0.134-0.067-0.181c-0.047-0.045-0.108-0.067-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.067,0.107-0.067,0.181v1.253h-1.253c-0.075-0.001-0.135,0.022-0.182,0.067c-0.045,0.047-0.066,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.068,0.182,0.067h1.253v1.253c0,0.074,0.022,0.134,0.067,0.181c0.047,0.045,0.108,0.067,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.067-0.107,0.067-0.181V348.75z M380.62,256.498v1.253h-1.253c-0.074,0-0.134,0.022-0.181,0.067c-0.045,0.047-0.067,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.067,0.181,0.067h1.253v1.252c-0.001,0.075,0.022,0.135,0.067,0.182c0.047,0.045,0.108,0.066,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.182v-1.252h1.253c0.074,0,0.134-0.022,0.181-0.067c0.045-0.047,0.067-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.067-0.181-0.067h-1.253v-1.253c0.001-0.075-0.022-0.135-0.067-0.182c-0.047-0.045-0.108-0.066-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066C380.642,256.362,380.619,256.423,380.62,256.498z M12.13,260.5c-0.276,0-0.5,0.224-0.5,0.5c0,0.276,0.224,0.5,0.5,0.5s0.5-0.224,0.5-0.5C12.63,260.724,12.406,260.5,12.13,260.5z M380.87,261.5c0.276,0,0.5-0.224,0.5-0.5c0-0.276-0.224-0.5-0.5-0.5c-0.276,0-0.5,0.224-0.5,0.5C380.37,261.276,380.594,261.5,380.87,261.5z M11.88,258.25v1.252c-0.001,0.075,0.022,0.135,0.067,0.182c0.047,0.045,0.108,0.066,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.182v-1.252h1.253c0.074,0,0.134-0.022,0.181-0.067c0.045-0.047,0.067-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.067-0.181-0.067H12.38v-1.253c0.001-0.075-0.022-0.135-0.067-0.182c-0.047-0.045-0.108-0.066-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.068,0.107-0.067,0.182v1.253h-1.253c-0.074,0-0.134,0.022-0.181,0.067c-0.045,0.047-0.067,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.067,0.181,0.067H11.88z M381.12,7.497c0.001-0.074-0.022-0.134-0.067-0.181c-0.047-0.045-0.108-0.067-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.068,0.107-0.067,0.181V8.75h-1.253c-0.074-0.001-0.134,0.022-0.181,0.067c-0.045,0.047-0.067,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.068,0.181,0.067h1.253v1.253c-0.001,0.074,0.022,0.134,0.067,0.181c0.047,0.045,0.108,0.067,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.181V9.25h1.253c0.074,0.001,0.134-0.022,0.181-0.067c0.045-0.047,0.067-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.068-0.181-0.067h-1.253V7.497 M11.88,8.75h-1.253c-0.074-0.001-0.134,0.022-0.181,0.067C10.401,8.864,10.379,8.925,10.38,9c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.068,0.181,0.067h1.253v1.253c-0.001,0.074,0.022,0.134,0.067,0.181c0.047,0.045,0.108,0.067,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.181V9.25h1.253c0.074,0.001,0.134-0.022,0.181-0.067C13.859,9.136,13.881,9.075,13.88,9c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.068-0.181-0.067H12.38V7.497c0.001-0.074-0.022-0.134-0.067-0.181c-0.047-0.045-0.108-0.067-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.068,0.107-0.067,0.181V8.75z M12.13,5.5c-0.276,0-0.5,0.224-0.5,0.5s0.224,0.5,0.5,0.5s0.5-0.224,0.5-0.5S12.406,5.5,12.13,5.5z M380.87,6.5c0.276,0,0.5-0.224,0.5-0.5s-0.224-0.5-0.5-0.5c-0.276,0-0.5,0.224-0.5,0.5S380.594,6.5,380.87,6.5z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(204, 204, 204)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+export function RemovalHandle(): JSX.Element {
+  return (
+    <g id="removalHandle">
+      <path
+        d="M159-48.915c-7.732,0-14,6.268-14,14c0,7.732,6.268,14,14,14h75c7.732,0,14-6.268,14-14c0-7.732-6.268-14-14-14H159z M234-47.415c6.904,0,12.5,5.596,12.5,12.5s-5.596,12.5-12.5,12.5h-75c-6.904,0-12.5-5.596-12.5-12.5s5.596-12.5,12.5-12.5H234z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(204, 204, 204)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+export function ScrewHoles(): JSX.Element {
+  return (
+    <g id="screwHoles">
+      <path
+        d="M-31.5,162.21c-3.38,0-6.12,2.74-6.12,6.12c0,3.38,2.74,6.12,6.12,6.12s6.12-2.74,6.12-6.12C-25.38,164.95-28.12,162.21-31.5,162.21z M424.5,174.45c3.38,0,6.12-2.74,6.12-6.12c0-3.38-2.74-6.12-6.12-6.12c-3.38,0-6.12,2.74-6.12,6.12C418.38,171.71,421.12,174.45,424.5,174.45z M424.5,166.23c-1.16,0-2.1,0.94-2.1,2.1c0,1.16,0.94,2.1,2.1,2.1c1.16,0,2.1-0.94,2.1-2.1C426.6,167.17,425.66,166.23,424.5,166.23z M-31.5,170.43c1.16,0,2.1-0.94,2.1-2.1c0-1.16-0.94-2.1-2.1-2.1c-1.16,0-2.1,0.94-2.1,2.1C-33.6,169.49-32.66,170.43-31.5,170.43z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(204, 204, 204)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}

package/src/hardware-sim/Deck/RobotCoordsForeignDiv.tsx

@@ -0,0 +1,51 @@
+import { Box } from '../../primitives'
+
+import type { ComponentProps, ReactNode } from 'react'
+
+export interface RobotCoordsForeignDivProps {
+  width?: string | number
+  height?: string | number
+  x?: string | number
+  y?: string | number
+  children?: ReactNode
+  outerProps?: any
+  innerDivProps?: ComponentProps<typeof Box>
+  transformWithSVG?: boolean
+  extraTransform?: string
+  /** optional data-testid to test foreignObjects in cypress */
+  dataTestId?: string
+}
+
+export const RobotCoordsForeignDiv = (
+  props: RobotCoordsForeignDivProps
+): JSX.Element => {
+  const {
+    children,
+    x = 0,
+    y = 0,
+    height = '100%',
+    width = '100%',
+    outerProps,
+    innerDivProps,
+    transformWithSVG = false,
+    extraTransform = '',
+    dataTestId = '',
+  } = props
+
+  const transform = `scale(1, -1) ${extraTransform}`
+  return (
+    <foreignObject
+      data-testid={dataTestId}
+      {...{ x, y, height, width, ...outerProps }}
+      transform={transformWithSVG ? transform : extraTransform}
+    >
+      <Box
+        style={transformWithSVG ? {} : { transform }}
+        xmlns="http://www.w3.org/1999/xhtml"
+        {...innerDivProps}
+      >
+        {children}
+      </Box>
+    </foreignObject>
+  )
+}

package/src/hardware-sim/Deck/RobotCoordsForeignObject.tsx

@@ -0,0 +1,43 @@
+import { css } from 'styled-components'
+import { Flex, ForeignObject } from '../../primitives'
+
+import type { ComponentProps, ReactNode } from 'react'
+
+export interface RobotCoordsForeignObjectProps {
+  width: string | number
+  height: string | number
+  x: string | number
+  y: string | number
+  children?: ReactNode
+  foreignObjectProps?: ComponentProps<typeof ForeignObject>
+  flexProps?: ComponentProps<typeof Flex>
+}
+
+export const RobotCoordsForeignObject = (
+  props: RobotCoordsForeignObjectProps
+): JSX.Element => {
+  const {
+    children,
+    x,
+    y,
+    height,
+    width,
+    foreignObjectProps = {},
+    flexProps = {},
+  } = props
+
+  return (
+    <ForeignObject {...{ x, y, height, width }}>
+      <Flex
+        height="100%"
+        width="100%"
+        css={css`
+          transform: scale(1, -1);
+        `}
+        {...foreignObjectProps}
+      >
+        <Flex {...flexProps}>{children}</Flex>
+      </Flex>
+    </ForeignObject>
+  )
+}

package/src/hardware-sim/Deck/RobotCoordsText.tsx

@@ -0,0 +1,33 @@
+import { css } from 'styled-components'
+
+import type { ComponentProps, ReactNode } from 'react'
+
+export interface RobotCoordsTextProps extends ComponentProps<'text'> {
+  x: number
+  y: number
+  children?: ReactNode
+  canHighlight?: boolean
+}
+
+/** SVG text reflected to use take robot coordinates as props */
+// TODO: Ian 2019-05-07 reconcile this with Brian's version
+export function RobotCoordsText(props: RobotCoordsTextProps): JSX.Element {
+  const { x, y, children, canHighlight = true, ...additionalProps } = props
+  return (
+    <text
+      {...additionalProps}
+      x={x}
+      y={-1 * y}
+      transform="scale(1, -1)"
+      css={
+        !canHighlight
+          ? css`
+              user-select: none;
+            `
+          : undefined
+      }
+    >
+      {children}
+    </text>
+  )
+}

package/src/hardware-sim/Deck/RobotWorkSpace.tsx

@@ -0,0 +1,98 @@
+import { useRef } from 'react'
+import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
+import { Svg } from '../../primitives'
+import { DeckFromLayers } from './DeckFromLayers'
+
+import type { ReactNode } from 'react'
+import type { StyleProps } from '../../primitives'
+import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
+
+export interface RobotWorkSpaceRenderProps {
+  deckSlotsById: { [slotId: string]: DeckSlot }
+  getRobotCoordsFromDOMCoords: (
+    domX: number,
+    domY: number
+  ) => { x: number; y: number }
+}
+
+export interface RobotWorkSpaceProps extends StyleProps {
+  deckDef?: DeckDefinition
+  viewBox?: string | null
+  children?: (props: RobotWorkSpaceRenderProps) => ReactNode
+  deckLayerBlocklist?: string[]
+  // optional boolean to show the OT-2 deck from deck defintion layers
+  showDeckLayers?: boolean
+  id?: string
+}
+
+type GetRobotCoordsFromDOMCoords = RobotWorkSpaceRenderProps['getRobotCoordsFromDOMCoords']
+
+export function RobotWorkSpace(props: RobotWorkSpaceProps): JSX.Element | null {
+  const {
+    children,
+    deckDef,
+    deckLayerBlocklist = [],
+    showDeckLayers = false,
+    viewBox,
+    id,
+    ...styleProps
+  } = props
+  const wrapperRef = useRef<SVGSVGElement>(null)
+
+  // NOTE: getScreenCTM in Chrome a DOMMatrix type,
+  // in Firefox the same fn returns a deprecated SVGMatrix.
+  // Until Firefox fixes this and conforms to SVG2 draft,
+  // it will suffer from inverted y behavior (ignores css transform)
+  const getRobotCoordsFromDOMCoords: GetRobotCoordsFromDOMCoords = (x, y) => {
+    if (!wrapperRef.current) return { x: 0, y: 0 }
+
+    const cursorPoint = wrapperRef.current.createSVGPoint()
+
+    cursorPoint.x = x
+    cursorPoint.y = y
+
+    return cursorPoint.matrixTransform(
+      wrapperRef.current.getScreenCTM()?.inverse()
+    )
+  }
+  if (!deckDef && !viewBox) return null
+
+  let wholeDeckViewBox
+  let deckSlotsById = {}
+  if (deckDef != null) {
+    const [viewBoxOriginX, viewBoxOriginY] = deckDef.cornerOffsetFromOrigin
+    const [deckXDimension, deckYDimension] = deckDef.dimensions
+
+    deckSlotsById = deckDef.locations.addressableAreas.reduce(
+      (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }),
+      {}
+    )
+    wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
+  }
+
+  const activeViewBox = viewBox ?? wholeDeckViewBox
+
+  return (
+    <Svg viewBox={activeViewBox} ref={wrapperRef} id={id} {...styleProps}>
+      <g
+        transform={
+          activeViewBox
+            ? `scale(1, -1) translate(0, ${
+                -1 *
+                (Number(activeViewBox?.split(' ')[3]) +
+                  2 * Number(activeViewBox?.split(' ')[1]))
+              })`
+            : undefined
+        }
+      >
+        {showDeckLayers ? (
+          <DeckFromLayers
+            layerBlocklist={deckLayerBlocklist}
+            robotType={OT2_ROBOT_TYPE}
+          />
+        ) : null}
+        {children?.({ deckSlotsById, getRobotCoordsFromDOMCoords })}
+      </g>
+    </Svg>
+  )
+}

package/src/hardware-sim/Deck/SlotLabels.tsx

@@ -0,0 +1,111 @@
+import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
+import { DeckInfoLabel } from '../../molecules'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER, DIRECTION_COLUMN, JUSTIFY_CENTER } from '../../styles'
+import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
+
+import type { RobotType } from '@opentrons/shared-data'
+interface SlotLabelsProps {
+  robotType: RobotType
+  color?: string
+  show4thColumn?: boolean
+}
+
+/**
+ * Component to render Opentrons Flex slot labels
+ * For use as a RobotWorkspace child component
+ */
+export const SlotLabels = ({
+  robotType,
+  color,
+  show4thColumn = false,
+}: SlotLabelsProps): JSX.Element | null => {
+  const widthSmallRem = 10.5
+  const widthLargeRem = 15.25
+
+  return robotType === FLEX_ROBOT_TYPE ? (
+    <>
+      <RobotCoordsForeignObject
+        width="2.5rem"
+        height="26.75rem"
+        x="-147"
+        y="-10"
+      >
+        <Flex
+          alignItems={ALIGN_CENTER}
+          flexDirection={DIRECTION_COLUMN}
+          flex="1"
+          height="100%"
+          width="2.5rem"
+        >
+          <Flex alignItems={ALIGN_CENTER} flex="1">
+            <DeckInfoLabel deckLabel="A" height="max-content" width="100%" />
+          </Flex>
+          <Flex alignItems={ALIGN_CENTER} flex="1">
+            <DeckInfoLabel deckLabel="B" height="max-content" width="100%" />
+          </Flex>
+          <Flex alignItems={ALIGN_CENTER} flex="1">
+            <DeckInfoLabel deckLabel="C" height="max-content" width="100%" />
+          </Flex>
+          <Flex alignItems={ALIGN_CENTER} flex="1">
+            <DeckInfoLabel deckLabel="D" height="max-content" width="100%" />
+          </Flex>
+        </Flex>
+      </RobotCoordsForeignObject>
+      <RobotCoordsForeignObject
+        height="2.5rem"
+        width={`${
+          show4thColumn
+            ? widthSmallRem * 2 + widthLargeRem * 2
+            : widthSmallRem + widthLargeRem * 2
+        }rem`}
+        x="-100"
+        y="-55"
+      >
+        <Flex
+          alignItems={ALIGN_CENTER}
+          flex="1"
+          width={`${
+            show4thColumn
+              ? widthSmallRem * 2 + widthLargeRem * 2
+              : widthSmallRem + widthLargeRem * 2
+          }rem`}
+          height="2.5rem"
+        >
+          <Flex
+            alignItems={ALIGN_CENTER}
+            justifyContent={JUSTIFY_CENTER}
+            width={`${widthLargeRem}rem`}
+          >
+            <DeckInfoLabel deckLabel="1" height="100%" />
+          </Flex>
+          <Flex
+            alignItems={ALIGN_CENTER}
+            justifyContent={JUSTIFY_CENTER}
+            width={`${widthSmallRem}rem`}
+          >
+            <DeckInfoLabel deckLabel="2" height="100%" />
+          </Flex>
+          <Flex
+            alignItems={ALIGN_CENTER}
+            justifyContent={JUSTIFY_CENTER}
+            width={
+              show4thColumn ? `${widthSmallRem}rem` : `${widthLargeRem}rem`
+            }
+          >
+            <DeckInfoLabel deckLabel="3" height="100%" />
+          </Flex>
+          {show4thColumn ? (
+            <Flex
+              alignItems={ALIGN_CENTER}
+              justifyContent={JUSTIFY_CENTER}
+              width={`${widthSmallRem}rem`}
+            >
+              <DeckInfoLabel deckLabel="4" height="100%" />
+            </Flex>
+          ) : null}
+        </Flex>
+      </RobotCoordsForeignObject>
+    </>
+  ) : null
+}

package/src/hardware-sim/Deck/__mocks__/getDeckDefinitions.ts

@@ -0,0 +1,29 @@
+import assert from 'assert'
+import path from 'path'
+// replace webpack-specific require.context with Node-based glob in tests
+import glob from 'glob'
+import { vi } from 'vitest'
+
+import type { DeckDefinition } from '@opentrons/shared-data'
+
+const DECK_FIXTURE_PATTERN = path.join(
+  __dirname,
+  '../../../../../shared-data/deck/fixtures/3/*.json'
+)
+
+const allDecks: unknown[] = glob.sync(DECK_FIXTURE_PATTERN).map(require)
+
+assert(
+  allDecks.length > 0,
+  `no deck fixtures found, is the path correct? ${DECK_FIXTURE_PATTERN}`
+)
+
+export const getDeckDefinitions = vi.fn(() =>
+  (allDecks as DeckDefinition[]).reduce(
+    (acc, deck: DeckDefinition): Record<string, DeckDefinition> => ({
+      ...acc,
+      [deck.otId]: deck,
+    }),
+    {}
+  )
+)

package/src/hardware-sim/Deck/constants.ts

@@ -0,0 +1,12 @@
+export const ALL_OT2_DECK_LAYERS = [
+  'fixedBase',
+  'fixedTrash',
+  'doorStops',
+  'metalFrame',
+  'removableDeckOutline',
+  'slotRidges',
+  'slotNumbers',
+  'calibrationMarkings',
+  'removalHandle',
+  'screwHoles',
+] as const

package/src/hardware-sim/Deck/index.tsx

@@ -0,0 +1,8 @@
+export * from './DeckFromLayers'
+export * from './FlexTrash'
+export * from './MoveLabwareOnDeck'
+export * from './RobotCoordsForeignDiv'
+export * from './RobotCoordsForeignObject'
+export * from './RobotCoordsText'
+export * from './RobotWorkSpace'
+export * from './SlotLabels'

package/src/hardware-sim/DeckConfigurator/AbsorbanceReaderFixture.tsx

@@ -0,0 +1,91 @@
+import { Icon } from '../../icons'
+import { Btn, Text } from '../../primitives'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  COLUMN_3_X_ADJUSTMENT,
+  CONFIG_STYLE_EDITABLE,
+  CONFIG_STYLE_READ_ONLY,
+  FIXTURE_HEIGHT,
+  STAGING_AREA_FIXTURE_WIDTH,
+  Y_ADJUSTMENT,
+  CONFIG_STYLE_SELECTED,
+} from './constants'
+
+import type {
+  CutoutFixtureId,
+  CutoutId,
+  DeckDefinition,
+} from '@opentrons/shared-data'
+
+interface AbsorbanceReaderFixtureProps {
+  deckDefinition: DeckDefinition
+  fixtureLocation: CutoutId
+  cutoutFixtureId: CutoutFixtureId
+  handleClickRemove?: (
+    fixtureLocation: CutoutId,
+    cutoutFixtureId: CutoutFixtureId
+  ) => void
+  selected?: boolean
+}
+
+const ABSORBANCE_READER_FIXTURE_DISPLAY_NAME = 'Absorbance'
+
+export function AbsorbanceReaderFixture(
+  props: AbsorbanceReaderFixtureProps
+): JSX.Element {
+  const {
+    deckDefinition,
+    handleClickRemove,
+    fixtureLocation,
+    cutoutFixtureId,
+    selected = false,
+  } = props
+
+  const cutoutDef = deckDefinition.locations.cutouts.find(
+    cutout => cutout.id === fixtureLocation
+  )
+
+  /**
+   * deck definition cutout position is the position of the single slot located within that cutout
+   * so, to get the position of the cutout itself we must add an adjustment to the slot position
+   * the adjustment for x is different for right side/left side
+   */
+  const [xSlotPosition = 0, ySlotPosition = 0] = cutoutDef?.position ?? []
+
+  const x = xSlotPosition + COLUMN_3_X_ADJUSTMENT
+
+  const y = ySlotPosition + Y_ADJUSTMENT
+
+  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
+  return (
+    <RobotCoordsForeignObject
+      width={STAGING_AREA_FIXTURE_WIDTH}
+      height={FIXTURE_HEIGHT}
+      x={x}
+      y={y}
+      flexProps={{ flex: '1' }}
+      foreignObjectProps={{ flex: '1' }}
+    >
+      <Btn
+        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
+        cursor={handleClickRemove != null ? 'pointer' : 'default'}
+        onClick={
+          handleClickRemove != null
+            ? () => {
+                handleClickRemove(fixtureLocation, cutoutFixtureId)
+              }
+            : () => {}
+        }
+      >
+        <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
+          {ABSORBANCE_READER_FIXTURE_DISPLAY_NAME}
+        </Text>
+        {handleClickRemove != null ? (
+          <Icon name="remove" color={COLORS.white} size="2rem" />
+        ) : null}
+      </Btn>
+    </RobotCoordsForeignObject>
+  )
+}