@wordpress/components 21.3.0 → 22.1.0

package/build-types/card/card-divider/hook.d.ts

@@ -6,16 +6,17 @@ import { WordPressComponentProps } from '../../ui/context';
 import type { DividerProps } from '../../divider';
 export declare function useCardDivider(props: WordPressComponentProps<DividerProps, 'hr', false>): {
     className: string;
-    ref?: import("react").Ref<any> | undefined;
-    slot?: string | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined;
-    hidden?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    onChange?: import("react").FormEventHandler<any> | undefined;
     color?: string | undefined;
     translate?: "no" | "yes" | undefined;
+    hidden?: boolean | undefined;
+    style?: import("react").CSSProperties | undefined;
     key?: import("react").Key | null | undefined;
+    ref?: import("react").Ref<any> | undefined;
+    slot?: string | undefined;
+    title?: string | undefined;
     defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
@@ -49,27 +50,27 @@ export declare function useCardDivider(props: WordPressComponentProps<DividerPro
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "false" | "true") | undefined;
-    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
     'aria-busy'?: (boolean | "false" | "true") | undefined;
     'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "date" | "step" | "location" | undefined;
+    'aria-current'?: boolean | "page" | "false" | "true" | "time" | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "false" | "true") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "false" | "true") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "false" | "true") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
     'aria-hidden'?: (boolean | "false" | "true") | undefined;
     'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -86,7 +87,7 @@ export declare function useCardDivider(props: WordPressComponentProps<DividerPro
     'aria-posinset'?: number | undefined;
     'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-readonly'?: (boolean | "false" | "true") | undefined;
-    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     'aria-required'?: (boolean | "false" | "true") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
@@ -118,7 +119,6 @@ export declare function useCardDivider(props: WordPressComponentProps<DividerPro
     onFocusCapture?: import("react").FocusEventHandler<any> | undefined;
     onBlur?: import("react").FocusEventHandler<any> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<any> | undefined;
-    onChange?: import("react").FormEventHandler<any> | undefined;
     onChangeCapture?: import("react").FormEventHandler<any> | undefined;
     onBeforeInput?: import("react").FormEventHandler<any> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<any> | undefined;

package/build-types/card/card-footer/hook.d.ts

@@ -8,15 +8,16 @@ export declare function useCardFooter(props: WordPressComponentProps<FooterProps
     className: string;
     justify: import("csstype").Property.JustifyContent | undefined;
     children: import("react").ReactNode;
-    slot?: string | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined;
-    hidden?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     color?: string | undefined;
     translate?: "no" | "yes" | undefined;
+    hidden?: boolean | undefined;
+    style?: import("react").CSSProperties | undefined;
     key?: import("react").Key | null | undefined;
+    slot?: string | undefined;
+    title?: string | undefined;
     defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
@@ -50,27 +51,27 @@ export declare function useCardFooter(props: WordPressComponentProps<FooterProps
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "false" | "true") | undefined;
-    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
     'aria-busy'?: (boolean | "false" | "true") | undefined;
     'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "date" | "step" | "location" | undefined;
+    'aria-current'?: boolean | "page" | "false" | "true" | "time" | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "false" | "true") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "false" | "true") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "false" | "true") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
     'aria-hidden'?: (boolean | "false" | "true") | undefined;
     'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -87,7 +88,7 @@ export declare function useCardFooter(props: WordPressComponentProps<FooterProps
     'aria-posinset'?: number | undefined;
     'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-readonly'?: (boolean | "false" | "true") | undefined;
