@wordpress/components 30.6.1-next.ff1cebbba.0 → 30.7.0

package/build-types/focal-point-picker/styles/focal-point-picker-style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focal-point-picker-style.d.ts","sourceRoot":"","sources":["../../../src/focal-point-picker/styles/focal-point-picker-style.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAG9D,eAAO,MAAM,YAAY;;SAOH,MAAQ,WAAU;yGAFvC,CAAC;AAEF,eAAO,MAAM,cAAc;;SAAL,MAAQ,WAAU;yGAmCvC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;SArCP,MAAQ,WAAU;yGA6CvC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;UAE7B,CAAC;AAsBF,eAAO,MAAM,cAAc;;;;0CAM1B,CAAC;AAEF,eAAO,MAAM,QAAQ;;SA/EC,MAAQ,WAAU;;kBA4FQ,OAAO;yGAEtD,CAAC;AAEF,eAAO,MAAM,QAAQ;;SAhGC,MAAQ,WAAU;yGAqGvC,CAAC;AAEF,eAAO,MAAM,SAAS;;SAvGA,MAAQ,WAAU;;;UA2GvC,CAAC;AAEF,eAAO,MAAM,SAAS;;SA7GA,MAAQ,WAAU;;;UAiHvC,CAAC"}
+{"version":3,"file":"focal-point-picker-style.d.ts","sourceRoot":"","sources":["../../../src/focal-point-picker/styles/focal-point-picker-style.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAG9D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOrB,CAAC;AAEF,eAAO,MAAM,YAAY;;SALX,MAAO,WAAW;yGAU/B,CAAC;AAEF,eAAO,MAAM,cAAc;;SAZb,MAAO,WAAW;yGA+C/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;SAjDf,MAAO,WAAW;yGAyD/B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;UAE7B,CAAC;AAsBF,eAAO,MAAM,cAAc;;;;0CAM1B,CAAC;AAEF,eAAO,MAAM,QAAQ;;SA3FP,MAAO,WAAW;;kBAwGgB,OAAO;yGAEtD,CAAC;AAEF,eAAO,MAAM,QAAQ;;SA5GP,MAAO,WAAW;yGAiH/B,CAAC;AAEF,eAAO,MAAM,SAAS;;SAnHR,MAAO,WAAW;;;UAuH/B,CAAC;AAEF,eAAO,MAAM,SAAS;;SAzHR,MAAO,WAAW;;;UA6H/B,CAAC"}

package/build-types/font-size-picker/font-size-picker-select.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import type { FontSizePickerSelectProps } from './types';
 declare const FontSizePickerSelect: (props: FontSizePickerSelectProps) => import("react").JSX.Element;
 export default FontSizePickerSelect;

package/build-types/font-size-picker/font-size-picker-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-size-picker-select.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/font-size-picker-select.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACX,yBAAyB,EAEzB,MAAM,SAAS,CAAC;AASjB,QAAA,MAAM,oBAAoB,UAAY,yBAAyB,gCA+C9D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"font-size-picker-select.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/font-size-picker-select.tsx"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EACX,yBAAyB,EAEzB,MAAM,SAAS,CAAC;AAUjB,QAAA,MAAM,oBAAoB,UAAY,yBAAyB,gCA+E9D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/build-types/font-size-picker/font-size-picker-toggle-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-size-picker-toggle-group.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/font-size-picker-toggle-group.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC;AAE9D,QAAA,MAAM,yBAAyB,UAAY,8BAA8B,gCAyBxE,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"font-size-picker-toggle-group.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/font-size-picker-toggle-group.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC;AAE9D,QAAA,MAAM,yBAAyB,UAAY,8BAA8B,gCA+ExE,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/build-types/font-size-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAwPnD,eAAO,MAAM,cAAc,qGAA0C,CAAC;AAEtE,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAiRnD,eAAO,MAAM,cAAc,qGAA0C,CAAC;AAEtE,eAAe,cAAc,CAAC"}

package/build-types/font-size-picker/styles.d.ts

@@ -18,4 +18,7 @@ export declare const HeaderLabel: import("@emotion/styled").StyledComponent<impo
 } & import("react").RefAttributes<any> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
