@wordpress/components 30.9.0 → 31.0.0

package/build-types/validated-form-controls/components/stories/input-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/input-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAOvD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAKzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,qBAAqB,CAgB7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAmC3D,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAkE5D,CAAC"}
+{"version":3,"file":"input-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/input-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAOvD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAKzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,qBAAqB,CAgB7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAuB3D,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAqD5D,CAAC"}

package/build-types/validated-form-controls/components/stories/number-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/number-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAc9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAmC5D,CAAC"}
+{"version":3,"file":"number-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/number-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAc9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CA0B5D,CAAC"}

package/build-types/validated-form-controls/components/stories/overview.story.d.ts

@@ -29,4 +29,11 @@ export declare const WithHelpTextReplacement: Story;
  * They may be unnecessary when responses are generally quick.
  */
 export declare const AsyncValidation: StoryObj<typeof ValidatedInputControl>;
+/**
+ * Custom validity errors are effective immediately, even when they are not yet visible
+ * to the user. For example, in this form where the initial value is already invalid,
+ * the error message will be shown to the user once the submit button is clicked,
+ * even if the input has never been interacted with.
+ */
+export declare const CustomErrorsOnSubmit: StoryObj<typeof ValidatedInputControl>;
 //# sourceMappingURL=overview.story.d.ts.map

package/build-types/validated-form-controls/components/stories/overview.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overview.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/overview.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAE3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,gBAAgB,CAIxC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,gBAAgB,CAAE,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KA0DlC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAmCrC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CA8DnE,CAAC"}
+{"version":3,"file":"overview.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/overview.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAUvD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAE3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,gBAAgB,CAIxC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,gBAAgB,CAAE,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAwClC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KA0CrC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CA4DnE,CAAC;AAgFF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CA2BxE,CAAC"}

package/build-types/validated-form-controls/components/stories/radio-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/radio-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,qBAAqB,CAU7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAqC3D,CAAC"}
+{"version":3,"file":"radio-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/radio-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,qBAAqB,CAU7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CA4B3D,CAAC"}

package/build-types/validated-form-controls/components/stories/range-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/range-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,qBAAqB,CAU7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAmC3D,CAAC"}
+{"version":3,"file":"range-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/range-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,qBAAqB,CAU7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CA0B3D,CAAC"}

package/build-types/validated-form-controls/components/stories/select-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/select-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAU9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAgC5D,CAAC"}
+{"version":3,"file":"select-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/select-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAU9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAuB5D,CAAC"}

package/build-types/validated-form-controls/components/stories/text-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/text-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,oBAAoB,CAU5C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,oBAAoB,CAgC1D,CAAC"}
+{"version":3,"file":"text-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/text-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,oBAAoB,CAU5C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,oBAAoB,CA0B1D,CAAC"}

package/build-types/validated-form-controls/components/stories/textarea-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/textarea-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,wBAAwB,CAQhD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,wBAAwB,CAgC9D,CAAC"}
+{"version":3,"file":"textarea-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/textarea-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,wBAAwB,CAQhD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,wBAAwB,CA4B9D,CAAC"}

package/build-types/validated-form-controls/components/stories/toggle-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/toggle-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAU9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAgC5D,CAAC"}
+{"version":3,"file":"toggle-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/toggle-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAU9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAuB5D,CAAC"}

package/build-types/validated-form-controls/components/stories/toggle-group-control.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/toggle-group-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAGtE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,2BAA2B,CAUnD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,2BAA2B,CAqCjE,CAAC"}
+{"version":3,"file":"toggle-group-control.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/toggle-group-control.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAGtE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,2BAA2B,CAUnD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,2BAA2B,CA4BjE,CAAC"}

package/build-types/validated-form-controls/components/text-control.d.ts

