@wordpress/components 30.1.0 → 30.2.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,CAe7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAkB3D,CAAC;AAaF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAgC5D,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,CAmC3D,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAkE5D,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,CAa9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAkB5D,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,CAmC5D,CAAC"}

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

@@ -2,6 +2,10 @@
  * External dependencies
  */
 import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { ValidatedInputControl } from '..';
 import type { ControlWithError } from '../../control-with-error';
 declare const meta: Meta<typeof ControlWithError>;
 export default meta;
@@ -16,4 +20,13 @@ export declare const WithMultipleControls: Story;
  * will depend on context.
  */
 export declare const WithHelpTextReplacement: Story;
+/**
+ * To provide feedback from server-side validation, the `customValidity` prop can be used
+ * to show additional status indicators while waiting for the server response,
+ * and after the response is received.
+ *
+ * These indicators are intended for asynchronous validation calls that may take more than 1 second to complete.
+ * They may be unnecessary when responses are generally quick.
+ */
+export declare const AsyncValidation: 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":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOvD,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,KAoClC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,KA2BrC,CAAC"}
+{"version":3,"file":"overview.story.d.ts","sourceRoot":"","sources":["../../../../src/validated-form-controls/components/stories/overview.story.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;GAEG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAE3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,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"}

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,CAS7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAoB3D,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,CAqC3D,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,CAS7C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,qBAAqB,CAkB3D,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,CAmC3D,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,CAS9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAe5D,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,CAgC5D,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,CAS5C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,oBAAoB,CAe1D,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,CAgC1D,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,CAOhD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,wBAAwB,CAe9D,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,CAgC9D,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,CAS9C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,sBAAsB,CAe5D,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,CAgC5D,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,CASnD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,2BAA2B,CAoBjE,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,CAqCjE,CAAC"}

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;AA+CrD,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;AAiDrD,eAAO,MAAM,oBAAoB;;;;;+eAEhC,CAAC"}

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;AA8CrD,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;AAgDrD,eAAO,MAAM,wBAAwB;;;;mbAEpC,CAAC"}

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;AAwDrD,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;AA0DrD,eAAO,MAAM,sBAAsB;;;;6aAElC,CAAC"}

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;AAwErD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;2lBAEvC,CAAC"}

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

@@ -10,18 +10,29 @@ export type ValidatedControlProps<V> = {
      */
     markWhenOptional?: boolean;
     /**
-     * A function that returns a custom validity message when applicable. This error message will be applied to the
-     * underlying element using the native [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).
-     * This means the custom validator will be run _in addition_ to any other HTML attribute-based validation, and
-     * will be prioritized over any existing validity messages dictated by the HTML attributes.
-     * An empty string or `undefined` return value will clear any existing custom validity message.
+     * Optional callback to run when the input should be validated. Use this to set
+     * a `customValidity` as necessary.
      *
-     * Make sure you don't programatically pass a value (such as an initial value) to the control component
-     * that fails this validator, because the validator will only run for user-initiated changes.
+     * 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.
      *
-     * 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.
+     * - When `type` is `invalid`, the message will be applied to the underlying element using the
+     * native [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).
+     * This means the custom message will be prioritized over any existing validity messages
+     * triggered by HTML attribute-based validation.
+     * - When `type` is `validating` or `valid`, the custom validity message of the underlying element
+     * will be cleared. If there are no remaining validity messages triggered by HTML attribute-based validation,
+     * the message will be presented as a status indicator rather than an error. These indicators are intended
+     * for asynchronous validation calls that may take more than 1 second to complete.
+     * Otherwise, custom errors can simply be cleared by setting the `customValidity` prop to `undefined`.
      */
-    customValidator?: (currentValue: V) => string | void;
+    customValidity?: {
+        type: 'validating' | 'valid' | 'invalid';
+        message: string;
+    };
 };
 //# sourceMappingURL=types.d.ts.map

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;;;;;;;;;;;;OAYG;IAGH,eAAe,CAAC,EAAE,CAAE,YAAY,EAAE,CAAC,KAAM,MAAM,GAAG,IAAI,CAAC;CACvD,CAAC"}
+{"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"}

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

@@ -1,3 +1,4 @@
+import type { ValidatedControlProps } from './components/types';
 /**
  * HTML elements that support the Constraint Validation API.
  *
@@ -17,12 +18,10 @@ export declare const ControlWithError: import("react").ForwardRefExoticComponent
      */
     markWhenOptional?: boolean;
     /**
-     * A function that returns a custom validity message when applicable.
-     *
-     * This message will be applied to the element returned by `getValidityTarget`.
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity
+     * The callback to run when the input should be validated.
      */
-    customValidator?: () => string | void;
+    onValidate?: () => void;
+    customValidity?: ValidatedControlProps<unknown>["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":"AA6CA;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AA4IvB,eAAO,MAAM,gBAAgB;IAlI3B;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,OAAO;IAC1B;;;;;OAKG;sBACe,MAAM,MAAM,GAAG,IAAI;IACrC;;OAEG;uBACgB,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS;IAC1D;;OAEG;;kDA6GoE,CAAC"}
+{"version":3,"file":"control-with-error.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/control-with-error.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAyBhE;;;;;;;GAOG;AACH,KAAK,cAAc,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,iBAAiB,GACjB,mBAAmB,CAAC;AAgMvB,eAAO,MAAM,gBAAgB;IArL3B;;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;;OAEG;;kDAkKoE,CAAC"}

package/build-types/validated-form-controls/validity-indicator.d.ts

@@ -0,0 +1,5 @@
+export declare function ValidityIndicator({ type, message, }: {
+    type: 'validating' | 'valid' | 'invalid';
+    message?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=validity-indicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"validity-indicator.d.ts","sourceRoot":"","sources":["../../src/validated-form-controls/validity-indicator.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,CAAE,EAClC,IAAI,EACJ,OAAO,GACP,EAAE;IACF,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,+BAyBA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/view/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAW5B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,IAAI,CAAwB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/view/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAY5B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,IAAI,CAAwB,CAAC"}

package/build-types/z-stack/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/z-stack/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAa9B,CAAC;AACF,eAAe,IAAI,CAAC;AAsCpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,MAAM,CAAwB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/z-stack/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAc9B,CAAC;AACF,eAAe,IAAI,CAAC;AAsCpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,MAAM,CAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.1.0",
+	"version": "30.2.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,26 +41,26 @@
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "^1.0.0",
 		"@floating-ui/react-dom": "2.0.8",
-		"@types/gradient-parser": "0.1.3",
+		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.28.0",
-		"@wordpress/compose": "^7.28.0",
-		"@wordpress/date": "^5.28.0",
-		"@wordpress/deprecated": "^4.28.0",
-		"@wordpress/dom": "^4.28.0",
-		"@wordpress/element": "^6.28.0",
-		"@wordpress/escape-html": "^3.28.0",
-		"@wordpress/hooks": "^4.28.0",
-		"@wordpress/html-entities": "^4.28.0",
-		"@wordpress/i18n": "^6.1.0",
-		"@wordpress/icons": "^10.28.0",
-		"@wordpress/is-shallow-equal": "^5.28.0",
-		"@wordpress/keycodes": "^4.28.0",
-		"@wordpress/primitives": "^4.28.0",
-		"@wordpress/private-apis": "^1.28.0",
-		"@wordpress/rich-text": "^7.28.0",
-		"@wordpress/warning": "^3.28.0",
+		"@wordpress/a11y": "^4.29.0",
+		"@wordpress/compose": "^7.29.0",
+		"@wordpress/date": "^5.29.0",
+		"@wordpress/deprecated": "^4.29.0",
+		"@wordpress/dom": "^4.29.0",
+		"@wordpress/element": "^6.29.0",
+		"@wordpress/escape-html": "^3.29.0",
+		"@wordpress/hooks": "^4.29.0",
+		"@wordpress/html-entities": "^4.29.0",
+		"@wordpress/i18n": "^6.2.0",
+		"@wordpress/icons": "^10.29.0",
+		"@wordpress/is-shallow-equal": "^5.29.0",
+		"@wordpress/keycodes": "^4.29.0",
+		"@wordpress/primitives": "^4.29.0",
+		"@wordpress/private-apis": "^1.29.0",
+		"@wordpress/rich-text": "^7.29.0",
+		"@wordpress/warning": "^3.29.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -68,7 +68,7 @@
 		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
 		"framer-motion": "^11.1.9",
-		"gradient-parser": "1.0.2",
+		"gradient-parser": "1.1.1",
 		"highlight-words-core": "^1.2.2",
 		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "28cc2098f5ee28f89096b638533796538f495f72"
+	"gitHead": "445ede01e8abc8e49a1101b21a3651adbe852120"
 }

package/src/button/style.scss

@@ -80,9 +80,9 @@
 		&[aria-disabled="true"]:enabled, // This catches a situation where a Button is aria-disabled, but not disabled.
 		&[aria-disabled="true"]:active:enabled {
 			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
-			color: rgba($white, 0.4);
-			background: $components-color-accent;
-			border-color: $components-color-accent;
+			color: $components-color-foreground-inverted;
+			background: $components-color-gray-300;
+			border-color: $components-color-gray-300;
 			outline: none;
 
 			&:focus:enabled {

package/src/calendar/style.scss

@@ -1,9 +1,9 @@
 /* Root of the component. */
 // Internal variables
 $wp-components-calendar-outline-focus: var(--wp-admin-border-width-focus) solid $components-color-accent;
-$wp-components-calendar-button-height: 2rem;
-$wp-components-calendar-button-width: 2rem;
-$wp-components-calendar-nav-height: 2rem;
+$wp-components-calendar-button-height: $grid-unit-40;
+$wp-components-calendar-button-width: $grid-unit-40;
+$wp-components-calendar-nav-height: $grid-unit-40;
 $wp-components-calendar-range-middle-background-color: color-mix(in srgb, $components-color-accent 4%, transparent);
 $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-color-accent 16%, transparent);
 
@@ -13,10 +13,10 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	position: relative; /* Required to position the navigation toolbar. */
 	box-sizing: border-box;
 	display: inline flow-root;
-	color: $gray-900;
-	background-color: $white;
-	font-size: 13px;
-	font-weight: 400;
+	color: $components-color-foreground;
+	background-color: $components-color-background;
+	font-size: $font-size-medium;
+	font-weight: $font-weight-regular;
 	z-index: 0; // Create a stacking context and render on top of the background.
 
 	*,
@@ -35,7 +35,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	// date follows the same color as the button's text, since the button
 	// inherits its text color.
 	&:has(.components-calendar__day-button:disabled) {
-		color: $gray-600;
+		color: $components-color-disabled;
 	}
 	&:has(.components-calendar__day-button:hover:not(:disabled)),
 	&:has(.components-calendar__day-button:focus-visible) {
@@ -57,7 +57,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	height: $wp-components-calendar-button-height;
 
 	border: none;
-	border-radius: 2px;
+	border-radius: $radius-small;
 
 	font: inherit;
 	font-variant-numeric: tabular-nums;
@@ -73,7 +73,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 		z-index: -1;
 		inset: 0;
 		border: none; // No default border to avoid polluting high-contrast mode.
-		border-radius: 2px;
+		border-radius: $radius-small;
 	}
 
 	// Use the button's ::after to show the selection preview.
@@ -117,7 +117,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 .components-calendar__button-next,
 .components-calendar__button-previous {
 	border: none;
-	border-radius: 2px;
+	border-radius: $radius-small;
 	background: none;
 	padding: 0;
 	margin: 0;
@@ -139,7 +139,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	&[aria-disabled="true"] {
 		cursor: revert;
 
-		color: $gray-600;
+		color: $components-color-disabled;
 	}
 
 	&:focus-visible {
@@ -150,8 +150,8 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 .components-calendar__chevron {
 	display: inline-block;
 	fill: currentColor;
-	width: 16px;
-	height: 16px;
+	width: $grid-unit-20;
+	height: $grid-unit-20;
 }
 
 .components-calendar[dir="rtl"]
@@ -167,7 +167,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	align-content: center;
 
 	height: $wp-components-calendar-nav-height;
-	margin-bottom: 12px;
+	margin-bottom: $grid-unit-15;
 }
 
 .components-calendar__months {
@@ -175,13 +175,13 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	display: flex;
 	justify-content: center;
 	flex-wrap: wrap;
-	gap: 1rem;
+	gap: $grid-unit-20;
 	max-width: fit-content;
 }
 
 .components-calendar__month-grid {
 	border-collapse: separate;
-	border-spacing: 0 4px;
+	border-spacing: 0 $grid-unit-05;
 }
 
 .components-calendar__nav {
@@ -202,7 +202,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	height: $wp-components-calendar-button-height;
 	padding: 0;
 
-	color: $gray-700;
+	color: $components-color-gray-700;
 	text-align: center;
 	text-transform: uppercase;
 }
@@ -227,12 +227,12 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	.components-calendar__day-button,
 	.components-calendar__day-button:hover:not(:disabled)
 ) {
-		color: $white;
+		color: $components-color-foreground-inverted;
 	}
 
 	.components-calendar__day-button {
 		&::before {
-			background-color: $gray-900;
+			background-color: $components-color-foreground;
 			// Render a transparent border to highlight the selected day in
 			// forced-colors (high-contrast) mode, since the background is not
 			// visible.
@@ -240,11 +240,11 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 		}
 
 		&:disabled::before {
-			background-color: $gray-600;
+			background-color: $components-color-disabled;
 		}
 
 		&:hover:not(:disabled)::before {
-			background-color: $gray-800;
+			background-color: $components-color-gray-800;
 		}
 	}
 }

package/src/confirm-dialog/stories/index.story.tsx

@@ -16,13 +16,14 @@ import { ConfirmDialog } from '../component';
 
 const meta: Meta< typeof ConfirmDialog > = {
 	component: ConfirmDialog,
-	title: 'Components (Experimental)/Overlays/ConfirmDialog',
-	id: 'components-experimental-confirmdialog',
+	title: 'Components/Overlays/ConfirmDialog',
+	id: 'components-confirmdialog',
 	argTypes: {
 		isOpen: {
 			control: false,
 		},
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: {

package/src/custom-gradient-picker/serializer.ts

@@ -13,6 +13,17 @@ export function serializeGradientColor( {
 	if ( type === 'hex' ) {
 		return `#${ value }`;
 	}
+	if ( type === 'var' ) {
+		return `var(${ value })`;
+	}
+	if ( type === 'hsl' ) {
+		const [ hue, saturation, lightness ] = value;
+		return `hsl(${ hue },${ saturation }%,${ lightness }%)`;
+	}
+	if ( type === 'hsla' ) {
+		const [ hue, saturation, lightness, alpha ] = value;
+		return `hsla(${ hue },${ saturation }%,${ lightness }%,${ alpha })`;
+	}
 	return `${ type }(${ value.join( ',' ) })`;
 }
 
@@ -23,6 +34,9 @@ export function serializeGradientPosition(
 		return '';
 	}
 	const { value, type } = position;
+	if ( type === 'calc' ) {
+		return `calc(${ value })`;
+	}
 	return `${ value }${ type }`;
 }
 

package/src/custom-gradient-picker/test/serializer.ts

@@ -24,6 +24,27 @@ describe( 'It should serialize a gradient', () => {
 				value: [ '255', '0', '0' ],
 			} )
 		).toBe( 'rgb(255,0,0)' );
+
+		expect(
+			serializeGradientColor( {
+				type: 'hsl',
+				value: [ '1', '2', '3' ],
+			} )
+		).toBe( 'hsl(1,2%,3%)' );
+
+		expect(
+			serializeGradientColor( {
+				type: 'hsla',
+				value: [ '1', '2', '3', '0.5' ],
+			} )
+		).toBe( 'hsla(1,2%,3%,0.5)' );
+
+		expect(
+			serializeGradientColor( {
+				type: 'var',
+				value: '--my-color',
+			} as any )
+		).toBe( 'var(--my-color)' );
 	} );
 
 	test( 'serializeGradientPosition', () => {
@@ -38,6 +59,10 @@ describe( 'It should serialize a gradient', () => {
 		expect( serializeGradientPosition( { type: 'px', value: '4' } ) ).toBe(
 			'4px'
 		);
+
+		expect(
+			serializeGradientPosition( { type: 'calc', value: '50% + 10px' } )
+		).toBe( 'calc(50% + 10px)' );
 	} );
 
 	test( 'serializeGradientColorStop', () => {

package/src/custom-gradient-picker/utils.ts

@@ -108,9 +108,19 @@ export function getStopCssColor( colorStop: gradientParser.ColorStop ) {
 			return `#${ colorStop.value }`;
 		case 'literal':
 			return colorStop.value;
+		case 'var':
+			return `${ colorStop.type }(${ colorStop.value })`;
 		case 'rgb':
 		case 'rgba':
 			return `${ colorStop.type }(${ colorStop.value.join( ',' ) })`;
+		case 'hsl': {
+			const [ hue, saturation, lightness ] = colorStop.value;
+			return `hsl(${ hue },${ saturation }%,${ lightness }%)`;
+		}
+		case 'hsla': {
+			const [ hue, saturation, lightness, alpha ] = colorStop.value;
+			return `hsla(${ hue },${ saturation }%,${ lightness }%,${ alpha })`;
+		}
 		default:
 			// Should be unreachable if passing an AST from gradient-parser.
 			// See https://github.com/rafaelcaricio/gradient-parser#ast.

package/src/date-time/date/index.tsx

@@ -33,13 +33,14 @@ import type { DatePickerProps } from '../types';
 import {
 	Wrapper,
 	Navigator,
+	ViewPreviousMonthButton,
+	ViewNextMonthButton,
 	NavigatorHeading,
 	Calendar,
 	DayOfWeek,
 	DayButton,
 } from './styles';
 import { inputToDate } from '../utils';
-import Button from '../../button';
 import { TIMEZONELESS_FORMAT } from '../constants';
 
 /**
@@ -111,7 +112,7 @@ export function DatePicker( {
 			aria-label={ __( 'Calendar' ) }
 		>
 			<Navigator>
-				<Button
+				<ViewPreviousMonthButton
 					icon={ isRTL() ? arrowRight : arrowLeft }
 					variant="tertiary"
 					aria-label={ __( 'View previous month' ) }
@@ -137,7 +138,7 @@ export function DatePicker( {
 					</strong>{ ' ' }
 					{ dateI18n( 'Y', viewing, -viewing.getTimezoneOffset() ) }
 				</NavigatorHeading>
-				<Button
+				<ViewNextMonthButton
 					icon={ isRTL() ? arrowLeft : arrowRight }
 					variant="tertiary"
 					aria-label={ __( 'View next month' ) }

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

@@ -17,12 +17,25 @@ export const Wrapper = styled.div`
 `;
 
 export const Navigator = styled( HStack )`
+	column-gap: ${ space( 2 ) };
+	display: grid;
+	grid-template-columns: 0.5fr repeat( 5, 1fr ) 0.5fr;
+	justify-items: center;
 	margin-bottom: ${ space( 4 ) };
 `;
 
+export const ViewPreviousMonthButton = styled( Button )`
+	grid-column: 1 / 2;
+`;
+
+export const ViewNextMonthButton = styled( Button )`
+	grid-column: 7 / 8;
+`;
+
 export const NavigatorHeading = styled( Heading )`
 	font-size: ${ CONFIG.fontSize };
 	font-weight: ${ CONFIG.fontWeight };
+	grid-column: 2 / 7;
 
 	strong {
 		font-weight: ${ CONFIG.fontWeightHeading };
@@ -41,14 +54,6 @@ export const DayOfWeek = styled.div`
 	color: ${ COLORS.theme.gray[ 700 ] };
 	font-size: ${ CONFIG.fontSize };
 	line-height: ${ CONFIG.fontLineHeightBase };
-
-	&:nth-of-type( 1 ) {
-		justify-self: start;
-	}
-
-	&:nth-of-type( 7 ) {
-		justify-self: end;
-	}
 `;
 
 export const DayButton = styled( Button, {
@@ -64,18 +69,6 @@ export const DayButton = styled( Button, {
 	position: relative;
 	justify-content: center;
 
-	${ ( props ) =>
-		props.column === 1 &&
-		`
-		justify-self: start;
-		` }
-
-	${ ( props ) =>
-		props.column === 7 &&
-		`
-		justify-self: end;
-		` }
-
 	${ ( props ) =>
 		props.disabled &&
 		`