+export declare const StyledCustomSelectControl: import("@emotion/styled").StyledComponent<import("../custom-select-control/types").CustomSelectProps<import("../custom-select-control/types").CustomSelectOption> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/build-types/font-size-picker/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/styles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,SAAS;;SAeR,MAAO,WAAW;2HAV/B,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;UAElB,CAAC;AAEF,eAAO,MAAM,YAAY;;UAExB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;UAKvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/styles.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS;;SAWc,MAAO,WACpC;2HAPN,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;UAElB,CAAC;AAEF,eAAO,MAAM,YAAY;;UAExB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;UAKvB,CAAC;AAGF,eAAO,MAAM,yBAAyB;;UAKrC,CAAC"}

package/build-types/font-size-picker/test/font-size-picker-select.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=font-size-picker-select.d.ts.map

package/build-types/font-size-picker/test/font-size-picker-select.d.ts.map

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

package/build-types/font-size-picker/test/font-size-picker-toggle-group.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=font-size-picker-toggle-group.d.ts.map

package/build-types/font-size-picker/test/font-size-picker-toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-size-picker-toggle-group.d.ts","sourceRoot":"","sources":["../../../src/font-size-picker/test/font-size-picker-toggle-group.tsx"],"names":[],"mappings":""}

package/build-types/font-size-picker/types.d.ts

@@ -37,6 +37,14 @@ export type FontSizePickerProps = {
      * as a number, the component operates in "unitless mode" where the `units` property has no effect.
      */
     value?: number | string;
+    /**
+     * Determines how the `value` prop should be interpreted.
+     * - `'literal'`: The `value` prop contains the actual font size value (number or string)
+     * - `'slug'`: The `value` prop contains the slug of the selected font size
+     *
+     * @default 'literal'
+     */
+    valueMode?: 'literal' | 'slug';
     /**
      * If `true`, a slider will be displayed alongside the input field when a
      * custom font size is active. Has no effect when `disableCustomFontSizes`
@@ -92,11 +100,17 @@ export type FontSize = {
      * size. Used for the class generation process.
      */
     slug: string;
+    /**
+     * The `hint` property is an optional string that provides additional information
+     * about the font size, such as fluid typography ranges or custom descriptions.
+     * Consumers can use this to provide their own preferred hints.
+     */
+    hint?: string;
 };
