@wordpress/components 27.3.0 → 27.5.0

package/build-module/utils/with-ignore-ime-events.js.map

@@ -1 +1 @@
-{"version":3,"names":["withIgnoreIMEEvents","keydownHandler","event","isComposing","nativeEvent","keyCode"],"sources":["@wordpress/components/src/utils/with-ignore-ime-events.ts"],"sourcesContent":["/**\n * A higher-order function that wraps a keydown event handler to ensure it is not an IME event.\n *\n * In CJK languages, an IME (Input Method Editor) is used to input complex characters.\n * During an IME composition, keydown events (e.g. Enter or Escape) can be fired\n * which are intended to control the IME and not the application.\n * These events should be ignored by any application logic.\n *\n * @param keydownHandler The keydown event handler to execute after ensuring it was not an IME event.\n *\n * @return A wrapped version of the given event handler that ignores IME events.\n */\nexport function withIgnoreIMEEvents<\n\tE extends React.KeyboardEvent | KeyboardEvent,\n>( keydownHandler: ( event: E ) => void ) {\n\treturn ( event: E ) => {\n\t\tconst { isComposing } =\n\t\t\t'nativeEvent' in event ? event.nativeEvent : event;\n\n\t\tif (\n\t\t\tisComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tkeydownHandler( event );\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,mBAAmBA,CAEhCC,cAAoC,EAAG;EACzC,OAASC,KAAQ,IAAM;IACtB,MAAM;MAAEC;IAAY,CAAC,GACpB,aAAa,IAAID,KAAK,GAAGA,KAAK,CAACE,WAAW,GAAGF,KAAK;IAEnD,IACCC,WAAW;IACX;IACA;IACA;IACAD,KAAK,CAACG,OAAO,KAAK,GAAG,EACpB;MACD;IACD;IAEAJ,cAAc,CAAEC,KAAM,CAAC;EACxB,CAAC;AACF"}
+{"version":3,"names":["withIgnoreIMEEvents","keydownHandler","event","isComposing","nativeEvent","keyCode"],"sources":["@wordpress/components/src/utils/with-ignore-ime-events.ts"],"sourcesContent":["/**\n * A higher-order function that wraps a keydown event handler to ensure it is not an IME event.\n *\n * In CJK languages, an IME (Input Method Editor) is used to input complex characters.\n * During an IME composition, keydown events (e.g. Enter or Escape) can be fired\n * which are intended to control the IME and not the application.\n * These events should be ignored by any application logic.\n *\n * @param keydownHandler The keydown event handler to execute after ensuring it was not an IME event.\n *\n * @return A wrapped version of the given event handler that ignores IME events.\n */\nexport function withIgnoreIMEEvents<\n\tE extends React.KeyboardEvent | KeyboardEvent,\n>( keydownHandler: ( event: E ) => void ) {\n\treturn ( event: E ) => {\n\t\tconst { isComposing } =\n\t\t\t'nativeEvent' in event ? event.nativeEvent : event;\n\n\t\tif (\n\t\t\tisComposing ||\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tkeydownHandler( event );\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,mBAAmBA,CAEhCC,cAAoC,EAAG;EACzC,OAASC,KAAQ,IAAM;IACtB,MAAM;MAAEC;IAAY,CAAC,GACpB,aAAa,IAAID,KAAK,GAAGA,KAAK,CAACE,WAAW,GAAGF,KAAK;IAEnD,IACCC,WAAW;IACX;IACA;IACA;IACAD,KAAK,CAACG,OAAO,KAAK,GAAG,EACpB;MACD;IACD;IAEAJ,cAAc,CAAEC,KAAM,CAAC;EACxB,CAAC;AACF","ignoreList":[]}

package/build-module/v-stack/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","View","useVStack","UnconnectedVStack","props","forwardedRef","vStackProps","createElement","ref","VStack"],"sources":["@wordpress/components/src/v-stack/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useVStack } from './hook';\nimport type { VStackProps } from './types';\n\nfunction UnconnectedVStack(\n\tprops: WordPressComponentProps< VStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst vStackProps = useVStack( props );\n\n\treturn <View { ...vStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `VStack` (or Vertical Stack) is a layout component that arranges child\n * elements in a vertical line.\n *\n * `VStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalText as Text,\n * \t__experimentalVStack as VStack,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<VStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</VStack>\n * \t);\n * }\n * ```\n */\nexport const VStack = contextConnect( UnconnectedVStack, 'VStack' );\n\nexport default VStack;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,SAAS,QAAQ,QAAQ;AAGlC,SAASC,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAGJ,SAAS,CAAEE,KAAM,CAAC;EAEtC,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,WAAW;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,MAAM,GAAGT,cAAc,CAAEG,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeM,MAAM"}
+{"version":3,"names":["contextConnect","View","useVStack","UnconnectedVStack","props","forwardedRef","vStackProps","createElement","ref","VStack"],"sources":["@wordpress/components/src/v-stack/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useVStack } from './hook';\nimport type { VStackProps } from './types';\n\nfunction UnconnectedVStack(\n\tprops: WordPressComponentProps< VStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst vStackProps = useVStack( props );\n\n\treturn <View { ...vStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `VStack` (or Vertical Stack) is a layout component that arranges child\n * elements in a vertical line.\n *\n * `VStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalText as Text,\n * \t__experimentalVStack as VStack,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<VStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</VStack>\n * \t);\n * }\n * ```\n */\nexport const VStack = contextConnect( UnconnectedVStack, 'VStack' );\n\nexport default VStack;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,SAAS,QAAQ,QAAQ;AAGlC,SAASC,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAGJ,SAAS,CAAEE,KAAM,CAAC;EAEtC,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,WAAW;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,MAAM,GAAGT,cAAc,CAAEG,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeM,MAAM","ignoreList":[]}

package/build-module/v-stack/hook.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContextSystem","useHStack","useVStack","props","expanded","alignment","otherProps","hStackProps","direction"],"sources":["@wordpress/components/src/v-stack/hook.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem } from '../context';\nimport { useHStack } from '../h-stack';\nimport type { VStackProps } from './types';\n\nexport function useVStack(\n\tprops: WordPressComponentProps< VStackProps, 'div' >\n) {\n\tconst {\n\t\texpanded = false,\n\t\talignment = 'stretch',\n\t\t...otherProps\n\t} = useContextSystem( props, 'VStack' );\n\n\tconst hStackProps = useHStack( {\n\t\tdirection: 'column',\n\t\texpanded,\n\t\talignment,\n\t\t...otherProps,\n\t} );\n\n\treturn hStackProps;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,SAAS,QAAQ,YAAY;AAGtC,OAAO,SAASC,SAASA,CACxBC,KAAoD,EACnD;EACD,MAAM;IACLC,QAAQ,GAAG,KAAK;IAChBC,SAAS,GAAG,SAAS;IACrB,GAAGC;EACJ,CAAC,GAAGN,gBAAgB,CAAEG,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMI,WAAW,GAAGN,SAAS,CAAE;IAC9BO,SAAS,EAAE,QAAQ;IACnBJ,QAAQ;IACRC,SAAS;IACT,GAAGC;EACJ,CAAE,CAAC;EAEH,OAAOC,WAAW;AACnB"}
+{"version":3,"names":["useContextSystem","useHStack","useVStack","props","expanded","alignment","otherProps","hStackProps","direction"],"sources":["@wordpress/components/src/v-stack/hook.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem } from '../context';\nimport { useHStack } from '../h-stack';\nimport type { VStackProps } from './types';\n\nexport function useVStack(\n\tprops: WordPressComponentProps< VStackProps, 'div' >\n) {\n\tconst {\n\t\texpanded = false,\n\t\talignment = 'stretch',\n\t\t...otherProps\n\t} = useContextSystem( props, 'VStack' );\n\n\tconst hStackProps = useHStack( {\n\t\tdirection: 'column',\n\t\texpanded,\n\t\talignment,\n\t\t...otherProps,\n\t} );\n\n\treturn hStackProps;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,SAAS,QAAQ,YAAY;AAGtC,OAAO,SAASC,SAASA,CACxBC,KAAoD,EACnD;EACD,MAAM;IACLC,QAAQ,GAAG,KAAK;IAChBC,SAAS,GAAG,SAAS;IACrB,GAAGC;EACJ,CAAC,GAAGN,gBAAgB,CAAEG,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMI,WAAW,GAAGN,SAAS,CAAE;IAC9BO,SAAS,EAAE,QAAQ;IACnBJ,QAAQ;IACRC,SAAS;IACT,GAAGC;EACJ,CAAE,CAAC;EAEH,OAAOC,WAAW;AACnB","ignoreList":[]}

package/build-module/v-stack/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","VStack","useVStack"],"sources":["@wordpress/components/src/v-stack/index.ts"],"sourcesContent":["export { default as VStack } from './component';\nexport { useVStack } from './hook';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,aAAa;AAC/C,SAASC,SAAS,QAAQ,QAAQ"}
+{"version":3,"names":["default","VStack","useVStack"],"sources":["@wordpress/components/src/v-stack/index.ts"],"sourcesContent":["export { default as VStack } from './component';\nexport { useVStack } from './hook';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,aAAa;AAC/C,SAASC,SAAS,QAAQ,QAAQ","ignoreList":[]}

package/build-module/v-stack/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/v-stack/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { HStackAlignment, Props as HStackProps } from '../h-stack/types';\n\nexport type VStackProps = Omit< HStackProps, 'alignment' | 'spacing' > & {\n\t/**\n\t * Determines how the child elements are aligned.\n\t *\n\t * -   `top`: Aligns content to the top.\n\t * -   `topLeft`: Aligns content to the top/left.\n\t * -   `topRight`: Aligns content to the top/right.\n\t * -   `left`: Aligns content to the left.\n\t * -   `center`: Aligns content to the center.\n\t * -   `right`: Aligns content to the right.\n\t * -   `bottom`: Aligns content to the bottom.\n\t * -   `bottomLeft`: Aligns content to the bottom/left.\n\t * -   `bottomRight`: Aligns content to the bottom/right.\n\t * -   `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.\n\t * -   `stretch`: Stretches content to the cross axis edges of the container.\n\t *\n\t * @default 'stretch'\n\t */\n\talignment?: HStackAlignment | CSSProperties[ 'alignItems' ];\n\t/**\n\t * The amount of space between each child element. Spacing in between each\n\t * child can be adjusted by using `spacing`. The value of `spacing` works as\n\t * a multiplier to the library's grid system (base of `4px`).\n\t */\n\tspacing?: CSSProperties[ 'width' ];\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/v-stack/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { HStackAlignment, Props as HStackProps } from '../h-stack/types';\n\nexport type VStackProps = Omit< HStackProps, 'alignment' | 'spacing' > & {\n\t/**\n\t * Determines how the child elements are aligned.\n\t *\n\t * -   `top`: Aligns content to the top.\n\t * -   `topLeft`: Aligns content to the top/left.\n\t * -   `topRight`: Aligns content to the top/right.\n\t * -   `left`: Aligns content to the left.\n\t * -   `center`: Aligns content to the center.\n\t * -   `right`: Aligns content to the right.\n\t * -   `bottom`: Aligns content to the bottom.\n\t * -   `bottomLeft`: Aligns content to the bottom/left.\n\t * -   `bottomRight`: Aligns content to the bottom/right.\n\t * -   `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.\n\t * -   `stretch`: Stretches content to the cross axis edges of the container.\n\t *\n\t * @default 'stretch'\n\t */\n\talignment?: HStackAlignment | CSSProperties[ 'alignItems' ];\n\t/**\n\t * The amount of space between each child element. Spacing in between each\n\t * child can be adjusted by using `spacing`. The value of `spacing` works as\n\t * a multiplier to the library's grid system (base of `4px`).\n\t */\n\tspacing?: CSSProperties[ 'width' ];\n};\n"],"mappings":"","ignoreList":[]}

package/build-module/view/component.js

@@ -1,8 +1,35 @@
 import _styled from "@emotion/styled/base";
+import { createElement } from "react";
 /**
  * External dependencies
  */
 
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+
+const PolymorphicDiv = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e19lxcc00"
+} : {
+  target: "e19lxcc00",
+  label: "PolymorphicDiv"
+})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdmlldy9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVpQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3ZpZXcvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tICdAd29yZHByZXNzL2VsZW1lbnQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vY29udGV4dCc7XG5cbmNvbnN0IFBvbHltb3JwaGljRGl2ID0gc3R5bGVkLmRpdmBgO1xuXG5mdW5jdGlvbiBVbmZvcndhcmRlZFZpZXc8IFQgZXh0ZW5kcyBSZWFjdC5FbGVtZW50VHlwZSA9ICdkaXYnID4oXG5cdHsgYXMsIC4uLnJlc3RQcm9wcyB9OiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwge30sIFQgPixcblx0cmVmOiBSZWFjdC5Gb3J3YXJkZWRSZWY8IGFueSA+XG4pIHtcblx0cmV0dXJuIDxQb2x5bW9ycGhpY0RpdiBhcz17IGFzIH0gcmVmPXsgcmVmIH0geyAuLi5yZXN0UHJvcHMgfSAvPjtcbn1cblxuLyoqXG4gKiBgVmlld2AgaXMgYSBjb3JlIGNvbXBvbmVudCB0aGF0IHJlbmRlcnMgZXZlcnl0aGluZyBpbiB0aGUgbGlicmFyeS5cbiAqIEl0IGlzIHRoZSBwcmluY2lwbGUgY29tcG9uZW50IGluIHRoZSBlbnRpcmUgbGlicmFyeS5cbiAqXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7IFZpZXcgfSBmcm9tIGBAd29yZHByZXNzL2NvbXBvbmVudHNgO1xuICpcbiAqIGZ1bmN0aW9uIEV4YW1wbGUoKSB7XG4gKiBcdHJldHVybiAoXG4gKiBcdFx0PFZpZXc+XG4gKiBcdFx0XHQgQ29kZSBpcyBQb2V0cnlcbiAqIFx0XHQ8L1ZpZXc+XG4gKiBcdCk7XG4gKiB9XG4gKiBgYGBcbiAqL1xuZXhwb3J0IGNvbnN0IFZpZXcgPSBPYmplY3QuYXNzaWduKCBmb3J3YXJkUmVmKCBVbmZvcndhcmRlZFZpZXcgKSwge1xuXHRzZWxlY3RvcjogJy5jb21wb25lbnRzLXZpZXcnLFxufSApO1xuXG5leHBvcnQgZGVmYXVsdCBWaWV3O1xuIl19 */");
+function UnforwardedView({
+  as,
+  ...restProps
+}, ref) {
+  return createElement(PolymorphicDiv, {
+    as: as,
+    ref: ref,
+    ...restProps
+  });
+}
+
 /**
  * `View` is a core component that renders everything in the library.
  * It is the principle component in the entire library.
@@ -19,13 +46,8 @@ import _styled from "@emotion/styled/base";
  * }
  * ```
  */
-export const View = _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e19lxcc00"
-} : {
-  target: "e19lxcc00",
-  label: "View"
-})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdmlldy9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDYyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3ZpZXcvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB0eXBlIHsgUmVmQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnQgfSBmcm9tICcuLi9jb250ZXh0L3dvcmRwcmVzcy1jb21wb25lbnQnO1xuaW1wb3J0IHR5cGUgeyBWaWV3UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuLyoqXG4gKiBgVmlld2AgaXMgYSBjb3JlIGNvbXBvbmVudCB0aGF0IHJlbmRlcnMgZXZlcnl0aGluZyBpbiB0aGUgbGlicmFyeS5cbiAqIEl0IGlzIHRoZSBwcmluY2lwbGUgY29tcG9uZW50IGluIHRoZSBlbnRpcmUgbGlicmFyeS5cbiAqXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7IFZpZXcgfSBmcm9tIGBAd29yZHByZXNzL2NvbXBvbmVudHNgO1xuICpcbiAqIGZ1bmN0aW9uIEV4YW1wbGUoKSB7XG4gKiBcdHJldHVybiAoXG4gKiBcdFx0PFZpZXc+XG4gKiBcdFx0XHQgQ29kZSBpcyBQb2V0cnlcbiAqIFx0XHQ8L1ZpZXc+XG4gKiBcdCk7XG4gKiB9XG4gKiBgYGBcbiAqL1xuZXhwb3J0IGNvbnN0IFZpZXc6IFdvcmRQcmVzc0NvbXBvbmVudDxcblx0J2RpdicsXG5cdFZpZXdQcm9wcyAmIFJlZkF0dHJpYnV0ZXM8IGFueSA+LFxuXHR0cnVlXG4+ID0gc3R5bGVkLmRpdmBgO1xuXG5WaWV3LnNlbGVjdG9yID0gJy5jb21wb25lbnRzLXZpZXcnO1xuVmlldy5kaXNwbGF5TmFtZSA9ICdWaWV3JztcblxuZXhwb3J0IGRlZmF1bHQgVmlldztcbiJdfQ== */");
-View.selector = '.components-view';
-View.displayName = 'View';
+export const View = Object.assign(forwardRef(UnforwardedView), {
+  selector: '.components-view'
+});
 export default View;
 //# sourceMappingURL=component.js.map

package/build-module/view/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","_styled","process","env","NODE_ENV","target","label","selector","displayName"],"sources":["@wordpress/components/src/view/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport type { RefAttributes } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponent } from '../context/wordpress-component';\nimport type { ViewProps } from './types';\n\n/**\n * `View` is a core component that renders everything in the library.\n * It is the principle component in the entire library.\n *\n * ```jsx\n * import { View } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<View>\n * \t\t\t Code is Poetry\n * \t\t</View>\n * \t);\n * }\n * ```\n */\nexport const View: WordPressComponent<\n\t'div',\n\tViewProps & RefAttributes< any >,\n\ttrue\n> = styled.div``;\n\nView.selector = '.components-view';\nView.displayName = 'View';\n\nexport default View;\n"],"mappings":";AAAA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,IAIZ,GAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,u4CAAe;AAEhBJ,IAAI,CAACO,QAAQ,GAAG,kBAAkB;AAClCP,IAAI,CAACQ,WAAW,GAAG,MAAM;AAEzB,eAAeR,IAAI"}
+{"version":3,"names":["forwardRef","PolymorphicDiv","_styled","process","env","NODE_ENV","target","label","UnforwardedView","as","restProps","ref","createElement","View","Object","assign","selector"],"sources":["@wordpress/components/src/view/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\n\nconst PolymorphicDiv = styled.div``;\n\nfunction UnforwardedView< T extends React.ElementType = 'div' >(\n\t{ as, ...restProps }: WordPressComponentProps< {}, T >,\n\tref: React.ForwardedRef< any >\n) {\n\treturn <PolymorphicDiv as={ as } ref={ ref } { ...restProps } />;\n}\n\n/**\n * `View` is a core component that renders everything in the library.\n * It is the principle component in the entire library.\n *\n * ```jsx\n * import { View } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<View>\n * \t\t\t Code is Poetry\n * \t\t</View>\n * \t);\n * }\n * ```\n */\nexport const View = Object.assign( forwardRef( UnforwardedView ), {\n\tselector: '.components-view',\n} );\n\nexport default View;\n"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAGA,MAAMC,cAAc,gBAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,moDAAe;AAEnC,SAASG,eAAeA,CACvB;EAAEC,EAAE;EAAE,GAAGC;AAA4C,CAAC,EACtDC,GAA8B,EAC7B;EACD,OAAOC,aAAA,CAACX,cAAc;IAACQ,EAAE,EAAGA,EAAI;IAACE,GAAG,EAAGA,GAAK;IAAA,GAAMD;EAAS,CAAI,CAAC;AACjE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,IAAI,GAAGC,MAAM,CAACC,MAAM,CAAEf,UAAU,CAAEQ,eAAgB,CAAC,EAAE;EACjEQ,QAAQ,EAAE;AACX,CAAE,CAAC;AAEH,eAAeH,IAAI","ignoreList":[]}

package/build-module/view/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","View"],"sources":["@wordpress/components/src/view/index.ts"],"sourcesContent":["export { default as View } from './component';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAAI,QAAQ,aAAa"}
+{"version":3,"names":["default","View"],"sources":["@wordpress/components/src/view/index.ts"],"sourcesContent":["export { default as View } from './component';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAAI,QAAQ,aAAa","ignoreList":[]}

package/build-module/visually-hidden/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContextSystem","contextConnect","visuallyHidden","View","UnconnectedVisuallyHidden","props","forwardedRef","style","styleProp","contextProps","createElement","ref","VisuallyHidden"],"sources":["@wordpress/components/src/visually-hidden/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem, contextConnect } from '../context';\nimport { visuallyHidden } from './styles';\nimport { View } from '../view';\nimport type { VisuallyHiddenProps } from './types';\n\nfunction UnconnectedVisuallyHidden(\n\tprops: WordPressComponentProps< VisuallyHiddenProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { style: styleProp, ...contextProps } = useContextSystem(\n\t\tprops,\n\t\t'VisuallyHidden'\n\t);\n\treturn (\n\t\t<View\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...contextProps }\n\t\t\tstyle={ { ...visuallyHidden, ...( styleProp || {} ) } }\n\t\t/>\n\t);\n}\n\n/**\n * `VisuallyHidden` is a component used to render text intended to be visually\n * hidden, but will show for alternate devices, for example a screen reader.\n *\n * ```jsx\n * import { VisuallyHidden } from `@wordpress/components`;\n *\n * function Example() {\n *   return (\n *     <VisuallyHidden>\n *       <label>Code is Poetry</label>\n *     </VisuallyHidden>\n *   );\n * }\n * ```\n */\nexport const VisuallyHidden = contextConnect(\n\tUnconnectedVisuallyHidden,\n\t'VisuallyHidden'\n);\n\nexport default VisuallyHidden;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,gBAAgB,EAAEC,cAAc,QAAQ,YAAY;AAC7D,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,IAAI,QAAQ,SAAS;AAG9B,SAASC,yBAAyBA,CACjCC,KAA4D,EAC5DC,YAAiC,EAChC;EACD,MAAM;IAAEC,KAAK,EAAEC,SAAS;IAAE,GAAGC;EAAa,CAAC,GAAGT,gBAAgB,CAC7DK,KAAK,EACL,gBACD,CAAC;EACD,OACCK,aAAA,CAACP,IAAI;IACJQ,GAAG,EAAGL,YAAc;IAAA,GACfG,YAAY;IACjBF,KAAK,EAAG;MAAE,GAAGL,cAAc;MAAE,IAAKM,SAAS,IAAI,CAAC,CAAC;IAAG;EAAG,CACvD,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,cAAc,GAAGX,cAAc,CAC3CG,yBAAyB,EACzB,gBACD,CAAC;AAED,eAAeQ,cAAc"}
+{"version":3,"names":["useContextSystem","contextConnect","visuallyHidden","View","UnconnectedVisuallyHidden","props","forwardedRef","style","styleProp","contextProps","createElement","ref","VisuallyHidden"],"sources":["@wordpress/components/src/visually-hidden/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem, contextConnect } from '../context';\nimport { visuallyHidden } from './styles';\nimport { View } from '../view';\nimport type { VisuallyHiddenProps } from './types';\n\nfunction UnconnectedVisuallyHidden(\n\tprops: WordPressComponentProps< VisuallyHiddenProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { style: styleProp, ...contextProps } = useContextSystem(\n\t\tprops,\n\t\t'VisuallyHidden'\n\t);\n\treturn (\n\t\t<View\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...contextProps }\n\t\t\tstyle={ { ...visuallyHidden, ...( styleProp || {} ) } }\n\t\t/>\n\t);\n}\n\n/**\n * `VisuallyHidden` is a component used to render text intended to be visually\n * hidden, but will show for alternate devices, for example a screen reader.\n *\n * ```jsx\n * import { VisuallyHidden } from `@wordpress/components`;\n *\n * function Example() {\n *   return (\n *     <VisuallyHidden>\n *       <label>Code is Poetry</label>\n *     </VisuallyHidden>\n *   );\n * }\n * ```\n */\nexport const VisuallyHidden = contextConnect(\n\tUnconnectedVisuallyHidden,\n\t'VisuallyHidden'\n);\n\nexport default VisuallyHidden;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,gBAAgB,EAAEC,cAAc,QAAQ,YAAY;AAC7D,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,IAAI,QAAQ,SAAS;AAG9B,SAASC,yBAAyBA,CACjCC,KAA4D,EAC5DC,YAAiC,EAChC;EACD,MAAM;IAAEC,KAAK,EAAEC,SAAS;IAAE,GAAGC;EAAa,CAAC,GAAGT,gBAAgB,CAC7DK,KAAK,EACL,gBACD,CAAC;EACD,OACCK,aAAA,CAACP,IAAI;IACJQ,GAAG,EAAGL,YAAc;IAAA,GACfG,YAAY;IACjBF,KAAK,EAAG;MAAE,GAAGL,cAAc;MAAE,IAAKM,SAAS,IAAI,CAAC,CAAC;IAAG;EAAG,CACvD,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,cAAc,GAAGX,cAAc,CAC3CG,yBAAyB,EACzB,gBACD,CAAC;AAED,eAAeQ,cAAc","ignoreList":[]}

package/build-module/visually-hidden/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","VisuallyHidden"],"sources":["@wordpress/components/src/visually-hidden/index.ts"],"sourcesContent":["export { default as VisuallyHidden } from './component';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,cAAc,QAAQ,aAAa"}
+{"version":3,"names":["default","VisuallyHidden"],"sources":["@wordpress/components/src/visually-hidden/index.ts"],"sourcesContent":["export { default as VisuallyHidden } from './component';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,cAAc,QAAQ,aAAa","ignoreList":[]}

package/build-module/visually-hidden/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["visuallyHidden","border","clip","WebkitClipPath","clipPath","height","margin","overflow","padding","position","width","wordWrap"],"sources":["@wordpress/components/src/visually-hidden/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\nexport const visuallyHidden: CSSProperties = {\n\tborder: 0,\n\tclip: 'rect(1px, 1px, 1px, 1px)',\n\tWebkitClipPath: 'inset( 50% )',\n\tclipPath: 'inset( 50% )',\n\theight: '1px',\n\tmargin: '-1px',\n\toverflow: 'hidden',\n\tpadding: 0,\n\tposition: 'absolute',\n\twidth: '1px',\n\twordWrap: 'normal',\n};\n"],"mappings":"AAAA;AACA;AACA;;AAGA,OAAO,MAAMA,cAA6B,GAAG;EAC5CC,MAAM,EAAE,CAAC;EACTC,IAAI,EAAE,0BAA0B;EAChCC,cAAc,EAAE,cAAc;EAC9BC,QAAQ,EAAE,cAAc;EACxBC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,MAAM;EACdC,QAAQ,EAAE,QAAQ;EAClBC,OAAO,EAAE,CAAC;EACVC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE;AACX,CAAC"}
+{"version":3,"names":["visuallyHidden","border","clip","WebkitClipPath","clipPath","height","margin","overflow","padding","position","width","wordWrap"],"sources":["@wordpress/components/src/visually-hidden/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\nexport const visuallyHidden: CSSProperties = {\n\tborder: 0,\n\tclip: 'rect(1px, 1px, 1px, 1px)',\n\tWebkitClipPath: 'inset( 50% )',\n\tclipPath: 'inset( 50% )',\n\theight: '1px',\n\tmargin: '-1px',\n\toverflow: 'hidden',\n\tpadding: 0,\n\tposition: 'absolute',\n\twidth: '1px',\n\twordWrap: 'normal',\n};\n"],"mappings":"AAAA;AACA;AACA;;AAGA,OAAO,MAAMA,cAA6B,GAAG;EAC5CC,MAAM,EAAE,CAAC;EACTC,IAAI,EAAE,0BAA0B;EAChCC,cAAc,EAAE,cAAc;EAC9BC,QAAQ,EAAE,cAAc;EACxBC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,MAAM;EACdC,QAAQ,EAAE,QAAQ;EAClBC,OAAO,EAAE,CAAC;EACVC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE;AACX,CAAC","ignoreList":[]}

package/build-module/visually-hidden/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/visually-hidden/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\nexport type VisuallyHiddenProps = {\n\t/**\n\t * The children elements.\n\t */\n\tchildren: ReactNode;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/visually-hidden/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\nexport type VisuallyHiddenProps = {\n\t/**\n\t * The children elements.\n\t */\n\tchildren: ReactNode;\n};\n"],"mappings":"","ignoreList":[]}

package/build-module/z-stack/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["isValidElement","getValidChildren","contextConnect","useContextSystem","ZStackView","ZStackChildView","UnconnectedZStack","props","forwardedRef","children","className","isLayered","isReversed","offset","otherProps","validChildren","childrenLastIndex","length","clonedChildren","map","child","index","zIndex","offsetAmount","key","createElement","ref","ZStack"],"sources":["@wordpress/components/src/z-stack/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { isValidElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getValidChildren } from '../utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../context';\nimport { ZStackView, ZStackChildView } from './styles';\nimport type { ZStackProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnconnectedZStack(\n\tprops: WordPressComponentProps< ZStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tisLayered = true,\n\t\tisReversed = false,\n\t\toffset = 0,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ZStack' );\n\n\tconst validChildren = getValidChildren( children );\n\tconst childrenLastIndex = validChildren.length - 1;\n\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst zIndex = isReversed ? childrenLastIndex - index : index;\n\t\t// Only when the component is layered, the offset needs to be multiplied by\n\t\t// the item's index, so that items can correctly stack at the right distance\n\t\tconst offsetAmount = isLayered ? offset * index : offset;\n\n\t\tconst key = isValidElement( child ) ? child.key : index;\n\n\t\treturn (\n\t\t\t<ZStackChildView\n\t\t\t\toffsetAmount={ offsetAmount }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t\tkey={ key }\n\t\t\t>\n\t\t\t\t{ child }\n\t\t\t</ZStackChildView>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<ZStackView\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ className }\n\t\t\tisLayered={ isLayered }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t{ clonedChildren }\n\t\t</ZStackView>\n\t);\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect( UnconnectedZStack, 'ZStack' );\n\nexport default ZStack;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,oBAAoB;;AAEnD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,YAAY;AAC7D,SAASC,UAAU,EAAEC,eAAe,QAAQ,UAAU;AAItD,SAASC,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAM;IACLC,QAAQ;IACRC,SAAS;IACTC,SAAS,GAAG,IAAI;IAChBC,UAAU,GAAG,KAAK;IAClBC,MAAM,GAAG,CAAC;IACV,GAAGC;EACJ,CAAC,GAAGX,gBAAgB,CAAEI,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMQ,aAAa,GAAGd,gBAAgB,CAAEQ,QAAS,CAAC;EAClD,MAAMO,iBAAiB,GAAGD,aAAa,CAACE,MAAM,GAAG,CAAC;EAElD,MAAMC,cAAc,GAAGH,aAAa,CAACI,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IAC7D,MAAMC,MAAM,GAAGV,UAAU,GAAGI,iBAAiB,GAAGK,KAAK,GAAGA,KAAK;IAC7D;IACA;IACA,MAAME,YAAY,GAAGZ,SAAS,GAAGE,MAAM,GAAGQ,KAAK,GAAGR,MAAM;IAExD,MAAMW,GAAG,GAAGxB,cAAc,CAAEoB,KAAM,CAAC,GAAGA,KAAK,CAACI,GAAG,GAAGH,KAAK;IAEvD,OACCI,aAAA,CAACpB,eAAe;MACfkB,YAAY,EAAGA,YAAc;MAC7BD,MAAM,EAAGA,MAAQ;MACjBE,GAAG,EAAGA;IAAK,GAETJ,KACc,CAAC;EAEpB,CAAE,CAAC;EAEH,OACCK,aAAA,CAACrB,UAAU;IAAA,GACLU,UAAU;IACfJ,SAAS,EAAGA,SAAW;IACvBC,SAAS,EAAGA,SAAW;IACvBe,GAAG,EAAGlB;EAAc,GAElBU,cACS,CAAC;AAEf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMS,MAAM,GAAGzB,cAAc,CAAEI,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeqB,MAAM"}
+{"version":3,"names":["isValidElement","getValidChildren","contextConnect","useContextSystem","ZStackView","ZStackChildView","UnconnectedZStack","props","forwardedRef","children","className","isLayered","isReversed","offset","otherProps","validChildren","childrenLastIndex","length","clonedChildren","map","child","index","zIndex","offsetAmount","key","createElement","ref","ZStack"],"sources":["@wordpress/components/src/z-stack/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { isValidElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getValidChildren } from '../utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../context';\nimport { ZStackView, ZStackChildView } from './styles';\nimport type { ZStackProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnconnectedZStack(\n\tprops: WordPressComponentProps< ZStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tisLayered = true,\n\t\tisReversed = false,\n\t\toffset = 0,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ZStack' );\n\n\tconst validChildren = getValidChildren( children );\n\tconst childrenLastIndex = validChildren.length - 1;\n\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst zIndex = isReversed ? childrenLastIndex - index : index;\n\t\t// Only when the component is layered, the offset needs to be multiplied by\n\t\t// the item's index, so that items can correctly stack at the right distance\n\t\tconst offsetAmount = isLayered ? offset * index : offset;\n\n\t\tconst key = isValidElement( child ) ? child.key : index;\n\n\t\treturn (\n\t\t\t<ZStackChildView\n\t\t\t\toffsetAmount={ offsetAmount }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t\tkey={ key }\n\t\t\t>\n\t\t\t\t{ child }\n\t\t\t</ZStackChildView>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<ZStackView\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ className }\n\t\t\tisLayered={ isLayered }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t{ clonedChildren }\n\t\t</ZStackView>\n\t);\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect( UnconnectedZStack, 'ZStack' );\n\nexport default ZStack;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,oBAAoB;;AAEnD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,YAAY;AAC7D,SAASC,UAAU,EAAEC,eAAe,QAAQ,UAAU;AAItD,SAASC,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAM;IACLC,QAAQ;IACRC,SAAS;IACTC,SAAS,GAAG,IAAI;IAChBC,UAAU,GAAG,KAAK;IAClBC,MAAM,GAAG,CAAC;IACV,GAAGC;EACJ,CAAC,GAAGX,gBAAgB,CAAEI,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMQ,aAAa,GAAGd,gBAAgB,CAAEQ,QAAS,CAAC;EAClD,MAAMO,iBAAiB,GAAGD,aAAa,CAACE,MAAM,GAAG,CAAC;EAElD,MAAMC,cAAc,GAAGH,aAAa,CAACI,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IAC7D,MAAMC,MAAM,GAAGV,UAAU,GAAGI,iBAAiB,GAAGK,KAAK,GAAGA,KAAK;IAC7D;IACA;IACA,MAAME,YAAY,GAAGZ,SAAS,GAAGE,MAAM,GAAGQ,KAAK,GAAGR,MAAM;IAExD,MAAMW,GAAG,GAAGxB,cAAc,CAAEoB,KAAM,CAAC,GAAGA,KAAK,CAACI,GAAG,GAAGH,KAAK;IAEvD,OACCI,aAAA,CAACpB,eAAe;MACfkB,YAAY,EAAGA,YAAc;MAC7BD,MAAM,EAAGA,MAAQ;MACjBE,GAAG,EAAGA;IAAK,GAETJ,KACc,CAAC;EAEpB,CAAE,CAAC;EAEH,OACCK,aAAA,CAACrB,UAAU;IAAA,GACLU,UAAU;IACfJ,SAAS,EAAGA,SAAW;IACvBC,SAAS,EAAGA,SAAW;IACvBe,GAAG,EAAGlB;EAAc,GAElBU,cACS,CAAC;AAEf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMS,MAAM,GAAGzB,cAAc,CAAEI,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeqB,MAAM","ignoreList":[]}

package/build-module/z-stack/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","ZStack"],"sources":["@wordpress/components/src/z-stack/index.ts"],"sourcesContent":["export { default as ZStack } from './component';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,aAAa"}
+{"version":3,"names":["default","ZStack"],"sources":["@wordpress/components/src/z-stack/index.ts"],"sourcesContent":["export { default as ZStack } from './component';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,aAAa","ignoreList":[]}

package/build-module/z-stack/styles.js

@@ -4,7 +4,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * External dependencies
  */
 import { css } from '@emotion/react';
-export const ZStackChildView = _styled("div", process.env.NODE_ENV === "production" ? {
+export const ZStackChildView = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ebn2ljm1"
 } : {
   target: "ebn2ljm1",
@@ -27,7 +27,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0NNIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvei1zdGFjay9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBaU3RhY2tDaGlsZFZpZXcgPSBzdHlsZWQuZGl2PCB7XG5cdG9mZnNldEFtb3VudDogbnVtYmVyO1xuXHR6SW5kZXg6IG51bWJlcjtcbn0gPmBcblx0Jjpub3QoIDpmaXJzdC1vZi10eXBlICkge1xuXHRcdCR7ICggeyBvZmZzZXRBbW91bnQgfSApID0+XG5cdFx0XHRjc3MoIHtcblx0XHRcdFx0bWFyZ2luSW5saW5lU3RhcnQ6IG9mZnNldEFtb3VudCxcblx0XHRcdH0gKSB9O1xuXHR9XG5cblx0JHsgKCB7IHpJbmRleCB9ICkgPT4gY3NzKCB7IHpJbmRleCB9ICkgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBaU3RhY2tWaWV3ID0gc3R5bGVkLmRpdjwge1xuXHRpc0xheWVyZWQ6IGJvb2xlYW47XG59ID5gXG5cdGRpc3BsYXk6IGlubGluZS1ncmlkO1xuXHRncmlkLWF1dG8tZmxvdzogY29sdW1uO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cblx0JiA+ICR7IFpTdGFja0NoaWxkVmlldyB9IHtcblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0anVzdGlmeS1zZWxmOiBzdGFydDtcblxuXHRcdCR7ICggeyBpc0xheWVyZWQgfSApID0+XG5cdFx0XHRpc0xheWVyZWRcblx0XHRcdFx0PyAvLyBXaGVuIGBpc0xheWVyZWRgIGlzIHRydWUsIGFsbCBpdGVtcyBvdmVybGFwIGluIHRoZSBzYW1lIGdyaWQgY2VsbFxuXHRcdFx0XHQgIGNzcyggeyBncmlkUm93U3RhcnQ6IDEsIGdyaWRDb2x1bW5TdGFydDogMSB9IClcblx0XHRcdFx0OiB1bmRlZmluZWQgfTtcblx0fVxuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export const ZStackView = _styled("div", process.env.NODE_ENV === "production" ? {
+export const ZStackView = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ebn2ljm0"
 } : {
   target: "ebn2ljm0",

package/build-module/z-stack/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","ZStackChildView","_styled","process","env","NODE_ENV","target","label","offsetAmount","marginInlineStart","zIndex","_ref","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ZStackView","isLayered","undefined"],"sources":["@wordpress/components/src/z-stack/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\nexport const ZStackChildView = styled.div< {\n\toffsetAmount: number;\n\tzIndex: number;\n} >`\n\t&:not( :first-of-type ) {\n\t\t${ ( { offsetAmount } ) =>\n\t\t\tcss( {\n\t\t\t\tmarginInlineStart: offsetAmount,\n\t\t\t} ) };\n\t}\n\n\t${ ( { zIndex } ) => css( { zIndex } ) };\n`;\n\nexport const ZStackView = styled.div< {\n\tisLayered: boolean;\n} >`\n\tdisplay: inline-grid;\n\tgrid-auto-flow: column;\n\tposition: relative;\n\n\t& > ${ ZStackChildView } {\n\t\tposition: relative;\n\t\tjustify-self: start;\n\n\t\t${ ( { isLayered } ) =>\n\t\t\tisLayered\n\t\t\t\t? // When `isLayered` is true, all items overlap in the same grid cell\n\t\t\t\t  css( { gridRowStart: 1, gridColumnStart: 1 } )\n\t\t\t\t: undefined };\n\t}\n`;\n"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,OAAO,MAAMC,eAAe,GAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,+BAKvB,CAAE;EAAEC;AAAa,CAAC,kBACpBR,GAAG,CAAE;EACJS,iBAAiB,EAAED;AACpB,CAAC,EAAAL,OAAA,CAAAC,GAAA,CAAAC,QAAA,oDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,k7CAAC,CAAC,QAGF,CAAE;EAAEK;AAAO,CAAC,kBAAMV,GAAG,CAAE;EAAEU;AAAO,CAAC,EAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,oDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,s7CAAC,CAAC,SAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,o7CACtC;AAAC,IAAAM,IAAA,GAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAO,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA;AAEF,OAAO,MAAMC,UAAU,GAAAf,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,qEAOfN,eAAe,4CAIlB,CAAE;EAAEiB;AAAU,CAAC,KACjBA,SAAS,GACN;AAAAP,IAAA,GAEAQ,SAAS,UAAAhB,OAAA,CAAAC,GAAA,CAAAC,QAAA,w7CAEd"}
+{"version":3,"names":["css","ZStackChildView","_styled","process","env","NODE_ENV","target","label","offsetAmount","marginInlineStart","zIndex","_ref","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ZStackView","isLayered","undefined"],"sources":["@wordpress/components/src/z-stack/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\nexport const ZStackChildView = styled.div< {\n\toffsetAmount: number;\n\tzIndex: number;\n} >`\n\t&:not( :first-of-type ) {\n\t\t${ ( { offsetAmount } ) =>\n\t\t\tcss( {\n\t\t\t\tmarginInlineStart: offsetAmount,\n\t\t\t} ) };\n\t}\n\n\t${ ( { zIndex } ) => css( { zIndex } ) };\n`;\n\nexport const ZStackView = styled.div< {\n\tisLayered: boolean;\n} >`\n\tdisplay: inline-grid;\n\tgrid-auto-flow: column;\n\tposition: relative;\n\n\t& > ${ ZStackChildView } {\n\t\tposition: relative;\n\t\tjustify-self: start;\n\n\t\t${ ( { isLayered } ) =>\n\t\t\tisLayered\n\t\t\t\t? // When `isLayered` is true, all items overlap in the same grid cell\n\t\t\t\t  css( { gridRowStart: 1, gridColumnStart: 1 } )\n\t\t\t\t: undefined };\n\t}\n`;\n"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,OAAO,MAAMC,eAAe,gBAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,+BAKvB,CAAE;EAAEC;AAAa,CAAC,kBACpBR,GAAG,CAAE;EACJS,iBAAiB,EAAED;AACpB,CAAC,EAAAL,OAAA,CAAAC,GAAA,CAAAC,QAAA,oDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,k7CAAC,CAAC,QAGF,CAAE;EAAEK;AAAO,CAAC,kBAAMV,GAAG,CAAE;EAAEU;AAAO,CAAC,EAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,oDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,s7CAAC,CAAC,SAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,o7CACtC;AAAC,IAAAM,IAAA,GAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAO,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA;AAEF,OAAO,MAAMC,UAAU,gBAAAf,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,qEAOfN,eAAe,4CAIlB,CAAE;EAAEiB;AAAU,CAAC,KACjBA,SAAS,GACN;AAAAP,IAAA,GAEAQ,SAAS,UAAAhB,OAAA,CAAAC,GAAA,CAAAC,QAAA,w7CAEd","ignoreList":[]}

package/build-module/z-stack/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/z-stack/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\nexport type ZStackProps = {\n\t/**\n\t * Layers children elements on top of each other (first: highest z-index,\n\t * last: lowest z-index).\n\t *\n\t * @default true\n\t */\n\tisLayered?: boolean;\n\t/**\n\t * Reverse the layer ordering (first: lowest z-index, last: highest\n\t * z-index).\n\t *\n\t * @default false\n\t */\n\tisReversed?: boolean;\n\t/**\n\t * The amount of space between each child element. Its value is\n\t * automatically inverted (i.e. from positive to negative, and viceversa)\n\t * when switching from LTR to RTL.\n\t *\n\t * @default 0\n\t */\n\toffset?: number;\n\t/**\n\t * The children to stack.\n\t */\n\tchildren: ReactNode;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/z-stack/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\nexport type ZStackProps = {\n\t/**\n\t * Layers children elements on top of each other (first: highest z-index,\n\t * last: lowest z-index).\n\t *\n\t * @default true\n\t */\n\tisLayered?: boolean;\n\t/**\n\t * Reverse the layer ordering (first: lowest z-index, last: highest\n\t * z-index).\n\t *\n\t * @default false\n\t */\n\tisReversed?: boolean;\n\t/**\n\t * The amount of space between each child element. Its value is\n\t * automatically inverted (i.e. from positive to negative, and viceversa)\n\t * when switching from LTR to RTL.\n\t *\n\t * @default 0\n\t */\n\toffset?: number;\n\t/**\n\t * The children to stack.\n\t */\n\tchildren: ReactNode;\n};\n"],"mappings":"","ignoreList":[]}

package/build-style/style-rtl.css

@@ -171,8 +171,8 @@
   }
 }
 .components-autocomplete__popover .components-popover__content {
-  padding: 16px;
-  min-width: 220px;
+  padding: 8px;
+  min-width: 200px;
 }
 
 .components-autocomplete__result.components-button {
@@ -182,8 +182,13 @@
   text-align: right;
   width: 100%;
 }
-.components-autocomplete__result.components-button.is-selected {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+.components-autocomplete__result.components-button:focus:not(:disabled) {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.components-autocomplete__result.components-button.is-selected, .components-autocomplete__result.components-button:not(:disabled, [aria-disabled=true]):active {
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  color: #fff;
 }
 
 .components-button-group {
@@ -483,6 +488,19 @@ p + .components-button.is-tertiary {
     background-position: right 200px top 0;
   }
 }
+.components-checkbox-control {
+  --checkbox-input-size: 24px;
+}
+@media (min-width: 600px) {
+  .components-checkbox-control {
+    --checkbox-input-size: 20px;
+  }
+}
+
+.components-checkbox-control__label {
+  line-height: var(--checkbox-input-size);
+}
+
 .components-checkbox-control__input[type=checkbox] {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
@@ -509,8 +527,8 @@ p + .components-button.is-tertiary {
   padding: 0 !important;
   text-align: center;
   vertical-align: top;
-  width: 24px;
-  height: 24px;
+  width: var(--checkbox-input-size);
+  height: var(--checkbox-input-size);
   -webkit-appearance: none;
           appearance: none;
   transition: 0.1s border-color ease-in-out;
@@ -592,12 +610,6 @@ p + .components-button.is-tertiary {
   cursor: default;
   opacity: 1;
 }
-@media (min-width: 600px) {
-  .components-checkbox-control__input[type=checkbox] {
-    height: 20px;
-    width: 20px;
-  }
-}
 @media (prefers-reduced-motion: reduce) {
   .components-checkbox-control__input[type=checkbox] {
     transition-duration: 0s;
@@ -625,25 +637,22 @@ p + .components-button.is-tertiary {
   display: inline-block;
   margin-left: 12px;
   vertical-align: middle;
-  width: 24px;
-  height: 24px;
-}
-@media (min-width: 600px) {
-  .components-checkbox-control__input-container {
-    width: 20px;
-    height: 20px;
-  }
+  width: var(--checkbox-input-size);
+  aspect-ratio: 1;
+  flex-shrink: 0;
 }
 
 svg.components-checkbox-control__checked,
 svg.components-checkbox-control__indeterminate {
+  --checkmark-size: var(--checkbox-input-size);
   fill: #fff;
   cursor: pointer;
   position: absolute;
-  right: 0;
-  top: 0;
-  width: 24px;
-  height: 24px;
+  right: 50%;
+  top: 50%;
+  transform: translate(50%, -50%);
+  width: var(--checkmark-size);
+  height: var(--checkmark-size);
   -webkit-user-select: none;
           user-select: none;
   pointer-events: none;
@@ -651,11 +660,15 @@ svg.components-checkbox-control__indeterminate {
 @media (min-width: 600px) {
   svg.components-checkbox-control__checked,
 svg.components-checkbox-control__indeterminate {
-    right: -2px;
-    top: -2px;
+    --checkmark-size: calc(var(--checkbox-input-size) + 4px);
   }
 }
 
+.components-checkbox-control__help {
+  display: inline-block;
+  margin-inline-start: calc(var(--checkbox-input-size) + 12px);
+}
+
 .components-circular-option-picker {
   display: inline-block;
   width: 100%;
@@ -1055,6 +1068,12 @@ input.components-combobox-control__input[type=text]:focus {
   margin-right: 10px;
 }
 
+.components-custom-select-control__menu-wrapper {
+  position: absolute;
+  min-width: 100%;
+  bottom: 0;
+}
+
 .components-custom-select-control__menu {
   border: 1px solid #1e1e1e;
   background-color: #fff;
@@ -1313,6 +1332,19 @@ body.is-dragging-components-draggable {
   margin: 2px;
 }
 
+.components-external-link {
+  text-decoration: none;
+}
+
+.components-external-link__contents {
+  text-decoration: underline;
+}
+
+.components-external-link__icon {
+  margin-right: 0.5ch;
+  font-weight: 400;
+}
+
 .components-form-toggle {
   position: relative;
   display: inline-block;
@@ -1725,9 +1757,9 @@ body.is-dragging-components-draggable {
   z-index: 1000000;
 }
 .is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
-.is-focusing-regions .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
-.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
-.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
+.is-focusing-regions .interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
+.is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
+.is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
 .is-focusing-regions .editor-post-publish-panel {
   outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-offset: -4px;
@@ -2114,6 +2146,7 @@ body.is-dragging-components-draggable {
 
 .components-panel__header {
   display: flex;
+  flex-shrink: 0;
   justify-content: space-between;
   align-items: center;
   padding: 0 16px;
@@ -2245,11 +2278,15 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   font-size: 13px;
   box-sizing: border-box;
   position: relative;
-  padding: 1em;
+  padding: 24px;
   width: 100%;
   text-align: right;
   margin: 0;
   color: #1e1e1e;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
   -moz-font-smoothing: subpixel-antialiased;
   -webkit-font-smoothing: subpixel-antialiased;
   border-radius: 2px;
@@ -2257,14 +2294,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   box-shadow: inset 0 0 0 1px #1e1e1e;
   outline: 1px solid transparent;
 }
-@supports (position: sticky) {
-  .components-placeholder.components-placeholder {
-    display: flex;
-    flex-direction: column;
-    justify-content: top;
-    align-items: flex-start;
-  }
-}
 
 .components-placeholder__error,
 .components-placeholder__instructions,
@@ -2279,15 +2308,14 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 
 .components-placeholder__label {
-  display: flex;
   font-weight: 600;
-  margin-bottom: 16px;
   align-items: center;
+  display: flex;
 }
 .components-placeholder__label > svg,
 .components-placeholder__label .dashicon,
 .components-placeholder__label .block-editor-block-icon {
-  margin-left: 12px;
+  margin-left: 4px;
   fill: currentColor;
 }
 @media (forced-colors: active) {
@@ -2307,6 +2335,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   flex-direction: row;
   width: 100%;
   flex-wrap: wrap;
+  gap: 12px;
+  justify-content: flex-start;
 }
 .components-placeholder__fieldset p,
 .components-placeholder__fieldset form p {
@@ -2362,22 +2392,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   color: rgba(30, 30, 30, 0.62);
 }
 
-.components-placeholder__instructions {
-  margin-bottom: 1em;
-}
-
 .components-placeholder__error {
-  margin-top: 1em;
   width: 100%;
-}
-
-.components-placeholder__fieldset .components-button {
-  margin-left: 12px;
-  margin-bottom: 12px;
-}
-.components-placeholder__fieldset .components-button:last-child {
-  margin-bottom: 0;
-  margin-left: 0;
+  gap: 8px;
 }
 
 .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link {
@@ -2388,10 +2405,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   margin-left: 0;
 }
 
-.components-placeholder.is-large .components-placeholder__label {
-  font-size: 18pt;
-  font-weight: normal;
-}
 .components-placeholder.is-medium .components-placeholder__instructions, .components-placeholder.is-small .components-placeholder__instructions {
   display: none;
 }
@@ -2400,11 +2413,14 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder.is-small .components-placeholder__fieldset form {
   flex-direction: column;
 }
-.components-placeholder.is-medium .components-placeholder__fieldset .components-button, .components-placeholder.is-small .components-placeholder__fieldset .components-button {
-  margin-left: auto;
-}
+.components-placeholder.is-medium .components-placeholder__fieldset > *,
+.components-placeholder.is-medium .components-button, .components-placeholder.is-small .components-placeholder__fieldset > *,
 .components-placeholder.is-small .components-button {
-  padding: 0 8px 2px;
+  width: 100%;
+  justify-content: center;
+}
+.components-placeholder.is-small {
+  padding: 16px;
 }
 
 /**
@@ -2425,7 +2441,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   background-color: rgba(0, 0, 0, 0.1);
 }
 .components-placeholder.has-illustration .components-placeholder__fieldset {
-  width: auto;
   margin-right: 0;
   margin-left: 0;
 }
@@ -3299,8 +3314,8 @@ body.lockscroll {
 }
 .components-accessible-toolbar .components-button.has-icon.has-icon,
 .components-toolbar .components-button.has-icon.has-icon {
-  padding-right: 12px;
-  padding-left: 12px;
+  padding-right: 8px;
+  padding-left: 8px;
   min-width: 48px;
 }
 .components-accessible-toolbar .components-button.components-tab-button,
@@ -3390,14 +3405,9 @@ body.lockscroll {
 }
 
 div.components-toolbar > div {
-  display: block;
+  display: flex;
   margin: 0;
 }
-@supports (position: sticky) {
-  div.components-toolbar > div {
-    display: flex;
-  }
-}
 div.components-toolbar > div + div.has-left-divider {
   margin-right: 6px;
   position: relative;