diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index d110e1f55..7d474c182 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -64672,6 +64672,281 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                 >
                   No Stock
                 </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
+                >
+                  <div
+                    class="OrderFulfillPage-colQuantityContent-id"
+                  >
+                    <div
+                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                    >
+                      <div
+                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                      >
+                        <input
+                          aria-invalid="false"
+                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                          max="760"
+                          min="0"
+                          style="text-align:right"
+                          type="number"
+                          value="0"
+                        />
+                        <fieldset
+                          aria-hidden="true"
+                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                          style="padding-left:8px"
+                        >
+                          <legend
+                            class="PrivateNotchedOutline-legend-id"
+                            style="width:0"
+                          >
+                            <span>
+                              ​
+                            </span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    </div>
+                    <div
+                      class="OrderFulfillPage-remainingQuantity-id"
+                    >
+                      / 758
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
+                >
+                  <div
+                    class="OrderFulfillPage-colQuantityContent-id"
+                  >
+                    <div
+                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                    >
+                      <div
+                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                      >
+                        <input
+                          aria-invalid="false"
+                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                          max="760"
+                          min="0"
+                          style="text-align:right"
+                          type="number"
+                          value="0"
+                        />
+                        <fieldset
+                          aria-hidden="true"
+                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                          style="padding-left:8px"
+                        >
+                          <legend
+                            class="PrivateNotchedOutline-legend-id"
+                            style="width:0"
+                          >
+                            <span>
+                              ​
+                            </span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    </div>
+                    <div
+                      class="OrderFulfillPage-remainingQuantity-id"
+                    >
+                      / 727
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
+                >
+                  <div
+                    class="OrderFulfillPage-colQuantityContent-id"
+                  >
+                    <div
+                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                    >
+                      <div
+                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                      >
+                        <input
+                          aria-invalid="false"
+                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                          max="760"
+                          min="0"
+                          style="text-align:right"
+                          type="number"
+                          value="0"
+                        />
+                        <fieldset
+                          aria-hidden="true"
+                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                          style="padding-left:8px"
+                        >
+                          <legend
+                            class="PrivateNotchedOutline-legend-id"
+                            style="width:0"
+                          >
+                            <span>
+                              ​
+                            </span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    </div>
+                    <div
+                      class="OrderFulfillPage-remainingQuantity-id"
+                    >
+                      / 756
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"
+                >
+                  <span
+                    class=""
+                  >
+                    0
+                  </span>
+                   / 4
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root-id"
+              >
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id"
+                >
+                  <div
+                    class="TableCellAvatar-content-id"
+                  >
+                    <div
+                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
+                    >
+                      <img
+                        class="MuiAvatar-img-id"
+                        src="[object Object]"
+                      />
+                    </div>
+                    <div
+                      class="TableCellAvatar-children-id"
+                    >
+                      Orange Juice
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                      >
+                        5l
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colSku-id"
+                >
+                  998323584
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
+                >
+                  <div
+                    class="OrderFulfillPage-colQuantityContent-id"
+                  >
+                    <div
+                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                    >
+                      <div
+                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                      >
+                        <input
+                          aria-invalid="false"
+                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                          max="587"
+                          min="0"
+                          style="text-align:right"
+                          type="number"
+                          value="0"
+                        />
+                        <fieldset
+                          aria-hidden="true"
+                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                          style="padding-left:8px"
+                        >
+                          <legend
+                            class="PrivateNotchedOutline-legend-id"
+                            style="width:0"
+                          >
+                            <span>
+                              ​
+                            </span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    </div>
+                    <div
+                      class="OrderFulfillPage-remainingQuantity-id"
+                    >
+                      / 587
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
+                >
+                  No Stock
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
+                >
+                  <div
+                    class="OrderFulfillPage-colQuantityContent-id"
+                  >
+                    <div
+                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                    >
+                      <div
+                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
+                      >
+                        <input
+                          aria-invalid="false"
+                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                          max="587"
+                          min="0"
+                          style="text-align:right"
+                          type="number"
+                          value="0"
+                        />
+                        <fieldset
+                          aria-hidden="true"
+                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                          style="padding-left:8px"
+                        >
+                          <legend
+                            class="PrivateNotchedOutline-legend-id"
+                            style="width:0"
+                          >
+                            <span>
+                              ​
+                            </span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    </div>
+                    <div
+                      class="OrderFulfillPage-remainingQuantity-id"
+                    >
+                      / 586
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
+                >
+                  No Stock
+                </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"
                 >
@@ -65307,281 +65582,6 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                 >
                   No Stock
                 </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
-                >
-                  <div
-                    class="OrderFulfillPage-colQuantityContent-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
-                          max="760"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          style="padding-left:8px"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legend-id"
-                            style="width:0"
-                          >
-                            <span>
-                              ​
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 758
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
-                >
-                  <div
-                    class="OrderFulfillPage-colQuantityContent-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
-                          max="760"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          style="padding-left:8px"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legend-id"
-                            style="width:0"
-                          >
-                            <span>
-                              ​
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 727
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
-                >
-                  <div
-                    class="OrderFulfillPage-colQuantityContent-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
-                          max="760"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          style="padding-left:8px"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legend-id"
-                            style="width:0"
-                          >
-                            <span>
-                              ​
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 756
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"
-                >
-                  <span
-                    class=""
-                  >
-                    0
-                  </span>
-                   / 4
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id"
-                >
-                  <div
-                    class="TableCellAvatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="[object Object]"
-                      />
-                    </div>
-                    <div
-                      class="TableCellAvatar-children-id"
-                    >
-                      Orange Juice
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        5l
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colSku-id"
-                >
-                  998323584
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
-                >
-                  <div
-                    class="OrderFulfillPage-colQuantityContent-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
-                          max="587"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          style="padding-left:8px"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legend-id"
-                            style="width:0"
-                          >
-                            <span>
-                              ​
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 587
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
-                >
-                  No Stock
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
-                >
-                  <div
-                    class="OrderFulfillPage-colQuantityContent-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
-                          max="587"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          style="padding-left:8px"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legend-id"
-                            style="width:0"
-                          >
-                            <span>
-                              ​
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 586
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
-                >
-                  No Stock
-                </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
@@ -99289,7 +99289,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
               >
                 <legend
                   class="PrivateNotchedOutline-legend-id"
-                  style="width:143px"
+                  style="width:0"
                 >
                   <span>
                     ​
@@ -101232,7 +101232,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
               >
                 <legend
                   class="PrivateNotchedOutline-legend-id"
-                  style="width:0"
+                  style="width:143px"
                 >
                   <span>
                     ​
@@ -129083,7 +129083,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0.01px"
+                        style="width:0"
                       >
                         <span>
                           ​
@@ -129892,7 +129892,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0.01px"
+                        style="width:0"
                       >
                         <span>
                           ​
@@ -139278,7 +139278,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0"
+                        style="width:0.01px"
                       >
                         <span>
                           ​
@@ -140073,7 +140073,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0"
+                        style="width:0.01px"
                       >
                         <span>
                           ​