@@ -4,5 +4,5 @@ export declare const ValidatedTextControl: import("react").ForwardRefExoticCompo
     value: string | number;
     type?: "date" | "datetime-local" | "email" | "number" | "password" | "tel" | "text" | "time" | "search" | "url";
     __next40pxDefaultSize?: boolean;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "help" | "label" | "className" | "type" | "children" | "onChange" | "value" | "as" | "__next40pxDefaultSize" | "hideLabelFromVision" | "__nextHasNoMarginBottom"> & import("react").RefAttributes<HTMLInputElement>, "__next40pxDefaultSize" | "__nextHasNoMarginBottom"> & ValidatedControlProps<string | number>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "help" | "label" | "className" | "type" | "children" | "onChange" | "value" | "as" | "__next40pxDefaultSize" | "hideLabelFromVision" | "__nextHasNoMarginBottom"> & import("react").RefAttributes<HTMLInputElement>, "__next40pxDefaultSize" | "__nextHasNoMarginBottom"> & ValidatedControlProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=text-control.d.ts.map

package/build-types/validated-form-controls/components/text-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/text-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAiDrD,eAAO,MAAM,oBAAoB;;;;;+eAEhC,CAAC"}
+{"version":3,"file":"text-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/text-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAoCrD,eAAO,MAAM,oBAAoB;;;;;8dAEhC,CAAC"}

package/build-types/validated-form-controls/components/textarea-control.d.ts

@@ -3,5 +3,5 @@ export declare const ValidatedTextareaControl: import("react").ForwardRefExoticC
     onChange: (value: string) => void;
     value: string;
     rows?: import("react").TextareaHTMLAttributes<HTMLTextAreaElement>["rows"];
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "help" | "label" | "children" | "onChange" | "value" | "rows" | "as" | "hideLabelFromVision" | "__nextHasNoMarginBottom"> & import("react").RefAttributes<HTMLTextAreaElement>, "__nextHasNoMarginBottom"> & ValidatedControlProps<string>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "help" | "label" | "children" | "onChange" | "value" | "rows" | "as" | "hideLabelFromVision" | "__nextHasNoMarginBottom"> & import("react").RefAttributes<HTMLTextAreaElement>, "__nextHasNoMarginBottom"> & ValidatedControlProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
 //# sourceMappingURL=textarea-control.d.ts.map

package/build-types/validated-form-controls/components/textarea-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/textarea-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAgDrD,eAAO,MAAM,wBAAwB;;;;mbAEpC,CAAC"}
+{"version":3,"file":"textarea-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/textarea-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAmCrD,eAAO,MAAM,wBAAwB;;;;2aAEpC,CAAC"}

package/build-types/validated-form-controls/components/toggle-control.d.ts

@@ -3,5 +3,5 @@ export declare const ValidatedToggleControl: import("react").ForwardRefExoticCom
     help?: import("react").ReactNode | ((checked: boolean) => import("react").ReactNode);
     label: import("react").ReactNode;
     onChange: (value: boolean) => void;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "help" | "disabled" | "label" | "className" | "children" | "onChange" | "checked" | "as" | "__nextHasNoMarginBottom"> & import("react").RefAttributes<HTMLInputElement>, "__nextHasNoMarginBottom"> & ValidatedControlProps<boolean | undefined>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "help" | "disabled" | "label" | "className" | "children" | "onChange" | "checked" | "as" | "__nextHasNoMarginBottom"> & import("react").RefAttributes<HTMLInputElement>, "__nextHasNoMarginBottom"> & ValidatedControlProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=toggle-control.d.ts.map

package/build-types/validated-form-controls/components/toggle-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA0DrD,eAAO,MAAM,sBAAsB;;;;6aAElC,CAAC"}
+{"version":3,"file":"toggle-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA6CrD,eAAO,MAAM,sBAAsB;;;;wZAElC,CAAC"}

package/build-types/validated-form-controls/components/toggle-group-control.d.ts

@@ -11,5 +11,5 @@ export declare const ValidatedToggleGroupControl: import("react").ForwardRefExot
     size?: "default" | "__unstable-large";
     __next40pxDefaultSize?: boolean;
     __shouldNotWarnDeprecated36pxSize?: boolean;
