@wordpress/components 31.0.1-next.6deb34194.0 → 31.0.1-next.738bb1424.0

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

@@ -1,1183 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DimensionControl rendering renders with custom sizes 1`] = `
-.emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-.emotion-0 *,
-.emotion-0 *::before,
-.emotion-0 *::after {
-  box-sizing: inherit;
-}
-
-.components-panel__row .emotion-2 {
-  margin-bottom: inherit;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  box-sizing: border-box;
-  position: relative;
-  border-radius: 2px;
-  padding-top: 0;
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  cursor: pointer;
-}
-
-.emotion-6>* {
-  min-height: 0;
-}
-
-.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .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-9 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  display: block;
-  max-width: calc( 100% - 10px );
-}
-
-.emotion-12 {
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  line-height: 1.4;
-  margin: 0;
-  text-wrap: balance;
-  text-wrap: pretty;
-  font-size: calc((13 / 13) * 13px);
-  font-weight: normal;
-}
-
-.emotion-12.emotion-12.emotion-12 {
-  font-size: 11px;
-  font-weight: 499;
-  line-height: 1.4;
-  text-transform: uppercase;
-  box-sizing: border-box;
-  display: block;
-  padding-top: 0;
-  padding-bottom: 0;
-  max-width: 100%;
-  z-index: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.emotion-14 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: border-box;
-  border-radius: inherit;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-  background-color: var(--wp-components-color-background, #fff);
-  width: 100%;
-}
-
-.emotion-16.emotion-16.emotion-16 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background: transparent;
-  box-sizing: border-box;
-  border: none;
-  box-shadow: none!important;
-  color: currentColor;
-  cursor: inherit;
-  display: block;
-  font-family: inherit;
-  margin: 0;
-  width: 100%;
-  max-width: none;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: 16px;
-  height: 40px;
-  min-height: 40px;
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: 12px;
-  padding-right: 30px;
-  overflow: hidden;
-}
-
-@media ( min-width: 600px ) {
-  .emotion-16.emotion-16.emotion-16 {
-    font-size: 13px;
-  }
-}
-
-.emotion-18 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-21 {
-  -webkit-padding-end: 12px;
-  padding-inline-end: 12px;
-  position: absolute;
-  pointer-events: none;
-  right: 0;
-}
-
-.emotion-23 {
-  -webkit-margin-end: calc(4px * -1);
-  margin-inline-end: calc(4px * -1);
-  line-height: 0;
-}
-
-.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;
-  border-style: solid;
-  border-width: 1px;
-  bottom: 0;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding-left: 2px;
-}
-
-<div>
-  <div
-    class="components-base-control components-select-control block-editor-dimension-control emotion-0 emotion-1"
-  >
-    <div
-      class="components-base-control__field emotion-2 emotion-3"
-    >
-      <div
-        class="components-flex components-input-base emotion-4 emotion-5 emotion-6 emotion-7"
-        data-wp-c16t="true"
-        data-wp-component="InputBase"
-      >
-        <div
-          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-11 emotion-12 emotion-7"
-            data-wp-c16t="true"
-            data-wp-component="Text"
-            for="inspector-select-control-3"
-          >
-            Custom Dimension
-          </label>
-        </div>
-        <div
-          class="components-input-control__container emotion-14 emotion-15"
-        >
-          <select
-            class="components-select-control__input emotion-16 emotion-17"
-            id="inspector-select-control-3"
-          >
-            <option
-              value=""
-            >
-              Default
-            </option>
-            <option
-              value="mini"
-            >
-              Mini
-            </option>
-            <option
-              value="middle"
-            >
-              Middle
-            </option>
-            <option
-              value="giant"
-            >
-              Giant
-            </option>
-          </select>
-          <span
-            class="components-input-control__suffix emotion-18 emotion-19"
-          >
-            <div
-              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
-              data-wp-c16t="true"
-              data-wp-component="InputControlSuffixWrapper"
-            >
-              <div
-                class="emotion-23 emotion-24"
-              >
-                <svg
-                  aria-hidden="true"
-                  focusable="false"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  width="18"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-                  />
-                </svg>
-              </div>
-            </div>
-          </span>
-          <div
-            aria-hidden="true"
-            class="components-input-control__backdrop emotion-25 emotion-26"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DimensionControl rendering renders with defaults 1`] = `
-.emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-.emotion-0 *,
-.emotion-0 *::before,
-.emotion-0 *::after {
-  box-sizing: inherit;
-}
-
-.components-panel__row .emotion-2 {
-  margin-bottom: inherit;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  box-sizing: border-box;
-  position: relative;
-  border-radius: 2px;
-  padding-top: 0;
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  cursor: pointer;
-}
-
-.emotion-6>* {
-  min-height: 0;
-}
-
-.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .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-9 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  display: block;
-  max-width: calc( 100% - 10px );
-}
-
-.emotion-12 {
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  line-height: 1.4;
-  margin: 0;
-  text-wrap: balance;
-  text-wrap: pretty;
-  font-size: calc((13 / 13) * 13px);
-  font-weight: normal;
-}
-
-.emotion-12.emotion-12.emotion-12 {
-  font-size: 11px;
-  font-weight: 499;
-  line-height: 1.4;
-  text-transform: uppercase;
-  box-sizing: border-box;
-  display: block;
-  padding-top: 0;
-  padding-bottom: 0;
-  max-width: 100%;
-  z-index: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.emotion-14 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: border-box;
-  border-radius: inherit;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-  background-color: var(--wp-components-color-background, #fff);
-  width: 100%;
-}
-
-.emotion-16.emotion-16.emotion-16 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background: transparent;
-  box-sizing: border-box;
-  border: none;
-  box-shadow: none!important;
-  color: currentColor;
-  cursor: inherit;
-  display: block;
-  font-family: inherit;
-  margin: 0;
-  width: 100%;
-  max-width: none;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: 16px;
-  height: 40px;
-  min-height: 40px;
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: 12px;
-  padding-right: 30px;
-  overflow: hidden;
-}
-
-@media ( min-width: 600px ) {
-  .emotion-16.emotion-16.emotion-16 {
-    font-size: 13px;
-  }
-}
-
-.emotion-18 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-21 {
-  -webkit-padding-end: 12px;
-  padding-inline-end: 12px;
-  position: absolute;
-  pointer-events: none;
-  right: 0;
-}
-
-.emotion-23 {
-  -webkit-margin-end: calc(4px * -1);
-  margin-inline-end: calc(4px * -1);
-  line-height: 0;
-}
-
-.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;
-  border-style: solid;
-  border-width: 1px;
-  bottom: 0;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding-left: 2px;
-}
-
-<div>
-  <div
-    class="components-base-control components-select-control block-editor-dimension-control emotion-0 emotion-1"
-  >
-    <div
-      class="components-base-control__field emotion-2 emotion-3"
-    >
-      <div
-        class="components-flex components-input-base emotion-4 emotion-5 emotion-6 emotion-7"
-        data-wp-c16t="true"
-        data-wp-component="InputBase"
-      >
-        <div
-          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-11 emotion-12 emotion-7"
-            data-wp-c16t="true"
-            data-wp-component="Text"
-            for="inspector-select-control-0"
-          >
-            Padding
-          </label>
-        </div>
-        <div
-          class="components-input-control__container emotion-14 emotion-15"
-        >
-          <select
-            class="components-select-control__input emotion-16 emotion-17"
-            id="inspector-select-control-0"
-          >
-            <option
-              value=""
-            >
-              Default
-            </option>
-            <option
-              value="none"
-            >
-              None
-            </option>
-            <option
-              value="small"
-            >
-              Small
-            </option>
-            <option
-              value="medium"
-            >
-              Medium
-            </option>
-            <option
-              value="large"
-            >
-              Large
-            </option>
-            <option
-              value="xlarge"
-            >
-              Extra Large
-            </option>
-          </select>
-          <span
-            class="components-input-control__suffix emotion-18 emotion-19"
-          >
-            <div
-              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
-              data-wp-c16t="true"
-              data-wp-component="InputControlSuffixWrapper"
-            >
-              <div
-                class="emotion-23 emotion-24"
-              >
-                <svg
-                  aria-hidden="true"
-                  focusable="false"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  width="18"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-                  />
-                </svg>
-              </div>
-            </div>
-          </span>
-          <div
-            aria-hidden="true"
-            class="components-input-control__backdrop emotion-25 emotion-26"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DimensionControl rendering renders with icon and custom icon label 1`] = `
-.emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-.emotion-0 *,
-.emotion-0 *::before,
-.emotion-0 *::after {
-  box-sizing: inherit;
-}
-
-.components-panel__row .emotion-2 {
-  margin-bottom: inherit;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  box-sizing: border-box;
-  position: relative;
-  border-radius: 2px;
-  padding-top: 0;
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  cursor: pointer;
-}
-
-.emotion-6>* {
-  min-height: 0;
-}
-
-.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .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-9 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  display: block;
-  max-width: calc( 100% - 10px );
-}
-
-.emotion-12 {
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  line-height: 1.4;
-  margin: 0;
-  text-wrap: balance;
-  text-wrap: pretty;
-  font-size: calc((13 / 13) * 13px);
-  font-weight: normal;
-}
-
-.emotion-12.emotion-12.emotion-12 {
-  font-size: 11px;
-  font-weight: 499;
-  line-height: 1.4;
-  text-transform: uppercase;
-  box-sizing: border-box;
-  display: block;
-  padding-top: 0;
-  padding-bottom: 0;
-  max-width: 100%;
-  z-index: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.emotion-14 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: border-box;
-  border-radius: inherit;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-  background-color: var(--wp-components-color-background, #fff);
-  width: 100%;
-}
-
-.emotion-16.emotion-16.emotion-16 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background: transparent;
-  box-sizing: border-box;
-  border: none;
-  box-shadow: none!important;
-  color: currentColor;
-  cursor: inherit;
-  display: block;
-  font-family: inherit;
-  margin: 0;
-  width: 100%;
-  max-width: none;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: 16px;
-  height: 40px;
-  min-height: 40px;
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: 12px;
-  padding-right: 30px;
-  overflow: hidden;
-}
-
-@media ( min-width: 600px ) {
-  .emotion-16.emotion-16.emotion-16 {
-    font-size: 13px;
-  }
-}
-
-.emotion-18 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-21 {
-  -webkit-padding-end: 12px;
-  padding-inline-end: 12px;
-  position: absolute;
-  pointer-events: none;
-  right: 0;
-}
-
-.emotion-23 {
-  -webkit-margin-end: calc(4px * -1);
-  margin-inline-end: calc(4px * -1);
-  line-height: 0;
-}
-
-.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;
-  border-style: solid;
-  border-width: 1px;
-  bottom: 0;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding-left: 2px;
-}
-
-<div>
-  <div
-    class="components-base-control components-select-control block-editor-dimension-control emotion-0 emotion-1"
-  >
-    <div
-      class="components-base-control__field emotion-2 emotion-3"
-    >
-      <div
-        class="components-flex components-input-base emotion-4 emotion-5 emotion-6 emotion-7"
-        data-wp-c16t="true"
-        data-wp-component="InputBase"
-      >
-        <div
-          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-11 emotion-12 emotion-7"
-            data-wp-c16t="true"
-            data-wp-component="Text"
-            for="inspector-select-control-2"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
-              />
-            </svg>
-            Margin
-          </label>
-        </div>
-        <div
-          class="components-input-control__container emotion-14 emotion-15"
-        >
-          <select
-            class="components-select-control__input emotion-16 emotion-17"
-            id="inspector-select-control-2"
-          >
-            <option
-              value=""
-            >
-              Default
-            </option>
-            <option
-              value="none"
-            >
-              None
-            </option>
-            <option
-              value="small"
-            >
-              Small
-            </option>
-            <option
-              value="medium"
-            >
-              Medium
-            </option>
-            <option
-              value="large"
-            >
-              Large
-            </option>
-            <option
-              value="xlarge"
-            >
-              Extra Large
-            </option>
-          </select>
-          <span
-            class="components-input-control__suffix emotion-18 emotion-19"
-          >
-            <div
-              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
-              data-wp-c16t="true"
-              data-wp-component="InputControlSuffixWrapper"
-            >
-              <div
-                class="emotion-23 emotion-24"
-              >
-                <svg
-                  aria-hidden="true"
-                  focusable="false"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  width="18"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-                  />
-                </svg>
-              </div>
-            </div>
-          </span>
-          <div
-            aria-hidden="true"
-            class="components-input-control__backdrop emotion-25 emotion-26"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DimensionControl rendering renders with icon and default icon label 1`] = `
-.emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-.emotion-0 *,
-.emotion-0 *::before,
-.emotion-0 *::after {
-  box-sizing: inherit;
-}
-
-.components-panel__row .emotion-2 {
-  margin-bottom: inherit;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  box-sizing: border-box;
-  position: relative;
-  border-radius: 2px;
-  padding-top: 0;
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  cursor: pointer;
-}
-
-.emotion-6>* {
-  min-height: 0;
-}
-
-.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .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-9 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  display: block;
-  max-width: calc( 100% - 10px );
-}
-
-.emotion-12 {
-  color: var(--wp-components-color-foreground, #1e1e1e);
-  line-height: 1.4;
-  margin: 0;
-  text-wrap: balance;
-  text-wrap: pretty;
-  font-size: calc((13 / 13) * 13px);
-  font-weight: normal;
-}
-
-.emotion-12.emotion-12.emotion-12 {
-  font-size: 11px;
-  font-weight: 499;
-  line-height: 1.4;
-  text-transform: uppercase;
-  box-sizing: border-box;
-  display: block;
-  padding-top: 0;
-  padding-bottom: 0;
-  max-width: 100%;
-  z-index: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.emotion-14 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  box-sizing: border-box;
-  border-radius: inherit;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-  background-color: var(--wp-components-color-background, #fff);
-  width: 100%;
-}
-
-.emotion-16.emotion-16.emotion-16 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background: transparent;
-  box-sizing: border-box;
-  border: none;
-  box-shadow: none!important;
-  color: currentColor;
-  cursor: inherit;
-  display: block;
-  font-family: inherit;
-  margin: 0;
-  width: 100%;
-  max-width: none;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: 16px;
-  height: 40px;
-  min-height: 40px;
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: 12px;
-  padding-right: 30px;
-  overflow: hidden;
-}
-
-@media ( min-width: 600px ) {
-  .emotion-16.emotion-16.emotion-16 {
-    font-size: 13px;
-  }
-}
-
-.emotion-18 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-21 {
-  -webkit-padding-end: 12px;
-  padding-inline-end: 12px;
-  position: absolute;
-  pointer-events: none;
-  right: 0;
-}
-
-.emotion-23 {
-  -webkit-margin-end: calc(4px * -1);
-  margin-inline-end: calc(4px * -1);
-  line-height: 0;
-}
-
-.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;
-  border-style: solid;
-  border-width: 1px;
-  bottom: 0;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding-left: 2px;
-}
-
-<div>
-  <div
-    class="components-base-control components-select-control block-editor-dimension-control emotion-0 emotion-1"
-  >
-    <div
-      class="components-base-control__field emotion-2 emotion-3"
-    >
-      <div
-        class="components-flex components-input-base emotion-4 emotion-5 emotion-6 emotion-7"
-        data-wp-c16t="true"
-        data-wp-component="InputBase"
-      >
-        <div
-          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-11 emotion-12 emotion-7"
-            data-wp-c16t="true"
-            data-wp-component="Text"
-            for="inspector-select-control-1"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
-              />
-            </svg>
-            Margin
-          </label>
-        </div>
-        <div
-          class="components-input-control__container emotion-14 emotion-15"
-        >
-          <select
-            class="components-select-control__input emotion-16 emotion-17"
-            id="inspector-select-control-1"
-          >
-            <option
-              value=""
-            >
-              Default
-            </option>
-            <option
-              value="none"
-            >
-              None
-            </option>
-            <option
-              value="small"
-            >
-              Small
-            </option>
-            <option
-              value="medium"
-            >
-              Medium
-            </option>
-            <option
-              value="large"
-            >
-              Large
-            </option>
-            <option
-              value="xlarge"
-            >
-              Extra Large
-            </option>
-          </select>
-          <span
-            class="components-input-control__suffix emotion-18 emotion-19"
-          >
-            <div
-              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
-              data-wp-c16t="true"
-              data-wp-component="InputControlSuffixWrapper"
-            >
-              <div
-                class="emotion-23 emotion-24"
-              >
-                <svg
-                  aria-hidden="true"
-                  focusable="false"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  width="18"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-                  />
-                </svg>
-              </div>
-            </div>
-          </span>
-          <div
-            aria-hidden="true"
-            class="components-input-control__backdrop emotion-25 emotion-26"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;