@wordpress/components 19.12.0 → 19.15.0

package/build-types/form-token-field/types.d.ts

@@ -0,0 +1,183 @@
+/**
+ * External dependencies
+ */
+import type { ComponentPropsWithRef, MouseEventHandler } from 'react';
+declare type Messages = {
+    /**
+     * The user added a new token.
+     */
+    added: string;
+    /**
+     * The user removed an existing token.
+     */
+    removed: string;
+    /**
+     * The user focused the button to remove the token.
+     */
+    remove: string;
+    /**
+     * The user tried to add a token that didn't pass the validation.
+     */
+    __experimentalInvalid: string;
+};
+export interface TokenItem {
+    /**
+     *  The value of the token.
+     */
+    value: string;
+    /**
+     * One of 'error', 'validating', or 'success'. Applies styles to token.
+     */
+    status?: 'error' | 'success' | 'validating';
+    /**
+     * If not falsey, will add a title to the token.
+     */
+    title?: string;
+    /**
+     * When true, renders tokens as without a background.
+     */
+    isBorderless?: boolean;
+    /**
+     * Function to call when onMouseEnter event triggered on token.
+     */
+    onMouseEnter?: MouseEventHandler<HTMLSpanElement>;
+    /**
+     *  Function to call when onMouseLeave is triggered on token.
+     */
+    onMouseLeave?: MouseEventHandler<HTMLSpanElement>;
+}
+export interface FormTokenFieldProps extends Pick<ComponentPropsWithRef<'input'>, 'autoCapitalize' | 'autoComplete' | 'className'> {
+    label?: string;
+    /**
+     * An array of strings to present to the user as suggested tokens.
+     */
+    suggestions?: string[];
+    /**
+     * The maximum number of suggestions to display at a time.
+     *
+     * @default 100
+     */
+    maxSuggestions?: number;
+    /**
+     * An array of strings or objects to display as tokens in the field.
+     * If objects are present in the array, they **must** have a property of `value`.
+     */
+    value?: (string | TokenItem)[];
+    /**
+     * Function to call to transform tokens for display.
+     * (In the editor, this is needed to decode HTML entities embedded in tags
+     * - otherwise entities like `&` in tag names are double-encoded like `&amp;`,
+     * once by the REST API and once by React).
+     */
+    displayTransform?: (token: string) => string;
+    /**
+     * Function to call to transform tokens for saving. The default is to trim the token value.
+     * This function is also applied when matching suggestions against the current value
+     * so that matching works correctly with leading or trailing spaces. (In the editor,
+     * this is needed to remove leading and trailing spaces from tag names, like wp-admin does.
+     * Otherwise the REST API won't save them.)
+     *
+     * @default ( token: string ) => token.trim()
+     */
+    saveTransform?: (token: string) => string;
+    /**
+     * Function to call when the tokens have changed. An array of new tokens is passed to the callback.
+     *
+     */
+    onChange?: (tokens: (string | TokenItem)[]) => void;
+    /**
+     * Function to call when the users types in the input field. It can be used to trigger autocomplete requests.
+     *
+     */
+    onInputChange?: (input: string) => void;
+    /**
+     * Function to call when the TokenField has been focused on. The event is passed to the callback. Useful for analytics.
+     *
+     */
+    onFocus?: (event: FocusEvent) => void;
+    /**
+     *  When true, renders tokens as without a background.
+     */
+    isBorderless?: boolean;
+    /**
+     * If passed, `TokenField` will disable ability to add new tokens once number of tokens is greater than or equal to `maxLength`.
+     */
+    maxLength?: number;
+    /**
+     * When true, tokens are not able to be added or removed.
+     */
+    disabled?: boolean;
+    /**
+     * If passed, the `TokenField` input will show a placeholder string if no value tokens are present.
+     */
+    placeholder?: string;
+    /**
+     * If true, will add a token when `TokenField` is focused and `space` is pressed.
+     */
+    tokenizeOnSpace?: boolean;
+    /**
+     * Allows customizing the messages presented by screen readers in different occasions:
+     *
+     * -   `added`: The user added a new token.
+     * -   `removed`: The user removed an existing token.
+     * -   `remove` : The user focused the button to remove the token.
+     * -   `__experimentalInvalid`: The user tried to add a token that didn't pass the validation.
+     */
+    messages?: Messages;
+    /**
+     * If true, the suggestions list will be always expanded when the input field has the focus.
+     */
+    __experimentalExpandOnFocus?: boolean;
+    /**
+     * If passed, all introduced values will be validated before being added as tokens.
+     *
+     * @default () => true
+     */
+    __experimentalValidateInput?: (token: string) => boolean;
+    /**
+     * If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.
+     *
+     * @default true
+     */
+    __experimentalShowHowTo?: boolean;
+    /**
+     * Start opting into the larger default height that will become the
+     * default size in a future version.
+     *
+     * @default false
+     */
+    __next36pxDefaultSize?: boolean;
+}
+export interface SuggestionsListProps<T = string | {
+    value: string;
+}> {
+    selectedIndex: number;
+    scrollIntoView: boolean;
+    match: T;
+    onHover: (suggestion: T) => void;
+    onSelect: (suggestion: T) => void;
+    suggestions: T[];
+    displayTransform: (value: T) => string;
+    instanceId: string | number;
+}
+export interface TokenProps extends TokenItem {
+    displayTransform: (value: string) => string;
+    disabled: boolean;
+    onClickRemove: ({ value }: {
+        value: string;
+    }) => void;
+    messages: Messages;
+    termPosition: number;
+    termsCount: number;
+}
+export interface TokenInputProps {
+    isExpanded: boolean;
+    instanceId: string | number;
+    selectedSuggestionIndex: number;
+    onChange?: ({ value }: {
+        value: string;
+    }) => void;
+    value: string;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/build-types/form-token-field/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/form-token-field/types.ts"],"names":[],"mappings":"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"}

package/build-types/grid/component.d.ts

@@ -1,8 +1,7 @@
-export default ConnectedGrid;
+import type { GridProps } from './types';
 /**
  * `Grid` is a primitive layout component that can arrange content in a grid configuration.
  *
- * @example
  * ```jsx
  * import {
  * 	__experimentalGrid as Grid,
@@ -20,5 +19,6 @@ export default ConnectedGrid;
  * }
  * ```
  */
-declare const ConnectedGrid: import("../ui/context").WordPressComponent<"div", import("./types").Props, true>;
+export declare const Grid: import("../ui/context").WordPressComponent<"div", GridProps, true>;
+export default Grid;
 //# sourceMappingURL=component.d.ts.map

package/build-types/grid/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/grid/component.js"],"names":[],"mappings":";AAiBA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,8GAAqD"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/grid/component.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAWzC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,oEAA4C,CAAC;AAE9D,eAAe,IAAI,CAAC"}