-} & import("react").RefAttributes<any> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size" | "help" | "label" | "children" | "onChange" | "value" | "as" | keyof import("react").RefAttributes<any> | "isBlock" | "__next40pxDefaultSize" | "__shouldNotWarnDeprecated36pxSize" | "hideLabelFromVision" | "__nextHasNoMarginBottom" | "isAdaptiveWidth" | "isDeselectable">, "__next40pxDefaultSize" | "__nextHasNoMarginBottom"> & ValidatedControlProps<string | number | undefined>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<any> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size" | "help" | "label" | "children" | "onChange" | "value" | "as" | keyof import("react").RefAttributes<any> | "isBlock" | "__next40pxDefaultSize" | "__shouldNotWarnDeprecated36pxSize" | "hideLabelFromVision" | "__nextHasNoMarginBottom" | "isAdaptiveWidth" | "isDeselectable">, "__next40pxDefaultSize" | "__nextHasNoMarginBottom"> & ValidatedControlProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=toggle-group-control.d.ts.map

package/build-types/validated-form-controls/components/toggle-group-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-group-control.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAsErD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;2lBAEvC,CAAC"}
+{"version":3,"file":"toggle-group-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-group-control.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAyDrD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;8jBAEvC,CAAC"}

package/build-types/validated-form-controls/components/types.d.ts

