@wordpress/components 28.7.0 → 28.8.0

package/build-module/utils/element-rect.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","useEffect","useState","useEvent","useTrackElementRectUpdates","targetElement","onRect","fireOnElementInit","onRectEvent","observedElementRef","resizeObserverRef","current","ResizeObserver","entries","resizeObserver","observe","unobserve","NULL_ELEMENT_OFFSET_RECT","left","top","width","height","getElementOffsetRect","element","Math","max","offsetLeft","offsetTop","parseFloat","getComputedStyle","useTrackElementOffsetRect","indicatorPosition","setIndicatorPosition"],"sources":["@wordpress/components/src/utils/element-rect.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { useEvent } from './hooks/use-event';\n\n/**\n * `useTrackElementRectUpdates` options.\n */\nexport type UseTrackElementRectUpdatesOptions = {\n\t/**\n\t * Whether to trigger the callback when an element's ResizeObserver is\n\t * first set up, including when the target element changes.\n\t *\n\t * @default true\n\t */\n\tfireOnElementInit?: boolean;\n};\n\n/**\n * Tracks an element's \"rect\" (size and position) and fires `onRect` for all\n * of its discrete values. The element can be changed dynamically and **it\n * must not be stored in a ref**. Instead, it should be stored in a React\n * state or equivalent.\n *\n * By default, `onRect` is called initially for the target element (including\n * when the target element changes), not only on size or position updates.\n * This allows consumers of the hook to always be in sync with all rect values\n * of the target element throughout its lifetime. This behavior can be\n * disabled by setting the `fireOnElementInit` option to `false`.\n *\n * Under the hood, it sets up a `ResizeObserver` that tracks the element. The\n * target element can be changed dynamically, and the observer will be\n * updated accordingly.\n *\n * @example\n *\n * ```tsx\n * const [ targetElement, setTargetElement ] = useState< HTMLElement | null >();\n *\n * useTrackElementRectUpdates( targetElement, ( element ) => {\n *   console.log( 'Element resized:', element );\n * } );\n *\n * <div ref={ setTargetElement } />;\n * ```\n */\nexport function useTrackElementRectUpdates(\n\t/**\n\t * The target element to observe. It can be changed dynamically.\n\t */\n\ttargetElement: HTMLElement | undefined | null,\n\t/**\n\t * Callback to fire when the element is resized. It will also be\n\t * called when the observer is set up, unless `fireOnElementInit` is\n\t * set to `false`.\n\t */\n\tonRect: (\n\t\t/**\n\t\t * The element being tracked at the time of this update.\n\t\t */\n\t\telement: HTMLElement,\n\t\t/**\n\t\t * The list of\n\t\t * [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)\n\t\t * objects passed to the `ResizeObserver.observe` callback. This list\n\t\t * won't be available when the observer is set up, and only on updates.\n\t\t */\n\t\tresizeObserverEntries?: ResizeObserverEntry[]\n\t) => void,\n\t{ fireOnElementInit = true }: UseTrackElementRectUpdatesOptions = {}\n) {\n\tconst onRectEvent = useEvent( onRect );\n\n\tconst observedElementRef = useRef< HTMLElement | null >();\n\tconst resizeObserverRef = useRef< ResizeObserver >();\n\n\t// TODO: could this be a layout effect?\n\tuseEffect( () => {\n\t\tif ( targetElement === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tobservedElementRef.current = targetElement;\n\n\t\t// Set up a ResizeObserver.\n\t\tif ( ! resizeObserverRef.current ) {\n\t\t\tresizeObserverRef.current = new ResizeObserver( ( entries ) => {\n\t\t\t\tif ( observedElementRef.current ) {\n\t\t\t\t\tonRectEvent( observedElementRef.current, entries );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Observe new element.\n\t\tif ( targetElement ) {\n\t\t\tif ( fireOnElementInit ) {\n\t\t\t\t// TODO: investigate if this can be removed,\n\t\t\t\t// see: https://stackoverflow.com/a/60026394\n\t\t\t\tonRectEvent( targetElement );\n\t\t\t}\n\t\t\tresizeObserver.observe( targetElement );\n\t\t}\n\n\t\treturn () => {\n\t\t\t// Unobserve previous element.\n\t\t\tif ( observedElementRef.current ) {\n\t\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t\t}\n\t\t};\n\t}, [ fireOnElementInit, onRectEvent, targetElement ] );\n}\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\nexport type ElementOffsetRect = {\n\t/**\n\t * The distance from the left edge of the offset parent to the left edge of\n\t * the element.\n\t */\n\tleft: number;\n\t/**\n\t * The distance from the top edge of the offset parent to the top edge of\n\t * the element.\n\t */\n\ttop: number;\n\t/**\n\t * The width of the element.\n\t */\n\twidth: number;\n\t/**\n\t * The height of the element.\n\t */\n\theight: number;\n};\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nexport const NULL_ELEMENT_OFFSET_RECT = {\n\tleft: 0,\n\ttop: 0,\n\twidth: 0,\n\theight: 0,\n} satisfies ElementOffsetRect;\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent. This is useful in contexts where `getBoundingClientRect` is not\n * suitable, such as when the element is transformed.\n *\n * **Note:** the `left` and `right` values are adjusted due to a limitation\n * in the way the browser calculates the offset position of the element,\n * which can cause unwanted scrollbars to appear. This adjustment makes the\n * values potentially inaccurate within a range of 1 pixel.\n */\nexport function getElementOffsetRect(\n\telement: HTMLElement\n): ElementOffsetRect {\n\treturn {\n\t\t// The adjustments mentioned in the documentation above are necessary\n\t\t// because `offsetLeft` and `offsetTop` are rounded to the nearest pixel,\n\t\t// which can result in a position mismatch that causes unwanted overflow.\n\t\t// For context, see: https://github.com/WordPress/gutenberg/pull/61979\n\t\tleft: Math.max( element.offsetLeft - 1, 0 ),\n\t\ttop: Math.max( element.offsetTop - 1, 0 ),\n\t\t// This is a workaround to obtain these values with a sub-pixel precision,\n\t\t// since `offsetWidth` and `offsetHeight` are rounded to the nearest pixel.\n\t\twidth: parseFloat( getComputedStyle( element ).width ),\n\t\theight: parseFloat( getComputedStyle( element ).height ),\n\t};\n}\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n */\nexport function useTrackElementOffsetRect(\n\ttargetElement: HTMLElement | undefined | null\n) {\n\tconst [ indicatorPosition, setIndicatorPosition ] =\n\t\tuseState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );\n\n\tuseTrackElementRectUpdates( targetElement, ( element ) =>\n\t\tsetIndicatorPosition( getElementOffsetRect( element ) )\n\t);\n\n\treturn indicatorPosition;\n}\n\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useLayoutEffect","useRef","useState","useResizeObserver","useEvent","NULL_ELEMENT_OFFSET_RECT","top","right","bottom","left","width","height","getElementOffsetRect","element","_element$offsetParent","rect","getBoundingClientRect","offsetParentRect","offsetParent","computedWidth","parseFloat","getComputedStyle","computedHeight","scaleX","scaleY","POLL_RATE","useTrackElementOffsetRect","targetElement","indicatorPosition","setIndicatorPosition","intervalRef","measure","elementOffsetRect","clearInterval","current","setElement","requestAnimationFrame","setInterval"],"sources":["@wordpress/components/src/utils/element-rect.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport { useEvent } from './hooks/use-event';\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\nexport type ElementOffsetRect = {\n\t/**\n\t * The distance from the top edge of the offset parent to the top edge of\n\t * the element.\n\t */\n\ttop: number;\n\t/**\n\t * The distance from the right edge of the offset parent to the right edge\n\t * of the element.\n\t */\n\tright: number;\n\t/**\n\t * The distance from the bottom edge of the offset parent to the bottom edge\n\t * of the element.\n\t */\n\tbottom: number;\n\t/**\n\t * The distance from the left edge of the offset parent to the left edge of\n\t * the element.\n\t */\n\tleft: number;\n\t/**\n\t * The width of the element.\n\t */\n\twidth: number;\n\t/**\n\t * The height of the element.\n\t */\n\theight: number;\n};\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nexport const NULL_ELEMENT_OFFSET_RECT = {\n\ttop: 0,\n\tright: 0,\n\tbottom: 0,\n\tleft: 0,\n\twidth: 0,\n\theight: 0,\n} satisfies ElementOffsetRect;\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent, with subpixel precision. Values reflect the real measures before any\n * potential scaling distortions along the X and Y axes.\n *\n * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`\n * entries are not suitable, such as when the element is transformed, and when\n * `element.offset<Top|Left|Width|Height>` methods are not precise enough.\n *\n * **Note:** in some contexts, like when the scale is 0, this method will fail\n * because it's impossible to calculate a scaling ratio. When that happens, it\n * will return `undefined`.\n */\nexport function getElementOffsetRect(\n\telement: HTMLElement\n): ElementOffsetRect | undefined {\n\t// Position and dimension values computed with `getBoundingClientRect` have\n\t// subpixel precision, but are affected by distortions since they represent\n\t// the \"real\" measures, or in other words, the actual final values as rendered\n\t// by the browser.\n\tconst rect = element.getBoundingClientRect();\n\tif ( rect.width === 0 || rect.height === 0 ) {\n\t\treturn;\n\t}\n\tconst offsetParentRect =\n\t\telement.offsetParent?.getBoundingClientRect() ??\n\t\tNULL_ELEMENT_OFFSET_RECT;\n\n\t// Computed widths and heights have subpixel precision, and are not affected\n\t// by distortions.\n\tconst computedWidth = parseFloat( getComputedStyle( element ).width );\n\tconst computedHeight = parseFloat( getComputedStyle( element ).height );\n\n\t// We can obtain the current scale factor for the element by comparing \"computed\"\n\t// dimensions with the \"real\" ones.\n\tconst scaleX = computedWidth / rect.width;\n\tconst scaleY = computedHeight / rect.height;\n\n\treturn {\n\t\t// To obtain the adjusted values for the position:\n\t\t// 1. Compute the element's position relative to the offset parent.\n\t\t// 2. Correct for the scale factor.\n\t\ttop: ( rect.top - offsetParentRect?.top ) * scaleY,\n\t\tright: ( offsetParentRect?.right - rect.right ) * scaleX,\n\t\tbottom: ( offsetParentRect?.bottom - rect.bottom ) * scaleY,\n\t\tleft: ( rect.left - offsetParentRect?.left ) * scaleX,\n\t\t// Computed dimensions don't need any adjustments.\n\t\twidth: computedWidth,\n\t\theight: computedHeight,\n\t};\n}\n\nconst POLL_RATE = 100;\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n *\n * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s\n * documentation for more details). When that happens, this hook will attempt\n * to measure again after a frame, and if that fails, it will poll every 100\n * milliseconds until it succeeds.\n */\nexport function useTrackElementOffsetRect(\n\ttargetElement: HTMLElement | undefined | null\n) {\n\tconst [ indicatorPosition, setIndicatorPosition ] =\n\t\tuseState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );\n\tconst intervalRef = useRef< ReturnType< typeof setInterval > >();\n\n\tconst measure = useEvent( () => {\n\t\tif ( targetElement ) {\n\t\t\tconst elementOffsetRect = getElementOffsetRect( targetElement );\n\t\t\tif ( elementOffsetRect ) {\n\t\t\t\tsetIndicatorPosition( elementOffsetRect );\n\t\t\t\tclearInterval( intervalRef.current );\n\t\t\t\treturn true;\n\t\t\t}\n\t\t} else {\n\t\t\tclearInterval( intervalRef.current );\n\t\t}\n\t\treturn false;\n\t} );\n\n\tconst setElement = useResizeObserver( () => {\n\t\tif ( ! measure() ) {\n\t\t\trequestAnimationFrame( () => {\n\t\t\t\tif ( ! measure() ) {\n\t\t\t\t\tintervalRef.current = setInterval( measure, POLL_RATE );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t} );\n\n\tuseLayoutEffect(\n\t\t() => setElement( targetElement ),\n\t\t[ setElement, targetElement ]\n\t);\n\n\treturn indicatorPosition;\n}\n\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"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","ignoreList":[]}

package/build-style/style-rtl.css

@@ -1356,6 +1356,7 @@ body.is-dragging-components-draggable {
   border-radius: 50%;
   transition: 0.2s transform ease, 0.2s background-color ease-out;
   background-color: #1e1e1e;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
   border: 6px solid transparent;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1872,27 +1873,55 @@ body.is-dragging-components-draggable {
   background-color: rgba(0, 0, 0, 0.35);
   z-index: 100000;
   display: flex;
-  animation: edit-post__fade-in-animation 0.08s linear 0s;
+  animation: __wp-base-styles-fade-in 0.08s linear 0s;
   animation-fill-mode: forwards;
 }
+@keyframes __wp-base-styles-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .components-modal__screen-overlay {
     animation-duration: 1ms;
     animation-delay: 0s;
   }
 }
+.components-modal__screen-overlay.is-animating-out {
+  animation: __wp-base-styles-fade-out 0.08s linear 80ms;
+  animation-fill-mode: forwards;
+}
+@keyframes __wp-base-styles-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-modal__screen-overlay.is-animating-out {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
 
 .components-modal__frame {
   box-sizing: border-box;
   margin: 40px 0 0 0;
   width: 100%;
   background: #fff;
-  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), -0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
   border-radius: 8px 8px 0 0;
   overflow: hidden;
   display: flex;
-  animation: components-modal__appear-animation 0.26s cubic-bezier(0.29, 0, 0, 1);
+  animation-name: components-modal__appear-animation;
+  animation-duration: var(--modal-frame-animation-duration);
   animation-fill-mode: forwards;
+  animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
 }
 .components-modal__frame *,
 .components-modal__frame *::before,
@@ -1905,6 +1934,10 @@ body.is-dragging-components-draggable {
     animation-delay: 0s;
   }
 }
