@wordpress/components 25.3.0 → 25.5.0

package/build-types/item-group/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/item-group/styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,cAAc,2CAyB1B,CAAC;AAEF,eAAO,MAAM,WAAW,2CAGvB,CAAC;AAEF,eAAO,MAAM,IAAI,2CAMhB,CAAC;AAEF,eAAO,MAAM,QAAQ,2CAEpB,CAAC;AAEF,eAAO,MAAM,SAAS,2CAQrB,CAAC;AAIF,eAAO,MAAM,YAAY,2CAExB,CAAC;AAEF,eAAO,MAAM,OAAO,2CAYnB,CAAC;AAeF,eAAO,MAAM,SAAS;;;;CAUrB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/item-group/styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,cAAc,OAAS,GAAG,GAAG,QAAQ,8CAoCjD,CAAC;AAEF,eAAO,MAAM,WAAW,2CAGvB,CAAC;AAEF,eAAO,MAAM,IAAI,2CAMhB,CAAC;AAEF,eAAO,MAAM,QAAQ,2CAEpB,CAAC;AAEF,eAAO,MAAM,SAAS,2CAQrB,CAAC;AAIF,eAAO,MAAM,YAAY,2CAExB,CAAC;AAEF,eAAO,MAAM,OAAO,2CAYnB,CAAC;AAeF,eAAO,MAAM,SAAS;;;;CAUrB,CAAC"}

package/build-types/menu-items-choice/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/menu-items-choice/index.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,iBAAS,eAAe,CAAE,EACzB,OAAY,EACZ,OAAc,EACd,QAAQ,EACR,KAAK,GACL,EAAE,oBAAoB,eA6BtB;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/menu-items-choice/index.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,iBAAS,eAAe,CAAE,EACzB,OAAY,EACZ,OAAc,EACd,QAAQ,EACR,KAAK,GACL,EAAE,oBAAoB,eA8BtB;AAED,eAAe,eAAe,CAAC"}