-    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     'aria-required'?: (boolean | "false" | "true") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
@@ -119,7 +120,6 @@ export declare function useCardFooter(props: WordPressComponentProps<FooterProps
     onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;

package/build-types/card/card-header/hook.d.ts

@@ -7,15 +7,16 @@ import type { HeaderProps } from '../types';
 export declare function useCardHeader(props: WordPressComponentProps<HeaderProps, 'div'>): {
     className: string;
     children: import("react").ReactNode;
-    slot?: string | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined;
-    hidden?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     color?: string | undefined;
     translate?: "no" | "yes" | undefined;
+    hidden?: boolean | undefined;
+    style?: import("react").CSSProperties | undefined;
     key?: import("react").Key | null | undefined;
+    slot?: string | undefined;
+    title?: string | undefined;
     defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
@@ -49,27 +50,27 @@ export declare function useCardHeader(props: WordPressComponentProps<HeaderProps
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "false" | "true") | undefined;
-    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
     'aria-busy'?: (boolean | "false" | "true") | undefined;
     'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "date" | "step" | "location" | undefined;
+    'aria-current'?: boolean | "page" | "false" | "true" | "time" | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "false" | "true") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "false" | "true") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "false" | "true") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
     'aria-hidden'?: (boolean | "false" | "true") | undefined;
     'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -86,7 +87,7 @@ export declare function useCardHeader(props: WordPressComponentProps<HeaderProps
     'aria-posinset'?: number | undefined;
     'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-readonly'?: (boolean | "false" | "true") | undefined;
-    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     'aria-required'?: (boolean | "false" | "true") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
@@ -118,7 +119,6 @@ export declare function useCardHeader(props: WordPressComponentProps<HeaderProps
     onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;

package/build-types/card/card-media/hook.d.ts

@@ -7,15 +7,16 @@ import type { MediaProps } from '../types';
 export declare function useCardMedia(props: WordPressComponentProps<MediaProps, 'div'>): {
     className: string;
     children: import("react").ReactNode;
-    slot?: string | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined;
-    hidden?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     color?: string | undefined;
     translate?: "no" | "yes" | undefined;
+    hidden?: boolean | undefined;
+    style?: import("react").CSSProperties | undefined;
     key?: import("react").Key | null | undefined;
+    slot?: string | undefined;
+    title?: string | undefined;
     defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
@@ -49,27 +50,27 @@ export declare function useCardMedia(props: WordPressComponentProps<MediaProps,
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "false" | "true") | undefined;
-    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
     'aria-busy'?: (boolean | "false" | "true") | undefined;
     'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "date" | "step" | "location" | undefined;
+    'aria-current'?: boolean | "page" | "false" | "true" | "time" | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "false" | "true") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "false" | "true") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "false" | "true") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
     'aria-hidden'?: (boolean | "false" | "true") | undefined;
     'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -86,7 +87,7 @@ export declare function useCardMedia(props: WordPressComponentProps<MediaProps,
     'aria-posinset'?: number | undefined;
     'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-readonly'?: (boolean | "false" | "true") | undefined;
