@wordpress/components 39.0.0 → 40.1.0

package/src/scrollable/test/__snapshots__/index.tsx.snap

@@ -1,66 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`props should render correctly 1`] = `
-.emotion-0 {
-  height: 100%;
-}
-
-@media only screen and ( min-device-width: 40em ) {
-  .emotion-1::-webkit-scrollbar {
-    height: 12px;
-    width: 12px;
-  }
-
-  .emotion-1::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  .emotion-1::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.04);
-    border-radius: 8px;
-  }
-
-  .emotion-1::-webkit-scrollbar-thumb {
-    -webkit-background-clip: padding-box;
-    background-clip: padding-box;
-    background-color: rgba(0, 0, 0, 0.2);
-    border: 2px solid rgba( 0, 0, 0, 0 );
-    border-radius: 7px;
-  }
-
-  .emotion-1:hover::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.5);
-  }
-}
-
-.emotion-2 {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-<div
-  class="emotion-0 emotion-1 emotion-2 components-scrollable"
-  data-testid="scrollable"
-  data-wp-c16t="true"
-  data-wp-component="Scrollable"
->
-  WordPress.org - Code is Poetry
-</div>
-`;
-
-exports[`props should render smoothScroll 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-@@ -4,9 +4,6 @@
-    },
-    Object {
-      "overflow-x": "hidden",
-      "overflow-y": "auto",
-    },
--   Object {
--     "scroll-behavior": "smooth",
--   },
-  ]
-`;

package/src/scrollable/test/index.tsx

@@ -1,31 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { Scrollable } from '../index';
-
-describe( 'props', () => {
-	test( 'should render correctly', () => {
-		render(
-			<Scrollable data-testid="scrollable">
-				WordPress.org - Code is Poetry
-			</Scrollable>
-		);
-
-		expect( screen.getByTestId( 'scrollable' ) ).toMatchSnapshot();
-	} );
-
-	test( 'should render smoothScroll', () => {
-		render(
-			<Scrollable data-testid="scrollable">
-				WordPress.org - Code is Poetry
-			</Scrollable>
-		);
-		render(
-			<Scrollable smoothScroll data-testid="smooth-scrollable">
-				WordPress.org - Code is Poetry
-			</Scrollable>
-		);
-
-		expect(
-			screen.getByTestId( 'smooth-scrollable' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'scrollable' ) );
-	} );
-} );

package/src/shortcut/test/__snapshots__/index.tsx.snap

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Shortcut renders passed className 1`] = `
-<span
-  class="my-class"
->
-  shortcut text
-</span>
-`;
-
-exports[`Shortcut renders the shortcut display text when a string is passed as the shortcut 1`] = `
-<span>
-  shortcut text
-</span>
-`;

package/src/snackbar/test/list.tsx

@@ -1,39 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { click } from '@ariakit/test';
-import SnackbarList from '../list';
-
-window.scrollTo = jest.fn();
-
-describe( 'SnackbarList', () => {
-	afterEach( () => {
-		jest.resetAllMocks();
-	} );
-
-	it( 'should get focus after a snackbar is dismissed', async () => {
-		render(
-			<SnackbarList
-				notices={ [
-					{
-						id: 'ID_1',
-						content: 'Post published.',
-						explicitDismiss: true,
-					},
-					{
-						id: 'ID_2',
-						content: 'Post updated.',
-						explicitDismiss: true,
-					},
-				] }
-				onRemove={ () => {} }
-			/>
-		);
-
-		await click(
-			screen.getAllByRole( 'button', {
-				name: 'Dismiss this notice',
-			} )[ 0 ]
-		);
-
-		expect( screen.getByTestId( 'snackbar-list' ) ).toHaveFocus();
-	} );
-} );

package/src/textarea-control/styles/textarea-control-styles.ts

@@ -1,90 +0,0 @@
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { font } from '../../utils/font';
-import { COLORS } from '../../utils/colors-values';
-import { CONFIG } from '../../utils';
-import { breakpoint } from '../../utils/breakpoint';
-
-const inputStyleNeutral = css`
-	box-shadow: 0 0 0 transparent;
-	border-radius: ${ CONFIG.radiusSmall };
-	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
-
-	@media not ( prefers-reduced-motion ) {
-		transition: box-shadow 0.1s linear;
-	}
-`;
-
-const inputStyleFocus = css`
-	border-color: ${ COLORS.theme.accent };
-	box-shadow: 0 0 0
-		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
-		${ COLORS.theme.accent };
-
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 2px solid transparent;
-`;
-
-export const StyledTextarea = styled.textarea`
-	width: 100%;
-	display: block;
-	font-family: ${ font( 'default.fontFamily' ) };
-	line-height: 20px;
-	background: ${ COLORS.theme.background };
-	color: ${ COLORS.theme.foreground };
-	resize: vertical;
-
-	// Vertical padding is to match the standard 40px control height when rows=1,
-	// in conjunction with the 20px line-height.
-	// "Standard" metrics are 10px 12px, but subtracts 1px each to account for the border width.
-	padding: 9px 11px;
-
-	// Matching the 20px line-height + the 9px top and bottom padding.
-	min-height: 38px;
-
-	${ inputStyleNeutral };
-
-	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: ${ font( 'mobileTextMinFontSize' ) };
-
-	${ breakpoint( 'small' ) } {
-		font-size: ${ font( 'default.fontSize' ) };
-	}
-
-	&:focus {
-		${ inputStyleFocus }
-	}
-
-	&:disabled {
-		background: ${ COLORS.ui.backgroundDisabled };
-		border-color: ${ COLORS.ui.borderDisabled };
-		color: ${ COLORS.ui.textDisabled };
-	}
-
-	// Use opacity to work in various editor styles.
-	&::-webkit-input-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	&::-moz-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	&:-ms-input-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	.is-dark-theme & {
-		&::-webkit-input-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-
-		&::-moz-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-
-		&:-ms-input-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-	}
-`;

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -1,463 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`ToggleGroupControl controlled should render correctly with icons 1`] = `
-.emotion-0 {
-  font-family: -apple-system,system-ui,'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-4 {
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: calc(4px * 2);
-  padding: 0;
-}
-
-<div>
-  <div
-    class="components-base-control emotion-0 emotion-1"
-  >
-    <div
-      class="components-base-control__field emotion-2 emotion-3"
-    >
-      <label
-        class="components-base-control__label emotion-4 emotion-5"
-        for="wp-components-base-control-19"
-      >
-        Test Toggle Group Control
-      </label>
-      <div
-        aria-label="Test Toggle Group Control"
-        class="style-toggle-group-control style-has-enclosing-borders components-toggle-group-control"
-        data-wp-c16t="true"
-        data-wp-component="ToggleGroupControl"
-        id="wp-components-base-control-19"
-        role="radiogroup"
-      >
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="true"
-            aria-label="Uppercase"
-            class="style-button style-is-icon style-is-pressed components-toggle-group-control-option-base"
-            data-active-item="true"
-            data-value="uppercase"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-19-40"
-            name=":r3e:"
-            role="radio"
-            type="button"
-            value="uppercase"
-          >
-            <div
-              class="style-button-content"
-            >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
-                />
-              </svg>
-            </div>
-          </button>
-        </div>
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="false"
-            aria-label="Lowercase"
-            class="style-button style-is-icon components-toggle-group-control-option-base"
-            data-value="lowercase"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-19-41"
-            name=":r3e:"
-            role="radio"
-            type="button"
-            value="lowercase"
-          >
-            <div
-              class="style-button-content"
-            >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
-                />
-              </svg>
-            </div>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <button
-    class="components-button is-next-40px-default-size"
-    type="button"
-  >
-    Reset
-  </button>
-</div>
-`;
-
-exports[`ToggleGroupControl controlled should render correctly with text options 1`] = `
-.emotion-0 {
-  font-family: -apple-system,system-ui,'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-4 {
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: calc(4px * 2);
-  padding: 0;
-}
-
-<div>
-  <div
-    class="components-base-control emotion-0 emotion-1"
-  >
-    <div
-      class="components-base-control__field emotion-2 emotion-3"
-    >
-      <label
-        class="components-base-control__label emotion-4 emotion-5"
-        for="wp-components-base-control-18"
-      >
-        Test Toggle Group Control
-      </label>
-      <div
-        aria-label="Test Toggle Group Control"
-        class="style-toggle-group-control style-has-enclosing-borders components-toggle-group-control"
-        data-wp-c16t="true"
-        data-wp-component="ToggleGroupControl"
-        id="wp-components-base-control-18"
-        role="radiogroup"
-      >
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="false"
-            aria-label="R"
-            class="style-button components-toggle-group-control-option-base"
-            data-value="rigas"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-18-38"
-            name=":r37:"
-            role="radio"
-            type="button"
-            value="rigas"
-          >
-            <div
-              class="style-button-content"
-            >
-              R
-            </div>
-          </button>
-        </div>
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="false"
-            aria-label="J"
-            class="style-button components-toggle-group-control-option-base"
-            data-value="jack"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-18-39"
-            name=":r37:"
-            role="radio"
-            type="button"
-            value="jack"
-          >
-            <div
-              class="style-button-content"
-            >
-              J
-            </div>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <button
-    class="components-button is-next-40px-default-size"
-    type="button"
-  >
-    Reset
-  </button>
-</div>
-`;
-
-exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] = `
-.emotion-0 {
-  font-family: -apple-system,system-ui,'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-4 {
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: calc(4px * 2);
-  padding: 0;
-}
-
-<div>
-  <div
-    class="components-base-control emotion-0 emotion-1"
-  >
-    <div
-      class="components-base-control__field emotion-2 emotion-3"
-    >
-      <label
-        class="components-base-control__label emotion-4 emotion-5"
-        for="wp-components-base-control-1"
-      >
-        Test Toggle Group Control
-      </label>
-      <div
-        aria-label="Test Toggle Group Control"
-        class="style-toggle-group-control style-has-enclosing-borders components-toggle-group-control"
-        data-wp-c16t="true"
-        data-wp-component="ToggleGroupControl"
-        id="wp-components-base-control-1"
-        role="radiogroup"
-      >
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="true"
-            aria-label="Uppercase"
-            class="style-button style-is-icon style-is-pressed components-toggle-group-control-option-base"
-            data-active-item="true"
-            data-value="uppercase"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-1-2"
-            name=":r7:"
-            role="radio"
-            type="button"
-            value="uppercase"
-          >
-            <div
-              class="style-button-content"
-            >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
-                />
-              </svg>
-            </div>
-          </button>
-        </div>
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="false"
-            aria-label="Lowercase"
-            class="style-button style-is-icon components-toggle-group-control-option-base"
-            data-value="lowercase"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-1-3"
-            name=":r7:"
-            role="radio"
-            type="button"
-            value="lowercase"
-          >
-            <div
-              class="style-button-content"
-            >
-              <svg
-                aria-hidden="true"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
-                />
-              </svg>
-            </div>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ToggleGroupControl uncontrolled should render correctly with text options 1`] = `
-.emotion-0 {
-  font-family: -apple-system,system-ui,'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-4 {
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: calc(4px * 2);
-  padding: 0;
-}
-
-<div>
-  <div
-    class="components-base-control emotion-0 emotion-1"
-  >
-    <div
-      class="components-base-control__field emotion-2 emotion-3"
-    >
-      <label
-        class="components-base-control__label emotion-4 emotion-5"
-        for="wp-components-base-control-0"
-      >
-        Test Toggle Group Control
-      </label>
-      <div
-        aria-label="Test Toggle Group Control"
-        class="style-toggle-group-control style-has-enclosing-borders components-toggle-group-control"
-        data-wp-c16t="true"
-        data-wp-component="ToggleGroupControl"
-        id="wp-components-base-control-0"
-        role="radiogroup"
-      >
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="false"
-            aria-label="R"
-            class="style-button components-toggle-group-control-option-base"
-            data-value="rigas"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-0-0"
-            name=":r0:"
-            role="radio"
-            type="button"
-            value="rigas"
-          >
-            <div
-              class="style-button-content"
-            >
-              R
-            </div>
-          </button>
-        </div>
-        <div
-          class="style-label style-label-block"
-        >
-          <button
-            aria-checked="false"
-            aria-label="J"
-            class="style-button components-toggle-group-control-option-base"
-            data-value="jack"
-            data-wp-c16t="true"
-            data-wp-component="ToggleGroupControlOptionBase"
-            id="wp-components-base-control-0-1"
-            name=":r0:"
-            role="radio"
-            type="button"
-            value="jack"
-          >
-            <div
-              class="style-button-content"
-            >
-              J
-            </div>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;