package/build-types/menu-items-choice/types.d.ts

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import type { ShortcutProps } from '../shortcut/types';
+import type { ButtonAsButtonProps } from '../button/types';
 export type MenuItemsChoiceProps = {
     /**
      * Array of choices.
@@ -36,6 +37,10 @@ export type MenuItemChoice = {
      * Unique value for choice.
      */
     value: string;
+    /**
+     * Whether the menu item is disabled.
+     */
+    disabled?: ButtonAsButtonProps['disabled'];
     /**
      * Additional information which will be rendered below the given label.
      */

package/build-types/menu-items-choice/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/menu-items-choice/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IAClC;;;;OAIG;IACH,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAChC;;;;;OAKG;IACH,OAAO,EAAE,CAAE,KAAK,EAAE,MAAM,GAAG,IAAI,KAAM,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAE,UAAU,CAAE,CAAC;IACvC;;OAEG;IACH,CAAE,YAAY,CAAE,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/menu-items-choice/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,MAAM,MAAM,oBAAoB,GAAG;IAClC;;;;OAIG;IACH,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAChC;;;;;OAKG;IACH,OAAO,EAAE,CAAE,KAAK,EAAE,MAAM,GAAG,IAAI,KAAM,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAE,UAAU,CAAE,CAAC;IAC7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAE,UAAU,CAAE,CAAC;IACvC;;OAEG;IACH,CAAE,YAAY,CAAE,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/modal/index.tsx"],"names":[],"mappings":";AAoCA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAmO1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,KAAK,uGAAiC,CAAC;AAEpD,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/modal/index.tsx"],"names":[],"mappings":";AAoCA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAmP1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,KAAK,uGAAiC,CAAC;AAEpD,eAAe,KAAK,CAAC"}

package/build-types/navigator/navigator-provider/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/navigator/navigator-provider/component.tsx"],"names":[],"mappings":";AA8BA,OAAO,KAAK,EACX,sBAAsB,EAItB,MAAM,UAAU,CAAC;AAiOlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,iBAAiB,yHAG7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/navigator/navigator-provider/component.tsx"],"names":[],"mappings":";AA8BA,OAAO,KAAK,EACX,sBAAsB,EAItB,MAAM,UAAU,CAAC;AAwOlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,iBAAiB,yHAG7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/build-types/navigator/types.d.ts

@@ -11,7 +11,9 @@ export type NavigateOptions = {
     focusTargetSelector?: string;
     isBack?: boolean;
     skipFocus?: boolean;
+    replace?: boolean;
 };
+export type NavigateToParentOptions = Omit<NavigateOptions, 'isBack'>;
 export type NavigatorLocation = NavigateOptions & {
     isInitial?: boolean;
     path?: string;
@@ -22,7 +24,7 @@ export type Navigator = {
     params: MatchParams;
     goTo: (path: string, options?: NavigateOptions) => void;
     goBack: () => void;
-    goToParent: () => void;
+    goToParent: (options?: NavigateToParentOptions) => void;
 };
 export type NavigatorContext = Navigator & {
     addScreen: (screen: Screen) => void;

package/build-types/navigator/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/navigator/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG,MAAM,CAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAE,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAGF,MAAM,MAAM,SAAS,GAAG;IACvB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,CAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,KAAM,IAAI,CAAC;IAC1D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IAC1C,SAAS,EAAE,CAAE,MAAM,EAAE,MAAM,KAAM,IAAI,CAAC;IACtC,YAAY,EAAE,CAAE,MAAM,EAAE,MAAM,KAAM,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACpC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAClC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,CAAC;AAE3D,MAAM,MAAM,4BAA4B,GAAG,wBAAwB,GAAG;IACrE;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,wBAAwB,CAAC;AAEpE,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,GAAG;IAC7D;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACb,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/navigator/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG,MAAM,CAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAE,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAE,eAAe,EAAE,QAAQ,CAAE,CAAC;AAExE,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAGF,MAAM,MAAM,SAAS,GAAG;IACvB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,CAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,KAAM,IAAI,CAAC;IAC1D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,CAAE,OAAO,CAAC,EAAE,uBAAuB,KAAM,IAAI,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IAC1C,SAAS,EAAE,CAAE,MAAM,EAAE,MAAM,KAAM,IAAI,CAAC;IACtC,YAAY,EAAE,CAAE,MAAM,EAAE,MAAM,KAAM,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACpC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAClC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,mBAAmB,CAAC;AAE3D,MAAM,MAAM,4BAA4B,GAAG,wBAAwB,GAAG;IACrE;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,wBAAwB,CAAC;AAEpE,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,GAAG;IAC7D;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACb,CAAC"}

package/build-types/private-apis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAQ,IAAI,2CAAE,MAAM,sBAIzB,CAAC;AAEH,eAAO,MAAM,WAAW,IAAK,CAAC"}
+{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AA0BA,eAAO,MAAQ,IAAI,2CAAE,MAAM,sBAIzB,CAAC;AAEH,eAAO,MAAM,WAAW,IAAK,CAAC"}

package/build-types/progress-bar/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ProgressBarProps } from './types';
+export declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>, "key" | keyof import("react").ProgressHTMLAttributes<HTMLProgressElement>>, "children" | "as" | keyof ProgressBarProps> & import("react").RefAttributes<HTMLProgressElement>>;
+export default ProgressBar;
+//# sourceMappingURL=index.d.ts.map

package/build-types/progress-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/progress-bar/index.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2BhD,eAAO,MAAM,WAAW,2WAAuC,CAAC;AAEhE,eAAe,WAAW,CAAC"}

package/build-types/progress-bar/stories/index.d.ts

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

package/build-types/progress-bar/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,WAAW,CAY5C,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,WAAW,CAEvD,CAAC"}

package/build-types/progress-bar/styles.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const INDETERMINATE_TRACK_WIDTH = 50;
+export declare const Track: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Indicator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isIndeterminate: boolean;
+    value?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ProgressElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/build-types/progress-bar/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/progress-bar/styles.ts"],"names":[],"mappings":";AAqBA,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAE5C,eAAO,MAAM,KAAK;;;yGAWjB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;qBACJ,OAAO;;yGAoBxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;2HAO3B,CAAC"}

package/build-types/progress-bar/test/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build-types/progress-bar/test/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/test/index.tsx"],"names":[],"mappings":""}

package/build-types/progress-bar/types.d.ts

@@ -0,0 +1,11 @@
+export type ProgressBarProps = {
+    /**
+     * Value of the progress bar.
+     */
+    value?: number;
+    /**
+     * A CSS class to apply to the progress bar wrapper (track) element.
+     */
+    className?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/progress-bar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/progress-bar/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC"}

package/build-types/query-controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/query-controls/index.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EACX,kBAAkB,EAGlB,MAAM,SAAS,CAAC;AAkBjB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,aAAa,CAAE,EAC9B,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,KAAK,EACL,OAAO,EACP,QAA4B,EAC5B,QAA4B,EAC5B,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,eAAe,EAGf,GAAG,KAAK,EACR,EAAE,kBAAkB,eAmHpB;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/query-controls/index.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EACX,kBAAkB,EAGlB,MAAM,SAAS,CAAC;AAkBjB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,aAAa,CAAE,EAC9B,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,KAAK,EACL,OAAO,EACP,QAA4B,EAC5B,QAA4B,EAC5B,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,eAAe,EAGf,GAAG,KAAK,EACR,EAAE,kBAAkB,eAoHpB;AAED,eAAe,aAAa,CAAC"}

package/build-types/tab-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tab-panel/index.tsx"],"names":[],"mappings":";AAuBA,OAAO,KAAK,EAAkB,aAAa,EAAE,MAAM,SAAS,CAAC;AAsL7D,eAAO,MAAM,QAAQ,ySAAoC,CAAC;AAC1D,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tab-panel/index.tsx"],"names":[],"mappings":";AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AA2N7C,eAAO,MAAM,QAAQ,ySAAoC,CAAC;AAC1D,eAAe,QAAQ,CAAC"}

package/build-types/tab-panel/stories/index.d.ts

@@ -12,4 +12,5 @@ export default meta;
 export declare const Default: ComponentStory<import("react").ForwardRefExoticComponent<import("../types").TabPanelProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof import("../types").TabPanelProps> & import("react").RefAttributes<any>>>;
 export declare const DisabledTab: ComponentStory<import("react").ForwardRefExoticComponent<import("../types").TabPanelProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof import("../types").TabPanelProps> & import("react").RefAttributes<any>>>;
 export declare const WithTabIconsAndTooltips: ComponentStory<import("react").ForwardRefExoticComponent<import("../types").TabPanelProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof import("../types").TabPanelProps> & import("react").RefAttributes<any>>>;
+export declare const ManualActivation: ComponentStory<import("react").ForwardRefExoticComponent<import("../types").TabPanelProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof import("../types").TabPanelProps> & import("react").RefAttributes<any>>>;
 //# sourceMappingURL=index.d.ts.map

package/build-types/tab-panel/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tab-panel/stories/index.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE;;GAEG;AACH,OAAO,QAAQ,MAAM,IAAI,CAAC;AAI1B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,QAAQ,CAQzC,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,+VAAsB,CAAC;AAe3C,eAAO,MAAM,WAAW,+VAAsB,CAAC;AA8B/C,eAAO,MAAM,uBAAuB,+VAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tab-panel/stories/index.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE;;GAEG;AACH,OAAO,QAAQ,MAAM,IAAI,CAAC;AAI1B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,QAAQ,CAQzC,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,+VAAsB,CAAC;AAe3C,eAAO,MAAM,WAAW,+VAAsB,CAAC;AA8B/C,eAAO,MAAM,uBAAuB,+VAA8B,CAAC;AAsBnE,eAAO,MAAM,gBAAgB,+VAAsB,CAAC"}

package/build-types/tab-panel/types.d.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { MouseEvent, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 /**
  * Internal dependencies
  */
@@ -28,14 +28,6 @@ type Tab = {
      */
     disabled?: boolean;
 } & Record<any, any>;
-export type TabButtonProps = {
-    children: ReactNode;
-    label?: string;
-    onClick: (event: MouseEvent) => void;
-    selected: boolean;
-    showTooltip?: boolean;
-    tabId: string;
-} & Pick<Tab, 'className' | 'icon' | 'disabled'>;
 export type TabPanelProps = {
     /**
      * The class name to add to the active tab.

package/build-types/tab-panel/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tab-panel/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,KAAK,GAAG,GAAG;IACV;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,MAAM,CAAE,GAAG,EAAE,GAAG,CAAE,CAAC;AAEvB,MAAM,MAAM,cAAc,GAAG;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAE,KAAK,EAAE,UAAU,KAAM,IAAI,CAAC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACd,GAAG,IAAI,CAAE,GAAG,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAE,CAAC;AAEnD,MAAM,MAAM,aAAa,GAAG;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,EAAE,CAAE,GAAG,EAAE,GAAG,KAAM,SAAS,CAAC;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,OAAO,EAAE,MAAM,KAAM,IAAI,CAAC;IACvC;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;OAEG;IACH,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tab-panel/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,KAAK,GAAG,GAAG;IACV;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,MAAM,CAAE,GAAG,EAAE,GAAG,CAAE,CAAC;AAEvB,MAAM,MAAM,aAAa,GAAG;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,EAAE,CAAE,GAAG,EAAE,GAAG,KAAM,SAAS,CAAC;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAE,OAAO,EAAE,MAAM,KAAM,IAAI,CAAC;IACvC;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;OAEG;IACH,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC"}

package/build-types/text-control/test/text-control.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text-control.d.ts.map

package/build-types/text-control/test/text-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-control.d.ts","sourceRoot":"","sources":["../../../src/text-control/test/text-control.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "25.3.0",
+	"version": "25.5.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,7 +30,7 @@
 	],
 	"types": "build-types",
 	"dependencies": {
-		"@ariakit/react": "^0.2.10",
+		"@ariakit/react": "^0.2.12",
 		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",
@@ -39,25 +39,25 @@
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "^1.0.0",
 		"@floating-ui/react-dom": "1.0.0",
-		"@radix-ui/react-dropdown-menu": "^2.0.4",
+		"@radix-ui/react-dropdown-menu": "2.0.4",
 		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.37.0",
-		"@wordpress/compose": "^6.14.0",
-		"@wordpress/date": "^4.37.0",
-		"@wordpress/deprecated": "^3.37.0",
-		"@wordpress/dom": "^3.37.0",
-		"@wordpress/element": "^5.14.0",
-		"@wordpress/escape-html": "^2.37.0",
-		"@wordpress/hooks": "^3.37.0",
-		"@wordpress/html-entities": "^3.37.0",
-		"@wordpress/i18n": "^4.37.0",
-		"@wordpress/icons": "^9.28.0",
-		"@wordpress/is-shallow-equal": "^4.37.0",
-		"@wordpress/keycodes": "^3.37.0",
-		"@wordpress/primitives": "^3.35.0",
-		"@wordpress/private-apis": "^0.19.0",
-		"@wordpress/rich-text": "^6.14.0",
-		"@wordpress/warning": "^2.37.0",
+		"@wordpress/a11y": "^3.39.0",
+		"@wordpress/compose": "^6.16.0",
+		"@wordpress/date": "^4.39.0",
+		"@wordpress/deprecated": "^3.39.0",
+		"@wordpress/dom": "^3.39.0",
+		"@wordpress/element": "^5.16.0",
+		"@wordpress/escape-html": "^2.39.0",
+		"@wordpress/hooks": "^3.39.0",
+		"@wordpress/html-entities": "^3.39.0",
+		"@wordpress/i18n": "^4.39.0",
+		"@wordpress/icons": "^9.30.0",
+		"@wordpress/is-shallow-equal": "^4.39.0",
+		"@wordpress/keycodes": "^3.39.0",
+		"@wordpress/primitives": "^3.37.0",
+		"@wordpress/private-apis": "^0.21.0",
+		"@wordpress/rich-text": "^6.16.0",
+		"@wordpress/warning": "^2.39.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -66,7 +66,7 @@
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
 		"fast-deep-equal": "^3.1.3",
-		"framer-motion": "~10.11.6",
+		"framer-motion": "^10.13.0",
 		"gradient-parser": "^0.1.5",
 		"highlight-words-core": "^1.2.2",
 		"is-plain-object": "^5.0.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "bcd13d59b22553b3c9dc5869077bff1e864cf9f5"
+	"gitHead": "b898cf1dc8e70841d1647ea0994ac6278acc18a7"
 }

package/src/border-control/border-control-dropdown/component.tsx

@@ -30,12 +30,8 @@ import type { DropdownProps as DropdownComponentProps } from '../../dropdown/typ
 import type { ColorProps, DropdownProps } from '../types';
 
 const getAriaLabelColorValue = ( colorValue: string ) => {
-	const isHex = colorValue.startsWith( '#' );
-
 	// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
-	const displayValue = colorValue.replace( /^var\((.+)\)$/, '$1' );
-
-	return isHex ? displayValue.split( '' ).join( '-' ) : displayValue;
+	return colorValue.replace( /^var\((.+)\)$/, '$1' );
 };
 
 const getColorObject = (
@@ -79,14 +75,14 @@ const getToggleAriaLabel = (
 			const ariaLabelValue = getAriaLabelColorValue( colorObject.color );
 			return style
 				? sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %3$s: The current border style selection e.g. "solid".
+						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
 						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".',
 						colorObject.name,
 						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
 						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
 						colorObject.name,
 						ariaLabelValue
@@ -97,13 +93,13 @@ const getToggleAriaLabel = (
 			const ariaLabelValue = getAriaLabelColorValue( colorValue );
 			return style
 				? sprintf(
-						// translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0". %2$s: The current border style selection e.g. "solid".
+						// translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
 						'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".',
 						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+						// translators: %1$s: The color's hex code e.g: "#f00".
 						'Border color and style picker. The currently selected color has a value of "%1$s".',
 						ariaLabelValue
 				  );
@@ -114,7 +110,7 @@ const getToggleAriaLabel = (
 
 	if ( colorObject ) {
 		return sprintf(
-			// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+			// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".
 			'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
 			colorObject.name,
 			getAriaLabelColorValue( colorObject.color )
@@ -123,7 +119,7 @@ const getToggleAriaLabel = (
 
 	if ( colorValue ) {
 		return sprintf(
-			// translators: %1$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+			// translators: %1$s: The color's hex code e.g: "#f00".
 			'Border color picker. The currently selected color has a value of "%1$s".',
 			getAriaLabelColorValue( colorValue )
 		);

package/src/border-control/test/index.js

@@ -215,7 +215,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#-7-2-a-e-e-6".'
+						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#72aee6".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -226,7 +226,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color has a value of "#-4-b-1-d-8-0".'
+						'Border color and style picker. The currently selected color has a value of "#4b1d80".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -239,7 +239,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#-7-2-a-e-e-6". The currently selected style is "dotted".'
+						'Border color and style picker. The currently selected color is called "Blue" and has a value of "#72aee6". The currently selected style is "dotted".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -252,7 +252,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color and style picker. The currently selected color has a value of "#-4-b-1-d-8-0". The currently selected style is "dashed".'
+						'Border color and style picker. The currently selected color has a value of "#4b1d80". The currently selected style is "dashed".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -280,7 +280,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color picker. The currently selected color is called "Blue" and has a value of "#-7-2-a-e-e-6".'
+						'Border color picker. The currently selected color is called "Blue" and has a value of "#72aee6".'
 					)
 				).toBeInTheDocument();
 			} );
@@ -294,7 +294,7 @@ describe( 'BorderControl', () => {
 
 				expect(
 					screen.getByLabelText(
-						'Border color picker. The currently selected color has a value of "#-4-b-1-d-8-0".'
+						'Border color picker. The currently selected color has a value of "#4b1d80".'
 					)
 				).toBeInTheDocument();
 			} );

package/src/button/index.native.js

@@ -24,6 +24,7 @@ import {
  */
 import Tooltip from '../tooltip';
 import Icon from '../icon';
+import style from './style.scss';
 
 const isAndroid = Platform.OS === 'android';
 const marginBottom = isAndroid ? -0.5 : 0;
@@ -51,8 +52,6 @@ const styles = StyleSheet.create( {
 		justifyContent: 'center',
 		alignItems: 'center',
 		borderRadius: 6,
-		borderColor: '#2e4453',
-		backgroundColor: '#2e4453',
 	},
 	subscriptInactive: {
 		color: '#7b9ab1', // $toolbar-button.
@@ -95,6 +94,7 @@ export function Button( props ) {
 		tooltipPosition,
 		isActiveStyle,
 		customContainerStyles,
+		hitSlop,
 	} = props;
 	const preferredColorScheme = usePreferredColorScheme();
 
@@ -105,10 +105,16 @@ export function Button( props ) {
 		customContainerStyles && { ...customContainerStyles },
 	];
 
+	const buttonActiveColorStyles = usePreferredColorSchemeStyle(
+		style[ 'components-button-light--active' ],
+		style[ 'components-button-dark--active' ]
+	);
+
 	const buttonViewStyle = {
 		opacity: isDisabled ? 0.3 : 1,
 		...( fixedRatio && styles.fixedRatio ),
 		...( isPressed ? styles.buttonActive : styles.buttonInactive ),
+		...( isPressed ? buttonActiveColorStyles : {} ),
 		...( isPressed &&
 			isActiveStyle?.borderRadius && {
 				borderRadius: isActiveStyle.borderRadius,
@@ -158,7 +164,6 @@ export function Button( props ) {
 
 	const newIcon = icon
 		? cloneElement( <Icon icon={ icon } size={ iconSize } />, {
-				colorScheme: preferredColorScheme,
 				isPressed,
 		  } )
 		: null;
@@ -184,6 +189,7 @@ export function Button( props ) {
 			style={ containerStyle }
 			disabled={ isDisabled }
 			testID={ testID }
+			hitSlop={ hitSlop }
 		>
 			<LongPressGestureHandler
 				minDurationMs={ 500 }

package/src/button/style.native.scss

@@ -0,0 +1,9 @@
+.components-button-light--active {
+	border-color: $light-dim;
+	background-color: $light-dim;
+}
+
+.components-button-dark--active {
+	border-color: $dark-quaternary;
+	background-color: $dark-quaternary;
+}

package/src/color-palette/index.tsx

@@ -224,12 +224,12 @@ function UnforwardedColorPalette(
 	const displayValue = value?.replace( /^var\((.+)\)$/, '$1' );
 	const customColorAccessibleLabel = !! displayValue
 		? sprintf(
-				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code, with added hyphens e.g: "#-f-0-0".
+				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
 				__(
 					'Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
 				),
 				buttonLabelName,
-				isHex ? displayValue.split( '' ).join( '-' ) : displayValue
+				displayValue
 		  )
 		: __( 'Custom color picker.' );
 

package/src/color-palette/test/__snapshots__/index.tsx.snap

@@ -193,7 +193,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         <button
           aria-expanded="false"
           aria-haspopup="true"
-          aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#-f-0-0"."
+          aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#f00"."
           class="components-color-palette__custom-color-button"
           style="background: rgb(255, 0, 0);"
         />

package/src/color-palette/test/index.tsx

@@ -240,11 +240,7 @@ describe( 'ColorPalette', () => {
 		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].color ) ).toBeVisible();
 		expect(
 			screen.getByRole( 'button', {
-				name: `Custom color picker. The currently selected color is called "${
-					EXAMPLE_COLORS[ 0 ].name
-				}" and has a value of "${ EXAMPLE_COLORS[ 0 ].color
-					.split( '' )
-					.join( '-' ) }".`,
+				name: `Custom color picker. The currently selected color is called "${ EXAMPLE_COLORS[ 0 ].name }" and has a value of "${ EXAMPLE_COLORS[ 0 ].color }".`,
 				expanded: false,
 			} )
 		).toBeInTheDocument();

package/src/draggable/test/index.native.js

@@ -110,6 +110,10 @@ describe( 'Draggable', () => {
 			},
 			{ state: State.END },
 		] );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			'[Reanimated] You can not use setGestureState in non-worklet function.'
+		);
 
 		expect( onDragStart ).toHaveBeenCalledTimes( 1 );
 		expect( onDragStart ).toHaveBeenCalledWith( {

package/src/focal-point-picker/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Animated, PanResponder, View } from 'react-native';
+import { Animated, PanResponder, StyleSheet, View } from 'react-native';
 import Video from 'react-native-video';
 
 /**
@@ -164,7 +164,7 @@ function FocalPointPicker( props ) {
 		},
 	];
 	const FOCAL_POINT_SIZE = 50;
-	const focalPointStyles = [
+	const focalPointStyles = StyleSheet.flatten( [
 		styles.focalPoint,
 		{
 			height: FOCAL_POINT_SIZE,
@@ -172,7 +172,7 @@ function FocalPointPicker( props ) {
 			marginTop: -( FOCAL_POINT_SIZE / 2 ),
 			width: FOCAL_POINT_SIZE,
 		},
-	];
+	] );
 
 	const onTooltipPress = () => setTooltipVisible( false );
 	const onMediaLayout = ( event ) => {
@@ -243,9 +243,10 @@ function FocalPointPicker( props ) {
 									yOffset={ -( FOCAL_POINT_SIZE / 2 ) }
 								/>
 								<FocalPoint
-									height={ styles.focalPoint?.height }
+									height={ focalPointStyles.height }
 									style={ focalPointStyles }
-									width={ styles.focalPoint?.width }
+									testID="focal-point-picker-handle"
+									width={ focalPointStyles.width }
 								/>
 							</Animated.View>
 						) }

package/src/form-token-field/styles.ts

@@ -9,6 +9,7 @@ import { css } from '@emotion/react';
  */
 import { Flex } from '../flex';
 import { space } from '../ui/utils/space';
+import { boxSizingReset } from '../utils';
 
 type TokensAndInputWrapperProps = {
 	__next40pxDefaultSize: boolean;
@@ -27,6 +28,7 @@ const deprecatedPaddings = ( {
 
 export const TokensAndInputWrapperFlex = styled( Flex )`
 	padding: 7px;
+	${ boxSizingReset }
 
 	${ deprecatedPaddings }
 `;

package/src/item-group/item/hook.ts

@@ -42,7 +42,8 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 	const classes = useMemo(
 		() =>
 			cx(
-				as === 'button' && styles.unstyledButton,
+				( as === 'button' || as === 'a' ) &&
+					styles.unstyledButton( as ),
 				styles.itemSizes[ size ] || styles.itemSizes.medium,
 				styles.item,
 				spacedAround && styles.spacedAround,