Re-generate readmes

packages/components/src/alignment-matrix-control/README.md

@@ -26,43 +26,43 @@ const Example = () => {
 
 ### `defaultValue`
 
-If provided, sets the default alignment value.
-
  - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"`
  - Required: No
  - Default: `'center center'`
 
-### `label`
+If provided, sets the default alignment value.
 
-Accessible label. If provided, sets the `aria-label` attribute of the
-underlying `grid` widget.
+### `label`
 
  - Type: `string`
  - Required: No
  - Default: `'Alignment Matrix Control'`
 
-### `onChange`
+Accessible label. If provided, sets the `aria-label` attribute of the
+underlying `grid` widget.
 
-A function that receives the updated alignment value.
+### `onChange`
 
  - Type: `(newValue: AlignmentMatrixControlValue) => void`
  - Required: No
 
-### `value`
+A function that receives the updated alignment value.
 
-The current alignment value.
+### `value`
 
  - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"`
  - Required: No
 
-### `width`
+The current alignment value.
 
-If provided, sets the width of the control.
+### `width`
 
  - Type: `number`
  - Required: No
  - Default: `92`
 
+If provided, sets the width of the control.
+
 ## Subcomponents
 
 ### AlignmentMatrixControl.Icon
@@ -71,16 +71,16 @@ If provided, sets the width of the control.
 
 ##### `disablePointerEvents`
 
-If `true`, disables pointer events on the icon.
-
  - Type: `boolean`
  - Required: No
  - Default: `true`
 
-##### `value`
+If `true`, disables pointer events on the icon.
 
-The current alignment value.
+##### `value`
 
  - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"`
  - Required: No
  - Default: `center`
+
+The current alignment value.

packages/components/src/angle-picker-control/README.md

@@ -28,30 +28,30 @@ function Example() {
 
 ### `as`
 
-The HTML element or React component to render the component as.
-
  - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | ...`
  - Required: No
 
-### `label`
+The HTML element or React component to render the component as.
 
-Label to use for the angle picker.
+### `label`
 
  - Type: `string`
  - Required: No
  - Default: `__( 'Angle' )`
 
-### `onChange`
+Label to use for the angle picker.
 
-A function that receives the new value of the input.
+### `onChange`
 
  - Type: `(value: number) => void`
  - Required: Yes
 
-### `value`
+A function that receives the new value of the input.
 
-The current value of the input. The value represents an angle in degrees
-and should be a value between 0 and 360.
+### `value`
 
  - Type: `string | number`
  - Required: Yes
+
+The current value of the input. The value represents an angle in degrees
+and should be a value between 0 and 360.

packages/components/src/badge/README.md

@@ -8,15 +8,15 @@
 
 ### `children`
 
-Text to display inside the badge.
-
  - Type: `string`
  - Required: Yes
 
-### `intent`
+Text to display inside the badge.
 
-Badge variant.
+### `intent`
 
  - Type: `"default" | "info" | "success" | "warning" | "error"`
  - Required: No
  - Default: `default`
+
+Badge variant.

packages/components/src/base-control/README.md

@@ -30,67 +30,66 @@ const MyCustomTextareaControl = ({ children, ...baseProps }) => (
 
 ### `__nextHasNoMarginBottom`
 
-Start opting into the new margin-free styles that will become the default in a future version.
-
  - Type: `boolean`
  - Required: No
  - Default: `false`
 
-### `as`
+Start opting into the new margin-free styles that will become the default in a future version.
 
-The HTML element or React component to render the component as.
+### `as`
 
  - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 516 more ... | ("view" & FunctionComponent<...>)`
  - Required: No
 
-### `className`
+The HTML element or React component to render the component as.
 
+### `className`
 
  - Type: `string`
  - Required: No
 
 ### `children`
 
-The content to be displayed within the `BaseControl`.
-
  - Type: `ReactNode`
  - Required: Yes
 
+The content to be displayed within the `BaseControl`.
+
 ### `help`
 
+ - Type: `ReactNode`
+ - Required: No
+
 Additional description for the control.
 
 Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 
- - Type: `ReactNode`
- - Required: No
-
 ### `hideLabelFromVision`
 
-If true, the label will only be visible to screen readers.
-
  - Type: `boolean`
  - Required: No
  - Default: `false`
 
+If true, the label will only be visible to screen readers.
+
 ### `id`
 
+ - Type: `string`
+ - Required: No
+
 The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated.
 This is necessary to accessibly associate the label with that element.
 
 The recommended way is to use the `useBaseControlProps` hook, which takes care of generating a unique `id` for you.
 Otherwise, if you choose to pass an explicit `id` to this prop, you are responsible for ensuring the uniqueness of the `id`.
 
- - Type: `string`
- - Required: No
-
 ### `label`
 
-If this property is added, a label will be generated using label property as the content.
-
  - Type: `ReactNode`
  - Required: No
 
+If this property is added, a label will be generated using label property as the content.
+
 ## Subcomponents
 
 ### BaseControl.VisualLabel
@@ -119,14 +118,14 @@ const MyBaseControl = () => (
 
 ##### `as`
 
-The HTML element or React component to render the component as.
-
  - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ...`
  - Required: No
 
-##### `children`
+The HTML element or React component to render the component as.
 
-The content to be displayed within the `BaseControl.VisualLabel`.
+##### `children`
 
  - Type: `ReactNode`
  - Required: Yes
+
+The content to be displayed within the `BaseControl.VisualLabel`.

packages/components/src/box-control/README.md

@@ -33,73 +33,71 @@ function Example() {
 
 ### `__next40pxDefaultSize`
 
-Start opting into the larger default height that will become the default size in a future version.
-
  - Type: `boolean`
  - Required: No
  - Default: `false`
 
-### `allowReset`
+Start opting into the larger default height that will become the default size in a future version.
 
-If this property is true, a button to reset the box control is rendered.
+### `allowReset`
 
  - Type: `boolean`
  - Required: No
  - Default: `true`
 
-### `id`
+If this property is true, a button to reset the box control is rendered.
 
-The id to use as a base for the unique HTML id attribute of the control.
+### `id`
 
  - Type: `string`
  - Required: No
 
-### `inputProps`
+The id to use as a base for the unique HTML id attribute of the control.
 
-Props for the internal `UnitControl` components.
+### `inputProps`
 
  - Type: `UnitControlPassthroughProps`
  - Required: No
  - Default: `{
     	min: 0,
     }`
 
-### `label`
+Props for the internal `UnitControl` components.
 
-Heading label for the control.
+### `label`
 
  - Type: `string`
  - Required: No
  - Default: `__( 'Box Control' )`
 
-### `onChange`
+Heading label for the control.
 
-A callback function when an input value changes.
+### `onChange`
 
  - Type: `(next: BoxControlValue) => void`
  - Required: No
  - Default: `() => {}`
 
-### `presets`
+A callback function when an input value changes.
 
-Available presets to pick from.
+### `presets`
 
  - Type: `Preset[]`
  - Required: No
 
+Available presets to pick from.
+
 ### `presetKey`
 
+ - Type: `string`
+ - Required: No
+
 The key of the preset to apply.
 If you provide a list of presets, you must provide a preset key to use.
 The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`
 
- - Type: `string`
- - Required: No
-
 ### `resetValues`
 
-The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
-
  - Type: `BoxControlValue`
  - Required: No
  - Default: `{
@@ -109,35 +107,37 @@ The `top`, `right`, `bottom`, and `left` box dimension values to use when the co
     	left: undefined,
     }`
 
+The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
+
 ### `sides`
 
+ - Type: `readonly (keyof BoxControlValue | "horizontal" | "vertical")[]`
+ - Required: No
+
 Collection of sides to allow control of. If omitted or empty, all sides will be available.
 
 Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
 
- - Type: `readonly (keyof BoxControlValue | "horizontal" | "vertical")[]`
- - Required: No
-
 ### `splitOnAxis`
 
-If this property is true, when the box control is unlinked, vertical and horizontal controls
-can be used instead of updating individual sides.
-
  - Type: `boolean`
  - Required: No
  - Default: `false`
 
-### `units`
+If this property is true, when the box control is unlinked, vertical and horizontal controls
+can be used instead of updating individual sides.
 
-Available units to select from.
+### `units`
 
  - Type: `WPUnitControlUnit[]`
  - Required: No
  - Default: `CSS_UNITS`
 
-### `values`
+Available units to select from.
 
-The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
+### `values`
 
  - Type: `BoxControlValue`
  - Required: No
+
+The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.