@wordpress/components 28.1.0 → 28.3.0

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -21,7 +21,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   margin-bottom: inherit;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -41,20 +41,22 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   position: relative;
   border-radius: 2px;
   padding-top: 0;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  cursor: pointer;
 }
 
-.emotion-5>* {
+.emotion-6>* {
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -64,7 +66,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   max-width: calc( 100% - 10px );
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
@@ -74,7 +76,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   font-weight: normal;
 }
 
-.emotion-11.emotion-11.emotion-11 {
+.emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -90,7 +92,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   white-space: nowrap;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -109,7 +111,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   width: 100%;
 }
 
-.emotion-15.emotion-15.emotion-15 {
+.emotion-16.emotion-16.emotion-16 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -118,13 +120,12 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
-  color: #1e1e1e;
+  cursor: inherit;
   display: block;
   font-family: inherit;
   margin: 0;
   width: 100%;
   max-width: none;
-  cursor: pointer;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
@@ -138,12 +139,12 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 }
 
 @media ( min-width: 600px ) {
-  .emotion-15.emotion-15.emotion-15 {
+  .emotion-16.emotion-16.emotion-16 {
     font-size: 13px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -158,7 +159,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   display: flex;
 }
 
-.emotion-20 {
+.emotion-21 {
   margin-bottom: 0;
   padding-right: calc(4px * 2);
   position: absolute;
@@ -166,13 +167,17 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   right: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   -webkit-margin-end: calc(4px * -1);
   margin-inline-end: calc(4px * -1);
   line-height: 0;
 }
 
-.emotion-24.emotion-24.emotion-24 {
+.emotion-23 path {
+  fill: currentColor;
+}
+
+.emotion-25.emotion-25.emotion-25 {
   box-sizing: border-box;
   border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
@@ -197,17 +202,17 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
         <div
-          class="components-flex-item emotion-7 emotion-8 emotion-6"
+          class="components-flex-item emotion-8 emotion-9 emotion-7"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           <label
-            class="components-truncate components-text components-input-control__label emotion-10 emotion-11 emotion-6"
+            class="components-truncate components-text components-input-control__label emotion-11 emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="Text"
             for="inspector-select-control-3"
@@ -216,10 +221,10 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
           </label>
         </div>
         <div
-          class="components-input-control__container emotion-13 emotion-14"
+          class="components-input-control__container emotion-14 emotion-15"
         >
           <select
-            class="components-select-control__input emotion-15 emotion-16"
+            class="components-select-control__input emotion-16 emotion-17"
             id="inspector-select-control-3"
           >
             <option
@@ -244,15 +249,15 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
             </option>
           </select>
           <span
-            class="components-input-control__suffix emotion-17 emotion-18"
+            class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-19 emotion-20 emotion-6"
+              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
               <div
-                class="emotion-22 emotion-23"
+                class="emotion-23 emotion-24"
               >
                 <svg
                   aria-hidden="true"
@@ -271,7 +276,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
           </span>
           <div
             aria-hidden="true"
-            class="components-input-control__backdrop emotion-24 emotion-25"
+            class="components-input-control__backdrop emotion-25 emotion-26"
           />
         </div>
       </div>
@@ -301,7 +306,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   margin-bottom: inherit;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -321,20 +326,22 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   position: relative;
   border-radius: 2px;
   padding-top: 0;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  cursor: pointer;
 }
 
-.emotion-5>* {
+.emotion-6>* {
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -344,7 +351,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   max-width: calc( 100% - 10px );
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
@@ -354,7 +361,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   font-weight: normal;
 }
 
-.emotion-11.emotion-11.emotion-11 {
+.emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -370,7 +377,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   white-space: nowrap;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -389,7 +396,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   width: 100%;
 }
 
-.emotion-15.emotion-15.emotion-15 {
+.emotion-16.emotion-16.emotion-16 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -398,13 +405,12 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
-  color: #1e1e1e;
+  cursor: inherit;
   display: block;
   font-family: inherit;
   margin: 0;
   width: 100%;
   max-width: none;
-  cursor: pointer;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
@@ -418,12 +424,12 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 }
 
 @media ( min-width: 600px ) {
-  .emotion-15.emotion-15.emotion-15 {
+  .emotion-16.emotion-16.emotion-16 {
     font-size: 13px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -438,7 +444,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   display: flex;
 }
 
-.emotion-20 {
+.emotion-21 {
   margin-bottom: 0;
   padding-right: calc(4px * 2);
   position: absolute;
@@ -446,13 +452,17 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   right: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   -webkit-margin-end: calc(4px * -1);
   margin-inline-end: calc(4px * -1);
   line-height: 0;
 }
 
-.emotion-24.emotion-24.emotion-24 {
+.emotion-23 path {
+  fill: currentColor;
+}
+
+.emotion-25.emotion-25.emotion-25 {
   box-sizing: border-box;
   border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
@@ -477,17 +487,17 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
         <div
-          class="components-flex-item emotion-7 emotion-8 emotion-6"
+          class="components-flex-item emotion-8 emotion-9 emotion-7"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           <label
-            class="components-truncate components-text components-input-control__label emotion-10 emotion-11 emotion-6"
+            class="components-truncate components-text components-input-control__label emotion-11 emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="Text"
             for="inspector-select-control-0"
@@ -496,10 +506,10 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
           </label>
         </div>
         <div
-          class="components-input-control__container emotion-13 emotion-14"
+          class="components-input-control__container emotion-14 emotion-15"
         >
           <select
-            class="components-select-control__input emotion-15 emotion-16"
+            class="components-select-control__input emotion-16 emotion-17"
             id="inspector-select-control-0"
           >
             <option
@@ -534,15 +544,15 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
             </option>
           </select>
           <span
-            class="components-input-control__suffix emotion-17 emotion-18"
+            class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-19 emotion-20 emotion-6"
+              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
               <div
-                class="emotion-22 emotion-23"
+                class="emotion-23 emotion-24"
               >
                 <svg
                   aria-hidden="true"
@@ -561,7 +571,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
           </span>
           <div
             aria-hidden="true"
-            class="components-input-control__backdrop emotion-24 emotion-25"
+            class="components-input-control__backdrop emotion-25 emotion-26"
           />
         </div>
       </div>
@@ -591,7 +601,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   margin-bottom: inherit;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -611,20 +621,22 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   position: relative;
   border-radius: 2px;
   padding-top: 0;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  cursor: pointer;
 }
 
-.emotion-5>* {
+.emotion-6>* {
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -634,7 +646,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   max-width: calc( 100% - 10px );
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
@@ -644,7 +656,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   font-weight: normal;
 }
 
-.emotion-11.emotion-11.emotion-11 {
+.emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -660,7 +672,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   white-space: nowrap;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -679,7 +691,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   width: 100%;
 }
 
-.emotion-15.emotion-15.emotion-15 {
+.emotion-16.emotion-16.emotion-16 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -688,13 +700,12 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
-  color: #1e1e1e;
+  cursor: inherit;
   display: block;
   font-family: inherit;
   margin: 0;
   width: 100%;
   max-width: none;
-  cursor: pointer;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
@@ -708,12 +719,12 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 }
 
 @media ( min-width: 600px ) {
-  .emotion-15.emotion-15.emotion-15 {
+  .emotion-16.emotion-16.emotion-16 {
     font-size: 13px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -728,7 +739,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   display: flex;
 }
 
-.emotion-20 {
+.emotion-21 {
   margin-bottom: 0;
   padding-right: calc(4px * 2);
   position: absolute;
@@ -736,13 +747,17 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   right: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   -webkit-margin-end: calc(4px * -1);
   margin-inline-end: calc(4px * -1);
   line-height: 0;
 }
 
-.emotion-24.emotion-24.emotion-24 {
+.emotion-23 path {
+  fill: currentColor;
+}
+
+.emotion-25.emotion-25.emotion-25 {
   box-sizing: border-box;
   border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
@@ -767,17 +782,17 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
         <div
-          class="components-flex-item emotion-7 emotion-8 emotion-6"
+          class="components-flex-item emotion-8 emotion-9 emotion-7"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           <label
-            class="components-truncate components-text components-input-control__label emotion-10 emotion-11 emotion-6"
+            class="components-truncate components-text components-input-control__label emotion-11 emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="Text"
             for="inspector-select-control-2"
@@ -798,10 +813,10 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
           </label>
         </div>
         <div
-          class="components-input-control__container emotion-13 emotion-14"
+          class="components-input-control__container emotion-14 emotion-15"
         >
           <select
-            class="components-select-control__input emotion-15 emotion-16"
+            class="components-select-control__input emotion-16 emotion-17"
             id="inspector-select-control-2"
           >
             <option
@@ -836,15 +851,15 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
             </option>
           </select>
           <span
-            class="components-input-control__suffix emotion-17 emotion-18"
+            class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-19 emotion-20 emotion-6"
+              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
               <div
-                class="emotion-22 emotion-23"
+                class="emotion-23 emotion-24"
               >
                 <svg
                   aria-hidden="true"
@@ -863,7 +878,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
           </span>
           <div
             aria-hidden="true"
-            class="components-input-control__backdrop emotion-24 emotion-25"
+            class="components-input-control__backdrop emotion-25 emotion-26"
           />
         </div>
       </div>
@@ -893,7 +908,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   margin-bottom: inherit;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -913,20 +928,22 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   position: relative;
   border-radius: 2px;
   padding-top: 0;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  cursor: pointer;
 }
 
-.emotion-5>* {
+.emotion-6>* {
   min-height: 0;
 }
 
-.emotion-5:focus-within:not( :has( :is( .em5sgkm7, .emotion-18 ):focus-within ) ) .emotion-25 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.emotion-8 {
+.emotion-9 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -936,7 +953,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   max-width: calc( 100% - 10px );
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
@@ -946,7 +963,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   font-weight: normal;
 }
 
-.emotion-11.emotion-11.emotion-11 {
+.emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -962,7 +979,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   white-space: nowrap;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -981,7 +998,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   width: 100%;
 }
 
-.emotion-15.emotion-15.emotion-15 {
+.emotion-16.emotion-16.emotion-16 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -990,13 +1007,12 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
-  color: #1e1e1e;
+  cursor: inherit;
   display: block;
   font-family: inherit;
   margin: 0;
   width: 100%;
   max-width: none;
-  cursor: pointer;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
@@ -1010,12 +1026,12 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 }
 
 @media ( min-width: 600px ) {
-  .emotion-15.emotion-15.emotion-15 {
+  .emotion-16.emotion-16.emotion-16 {
     font-size: 13px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1030,7 +1046,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   display: flex;
 }
 
-.emotion-20 {
+.emotion-21 {
   margin-bottom: 0;
   padding-right: calc(4px * 2);
   position: absolute;
@@ -1038,13 +1054,17 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   right: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   -webkit-margin-end: calc(4px * -1);
   margin-inline-end: calc(4px * -1);
   line-height: 0;
 }
 
-.emotion-24.emotion-24.emotion-24 {
+.emotion-23 path {
+  fill: currentColor;
+}
+
+.emotion-25.emotion-25.emotion-25 {
   box-sizing: border-box;
   border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
@@ -1069,17 +1089,17 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
         <div
-          class="components-flex-item emotion-7 emotion-8 emotion-6"
+          class="components-flex-item emotion-8 emotion-9 emotion-7"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           <label
-            class="components-truncate components-text components-input-control__label emotion-10 emotion-11 emotion-6"
+            class="components-truncate components-text components-input-control__label emotion-11 emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="Text"
             for="inspector-select-control-1"
@@ -1100,10 +1120,10 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
           </label>
         </div>
         <div
-          class="components-input-control__container emotion-13 emotion-14"
+          class="components-input-control__container emotion-14 emotion-15"
         >
           <select
-            class="components-select-control__input emotion-15 emotion-16"
+            class="components-select-control__input emotion-16 emotion-17"
             id="inspector-select-control-1"
           >
             <option
@@ -1138,15 +1158,15 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
             </option>
           </select>
           <span
-            class="components-input-control__suffix emotion-17 emotion-18"
+            class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-19 emotion-20 emotion-6"
+              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
               <div
-                class="emotion-22 emotion-23"
+                class="emotion-23 emotion-24"
               >
                 <svg
                   aria-hidden="true"
@@ -1165,7 +1185,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
           </span>
           <div
             aria-hidden="true"
-            class="components-input-control__backdrop emotion-24 emotion-25"
+            class="components-input-control__backdrop emotion-25 emotion-26"
           />
         </div>
       </div>