-    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     'aria-required'?: (boolean | "false" | "true") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
@@ -118,7 +119,6 @@ export declare function useCardMedia(props: WordPressComponentProps<MediaProps,
     onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/card/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,EACN,IAAI,EAMJ,MAAM,IAAI,CAAC;AAKZ,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,IAAI,CAkBrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAkCpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,IAAI,CAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/card/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,EACN,IAAI,EAMJ,MAAM,IAAI,CAAC;AAKZ,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,IAAI,CAkBrC,CAAC;AAEF,eAAe,IAAI,CAAC;AA8BpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,IAAI,CAAwB,CAAC"}

package/build-types/circular-option-picker/index.d.ts

@@ -1,31 +1,11 @@
-declare function CircularOptionPicker({ actions, className, options, children, }: {
-    actions: any;
-    className: any;
-    options: any;
-    children: any;
-}): JSX.Element;
+declare function CircularOptionPicker(props: any): JSX.Element;
 declare namespace CircularOptionPicker {
     export { Option };
     export { ButtonAction };
     export { DropdownLinkAction };
 }
 export default CircularOptionPicker;
-declare function Option({ className, isSelected, selectedIconProps, tooltipText, ...additionalProps }: {
-    [x: string]: any;
-    className: any;
-    isSelected: any;
-    selectedIconProps: any;
-    tooltipText: any;
-}): JSX.Element;
-declare function ButtonAction({ className, children, ...additionalProps }: {
-    [x: string]: any;
-    className: any;
-    children: any;
-}): JSX.Element;
-declare function DropdownLinkAction({ buttonProps, className, dropdownProps, linkText, }: {
-    buttonProps: any;
-    className: any;
-    dropdownProps: any;
-    linkText: any;
-}): JSX.Element;
+declare function Option(props: any): JSX.Element;
+declare function ButtonAction(props: any): JSX.Element;
+declare function DropdownLinkAction(props: any): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/build-types/circular-option-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/circular-option-picker/index.js"],"names":[],"mappings":"AAiGA;;;;;gBAwBC;;;;;;;AAvGD;;;;;;gBAkCC;AA8BD;;;;gBAaC;AAzCD;;;;;gBA0BC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/circular-option-picker/index.js"],"names":[],"mappings":"AA+FA,+DAoBC;;;;;;;AAjGD,iDAmCC;AA0BD,uDAcC;AAtCD,6DAsBC"}

package/build-types/color-palette/index.d.ts

@@ -1,19 +1,48 @@
-export function CustomColorPickerDropdown({ isRenderedInSidebar, popoverProps: receivedPopoverProps, ...props }: {
-    [x: string]: any;
-    isRenderedInSidebar: any;
-    popoverProps: any;
-}): JSX.Element;
-export default function ColorPalette({ clearable, className, colors, disableCustomColors, enableAlpha, onChange, value, __experimentalHasMultipleOrigins, __experimentalIsRenderedInSidebar, }: {
+/// <reference types="react" />
+import type { ColorObject, ColorPaletteProps, CustomColorPickerDropdownProps, PaletteObject } from './types';
+export declare function CustomColorPickerDropdown({ isRenderedInSidebar, popoverProps: receivedPopoverProps, ...props }: CustomColorPickerDropdownProps): JSX.Element;
+export declare const extractColorNameFromCurrentValue: (currentValue?: ColorPaletteProps['value'], colors?: ColorPaletteProps['colors'], showMultiplePalettes?: ColorPaletteProps['__experimentalHasMultipleOrigins']) => string;
+export declare const showTransparentBackground: (currentValue?: string | undefined) => boolean;
+/**
+ * Allows the user to pick a color from a list of pre-defined color entries.
+ *
+ * ```jsx
+ * import { ColorPalette } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyColorPalette = () => {
+ *   const [ color, setColor ] = useState ( '#f00' )
+ *   const colors = [
+ *     { name: 'red', color: '#f00' },
+ *     { name: 'white', color: '#fff' },
+ *     { name: 'blue', color: '#00f' },
+ *   ];
+ *   return (
+ *     <ColorPalette
+ *       colors={ colors }
+ *       value={ color }
+ *       onChange={ ( color ) => setColor( color ) }
+ *     />
+ *   );
+ * } );
+ * ```
+ */
+export declare const ColorPalette: import("react").ForwardRefExoticComponent<Pick<{
+    className?: string | undefined;
+    clearColor: () => void;
+    onChange: (newColor?: string | undefined) => void;
+    value?: string | undefined;
+    actions?: import("react").ReactNode;
+}, "onChange"> & {
     clearable?: boolean | undefined;
-    className: any;
-    colors: any;
+    colors?: (ColorObject | PaletteObject)[] | undefined;
     disableCustomColors?: boolean | undefined;
-    enableAlpha: any;
-    onChange: any;
-    value: any;
+    enableAlpha?: boolean | undefined;
+    value?: string | undefined;
     __experimentalHasMultipleOrigins?: boolean | undefined;
     __experimentalIsRenderedInSidebar?: boolean | undefined;
-}): JSX.Element;
-export function extractColorNameFromCurrentValue(currentValue: any, colors?: any[], showMultiplePalettes?: boolean): any;
-export function showTransparentBackground(currentValue: any): boolean;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "children" | "onChange" | "value" | "as" | "colors" | "enableAlpha" | "__experimentalHasMultipleOrigins" | "__experimentalIsRenderedInSidebar" | "clearable" | "disableCustomColors"> & {
+    as?: keyof JSX.IntrinsicElements | undefined;
+} & import("react").RefAttributes<any>>;
+export default ColorPalette;
 //# sourceMappingURL=index.d.ts.map

package/build-types/color-palette/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color-palette/index.js"],"names":[],"mappings":"AAmHA;;;;gBAgCC;AAyCD;;;;;;;;;;gBAoHC;AA3JM,yHA8BN;AAEM,sEAKN"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color-palette/index.tsx"],"names":[],"mappings":";AAyBA,OAAO,KAAK,EACX,WAAW,EACX,iBAAiB,EACjB,8BAA8B,EAE9B,aAAa,EAEb,MAAM,SAAS,CAAC;AAqGjB,wBAAgB,yBAAyB,CAAE,EAC1C,mBAAmB,EACnB,YAAY,EAAE,oBAAoB,EAClC,GAAG,KAAK,EACR,EAAE,8BAA8B,eA4BhC;AAED,eAAO,MAAM,gCAAgC,kBAC7B,iBAAiB,CAAE,OAAO,CAAE,WACnC,iBAAiB,CAAE,QAAQ,CAAE,yBACf,iBAAiB,CAAE,kCAAkC,CAAE,WA8B7E,CAAC;AAEF,eAAO,MAAM,yBAAyB,gDAKrC,CAAC;AAwJF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;uCAAwC,CAAC;AAElE,eAAe,YAAY,CAAC"}