-export type FontSizePickerSelectProps = Pick<FontSizePickerProps, 'value' | 'size'> & {
+export type FontSizePickerSelectProps = Pick<FontSizePickerProps, 'value' | 'size' | 'valueMode'> & {
     fontSizes: NonNullable<FontSizePickerProps['fontSizes']>;
     disableCustomFontSizes: NonNullable<FontSizePickerProps['disableCustomFontSizes']>;
-    onChange: NonNullable<FontSizePickerProps['onChange']>;
+    onChange: (value: number | string | undefined, selectedItem?: FontSize) => void;
     onSelectCustom: () => void;
     __next40pxDefaultSize: boolean;
 };
@@ -106,8 +120,8 @@ export type FontSizePickerSelectOption = {
     value?: FontSize['size'];
     hint?: string;
 };
-export type FontSizePickerToggleGroupProps = Pick<FontSizePickerProps, 'value' | 'size' | '__next40pxDefaultSize'> & {
+export type FontSizePickerToggleGroupProps = Pick<FontSizePickerProps, 'value' | 'size' | '__next40pxDefaultSize' | 'valueMode'> & {
     fontSizes: NonNullable<FontSizePickerProps['fontSizes']>;
-    onChange: NonNullable<FontSizePickerProps['onChange']>;
+    onChange: (value: number | string | undefined, selectedItem?: FontSize) => void;
 };
 //# sourceMappingURL=types.d.ts.map

package/build-types/font-size-picker/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IACjC;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CACV,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAClC,YAAY,CAAC,EAAE,QAAQ,KACnB,IAAI,CAAC;IACV;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACtB;;;;OAIG;IACH,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC3C,mBAAmB,EACnB,OAAO,GAAG,MAAM,CAChB,GAAG;IACH,SAAS,EAAE,WAAW,CAAE,mBAAmB,CAAE,WAAW,CAAE,CAAE,CAAC;IAC7D,sBAAsB,EAAE,WAAW,CAClC,mBAAmB,CAAE,wBAAwB,CAAE,CAC/C,CAAC;IACF,QAAQ,EAAE,WAAW,CAAE,mBAAmB,CAAE,UAAU,CAAE,CAAE,CAAC;IAC3D,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,qBAAqB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,QAAQ,CAAE,MAAM,CAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAChD,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,uBAAuB,CAC1C,GAAG;IACH,SAAS,EAAE,WAAW,CAAE,mBAAmB,CAAE,WAAW,CAAE,CAAE,CAAC;IAC7D,QAAQ,EAAE,WAAW,CAAE,mBAAmB,CAAE,UAAU,CAAE,CAAE,CAAC;CAC3D,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IACjC;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CACV,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAClC,YAAY,CAAC,EAAE,QAAQ,KACnB,IAAI,CAAC;IACV;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC/B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACtB;;;;OAIG;IACH,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC3C,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,WAAW,CAC9B,GAAG;IACH,SAAS,EAAE,WAAW,CAAE,mBAAmB,CAAE,WAAW,CAAE,CAAE,CAAC;IAC7D,sBAAsB,EAAE,WAAW,CAClC,mBAAmB,CAAE,wBAAwB,CAAE,CAC/C,CAAC;IACF,QAAQ,EAAE,CACT,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAClC,YAAY,CAAC,EAAE,QAAQ,KACnB,IAAI,CAAC;IACV,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,qBAAqB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,QAAQ,CAAE,MAAM,CAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAChD,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,uBAAuB,GAAG,WAAW,CACxD,GAAG;IACH,SAAS,EAAE,WAAW,CAAE,mBAAmB,CAAE,WAAW,CAAE,CAAE,CAAC;IAC7D,QAAQ,EAAE,CACT,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAClC,YAAY,CAAC,EAAE,QAAQ,KACnB,IAAI,CAAC;CACV,CAAC"}

package/build-types/font-size-picker/utils.d.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { FontSizePickerProps } from './types';
+import type { FontSizePickerProps, FontSize } from './types';
 /**
  * Some themes use css vars for their font sizes, so until we
  * have the way of calculating them don't display them.
@@ -10,4 +10,13 @@ import type { FontSizePickerProps } from './types';
  * @return Whether the value is a simple css value.
  */
 export declare function isSimpleCssValue(value: NonNullable<FontSizePickerProps['value']>): boolean;
+/**
+ * Generates hint text for a font size.
+ * This function returns the hint provided by the consumer, if any.
+ * If no hint is provided, it falls back to showing the size value for simple CSS values.
+ *
+ * @param fontSize The font size object to generate hint text for.
+ * @return The hint text provided by the consumer, or the size value for simple CSS values, or undefined.
+ */
+export declare function generateFontSizeHint(fontSize: FontSize): string | undefined;
 //# sourceMappingURL=utils.d.ts.map

package/build-types/font-size-picker/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,WAAW,CAAE,mBAAmB,CAAE,OAAO,CAAE,CAAE,WAKpD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAE7D;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,WAAW,CAAE,mBAAmB,CAAE,OAAO,CAAE,CAAE,WAKpD;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAE,QAAQ,EAAE,QAAQ,GAAI,MAAM,GAAG,SAAS,CAY7E"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.tsx"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EACX,YAAY,EAGZ,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAIjB;;;;GAIG;AACH,eAAO,MAAM,SAAS,YAAY,CAAC;AAuanC,eAAO,MAAM,WAAW,6GAWvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO;IAGlB;;OAEG;;;;IAIH;;;;OAIG;;;;CAKJ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.tsx"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EACX,YAAY,EAGZ,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAIjB;;;;GAIG;AACH,eAAO,MAAM,SAAS,YAAY,CAAC;AA4bnC,eAAO,MAAM,WAAW,6GAWvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO;IAGlB;;OAEG;;;;IAIH;;;;OAIG;;;;CAKJ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build-types/utils/base-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-label.d.ts","sourceRoot":"","sources":["../../src/utils/base-label.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,mBAAmB,2CAK/B,CAAC"}
+{"version":3,"file":"base-label.d.ts","sourceRoot":"","sources":["../../src/utils/base-label.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,mBAAmB,2CAK/B,CAAC"}

package/build-types/utils/config-values.d.ts

@@ -37,6 +37,7 @@ declare const _default: {
     fontSizeXSmall: string;
     fontLineHeightBase: string;
     fontWeight: string;
+    fontWeightMedium: string;
     fontWeightHeading: string;
     gridBase: string;
     cardPaddingXSmall: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.6.1-next.ff1cebbba.0",
+	"version": "30.7.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -54,24 +54,24 @@
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/base-styles": "^6.8.1-next.ff1cebbba.0",
-		"@wordpress/compose": "^7.32.1-next.ff1cebbba.0",
-		"@wordpress/date": "^5.32.1-next.ff1cebbba.0",
-		"@wordpress/deprecated": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/dom": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/element": "^6.32.1-next.ff1cebbba.0",
-		"@wordpress/escape-html": "^3.32.1-next.ff1cebbba.0",
-		"@wordpress/hooks": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/html-entities": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/i18n": "^6.5.1-next.ff1cebbba.0",
-		"@wordpress/icons": "^11.0.1-next.ff1cebbba.0",
-		"@wordpress/is-shallow-equal": "^5.32.1-next.ff1cebbba.0",
-		"@wordpress/keycodes": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/primitives": "^4.32.1-next.ff1cebbba.0",
-		"@wordpress/private-apis": "^1.32.1-next.ff1cebbba.0",
-		"@wordpress/rich-text": "^7.32.1-next.ff1cebbba.0",
-		"@wordpress/warning": "^3.32.1-next.ff1cebbba.0",
+		"@wordpress/a11y": "^4.34.0",
+		"@wordpress/base-styles": "^6.10.0",
+		"@wordpress/compose": "^7.34.0",
+		"@wordpress/date": "^5.34.0",
+		"@wordpress/deprecated": "^4.34.0",
+		"@wordpress/dom": "^4.34.0",
+		"@wordpress/element": "^6.34.0",
+		"@wordpress/escape-html": "^3.34.0",
+		"@wordpress/hooks": "^4.34.0",
+		"@wordpress/html-entities": "^4.34.0",
+		"@wordpress/i18n": "^6.7.0",
+		"@wordpress/icons": "^11.1.0",
+		"@wordpress/is-shallow-equal": "^5.34.0",
+		"@wordpress/keycodes": "^4.34.0",
+		"@wordpress/primitives": "^4.34.0",
+		"@wordpress/private-apis": "^1.34.0",
+		"@wordpress/rich-text": "^7.34.0",
+		"@wordpress/warning": "^3.34.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -97,5 +97,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c5b659710aff01d40d2eb97b211eb2cec9c07d3b"
+	"gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
 }

package/src/badge/styles.scss

@@ -18,6 +18,7 @@ $badge-colors: (
 	min-height: $grid-unit-30;
 	border-radius: $radius-small;
 	line-height: 0;
+	max-width: 100%;
 
 	// Prevents anchor text-decoration styles from being applied through a parent.
 	display: inline-block;

package/src/button/style.scss

@@ -15,13 +15,14 @@
 	text-decoration: none;
 	font-family: inherit;
 	font-size: $default-font-size;
+	font-weight: $font-weight-medium;
 	margin: 0;
 	border: 0;
 	cursor: pointer;
 	-webkit-appearance: none;
 	background: none;
 
-	@media not (prefers-reduced-motion) {
+	@media not ( prefers-reduced-motion ) {
 		transition: box-shadow 0.1s linear;
 	}
 
@@ -251,6 +252,7 @@
 		background: none;
 		outline: none;
 		text-align: left;
+		font-weight: $font-weight-regular;
 		color: $components-color-accent;
 		text-decoration: underline;
 
@@ -385,6 +387,7 @@
 	svg {
 		fill: currentColor;
 		outline: none;
+		flex-shrink: 0;
 
 		// Optimize for high contrast modes.
 		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.

package/src/card/types.ts

@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import type { CSSProperties } from 'react';
-
 /**
  * Internal dependencies
  */
 import type { SurfaceProps } from '../surface/types';
+import type { FlexProps } from '../flex/types';
 
 type DeprecatedSizeOptions = 'extraSmall';
 export type SizeOptions = 'xSmall' | 'small' | 'medium' | 'large';
@@ -90,8 +86,6 @@ type MarginalSubComponentProps = BaseSubComponentProps & {
 	isBorderless?: boolean;
 };
 
-export type HeaderProps = MarginalSubComponentProps;
+export type HeaderProps = MarginalSubComponentProps & Partial< FlexProps >;
 
-export type FooterProps = MarginalSubComponentProps & {
-	justify?: CSSProperties[ 'justifyContent' ];
-};
+export type FooterProps = MarginalSubComponentProps & Partial< FlexProps >;

package/src/color-palette/styles.ts

@@ -7,11 +7,12 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { Heading } from '../heading';
+import { CONFIG } from '../utils';
 
 export const ColorHeading = styled( Heading )`
 	text-transform: uppercase;
 	line-height: 24px;
-	font-weight: 500;
+	font-weight: ${ CONFIG.fontWeightMedium };
 	&&& {
 		font-size: 11px;
 		margin-bottom: 0;

package/src/combobox-control/index.tsx

@@ -365,13 +365,10 @@ function ComboboxControl( props: ComboboxControlProps ) {
 							/>
 						</FlexBlock>
 						{ isLoading && <Spinner /> }
-						{ allowReset && (
+						{ allowReset && Boolean( value ) && ! isExpanded && (
 							<Button
 								size="small"
 								icon={ closeSmall }
-								// Disable reason: Focus returns to input field when reset is clicked.
-								// eslint-disable-next-line no-restricted-syntax
-								disabled={ ! value }
 								onClick={ handleOnReset }
 								onKeyDown={ handleResetStopPropagation }
 								label={ __( 'Reset' ) }

package/src/combobox-control/stories/index.story.tsx

@@ -79,7 +79,6 @@ export const Default = Template.bind( {} );
 Default.args = {
 	__next40pxDefaultSize: true,
 	__nextHasNoMarginBottom: true,
-	allowReset: false,
 	label: 'Select a country',
 	options: countryOptions,
 };

package/src/combobox-control/test/index.tsx

@@ -356,7 +356,7 @@ describe.each( [
 		expect( input ).toHaveValue( targetOption.label );
 	} );
 
-	it( 'should render with Reset button disabled', () => {
+	it( 'should not render Reset button when no value is set', () => {
 		render(
 			<Component
 				options={ timezones }
@@ -365,10 +365,23 @@ describe.each( [
 			/>
 		);
 
-		const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+		const resetButton = screen.queryByRole( 'button', { name: 'Reset' } );
+
+		expect( resetButton ).not.toBeInTheDocument();
+	} );
+
+	it( 'should not render Reset button when allowReset is false', () => {
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				allowReset={ false }
+			/>
+		);
+
+		const resetButton = screen.queryByRole( 'button', { name: 'Reset' } );
 
-		expect( resetButton ).toBeVisible();
-		expect( resetButton ).toBeDisabled();
+		expect( resetButton ).not.toBeInTheDocument();
 	} );
 
 	it( 'should reset input when clicking the Reset button', async () => {
@@ -400,8 +413,8 @@ describe.each( [
 
 		await user.click( resetButton );
 
+		expect( resetButton ).not.toBeInTheDocument();
 		expect( input ).toHaveValue( '' );
-		expect( resetButton ).toBeDisabled();
 		expect( input ).toHaveFocus();
 	} );
 
@@ -439,8 +452,8 @@ describe.each( [
 		// Pressing Enter/Return resets the input.
 		await user.keyboard( '{Enter}' );
 
+		expect( resetButton ).not.toBeInTheDocument();
 		expect( input ).toHaveValue( '' );
-		expect( resetButton ).toBeDisabled();
 		expect( input ).toHaveFocus();
 	} );
 
@@ -478,8 +491,8 @@ describe.each( [
 		// Pressing Spacebar resets the input.
 		await user.keyboard( '[Space]' );
 
+		expect( resetButton ).not.toBeInTheDocument();
 		expect( input ).toHaveValue( '' );
-		expect( resetButton ).toBeDisabled();
 		expect( input ).toHaveFocus();
 	} );
 } );

package/src/custom-select-control-v2/custom-select.tsx

@@ -12,7 +12,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { VisuallyHidden } from '..';
+import { VisuallyHidden } from '../visually-hidden';
 import * as Styled from './styles';
 import type {
 	CustomSelectContext as CustomSelectContextType,

package/src/date-time/date/styles.ts

@@ -79,6 +79,7 @@ export const DayButton = styled( Button, {
 		border-radius: ${ CONFIG.radiusRound };
 		height: ${ space( 7 ) };
 		width: ${ space( 7 ) };
+		font-weight: 400;
 
 		${ ( props ) =>
 			props.isSelected &&

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -74,7 +74,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 
 .emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   box-sizing: border-box;
@@ -356,7 +356,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 
 .emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   box-sizing: border-box;
@@ -648,7 +648,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 
 .emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   box-sizing: border-box;
@@ -952,7 +952,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 
 .emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 499;
   line-height: 1.4;
   text-transform: uppercase;
   box-sizing: border-box;

package/src/dropdown-menu/style.scss

@@ -18,6 +18,7 @@
 		outline: none;
 		cursor: pointer;
 		white-space: nowrap;
+		font-weight: $font-weight-regular;
 
 		&.has-separator {
 			margin-top: 6px;

package/src/focal-point-picker/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { KeyboardEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -10,19 +11,19 @@ import { __ } from '@wordpress/i18n';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import {
 	__experimentalUseDragging as useDragging,
-	useInstanceId,
 	useIsomorphicLayoutEffect,
 } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import BaseControl from '../base-control';
 import Controls from './controls';
 import FocalPoint from './focal-point';
 import Grid from './grid';
 import Media from './media';
 import {
+	Container,
 	MediaWrapper,
 	MediaContainer,
 } from './styles/focal-point-picker-style';
@@ -33,7 +34,11 @@ import type {
 	FocalPoint as FocalPointType,
 	FocalPointPickerProps,
 } from './types';
-import type { KeyboardEventHandler } from 'react';
+import {
+	StyledLabel,
+	StyledHelp,
+} from '../base-control/styles/base-control-styles';
+import { VisuallyHidden } from '../visually-hidden';
 
 const GRID_OVERLAY_TIMEOUT = 600;
 
@@ -88,6 +93,7 @@ export function FocalPointPicker( {
 	autoPlay = true,
 	className,
 	help,
+	hideLabelFromVision,
 	label,
 	onChange,
 	onDrag,
@@ -104,6 +110,14 @@ export function FocalPointPicker( {
 	const [ point, setPoint ] = useState( valueProp );
 	const [ showGridOverlay, setShowGridOverlay ] = useState( false );
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated( 'Bottom margin styles for wp.components.FocalPointPicker', {
+			since: '6.7',
+			version: '7.0',
+			hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+		} );
+	}
+
 	const { startDrag, endDrag, isDragging } = useDragging( {
 		onDragStart: ( event ) => {
 			dragAreaRef.current?.focus();
@@ -233,9 +247,7 @@ export function FocalPointPicker( {
 	};
 
 	const classes = clsx( 'components-focal-point-picker-control', className );
-
-	const instanceId = useInstanceId( FocalPointPicker );
-	const id = `inspector-focal-point-picker-control-${ instanceId }`;
+	const Label = hideLabelFromVision ? VisuallyHidden : StyledLabel;
 
 	useUpdateEffect( () => {
 		setShowGridOverlay( true );
@@ -247,15 +259,8 @@ export function FocalPointPicker( {
 	}, [ x, y ] );
 
 	return (
-		<BaseControl
-			{ ...restProps }
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			__associatedWPComponentName="FocalPointPicker"
-			label={ label }
-			id={ id }
-			help={ help }
-			className={ classes }
-		>
+		<Container { ...restProps } as="fieldset" className={ classes }>
+			{ !! label && <Label as="legend">{ label }</Label> }
 			<MediaWrapper className="components-focal-point-picker-wrapper">
 				<MediaContainer
 					className="components-focal-point-picker"
@@ -291,7 +296,12 @@ export function FocalPointPicker( {
 					onChange?.( getFinalValue( value ) );
 				} }
 			/>
-		</BaseControl>
+			{ !! help && (
+				<StyledHelp __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
+					{ help }
+				</StyledHelp>
+			) }
+		</Container>
 	);
 }
 

package/src/focal-point-picker/styles/focal-point-picker-style.ts

@@ -9,10 +9,20 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import UnitControl from '../../unit-control';
-import { COLORS, CONFIG } from '../../utils';
+import { View } from '../../view';
+import { COLORS, CONFIG, boxSizingReset, font } from '../../utils';
 import type { FocalPointPickerControlsProps } from '../types';
 import { INITIAL_BOUNDS } from '../utils';
 
+export const Container = styled( View )`
+	border: 0;
+	padding: 0;
+	margin: 0;
+	font-family: ${ font( 'default.fontFamily' ) };
+	font-size: ${ font( 'default.fontSize' ) };
+	${ boxSizingReset }
+`;
+
 export const MediaWrapper = styled.div`
 	background-color: transparent;
 	display: flex;

package/src/font-size-picker/README.md

@@ -103,6 +103,16 @@ The current font size value.
 
 -   Required: No
 
+### `valueMode`: `'literal' | 'slug'`
+
+Determines how the `value` prop should be interpreted.
+
+- `'literal'`: The `value` prop contains the actual font size value (number or string).
+- `'slug'`: The `value` prop contains the slug of the selected font size.
+
+-   Required: No
+-   Default: `'literal'`
+
 ### `withReset`: `boolean`
 
 If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`.