package/build-types/grid/hook.d.ts

@@ -1,7 +1,10 @@
+/// <reference types="react" />
 /**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
+ * Internal dependencies
  */
-export default function useGrid(props: import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>): {
+import { WordPressComponentProps } from '../ui/context';
+import type { GridProps } from './types';
+export default function useGrid(props: WordPressComponentProps<GridProps, 'div'>): {
     className: string;
     children: import("react").ReactNode;
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
@@ -224,7 +227,6 @@ export default function useGrid(props: import('../ui/context').WordPressComponen
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    css?: import("@emotion/core").InterpolationWithTheme<any>;
     key?: import("react").Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;

package/build-types/grid/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../src/grid/hook.js"],"names":[],"mappings":"AAmBA;;GAEG;AACH,uCAFW,OAAO,eAAe,EAAE,uBAAuB,CAAC,OAAO,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DzF"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../src/grid/hook.ts"],"names":[],"mappings":";AAUA;;GAEG;AACH,OAAO,EAAoB,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAK1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,CAAC,OAAO,UAAU,OAAO,CAC9B,KAAK,EAAE,uBAAuB,CAAE,SAAS,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8DlD"}

package/build-types/grid/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Grid } from "./component";
-export { default as useGrid } from "./hook";
+export { default as Grid } from './component';
+export { default as useGrid } from './hook';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/grid/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/grid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/build-types/grid/stories/index.d.ts

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

package/build-types/grid/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/grid/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAMtE,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,IAAI,CA2BrC,CAAC;AACF,eAAe,IAAI,CAAC;AA2BpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,IAAI,CAAwB,CAAC"}

package/build-types/grid/test/grid.d.ts

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

package/build-types/grid/test/grid.d.ts.map

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

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

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import type { CSSProperties } from 'react';
-declare type ResponsiveCSSValue<T> = Array<T | undefined> | T;
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * Internal dependencies
+ */
+import type { ResponsiveCSSValue } from '../ui/utils/types';
 declare type GridAlignment = 'bottom' | 'bottomLeft' | 'bottomRight' | 'center' | 'spaced' | 'left' | 'right' | 'stretch' | 'top' | 'topLeft' | 'topRight';