package/build-types/color-palette/stories/index.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import ColorPalette from '..';
+import type { ColorObject, PaletteObject } from '../types';
+declare const meta: ComponentMeta<typeof ColorPalette>;
+export default meta;
+export declare const Default: ComponentStory<import("react").ForwardRefExoticComponent<Pick<{
+    className?: string | undefined;
+    clearColor: () => void;
+    onChange: (newColor?: string | undefined) => void;
+    value?: string | undefined;
+    actions?: import("react").ReactNode;
+}, "onChange"> & {
+    clearable?: boolean | undefined;
+    colors?: (ColorObject | PaletteObject)[] | undefined;
+    disableCustomColors?: boolean | undefined;
+    enableAlpha?: boolean | undefined;
+    value?: string | undefined;
+    __experimentalHasMultipleOrigins?: boolean | undefined;
+    __experimentalIsRenderedInSidebar?: boolean | undefined;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "children" | "onChange" | "value" | "as" | "colors" | "enableAlpha" | "__experimentalHasMultipleOrigins" | "__experimentalIsRenderedInSidebar" | "clearable" | "disableCustomColors"> & {
+    as?: keyof JSX.IntrinsicElements | undefined;
+} & import("react").RefAttributes<any>>>;
+/**
+ * When setting the `__experimentalHasMultipleOrigins` prop to `true`,
+ * the `colors` prop is expected to be an array of color palettes, rather
+ * than an array of color objects.
+ */
+export declare const MultipleOrigins: ComponentStory<import("react").ForwardRefExoticComponent<Pick<{
+    className?: string | undefined;
+    clearColor: () => void;
+    onChange: (newColor?: string | undefined) => void;
+    value?: string | undefined;
+    actions?: import("react").ReactNode;
+}, "onChange"> & {
+    clearable?: boolean | undefined;
+    colors?: (ColorObject | PaletteObject)[] | undefined;
+    disableCustomColors?: boolean | undefined;
+    enableAlpha?: boolean | undefined;
+    value?: string | undefined;
+    __experimentalHasMultipleOrigins?: boolean | undefined;
+    __experimentalIsRenderedInSidebar?: boolean | undefined;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "children" | "onChange" | "value" | "as" | "colors" | "enableAlpha" | "__experimentalHasMultipleOrigins" | "__experimentalIsRenderedInSidebar" | "clearable" | "disableCustomColors"> & {
+    as?: keyof JSX.IntrinsicElements | undefined;
+} & import("react").RefAttributes<any>>>;
+export declare const CSSVariables: ComponentStory<typeof ColorPalette>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/color-palette/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/color-palette/stories/index.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE;;GAEG;AACH,OAAO,YAAY,MAAM,IAAI,CAAC;AAG9B,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,YAAY,CAmB7C,CAAC;AACF,eAAe,IAAI,CAAC;AA2BpB,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;wCAAsB,CAAC;AAS3C;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;wCAAsB,CAAC;AAuBnD,eAAO,MAAM,YAAY,EAAE,cAAc,CAAE,OAAO,YAAY,CAc7D,CAAC"}

package/build-types/color-palette/styles.d.ts

@@ -1,6 +1,7 @@
-export const ColorHeading: import("@emotion/styled").StyledComponent<Omit<import("../text/types").Props, "size"> & {
+/// <reference types="react" />
+export declare const ColorHeading: import("@emotion/styled").StyledComponent<Omit<import("../text/types").Props, "size"> & {
     level?: import("../heading/types").HeadingSize | undefined;
-} & import("react").RefAttributes<any> & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof import("react").HTMLAttributes<HTMLHeadingElement>>, "children" | "as" | "color" | "display" | "letterSpacing" | "lineHeight" | "ellipsis" | "weight" | keyof import("react").RefAttributes<any> | "variant" | "isBlock" | "align" | "ellipsizeMode" | "limit" | "numberOfLines" | "adjustLineHeightForInnerControls" | "isDestructive" | "highlightEscape" | "highlightCaseSensitive" | "highlightSanitize" | "optimizeReadabilityFor" | "truncate" | "upperCase" | "highlightWords" | "level"> & {
+} & import("react").RefAttributes<any> & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof import("react").HTMLAttributes<HTMLHeadingElement>>, "children" | "color" | "display" | "letterSpacing" | "lineHeight" | "ellipsis" | "weight" | "as" | keyof import("react").RefAttributes<any> | "variant" | "isBlock" | "align" | "ellipsizeMode" | "limit" | "numberOfLines" | "adjustLineHeightForInnerControls" | "isDestructive" | "highlightEscape" | "highlightCaseSensitive" | "highlightSanitize" | "optimizeReadabilityFor" | "truncate" | "upperCase" | "highlightWords" | "level"> & {
     as?: keyof JSX.IntrinsicElements | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;

package/build-types/color-palette/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/color-palette/styles.js"],"names":[],"mappings":"AAUA;;;;;;WAQE"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/color-palette/styles.ts"],"names":[],"mappings":";AAUA,eAAO,MAAM,YAAY;;;;;;UAQxB,CAAC"}

package/build-types/color-palette/test/index.d.ts

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

package/build-types/color-palette/test/index.d.ts.map

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

package/build-types/color-palette/types.d.ts

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+/**
+ * Internal dependencies
+ */
+import type { PopoverProps } from '../popover/types';
+export declare type ColorObject = {
+    name: string;
+    color: NonNullable<CSSProperties['color']>;
+};
+export declare type PaletteObject = {
+    name: string;
+    colors: ColorObject[];
+};
+declare type PaletteProps = {
+    className?: string;
+    clearColor: () => void;
+    /**
+     * Callback called when a color is selected.
+     */
+    onChange: (newColor?: string) => void;
+    value?: string;
+    actions?: ReactNode;
+};
+export declare type SinglePaletteProps = PaletteProps & {
+    colors: ColorObject[];
+};
+export declare type MultiplePalettesProps = PaletteProps & {
+    colors: PaletteObject[];
+};
+export declare type CustomColorPickerDropdownProps = {
+    isRenderedInSidebar: boolean;
+    renderContent: () => ReactNode;
+    popoverProps?: Omit<PopoverProps, 'children'>;
+    renderToggle: (props: {
+        isOpen: boolean;
+        onToggle: MouseEventHandler<HTMLButtonElement>;
+    }) => ReactNode;
+};
+export declare type ColorPaletteProps = Pick<PaletteProps, 'onChange'> & {
+    /**
+     * Whether the palette should have a clearing button.
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Array with the colors to be shown. When displaying multiple color palettes
+     * to choose from, the format of the array changes from an array of colors
+     * objects, to an array of color palettes.
+     *
+     * @default []
+     */
+    colors?: (PaletteObject | ColorObject)[];
+    /**
+     * Whether to allow the user to pick a custom color on top of the predefined
+     * choices (defined via the `colors` prop).
+     *
+     * @default false
+     */
+    disableCustomColors?: boolean;
+    /**
+     * This controls whether the alpha channel will be offered when selecting
+     * custom colors.
+     *
+     * @default false
+     */
+    enableAlpha?: boolean;
+    /**
+     * Currently active value.
+     */
+    value?: string;
+    /**
+     * Whether the colors prop is an array of color palettes,
+     * rather than an array of color objects.
+     *
+     * @default false
+     */
+    __experimentalHasMultipleOrigins?: boolean;
+    /**
+     * Whether this is rendered in the sidebar.
+     *
+     * @default false
+     */
+    __experimentalIsRenderedInSidebar?: boolean;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/build-types/color-palette/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/color-palette/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,oBAAY,WAAW,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,CAAE,aAAa,CAAE,OAAO,CAAE,CAAE,CAAC;CAC/C,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,EAAE,CAAC;CACtB,CAAC;AAEF,aAAK,YAAY,GAAG;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,CAAE,QAAQ,CAAC,EAAE,MAAM,KAAM,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,YAAY,GAAG;IAC/C,MAAM,EAAE,WAAW,EAAE,CAAC;CACtB,CAAC;AAEF,oBAAY,qBAAqB,GAAG,YAAY,GAAG;IAClD,MAAM,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAGF,oBAAY,8BAA8B,GAAG;IAC5C,mBAAmB,EAAE,OAAO,CAAC;IAC7B,aAAa,EAAE,MAAM,SAAS,CAAC;IAC/B,YAAY,CAAC,EAAE,IAAI,CAAE,YAAY,EAAE,UAAU,CAAE,CAAC;IAChD,YAAY,EAAE,CAAE,KAAK,EAAE;QACtB,MAAM,EAAE,OAAO,CAAC;QAChB,QAAQ,EAAE,iBAAiB,CAAE,iBAAiB,CAAE,CAAC;KACjD,KAAM,SAAS,CAAC;CACjB,CAAC;AAEF,oBAAY,iBAAiB,GAAG,IAAI,CAAE,YAAY,EAAE,UAAU,CAAE,GAAG;IAClE;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAE,aAAa,GAAG,WAAW,CAAE,EAAE,CAAC;IAC3C;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C;;;;OAIG;IACH,iCAAiC,CAAC,EAAE,OAAO,CAAC;CAC5C,CAAC"}

package/build-types/color-picker/input-with-slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-with-slider.d.ts","sourceRoot":"","sources":["../../src/color-picker/input-with-slider.tsx"],"names":[],"mappings":";AAUA,UAAU,oBAAoB;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,eAAe,wDAOzB,oBAAoB,gBAqCtB,CAAC"}
+{"version":3,"file":"input-with-slider.d.ts","sourceRoot":"","sources":["../../src/color-picker/input-with-slider.tsx"],"names":[],"mappings":";AAUA,UAAU,oBAAoB;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,eAAe,wDAOzB,oBAAoB,gBAgDtB,CAAC"}