+.components-modal__screen-overlay.is-animating-out .components-modal__frame {
+  animation-name: components-modal__disappear-animation;
+  animation-timing-function: cubic-bezier(1, 0, 0.2, 1);
+}
 @media (min-width: 600px) {
   .components-modal__frame {
     border-radius: 8px;
@@ -1965,6 +1998,16 @@ body.is-dragging-components-draggable {
     transform: scale(1);
   }
 }
+@keyframes components-modal__disappear-animation {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
 .components-modal__header {
   box-sizing: border-box;
   border-bottom: 1px solid transparent;
@@ -1988,10 +2031,6 @@ body.is-dragging-components-draggable {
   line-height: 1;
   margin: 0;
 }
-.components-modal__header .components-button {
-  position: relative;
-  right: 8px;
-}
 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
   border-bottom-color: #ddd;
 }
@@ -2506,13 +2545,14 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-popover__content {
   background: #fff;
-  box-shadow: 0 0 0 1px #ccc, 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 0 1px #ccc, 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02);
   border-radius: 4px;
   box-sizing: border-box;
   width: min-content;
 }
 .is-alternate .components-popover__content {
   box-shadow: 0 0 0 1px #1e1e1e;
+  border-radius: 2px;
 }
 .is-unstyled .components-popover__content {
   background: none;
@@ -2772,7 +2812,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   position: absolute;
   top: calc(50% - 8px);
   left: calc(50% - 8px);
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
   outline: 2px solid transparent;
 }
 
@@ -2958,7 +2998,7 @@ body.lockscroll {
   -webkit-backdrop-filter: blur(16px) saturate(180%);
           backdrop-filter: blur(16px) saturate(180%);
   border-radius: 4px;
-  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
   color: #fff;
   padding: 12px 20px;
   width: 100%;
@@ -3486,6 +3526,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   font-size: 12px;
   padding: 4px 8px;
   z-index: 1000002;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
 }
 
 .components-tooltip__shortcut {

package/build-style/style.css

@@ -1361,6 +1361,7 @@ body.is-dragging-components-draggable {
   border-radius: 50%;
   transition: 0.2s transform ease, 0.2s background-color ease-out;
   background-color: #1e1e1e;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
   border: 6px solid transparent;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1877,27 +1878,55 @@ body.is-dragging-components-draggable {
   background-color: rgba(0, 0, 0, 0.35);
   z-index: 100000;
   display: flex;
-  animation: edit-post__fade-in-animation 0.08s linear 0s;
+  animation: __wp-base-styles-fade-in 0.08s linear 0s;
   animation-fill-mode: forwards;
 }
+@keyframes __wp-base-styles-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .components-modal__screen-overlay {
     animation-duration: 1ms;
     animation-delay: 0s;
   }
 }
+.components-modal__screen-overlay.is-animating-out {
+  animation: __wp-base-styles-fade-out 0.08s linear 80ms;
+  animation-fill-mode: forwards;
+}
+@keyframes __wp-base-styles-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-modal__screen-overlay.is-animating-out {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
 
 .components-modal__frame {
   box-sizing: border-box;
   margin: 40px 0 0 0;
   width: 100%;
   background: #fff;
-  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), 0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
   border-radius: 8px 8px 0 0;
   overflow: hidden;
   display: flex;
-  animation: components-modal__appear-animation 0.26s cubic-bezier(0.29, 0, 0, 1);
+  animation-name: components-modal__appear-animation;
+  animation-duration: var(--modal-frame-animation-duration);
   animation-fill-mode: forwards;
+  animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
 }
 .components-modal__frame *,
 .components-modal__frame *::before,
@@ -1910,6 +1939,10 @@ body.is-dragging-components-draggable {
     animation-delay: 0s;
   }
 }
+.components-modal__screen-overlay.is-animating-out .components-modal__frame {
+  animation-name: components-modal__disappear-animation;
+  animation-timing-function: cubic-bezier(1, 0, 0.2, 1);
+}
 @media (min-width: 600px) {
   .components-modal__frame {
     border-radius: 8px;
@@ -1970,6 +2003,16 @@ body.is-dragging-components-draggable {
     transform: scale(1);
   }
 }
+@keyframes components-modal__disappear-animation {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
 .components-modal__header {
   box-sizing: border-box;
   border-bottom: 1px solid transparent;
@@ -1993,10 +2036,6 @@ body.is-dragging-components-draggable {
   line-height: 1;
   margin: 0;
 }
-.components-modal__header .components-button {
-  position: relative;
-  left: 8px;
-}
 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
   border-bottom-color: #ddd;
 }
@@ -2513,13 +2552,14 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-popover__content {
   background: #fff;
-  box-shadow: 0 0 0 1px #ccc, 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 0 1px #ccc, 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02);
   border-radius: 4px;
   box-sizing: border-box;
   width: min-content;
 }
 .is-alternate .components-popover__content {
   box-shadow: 0 0 0 1px #1e1e1e;
+  border-radius: 2px;
 }
 .is-unstyled .components-popover__content {
   background: none;
@@ -2781,7 +2821,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   position: absolute;
   top: calc(50% - 8px);
   right: calc(50% - 8px);
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
   outline: 2px solid transparent;
 }
 
@@ -2970,7 +3010,7 @@ body.lockscroll {
   -webkit-backdrop-filter: blur(16px) saturate(180%);
           backdrop-filter: blur(16px) saturate(180%);
   border-radius: 4px;
-  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
   color: #fff;
   padding: 12px 20px;
   width: 100%;
@@ -3498,6 +3538,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   font-size: 12px;
   padding: 4px 8px;
   z-index: 1000002;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
 }
 
 .components-tooltip__shortcut {

package/build-types/box-control/all-input-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"all-input-control.d.ts","sourceRoot":"","sources":["../../src/box-control/all-input-control.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAa3D,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,qBAAqB,EACrB,QAAe,EACf,OAAc,EACd,MAAM,EACN,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACR,EAAE,2BAA2B,+BAyE7B"}
+{"version":3,"file":"all-input-control.d.ts","sourceRoot":"","sources":["../../src/box-control/all-input-control.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAa3D,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,qBAAqB,EACrB,QAAe,EACf,OAAc,EACd,MAAM,EACN,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACR,EAAE,2BAA2B,+BAyE7B"}

package/build-types/box-control/utils.d.ts

@@ -51,7 +51,7 @@ export declare function isValuesMixed(values?: BoxControlValue, selectedUnits?:
  *
  * @return  Whether values are mixed.
  */
-export declare function isValuesDefined(values?: BoxControlValue): boolean;
+export declare function isValuesDefined(values?: BoxControlValue): boolean | undefined;
 /**
  * Get initial selected side, factoring in whether the sides are linked,
  * and whether the vertical / horizontal directions are grouped via splitOnAxis.

package/build-types/box-control/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/box-control/utils.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACX,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,qBAAqB,EAAE,gBA6BnC,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;CASlB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;CAK1B,CAAC;AAEF,eAAO,MAAM,SAAS,6CAAgD,CAAC;AAmBvE;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAC1B,MAAM,GAAE,eAAoB,EAC5B,aAAa,CAAC,EAAE,eAAe,EAC/B,cAAc,GAAE,eAAe,CAAE,OAAO,CAAc,UAuCtD;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAE,aAAa,CAAC,EAAE,eAAe,sBAQlE;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC5B,MAAM,GAAE,eAAoB,EAC5B,aAAa,CAAC,EAAE,eAAe,EAC/B,KAAK,GAAE,eAAe,CAAE,OAAO,CAAc,WAM7C;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAE,MAAM,CAAC,EAAE,eAAe,WAUxD;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,8BAQtE;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,eAAe,CAAE,OAAO,CAAE,2EAiBhE;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAChC,aAAa,EAAE,eAAe,EAC9B,QAAQ,CAAC,EAAE,MAAM,EACjB,KAAK,CAAC,EAAE,eAAe,CAAE,OAAO,CAAE,GAChC,eAAe,CAoBjB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/box-control/utils.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACX,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,qBAAqB,EAAE,gBA6BnC,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;CASlB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;CAK1B,CAAC;AAEF,eAAO,MAAM,SAAS,6CAAgD,CAAC;AAmBvE;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAC1B,MAAM,GAAE,eAAoB,EAC5B,aAAa,CAAC,EAAE,eAAe,EAC/B,cAAc,GAAE,eAAe,CAAE,OAAO,CAAc,UAuCtD;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAE,aAAa,CAAC,EAAE,eAAe,sBAQlE;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC5B,MAAM,GAAE,eAAoB,EAC5B,aAAa,CAAC,EAAE,eAAe,EAC/B,KAAK,GAAE,eAAe,CAAE,OAAO,CAAc,WAM7C;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAE,MAAM,CAAC,EAAE,eAAe,uBAUxD;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,8BAQtE;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,eAAe,CAAE,OAAO,CAAE,2EAiBhE;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAChC,aAAa,EAAE,eAAe,EAC9B,QAAQ,CAAC,EAAE,MAAM,EACjB,KAAK,CAAC,EAAE,eAAe,CAAE,OAAO,CAAE,GAChC,eAAe,CAoBjB"}

package/build-types/button-group/stories/index.story.d.ts

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 /**
  * Internal dependencies
  */
 import ButtonGroup from '..';
 declare const meta: Meta<typeof ButtonGroup>;
 export default meta;
-export declare const Default: StoryFn<typeof ButtonGroup>;
+export declare const Default: StoryObj<typeof ButtonGroup>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/button-group/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/button-group/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,OAAO,WAAW,MAAM,IAAI,CAAC;AAG7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAUnC,CAAC;AACF,eAAe,IAAI,CAAC;AAgBpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,WAAW,CAAwB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/button-group/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,WAAW,MAAM,IAAI,CAAC;AAG7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAUnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,WAAW,CASjD,CAAC"}

package/build-types/combobox-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/combobox-control/index.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAyB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAgC3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,iBAAS,eAAe,CAAE,KAAK,EAAE,oBAAoB,+BA4RpD;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/combobox-control/index.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAyB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAgC3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,iBAAS,eAAe,CAAE,KAAK,EAAE,oBAAoB,+BA8RpD;AAED,eAAe,eAAe,CAAC"}

package/build-types/combobox-control/stories/index.story.d.ts

@@ -24,6 +24,7 @@ export declare const Default: import("@storybook/types").AnnotatedStoryFn<import
     onFilterValueChange?: (value: string) => void;
     options: import("../types").ComboboxControlOption[];
     value?: string | null;
+    placeholder?: string;
 }>;
 /**
  * The rendered output of each suggestion can be customized by passing a
@@ -45,6 +46,7 @@ export declare const WithCustomRenderItem: import("@storybook/types").AnnotatedS
     onFilterValueChange?: (value: string) => void;
     options: import("../types").ComboboxControlOption[];
     value?: string | null;
+    placeholder?: string;
 }>;
 /**
  * You can disable options in the list
@@ -66,6 +68,7 @@ export declare const WithDisabledOptions: import("@storybook/types").AnnotatedSt
     onFilterValueChange?: (value: string) => void;
     options: import("../types").ComboboxControlOption[];
     value?: string | null;
+    placeholder?: string;
 }>;
 /**
  * By default, the combobox expands when focused.
@@ -87,5 +90,6 @@ export declare const NotExpandOnFocus: import("@storybook/types").AnnotatedStory
     onFilterValueChange?: (value: string) => void;
     options: import("../types").ComboboxControlOption[];
     value?: string | null;
+    placeholder?: string;
 }>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/combobox-control/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/combobox-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AACH,OAAO,eAAe,MAAM,IAAI,CAAC;AACjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAqBrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,eAAe,CAWvC,CAAC;AACF,eAAe,IAAI,CAAC;AA6BpB,eAAO,MAAM,OAAO;;;UAjDE,MAAO,SAC3B;;;;;;;;;;;;EAgDwC,CAAC;AAQ3C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;gBA9DJ,SAC3B;;;;;;;;;;;;EA6DqD,CAAC;AAqCxD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;gBAxGH,SAC3B;;;;;;;;;;;;EAuGoD,CAAC;AAWvD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;gBAxHA,SAC3B;;;;;;;;;;;;EAuHiD,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/combobox-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AACH,OAAO,eAAe,MAAM,IAAI,CAAC;AACjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAqBrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,eAAe,CAWvC,CAAC;AACF,eAAe,IAAI,CAAC;AA6BpB,eAAO,MAAM,OAAO;;;UAjDE,MAAO,SAC3B;;;;;;;;;;;;;EAgDwC,CAAC;AAQ3C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;gBA9DJ,SAC3B;;;;;;;;;;;;;EA6DqD,CAAC;AAqCxD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;gBAxGH,SAC3B;;;;;;;;;;;;;EAuGoD,CAAC;AAWvD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;gBAxHA,SAC3B;;;;;;;;;;;;;EAuHiD,CAAC"}

package/build-types/combobox-control/types.d.ts

@@ -73,5 +73,9 @@ export type ComboboxControlProps = Pick<BaseControlProps, '__nextHasNoMarginBott
      * The current value of the control.
      */
     value?: string | null;
+    /**
+     * If passed, the combobox input will show a placeholder string if no values are present.
+     */
+    placeholder?: string;
 };
 //# sourceMappingURL=types.d.ts.map

package/build-types/combobox-control/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/combobox-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,MAAM,qBAAqB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAE,GAAG,EAAE,MAAM,GAAI,GAAG,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACtC,gBAAgB,EACd,yBAAyB,GACzB,WAAW,GACX,OAAO,GACP,qBAAqB,GACrB,MAAM,CACR,GAAG;IACH;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CAAE,IAAI,EAAE;QAClC,IAAI,EAAE,qBAAqB,CAAC;KAC5B,KAAM,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE;QACV;;;;WAIG;QACH,QAAQ,EAAE,MAAM,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,oBAAoB,CAAE,OAAO,CAAE,KAAM,IAAI,CAAC;IAC9D;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IAChD;;OAEG;IACH,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/combobox-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,MAAM,qBAAqB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAE,GAAG,EAAE,MAAM,GAAI,GAAG,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACtC,gBAAgB,EACd,yBAAyB,GACzB,WAAW,GACX,OAAO,GACP,qBAAqB,GACrB,MAAM,CACR,GAAG;IACH;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CAAE,IAAI,EAAE;QAClC,IAAI,EAAE,qBAAqB,CAAC;KAC5B,KAAM,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE;QACV;;;;WAIG;QACH,QAAQ,EAAE,MAAM,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,oBAAoB,CAAE,OAAO,CAAE,KAAM,IAAI,CAAC;IAC9D;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IAChD;;OAEG;IACH,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC"}

package/build-types/composite/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/composite/context.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,eAAO,MAAM,gBAAgB,gDACuB,CAAC;AAErD,eAAO,MAAM,mBAAmB,6BAAuC,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/composite/context.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,eAAO,MAAM,gBAAgB,gDAA+C,CAAC;AAE7E,eAAO,MAAM,mBAAmB,6BAAuC,CAAC"}

package/build-types/composite/index.d.ts

@@ -18,33 +18,50 @@ import * as Ariakit from '@ariakit/react';
  *
  * @example
  * ```jsx
- * import { Composite, useCompositeStore } from '@wordpress/components';
+ * import { Composite } from '@wordpress/components';
  *
- * const store = useCompositeStore();
- * <Composite store={store}>
+ * <Composite>
  *   <Composite.Item>Item 1</Composite.Item>
  *   <Composite.Item>Item 2</Composite.Item>
  * </Composite>
  * ```
  */
-export declare const Composite: import("react").ForwardRefExoticComponent<import("./types").CompositeStoreProps & {
-    store?: Ariakit.CompositeStore;
+export declare const Composite: import("react").ForwardRefExoticComponent<{
+    activeId?: Ariakit.CompositeStoreProps["activeId"];
+    defaultActiveId?: Ariakit.CompositeStoreProps["defaultActiveId"];
+    setActiveId?: Ariakit.CompositeStoreProps["setActiveId"];
+    focusLoop?: Ariakit.CompositeStoreProps["focusLoop"];
+    focusWrap?: Ariakit.CompositeStoreProps["focusWrap"];
+    focusShift?: Ariakit.CompositeStoreProps["focusShift"];
+    virtualFocus?: Ariakit.CompositeStoreProps["virtualFocus"];
+    orientation?: Ariakit.CompositeStoreProps["orientation"];
+    rtl?: Ariakit.CompositeStoreProps["rtl"];
+} & {
     render?: Ariakit.CompositeProps["render"];
     focusable?: Ariakit.CompositeProps["focusable"];
     disabled?: Ariakit.CompositeProps["disabled"];
     accessibleWhenDisabled?: Ariakit.CompositeProps["accessibleWhenDisabled"];
     onFocusVisible?: Ariakit.CompositeProps["onFocusVisible"];
     children?: Ariakit.CompositeProps["children"];
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "disabled" | "focusable" | "children" | "as" | "render" | "accessibleWhenDisabled" | "onFocusVisible" | "store" | keyof import("./types").CompositeStoreProps> & import("react").RefAttributes<HTMLDivElement>> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "disabled" | "focusable" | "children" | "as" | "render" | "accessibleWhenDisabled" | "onFocusVisible" | keyof {
+    activeId?: Ariakit.CompositeStoreProps["activeId"];
+    defaultActiveId?: Ariakit.CompositeStoreProps["defaultActiveId"];
+    setActiveId?: Ariakit.CompositeStoreProps["setActiveId"];
+    focusLoop?: Ariakit.CompositeStoreProps["focusLoop"];
+    focusWrap?: Ariakit.CompositeStoreProps["focusWrap"];
+    focusShift?: Ariakit.CompositeStoreProps["focusShift"];
+    virtualFocus?: Ariakit.CompositeStoreProps["virtualFocus"];
+    orientation?: Ariakit.CompositeStoreProps["orientation"];
+    rtl?: Ariakit.CompositeStoreProps["rtl"];
+}> & import("react").RefAttributes<HTMLDivElement>> & {
     /**
      * Renders a group element for composite items.
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Group>
      *     <Composite.GroupLabel>Label</Composite.GroupLabel>
      *     <Composite.Item>Item 1</Composite.Item>
@@ -63,10 +80,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Group>
      *     <Composite.GroupLabel>Label</Composite.GroupLabel>
      *     <Composite.Item>Item 1</Composite.Item>
@@ -83,10 +99,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Item>Item 1</Composite.Item>
      *   <Composite.Item>Item 2</Composite.Item>
      *   <Composite.Item>Item 3</Composite.Item>
@@ -103,10 +118,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Row>
      *     <Composite.Item>Item 1.1</Composite.Item>
      *     <Composite.Item>Item 1.2</Composite.Item>
@@ -130,10 +144,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Hover render={ <Composite.Item /> }>
      *     Item 1
      *   </Composite.Hover>
@@ -153,10 +166,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store} render={ <CompositeTypeahead /> }>
+     * <Composite render={ <CompositeTypeahead /> }>
      *   <Composite.Item>Item 1</Composite.Item>
      *   <Composite.Item>Item 2</Composite.Item>
      * </Composite>

package/build-types/composite/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composite/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;GAEG;AACH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAoB1C;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,SAAS;;;;;;;;;IAgEpB;;;;;;;;;;;;;;;;OAgBG;;;;IAIH;;;;;;;;;;;;;;;;;;OAkBG;;;;IAIH;;;;;;;;;;;;;;OAcG;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;;OAuBG;;;;IAEH;;;;;;;;;;;;;;;;;;;OAmBG;;;;IAIH;;;;;;;;;;;;;;;OAeG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;CAKJ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composite/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;GAEG;AACH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAqB1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2DpB;;;;;;;;;;;;;;;OAeG;;;;IAIH;;;;;;;;;;;;;;;;;OAiBG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;OAsBG;;;;IAEH;;;;;;;;;;;;;;;;;;OAkBG;;;;IAIH;;;;;;;;;;;;;;OAcG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;CAKJ,CAAC"}