-declare type GridColumns = ResponsiveCSSValue<number>;
-declare type GridRows = ResponsiveCSSValue<number>;
-export declare type Props = {
+export declare type GridProps = {
     /**
      * Adjusts the block alignment of children.
      */
@@ -15,26 +16,30 @@ export declare type Props = {
      * Adjusts the horizontal and vertical alignment of children.
      */
     alignment?: GridAlignment;
+    /**
+     * The children elements.
+     */
+    children: ReactNode;
     /**
      * Adjusts the number of columns of the `Grid`.
      *
      * @default 2
      */
-    columns?: GridColumns;
+    columns?: ResponsiveCSSValue<number>;
     /**
      * Adjusts the `grid-column-gap`.
      */
     columnGap?: CSSProperties['gridColumnGap'];
-    /**
-     * Changes the CSS display from `grid` to `inline-grid`.
-     */
-    isInline?: boolean;
     /**
      * Gap between each child.
      *
      * @default 3
      */
     gap?: number;
+    /**
+     * Changes the CSS display from `grid` to `inline-grid`.
+     */
+    isInline?: boolean;
     /**
      * Adjusts the inline alignment of children.
      */
@@ -46,7 +51,7 @@ export declare type Props = {
     /**
      * Adjusts the number of rows of the `Grid`.
      */
-    rows?: GridRows;
+    rows?: ResponsiveCSSValue<number>;
     /**
      * Adjusts the CSS grid `template-columns`.
      */
@@ -55,10 +60,6 @@ export declare type Props = {
      * Adjusts the CSS grid `template-rows`.
      */
     templateRows?: CSSProperties['gridTemplateRows'];
-    /**
-     * The children elements.
-     */
-    children: React.ReactNode;
 };
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/grid/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,aAAK,kBAAkB,CAAE,CAAC,IAAK,KAAK,CAAE,CAAC,GAAG,SAAS,CAAE,GAAG,CAAC,CAAC;AAE1D,aAAK,aAAa,GACf,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,KAAK,GACL,SAAS,GACT,UAAU,CAAC;AAEd,aAAK,WAAW,GAAG,kBAAkB,CAAE,MAAM,CAAE,CAAC;AAEhD,aAAK,QAAQ,GAAG,kBAAkB,CAAE,MAAM,CAAE,CAAC;AAE7C,oBAAY,KAAK,GAAG;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAE,eAAe,CAAE,CAAC;IAC7C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAE,gBAAgB,CAAE,CAAC;IAC5C;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAE,qBAAqB,CAAE,CAAC;IACzD;;OAEG;IACH,YAAY,CAAC,EAAE,aAAa,CAAE,kBAAkB,CAAE,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/grid/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,aAAK,aAAa,GACf,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,KAAK,GACL,SAAS,GACT,UAAU,CAAC;AAEd,oBAAY,SAAS,GAAG;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAE,MAAM,CAAE,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAE,eAAe,CAAE,CAAC;IAC7C;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAE,gBAAgB,CAAE,CAAC;IAC5C;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAE,MAAM,CAAE,CAAC;IACpC;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAE,qBAAqB,CAAE,CAAC;IACzD;;OAEG;IACH,YAAY,CAAC,EAAE,aAAa,CAAE,kBAAkB,CAAE,CAAC;CACnD,CAAC"}

package/build-types/grid/utils.d.ts

@@ -1,74 +1,55 @@
 /**
- * @param {keyof typeof ALIGNMENTS | undefined} alignment
- * @return {{ alignItems?: import('react').CSSProperties['alignItems'], justifyContent?: import('react').CSSProperties['justifyContent']}} CSS props for alignment
+ * External dependencies
  */
-export function getAlignmentProps(alignment: keyof typeof ALIGNMENTS | undefined): {
-    alignItems?: import('react').CSSProperties['alignItems'];
-    justifyContent?: import('react').CSSProperties['justifyContent'];
+import type { CSSProperties } from 'react';
+declare const ALIGNMENTS: {
+    bottom: {
+        alignItems: string;
+        justifyContent: string;
+    };
+    bottomLeft: {
+        alignItems: string;
+        justifyContent: string;
+    };
+    bottomRight: {
+        alignItems: string;
+        justifyContent: string;
+    };
+    center: {
+        alignItems: string;
+        justifyContent: string;
+    };
+    spaced: {
+        alignItems: string;
+        justifyContent: string;
+    };
+    left: {
+        alignItems: string;
+        justifyContent: string;
+    };
+    right: {
+        alignItems: string;
+        justifyContent: string;
+    };
+    stretch: {
+        alignItems: string;
+    };
+    top: {
+        alignItems: string;
+        justifyContent: string;
+    };
+    topLeft: {
+        alignItems: string;
+        justifyContent: string;
+    };
+    topRight: {
+        alignItems: string;
+        justifyContent: string;
+    };
+};
+export declare function getAlignmentProps(alignment?: keyof typeof ALIGNMENTS): {
+    alignItems?: CSSProperties['alignItems'];
+    justifyContent?: CSSProperties['justifyContent'];
 };
-declare namespace ALIGNMENTS {
-    namespace bottom {
-        const alignItems: string;
-        const justifyContent: string;
-    }
-    namespace bottomLeft {
-        const alignItems_1: string;
-        export { alignItems_1 as alignItems };
-        const justifyContent_1: string;
-        export { justifyContent_1 as justifyContent };
-    }
-    namespace bottomRight {
-        const alignItems_2: string;
-        export { alignItems_2 as alignItems };
-        const justifyContent_2: string;
-        export { justifyContent_2 as justifyContent };
-    }
-    namespace center {
-        const alignItems_3: string;
-        export { alignItems_3 as alignItems };
-        const justifyContent_3: string;
-        export { justifyContent_3 as justifyContent };
-    }
-    namespace spaced {
-        const alignItems_4: string;
-        export { alignItems_4 as alignItems };
-        const justifyContent_4: string;
-        export { justifyContent_4 as justifyContent };
-    }
-    namespace left {
-        const alignItems_5: string;
-        export { alignItems_5 as alignItems };
-        const justifyContent_5: string;
-        export { justifyContent_5 as justifyContent };
-    }
-    namespace right {
-        const alignItems_6: string;
-        export { alignItems_6 as alignItems };
-        const justifyContent_6: string;
-        export { justifyContent_6 as justifyContent };
-    }
-    namespace stretch {
-        const alignItems_7: string;
-        export { alignItems_7 as alignItems };
-    }
-    namespace top {
-        const alignItems_8: string;
-        export { alignItems_8 as alignItems };
-        const justifyContent_7: string;
-        export { justifyContent_7 as justifyContent };
-    }
-    namespace topLeft {
-        const alignItems_9: string;
-        export { alignItems_9 as alignItems };
-        const justifyContent_8: string;
-        export { justifyContent_8 as justifyContent };
-    }
-    namespace topRight {
-        const alignItems_10: string;
-        export { alignItems_10 as alignItems };
-        const justifyContent_9: string;
-        export { justifyContent_9 as justifyContent };
-    }
-}
 export {};
 //# sourceMappingURL=utils.d.ts.map

package/build-types/grid/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/grid/utils.js"],"names":[],"mappings":"AAeA;;;GAGG;AACH,6CAHW,MAAM,iBAAiB,GAAG,SAAS,GAClC;IAAE,UAAU,CAAC,EAAE,OAAO,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,OAAO,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAA;CAAC,CAMxI"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/grid/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYf,CAAC;AAEF,wBAAgB,iBAAiB,CAAE,SAAS,CAAC,EAAE,MAAM,OAAO,UAAU,GAAI;IACzE,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;IAC3C,cAAc,CAAC,EAAE,aAAa,CAAE,gBAAgB,CAAE,CAAC;CACnD,CAIA"}

package/build-types/h-stack/component.d.ts

@@ -1,4 +1,4 @@
-export default ConnectedHStack;
+import type { Props } from './types';
 /**
  * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.
  *
@@ -22,5 +22,6 @@ export default ConnectedHStack;
  * }
  * ```
  */
-declare const ConnectedHStack: import("../ui/context").WordPressComponent<"div", import("./types").Props, true>;
+export declare const HStack: import("../ui/context").WordPressComponent<"div", Props, true>;
+export default HStack;
 //# sourceMappingURL=component.d.ts.map

package/build-types/h-stack/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/h-stack/component.js"],"names":[],"mappings":";AAiBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,gHAA2D"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/h-stack/component.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAWrC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM,gEAAgD,CAAC;AAEpE,eAAe,MAAM,CAAC"}

package/build-types/h-stack/hook.d.ts

@@ -1,8 +1,10 @@
+/// <reference types="react" />
 /**
- *
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
+ * Internal dependencies
  */
-export function useHStack(props: import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>): {
+import { WordPressComponentProps } from '../ui/context';
+import type { Props } from './types';
+export declare function useHStack(props: WordPressComponentProps<Props, 'div'>): {
     className: string;
     isColumn: boolean;
     children: import("react").ReactNode;
@@ -227,7 +229,6 @@ export function useHStack(props: import('../ui/context').WordPressComponentProps
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-    css?: import("@emotion/core").InterpolationWithTheme<any>;
     key?: import("react").Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;

package/build-types/h-stack/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../src/h-stack/hook.js"],"names":[],"mappings":"AAQA;;;GAGG;AACH,iCAFW,OAAO,eAAe,EAAE,uBAAuB,CAAC,OAAO,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCzF"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../src/h-stack/hook.tsx"],"names":[],"mappings":";AAKA;;GAEG;AACH,OAAO,EAGN,uBAAuB,EACvB,MAAM,eAAe,CAAC;AAIvB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,wBAAgB,SAAS,CAAE,KAAK,EAAE,uBAAuB,CAAE,KAAK,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCxE"}

package/build-types/h-stack/index.d.ts

@@ -1,3 +1,3 @@
-export { default as HStack } from "./component";
-export { useHStack } from "./hook";
+export { default as HStack } from './component';
+export { useHStack } from './hook';
 //# sourceMappingURL=index.d.ts.map

package/build-types/h-stack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/h-stack/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/h-stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/build-types/h-stack/stories/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/h-stack/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtE,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAkC5B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,MAAM,CAiCvC,CAAC;AACF,eAAe,IAAI,CAAC;AAYpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,MAAM,CAAwB,CAAC"}

package/build-types/h-stack/test/index.d.ts

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

package/build-types/h-stack/test/index.d.ts.map

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

package/build-types/h-stack/utils.d.ts

@@ -1,7 +1,11 @@
 /**
- * @param {import('./types').HStackAlignment | import('react').CSSProperties[ 'alignItems' ]} alignment         Where to align.
- * @param {import('../flex/types').FlexDirection}                                             [direction='row'] Direction to align.
- * @return {import('./types').AlignmentProps} Alignment props.
+ * External dependencies
  */
-export function getAlignmentProps(alignment: import('./types').HStackAlignment | import('react').CSSProperties['alignItems'], direction?: import('../flex/types').FlexDirection): import('./types').AlignmentProps;
+import type { CSSProperties } from 'react';
+/**
+ * Internal dependencies
+ */
+import type { FlexDirection } from '../flex/types';
+import type { HStackAlignment, AlignmentProps } from './types';
+export declare function getAlignmentProps(alignment: HStackAlignment | CSSProperties['alignItems'], direction?: FlexDirection): AlignmentProps;
 //# sourceMappingURL=utils.d.ts.map

package/build-types/h-stack/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/h-stack/utils.js"],"names":[],"mappings":"AAoCA;;;;GAIG;AAEH,6CALW,OAAO,SAAS,EAAE,eAAe,GAAG,OAAO,OAAO,EAAE,aAAa,CAAE,YAAY,CAAE,cACjF,OAAO,eAAe,EAAE,aAAa,GACpC,OAAO,SAAS,EAAE,cAAc,CAgB3C"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/h-stack/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAc,MAAM,SAAS,CAAC;AA+B3E,wBAAgB,iBAAiB,CAChC,SAAS,EAAE,eAAe,GAAG,aAAa,CAAE,YAAY,CAAE,EAC1D,SAAS,GAAE,aAAqB,GAC9B,cAAc,CAahB"}

package/build-types/heading/component.d.ts

@@ -1,8 +1,7 @@
-import { HeadingProps } from './hook';
+import type { HeadingProps } from './types';
 /**
  * `Heading` renders headings and titles using the library's typography system.
  *
- * @example
  * ```jsx
  * import { __experimentalHeading as Heading } from "@wordpress/components";
  *

package/build-types/heading/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/heading/component.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAc,YAAY,EAAE,MAAM,QAAQ,CAAC;AAWlD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,sEAAkD,CAAC;AAEvE,eAAe,OAAO,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/heading/component.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAW5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO,sEAAkD,CAAC;AAEvE,eAAe,OAAO,CAAC"}