@@ -1,4 +1,4 @@
-export type ValidatedControlProps<V> = {
+export type ValidatedControlProps = {
     /**
      * Whether the control is required.
      * @default false
@@ -9,14 +9,6 @@ export type ValidatedControlProps<V> = {
      * @default false
      */
     markWhenOptional?: boolean;
-    /**
-     * Optional callback to run when the input should be validated. Use this to set
-     * a `customValidity` as necessary.
-     *
-     * Always prefer using standard HTML attributes like `required` and `min`/`max` over
-     * custom validators when possible, as they are simpler and have localized error messages built in.
-     */
-    onValidate?: (currentValue: V) => void;
     /**
      * Show a custom message based on the validation status.
      *

package/build-types/validated-form-controls/components/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,CAAE,CAAC,IAAK;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CAAE,YAAY,EAAE,CAAC,KAAM,IAAI,CAAC;IACzC;;;;;;;;;;;;OAYG;IACH,cAAc,CAAC,EAAE;QAChB,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;QACzC,OAAO,EAAE,MAAM,CAAC;KAChB,CAAC;CACF,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;;;;;;;OAYG;IACH,cAAc,CAAC,EAAE;QAChB,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;QACzC,OAAO,EAAE,MAAM,CAAC;KAChB,CAAC;CACF,CAAC"}

package/build-types/validated-form-controls/control-with-error.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import type { ValidatedControlProps } from './components/types';
 /**
  * HTML elements that support the Constraint Validation API.
@@ -17,11 +20,7 @@ export declare const ControlWithError: import("react").ForwardRefExoticComponent
      * Label the control as "optional" when _not_ `required`, instead of the inverse.
      */
     markWhenOptional?: boolean;
-    /**
-     * The callback to run when the input should be validated.
-     */
-    onValidate?: () => void;
-    customValidity?: ValidatedControlProps<unknown>["customValidity"];
+    customValidity?: ValidatedControlProps["customValidity"];
     /**
      * A function that returns the actual element on which the validity data should be applied.
      */

package/build-types/validated-form-controls/control-with-error.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAyBhE;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AAyMvB,eAAO,MAAM,gBAAgB;IA9L3B;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,OAAO;IAC1B;;OAEG;iBACU,MAAM,IAAI;qBACN,qBAAqB,CAAE,OAAO,CAAE,CAAE,gBAAgB,CAAE;IACrE;;OAEG;uBACgB,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS;IAC1D;;;;;;;OAOG;;kDAsKoE,CAAC"}
+{"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"AAWA;;GAEG;AACH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AA0BhE;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AA+KvB,eAAO,MAAM,gBAAgB;IArK3B;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,OAAO;qBACT,qBAAqB,CAAE,gBAAgB,CAAE;IAC1D;;OAEG;uBACgB,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS;IAC1D;;;;;;;OAOG;;kDAiJoE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.9.0",
+	"version": "31.0.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -55,24 +55,24 @@
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.36.0",
-		"@wordpress/base-styles": "^6.12.0",
-		"@wordpress/compose": "^7.36.0",
-		"@wordpress/date": "^5.36.0",
-		"@wordpress/deprecated": "^4.36.0",
-		"@wordpress/dom": "^4.36.0",
-		"@wordpress/element": "^6.36.0",
-		"@wordpress/escape-html": "^3.36.0",
-		"@wordpress/hooks": "^4.36.0",
-		"@wordpress/html-entities": "^4.36.0",
-		"@wordpress/i18n": "^6.9.0",
-		"@wordpress/icons": "^11.3.0",
-		"@wordpress/is-shallow-equal": "^5.36.0",
-		"@wordpress/keycodes": "^4.36.0",
-		"@wordpress/primitives": "^4.36.0",
-		"@wordpress/private-apis": "^1.36.0",
-		"@wordpress/rich-text": "^7.36.0",
-		"@wordpress/warning": "^3.36.0",
+		"@wordpress/a11y": "^4.37.0",
+		"@wordpress/base-styles": "^6.13.0",
+		"@wordpress/compose": "^7.37.0",
+		"@wordpress/date": "^5.37.0",
+		"@wordpress/deprecated": "^4.37.0",
+		"@wordpress/dom": "^4.37.0",
+		"@wordpress/element": "^6.37.0",
+		"@wordpress/escape-html": "^3.37.0",
+		"@wordpress/hooks": "^4.37.0",
+		"@wordpress/html-entities": "^4.37.0",
+		"@wordpress/i18n": "^6.10.0",
+		"@wordpress/icons": "^11.4.0",
+		"@wordpress/is-shallow-equal": "^5.37.0",
+		"@wordpress/keycodes": "^4.37.0",
+		"@wordpress/primitives": "^4.37.0",
+		"@wordpress/private-apis": "^1.37.0",
+		"@wordpress/rich-text": "^7.37.0",
+		"@wordpress/warning": "^3.37.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -101,5 +101,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b35cf1a2dce04665e99fd6b9c2891c0b336361b9"
+	"gitHead": "2cf13ec6cf86153c9b3cf369bf5c59046f5cd950"
 }

package/src/alignment-matrix-control/cell.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * Internal dependencies
  */
@@ -9,9 +14,9 @@ import { VisuallyHidden } from '../visually-hidden';
  * Internal dependencies
  */
 import { ALIGNMENT_LABEL } from './utils';
-import { Cell as CellView, Point } from './styles';
 import type { AlignmentMatrixControlCellProps } from './types';
 import type { WordPressComponentProps } from '../context';
+import styles from './style.module.scss';
 
 export default function Cell( {
 	id,
@@ -22,13 +27,19 @@ export default function Cell( {
 		<Tooltip text={ ALIGNMENT_LABEL[ value ] }>
 			<Composite.Item
 				id={ id }
-				render={ <CellView { ...props } role="gridcell" /> }
+				render={
+					<span
+						{ ...props }
+						className={ clsx( styles.cell, props.className ) }
+						role="gridcell"
+					/>
+				}
 			>
 				{ /* VoiceOver needs a text content to be rendered within grid cell,
 			otherwise it'll announce the content as "blank". So we use a visually
 			hidden element instead of aria-label. */ }
 				<VisuallyHidden>{ value }</VisuallyHidden>
-				<Point role="presentation" />
+				<span className={ styles.point } role="presentation" />
 			</Composite.Item>
 		</Tooltip>
 	);

package/src/alignment-matrix-control/index.tsx

@@ -15,11 +15,11 @@ import { useCallback } from '@wordpress/element';
  */
 import Cell from './cell';
 import { Composite } from '../composite';
-import { GridContainer, GridRow } from './styles';
 import AlignmentMatrixControlIcon from './icon';
 import { GRID, getItemId, getItemValue } from './utils';
 import type { WordPressComponentProps } from '../context';
 import type { AlignmentMatrixControlProps } from './types';
+import styles from './style.module.scss';
 
 function UnforwardedAlignmentMatrixControl( {
 	className,
@@ -49,7 +49,11 @@ function UnforwardedAlignmentMatrixControl( {
 		[ baseId, onChange ]
 	);
 
-	const classes = clsx( 'component-alignment-matrix-control', className );
+	const classes = clsx(
+		'component-alignment-matrix-control',
+		styles[ 'grid-container' ],
+		className
+	);
 
 	return (
 		<Composite
@@ -58,18 +62,23 @@ function UnforwardedAlignmentMatrixControl( {
 			setActiveId={ setActiveId }
 			rtl={ isRTL() }
 			render={
-				<GridContainer
+				<div
 					{ ...props }
-					aria-label={ label }
 					className={ classes }
+					aria-label={ label }
 					id={ baseId }
 					role="grid"
-					size={ width }
+					style={ { width: `${ width }px` } }
 				/>
 			}
 		>
 			{ GRID.map( ( cells, index ) => (
-				<Composite.Row render={ <GridRow role="row" /> } key={ index }>
+				<Composite.Row
+					render={
+						<div className={ styles[ 'grid-row' ] } role="row" />
+					}
+					key={ index }
+				>
 					{ cells.map( ( cell ) => (
 						<Cell
 							id={ getItemId( baseId, cell ) }

package/src/alignment-matrix-control/style.module.scss

@@ -0,0 +1,84 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.grid-container {
+	direction: ltr;
+
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(3, 1fr);
+
+	box-sizing: border-box;
+	aspect-ratio: 1;
+
+	border: 1px solid transparent;
+	border-radius: $radius-medium;
+	outline: none;
+
+	cursor: pointer;
+}
+
+.grid-row {
+	grid-column: 1 / -1;
+
+	box-sizing: border-box;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+}
+
+.cell {
+	position: relative;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+
+	appearance: none;
+	border: none;
+	outline: none;
+}
+
+.point {
+	display: block;
+	contain: strict;
+
+	box-sizing: border-box;
+	width: 6px;
+	aspect-ratio: 1;
+
+	margin: auto;
+
+	color: $components-color-gray-400;
+
+	/* Use border instead of background color so that the point shows
+	in Windows High Contrast Mode */
+	border: 3px solid currentColor;
+
+	/* Highlight active item */
+	.cell[data-active-item] & {
+		color: $components-color-foreground;
+		transform: scale(calc(5 / 3));
+	}
+
+	/* Hover styles for non-active items */
+	.cell:not([data-active-item]):hover & {
+		color: $components-color-accent;
+	}
+
+	/* Show an outline only when interacting with keyboard */
+	.cell[data-focus-visible] & {
+		outline: 1px solid $components-color-accent;
+		outline-offset: 1px;
+	}
+
+	@media not (prefers-reduced-motion) {
+		transition-property: color, transform;
+		transition-duration: 120ms;
+		transition-timing-function: linear;
+	}
+}
+

package/src/angle-picker-control/angle-circle.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -7,11 +12,7 @@ import { __experimentalUseDragging as useDragging } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import {
-	CircleRoot,
-	CircleIndicatorWrapper,
-	CircleIndicator,
-} from './styles/angle-picker-control-styles';
+import styles from './style.module.scss';
 
 import type { WordPressComponentProps } from '../context';
 import type { AngleCircleProps } from './types';
@@ -25,6 +26,7 @@ type UseDraggingCallbackEvent =
 function AngleCircle( {
 	value,
 	onChange,
+	className,
 	...props
 }: WordPressComponentProps< AngleCircleProps, 'div' > ) {
 	const angleCircleRef = useRef< HTMLDivElement | null >( null );
@@ -89,22 +91,35 @@ function AngleCircle( {
 	}, [ isDragging ] );
 
 	return (
-		<CircleRoot
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
 			ref={ angleCircleRef }
 			onMouseDown={ startDrag }
-			className="components-angle-picker-control__angle-circle"
+			className={ clsx(
+				'components-angle-picker-control__angle-circle',
+				styles[ 'circle-root' ],
+				className
+			) }
 			{ ...props }
 		>
-			<CircleIndicatorWrapper
+			<div
 				style={
 					value ? { transform: `rotate(${ value }deg)` } : undefined
 				}
-				className="components-angle-picker-control__angle-circle-indicator-wrapper"
+				className={ clsx(
+					'components-angle-picker-control__angle-circle-indicator-wrapper',
+					styles[ 'circle-indicator-wrapper' ]
+				) }
 				tabIndex={ -1 }
 			>
-				<CircleIndicator className="components-angle-picker-control__angle-circle-indicator" />
-			</CircleIndicatorWrapper>
-		</CircleRoot>
+				<div
+					className={ clsx(
+						'components-angle-picker-control__angle-circle-indicator',
+						styles[ 'circle-indicator' ]
+					) }
+				/>
+			</div>
+		</div>
 	);
 }
 

package/src/angle-picker-control/index.tsx

@@ -16,8 +16,9 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { Flex, FlexBlock } from '../flex';
 import { Spacer } from '../spacer';
 import NumberControl from '../number-control';
+import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
+import InputControlSuffixWrapper from '../input-control/input-suffix-wrapper';
 import AngleCircle from './angle-circle';
-import { UnitText } from './styles/angle-picker-control-styles';
 
 import type { WordPressComponentProps } from '../context';
 import type { AnglePickerControlProps } from './types';
@@ -48,10 +49,11 @@ function UnforwardedAnglePickerControl(
 
 	const classes = clsx( 'components-angle-picker-control', className );
 
-	const unitText = <UnitText>°</UnitText>;
-	const [ prefixedUnitText, suffixedUnitText ] = isRTL()
-		? [ unitText, null ]
-		: [ null, unitText ];
+	// Override the default behavior and position the degree symbol to the
+	// right of the number, regardless of the language direction.
+	const prefixOrSuffixProp = isRTL()
+		? { prefix: <InputControlPrefixWrapper>°</InputControlPrefixWrapper> }
+		: { suffix: <InputControlSuffixWrapper>°</InputControlSuffixWrapper> };
 
 	return (
 		<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>
@@ -66,8 +68,7 @@ function UnforwardedAnglePickerControl(
 					step="1"
 					value={ value }
 					spinControls="none"
-					prefix={ prefixedUnitText }
-					suffix={ suffixedUnitText }
+					{ ...prefixOrSuffixProp }
 				/>
 			</FlexBlock>
 			<Spacer marginBottom="1" marginTop="auto">

package/src/angle-picker-control/style.module.scss

@@ -0,0 +1,40 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.circle-root {
+	border-radius: $radius-round;
+	border: $border-width solid $components-color-border;
+	box-sizing: border-box;
+	cursor: grab;
+	height: 32px;
+	overflow: hidden;
+	width: 32px;
+
+	&:active {
+		cursor: grabbing;
+	}
+}
+
+.circle-indicator-wrapper {
+	box-sizing: border-box;
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	&:focus-visible {
+		outline: none;
+	}
+}
+
+.circle-indicator {
+	background: $components-color-accent;
+	border-radius: $radius-round;
+	box-sizing: border-box;
+	display: block;
+	left: 50%;
+	top: 4px;
+	transform: translateX(-50%);
+	position: absolute;
+	width: 6px;
+	height: 6px;
+}

package/src/button/style.scss

@@ -29,7 +29,7 @@
 	height: $button-size;
 	align-items: center;
 	box-sizing: border-box;
-	padding: 6px 12px;
+	padding: 4px 12px; // Allows 32px min-height.
 	border-radius: $radius-small;
 	color: $components-color-foreground;
 

package/src/dropdown-menu/index.tsx

@@ -164,7 +164,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 						{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
 							controlSet.map( ( control, indexOfControl ) => (
 								<Button
-									__next40pxDefaultSize
+									size="compact"
 									key={ [
 										indexOfSet,
 										indexOfControl,

package/src/dropdown-menu/style.scss

@@ -57,7 +57,7 @@
 
 	.components-menu-item__button,
 	.components-menu-item__button.components-button {
-		min-height: $button-size-next-default-40px;
+		min-height: $grid-unit-40;
 		height: auto;
 		text-align: left;
 		padding-left: $grid-unit-10;

package/src/form-token-field/README.md

@@ -62,7 +62,6 @@ The `value` property is handled in a manner similar to controlled form component
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
 -   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
 -   `__next40pxDefaultSize` - Start opting into the larger default height that will become the default size in a future version.
--   `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0. (The prop can be safely removed once this happens.)
 -   `tokenizeOnBlur` - If true, add any incompleteTokenValue as a new token when the field loses focus.
 
 ## Usage
@@ -89,7 +88,6 @@ const MyFormTokenField = () => {
 			value={ selectedContinents }
 			suggestions={ continents }
 			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
-			__nextHasNoMarginBottom
 		/>
 	);
 };