From ed0e87635bdb60ce225b741d97609112871cbdef Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Mon, 22 Feb 2021 08:53:56 -0800 Subject: [PATCH 01/14] Components: Add hooks based Button, ButtonGroup --- .../src/ui/base-button/component.js | 153 + .../components/src/ui/base-button/hook.js | 101 + .../components/src/ui/base-button/index.js | 3 + .../src/ui/base-button/loading-overlay.js | 22 + .../components/src/ui/base-button/styles.js | 243 + .../test/__snapshots__/index.js.snap | 246 + .../src/ui/base-button/test/index.js | 16 + .../components/src/ui/base-button/types.ts | 153 + .../src/ui/button-group/component.js | 126 + .../components/src/ui/button-group/context.js | 10 + .../components/src/ui/button-group/index.js | 2 + .../src/ui/button-group/stories/index.js | 56 + .../components/src/ui/button-group/styles.js | 18 + .../test/__snapshots__/index.js.snap | 485 ++ .../src/ui/button-group/test/index.js | 23 + .../components/src/ui/button-group/types.ts | 56 + packages/components/src/ui/button/README.md | 192 + .../components/src/ui/button/component.js | 130 + packages/components/src/ui/button/index.js | 1 + .../components/src/ui/button/stories/index.js | 64 + packages/components/src/ui/button/styles.js | 305 + .../button/test/__snapshots__/index.js.snap | 5982 +++++++++++++++++ .../components/src/ui/button/test/index.js | 110 + packages/components/src/ui/utils/types.ts | 7 + packages/components/tsconfig.json | 1 + 25 files changed, 8505 insertions(+) create mode 100644 packages/components/src/ui/base-button/component.js create mode 100644 packages/components/src/ui/base-button/hook.js create mode 100644 packages/components/src/ui/base-button/index.js create mode 100644 packages/components/src/ui/base-button/loading-overlay.js create mode 100644 packages/components/src/ui/base-button/styles.js create mode 100644 packages/components/src/ui/base-button/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/ui/base-button/test/index.js create mode 100644 packages/components/src/ui/base-button/types.ts create mode 100644 packages/components/src/ui/button-group/component.js create mode 100644 packages/components/src/ui/button-group/context.js create mode 100644 packages/components/src/ui/button-group/index.js create mode 100644 packages/components/src/ui/button-group/stories/index.js create mode 100644 packages/components/src/ui/button-group/styles.js create mode 100644 packages/components/src/ui/button-group/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/ui/button-group/test/index.js create mode 100644 packages/components/src/ui/button-group/types.ts create mode 100644 packages/components/src/ui/button/README.md create mode 100644 packages/components/src/ui/button/component.js create mode 100644 packages/components/src/ui/button/index.js create mode 100644 packages/components/src/ui/button/stories/index.js create mode 100644 packages/components/src/ui/button/styles.js create mode 100644 packages/components/src/ui/button/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/ui/button/test/index.js diff --git a/packages/components/src/ui/base-button/component.js b/packages/components/src/ui/base-button/component.js new file mode 100644 index 00000000000000..1f06eb353ab992 --- /dev/null +++ b/packages/components/src/ui/base-button/component.js @@ -0,0 +1,153 @@ +/** + * External dependencies + */ +import { contextConnect } from '@wp-g2/context'; +import { cx, ui } from '@wp-g2/styles'; +// eslint-disable-next-line no-restricted-imports +import { Radio as ReakitRadio } from 'reakit'; + +/** + * WordPress dependencies + */ +import { Icon, chevronDown } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import { useButtonGroupContext } from '../button-group'; +import { Elevation } from '../elevation'; +import { FlexItem } from '../flex'; +import { View } from '../view'; +import * as styles from './styles'; +import LoadingOverlay from './loading-overlay'; +import { useBaseButton } from './hook'; + +/** + * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('react').Ref} forwardedRef + */ +function BaseButton( props, forwardedRef ) { + const { + as: asProp, + children, + disabled = false, + elevation = 0, + elevationActive, + elevationFocus, + elevationHover, + hasCaret = false, + href, + icon, + iconSize = 16, + isActive = false, + isDestructive = false, + isFocused = false, + isLoading = false, + noWrap = true, + pre, + suffix, + ...otherProps + } = useBaseButton( props ); + const { buttonGroup } = useButtonGroupContext(); + const buttonGroupState = buttonGroup || {}; + + const BaseComponent = buttonGroup ? ReakitRadio : View; + const as = asProp || ( href ? 'a' : 'button' ); + + return ( + // @ts-ignore No idea why TS is confused about this but ReakitRadio and View are definitely renderable + + + { pre && ( + + { pre } + + ) } + { icon && ( + + + + ) } + { children && ( + + { children } + + ) } + { suffix && ( + + { suffix } + + ) } + { hasCaret && ( + + + + ) } + + + ); +} + +/** + * `BaseButton` is a primitive component used to create actionable components (e.g. `Button`). + */ +const ConnectedBaseButton = contextConnect( BaseButton, 'BaseButton' ); + +export default ConnectedBaseButton; diff --git a/packages/components/src/ui/base-button/hook.js b/packages/components/src/ui/base-button/hook.js new file mode 100644 index 00000000000000..fc5e98bf8bef7a --- /dev/null +++ b/packages/components/src/ui/base-button/hook.js @@ -0,0 +1,101 @@ +/** + * External dependencies + */ +import { useContextSystem } from '@wp-g2/context'; +import { css, cx } from '@wp-g2/styles'; + +/** + * Internal dependencies + */ +import { useControlGroupContext } from '../control-group'; +import { useFlex } from '../flex'; +import * as styles from './styles'; + +/** + * @param {import('@wp-g2/create-styles').ViewOwnProps} props + */ +export function useBaseButton( props ) { + const { + children, + className, + css: cssProp, + currentColor, + disabled = false, + elevation = 0, + elevationActive, + elevationFocus, + elevationHover, + gap = 2, + hasCaret = false, + href, + icon, + iconSize = 16, + isBlock = false, + isControl = false, + isDestructive = false, + isLoading = false, + isNarrow = false, + isRounded = false, + isSplit = false, + isSubtle = false, + justify = 'center', + noWrap = true, + pre, + size = 'medium', + suffix, + textAlign = 'center', + ...otherProps + } = useContextSystem( props, 'BaseButton' ); + + const { className: flexClassName, ...flexProps } = useFlex( { + gap, + justify, + } ); + + /** @type {import('react').ElementType} */ + const as = href ? 'a' : 'button'; + const { styles: controlGroupStyles } = useControlGroupContext(); + const isIconOnly = !! icon && ! children; + + const classes = cx( + flexClassName, + styles.Button, + isBlock && styles.block, + isDestructive && styles.destructive, + styles[ size ], + isIconOnly && styles.icon, + isSubtle && styles.subtle, + isControl && styles.control, + isSubtle && isControl && styles.subtleControl, + controlGroupStyles, + isRounded && styles.rounded, + isNarrow && styles.narrow, + isSplit && styles.split, + currentColor && styles.currentColor, + css( { textAlign } ), + css( cssProp ), + className + ); + + return { + ...flexProps, + as, + href, + children, + disabled, + elevation, + className: classes, + elevationActive, + elevationFocus, + elevationHover, + hasCaret, + icon, + isDestructive, + pre, + suffix, + iconSize, + isLoading, + noWrap, + ...otherProps, + }; +} diff --git a/packages/components/src/ui/base-button/index.js b/packages/components/src/ui/base-button/index.js new file mode 100644 index 00000000000000..1d2598562bebc9 --- /dev/null +++ b/packages/components/src/ui/base-button/index.js @@ -0,0 +1,3 @@ +export { default as BaseButton } from './component'; + +export * from './hook'; diff --git a/packages/components/src/ui/base-button/loading-overlay.js b/packages/components/src/ui/base-button/loading-overlay.js new file mode 100644 index 00000000000000..c014ca2621733b --- /dev/null +++ b/packages/components/src/ui/base-button/loading-overlay.js @@ -0,0 +1,22 @@ +/** + * Internal dependencies + */ +import { Flex } from '../flex'; +import { Spinner } from '../spinner'; +import * as styles from './styles'; + +export function LoadingOverlay( { isLoading = false } ) { + if ( ! isLoading ) return null; + + return ( + + ); +} + +export default LoadingOverlay; diff --git a/packages/components/src/ui/base-button/styles.js b/packages/components/src/ui/base-button/styles.js new file mode 100644 index 00000000000000..ecde123176fbd9 --- /dev/null +++ b/packages/components/src/ui/base-button/styles.js @@ -0,0 +1,243 @@ +/** + * External dependencies + */ +import { css, ui } from '@wp-g2/styles'; + +export const Button = css` + align-items: center; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: ${ ui.get( 'controlBorderRadius' ) }; + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 ${ ui.get( 'controlBoxShadowFocusSize' ) } transparent; + box-sizing: border-box; + color: ${ ui.color.text }; + cursor: pointer; + display: inline-flex; + font-size: ${ ui.get( 'fontSize' ) }; + height: auto; + line-height: 1; + min-height: ${ ui.get( 'controlHeight' ) }; + outline: none; + padding-bottom: ${ ui.space( 1 ) }; + padding-left: ${ ui.get( 'controlPaddingX' ) }; + padding-right: ${ ui.get( 'controlPaddingX' ) }; + padding-top: ${ ui.space( 1 ) }; + position: relative; + text-decoration: none; + touch-action: manipulation; /* Prevents zooming on mobile */ + user-select: none; + width: auto; + + &:hover, + &:active, + &:focus { + transition: all ${ ui.get( 'transitionDuration' ) } + cubic-bezier( 0.12, 0.8, 0.32, 1 ); + } + + &[disabled]:not( [aria-busy='true'] ), + &[aria-disabled='true']:not( [aria-busy='true'] ) { + ${ ui.opacity.muted }; + cursor: auto; + } + + &:focus { + box-shadow: ${ ui.get( 'controlBoxShadowFocus' ) }; + } + + &[data-destructive='true'] { + &:focus { + box-shadow: ${ ui.get( 'controlDestructiveBoxShadowFocus' ) }; + } + } + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeight' ) }; + } + + svg { + display: block; + } +`; + +export const destructive = css` + color: ${ ui.color.destructive }; +`; + +export const block = css` + display: flex; + width: 100%; +`; + +export const rounded = css` + ${ ui.borderRadius.circle }; +`; + +export const xLarge = css` + min-height: ${ ui.get( 'controlHeightXLarge' ) }; + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeightXLarge' ) }; + } +`; + +export const large = css` + min-height: ${ ui.get( 'controlHeightLarge' ) }; + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeightLarge' ) }; + } +`; + +export const medium = css``; + +export const small = css` + ${ ui.padding.y( ui.space( 0.5 ) ) }; + ${ ui.padding.x( ui.get( 'controlPaddingXSmall' ) ) }; + min-height: ${ ui.get( 'controlHeightSmall' ) }; + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlPaddingXSmall' ) }; + } +`; + +export const xSmall = css` + ${ ui.padding.y( ui.space( 0.5 ) ) }; + ${ ui.padding.x( ui.get( 'controlPaddingXSmall' ) ) }; + min-height: ${ ui.get( 'controlHeightXSmall' ) }; + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeightXXSmall' ) }; + } +`; + +export const xxSmall = css` + ${ ui.padding( 0 ) }; + min-height: ${ ui.get( 'controlHeightXXSmall' ) }; + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeightXXSmall' ) }; + } +`; + +export const icon = css` + ${ ui.padding.x( 0 ) }; +`; + +export const loading = css` + opacity: 0; +`; + +export const Content = css` + font-size: ${ ui.get( 'fontSize' ) }; + /* line-height: 0; */ + opacity: 1; +`; + +export const noWrap = css` + white-space: nowrap; +`; + +export const PrefixSuffix = css` + opacity: 1; + + svg { + display: block; + user-select: none; + } +`; + +export const CaretWrapper = css` + margin-left: 0 !important; + position: relative; + right: ${ ui.space( -2 ) }; +`; + +export const LoadingOverlay = css` + bottom: 0; + left: 0; + pointer-events: none; + position: absolute; + right: 0; + top: 0; +`; + +export const subtle = css` + border-color: ${ ui.get( 'controlBorderColorSubtle' ) }; + color: ${ ui.color.text }; + + &:hover, + &:active, + &:focus { + border-color: ${ ui.get( 'controlBorderColorSubtle' ) }; + color: ${ ui.color.text }; + } + + &:focus { + border-color: ${ ui.get( 'buttonPrimaryBorderColorFocus' ) }; + } +`; + +export const control = css` + background-color: ${ ui.get( 'controlBackgroundColor' ) }; + border: 1px solid; + border-color: ${ ui.get( 'controlBorderColor' ) }; + color: ${ ui.color.text }; + font-family: ${ ui.get( 'fontFamily' ) }; + font-size: ${ ui.get( 'fontSize' ) }; + + &:hover, + &:active, + &:focus { + color: ${ ui.color.text }; + } + + &:focus { + border-color: ${ ui.get( 'buttonPrimaryBorderColorFocus' ) }; + box-shadow: ${ ui.get( 'controlBoxShadowFocus' ) }; + } +`; + +export const subtleControl = css` + background-color: transparent; + + &:hover, + &:focus { + background-color: ${ ui.get( 'controlBackgroundColor' ) }; + } + + &:focus { + border-color: ${ ui.get( 'buttonPrimaryBorderColorFocus' ) }; + } + + &:active { + background-color: ${ ui.get( 'controlBackgroundColorActive' ) }; + } + + &[data-active='true'] { + background: ${ ui.get( 'colorText' ) }; + color: ${ ui.get( 'colorTextInverted' ) }; + } +`; + +export const narrow = css` + padding-left: ${ ui.get( 'controlPaddingX' ) }; + padding-right: ${ ui.get( 'controlPaddingX' ) }; +`; + +export const currentColor = css` + color: currentColor; + + &:hover, + &:focus { + color: currentColor; + } +`; + +export const split = css` + border-bottom-left-radius: 0px; + border-top-left-radius: 0px; +`; diff --git a/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap b/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap new file mode 100644 index 00000000000000..b1a8195cfbd720 --- /dev/null +++ b/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap @@ -0,0 +1,246 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`props should render correctly 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; diff --git a/packages/components/src/ui/base-button/test/index.js b/packages/components/src/ui/base-button/test/index.js new file mode 100644 index 00000000000000..80f67cbafb0b57 --- /dev/null +++ b/packages/components/src/ui/base-button/test/index.js @@ -0,0 +1,16 @@ +/** + * External dependencies + */ +import { render } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import { BaseButton } from '../index'; + +describe( 'props', () => { + test( 'should render correctly', () => { + const { container } = render( Code is Poetry ); + expect( container.firstChild ).toMatchSnapshot(); + } ); +} ); diff --git a/packages/components/src/ui/base-button/types.ts b/packages/components/src/ui/base-button/types.ts new file mode 100644 index 00000000000000..186de8211936b5 --- /dev/null +++ b/packages/components/src/ui/base-button/types.ts @@ -0,0 +1,153 @@ +/** + * External dependencies + */ +// eslint-disable-next-line no-restricted-imports +import type { CSSProperties, ReactElement } from 'react'; + +/** + * Internal dependencies + */ +import type { SizeRangeDefault } from '../utils/types'; + +type BaseButtonSize = SizeRangeDefault; + +export type Props = { + /** + * @default false + */ + currentColor?: boolean; + /** + * Renders `Button` in a disabled state. + * + * @default false + */ + disabled?: boolean; + /** + * Renders `Elevation` styles for the `Button`. + * + * @default 0 + */ + elevation?: number; + /** + * Renders `Elevation` styles for the `Button` when active. + */ + elevationActive?: number; + /** + * Renders `Elevation` styles for the `Button` when focused. + */ + elevationFocus?: number; + /** + * Renders `Elevation` styles for the `Button` when hovered. + */ + elevationHover: number; + /** + * The amount of space between each child element within `Button`. + * + * @default 2 + */ + gap?: number; + /** + * Determines if a caret `Icon` should render within the `Button` + * + * @default false + */ + hasCaret?: boolean; + /** + * An HTML anchor link. Transforms the `Button` in a `` element. + */ + href?: string; + /** + * Renders an `Icon` within the `Button`. + */ + icon?: ReactElement; + /** + * Adjusts the size of the `Icon` within the `Button` (from the `icon` prop). + */ + iconSize?: number; + /** + * Passed to `data-active`. + */ + isActive?: boolean; + /** + * Determines if `Button` should render as a block element, rather than inline. + * + * @default false + */ + isBlock?: boolean; + /** + * Renders `Button` with control styles, similar to `TextInput` or `Select`. + * + * @default false + */ + isControl?: boolean; + /** + * Renders destructive variant. + * + * @default false + */ + isDestructive?: boolean; + /** + * Passed to `data-focused`. + */ + isFocused?: boolean; + /** + * Renders loading, disabling `Button` and renders a `Spinner`. + * + * @default false + */ + isLoading?: boolean; + /** + * Renders a narrower `Button`. + * + * @default false + */ + isNarrow?: boolean; + /** + * Renders a rounded `Button`. + * + * @default false + */ + isRounded?: boolean; + /** + * @default false + */ + isSplit?: boolean; + /** + * Renders a subtle `Button`. + * + * @default false + */ + isSubtle?: boolean; + /** + * Determines how inner content is aligned. + * + * @default 'center' + */ + justify?: CSSProperties[ 'justifyContent' ]; + /** + * Determines if inner content should be wrapped. + * + * @default false + */ + noWrap?: boolean; + /** + * Renders prefix content within `Button`. + */ + pre?: ReactElement; + /** + * Determines the size of `Button`. + * + * @default 'medium' + */ + size?: BaseButtonSize; + /** + * Renders suffix content within `Button`. + */ + suffix?: ReactElement; + /** + * Modifies the text-align (CSS) styles of `Button` content. + * + * @default 'center' + */ + textAlign?: CSSProperties[ 'textAlign' ]; +}; diff --git a/packages/components/src/ui/button-group/component.js b/packages/components/src/ui/button-group/component.js new file mode 100644 index 00000000000000..d2e373acf1bd45 --- /dev/null +++ b/packages/components/src/ui/button-group/component.js @@ -0,0 +1,126 @@ +/** + * External dependencies + */ +import { + contextConnect, + ContextSystemProvider, + useContextSystem, +} from '@wp-g2/context'; +import { cx } from '@wp-g2/styles'; +import { noop, useUpdateEffect } from '@wp-g2/utils'; +// eslint-disable-next-line no-restricted-imports +import { RadioGroup, useRadioState } from 'reakit'; + +/** + * WordPress dependencies + */ +import { useI18n } from '@wordpress/react-i18n'; +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { ControlGroup } from '../control-group'; +import { ButtonGroupContext } from './context'; +import * as styles from './styles'; + +/** + * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('react').Ref} forwardedRef + */ +function ButtonGroup( props, forwardedRef ) { + const { __ } = useI18n(); + + const { + baseId, + className, + children, + enableSelectNone = false, + expanded = false, + segmented = false, + id, + label = __( 'ButtonGroup' ), + value, + onChange = noop, + ...otherProps + } = useContextSystem( props, 'ButtonGroup' ); + + const radio = useRadioState( { + baseId: baseId || id, + state: value, + } ); + + useUpdateEffect( () => { + onChange( radio.state ); + }, [ radio.state ] ); + + useUpdateEffect( () => { + radio.setState( value ); + }, [ value ] ); + + const contextProps = useMemo( + () => ( { + buttonGroup: radio, + enableSelectNone, + } ), + [ enableSelectNone, radio ] + ); + + const contextSystemProps = useMemo( () => { + return { + Button: { + isBlock: expanded, + isSubtle: ! segmented, + isControl: true, + }, + ControlGroup: { + isItemBlock: expanded, + }, + }; + }, [ expanded, segmented ] ); + + const classes = cx( + segmented && styles.segmented, + expanded && styles.expanded, + className + ); + const BaseComponent = segmented ? ControlGroup : styles.ButtonGroupView; + + return ( + + + + { children } + + + + ); +} + +/** + * `ButtonGroup` is a form component contains and coordinates the checked state of multiple `Button` components. + * + * @example + * ```jsx + * import { ButtonGroup, Button } from `@wordpress/components/ui`; + * + * function Example() { + * return ( + * + * + * + * + * + * ); + * } + * ``` + */ +const ConnectedButtonGroup = contextConnect( ButtonGroup, 'ButtonGroup' ); + +export default ConnectedButtonGroup; diff --git a/packages/components/src/ui/button-group/context.js b/packages/components/src/ui/button-group/context.js new file mode 100644 index 00000000000000..9260c5d9cf40e8 --- /dev/null +++ b/packages/components/src/ui/button-group/context.js @@ -0,0 +1,10 @@ +/** + * WordPress dependencies + */ +import { createContext, useContext } from '@wordpress/element'; + +/** @type {import('./types').ButtonGroupContext} */ +const defaultContext = {}; + +export const ButtonGroupContext = createContext( defaultContext ); +export const useButtonGroupContext = () => useContext( ButtonGroupContext ); diff --git a/packages/components/src/ui/button-group/index.js b/packages/components/src/ui/button-group/index.js new file mode 100644 index 00000000000000..f32201f17dd1ef --- /dev/null +++ b/packages/components/src/ui/button-group/index.js @@ -0,0 +1,2 @@ +export { default as ButtonGroup } from './component'; +export * from './context'; diff --git a/packages/components/src/ui/button-group/stories/index.js b/packages/components/src/ui/button-group/stories/index.js new file mode 100644 index 00000000000000..b9fc46b0f543b7 --- /dev/null +++ b/packages/components/src/ui/button-group/stories/index.js @@ -0,0 +1,56 @@ +/** + * WordPress dependencies + */ +import { formatBold, formatItalic, formatUnderline } from '@wordpress/icons'; +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { Button } from '../../button'; +import { ButtonGroup } from '..'; + +export default { + component: ButtonGroup, + title: 'G2 Components (Experimental)/ButtonGroup', +}; + +export const _default = () => { + const [ value, setValue ] = useState( 'bold' ); + + return ( + + + + + +`; diff --git a/packages/components/src/ui/button-group/test/index.js b/packages/components/src/ui/button-group/test/index.js new file mode 100644 index 00000000000000..cec03c22d5d3ca --- /dev/null +++ b/packages/components/src/ui/button-group/test/index.js @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import { render } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import { Button } from '../../button'; +import { ButtonGroup } from '../index'; + +describe( 'props', () => { + test( 'should render correctly', () => { + const { container } = render( + + + + + + ); + expect( container.firstChild ).toMatchSnapshot(); + } ); +} ); diff --git a/packages/components/src/ui/button-group/types.ts b/packages/components/src/ui/button-group/types.ts new file mode 100644 index 00000000000000..785cc44c8991e4 --- /dev/null +++ b/packages/components/src/ui/button-group/types.ts @@ -0,0 +1,56 @@ +/** + * External dependencies + */ +// eslint-disable-next-line no-restricted-imports +import { + RadioStateReturn, + RadioGroupProps as ReakitRadioGroupProps, +} from 'reakit'; + +export type Props = ReakitRadioGroupProps & { + /** + * ID that will serve as a base for all the items IDs. + * + * @see https://reakit.io/docs/radio/#useradiostate + */ + baseId?: string; + /** + * Determines if `Radio` is disabled. + */ + disabled?: boolean; + /** + * Allows for value to reset if clicking the current active item. + */ + enableSelectNone?: boolean; + /** + * Renders inner `Button` with a full-width expanded UI. + */ + expanded?: boolean; + /** + * When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set. + * + * @see https://reakit.io/docs/radio/#radiogroup + */ + focusable?: boolean; + /** + * Label for `Radio` components. + */ + label?: string; + /** + * Callback when a `Button` `checked` value changes. + */ + onChange?: ( ...args: any ) => void; + /** + * Renders inner `Button` with a segmented UI. + */ + segmented?: boolean; + /** + * Value of `Button`. + */ + value?: string | number; +}; + +export type ButtonGroupContext = { + buttonGroup?: RadioStateReturn; + enableSelectNone?: Props[ 'enableSelectNone' ]; +}; diff --git a/packages/components/src/ui/button/README.md b/packages/components/src/ui/button/README.md new file mode 100644 index 00000000000000..ebfbbfd5a60e22 --- /dev/null +++ b/packages/components/src/ui/button/README.md @@ -0,0 +1,192 @@ +--- +title: Button +type: forms +description: '`Button` is a component used to trigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation.' +slug: /components/button/ +keywords: ['button', 'action'] +--- + +# Button + +`Button` is a component used to trigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation. + +## Table of contents + + + + +- [Usage](#usage) +- [Props](#props) +- [See Also](#see-also) + + + + + + + + + + +## Usage + +```jsx live +import { Button } from '@wp-g2/components'; + +function Example() { + return ; +} +``` + +## Props + +##### disabled + +**Type**: `boolean` + +Renders `Button` in a disabled state. + +##### elevation + +**Type**: `number` + +Renders `Elevation` styles for the `Button`. + +##### elevationActive + +**Type**: `number` + +Renders `Elevation` styles for the `Button` when active. + +##### elevationFocus + +**Type**: `number` + +Renders `Elevation` styles for the `Button` when focused. + +##### elevationHover + +**Type**: `number` + +Renders `Elevation` styles for the `Button` when hovered. + +##### gap + +**Type**: `number` + +The amount of space between each child element within `Button`. + +##### hasCaret + +**Type**: `boolean` + +Determines if a caret `Icon` should render within the `Button` + +##### href + +**Type**: `string` + +An HTML anchor link. Transforms the `Button` in a `` element. + +##### icon + +**Type**: `React.ReactElement` + +Renders an `Icon` within the `Button`. + +##### iconSize + +**Type**: `number` + +Adjusts the size of the `Icon` within the `Button` (from the `icon` prop). + +##### isBlock + +**Type**: `boolean` + +Determines if `Button` should render as a block element, rather than inline. + +##### isControl + +**Type**: `boolean` + +Renders `Button` with control styles, similar to `TextInput` or `Select`. + +##### isDestructive + +**Type**: `boolean` + +Renders destructive variant. + +##### isLoading + +**Type**: `boolean` + +Renders loading, disabling `Button` and renders a `Spinner`. + +##### isNarrow + +**Type**: `boolean` + +Renders a narrower `Button`. + +##### isRounded + +**Type**: `boolean` + +Renders a rounded `Button`. + +##### isSubtle + +**Type**: `boolean` + +Renders a subtle `Button`. + +##### justify + +**Type**: `CSS['justifyContent']` + +Determines how inner content is aligned. + +##### noWrap + +**Type**: `boolean` + +Determines if inner content should be wrapped. + +##### prefix + +**Type**: `React.ReactElement` + +Renders prefix content within `Button`. + +##### size + +**Type**: `"xLarge"`,`"large"`,`"medium"`,`"small"`,`"xSmall"` + +Determines the size of `Button`. + +##### suffix + +**Type**: `React.ReactElement` + +Renders suffix content within `Button`. + +##### textAlign + +**Type**: `CSS['textAlign']` + +Modifies the text-align (CSS) styles of `Button` content. + +##### variant + +**Type**: `"primary"`,`"secondary"`,`"tertiary"`,`"plain"`,`"link"` + +Determines the `Button` variant to render. + + + + +## See Also + +- [TextInput](../textinput/) diff --git a/packages/components/src/ui/button/component.js b/packages/components/src/ui/button/component.js new file mode 100644 index 00000000000000..762f09490f5d5b --- /dev/null +++ b/packages/components/src/ui/button/component.js @@ -0,0 +1,130 @@ +/** + * External dependencies + */ +import { contextConnect, useContextSystem } from '@wp-g2/context'; +import { cx } from '@wp-g2/styles'; +import { noop } from 'lodash'; + +/** + * WordPress dependencies + */ +import { useCallback } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { BaseButton } from '../base-button'; +import { useButtonGroupContext } from '../button-group'; +import * as styles from './styles'; + +/** + * @typedef {'primary' | 'secondary' | 'tertiary' | 'plain' | 'link'} ButtonVariant + */ + +/** + * @typedef OwnProps + * @property {ButtonVariant} [variant='secondary'] Determinds the `Button` variant to render. + */ + +/** + * @typedef {import('../base-button/types').Props & OwnProps} Props + */ + +/** + * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('react').Ref} forwardedRef + */ +function Button( props, forwardedRef ) { + const { + children, + className, + currentColor, + icon, + isActive: isActiveProp = false, + isControl = false, + isSubtle = false, + onClick = noop, + size = 'medium', + variant = 'secondary', + ...otherProps + } = useContextSystem( props, 'Button' ); + + const { buttonGroup, enableSelectNone } = useButtonGroupContext(); + const isWithinButtonGroup = !! buttonGroup; + const isButtonGroupActive = + isWithinButtonGroup && buttonGroup?.state === otherProps.value; + + const isActive = isActiveProp || isButtonGroupActive; + const isIconOnly = !! icon && ! children; + + const handleOnClickWithinButtonGroup = useCallback( + ( event ) => { + if ( + isWithinButtonGroup && + enableSelectNone && + isButtonGroupActive && + buttonGroup + ) { + event.preventDefault(); + event.stopPropagation(); + buttonGroup.setState( undefined ); + } + }, + [ + buttonGroup, + enableSelectNone, + isButtonGroupActive, + isWithinButtonGroup, + ] + ); + + const handleOnClick = useCallback( + ( event ) => { + onClick( event ); + handleOnClickWithinButtonGroup( event ); + }, + [ handleOnClickWithinButtonGroup, onClick ] + ); + + const classes = cx( + styles.Button, + styles[ variant ], + styles[ size ], + isControl && styles.control, + isSubtle && styles.subtle, + isSubtle && isControl && styles.subtleControl, + isButtonGroupActive && styles.subtleControlActive, + isIconOnly && styles.icon, + currentColor && styles.currentColor, + className + ); + + return ( + + { children } + + ); +} + +/** + * `Button` is a component used to trigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation. + * + * @example + * ```jsx + * import { Button } from `@wordpress/components/ui` + * + * function Example() { + * return ; + * } + * ``` + */ +const ConnectedButton = contextConnect( Button, 'Button' ); + +export default ConnectedButton; diff --git a/packages/components/src/ui/button/index.js b/packages/components/src/ui/button/index.js new file mode 100644 index 00000000000000..7c802d3a671c5d --- /dev/null +++ b/packages/components/src/ui/button/index.js @@ -0,0 +1 @@ +export { default as Button } from './component'; diff --git a/packages/components/src/ui/button/stories/index.js b/packages/components/src/ui/button/stories/index.js new file mode 100644 index 00000000000000..9f61b65d96b852 --- /dev/null +++ b/packages/components/src/ui/button/stories/index.js @@ -0,0 +1,64 @@ +/** + * Internal dependencies + */ +import { Flex, Text } from '../..'; +import { Button } from '..'; + +export default { + component: Button, + title: 'G2 Components (Experimental)/Button', +}; + +const Buttons = ( props ) => { + return ( + + + Large + + + + Medium + + + + Small + + + + ); +}; + +export const _default = () => { + return ( + <> + + + + + + + + + + Prefix } + suffix={ Suffix } + variant="secondary" + /> + Prefix } + suffix={ Suffix } + variant="secondary" + /> + + ); +}; diff --git a/packages/components/src/ui/button/styles.js b/packages/components/src/ui/button/styles.js new file mode 100644 index 00000000000000..d9e54070e6c927 --- /dev/null +++ b/packages/components/src/ui/button/styles.js @@ -0,0 +1,305 @@ +/** + * External dependencies + */ +import { css, ui } from '@wp-g2/styles'; + +/** + * Internal dependencies + */ +import * as baseButtonStyles from '../base-button/styles'; + +export const Button = css` + color: ${ ui.get( 'buttonTextColor' ) }; + font-weight: 600; + padding-left: ${ ui.get( 'buttonPaddingX' ) }; + padding-right: ${ ui.get( 'buttonPaddingX' ) }; + + &:active { + color: ${ ui.get( 'buttonTextColorActive' ) }; + } +`; + +export const xLarge = css` + min-height: ${ ui.get( 'controlHeightXLarge' ) }; + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeightXLarge' ) }; + } +`; + +export const large = css` + min-height: ${ ui.get( 'controlHeightLarge' ) }; + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeightLarge' ) }; + } +`; + +export const medium = css``; + +export const small = css` + ${ ui.padding.x( ui.get( 'controlPaddingX' ) ) }; + min-height: ${ ui.get( 'controlHeightSmall' ) }; + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeightSmall' ) }; + } +`; + +export const xSmall = css` + ${ ui.padding.x( ui.get( 'controlPaddingXSmall' ) ) }; + min-height: ${ ui.get( 'controlHeightXSmall' ) }; + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeightXSmall' ) }; + } +`; + +export const xxSmall = css` + ${ ui.padding.x( ui.get( 'controlHeightXXSmall' ) ) }; + min-height: ${ ui.get( 'controlHeightXXSmall' ) }; + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeightXXSmall' ) }; + } +`; + +export const half = css` + min-height: calc( ${ ui.get( 'controlHeight' ) } / 2 ); + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeight' ) }; + } +`; + +export const halfLarge = css` + min-height: calc( ${ ui.get( 'controlHeightLarge' ) } / 2 ); + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeightLarge' ) }; + } +`; + +export const halfSmall = css` + min-height: calc( ${ ui.get( 'controlHeightSmall' ) } / 2 ); + + &[data-icon='true'] { + min-width: ${ ui.get( 'controlHeightSmall' ) }; + } +`; + +export const icon = css` + ${ ui.padding( 0 ) }; +`; + +export const plain = css``; + +export const primary = css` + background-color: ${ ui.get( 'buttonPrimaryColor' ) }; + border-color: ${ ui.get( 'buttonPrimaryBorderColor' ) }; + color: ${ ui.get( 'buttonPrimaryTextColor' ) }; + + &:active { + color: ${ ui.get( 'buttonPrimaryTextColorActive' ) }; + } + + &:hover { + background-color: ${ ui.get( 'buttonPrimaryColorHover' ) }; + border-color: ${ ui.get( 'buttonPrimaryBorderColorHover' ) }; + color: ${ ui.get( 'buttonPrimaryTextColorHover' ) }; + } + + &:focus, + &[data-focused='true'] { + background-color: ${ ui.get( 'buttonPrimaryColorFocus' ) }; + border-color: ${ ui.get( 'buttonPrimaryBorderColorFocus' ) }; + color: ${ ui.get( 'buttonPrimaryTextColorFocus' ) }; + } + + &:active { + background-color: ${ ui.get( 'buttonPrimaryColorActive' ) }; + border-color: ${ ui.get( 'buttonPrimaryBorderColorActive' ) }; + } + + &[data-destructive='true'] { + background-color: ${ ui.color.destructive }; + border-color: ${ ui.color.destructive }; + + &:hover, + &:focus, + &[data-focused='true'] { + background-color: ${ ui.color.destructive }; + border-color: ${ ui.color.destructive }; + } + + &:active { + background-color: ${ ui.color.text }; + } + } +`; + +export const secondary = css` + background-color: ${ ui.get( 'buttonSecondaryColor' ) }; + border-color: ${ ui.get( 'buttonSecondaryBorderColor' ) }; + color: ${ ui.get( 'buttonSecondaryTextColor' ) }; + + &:hover { + background-color: ${ ui.get( 'buttonSecondaryColorHover' ) }; + border-color: ${ ui.get( 'buttonSecondaryBorderColorHover' ) }; + } + + &:focus, + &[data-focused='true'] { + background-color: ${ ui.get( 'buttonSecondaryColorFocus' ) }; + border-color: ${ ui.get( 'buttonSecondaryBorderColorFocus' ) }; + color: ${ ui.get( 'buttonSecondaryTextColorFocus' ) }; + } + + &:active { + background-color: ${ ui.get( 'buttonSecondaryColorActive' ) }; + border-color: ${ ui.get( 'buttonSecondaryBorderColorActive' ) }; + color: ${ ui.get( 'buttonSecondaryTextColorActive' ) }; + } + + &[data-destructive='true'] { + border-color: ${ ui.color.destructive }; + color: ${ ui.color.destructive }; + + &:hover, + &:active, + &:focus, + &[data-focused='true'] { + border-color: ${ ui.color.destructive }; + color: ${ ui.color.destructive }; + } + + &:active { + color: ${ ui.color.text }; + } + } +`; + +export const tertiary = css` + background-color: ${ ui.get( 'buttonTertiaryColor' ) }; + border-color: ${ ui.get( 'buttonTertiaryBorderColor' ) }; + color: ${ ui.get( 'buttonTertiaryTextColor' ) }; + + &:hover { + background-color: ${ ui.get( 'buttonTertiaryColorHover' ) }; + border-color: ${ ui.get( 'buttonTertiaryBorderColorHover' ) }; + } + + &:focus, + &[data-focused='true'] { + background-color: ${ ui.get( 'buttonTertiaryColorFocus' ) }; + border-color: ${ ui.get( 'buttonTertiaryBorderColorFocus' ) }; + color: ${ ui.get( 'buttonTertiaryTextColorFocus' ) }; + } + + &:active { + background-color: ${ ui.get( 'buttonTertiaryColorActive' ) }; + border-color: ${ ui.get( 'buttonTertiaryBorderColorActive' ) }; + color: ${ ui.get( 'buttonTertiaryTextColorActive' ) }; + } + + &[data-destructive='true'] { + color: ${ ui.color.destructive }; + + &:hover, + &:focus { + border-color: ${ ui.color.destructive }; + } + + &:active { + color: ${ ui.color.text }; + } + } +`; + +export const link = css` + background: none; + border-color: transparent; + color: ${ ui.get( 'linkColor' ) }; + + &:active { + color: ${ ui.get( 'linkColorActive' ) }; + } + + &[data-destructive='true'] { + color: ${ ui.color.destructive }; + + &:active { + color: ${ ui.color.text }; + } + } +`; + +export const plainLink = css` + ${ ui.padding.x( 0 ) }; + background: none; + border-color: transparent; + color: ${ ui.get( 'linkColor' ) }; + + &:hover, + &:active, + &:focus, + &[data-focused='true'] { + background-color: transparent; + text-decoration: underline; + } + + &:active { + color: ${ ui.get( 'linkColorActive' ) }; + } + + &[data-destructive='true'] { + color: ${ ui.color.destructive }; + + &:active { + color: ${ ui.color.text }; + } + } +`; + +export const subtle = baseButtonStyles.subtle; +export const control = baseButtonStyles.control; + +const subtleControlActiveTransition = css( { + transition: [ + 'all', + ui.get( 'transitionDuration' ), + ui.get( 'transitionTimingFunctionControl' ), + ].join( ' ' ), +} ); + +export const subtleControlActive = css` + &[data-active='true'] { + ${ subtleControlActiveTransition }; + ${ ui.zIndex( 'ControlFocus', 1 ) }; + + background: ${ ui.get( 'buttonControlActiveStateColor' ) }; + border-color: ${ ui.get( 'buttonControlActiveStateColor' ) }; + color: ${ ui.get( 'buttonControlActiveStateTextColor' ) }; + + &:hover { + background: ${ ui.get( 'buttonControlActiveStateColorHover' ) }; + } + &:focus { + background: ${ ui.get( 'buttonControlActiveStateColorFocus' ) }; + box-shadow: ${ ui.get( 'buttonControlActiveStateBoxShadowFocus' ) }; + border-color: ${ ui.get( + 'buttonControlActiveStateBorderColorFocus' + ) }; + } + &:active { + background: ${ ui.get( 'buttonControlActiveStateColorActive' ) }; + } + } +`; + +export const subtleControl = css` + ${ baseButtonStyles.subtleControl }; + ${ subtleControlActive }; +`; + +export const currentColor = baseButtonStyles.currentColor; diff --git a/packages/components/src/ui/button/test/__snapshots__/index.js.snap b/packages/components/src/ui/button/test/__snapshots__/index.js.snap new file mode 100644 index 00000000000000..3e140eaa23c45b --- /dev/null +++ b/packages/components/src/ui/button/test/__snapshots__/index.js.snap @@ -0,0 +1,5982 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`props should render (Flex) gap 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 1); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 1); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 1); + margin-left: calc(var(--wp-g2-grid-base) * 1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render as link (href) 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + + + Let It Go + + + +`; + +exports[`props should render correctly 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render disabled 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render elevation 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 3px 6px 0 rgba(0 ,0,0,0.15); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render hasCaret 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + margin-left: 0!important; + position: relative; + right: calc(4px * -2); + right: calc(var(--wp-g2-grid-base) * -2); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: currentColor; + fill: currentColor; + height: 16px; + width: 16px; +} + +@media (prefers-reduced-motion) { + .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 svg { + display: block; +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render icon 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + opacity: 1; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 svg { + display: block; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: currentColor; + fill: currentColor; + height: 16px; + width: 16px; +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { + display: block; +} + +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render isControl 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); + background-color: #ffffff; + background-color: var(--wp-g2-control-background-color); + border: 1px solid; + border-color: #757575; + border-color: var(--wp-g2-control-border-color); + color: #1e1e1e; + color: var(--wp-g2-color-text); + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + border-color: #007cba; + border-color: var(--wp-g2-button-primary-border-color-focus); + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render isDestructive 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + color: #D94F4F; + color: var(--wp-g2-color-destructive); + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render isLoading 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + bottom: 0; + left: 0; + pointer-events: none; + position: absolute; + right: 0; + top: 0; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1>* { + min-width: 0; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + pointer-events: none; + position: relative; +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + height: 36px; + left: 0; + opacity: 0.6; + position: absolute; + top: 0; + -webkit-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; + width: 36px; +} + +@media (prefers-reduced-motion) { + .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + color: currentColor; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + height: 54px; + left: 50%; + padding: 10px; + position: absolute; + top: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + width: 54px; +} + +@media (prefers-reduced-motion) { + .emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4>div { + -webkit-animation: ComponentsUISpinnerFadeAnimation 1000ms linear infinite; + animation: ComponentsUISpinnerFadeAnimation 1000ms linear infinite; + background: currentColor; + border-radius: 50px; + height: 16%; + left: 49%; + opacity: 0; + position: absolute; + top: 43%; + width: 6%; +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .InnerBar1 { + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-transform: rotate(0deg) translate(0,-130%); + -ms-transform: rotate(0deg) translate(0,-130%); + transform: rotate(0deg) translate(0,-130%); +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .InnerBar2 { + -webkit-animation-delay: -0.9167s; + animation-delay: -0.9167s; + -webkit-transform: rotate(30deg) translate(0,-130%); + -ms-transform: rotate(30deg) translate(0,-130%); + transform: rotate(30deg) translate(0,-130%); +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .InnerBar3 { + -webkit-animation-delay: -0.833s; + animation-delay: -0.833s; + -webkit-transform: rotate(60deg) translate(0,-130%); + -ms-transform: rotate(60deg) translate(0,-130%); + transform: rotate(60deg) translate(0,-130%); +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .InnerBar4 { + -webkit-animation-delay: -0.7497s; + animation-delay: -0.7497s; + -webkit-transform: rotate(90deg) translate(0,-130%); + -ms-transform: rotate(90deg) translate(0,-130%); + transform: rotate(90deg) translate(0,-130%); +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .InnerBar5 { + -webkit-animation-delay: -0.667s; + animation-delay: -0.667s; + -webkit-transform: rotate(120deg) translate(0,-130%); + -ms-transform: rotate(120deg) translate(0,-130%); + transform: rotate(120deg) translate(0,-130%); +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .InnerBar6 { + -webkit-animation-delay: -0.5837s; + animation-delay: -0.5837s; + -webkit-transform: rotate(150deg) translate(0,-130%); + -ms-transform: rotate(150deg) translate(0,-130%); + transform: rotate(150deg) translate(0,-130%); +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .InnerBar7 { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; + -webkit-transform: rotate(180deg) translate(0,-130%); + -ms-transform: rotate(180deg) translate(0,-130%); + transform: rotate(180deg) translate(0,-130%); +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .InnerBar8 { + -webkit-animation-delay: -0.4167s; + animation-delay: -0.4167s; + -webkit-transform: rotate(210deg) translate(0,-130%); + -ms-transform: rotate(210deg) translate(0,-130%); + transform: rotate(210deg) translate(0,-130%); +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .InnerBar9 { + -webkit-animation-delay: -0.333s; + animation-delay: -0.333s; + -webkit-transform: rotate(240deg) translate(0,-130%); + -ms-transform: rotate(240deg) translate(0,-130%); + transform: rotate(240deg) translate(0,-130%); +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .InnerBar10 { + -webkit-animation-delay: -0.2497s; + animation-delay: -0.2497s; + -webkit-transform: rotate(270deg) translate(0,-130%); + -ms-transform: rotate(270deg) translate(0,-130%); + transform: rotate(270deg) translate(0,-130%); +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .InnerBar11 { + -webkit-animation-delay: -0.167s; + animation-delay: -0.167s; + -webkit-transform: rotate(300deg) translate(0,-130%); + -ms-transform: rotate(300deg) translate(0,-130%); + transform: rotate(300deg) translate(0,-130%); +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .InnerBar12 { + -webkit-animation-delay: -0.0833s; + animation-delay: -0.0833s; + -webkit-transform: rotate(330deg) translate(0,-130%); + -ms-transform: rotate(330deg) translate(0,-130%); + transform: rotate(330deg) translate(0,-130%); +} + +.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + opacity: 0; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-5.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-5.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render isNarrow 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render isRounded 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + border-radius: 99999px; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render isSubtle 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); + border-color: transparent; + border-color: var(--wp-g2-control-border-color-subtle); + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + border-color: transparent; + border-color: var(--wp-g2-control-border-color-subtle); + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + border-color: #007cba; + border-color: var(--wp-g2-button-primary-border-color-focus); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render prefix 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + opacity: 1; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 svg { + display: block; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render size 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + min-height: calc(30px * 0.8); + min-height: var(--wp-g2-control-height-small); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: calc(30px * 0.8); + min-width: var(--wp-g2-control-height-small); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render suffix 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-focus); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: rgba(0, 0, 0, 0.05); + background-color: var(--wp-g2-button-secondary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color-active); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); + color: #D94F4F; + color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + color: #1e1e1e; + color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + opacity: 1; +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { + display: block; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; + +exports[`props should render variant 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); + --wp-g2-flex-item-margin-bottom: 0; + --wp-g2-flex-item-margin-right: calc(4px * 2); + --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); + --wp-g2-flex-item-margin-left: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border-color: transparent; + border-radius: 2px; + border-radius: var(--wp-g2-control-border-radius); + border-style: solid; + border-width: 1px; + box-shadow: 0 0 0 0.5px transparent; + box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; + box-sizing: border-box; + color: #1e1e1e; + color: var(--wp-g2-color-text); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 13px; + font-size: var(--wp-g2-font-size); + height: auto; + line-height: 1; + min-height: 30px; + min-height: var(--wp-g2-control-height); + outline: none; + padding-bottom: calc(4px * 1); + padding-bottom: calc(var(--wp-g2-grid-base) * 1); + padding-left: 12px; + padding-left: var(--wp-g2-control-padding-x); + padding-right: 12px; + padding-right: var(--wp-g2-control-padding-x); + padding-top: calc(4px * 1); + padding-top: calc(var(--wp-g2-grid-base) * 1); + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: auto; + text-align: center; + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); + background-color: #007cba; + background-color: var(--wp-g2-button-primary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-primary-border-color); + color: #ffffff; + color: var(--wp-g2-button-primary-text-color); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { + min-width: 0; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); + transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); + transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { + opacity: 0.5; + cursor: auto; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { + box-shadow: 0 0 0 0.5px #007cba; + box-shadow: var(--wp-g2-control-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { + box-shadow: 0 0 0 0.5px #D94F4F; + box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { + min-width: 30px; + min-width: var(--wp-g2-control-height); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #007cba; + color: var(--wp-g2-button-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + color: #ffffff; + color: var(--wp-g2-button-primary-text-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { + background-color: #007cba; + background-color: var(--wp-g2-button-primary-color-hover); + border-color: #007cba; + border-color: var(--wp-g2-button-primary-border-color-hover); + color: #ffffff; + color: var(--wp-g2-button-primary-text-color-hover); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { + background-color: #007cba; + background-color: var(--wp-g2-button-primary-color-focus); + border-color: #007cba; + border-color: var(--wp-g2-button-primary-border-color-focus); + color: #ffffff; + color: var(--wp-g2-button-primary-text-color-focus); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { + background-color: #1e1e1e; + background-color: var(--wp-g2-button-primary-color-active); + border-color: #007cba; + border-color: var(--wp-g2-button-primary-border-color-active); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { + background-color: #D94F4F; + background-color: var(--wp-g2-color-destructive); + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { + background-color: #D94F4F; + background-color: var(--wp-g2-color-destructive); + border-color: #D94F4F; + border-color: var(--wp-g2-color-destructive); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { + background-color: #1e1e1e; + background-color: var(--wp-g2-color-text); +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); + opacity: 1; + white-space: nowrap; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none!important; + transition: none!important; +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none!important; + transition: none!important; +} + + +`; diff --git a/packages/components/src/ui/button/test/index.js b/packages/components/src/ui/button/test/index.js new file mode 100644 index 00000000000000..2e1eaa253d02dc --- /dev/null +++ b/packages/components/src/ui/button/test/index.js @@ -0,0 +1,110 @@ +/** + * External dependencies + */ +import { render } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import { Button } from '..'; + +const MockIcon = () => ; + +describe( 'props', () => { + test( 'should render correctly', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render disabled', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render elevation', () => { + const { container } = render( + + ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render (Flex) gap', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render hasCaret', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render as link (href)', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render icon', () => { + const { container } = render( + + ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render isControl', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render isDestructive', () => { + const { container } = render( + + ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render isLoading', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render isNarrow', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render isRounded', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render isSubtle', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render prefix', () => { + const { container } = render( + + ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render size', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render suffix', () => { + const { container } = render( + + ); + expect( container.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render variant', () => { + const { container } = render( + + ); + expect( container.firstChild ).toMatchSnapshot(); + } ); +} ); diff --git a/packages/components/src/ui/utils/types.ts b/packages/components/src/ui/utils/types.ts index dc185834494300..3a1702f712447a 100644 --- a/packages/components/src/ui/utils/types.ts +++ b/packages/components/src/ui/utils/types.ts @@ -40,3 +40,10 @@ export type PopperProps = { */ placement?: PopperPlacement; }; + +export type SizeRangeDefault = + | 'xLarge' + | 'large' + | 'medium' + | 'small' + | 'xSmall'; diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index a753de10ded502..0782a04ad4b2e7 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -17,6 +17,7 @@ "src/dashicon/**/*", "src/flex/**/*", "src/form-group/**/*", + "src/spinner/**/*", "src/tip/**/*", "src/ui/**/*", "src/utils/**/*", From 0fc94758b603ad2e37e7076ca2d1dcd24eede986 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 22 Feb 2021 13:54:37 -0500 Subject: [PATCH 02/14] Update package-lock.json with react-i18n --- package-lock.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package-lock.json b/package-lock.json index 96527e7d6530dd..c38dd8aebb1eee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12431,6 +12431,7 @@ "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", "@wordpress/keycodes": "file:packages/keycodes", "@wordpress/primitives": "file:packages/primitives", + "@wordpress/react-i18n": "file:packages/react-i18n", "@wordpress/rich-text": "file:packages/rich-text", "@wordpress/warning": "file:packages/warning", "@wp-g2/components": "^0.0.159", From cb2290770a2f73106cc641d0810905d012d4800d Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 22 Feb 2021 15:03:20 -0500 Subject: [PATCH 03/14] Fix prefix prop for BaseButton. Update BaseButton + Button stories --- .../src/ui/base-button/component.js | 6 +- .../components/src/ui/base-button/hook.js | 4 +- .../components/src/ui/base-button/types.ts | 2 +- .../src/ui/button-group/stories/index.js | 38 ++----- .../components/src/ui/button/stories/index.js | 101 +++++++++--------- 5 files changed, 66 insertions(+), 85 deletions(-) diff --git a/packages/components/src/ui/base-button/component.js b/packages/components/src/ui/base-button/component.js index 1f06eb353ab992..d71fa097c4ebcc 100644 --- a/packages/components/src/ui/base-button/component.js +++ b/packages/components/src/ui/base-button/component.js @@ -44,7 +44,7 @@ function BaseButton( props, forwardedRef ) { isFocused = false, isLoading = false, noWrap = true, - pre, + prefix, suffix, ...otherProps } = useBaseButton( props ); @@ -70,7 +70,7 @@ function BaseButton( props, forwardedRef ) { ref={ forwardedRef } > - { pre && ( + { prefix && ( - { pre } + { prefix } ) } { icon && ( diff --git a/packages/components/src/ui/base-button/hook.js b/packages/components/src/ui/base-button/hook.js index fc5e98bf8bef7a..f81b22feb3caea 100644 --- a/packages/components/src/ui/base-button/hook.js +++ b/packages/components/src/ui/base-button/hook.js @@ -40,7 +40,7 @@ export function useBaseButton( props ) { isSubtle = false, justify = 'center', noWrap = true, - pre, + prefix, size = 'medium', suffix, textAlign = 'center', @@ -91,7 +91,7 @@ export function useBaseButton( props ) { hasCaret, icon, isDestructive, - pre, + prefix, suffix, iconSize, isLoading, diff --git a/packages/components/src/ui/base-button/types.ts b/packages/components/src/ui/base-button/types.ts index 186de8211936b5..ed282d7d26c43a 100644 --- a/packages/components/src/ui/base-button/types.ts +++ b/packages/components/src/ui/base-button/types.ts @@ -133,7 +133,7 @@ export type Props = { /** * Renders prefix content within `Button`. */ - pre?: ReactElement; + prefix?: ReactElement; /** * Determines the size of `Button`. * diff --git a/packages/components/src/ui/button-group/stories/index.js b/packages/components/src/ui/button-group/stories/index.js index b9fc46b0f543b7..7b7cfff06d916a 100644 --- a/packages/components/src/ui/button-group/stories/index.js +++ b/packages/components/src/ui/button-group/stories/index.js @@ -1,3 +1,7 @@ +/** + * External dependencies + */ +import { boolean } from '@storybook/addon-knobs'; /** * WordPress dependencies */ @@ -17,40 +21,16 @@ export default { export const _default = () => { const [ value, setValue ] = useState( 'bold' ); + const props = { + expanded: boolean( 'expanded', false ), + segmented: boolean( 'segmented', false ), + }; return ( - + - - Medium - - - - Small - - - - ); -}; +const createSelectProps = ( collection ) => + collection.reduce( ( data, item ) => ( { ...data, [ item ]: item } ), {} ); export const _default = () => { - return ( - <> - - - - - - - - - - Prefix } - suffix={ Suffix } - variant="secondary" - /> - Prefix } - suffix={ Suffix } - variant="secondary" - /> - + const disabled = boolean( 'disabled', false ); + const elevation = number( 'elevation', 0 ); + const hasCaret = boolean( 'hasCaret', false ); + const isActive = boolean( 'isActive', false ); + const isBlock = boolean( 'isBlock', false ); + const isControl = boolean( 'isControl', false ); + const isDestructive = boolean( 'isDestructive', false ); + const isLoading = boolean( 'isLoading', false ); + const isRounded = boolean( 'isRounded', false ); + const isSplit = boolean( 'isSplit', false ); + const isSubtle = boolean( 'isSubtle', false ); + const size = select( + 'size', + createSelectProps( [ 'large', 'medium', 'small', 'xSmall' ] ), + 'medium' ); + + const variant = select( + 'variant', + createSelectProps( [ + 'primary', + 'secondary', + 'tertiary', + 'plain', + 'link', + ] ), + 'secondary' + ); + + const props = { + disabled, + elevation, + hasCaret, + isActive, + isBlock, + isControl, + isDestructive, + isLoading, + isRounded, + isSplit, + isSubtle, + size, + variant, + }; + + return ; }; From a3cf2d5dac16153e34bd0533cf708f34defe0d80 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 22 Feb 2021 15:04:19 -0500 Subject: [PATCH 04/14] Add dependencies to tsconfig.json reference --- packages/components/tsconfig.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 0782a04ad4b2e7..038065b0b20253 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -9,7 +9,9 @@ { "path": "../deprecated" }, { "path": "../element" }, { "path": "../hooks" }, - { "path": "../primitives" } + { "path": "../icons" }, + { "path": "../primitives" }, + { "path": "../react-i18n" } ], "include": [ "src/animate/**/*", From 1aec3c268c67e8446a7cfbf16d2990823a9d03ff Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 22 Feb 2021 15:18:51 -0500 Subject: [PATCH 05/14] Add ButtonGroup documentation --- .../components/src/ui/button-group/README.md | 40 +++++++++++++++++++ .../src/ui/button-group/component.js | 10 ++--- 2 files changed, 45 insertions(+), 5 deletions(-) create mode 100644 packages/components/src/ui/button-group/README.md diff --git a/packages/components/src/ui/button-group/README.md b/packages/components/src/ui/button-group/README.md new file mode 100644 index 00000000000000..cbd8689ec442d1 --- /dev/null +++ b/packages/components/src/ui/button-group/README.md @@ -0,0 +1,40 @@ +# ButtonGroup + +`ButtonGroup` is a form component that groups related buttons together. It can also coordinate the checked state of multiple `Button` components. + +## Usage + +```jsx +import { Button, ButtonGroup } from '@wordpress/components/ui'; + +const Example = () => { + return ( + + + + + + ); +}; +``` + +### Radio group + +A `ButtonGroup` can also be used to create a [radio group](https://www.w3.org/TR/wai-aria-practices/#radiobutton), highlighting a single selected value within the group. + +```jsx +import { Button, ButtonGroup } from '@wordpress/components/ui'; +import { useState } from '@wordpress/element'; + +const Example = () => { + const [ value, setValue ] = useState( 'code' ); + + return ( + + + + + + ); +}; +``` diff --git a/packages/components/src/ui/button-group/component.js b/packages/components/src/ui/button-group/component.js index d2e373acf1bd45..d784862c9dc53a 100644 --- a/packages/components/src/ui/button-group/component.js +++ b/packages/components/src/ui/button-group/component.js @@ -104,7 +104,7 @@ function ButtonGroup( props, forwardedRef ) { } /** - * `ButtonGroup` is a form component contains and coordinates the checked state of multiple `Button` components. + * `ButtonGroup` is a form component that groups related buttons together. It can also coordinate the checked state of multiple `Button` components. * * @example * ```jsx @@ -112,10 +112,10 @@ function ButtonGroup( props, forwardedRef ) { * * function Example() { * return ( - * - * - * - * + * + * + * + * * * ); * } From e1c8e4b7a78b449b29160f3b6bf3b793feee10a3 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 22 Feb 2021 15:20:37 -0500 Subject: [PATCH 06/14] Update Button README --- packages/components/src/ui/button/README.md | 39 ++----------------- .../components/src/ui/button/component.js | 2 +- 2 files changed, 4 insertions(+), 37 deletions(-) diff --git a/packages/components/src/ui/button/README.md b/packages/components/src/ui/button/README.md index ebfbbfd5a60e22..3a9366ed914bef 100644 --- a/packages/components/src/ui/button/README.md +++ b/packages/components/src/ui/button/README.md @@ -1,40 +1,14 @@ ---- -title: Button -type: forms -description: '`Button` is a component used to trigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation.' -slug: /components/button/ -keywords: ['button', 'action'] ---- - # Button `Button` is a component used to trigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation. -## Table of contents - - - - -- [Usage](#usage) -- [Props](#props) -- [See Also](#see-also) - - - - - - - - - - ## Usage -```jsx live -import { Button } from '@wp-g2/components'; +```jsx +import { Button } from '@wordpress/components/ui'; function Example() { - return ; + return ; } ``` @@ -183,10 +157,3 @@ Modifies the text-align (CSS) styles of `Button` content. **Type**: `"primary"`,`"secondary"`,`"tertiary"`,`"plain"`,`"link"` Determines the `Button` variant to render. - - - - -## See Also - -- [TextInput](../textinput/) diff --git a/packages/components/src/ui/button/component.js b/packages/components/src/ui/button/component.js index 762f09490f5d5b..15e19f80509ba9 100644 --- a/packages/components/src/ui/button/component.js +++ b/packages/components/src/ui/button/component.js @@ -118,7 +118,7 @@ function Button( props, forwardedRef ) { * * @example * ```jsx - * import { Button } from `@wordpress/components/ui` + * import { Button } from `@wordpress/components/ui`; * * function Example() { * return ; From 777775293128fc3e48768f5758a640be423fca92 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 22 Feb 2021 16:44:19 -0500 Subject: [PATCH 07/14] Rename prefix back to pre. Update test + snapshots --- .../src/ui/base-button/component.js | 6 +- .../components/src/ui/base-button/hook.js | 4 +- .../test/__snapshots__/index.js.snap | 87 +- .../components/src/ui/base-button/types.ts | 2 +- .../test/__snapshots__/index.js.snap | 167 +- packages/components/src/ui/button/README.md | 2 +- .../button/test/__snapshots__/index.js.snap | 3329 ++++++++--------- .../components/src/ui/button/test/index.js | 38 +- 8 files changed, 1741 insertions(+), 1894 deletions(-) diff --git a/packages/components/src/ui/base-button/component.js b/packages/components/src/ui/base-button/component.js index d71fa097c4ebcc..1f06eb353ab992 100644 --- a/packages/components/src/ui/base-button/component.js +++ b/packages/components/src/ui/base-button/component.js @@ -44,7 +44,7 @@ function BaseButton( props, forwardedRef ) { isFocused = false, isLoading = false, noWrap = true, - prefix, + pre, suffix, ...otherProps } = useBaseButton( props ); @@ -70,7 +70,7 @@ function BaseButton( props, forwardedRef ) { ref={ forwardedRef } > - { prefix && ( + { pre && ( - { prefix } + { pre } ) } { icon && ( diff --git a/packages/components/src/ui/base-button/hook.js b/packages/components/src/ui/base-button/hook.js index f81b22feb3caea..fc5e98bf8bef7a 100644 --- a/packages/components/src/ui/base-button/hook.js +++ b/packages/components/src/ui/base-button/hook.js @@ -40,7 +40,7 @@ export function useBaseButton( props ) { isSubtle = false, justify = 'center', noWrap = true, - prefix, + pre, size = 'medium', suffix, textAlign = 'center', @@ -91,7 +91,7 @@ export function useBaseButton( props ) { hasCaret, icon, isDestructive, - prefix, + pre, suffix, iconSize, isLoading, diff --git a/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap b/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap index b1a8195cfbd720..744c7a4a4c0d0d 100644 --- a/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`props should render correctly 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -18,10 +18,6 @@ exports[`props should render correctly 1`] = ` display: flex; --wp-g2-flex-gap: calc(4px * 2); --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - --wp-g2-flex-item-margin-bottom: 0; - --wp-g2-flex-item-margin-right: calc(4px * 2); - --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); - --wp-g2-flex-item-margin-left: 0; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -85,61 +81,61 @@ exports[`props should render correctly 1`] = ` } @media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { margin-left: calc(4px * 2); margin-left: calc(var(--wp-g2-grid-base) * 2); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { min-width: 0; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { - -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); - transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); - transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { + -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); + transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); + transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { opacity: 0.5; cursor: auto; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { box-shadow: 0 0 0 0.5px #007cba; box-shadow: var(--wp-g2-control-box-shadow-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { box-shadow: 0 0 0 0.5px #D94F4F; box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { min-width: 30px; min-width: var(--wp-g2-control-height); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { display: block; } -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -166,18 +162,18 @@ exports[`props should render correctly 1`] = ` } @media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -190,7 +186,7 @@ exports[`props should render correctly 1`] = ` margin: 0; background: transparent; display: block; - margin: 0!important; + margin: 0 !important; pointer-events: none; position: absolute; will-change: box-shadow; @@ -209,20 +205,20 @@ exports[`props should render correctly 1`] = ` } @media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; } +`; + +exports[`props should render isControl 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -2277,18 +2287,18 @@ exports[`props should render icon 1`] = ` } @media (prefers-reduced-motion) { - .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none!important; - transition: none!important; + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -2301,7 +2311,7 @@ exports[`props should render icon 1`] = ` margin: 0; background: transparent; display: block; - margin: 0!important; + margin: 0 !important; pointer-events: none; position: absolute; will-change: box-shadow; @@ -2320,57 +2330,18 @@ exports[`props should render icon 1`] = ` } @media (prefers-reduced-motion) { - .emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { - -webkit-transition: none!important; - transition: none!important; + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; } - -`; - -exports[`props should render isControl 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -2387,10 +2358,6 @@ exports[`props should render isControl 1`] = ` display: flex; --wp-g2-flex-gap: calc(4px * 2); --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - --wp-g2-flex-item-margin-bottom: 0; - --wp-g2-flex-item-margin-right: calc(4px * 2); - --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); - --wp-g2-flex-item-margin-left: 0; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2478,74 +2445,74 @@ exports[`props should render isControl 1`] = ` } @media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { margin-left: calc(4px * 2); margin-left: calc(var(--wp-g2-grid-base) * 2); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { min-width: 0; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { - -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); - transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); - transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { + -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); + transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); + transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { opacity: 0.5; cursor: auto; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { box-shadow: 0 0 0 0.5px #007cba; box-shadow: var(--wp-g2-control-box-shadow-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { box-shadow: 0 0 0 0.5px #D94F4F; box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { min-width: 30px; min-width: var(--wp-g2-control-height); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { display: block; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { color: #007cba; color: var(--wp-g2-button-text-color-active); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-hover); border-color: #007cba; border-color: var(--wp-g2-button-secondary-border-color-hover); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-focus); border-color: #007cba; @@ -2554,7 +2521,7 @@ exports[`props should render isControl 1`] = ` color: var(--wp-g2-button-secondary-text-color-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { background-color: rgba(0, 0, 0, 0.05); background-color: var(--wp-g2-button-secondary-color-active); border-color: #007cba; @@ -2563,43 +2530,70 @@ exports[`props should render isControl 1`] = ` color: var(--wp-g2-button-secondary-text-color-active); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { color: #1e1e1e; color: var(--wp-g2-color-text); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { color: #1e1e1e; color: var(--wp-g2-color-text); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { border-color: #007cba; border-color: var(--wp-g2-button-primary-border-color-focus); box-shadow: 0 0 0 0.5px #007cba; box-shadow: var(--wp-g2-control-box-shadow-focus); } -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + +`; + +exports[`props should render isDestructive 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -2626,18 +2620,18 @@ exports[`props should render isControl 1`] = ` } @media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -2650,7 +2644,7 @@ exports[`props should render isControl 1`] = ` margin: 0; background: transparent; display: block; - margin: 0!important; + margin: 0 !important; pointer-events: none; position: absolute; will-change: box-shadow; @@ -2669,44 +2663,18 @@ exports[`props should render isControl 1`] = ` } @media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; } - -`; - -exports[`props should render isDestructive 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -2723,10 +2691,6 @@ exports[`props should render isDestructive 1`] = ` display: flex; --wp-g2-flex-gap: calc(4px * 2); --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - --wp-g2-flex-item-margin-bottom: 0; - --wp-g2-flex-item-margin-right: calc(4px * 2); - --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); - --wp-g2-flex-item-margin-left: 0; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2805,74 +2769,74 @@ exports[`props should render isDestructive 1`] = ` } @media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { margin-left: calc(4px * 2); margin-left: calc(var(--wp-g2-grid-base) * 2); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { min-width: 0; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { - -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); - transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); - transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { + -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); + transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); + transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { opacity: 0.5; cursor: auto; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { box-shadow: 0 0 0 0.5px #007cba; box-shadow: var(--wp-g2-control-box-shadow-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { box-shadow: 0 0 0 0.5px #D94F4F; box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { min-width: 30px; min-width: var(--wp-g2-control-height); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { display: block; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { color: #007cba; color: var(--wp-g2-button-text-color-active); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-hover); border-color: #007cba; border-color: var(--wp-g2-button-secondary-border-color-hover); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-focus); border-color: #007cba; @@ -2881,7 +2845,7 @@ exports[`props should render isDestructive 1`] = ` color: var(--wp-g2-button-secondary-text-color-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { background-color: rgba(0, 0, 0, 0.05); background-color: var(--wp-g2-button-secondary-color-active); border-color: #007cba; @@ -2890,112 +2854,31 @@ exports[`props should render isDestructive 1`] = ` color: var(--wp-g2-button-secondary-text-color-active); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { color: #1e1e1e; color: var(--wp-g2-color-text); } -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0!important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; -} - +`; + +exports[`props should render isRounded 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -3904,18 +3884,18 @@ exports[`props should render isNarrow 1`] = ` } @media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -3928,7 +3908,7 @@ exports[`props should render isNarrow 1`] = ` margin: 0; background: transparent; display: block; - margin: 0!important; + margin: 0 !important; pointer-events: none; position: absolute; will-change: box-shadow; @@ -3947,44 +3927,18 @@ exports[`props should render isNarrow 1`] = ` } @media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; } - -`; - -exports[`props should render isRounded 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -4001,10 +3955,6 @@ exports[`props should render isRounded 1`] = ` display: flex; --wp-g2-flex-gap: calc(4px * 2); --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - --wp-g2-flex-item-margin-bottom: 0; - --wp-g2-flex-item-margin-right: calc(4px * 2); - --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); - --wp-g2-flex-item-margin-left: 0; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4082,74 +4032,74 @@ exports[`props should render isRounded 1`] = ` } @media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { margin-left: calc(4px * 2); margin-left: calc(var(--wp-g2-grid-base) * 2); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { min-width: 0; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { - -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); - transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); - transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { + -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); + transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); + transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { opacity: 0.5; cursor: auto; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { box-shadow: 0 0 0 0.5px #007cba; box-shadow: var(--wp-g2-control-box-shadow-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { box-shadow: 0 0 0 0.5px #D94F4F; box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { min-width: 30px; min-width: var(--wp-g2-control-height); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { display: block; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { color: #007cba; color: var(--wp-g2-button-text-color-active); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-hover); border-color: #007cba; border-color: var(--wp-g2-button-secondary-border-color-hover); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-focus); border-color: #007cba; @@ -4158,7 +4108,7 @@ exports[`props should render isRounded 1`] = ` color: var(--wp-g2-button-secondary-text-color-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { background-color: rgba(0, 0, 0, 0.05); background-color: var(--wp-g2-button-secondary-color-active); border-color: #007cba; @@ -4167,29 +4117,56 @@ exports[`props should render isRounded 1`] = ` color: var(--wp-g2-button-secondary-text-color-active); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { color: #1e1e1e; color: var(--wp-g2-color-text); } -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + +`; + +exports[`props should render isSubtle 1`] = ` +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -4216,18 +4193,18 @@ exports[`props should render isRounded 1`] = ` } @media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -4240,7 +4217,7 @@ exports[`props should render isRounded 1`] = ` margin: 0; background: transparent; display: block; - margin: 0!important; + margin: 0 !important; pointer-events: none; position: absolute; will-change: box-shadow; @@ -4259,44 +4236,18 @@ exports[`props should render isRounded 1`] = ` } @media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; } - -`; - -exports[`props should render isSubtle 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -4313,10 +4264,6 @@ exports[`props should render isSubtle 1`] = ` display: flex; --wp-g2-flex-gap: calc(4px * 2); --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - --wp-g2-flex-item-margin-bottom: 0; - --wp-g2-flex-item-margin-right: calc(4px * 2); - --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); - --wp-g2-flex-item-margin-left: 0; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4397,74 +4344,74 @@ exports[`props should render isSubtle 1`] = ` } @media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { margin-left: calc(4px * 2); margin-left: calc(var(--wp-g2-grid-base) * 2); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { min-width: 0; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { - -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); - transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); - transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { + -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); + transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); + transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { opacity: 0.5; cursor: auto; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { box-shadow: 0 0 0 0.5px #007cba; box-shadow: var(--wp-g2-control-box-shadow-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { box-shadow: 0 0 0 0.5px #D94F4F; box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { min-width: 30px; min-width: var(--wp-g2-control-height); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { display: block; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { color: #007cba; color: var(--wp-g2-button-text-color-active); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-hover); border-color: #007cba; border-color: var(--wp-g2-button-secondary-border-color-hover); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-focus); border-color: #007cba; @@ -4473,7 +4420,7 @@ exports[`props should render isSubtle 1`] = ` color: var(--wp-g2-button-secondary-text-color-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { background-color: rgba(0, 0, 0, 0.05); background-color: var(--wp-g2-button-secondary-color-active); border-color: #007cba; @@ -4482,150 +4429,70 @@ exports[`props should render isSubtle 1`] = ` color: var(--wp-g2-button-secondary-text-color-active); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { color: #1e1e1e; color: var(--wp-g2-color-text); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { border-color: transparent; border-color: var(--wp-g2-control-border-color-subtle); color: #1e1e1e; color: var(--wp-g2-color-text); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { border-color: #007cba; border-color: var(--wp-g2-button-primary-border-color-focus); } -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0!important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; -} - - -`; - -exports[`props should render prefix 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + +`; + +exports[`props should render prefix 1`] = ` +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -4642,10 +4509,6 @@ exports[`props should render prefix 1`] = ` display: flex; --wp-g2-flex-gap: calc(4px * 2); --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - --wp-g2-flex-item-margin-bottom: 0; - --wp-g2-flex-item-margin-right: calc(4px * 2); - --wp-g2-flex-item-margin-right: var(--wp-g2-flex-gap); - --wp-g2-flex-item-margin-left: 0; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4722,74 +4585,74 @@ exports[`props should render prefix 1`] = ` } @media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; + .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none !important; + transition: none !important; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>*+*:not(marquee) { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * + *:not(marquee) { margin-left: calc(4px * 2); margin-left: calc(var(--wp-g2-grid-base) * 2); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0>* { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * { min-width: 0; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { - -webkit-transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); - transition: all 200ms cubic-bezier(0.12,0.8,0.32,1); - transition: all var(--wp-g2-transition-duration) cubic-bezier(0.12,0.8,0.32,1); +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:hover, +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active, +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus { + -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); + -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); + transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); + transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[disabled]:not([aria-busy='true']), -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[aria-disabled='true']:not([aria-busy='true']) { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[disabled]:not( [aria-busy='true'] ), +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[aria-disabled='true']:not( [aria-busy='true'] ) { opacity: 0.5; cursor: auto; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus { box-shadow: 0 0 0 0.5px #007cba; box-shadow: var(--wp-g2-control-box-shadow-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:focus { box-shadow: 0 0 0 0.5px #D94F4F; box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-icon='true'] { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-icon='true'] { min-width: 30px; min-width: var(--wp-g2-control-height); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 svg { display: block; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active { color: #007cba; color: var(--wp-g2-button-text-color-active); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:hover { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-hover); border-color: #007cba; border-color: var(--wp-g2-button-secondary-border-color-hover); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:focus, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-focused='true'] { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus, +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-focused='true'] { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-focus); border-color: #007cba; @@ -4798,7 +4661,7 @@ exports[`props should render prefix 1`] = ` color: var(--wp-g2-button-secondary-text-color-focus); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active { background-color: rgba(0, 0, 0, 0.05); background-color: var(--wp-g2-button-secondary-color-active); border-color: #007cba; @@ -4807,24 +4670,24 @@ exports[`props should render prefix 1`] = ` color: var(--wp-g2-button-secondary-text-color-active); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'] { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:hover, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:focus, -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true'][data-focused='true'] { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:hover, +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:active, +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:focus, +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true'][data-focused='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0[data-destructive='true']:active { +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:active { color: #1e1e1e; color: var(--wp-g2-color-text); } @@ -4846,27 +4709,25 @@ exports[`props should render prefix 1`] = ` min-height: 0; min-width: 0; display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 13px; + font-size: var(--wp-g2-font-size); opacity: 1; + white-space: nowrap; } @media (prefers-reduced-motion) { .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } } [data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none!important; - transition: none!important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 svg { - display: block; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-transition: none !important; + transition: none !important; } .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { @@ -4880,34 +4741,39 @@ exports[`props should render prefix 1`] = ` font-weight: normal; font-weight: var(--wp-g2-font-weight); margin: 0; + background: transparent; display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); + margin: 0 !important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); opacity: 1; - white-space: nowrap; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); } @media (prefers-reduced-motion) { .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } } [data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none!important; - transition: none!important; + -webkit-transition: none !important; + transition: none !important; } -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -4918,41 +4784,38 @@ exports[`props should render prefix 1`] = ` font-weight: normal; font-weight: var(--wp-g2-font-weight); margin: 0; - background: transparent; display: block; - margin: 0!important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); } @media (prefers-reduced-motion) { - .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none!important; - transition: none!important; + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none!important; - transition: none!important; +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { + display: block; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render disabled', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render elevation', () => { - const { container } = render( - - ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render (Flex) gap', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render hasCaret', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render as link (href)', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render icon', () => { const { container } = render( - + ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render isControl', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render isDestructive', () => { - const { container } = render( - - ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render isLoading', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render isNarrow', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render isRounded', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render isSubtle', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render prefix', () => { const { container } = render( - + ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render size', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render suffix', () => { const { container } = render( - + ); expect( container.firstChild ).toMatchSnapshot(); } ); test( 'should render variant', () => { const { container } = render( - + ); expect( container.firstChild ).toMatchSnapshot(); } ); From f2f7797eb2f100269c3f5efe168463cb071874e7 Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Tue, 23 Feb 2021 10:41:33 -0800 Subject: [PATCH 08/14] Make style diff snapshots work with CSS variables --- .../button/test/__snapshots__/index.js.snap | 6003 ++--------------- .../components/src/ui/button/test/index.js | 73 +- .../ui/flex/test/__snapshots__/index.js.snap | 108 + .../test/__snapshots__/index.js.snap | 43 + .../matchers/to-match-style-diff-snapshot.js | 46 +- 5 files changed, 689 insertions(+), 5584 deletions(-) diff --git a/packages/components/src/ui/button/test/__snapshots__/index.js.snap b/packages/components/src/ui/button/test/__snapshots__/index.js.snap index bb24dd7dd9ea1e..e4b13b472000f4 100644 --- a/packages/components/src/ui/button/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/button/test/__snapshots__/index.js.snap @@ -1,87 +1,59 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`props should render (Flex) gap 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} +"Snapshot Diff: +- First value ++ Second value + +- Snapshot Diff: +- - First value +- + Second value +- +- @@ -1,8 +1,8 @@ +- Array [ +- Object { +- - \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 1)\\", +- + \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 2)\\", +- \\"-moz-appearance\\": \\"none\\", +- \\"-moz-osx-font-smoothing\\": \\"grayscale\\", +- \\"-moz-user-select\\": \\"none\\", +- \\"-ms-flex-align\\": \\"center\\", +- \\"-ms-flex-direction\\": \\"row\\"," +`; -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} +exports[`props should render as link (href) 1`] = ` +"Snapshot Diff: +- First value ++ Second value + +@@ -1,15 +1,14 @@ +- + +- ++ " +`; +exports[`props should render correctly 1`] = ` .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; @@ -97,8 +69,8 @@ exports[`props should render (Flex) gap 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - --wp-g2-flex-gap: calc(4px * 1); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 1); + --wp-g2-flex-gap: calc(4px * 2); + --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -187,8 +159,8 @@ exports[`props should render (Flex) gap 1`] = ` } .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 1); - margin-left: calc(var(--wp-g2-grid-base) * 1); + margin-left: calc(4px * 2); + margin-left: calc(var(--wp-g2-grid-base) * 2); } .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { @@ -282,34 +254,7 @@ exports[`props should render (Flex) gap 1`] = ` color: var(--wp-g2-color-text); } - -`; - -exports[`props should render as link (href) 1`] = ` -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -320,269 +265,69 @@ exports[`props should render as link (href) 1`] = ` font-weight: normal; font-weight: var(--wp-g2-font-weight); margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + display: var(--wp-g2-flex-item-display); + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; font-size: 13px; font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); + opacity: 1; + white-space: nowrap; } @media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { -webkit-transition: none !important; transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { -webkit-transition: none !important; transition: none !important; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0 !important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: -1px; + box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: -1px; + right: -1px; + top: -1px; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { - display: block; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; + } } [data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { @@ -590,7 +335,7 @@ exports[`props should render as link (href) 1`] = ` transition: none !important; } - - + `; -exports[`props should render correctly 1`] = ` -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} +exports[`props should render disabled 1`] = ` +"Snapshot Diff: +- First value ++ Second value + +@@ -5,11 +5,10 @@ + data-destructive=\\"false\\" + data-focused=\\"false\\" + data-g2-c16t=\\"true\\" + data-g2-component=\\"Button\\" + data-icon=\\"false\\" +- disabled=\\"\\" + > + * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} +exports[`props should render elevation 1`] = ` +"Snapshot Diff: +- First value ++ Second value -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} +- Snapshot Diff: +- Compared values have no visual difference." +`; -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { - display: block; -} +exports[`props should render hasCaret 1`] = ` +"Snapshot Diff: +- First value ++ Second value -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} +@@ -14,29 +14,10 @@ + data-g2-component=\\"ButtonContent\\" + > + Lorem + + +- +- +- +- +- " +`; -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} +exports[`props should render icon 1`] = ` +"Snapshot Diff: +- First value ++ Second value + +@@ -4,19 +4,12 @@ + data-active=\\"false\\" + data-destructive=\\"false\\" + data-focused=\\"false\\" + data-g2-c16t=\\"true\\" + data-g2-component=\\"Button\\" +- data-icon=\\"true\\" +- > +- +- +- + " +`; -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} +exports[`props should render isControl 1`] = ` +"Snapshot Diff: +- First value ++ Second value + +- Snapshot Diff: +- - First value +- + Second value +- +- @@ -59,36 +59,34 @@ +- \\"44\\": \\"-webkit-user-select\\", +- \\"45\\": \\"-moz-user-select\\", +- \\"46\\": \\"-ms-user-select\\", +- \\"47\\": \\"user-select\\", +- \\"48\\": \\"text-align\\", +- - \\"49\\": \\"border\\", +- \\"5\\": \\"font-weight\\", +- \\"6\\": \\"margin\\", +- \\"7\\": \\"display\\", +- \\"8\\": \\"--wp-g2-flex-gap\\", +- \\"9\\": \\"-webkit-align-items\\", +- \\"align-items\\": \\"center\\", +- \\"appearance\\": \\"none\\", +- - \\"background-color\\": \\"var(--wp-g2-control-background-color)\\", +- - \\"border\\": \\"1px solid\\", +- - \\"border-color\\": \\"var(--wp-g2-control-border-color)\\", +- + \\"background-color\\": \\"var(--wp-g2-button-secondary-color)\\", +- + \\"border-color\\": \\"var(--wp-g2-button-secondary-border-color)\\", +- \\"border-radius\\": \\"var(--wp-g2-control-border-radius)\\", +- \\"border-style\\": \\"solid\\", +- \\"border-width\\": \\"1px\\", +- \\"box-shadow\\": \\"0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent\\", +- \\"box-sizing\\": \\"border-box\\", +- - \\"color\\": \\"var(--wp-g2-color-text)\\", +- + \\"color\\": \\"var(--wp-g2-button-secondary-text-color)\\", +- \\"cursor\\": \\"pointer\\", +- \\"display\\": \\"inline-flex\\", +- \\"flex-direction\\": \\"row\\", +- \\"font-family\\": \\"var(--wp-g2-font-family)\\", +- \\"font-size\\": \\"var(--wp-g2-font-size)\\", +- \\"font-weight\\": \\"600\\", +- \\"height\\": \\"auto\\", +- \\"justify-content\\": \\"center\\", +- - \\"length\\": 50, +- + \\"length\\": 49, +- \\"line-height\\": \\"1\\", +- \\"margin\\": \\"0\\", +- \\"min-height\\": \\"var(--wp-g2-control-height)\\", +- \\"outline\\": \\"none\\", +- \\"padding-bottom\\": \\"calc(var(--wp-g2-grid-base) * 1)\\"," +`; -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} +exports[`props should render isDestructive 1`] = ` +"Snapshot Diff: +- First value ++ Second value + +- Snapshot Diff: +- - First value +- + Second value +- +- @@ -98,13 +98,6 @@ +- \\"text-decoration\\": \\"none\\", +- \\"touch-action\\": \\"manipulation\\", +- \\"user-select\\": \\"none\\", +- \\"width\\": \\"auto\\", +- }, +- - Object { +- - \\"0\\": \\"border-color\\", +- - \\"1\\": \\"color\\", +- - \\"border-color\\": \\"var(--wp-g2-color-destructive)\\", +- - \\"color\\": \\"var(--wp-g2-color-destructive)\\", +- - \\"length\\": 2, +- - }, +- ]" +`; -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} +exports[`props should render isLoading 1`] = ` +"Snapshot Diff: +- First value ++ Second value -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} +- Snapshot Diff: +- Compared values have no visual difference." +`; -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} +exports[`props should render isNarrow 1`] = ` +"Snapshot Diff: +- First value ++ Second value -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} +- Snapshot Diff: +- Compared values have no visual difference." +`; -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} +exports[`props should render isRounded 1`] = ` +"Snapshot Diff: +- First value ++ Second value + +- Snapshot Diff: +- - First value +- + Second value +- +- @@ -68,11 +68,11 @@ +- \\"9\\": \\"-webkit-align-items\\", +- \\"align-items\\": \\"center\\", +- \\"appearance\\": \\"none\\", +- \\"background-color\\": \\"var(--wp-g2-button-secondary-color)\\", +- \\"border-color\\": \\"var(--wp-g2-button-secondary-border-color)\\", +- - \\"border-radius\\": \\"99999px\\", +- + \\"border-radius\\": \\"var(--wp-g2-control-border-radius)\\", +- \\"border-style\\": \\"solid\\", +- \\"border-width\\": \\"1px\\", +- \\"box-shadow\\": \\"0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent\\", +- \\"box-sizing\\": \\"border-box\\", +- \\"color\\": \\"var(--wp-g2-button-secondary-text-color)\\"," +`; -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} +exports[`props should render isSubtle 1`] = ` +"Snapshot Diff: +- First value ++ Second value + +- Snapshot Diff: +- - First value +- + Second value +- +- @@ -67,17 +67,17 @@ +- \\"8\\": \\"--wp-g2-flex-gap\\", +- \\"9\\": \\"-webkit-align-items\\", +- \\"align-items\\": \\"center\\", +- \\"appearance\\": \\"none\\", +- \\"background-color\\": \\"var(--wp-g2-button-secondary-color)\\", +- - \\"border-color\\": \\"var(--wp-g2-control-border-color-subtle)\\", +- + \\"border-color\\": \\"var(--wp-g2-button-secondary-border-color)\\", +- \\"border-radius\\": \\"var(--wp-g2-control-border-radius)\\", +- \\"border-style\\": \\"solid\\", +- \\"border-width\\": \\"1px\\", +- \\"box-shadow\\": \\"0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent\\", +- \\"box-sizing\\": \\"border-box\\", +- - \\"color\\": \\"var(--wp-g2-color-text)\\", +- + \\"color\\": \\"var(--wp-g2-button-secondary-text-color)\\", +- \\"cursor\\": \\"pointer\\", +- \\"display\\": \\"inline-flex\\", +- \\"flex-direction\\": \\"row\\", +- \\"font-family\\": \\"var(--wp-g2-font-family)\\", +- \\"font-size\\": \\"var(--wp-g2-font-size)\\"," +`; -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} +exports[`props should render prefix 1`] = ` +"Snapshot Diff: +- First value ++ Second value + +@@ -7,19 +7,10 @@ + data-g2-c16t=\\"true\\" + data-g2-component=\\"Button\\" + data-icon=\\"false\\" + > + +- +- Prefix +- +- +- + Lorem" +`; -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} +exports[`props should render size 1`] = ` +"Snapshot Diff: +- First value ++ Second value + +- Snapshot Diff: +- - First value +- + Second value +- +- @@ -85,15 +85,15 @@ +- \\"height\\": \\"auto\\", +- \\"justify-content\\": \\"center\\", +- \\"length\\": 49, +- \\"line-height\\": \\"1\\", +- \\"margin\\": \\"0\\", +- - \\"min-height\\": \\"var(--wp-g2-control-height-small)\\", +- + \\"min-height\\": \\"var(--wp-g2-control-height)\\", +- \\"outline\\": \\"none\\", +- \\"padding-bottom\\": \\"calc(var(--wp-g2-grid-base) * 1)\\", +- - \\"padding-left\\": \\"var(--wp-g2-control-padding-x)\\", +- - \\"padding-right\\": \\"var(--wp-g2-control-padding-x)\\", +- + \\"padding-left\\": \\"var(--wp-g2-button-padding-x)\\", +- + \\"padding-right\\": \\"var(--wp-g2-button-padding-x)\\", +- \\"padding-top\\": \\"calc(var(--wp-g2-grid-base) * 1)\\", +- \\"position\\": \\"relative\\", +- \\"text-align\\": \\"center\\", +- \\"text-decoration\\": \\"none\\", +- \\"touch-action\\": \\"manipulation\\"," +`; -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} +exports[`props should render suffix 1`] = ` +"Snapshot Diff: +- First value ++ Second value - +@@ -14,19 +14,10 @@ + data-g2-component=\\"ButtonContent\\" + > + Lorem + + +- +- Suffix +- +- +- " `; -exports[`props should render disabled 1`] = ` -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { - display: block; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - - -`; - -exports[`props should render elevation 1`] = ` -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { - display: block; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 3px 6px 0 rgba(0 ,0,0,0.15); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - - -`; - -exports[`props should render hasCaret 1`] = ` -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} - -@media (prefers-reduced-motion) { - .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * { - min-width: 0; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:hover, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[disabled]:not( [aria-busy='true'] ), -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 svg { - display: block; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:hover, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:active, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:focus, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - margin-left: 0 !important; - position: relative; - right: calc(4px * -2); - right: calc(var(--wp-g2-grid-base) * -2); -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - - -`; - -exports[`props should render icon 1`] = ` -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} - -@media (prefers-reduced-motion) { - .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * { - min-width: 0; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:hover, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[disabled]:not( [aria-busy='true'] ), -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 svg { - display: block; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:hover, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:active, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:focus, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - opacity: 1; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { - display: block; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - - -`; - -exports[`props should render isControl 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); - background-color: #ffffff; - background-color: var(--wp-g2-control-background-color); - border: 1px solid; - border-color: #757575; - border-color: var(--wp-g2-control-border-color); - color: #1e1e1e; - color: var(--wp-g2-color-text); - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { - display: block; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - border-color: #007cba; - border-color: var(--wp-g2-button-primary-border-color-focus); - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - - -`; - -exports[`props should render isDestructive 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - color: #D94F4F; - color: var(--wp-g2-color-destructive); - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { - display: block; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - - -`; - -exports[`props should render isLoading 1`] = ` -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} - -@media (prefers-reduced-motion) { - .emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 > * { - min-width: 0; -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6:hover, -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6:active, -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6[disabled]:not( [aria-busy='true'] ), -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 svg { - display: block; -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6:focus, -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6[data-destructive='true']:hover, -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6[data-destructive='true']:active, -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6[data-destructive='true']:focus, -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-5.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-5.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5.emotion-5 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - bottom: 0; - left: 0; - pointer-events: none; - position: absolute; - right: 0; - top: 0; -} - -@media (prefers-reduced-motion) { - .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - pointer-events: none; - position: relative; -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - height: 36px; - left: 0; - opacity: 0.6; - position: absolute; - top: 0; - -webkit-transform-origin: top left; - -ms-transform-origin: top left; - transform-origin: top left; - width: 36px; -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - color: currentColor; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - height: 54px; - left: 50%; - padding: 10px; - position: absolute; - top: 50%; - -webkit-transform: translate( -50%,-50% ); - -ms-transform: translate( -50%,-50% ); - transform: translate( -50%,-50% ); - width: 54px; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 > div { - -webkit-animation: ComponentsUISpinnerFadeAnimation 1000ms linear infinite; - animation: ComponentsUISpinnerFadeAnimation 1000ms linear infinite; - background: currentColor; - border-radius: 50px; - height: 16%; - left: 49%; - opacity: 0; - position: absolute; - top: 43%; - width: 6%; -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 .InnerBar1 { - -webkit-animation-delay: 0s; - animation-delay: 0s; - -webkit-transform: rotate( 0deg ) translate( 0,-130% ); - -ms-transform: rotate( 0deg ) translate( 0,-130% ); - transform: rotate( 0deg ) translate( 0,-130% ); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 .InnerBar2 { - -webkit-animation-delay: -0.9167s; - animation-delay: -0.9167s; - -webkit-transform: rotate( 30deg ) translate( 0,-130% ); - -ms-transform: rotate( 30deg ) translate( 0,-130% ); - transform: rotate( 30deg ) translate( 0,-130% ); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 .InnerBar3 { - -webkit-animation-delay: -0.833s; - animation-delay: -0.833s; - -webkit-transform: rotate( 60deg ) translate( 0,-130% ); - -ms-transform: rotate( 60deg ) translate( 0,-130% ); - transform: rotate( 60deg ) translate( 0,-130% ); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 .InnerBar4 { - -webkit-animation-delay: -0.7497s; - animation-delay: -0.7497s; - -webkit-transform: rotate( 90deg ) translate( 0,-130% ); - -ms-transform: rotate( 90deg ) translate( 0,-130% ); - transform: rotate( 90deg ) translate( 0,-130% ); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 .InnerBar5 { - -webkit-animation-delay: -0.667s; - animation-delay: -0.667s; - -webkit-transform: rotate( 120deg ) translate( 0,-130% ); - -ms-transform: rotate( 120deg ) translate( 0,-130% ); - transform: rotate( 120deg ) translate( 0,-130% ); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 .InnerBar6 { - -webkit-animation-delay: -0.5837s; - animation-delay: -0.5837s; - -webkit-transform: rotate( 150deg ) translate( 0,-130% ); - -ms-transform: rotate( 150deg ) translate( 0,-130% ); - transform: rotate( 150deg ) translate( 0,-130% ); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 .InnerBar7 { - -webkit-animation-delay: -0.5s; - animation-delay: -0.5s; - -webkit-transform: rotate( 180deg ) translate( 0,-130% ); - -ms-transform: rotate( 180deg ) translate( 0,-130% ); - transform: rotate( 180deg ) translate( 0,-130% ); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 .InnerBar8 { - -webkit-animation-delay: -0.4167s; - animation-delay: -0.4167s; - -webkit-transform: rotate( 210deg ) translate( 0,-130% ); - -ms-transform: rotate( 210deg ) translate( 0,-130% ); - transform: rotate( 210deg ) translate( 0,-130% ); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 .InnerBar9 { - -webkit-animation-delay: -0.333s; - animation-delay: -0.333s; - -webkit-transform: rotate( 240deg ) translate( 0,-130% ); - -ms-transform: rotate( 240deg ) translate( 0,-130% ); - transform: rotate( 240deg ) translate( 0,-130% ); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 .InnerBar10 { - -webkit-animation-delay: -0.2497s; - animation-delay: -0.2497s; - -webkit-transform: rotate( 270deg ) translate( 0,-130% ); - -ms-transform: rotate( 270deg ) translate( 0,-130% ); - transform: rotate( 270deg ) translate( 0,-130% ); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 .InnerBar11 { - -webkit-animation-delay: -0.167s; - animation-delay: -0.167s; - -webkit-transform: rotate( 300deg ) translate( 0,-130% ); - -ms-transform: rotate( 300deg ) translate( 0,-130% ); - transform: rotate( 300deg ) translate( 0,-130% ); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 .InnerBar12 { - -webkit-animation-delay: -0.0833s; - animation-delay: -0.0833s; - -webkit-transform: rotate( 330deg ) translate( 0,-130% ); - -ms-transform: rotate( 330deg ) translate( 0,-130% ); - transform: rotate( 330deg ) translate( 0,-130% ); -} - -.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - opacity: 0; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { - -webkit-transition: none !important; - transition: none !important; -} - - -`; - -exports[`props should render isNarrow 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { - display: block; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - - -`; - -exports[`props should render isRounded 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - border-radius: 99999px; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { - display: block; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - - -`; - -exports[`props should render isSubtle 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); - border-color: transparent; - border-color: var(--wp-g2-control-border-color-subtle); - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { - display: block; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - border-color: transparent; - border-color: var(--wp-g2-control-border-color-subtle); - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - border-color: #007cba; - border-color: var(--wp-g2-button-primary-border-color-focus); -} - - -`; - -exports[`props should render prefix 1`] = ` -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} - -@media (prefers-reduced-motion) { - .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * { - min-width: 0; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:hover, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[disabled]:not( [aria-busy='true'] ), -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 svg { - display: block; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:hover, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:active, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:focus, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - opacity: 1; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 svg { - display: block; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - - -`; - -exports[`props should render size 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - min-height: calc(30px * 0.8); - min-height: var(--wp-g2-control-height-small); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { - display: block; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { - min-width: calc(30px * 0.8); - min-width: var(--wp-g2-control-height-small); -} - - -`; - -exports[`props should render suffix 1`] = ` -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} - -@media (prefers-reduced-motion) { - .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 > * { - min-width: 0; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:hover, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[disabled]:not( [aria-busy='true'] ), -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 svg { - display: block; -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:hover { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-hover); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:focus, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-focused='true'] { - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-focus); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-focus); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-button-secondary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color-active); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color-active); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:hover, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:active, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:focus, -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true'][data-focused='true'] { - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); - color: #D94F4F; - color: var(--wp-g2-color-destructive); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - opacity: 1; -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 svg { - display: block; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - - -`; - -exports[`props should render variant 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; -} - -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: -1px; - box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); - opacity: 1; - opacity: var(--wp-g2-elevation-intensity); - left: -1px; - right: -1px; - top: -1px; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); -} - -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-color: transparent; - border-radius: 2px; - border-radius: var(--wp-g2-control-border-radius); - border-style: solid; - border-width: 1px; - box-shadow: 0 0 0 0.5px transparent; - box-shadow: 0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent; - box-sizing: border-box; - color: #1e1e1e; - color: var(--wp-g2-color-text); - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-size: 13px; - font-size: var(--wp-g2-font-size); - height: auto; - line-height: 1; - min-height: 30px; - min-height: var(--wp-g2-control-height); - outline: none; - padding-bottom: calc(4px * 1); - padding-bottom: calc(var(--wp-g2-grid-base) * 1); - padding-left: 12px; - padding-left: var(--wp-g2-control-padding-x); - padding-right: 12px; - padding-right: var(--wp-g2-control-padding-x); - padding-top: calc(4px * 1); - padding-top: calc(var(--wp-g2-grid-base) * 1); - position: relative; - -webkit-text-decoration: none; - text-decoration: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: #007cba; - background-color: var(--wp-g2-button-primary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-primary-border-color); - color: #ffffff; - color: var(--wp-g2-button-primary-text-color); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); - transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { - opacity: 0.5; - cursor: auto; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { - box-shadow: 0 0 0 0.5px #D94F4F; - box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { - min-width: 30px; - min-width: var(--wp-g2-control-height); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { - display: block; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - color: #007cba; - color: var(--wp-g2-button-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - color: #ffffff; - color: var(--wp-g2-button-primary-text-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { - background-color: #007cba; - background-color: var(--wp-g2-button-primary-color-hover); - border-color: #007cba; - border-color: var(--wp-g2-button-primary-border-color-hover); - color: #ffffff; - color: var(--wp-g2-button-primary-text-color-hover); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { - background-color: #007cba; - background-color: var(--wp-g2-button-primary-color-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-primary-border-color-focus); - color: #ffffff; - color: var(--wp-g2-button-primary-text-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - background-color: #1e1e1e; - background-color: var(--wp-g2-button-primary-color-active); - border-color: #007cba; - border-color: var(--wp-g2-button-primary-border-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { - background-color: #D94F4F; - background-color: var(--wp-g2-color-destructive); - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { - background-color: #D94F4F; - background-color: var(--wp-g2-color-destructive); - border-color: #D94F4F; - border-color: var(--wp-g2-color-destructive); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { - background-color: #1e1e1e; - background-color: var(--wp-g2-color-text); -} - - +exports[`props should render variant 1`] = ` +"Snapshot Diff: +- First value ++ Second value + +- Snapshot Diff: +- - First value +- + Second value +- +- @@ -66,18 +66,18 @@ +- \\"7\\": \\"display\\", +- \\"8\\": \\"--wp-g2-flex-gap\\", +- \\"9\\": \\"-webkit-align-items\\", +- \\"align-items\\": \\"center\\", +- \\"appearance\\": \\"none\\", +- - \\"background-color\\": \\"var(--wp-g2-button-primary-color)\\", +- - \\"border-color\\": \\"var(--wp-g2-button-primary-border-color)\\", +- + \\"background-color\\": \\"var(--wp-g2-button-secondary-color)\\", +- + \\"border-color\\": \\"var(--wp-g2-button-secondary-border-color)\\", +- \\"border-radius\\": \\"var(--wp-g2-control-border-radius)\\", +- \\"border-style\\": \\"solid\\", +- \\"border-width\\": \\"1px\\", +- \\"box-shadow\\": \\"0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent\\", +- \\"box-sizing\\": \\"border-box\\", +- - \\"color\\": \\"var(--wp-g2-button-primary-text-color)\\", +- + \\"color\\": \\"var(--wp-g2-button-secondary-text-color)\\", +- \\"cursor\\": \\"pointer\\", +- \\"display\\": \\"inline-flex\\", +- \\"flex-direction\\": \\"row\\", +- \\"font-family\\": \\"var(--wp-g2-font-family)\\", +- \\"font-size\\": \\"var(--wp-g2-font-size)\\"," `; diff --git a/packages/components/src/ui/button/test/index.js b/packages/components/src/ui/button/test/index.js index 55777d006c87f3..3fa290eb561b84 100644 --- a/packages/components/src/ui/button/test/index.js +++ b/packages/components/src/ui/button/test/index.js @@ -11,96 +11,133 @@ import { Button } from '..'; const MockIcon = () => ; describe( 'props', () => { + let base; + + beforeEach( () => { + base = render( ); + } ); + test( 'should render correctly', () => { - const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( base.container.firstChild ).toMatchSnapshot(); } ); test( 'should render disabled', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render elevation', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render (Flex) gap', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render hasCaret', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render as link (href)', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render icon', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render isControl', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render isDestructive', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render isLoading', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render isNarrow', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render isRounded', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render isSubtle', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render prefix', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render size', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render suffix', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchDiffSnapshot( + base.container.firstChild + ); } ); test( 'should render variant', () => { const { container } = render( ); - expect( container.firstChild ).toMatchSnapshot(); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.container.firstChild + ); } ); } ); diff --git a/packages/components/src/ui/flex/test/__snapshots__/index.js.snap b/packages/components/src/ui/flex/test/__snapshots__/index.js.snap index 2b29e97063a180..424945891c07c9 100644 --- a/packages/components/src/ui/flex/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/flex/test/__snapshots__/index.js.snap @@ -23,6 +23,7 @@ Snapshot Diff: `; exports[`props should render align 1`] = ` +<<<<<<< HEAD Snapshot Diff: - Received styles + Base styles @@ -40,6 +41,47 @@ Snapshot Diff: "width": "100%", "visibility": "visible" } +======= +"Snapshot Diff: +- First value ++ Second value + +- Snapshot Diff: +- - First value +- + Second value +- +- @@ -1,14 +1,14 @@ +- Array [ +- Object { +- \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 2)\\", +- \\"-moz-osx-font-smoothing\\": \\"grayscale\\", +- - \\"-ms-flex-align\\": \\"flex-start\\", +- + \\"-ms-flex-align\\": \\"center\\", +- \\"-ms-flex-direction\\": \\"row\\", +- \\"-ms-flex-pack\\": \\"justify\\", +- - \\"-webkit-align-items\\": \\"flex-start\\", +- - \\"-webkit-box-align\\": \\"flex-start\\", +- + \\"-webkit-align-items\\": \\"center\\", +- + \\"-webkit-box-align\\": \\"center\\", +- \\"-webkit-box-pack\\": \\"justify\\", +- \\"-webkit-flex-direction\\": \\"row\\", +- \\"-webkit-font-smoothing\\": \\"antialiased\\", +- \\"-webkit-justify-content\\": \\"space-between\\", +- \\"0\\": \\"box-sizing\\", +- @@ -30,11 +30,11 @@ +- \\"5\\": \\"font-weight\\", +- \\"6\\": \\"margin\\", +- \\"7\\": \\"display\\", +- \\"8\\": \\"--wp-g2-flex-gap\\", +- \\"9\\": \\"-webkit-align-items\\", +- - \\"align-items\\": \\"flex-start\\", +- + \\"align-items\\": \\"center\\", +- \\"box-sizing\\": \\"border-box\\", +- \\"display\\": \\"flex\\", +- \\"flex-direction\\": \\"row\\", +- \\"font-family\\": \\"var(--wp-g2-font-family)\\", +- \\"font-size\\": \\"var(--wp-g2-font-size)\\"," +>>>>>>> Make style diff snapshots work with CSS variables `; exports[`props should render correctly 1`] = ` @@ -179,6 +221,7 @@ exports[`props should render correctly 1`] = ` `; exports[`props should render justify 1`] = ` +<<<<<<< HEAD Snapshot Diff: - Received styles + Base styles @@ -214,4 +257,69 @@ Snapshot Diff: "justify-content": "space-between", "width": "100%", "visibility": "visible" +======= +"Snapshot Diff: +- First value ++ Second value + +- Snapshot Diff: +- - First value +- + Second value +- +- @@ -2,17 +2,17 @@ +- Object { +- \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 2)\\", +- \\"-moz-osx-font-smoothing\\": \\"grayscale\\", +- \\"-ms-flex-align\\": \\"center\\", +- \\"-ms-flex-direction\\": \\"row\\", +- - \\"-ms-flex-pack\\": \\"start\\", +- + \\"-ms-flex-pack\\": \\"justify\\", +- \\"-webkit-align-items\\": \\"center\\", +- \\"-webkit-box-align\\": \\"center\\", +- - \\"-webkit-box-pack\\": \\"start\\", +- + \\"-webkit-box-pack\\": \\"justify\\", +- \\"-webkit-flex-direction\\": \\"row\\", +- \\"-webkit-font-smoothing\\": \\"antialiased\\", +- - \\"-webkit-justify-content\\": \\"flex-start\\", +- + \\"-webkit-justify-content\\": \\"space-between\\", +- \\"0\\": \\"box-sizing\\", +- \\"1\\": \\"-moz-osx-font-smoothing\\", +- \\"10\\": \\"-webkit-box-align\\", +- \\"11\\": \\"-ms-flex-align\\", +- \\"12\\": \\"align-items\\", +- @@ -37,11 +37,11 @@ +- \\"display\\": \\"flex\\", +- \\"flex-direction\\": \\"row\\", +- \\"font-family\\": \\"var(--wp-g2-font-family)\\", +- \\"font-size\\": \\"var(--wp-g2-font-size)\\", +- \\"font-weight\\": \\"var(--wp-g2-font-weight)\\", +- - \\"justify-content\\": \\"flex-start\\", +- + \\"justify-content\\": \\"space-between\\", +- \\"length\\": 21, +- \\"margin\\": \\"0\\", +- \\"width\\": \\"100%\\", +- }, +- ]" +`; + +exports[`props should render spacing 1`] = ` +"Snapshot Diff: +- First value ++ Second value + +- Snapshot Diff: +- - First value +- + Second value +- +- @@ -1,8 +1,8 @@ +- Array [ +- Object { +- - \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 5)\\", +- + \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 2)\\", +- \\"-moz-osx-font-smoothing\\": \\"grayscale\\", +- \\"-ms-flex-align\\": \\"center\\", +- \\"-ms-flex-direction\\": \\"row\\", +- \\"-ms-flex-pack\\": \\"justify\\", +- \\"-webkit-align-items\\": \\"center\\"," +>>>>>>> Make style diff snapshots work with CSS variables `; diff --git a/packages/components/src/ui/scrollable/test/__snapshots__/index.js.snap b/packages/components/src/ui/scrollable/test/__snapshots__/index.js.snap index fa7cd49fc7189d..0bdb76050a36c3 100644 --- a/packages/components/src/ui/scrollable/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/scrollable/test/__snapshots__/index.js.snap @@ -73,6 +73,7 @@ Snapshot Diff: - Received styles + Base styles +<<<<<<< HEAD @@ -7,10 +7,9 @@ "margin-top": "0px", "margin-right": "0px", @@ -84,4 +85,46 @@ Snapshot Diff: "overflow-y": "auto", "visibility": "visible" } +======= +- Snapshot Diff: +- - First value +- + Second value +- +- Array [ +- Object { +- \\"-moz-osx-font-smoothing\\": \\"grayscale\\", +- - \\"-moz-scroll-behavior\\": \\"smooth\\", +- - \\"-ms-scroll-behavior\\": \\"smooth\\", +- \\"-webkit-font-smoothing\\": \\"antialiased\\", +- - \\"-webkit-scroll-behavior\\": \\"smooth\\", +- \\"0\\": \\"box-sizing\\", +- \\"1\\": \\"-moz-osx-font-smoothing\\", +- - \\"10\\": \\"-ms-scroll-behavior\\", +- - \\"11\\": \\"scroll-behavior\\", +- - \\"12\\": \\"overflow-x\\", +- - \\"13\\": \\"overflow-y\\", +- \\"2\\": \\"-webkit-font-smoothing\\", +- \\"3\\": \\"font-family\\", +- \\"4\\": \\"font-size\\", +- \\"5\\": \\"font-weight\\", +- \\"6\\": \\"margin\\", +- \\"7\\": \\"height\\", +- - \\"8\\": \\"-webkit-scroll-behavior\\", +- - \\"9\\": \\"-moz-scroll-behavior\\", +- + \\"8\\": \\"overflow-x\\", +- + \\"9\\": \\"overflow-y\\", +- \\"box-sizing\\": \\"border-box\\", +- \\"font-family\\": \\"var(--wp-g2-font-family)\\", +- \\"font-size\\": \\"var(--wp-g2-font-size)\\", +- \\"font-weight\\": \\"var(--wp-g2-font-weight)\\", +- \\"height\\": \\"100%\\", +- - \\"length\\": 14, +- + \\"length\\": 10, +- \\"margin\\": \\"0\\", +- \\"overflow-x\\": \\"hidden\\", +- \\"overflow-y\\": \\"auto\\", +- - \\"scroll-behavior\\": \\"smooth\\", +- }, +- ]" +>>>>>>> Make style diff snapshots work with CSS variables `; diff --git a/test/unit/config/matchers/to-match-style-diff-snapshot.js b/test/unit/config/matchers/to-match-style-diff-snapshot.js index af1193613c5070..9b8fbc6a5afe04 100644 --- a/test/unit/config/matchers/to-match-style-diff-snapshot.js +++ b/test/unit/config/matchers/to-match-style-diff-snapshot.js @@ -3,7 +3,39 @@ */ const snapshotDiff = require( 'snapshot-diff' ); -const serialize = ( obj ) => JSON.stringify( obj, undefined, '\t' ); +const getStyleSheets = () => + Array.from( document.getElementsByTagName( 'style' ) ); + +/** + * + * @param {Element} element + * @param {HTMLStyleElement[]} styleSheets + */ +const getStyleRulesForElement = ( element, styleSheets ) => { + return styleSheets.reduce( ( matchingRules, styleSheet ) => { + const found = []; + Array.from( styleSheet.sheet.cssRules ).forEach( ( rule ) => { + try { + if ( element.matches( rule.selectorText ) ) { + found.push( rule.style ); + } + } catch ( e ) { + /* Ignore these???????????????? */ + } + } ); + return [ ...matchingRules, ...found ]; + }, [] ); +}; + +/* eslint-disable no-unused-vars */ +const cleanStyleRule = ( { + parentRule, + __starts, + __ends, + _importants, + ...cleanedRule +} ) => cleanedRule; +/* eslint-enable no-unused-vars */ /** * @param {Element} received @@ -11,13 +43,14 @@ const serialize = ( obj ) => JSON.stringify( obj, undefined, '\t' ); * @param {string} testName */ function toMatchStyleDiffSnapshot( received, expected, testName ) { - const receivedStyles = serialize( - window.getComputedStyle( received )._values + const styleSheets = getStyleSheets(); + const receivedStyles = getStyleRulesForElement( received, styleSheets ).map( + cleanStyleRule ); - const expectedStyles = serialize( - window.getComputedStyle( expected )._values + const expectedStyles = getStyleRulesForElement( expected, styleSheets ).map( + cleanStyleRule ); - const ret = snapshotDiff.toMatchDiffSnapshot.call( + return snapshotDiff.toMatchDiffSnapshot.call( this, receivedStyles, expectedStyles, @@ -27,7 +60,6 @@ function toMatchStyleDiffSnapshot( received, expected, testName ) { }, testName || '' ); - return ret; } expect.extend( { toMatchStyleDiffSnapshot } ); From 455729bcae895824daaab48b1043f2bc2dce9d4a Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 23 Feb 2021 15:27:48 -0500 Subject: [PATCH 09/14] Improve to-match-style-diff-snapshot + update snapshot tests --- .../button/test/__snapshots__/index.js.snap | 55 ++++++------------- .../ui/flex/test/__snapshots__/index.js.snap | 20 ++----- .../test/__snapshots__/index.js.snap | 18 ------ .../matchers/to-match-style-diff-snapshot.js | 50 ++++++++++++----- 4 files changed, 56 insertions(+), 87 deletions(-) diff --git a/packages/components/src/ui/button/test/__snapshots__/index.js.snap b/packages/components/src/ui/button/test/__snapshots__/index.js.snap index e4b13b472000f4..95164aba982a6f 100644 --- a/packages/components/src/ui/button/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/button/test/__snapshots__/index.js.snap @@ -463,18 +463,10 @@ exports[`props should render isControl 1`] = ` - - First value - + Second value - -- @@ -59,36 +59,34 @@ -- \\"44\\": \\"-webkit-user-select\\", -- \\"45\\": \\"-moz-user-select\\", -- \\"46\\": \\"-ms-user-select\\", -- \\"47\\": \\"user-select\\", -- \\"48\\": \\"text-align\\", -- - \\"49\\": \\"border\\", -- \\"5\\": \\"font-weight\\", -- \\"6\\": \\"margin\\", -- \\"7\\": \\"display\\", -- \\"8\\": \\"--wp-g2-flex-gap\\", -- \\"9\\": \\"-webkit-align-items\\", +- @@ -17,19 +17,18 @@ +- \\"-webkit-justify-content\\": \\"center\\", +- \\"-webkit-text-decoration\\": \\"none\\", +- \\"-webkit-user-select\\": \\"none\\", - \\"align-items\\": \\"center\\", - \\"appearance\\": \\"none\\", - - \\"background-color\\": \\"var(--wp-g2-control-background-color)\\", @@ -493,17 +485,7 @@ exports[`props should render isControl 1`] = ` - \\"display\\": \\"inline-flex\\", - \\"flex-direction\\": \\"row\\", - \\"font-family\\": \\"var(--wp-g2-font-family)\\", -- \\"font-size\\": \\"var(--wp-g2-font-size)\\", -- \\"font-weight\\": \\"600\\", -- \\"height\\": \\"auto\\", -- \\"justify-content\\": \\"center\\", -- - \\"length\\": 50, -- + \\"length\\": 49, -- \\"line-height\\": \\"1\\", -- \\"margin\\": \\"0\\", -- \\"min-height\\": \\"var(--wp-g2-control-height)\\", -- \\"outline\\": \\"none\\", -- \\"padding-bottom\\": \\"calc(var(--wp-g2-grid-base) * 1)\\"," +- \\"font-size\\": \\"var(--wp-g2-font-size)\\"," `; exports[`props should render isDestructive 1`] = ` @@ -515,18 +497,15 @@ exports[`props should render isDestructive 1`] = ` - - First value - + Second value - -- @@ -98,13 +98,6 @@ +- @@ -48,10 +48,6 @@ - \\"text-decoration\\": \\"none\\", - \\"touch-action\\": \\"manipulation\\", - \\"user-select\\": \\"none\\", - \\"width\\": \\"auto\\", - }, - - Object { -- - \\"0\\": \\"border-color\\", -- - \\"1\\": \\"color\\", - - \\"border-color\\": \\"var(--wp-g2-color-destructive)\\", - - \\"color\\": \\"var(--wp-g2-color-destructive)\\", -- - \\"length\\": 2, - - }, - ]" `; @@ -558,8 +537,8 @@ exports[`props should render isRounded 1`] = ` - - First value - + Second value - -- @@ -68,11 +68,11 @@ -- \\"9\\": \\"-webkit-align-items\\", +- @@ -19,11 +19,11 @@ +- \\"-webkit-user-select\\": \\"none\\", - \\"align-items\\": \\"center\\", - \\"appearance\\": \\"none\\", - \\"background-color\\": \\"var(--wp-g2-button-secondary-color)\\", @@ -582,9 +561,9 @@ exports[`props should render isSubtle 1`] = ` - - First value - + Second value - -- @@ -67,17 +67,17 @@ -- \\"8\\": \\"--wp-g2-flex-gap\\", -- \\"9\\": \\"-webkit-align-items\\", +- @@ -18,17 +18,17 @@ +- \\"-webkit-text-decoration\\": \\"none\\", +- \\"-webkit-user-select\\": \\"none\\", - \\"align-items\\": \\"center\\", - \\"appearance\\": \\"none\\", - \\"background-color\\": \\"var(--wp-g2-button-secondary-color)\\", @@ -640,10 +619,10 @@ exports[`props should render size 1`] = ` - - First value - + Second value - -- @@ -85,15 +85,15 @@ +- @@ -35,15 +35,15 @@ +- \\"font-weight\\": \\"600\\", - \\"height\\": \\"auto\\", - \\"justify-content\\": \\"center\\", -- \\"length\\": 49, - \\"line-height\\": \\"1\\", - \\"margin\\": \\"0\\", - - \\"min-height\\": \\"var(--wp-g2-control-height-small)\\", @@ -697,10 +676,10 @@ exports[`props should render variant 1`] = ` - - First value - + Second value - -- @@ -66,18 +66,18 @@ -- \\"7\\": \\"display\\", -- \\"8\\": \\"--wp-g2-flex-gap\\", -- \\"9\\": \\"-webkit-align-items\\", +- @@ -17,18 +17,18 @@ +- \\"-webkit-justify-content\\": \\"center\\", +- \\"-webkit-text-decoration\\": \\"none\\", +- \\"-webkit-user-select\\": \\"none\\", - \\"align-items\\": \\"center\\", - \\"appearance\\": \\"none\\", - - \\"background-color\\": \\"var(--wp-g2-button-primary-color)\\", diff --git a/packages/components/src/ui/flex/test/__snapshots__/index.js.snap b/packages/components/src/ui/flex/test/__snapshots__/index.js.snap index 424945891c07c9..6de11a969ea181 100644 --- a/packages/components/src/ui/flex/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/flex/test/__snapshots__/index.js.snap @@ -50,7 +50,7 @@ Snapshot Diff: - - First value - + Second value - -- @@ -1,14 +1,14 @@ +- @@ -1,19 +1,19 @@ - Array [ - Object { - \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 2)\\", @@ -67,13 +67,6 @@ Snapshot Diff: - \\"-webkit-flex-direction\\": \\"row\\", - \\"-webkit-font-smoothing\\": \\"antialiased\\", - \\"-webkit-justify-content\\": \\"space-between\\", -- \\"0\\": \\"box-sizing\\", -- @@ -30,11 +30,11 @@ -- \\"5\\": \\"font-weight\\", -- \\"6\\": \\"margin\\", -- \\"7\\": \\"display\\", -- \\"8\\": \\"--wp-g2-flex-gap\\", -- \\"9\\": \\"-webkit-align-items\\", - - \\"align-items\\": \\"flex-start\\", - + \\"align-items\\": \\"center\\", - \\"box-sizing\\": \\"border-box\\", @@ -266,7 +259,7 @@ Snapshot Diff: - - First value - + Second value - -- @@ -2,17 +2,17 @@ +- @@ -2,24 +2,24 @@ - Object { - \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 2)\\", - \\"-moz-osx-font-smoothing\\": \\"grayscale\\", @@ -282,12 +275,8 @@ Snapshot Diff: - \\"-webkit-font-smoothing\\": \\"antialiased\\", - - \\"-webkit-justify-content\\": \\"flex-start\\", - + \\"-webkit-justify-content\\": \\"space-between\\", -- \\"0\\": \\"box-sizing\\", -- \\"1\\": \\"-moz-osx-font-smoothing\\", -- \\"10\\": \\"-webkit-box-align\\", -- \\"11\\": \\"-ms-flex-align\\", -- \\"12\\": \\"align-items\\", -- @@ -37,11 +37,11 @@ +- \\"align-items\\": \\"center\\", +- \\"box-sizing\\": \\"border-box\\", - \\"display\\": \\"flex\\", - \\"flex-direction\\": \\"row\\", - \\"font-family\\": \\"var(--wp-g2-font-family)\\", @@ -295,7 +284,6 @@ Snapshot Diff: - \\"font-weight\\": \\"var(--wp-g2-font-weight)\\", - - \\"justify-content\\": \\"flex-start\\", - + \\"justify-content\\": \\"space-between\\", -- \\"length\\": 21, - \\"margin\\": \\"0\\", - \\"width\\": \\"100%\\", - }, diff --git a/packages/components/src/ui/scrollable/test/__snapshots__/index.js.snap b/packages/components/src/ui/scrollable/test/__snapshots__/index.js.snap index 0bdb76050a36c3..b265b57f650618 100644 --- a/packages/components/src/ui/scrollable/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/scrollable/test/__snapshots__/index.js.snap @@ -97,29 +97,11 @@ Snapshot Diff: - - \\"-ms-scroll-behavior\\": \\"smooth\\", - \\"-webkit-font-smoothing\\": \\"antialiased\\", - - \\"-webkit-scroll-behavior\\": \\"smooth\\", -- \\"0\\": \\"box-sizing\\", -- \\"1\\": \\"-moz-osx-font-smoothing\\", -- - \\"10\\": \\"-ms-scroll-behavior\\", -- - \\"11\\": \\"scroll-behavior\\", -- - \\"12\\": \\"overflow-x\\", -- - \\"13\\": \\"overflow-y\\", -- \\"2\\": \\"-webkit-font-smoothing\\", -- \\"3\\": \\"font-family\\", -- \\"4\\": \\"font-size\\", -- \\"5\\": \\"font-weight\\", -- \\"6\\": \\"margin\\", -- \\"7\\": \\"height\\", -- - \\"8\\": \\"-webkit-scroll-behavior\\", -- - \\"9\\": \\"-moz-scroll-behavior\\", -- + \\"8\\": \\"overflow-x\\", -- + \\"9\\": \\"overflow-y\\", - \\"box-sizing\\": \\"border-box\\", - \\"font-family\\": \\"var(--wp-g2-font-family)\\", - \\"font-size\\": \\"var(--wp-g2-font-size)\\", - \\"font-weight\\": \\"var(--wp-g2-font-weight)\\", - \\"height\\": \\"100%\\", -- - \\"length\\": 14, -- + \\"length\\": 10, - \\"margin\\": \\"0\\", - \\"overflow-x\\": \\"hidden\\", - \\"overflow-y\\": \\"auto\\", diff --git a/test/unit/config/matchers/to-match-style-diff-snapshot.js b/test/unit/config/matchers/to-match-style-diff-snapshot.js index 9b8fbc6a5afe04..6a4f6183ca1ff1 100644 --- a/test/unit/config/matchers/to-match-style-diff-snapshot.js +++ b/test/unit/config/matchers/to-match-style-diff-snapshot.js @@ -14,28 +14,48 @@ const getStyleSheets = () => const getStyleRulesForElement = ( element, styleSheets ) => { return styleSheets.reduce( ( matchingRules, styleSheet ) => { const found = []; - Array.from( styleSheet.sheet.cssRules ).forEach( ( rule ) => { - try { + + try { + Array.from( styleSheet.sheet.cssRules ).forEach( ( rule ) => { if ( element.matches( rule.selectorText ) ) { found.push( rule.style ); } - } catch ( e ) { - /* Ignore these???????????????? */ - } - } ); + } ); + } catch ( e ) {} + return [ ...matchingRules, ...found ]; }, [] ); }; -/* eslint-disable no-unused-vars */ -const cleanStyleRule = ( { - parentRule, - __starts, - __ends, - _importants, - ...cleanedRule -} ) => cleanedRule; -/* eslint-enable no-unused-vars */ +/* + * To clean up the style rule, we're going to pluck out the defined key/value + * pairs of the provided rule. + * + * The shape would look something like this: + * + * { + * 0: 'border-left', + * 1: 'margin-left', + * ... + * length: 2 + * } + * + * The only rules we're interested in are defined with numeric keys. + * We are able to know how many are defined by looking at the `length` value. + * + * With that information, we can figure out the necessary key/value pairs + * we need for the cleaned up style rule. + */ +const cleanStyleRule = ( rule ) => { + const size = Array.from( Array( rule.length ).keys() ); + const rules = size.reduce( ( acc, i ) => { + const key = rule[ i ]; + const value = rule[ key ]; + return { ...acc, [ key ]: value }; + }, {} ); + + return rules; +}; /** * @param {Element} received From d9c168819d5d00ca5c0bf946e165ee3b64eb19da Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Wed, 24 Feb 2021 07:29:11 -0800 Subject: [PATCH 10/14] Update snapshots after rebase --- .../button/test/__snapshots__/index.js.snap | 508 ++++++++---------- .../ui/flex/test/__snapshots__/index.js.snap | 196 +++---- .../test/__snapshots__/index.js.snap | 54 +- 3 files changed, 315 insertions(+), 443 deletions(-) diff --git a/packages/components/src/ui/button/test/__snapshots__/index.js.snap b/packages/components/src/ui/button/test/__snapshots__/index.js.snap index 95164aba982a6f..333458b8bb8c62 100644 --- a/packages/components/src/ui/button/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/button/test/__snapshots__/index.js.snap @@ -1,56 +1,52 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`props should render (Flex) gap 1`] = ` -"Snapshot Diff: -- First value -+ Second value - -- Snapshot Diff: -- - First value -- + Second value -- -- @@ -1,8 +1,8 @@ -- Array [ -- Object { -- - \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 1)\\", -- + \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 2)\\", -- \\"-moz-appearance\\": \\"none\\", -- \\"-moz-osx-font-smoothing\\": \\"grayscale\\", -- \\"-moz-user-select\\": \\"none\\", -- \\"-ms-flex-align\\": \\"center\\", -- \\"-ms-flex-direction\\": \\"row\\"," +Snapshot Diff: +- Received styles ++ Base styles + +@@ -1,8 +1,8 @@ + Array [ + Object { +- "--wp-g2-flex-gap": "calc(var(--wp-g2-grid-base) * 1)", ++ "--wp-g2-flex-gap": "calc(var(--wp-g2-grid-base) * 2)", + "-moz-appearance": "none", + "-moz-osx-font-smoothing": "grayscale", + "-moz-user-select": "none", + "-ms-flex-align": "center", + "-ms-flex-direction": "row", `; exports[`props should render as link (href) 1`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -1,15 +1,14 @@ - - -+ " ++ `; exports[`props should render correctly 1`] = ` @@ -362,340 +358,304 @@ exports[`props should render correctly 1`] = ` `; exports[`props should render disabled 1`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -5,11 +5,10 @@ - data-destructive=\\"false\\" - data-focused=\\"false\\" - data-g2-c16t=\\"true\\" - data-g2-component=\\"Button\\" - data-icon=\\"false\\" -- disabled=\\"\\" + data-destructive="false" + data-focused="false" + data-g2-c16t="true" + data-g2-component="Button" + data-icon="false" +- disabled="" > Lorem - - - - - " + aria-hidden="true" + class="components-elevation wp-components-elevation css-8abvx7" + data-g2-c16t="true" + data-g2-component="ButtonElevation" + /> `; exports[`props should render icon 1`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -4,19 +4,12 @@ - data-active=\\"false\\" - data-destructive=\\"false\\" - data-focused=\\"false\\" - data-g2-c16t=\\"true\\" - data-g2-component=\\"Button\\" -- data-icon=\\"true\\" + data-active="false" + data-destructive="false" + data-focused="false" + data-g2-c16t="true" + data-g2-component="Button" +- data-icon="true" - > - - - " + class="components-flex-item wp-components-flex-item css-1493c17" + data-g2-c16t="true" + data-g2-component="ButtonContent" + > `; exports[`props should render isControl 1`] = ` -"Snapshot Diff: -- First value -+ Second value - -- Snapshot Diff: -- - First value -- + Second value -- -- @@ -17,19 +17,18 @@ -- \\"-webkit-justify-content\\": \\"center\\", -- \\"-webkit-text-decoration\\": \\"none\\", -- \\"-webkit-user-select\\": \\"none\\", -- \\"align-items\\": \\"center\\", -- \\"appearance\\": \\"none\\", -- - \\"background-color\\": \\"var(--wp-g2-control-background-color)\\", -- - \\"border\\": \\"1px solid\\", -- - \\"border-color\\": \\"var(--wp-g2-control-border-color)\\", -- + \\"background-color\\": \\"var(--wp-g2-button-secondary-color)\\", -- + \\"border-color\\": \\"var(--wp-g2-button-secondary-border-color)\\", -- \\"border-radius\\": \\"var(--wp-g2-control-border-radius)\\", -- \\"border-style\\": \\"solid\\", -- \\"border-width\\": \\"1px\\", -- \\"box-shadow\\": \\"0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent\\", -- \\"box-sizing\\": \\"border-box\\", -- - \\"color\\": \\"var(--wp-g2-color-text)\\", -- + \\"color\\": \\"var(--wp-g2-button-secondary-text-color)\\", -- \\"cursor\\": \\"pointer\\", -- \\"display\\": \\"inline-flex\\", -- \\"flex-direction\\": \\"row\\", -- \\"font-family\\": \\"var(--wp-g2-font-family)\\", -- \\"font-size\\": \\"var(--wp-g2-font-size)\\"," +Snapshot Diff: +- Received styles ++ Base styles + +@@ -17,19 +17,18 @@ + "-webkit-justify-content": "center", + "-webkit-text-decoration": "none", + "-webkit-user-select": "none", + "align-items": "center", + "appearance": "none", +- "background-color": "var(--wp-g2-control-background-color)", +- "border": "1px solid", +- "border-color": "var(--wp-g2-control-border-color)", ++ "background-color": "var(--wp-g2-button-secondary-color)", ++ "border-color": "var(--wp-g2-button-secondary-border-color)", + "border-radius": "var(--wp-g2-control-border-radius)", + "border-style": "solid", + "border-width": "1px", + "box-shadow": "0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent", + "box-sizing": "border-box", +- "color": "var(--wp-g2-color-text)", ++ "color": "var(--wp-g2-button-secondary-text-color)", + "cursor": "pointer", + "display": "inline-flex", + "flex-direction": "row", + "font-family": "var(--wp-g2-font-family)", + "font-size": "var(--wp-g2-font-size)", `; exports[`props should render isDestructive 1`] = ` -"Snapshot Diff: -- First value -+ Second value - -- Snapshot Diff: -- - First value -- + Second value -- -- @@ -48,10 +48,6 @@ -- \\"text-decoration\\": \\"none\\", -- \\"touch-action\\": \\"manipulation\\", -- \\"user-select\\": \\"none\\", -- \\"width\\": \\"auto\\", -- }, -- - Object { -- - \\"border-color\\": \\"var(--wp-g2-color-destructive)\\", -- - \\"color\\": \\"var(--wp-g2-color-destructive)\\", -- - }, -- ]" +Snapshot Diff: +- Received styles ++ Base styles + +@@ -48,10 +48,6 @@ + "text-decoration": "none", + "touch-action": "manipulation", + "user-select": "none", + "width": "auto", + }, +- Object { +- "border-color": "var(--wp-g2-color-destructive)", +- "color": "var(--wp-g2-color-destructive)", +- }, + ] `; exports[`props should render isLoading 1`] = ` -"Snapshot Diff: -- First value -+ Second value - -- Snapshot Diff: -- Compared values have no visual difference." +Snapshot Diff: +Compared values have no visual difference. `; exports[`props should render isNarrow 1`] = ` -"Snapshot Diff: -- First value -+ Second value - -- Snapshot Diff: -- Compared values have no visual difference." +Snapshot Diff: +Compared values have no visual difference. `; exports[`props should render isRounded 1`] = ` -"Snapshot Diff: -- First value -+ Second value - -- Snapshot Diff: -- - First value -- + Second value -- -- @@ -19,11 +19,11 @@ -- \\"-webkit-user-select\\": \\"none\\", -- \\"align-items\\": \\"center\\", -- \\"appearance\\": \\"none\\", -- \\"background-color\\": \\"var(--wp-g2-button-secondary-color)\\", -- \\"border-color\\": \\"var(--wp-g2-button-secondary-border-color)\\", -- - \\"border-radius\\": \\"99999px\\", -- + \\"border-radius\\": \\"var(--wp-g2-control-border-radius)\\", -- \\"border-style\\": \\"solid\\", -- \\"border-width\\": \\"1px\\", -- \\"box-shadow\\": \\"0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent\\", -- \\"box-sizing\\": \\"border-box\\", -- \\"color\\": \\"var(--wp-g2-button-secondary-text-color)\\"," +Snapshot Diff: +- Received styles ++ Base styles + +@@ -19,11 +19,11 @@ + "-webkit-user-select": "none", + "align-items": "center", + "appearance": "none", + "background-color": "var(--wp-g2-button-secondary-color)", + "border-color": "var(--wp-g2-button-secondary-border-color)", +- "border-radius": "99999px", ++ "border-radius": "var(--wp-g2-control-border-radius)", + "border-style": "solid", + "border-width": "1px", + "box-shadow": "0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent", + "box-sizing": "border-box", + "color": "var(--wp-g2-button-secondary-text-color)", `; exports[`props should render isSubtle 1`] = ` -"Snapshot Diff: -- First value -+ Second value - -- Snapshot Diff: -- - First value -- + Second value -- -- @@ -18,17 +18,17 @@ -- \\"-webkit-text-decoration\\": \\"none\\", -- \\"-webkit-user-select\\": \\"none\\", -- \\"align-items\\": \\"center\\", -- \\"appearance\\": \\"none\\", -- \\"background-color\\": \\"var(--wp-g2-button-secondary-color)\\", -- - \\"border-color\\": \\"var(--wp-g2-control-border-color-subtle)\\", -- + \\"border-color\\": \\"var(--wp-g2-button-secondary-border-color)\\", -- \\"border-radius\\": \\"var(--wp-g2-control-border-radius)\\", -- \\"border-style\\": \\"solid\\", -- \\"border-width\\": \\"1px\\", -- \\"box-shadow\\": \\"0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent\\", -- \\"box-sizing\\": \\"border-box\\", -- - \\"color\\": \\"var(--wp-g2-color-text)\\", -- + \\"color\\": \\"var(--wp-g2-button-secondary-text-color)\\", -- \\"cursor\\": \\"pointer\\", -- \\"display\\": \\"inline-flex\\", -- \\"flex-direction\\": \\"row\\", -- \\"font-family\\": \\"var(--wp-g2-font-family)\\", -- \\"font-size\\": \\"var(--wp-g2-font-size)\\"," +Snapshot Diff: +- Received styles ++ Base styles + +@@ -18,17 +18,17 @@ + "-webkit-text-decoration": "none", + "-webkit-user-select": "none", + "align-items": "center", + "appearance": "none", + "background-color": "var(--wp-g2-button-secondary-color)", +- "border-color": "var(--wp-g2-control-border-color-subtle)", ++ "border-color": "var(--wp-g2-button-secondary-border-color)", + "border-radius": "var(--wp-g2-control-border-radius)", + "border-style": "solid", + "border-width": "1px", + "box-shadow": "0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent", + "box-sizing": "border-box", +- "color": "var(--wp-g2-color-text)", ++ "color": "var(--wp-g2-button-secondary-text-color)", + "cursor": "pointer", + "display": "inline-flex", + "flex-direction": "row", + "font-family": "var(--wp-g2-font-family)", + "font-size": "var(--wp-g2-font-size)", `; exports[`props should render prefix 1`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -7,19 +7,10 @@ - data-g2-c16t=\\"true\\" - data-g2-component=\\"Button\\" - data-icon=\\"false\\" + data-g2-c16t="true" + data-g2-component="Button" + data-icon="false" > - - Prefix - - - - Lorem" + Lorem `; exports[`props should render size 1`] = ` -"Snapshot Diff: -- First value -+ Second value - -- Snapshot Diff: -- - First value -- + Second value -- -- @@ -35,15 +35,15 @@ -- \\"font-weight\\": \\"600\\", -- \\"height\\": \\"auto\\", -- \\"justify-content\\": \\"center\\", -- \\"line-height\\": \\"1\\", -- \\"margin\\": \\"0\\", -- - \\"min-height\\": \\"var(--wp-g2-control-height-small)\\", -- + \\"min-height\\": \\"var(--wp-g2-control-height)\\", -- \\"outline\\": \\"none\\", -- \\"padding-bottom\\": \\"calc(var(--wp-g2-grid-base) * 1)\\", -- - \\"padding-left\\": \\"var(--wp-g2-control-padding-x)\\", -- - \\"padding-right\\": \\"var(--wp-g2-control-padding-x)\\", -- + \\"padding-left\\": \\"var(--wp-g2-button-padding-x)\\", -- + \\"padding-right\\": \\"var(--wp-g2-button-padding-x)\\", -- \\"padding-top\\": \\"calc(var(--wp-g2-grid-base) * 1)\\", -- \\"position\\": \\"relative\\", -- \\"text-align\\": \\"center\\", -- \\"text-decoration\\": \\"none\\", -- \\"touch-action\\": \\"manipulation\\"," +Snapshot Diff: +- Received styles ++ Base styles + +@@ -35,15 +35,15 @@ + "font-weight": "600", + "height": "auto", + "justify-content": "center", + "line-height": "1", + "margin": "0", +- "min-height": "var(--wp-g2-control-height-small)", ++ "min-height": "var(--wp-g2-control-height)", + "outline": "none", + "padding-bottom": "calc(var(--wp-g2-grid-base) * 1)", +- "padding-left": "var(--wp-g2-control-padding-x)", +- "padding-right": "var(--wp-g2-control-padding-x)", ++ "padding-left": "var(--wp-g2-button-padding-x)", ++ "padding-right": "var(--wp-g2-button-padding-x)", + "padding-top": "calc(var(--wp-g2-grid-base) * 1)", + "position": "relative", + "text-align": "center", + "text-decoration": "none", + "touch-action": "manipulation", `; exports[`props should render suffix 1`] = ` -"Snapshot Diff: +Snapshot Diff: - First value + Second value @@ -14,19 +14,10 @@ - data-g2-component=\\"ButtonContent\\" + data-g2-component="ButtonContent" > Lorem - - Suffix - - - " + aria-hidden="true" + class="components-elevation wp-components-elevation css-8abvx7" + data-g2-c16t="true" + data-g2-component="ButtonElevation" + /> `; exports[`props should render variant 1`] = ` -"Snapshot Diff: -- First value -+ Second value - -- Snapshot Diff: -- - First value -- + Second value -- -- @@ -17,18 +17,18 @@ -- \\"-webkit-justify-content\\": \\"center\\", -- \\"-webkit-text-decoration\\": \\"none\\", -- \\"-webkit-user-select\\": \\"none\\", -- \\"align-items\\": \\"center\\", -- \\"appearance\\": \\"none\\", -- - \\"background-color\\": \\"var(--wp-g2-button-primary-color)\\", -- - \\"border-color\\": \\"var(--wp-g2-button-primary-border-color)\\", -- + \\"background-color\\": \\"var(--wp-g2-button-secondary-color)\\", -- + \\"border-color\\": \\"var(--wp-g2-button-secondary-border-color)\\", -- \\"border-radius\\": \\"var(--wp-g2-control-border-radius)\\", -- \\"border-style\\": \\"solid\\", -- \\"border-width\\": \\"1px\\", -- \\"box-shadow\\": \\"0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent\\", -- \\"box-sizing\\": \\"border-box\\", -- - \\"color\\": \\"var(--wp-g2-button-primary-text-color)\\", -- + \\"color\\": \\"var(--wp-g2-button-secondary-text-color)\\", -- \\"cursor\\": \\"pointer\\", -- \\"display\\": \\"inline-flex\\", -- \\"flex-direction\\": \\"row\\", -- \\"font-family\\": \\"var(--wp-g2-font-family)\\", -- \\"font-size\\": \\"var(--wp-g2-font-size)\\"," +Snapshot Diff: +- Received styles ++ Base styles + +@@ -17,18 +17,18 @@ + "-webkit-justify-content": "center", + "-webkit-text-decoration": "none", + "-webkit-user-select": "none", + "align-items": "center", + "appearance": "none", +- "background-color": "var(--wp-g2-button-primary-color)", +- "border-color": "var(--wp-g2-button-primary-border-color)", ++ "background-color": "var(--wp-g2-button-secondary-color)", ++ "border-color": "var(--wp-g2-button-secondary-border-color)", + "border-radius": "var(--wp-g2-control-border-radius)", + "border-style": "solid", + "border-width": "1px", + "box-shadow": "0 0 0 var(--wp-g2-control-box-shadow-focus-size) transparent", + "box-sizing": "border-box", +- "color": "var(--wp-g2-button-primary-text-color)", ++ "color": "var(--wp-g2-button-secondary-text-color)", + "cursor": "pointer", + "display": "inline-flex", + "flex-direction": "row", + "font-family": "var(--wp-g2-font-family)", + "font-size": "var(--wp-g2-font-size)", `; diff --git a/packages/components/src/ui/flex/test/__snapshots__/index.js.snap b/packages/components/src/ui/flex/test/__snapshots__/index.js.snap index 6de11a969ea181..56fe7c5abb8a2f 100644 --- a/packages/components/src/ui/flex/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/flex/test/__snapshots__/index.js.snap @@ -23,58 +23,34 @@ Snapshot Diff: `; exports[`props should render align 1`] = ` -<<<<<<< HEAD Snapshot Diff: - Received styles + Base styles -@@ -7,11 +7,11 @@ - "margin-top": "0px", - "margin-right": "0px", - "margin-bottom": "0px", - "margin-left": "0px", - "--wp-g2-flex-gap": "calc(var(--wp-g2-grid-base) * 2)", -- "align-items": "flex-start", -+ "align-items": "center", - "flex-direction": "row", - "justify-content": "space-between", - "width": "100%", - "visibility": "visible" - } -======= -"Snapshot Diff: -- First value -+ Second value - -- Snapshot Diff: -- - First value -- + Second value -- -- @@ -1,19 +1,19 @@ -- Array [ -- Object { -- \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 2)\\", -- \\"-moz-osx-font-smoothing\\": \\"grayscale\\", -- - \\"-ms-flex-align\\": \\"flex-start\\", -- + \\"-ms-flex-align\\": \\"center\\", -- \\"-ms-flex-direction\\": \\"row\\", -- \\"-ms-flex-pack\\": \\"justify\\", -- - \\"-webkit-align-items\\": \\"flex-start\\", -- - \\"-webkit-box-align\\": \\"flex-start\\", -- + \\"-webkit-align-items\\": \\"center\\", -- + \\"-webkit-box-align\\": \\"center\\", -- \\"-webkit-box-pack\\": \\"justify\\", -- \\"-webkit-flex-direction\\": \\"row\\", -- \\"-webkit-font-smoothing\\": \\"antialiased\\", -- \\"-webkit-justify-content\\": \\"space-between\\", -- - \\"align-items\\": \\"flex-start\\", -- + \\"align-items\\": \\"center\\", -- \\"box-sizing\\": \\"border-box\\", -- \\"display\\": \\"flex\\", -- \\"flex-direction\\": \\"row\\", -- \\"font-family\\": \\"var(--wp-g2-font-family)\\", -- \\"font-size\\": \\"var(--wp-g2-font-size)\\"," ->>>>>>> Make style diff snapshots work with CSS variables +@@ -1,19 +1,19 @@ + Array [ + Object { + "--wp-g2-flex-gap": "calc(var(--wp-g2-grid-base) * 2)", + "-moz-osx-font-smoothing": "grayscale", +- "-ms-flex-align": "flex-start", ++ "-ms-flex-align": "center", + "-ms-flex-direction": "row", + "-ms-flex-pack": "justify", +- "-webkit-align-items": "flex-start", +- "-webkit-box-align": "flex-start", ++ "-webkit-align-items": "center", ++ "-webkit-box-align": "center", + "-webkit-box-pack": "justify", + "-webkit-flex-direction": "row", + "-webkit-font-smoothing": "antialiased", + "-webkit-justify-content": "space-between", +- "align-items": "flex-start", ++ "align-items": "center", + "box-sizing": "border-box", + "display": "flex", + "flex-direction": "row", + "font-family": "var(--wp-g2-font-family)", + "font-size": "var(--wp-g2-font-size)", `; exports[`props should render correctly 1`] = ` @@ -214,22 +190,39 @@ exports[`props should render correctly 1`] = ` `; exports[`props should render justify 1`] = ` -<<<<<<< HEAD Snapshot Diff: - Received styles + Base styles -@@ -9,9 +9,9 @@ - "margin-bottom": "0px", - "margin-left": "0px", - "--wp-g2-flex-gap": "calc(var(--wp-g2-grid-base) * 2)", - "align-items": "center", - "flex-direction": "row", -- "justify-content": "flex-start", -+ "justify-content": "space-between", - "width": "100%", - "visibility": "visible" - } +@@ -2,24 +2,24 @@ + Object { + "--wp-g2-flex-gap": "calc(var(--wp-g2-grid-base) * 2)", + "-moz-osx-font-smoothing": "grayscale", + "-ms-flex-align": "center", + "-ms-flex-direction": "row", +- "-ms-flex-pack": "start", ++ "-ms-flex-pack": "justify", + "-webkit-align-items": "center", + "-webkit-box-align": "center", +- "-webkit-box-pack": "start", ++ "-webkit-box-pack": "justify", + "-webkit-flex-direction": "row", + "-webkit-font-smoothing": "antialiased", +- "-webkit-justify-content": "flex-start", ++ "-webkit-justify-content": "space-between", + "align-items": "center", + "box-sizing": "border-box", + "display": "flex", + "flex-direction": "row", + "font-family": "var(--wp-g2-font-family)", + "font-size": "var(--wp-g2-font-size)", + "font-weight": "var(--wp-g2-font-weight)", +- "justify-content": "flex-start", ++ "justify-content": "space-between", + "margin": "0", + "width": "100%", + }, + ] `; exports[`props should render spacing 1`] = ` @@ -237,77 +230,14 @@ Snapshot Diff: - Received styles + Base styles -@@ -6,11 +6,11 @@ - "margin": "0px", - "margin-top": "0px", - "margin-right": "0px", - "margin-bottom": "0px", - "margin-left": "0px", -- "--wp-g2-flex-gap": "calc(var(--wp-g2-grid-base) * 5)", -+ "--wp-g2-flex-gap": "calc(var(--wp-g2-grid-base) * 2)", - "align-items": "center", - "flex-direction": "row", - "justify-content": "space-between", - "width": "100%", - "visibility": "visible" -======= -"Snapshot Diff: -- First value -+ Second value - -- Snapshot Diff: -- - First value -- + Second value -- -- @@ -2,24 +2,24 @@ -- Object { -- \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 2)\\", -- \\"-moz-osx-font-smoothing\\": \\"grayscale\\", -- \\"-ms-flex-align\\": \\"center\\", -- \\"-ms-flex-direction\\": \\"row\\", -- - \\"-ms-flex-pack\\": \\"start\\", -- + \\"-ms-flex-pack\\": \\"justify\\", -- \\"-webkit-align-items\\": \\"center\\", -- \\"-webkit-box-align\\": \\"center\\", -- - \\"-webkit-box-pack\\": \\"start\\", -- + \\"-webkit-box-pack\\": \\"justify\\", -- \\"-webkit-flex-direction\\": \\"row\\", -- \\"-webkit-font-smoothing\\": \\"antialiased\\", -- - \\"-webkit-justify-content\\": \\"flex-start\\", -- + \\"-webkit-justify-content\\": \\"space-between\\", -- \\"align-items\\": \\"center\\", -- \\"box-sizing\\": \\"border-box\\", -- \\"display\\": \\"flex\\", -- \\"flex-direction\\": \\"row\\", -- \\"font-family\\": \\"var(--wp-g2-font-family)\\", -- \\"font-size\\": \\"var(--wp-g2-font-size)\\", -- \\"font-weight\\": \\"var(--wp-g2-font-weight)\\", -- - \\"justify-content\\": \\"flex-start\\", -- + \\"justify-content\\": \\"space-between\\", -- \\"margin\\": \\"0\\", -- \\"width\\": \\"100%\\", -- }, -- ]" -`; - -exports[`props should render spacing 1`] = ` -"Snapshot Diff: -- First value -+ Second value - -- Snapshot Diff: -- - First value -- + Second value -- -- @@ -1,8 +1,8 @@ -- Array [ -- Object { -- - \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 5)\\", -- + \\"--wp-g2-flex-gap\\": \\"calc(var(--wp-g2-grid-base) * 2)\\", -- \\"-moz-osx-font-smoothing\\": \\"grayscale\\", -- \\"-ms-flex-align\\": \\"center\\", -- \\"-ms-flex-direction\\": \\"row\\", -- \\"-ms-flex-pack\\": \\"justify\\", -- \\"-webkit-align-items\\": \\"center\\"," ->>>>>>> Make style diff snapshots work with CSS variables +@@ -1,8 +1,8 @@ + Array [ + Object { +- "--wp-g2-flex-gap": "calc(var(--wp-g2-grid-base) * 5)", ++ "--wp-g2-flex-gap": "calc(var(--wp-g2-grid-base) * 2)", + "-moz-osx-font-smoothing": "grayscale", + "-ms-flex-align": "center", + "-ms-flex-direction": "row", + "-ms-flex-pack": "justify", + "-webkit-align-items": "center", `; diff --git a/packages/components/src/ui/scrollable/test/__snapshots__/index.js.snap b/packages/components/src/ui/scrollable/test/__snapshots__/index.js.snap index b265b57f650618..d4af7ee1efa686 100644 --- a/packages/components/src/ui/scrollable/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/scrollable/test/__snapshots__/index.js.snap @@ -73,40 +73,22 @@ Snapshot Diff: - Received styles + Base styles -<<<<<<< HEAD -@@ -7,10 +7,9 @@ - "margin-top": "0px", - "margin-right": "0px", - "margin-bottom": "0px", - "margin-left": "0px", - "height": "100%", -- "scroll-behavior": "smooth", - "overflow-x": "hidden", - "overflow-y": "auto", - "visibility": "visible" - } -======= -- Snapshot Diff: -- - First value -- + Second value -- -- Array [ -- Object { -- \\"-moz-osx-font-smoothing\\": \\"grayscale\\", -- - \\"-moz-scroll-behavior\\": \\"smooth\\", -- - \\"-ms-scroll-behavior\\": \\"smooth\\", -- \\"-webkit-font-smoothing\\": \\"antialiased\\", -- - \\"-webkit-scroll-behavior\\": \\"smooth\\", -- \\"box-sizing\\": \\"border-box\\", -- \\"font-family\\": \\"var(--wp-g2-font-family)\\", -- \\"font-size\\": \\"var(--wp-g2-font-size)\\", -- \\"font-weight\\": \\"var(--wp-g2-font-weight)\\", -- \\"height\\": \\"100%\\", -- \\"margin\\": \\"0\\", -- \\"overflow-x\\": \\"hidden\\", -- \\"overflow-y\\": \\"auto\\", -- - \\"scroll-behavior\\": \\"smooth\\", -- }, -- ]" ->>>>>>> Make style diff snapshots work with CSS variables + Array [ + Object { + "-moz-osx-font-smoothing": "grayscale", +- "-moz-scroll-behavior": "smooth", +- "-ms-scroll-behavior": "smooth", + "-webkit-font-smoothing": "antialiased", +- "-webkit-scroll-behavior": "smooth", + "box-sizing": "border-box", + "font-family": "var(--wp-g2-font-family)", + "font-size": "var(--wp-g2-font-size)", + "font-weight": "var(--wp-g2-font-weight)", + "height": "100%", + "margin": "0", + "overflow-x": "hidden", + "overflow-y": "auto", +- "scroll-behavior": "smooth", + }, + ] `; From 262ea9c609c4baee26c49e7701b5c08c8363a213 Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Thu, 25 Feb 2021 08:52:20 -0800 Subject: [PATCH 11/14] Use i18n directly instead of react-i18n --- packages/components/src/ui/button-group/component.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/ui/button-group/component.js b/packages/components/src/ui/button-group/component.js index d784862c9dc53a..dc18fba828db27 100644 --- a/packages/components/src/ui/button-group/component.js +++ b/packages/components/src/ui/button-group/component.js @@ -14,7 +14,7 @@ import { RadioGroup, useRadioState } from 'reakit'; /** * WordPress dependencies */ -import { useI18n } from '@wordpress/react-i18n'; +import { __ } from '@wordpress/i18n'; import { useMemo } from '@wordpress/element'; /** @@ -29,8 +29,6 @@ import * as styles from './styles'; * @param {import('react').Ref} forwardedRef */ function ButtonGroup( props, forwardedRef ) { - const { __ } = useI18n(); - const { baseId, className, From 7dfd194042175a3cee9923f21a1e38806b4f43fd Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Thu, 25 Feb 2021 10:18:35 -0800 Subject: [PATCH 12/14] Fix linting errors --- packages/components/src/ui/button-group/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/ui/button-group/types.ts b/packages/components/src/ui/button-group/types.ts index 785cc44c8991e4..4d79d59aca7c92 100644 --- a/packages/components/src/ui/button-group/types.ts +++ b/packages/components/src/ui/button-group/types.ts @@ -2,7 +2,7 @@ * External dependencies */ // eslint-disable-next-line no-restricted-imports -import { +import type { RadioStateReturn, RadioGroupProps as ReakitRadioGroupProps, } from 'reakit'; From 1fe29b469e32de89c8900803ffb3c6c0bd20f343 Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Wed, 3 Mar 2021 05:08:41 -0800 Subject: [PATCH 13/14] Remove react-i18n dependency from package-lock after rebase --- package-lock.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index c38dd8aebb1eee..96527e7d6530dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12431,7 +12431,6 @@ "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", "@wordpress/keycodes": "file:packages/keycodes", "@wordpress/primitives": "file:packages/primitives", - "@wordpress/react-i18n": "file:packages/react-i18n", "@wordpress/rich-text": "file:packages/rich-text", "@wordpress/warning": "file:packages/warning", "@wp-g2/components": "^0.0.159", From 8acc788e860620303583226990b8f70042e0d72c Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Wed, 3 Mar 2021 05:18:45 -0800 Subject: [PATCH 14/14] Update snapshot tests for interpolated components --- .../test/__snapshots__/index.js.snap | 6 ++-- .../test/__snapshots__/index.js.snap | 20 ++++++------- .../button/test/__snapshots__/index.js.snap | 30 +++++++++---------- 3 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap b/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap index 744c7a4a4c0d0d..7c2e9de5b95c49 100644 --- a/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap @@ -218,7 +218,7 @@ exports[`props should render correctly 1`] = `