diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 79a822a45..c0c8b558a 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -1437,7 +1437,7 @@ exports[`Storyshots Generics / AvailabilityCard default 1`] = `
         class="Hr-root-id"
       />
       <div
-        class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+        class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
       >
         <div
           aria-label="isAvailableForPurchase"
@@ -1556,7 +1556,7 @@ exports[`Storyshots Generics / AvailabilityCard default 1`] = `
         </div>
       </div>
       <div
-        class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+        class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
       >
         Set availability date
       </div>
@@ -47605,7 +47605,7 @@ Ctrl + K"
                   </div>
                 </div>
                 <div
-                  class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                  class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
                 >
                   Set publication date
                 </div>
@@ -51453,7 +51453,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -52299,7 +52299,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -53146,7 +53146,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -113561,7 +113561,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -114385,7 +114385,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -115016,7 +115016,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -138280,7 +138280,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -138288,7 +138288,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -138411,7 +138411,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
@@ -139561,7 +139561,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -139569,7 +139569,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -139688,7 +139688,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
@@ -140993,7 +140993,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -141001,7 +141001,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -141120,7 +141120,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
@@ -147655,7 +147655,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -147774,45 +147774,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <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>
               <hr
                 class="Hr-root-id"
               />
@@ -149938,7 +149903,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -150057,45 +150022,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <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>
               <hr
                 class="Hr-root-id"
               />
@@ -152448,7 +152378,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -152567,45 +152497,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <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>
               <hr
                 class="Hr-root-id"
               />
@@ -154895,7 +154790,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -155014,45 +154909,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <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>
               <hr
                 class="Hr-root-id"
               />
@@ -157539,7 +157399,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -157658,45 +157518,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <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>
               <hr
                 class="Hr-root-id"
               />
@@ -160081,7 +159906,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -160200,45 +160025,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <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>
               <hr
                 class="Hr-root-id"
               />
@@ -161731,7 +161521,7 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set publication date
               </div>
@@ -164003,7 +163793,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -164122,45 +163912,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <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>
               <hr
                 class="Hr-root-id"
               />
@@ -166647,7 +166402,7 @@ Ctrl + K"
                 class="Hr-root-id"
               />
               <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
+                class="MuiFormControl-root-id RadioSwitchField-formControl-id VisibilityCard-switchField-id"
               >
                 <div
                   aria-label="isAvailableForPurchase"
@@ -166766,45 +166521,10 @@ Ctrl + K"
                 </div>
               </div>
               <div
-                class="MuiTypography-root-id VisibilityCard-setPublicationDate-id MuiTypography-body1-id"
+                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
               >
                 Set availability date
               </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id VisibilityCard-date-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                  data-shrink="true"
-                >
-                  Set available on
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="availableForPurchase"
-                    type="date"
-                    value=""
-                  />
-                  <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>
               <hr
                 class="Hr-root-id"
               />