@charcoal-ui/react 3.6.0 → 3.8.0

package/src/components/Modal/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Modal Bottom Sheet 1`] = `
+exports[`Storybook Tests Modal BottomSheet 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -71,13 +71,19 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -130,13 +136,19 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
   height: 40px;
 }
 
-.c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled='false']:active,
 .c12:not(:disabled):not([aria-disabled]):focus,
-.c12[aria-disabled='false']:focus,
+.c12[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c12[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c12:not(:disabled):not([aria-disabled]):focus-visible,
 .c12[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -158,65 +170,6 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
 }
 
 .c13 {
-  width: -webkit-fill-available;
-  width: -moz-available;
-  width: stretch;
-  display: inline-grid;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  padding-right: 24px;
-  padding-left: 24px;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
-  height: 40px;
-}
-
-.c13:not(:disabled):not([aria-disabled]):active,
-.c13[aria-disabled='false']:active,
-.c13:not(:disabled):not([aria-disabled]):focus,
-.c13[aria-disabled='false']:focus,
-.c13:not(:disabled):not([aria-disabled]):focus-visible,
-.c13[aria-disabled='false']:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c13:not(:disabled):not([aria-disabled]):hover,
-.c13[aria-disabled='false']:hover {
-  color: var(--charcoal-text2-hover);
-  background-color: var(--charcoal-surface3-hover);
-}
-
-.c13:not(:disabled):not([aria-disabled]):active,
-.c13[aria-disabled='false']:active {
-  color: var(--charcoal-text2-press);
-  background-color: var(--charcoal-surface3-press);
-}
-
-.c13:disabled,
-.c13[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-}
-
-.c14 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -242,28 +195,34 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
-.c14:not(:disabled):not([aria-disabled]):hover,
-.c14[aria-disabled='false']:hover {
-  background-color: var( --charcoal-transparent-hover );
+.c13:not(:disabled):not([aria-disabled]):hover,
+.c13[aria-disabled='false']:hover {
+  background-color: var(--charcoal-transparent-hover);
 }
 
-.c14:not(:disabled):not([aria-disabled]):active,
-.c14[aria-disabled='false']:active {
-  background-color: var( --charcoal-transparent-press );
+.c13:not(:disabled):not([aria-disabled]):active,
+.c13[aria-disabled='false']:active {
+  background-color: var(--charcoal-transparent-press);
 }
 
-.c14:not(:disabled):not([aria-disabled]):focus,
-.c14[aria-disabled='false']:focus,
-.c14:not(:disabled):not([aria-disabled]):active,
-.c14[aria-disabled='false']:active,
-.c14:not(:disabled):not([aria-disabled]):focus-visible,
-.c14[aria-disabled='false']:focus-visible {
+.c13:not(:disabled):not([aria-disabled]):focus,
+.c13[aria-disabled='false']:focus {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c14:disabled,
-.c14[aria-disabled]:not([aria-disabled='false']) {
+.c13:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c13[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c13:not(:disabled):not([aria-disabled]):focus-visible,
+.c13[aria-disabled='false']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c13:disabled,
+.c13[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
@@ -304,7 +263,7 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
   background-color: var(--charcoal-surface4);
 }
 
-.c15 {
+.c14 {
   position: absolute;
   top: 8px;
   right: 8px;
@@ -313,13 +272,13 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
   transition: 0.2s color;
 }
 
-.c15:not(:disabled):not([aria-disabled]):hover,
-.c15[aria-disabled='false']:hover {
+.c14:not(:disabled):not([aria-disabled]):hover,
+.c14[aria-disabled='false']:hover {
   color: var(--charcoal-text3-hover);
 }
 
-.c15:not(:disabled):not([aria-disabled]):active,
-.c15[aria-disabled='false']:active {
+.c14:not(:disabled):not([aria-disabled]):active,
+.c14[aria-disabled='false']:active {
   color: var(--charcoal-text3-press);
 }
 
@@ -451,16 +410,24 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
     <div
       className="c2"
       onPointerDown={[Function]}
-      style={Object {}}
+      style={
+        Object {
+          "backgroundColor": "rgba(0, 0, 0, 0)",
+          "overflow": "hidden",
+        }
+      }
     >
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
-        style={Object {}}
+        style={
+          Object {
+            "transform": " translateY(100%)",
+          }
+        }
         tabIndex={-1}
       >
         <div
@@ -494,17 +461,10 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
             >
               削除する
             </button>
-            <button
-              className="c0 c13"
-              disabled={false}
-              onClick={[Function]}
-            >
-              キャンセル
-            </button>
           </div>
         </div>
         <button
-          className="c0 c14 c15"
+          className="c0 c13 c14"
           onClick={[Function]}
         >
           <pixiv-icon
@@ -517,7 +477,7 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
 </div>
 `;
 
-exports[`Storyshots Modal Default 1`] = `
+exports[`Storybook Tests Modal Default 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -588,13 +548,19 @@ exports[`Storyshots Modal Default 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -647,13 +613,19 @@ exports[`Storyshots Modal Default 1`] = `
   height: 40px;
 }
 
-.c25:not(:disabled):not([aria-disabled]):active,
-.c25[aria-disabled='false']:active,
 .c25:not(:disabled):not([aria-disabled]):focus,
-.c25[aria-disabled='false']:focus,
+.c25[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c25:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c25[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c25:not(:disabled):not([aria-disabled]):focus-visible,
 .c25[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -706,13 +678,19 @@ exports[`Storyshots Modal Default 1`] = `
   height: 40px;
 }
 
-.c26:not(:disabled):not([aria-disabled]):active,
-.c26[aria-disabled='false']:active,
 .c26:not(:disabled):not([aria-disabled]):focus,
-.c26[aria-disabled='false']:focus,
+.c26[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c26:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c26[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c26:not(:disabled):not([aria-disabled]):focus-visible,
 .c26[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -851,12 +829,13 @@ exports[`Storyshots Modal Default 1`] = `
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
   padding-right: 8px;
   padding-left: 8px;
   background-color: var(--charcoal-surface3);
   border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
+  -webkit-transition: 0.2s box-shadow,0.2s background-color;
+  transition: 0.2s box-shadow,0.2s background-color;
 }
 
 .c21:disabled,
@@ -865,37 +844,40 @@ exports[`Storyshots Modal Default 1`] = `
 }
 
 .c21:not(:disabled):not([aria-disabled]):focus,
-.c21[aria-disabled='false']:focus,
-.c21:not(:disabled):not([aria-disabled]):active,
-.c21[aria-disabled='false']:active,
+.c21[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c21:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c21[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c21:not(:disabled):not([aria-disabled]):focus-visible,
 .c21[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
+.c21:not(:disabled):not([aria-disabled]):hover,
+.c21[aria-disabled='false']:hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c21:not(:disabled):not([aria-disabled]):active,
+.c21[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c22 {
   text-align: left;
   font-size: 14px;
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text2);
-}
-
-.c22::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c22::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .c23 {
@@ -930,21 +912,27 @@ exports[`Storyshots Modal Default 1`] = `
 
 .c27:not(:disabled):not([aria-disabled]):hover,
 .c27[aria-disabled='false']:hover {
-  background-color: var( --charcoal-transparent-hover );
+  background-color: var(--charcoal-transparent-hover);
 }
 
 .c27:not(:disabled):not([aria-disabled]):active,
 .c27[aria-disabled='false']:active {
-  background-color: var( --charcoal-transparent-press );
+  background-color: var(--charcoal-transparent-press);
 }
 
 .c27:not(:disabled):not([aria-disabled]):focus,
-.c27[aria-disabled='false']:focus,
-.c27:not(:disabled):not([aria-disabled]):active,
-.c27[aria-disabled='false']:active,
+.c27[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c27[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c27:not(:disabled):not([aria-disabled]):focus-visible,
 .c27[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1103,12 +1091,6 @@ exports[`Storyshots Modal Default 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c17:not(:disabled):not([aria-disabled]):active,
-.c17 [aria-disabled='false']:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c17:focus-within {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
@@ -1220,7 +1202,6 @@ exports[`Storyshots Modal Default 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
@@ -1280,7 +1261,9 @@ exports[`Storyshots Modal Default 1`] = `
                     onChange={[Function]}
                     placeholder="Nagisa"
                     readOnly={false}
+                    required={false}
                     type="text"
+                    value=""
                   />
                 </div>
               </div>
@@ -1318,7 +1301,9 @@ exports[`Storyshots Modal Default 1`] = `
                     onChange={[Function]}
                     placeholder="Tokyo"
                     readOnly={false}
+                    required={false}
                     type="text"
+                    value=""
                   />
                 </div>
               </div>
@@ -1394,7 +1379,7 @@ exports[`Storyshots Modal Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Modal Full Bottom Sheet 1`] = `
+exports[`Storybook Tests Modal FullBottomSheet 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -1465,13 +1450,19 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1524,13 +1515,19 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
   height: 40px;
 }
 
-.c20:not(:disabled):not([aria-disabled]):active,
-.c20[aria-disabled='false']:active,
 .c20:not(:disabled):not([aria-disabled]):focus,
-.c20[aria-disabled='false']:focus,
+.c20[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c20:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c20[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c20:not(:disabled):not([aria-disabled]):focus-visible,
 .c20[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1583,13 +1580,19 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
   height: 40px;
 }
 
-.c21:not(:disabled):not([aria-disabled]):active,
-.c21[aria-disabled='false']:active,
 .c21:not(:disabled):not([aria-disabled]):focus,
-.c21[aria-disabled='false']:focus,
+.c21[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c21:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c21[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c21:not(:disabled):not([aria-disabled]):focus-visible,
 .c21[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1722,21 +1725,27 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
 
 .c22:not(:disabled):not([aria-disabled]):hover,
 .c22[aria-disabled='false']:hover {
-  background-color: var( --charcoal-transparent-hover );
+  background-color: var(--charcoal-transparent-hover);
 }
 
 .c22:not(:disabled):not([aria-disabled]):active,
 .c22[aria-disabled='false']:active {
-  background-color: var( --charcoal-transparent-press );
+  background-color: var(--charcoal-transparent-press);
 }
 
 .c22:not(:disabled):not([aria-disabled]):focus,
-.c22[aria-disabled='false']:focus,
-.c22:not(:disabled):not([aria-disabled]):active,
-.c22[aria-disabled='false']:active,
+.c22[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c22:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c22[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c22:not(:disabled):not([aria-disabled]):focus-visible,
 .c22[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1895,12 +1904,6 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
-.c17:not(:disabled):not([aria-disabled]):active,
-.c17 [aria-disabled='false']:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c17:focus-within {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
@@ -2016,16 +2019,24 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
     <div
       className="c2"
       onPointerDown={[Function]}
-      style={Object {}}
+      style={
+        Object {
+          "backgroundColor": "rgba(0, 0, 0, 0)",
+          "overflow": "hidden",
+        }
+      }
     >
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
-        style={Object {}}
+        style={
+          Object {
+            "transform": " translateY(100%)",
+          }
+        }
         tabIndex={-1}
       >
         <div
@@ -2081,7 +2092,9 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
                     onChange={[Function]}
                     placeholder="Nagisa"
                     readOnly={false}
+                    required={false}
                     type="text"
+                    value=""
                   />
                 </div>
               </div>
@@ -2119,7 +2132,9 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
                     onChange={[Function]}
                     placeholder="Tokyo"
                     readOnly={false}
+                    required={false}
                     type="text"
+                    value=""
                   />
                 </div>
               </div>
@@ -2158,7 +2173,7 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
 </div>
 `;
 
-exports[`Storyshots Modal Internal Scroll 1`] = `
+exports[`Storybook Tests Modal InternalScroll 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -2229,13 +2244,19 @@ exports[`Storyshots Modal Internal Scroll 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -2288,13 +2309,19 @@ exports[`Storyshots Modal Internal Scroll 1`] = `
   height: 40px;
 }
 
-.c11:not(:disabled):not([aria-disabled]):active,
-.c11[aria-disabled='false']:active,
 .c11:not(:disabled):not([aria-disabled]):focus,
-.c11[aria-disabled='false']:focus,
+.c11[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c11:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c11[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c11:not(:disabled):not([aria-disabled]):focus-visible,
 .c11[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -2464,7 +2491,6 @@ exports[`Storyshots Modal Internal Scroll 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
@@ -2513,7 +2539,7 @@ exports[`Storyshots Modal Internal Scroll 1`] = `
 </div>
 `;
 
-exports[`Storyshots Modal Not Dismmissable Story 1`] = `
+exports[`Storybook Tests Modal NotDismmissableStory 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -2584,13 +2610,19 @@ exports[`Storyshots Modal Not Dismmissable Story 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -2643,13 +2675,19 @@ exports[`Storyshots Modal Not Dismmissable Story 1`] = `
   height: 40px;
 }
 
-.c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled='false']:active,
 .c12:not(:disabled):not([aria-disabled]):focus,
-.c12[aria-disabled='false']:focus,
+.c12[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c12[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c12:not(:disabled):not([aria-disabled]):focus-visible,
 .c12[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -2832,7 +2870,6 @@ exports[`Storyshots Modal Not Dismmissable Story 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"