@wordpress/components 23.6.0 → 23.7.0

package/build-module/utils/input/input-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/input/input-control.js"],"names":["css","inputStyleNeutral","inputStyleFocus","font","COLORS","breakpoint","inputControl","ui","darkGrayPlaceholder","lightGrayPlaceholder"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,iBAAT,EAA4BC,eAA5B,QAAmD,QAAnD;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,UAAT,QAA2B,eAA3B;AAEA,OAAO,MAAMC,YAAY,gBAAGN,GAAH,iBACRG,IAAI,CAAE,oBAAF,CADI,uBAGrBF,iBAHqB,iBAMVE,IAAI,CAAE,uBAAF,CANM,0BAUrBE,UAAU,CAAE,OAAF,CAVW,iBAWTF,IAAI,CAAE,kBAAF,CAXK,mCAiBpBD,eAjBoB,2CAsBbE,MAAM,CAACG,EAAP,CAAUC,mBAtBG,4CA2BbJ,MAAM,CAACG,EAAP,CAAUC,mBA3BG,sCA+BbJ,MAAM,CAACG,EAAP,CAAUC,mBA/BG,4DAoCZJ,MAAM,CAACG,EAAP,CAAUE,oBApCE,4CAyCZL,MAAM,CAACG,EAAP,CAAUE,oBAzCE,sCA6CZL,MAAM,CAACG,EAAP,CAAUE,oBA7CE,ghFAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { inputStyleNeutral, inputStyleFocus } from './base';\nimport { font } from '../font';\nimport { COLORS } from '../colors-values';\nimport { breakpoint } from '../breakpoint';\n\nexport const inputControl = css`\n\tfont-family: ${ font( 'default.fontFamily' ) };\n\tpadding: 6px 8px;\n\t${ inputStyleNeutral };\n\n\t/* Fonts smaller than 16px causes mobile safari to zoom. */\n\tfont-size: ${ font( 'mobileTextMinFontSize' ) };\n\t/* Override core line-height. To be reviewed. */\n\tline-height: normal;\n\n\t${ breakpoint( 'small' ) } {\n\t\tfont-size: ${ font( 'default.fontSize' ) };\n\t\t/* Override core line-height. To be reviewed. */\n\t\tline-height: normal;\n\t}\n\n\t&:focus {\n\t\t${ inputStyleFocus }\n\t}\n\n\t// Use opacity to work in various editor styles.\n\t&::-webkit-input-placeholder {\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t&::-moz-placeholder {\n\t\topacity: 1; // Necessary because Firefox reduces this from 1.\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t&:-ms-input-placeholder {\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t.is-dark-theme & {\n\t\t&::-webkit-input-placeholder {\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\n\t\t&::-moz-placeholder {\n\t\t\topacity: 1; // Necessary because Firefox reduces this from 1.\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\n\t\t&:-ms-input-placeholder {\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/utils/input/input-control.js"],"names":["css","inputStyleNeutral","inputStyleFocus","font","COLORS","breakpoint","inputControl","ui","darkGrayPlaceholder","lightGrayPlaceholder"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,iBAAT,EAA4BC,eAA5B,QAAmD,QAAnD;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,UAAT,QAA2B,eAA3B;AAEA,OAAO,MAAMC,YAAY,gBAAGN,GAAH,+BAERG,IAAI,CAAE,oBAAF,CAFI,uBAIrBF,iBAJqB,iBAOVE,IAAI,CAAE,uBAAF,CAPM,0BAWrBE,UAAU,CAAE,OAAF,CAXW,iBAYTF,IAAI,CAAE,kBAAF,CAZK,mCAkBpBD,eAlBoB,2CAuBbE,MAAM,CAACG,EAAP,CAAUC,mBAvBG,4CA4BbJ,MAAM,CAACG,EAAP,CAAUC,mBA5BG,sCAgCbJ,MAAM,CAACG,EAAP,CAAUC,mBAhCG,4DAqCZJ,MAAM,CAACG,EAAP,CAAUE,oBArCE,4CA0CZL,MAAM,CAACG,EAAP,CAAUE,oBA1CE,sCA8CZL,MAAM,CAACG,EAAP,CAAUE,oBA9CE,wiFAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { inputStyleNeutral, inputStyleFocus } from './base';\nimport { font } from '../font';\nimport { COLORS } from '../colors-values';\nimport { breakpoint } from '../breakpoint';\n\nexport const inputControl = css`\n\tdisplay: block;\n\tfont-family: ${ font( 'default.fontFamily' ) };\n\tpadding: 6px 8px;\n\t${ inputStyleNeutral };\n\n\t/* Fonts smaller than 16px causes mobile safari to zoom. */\n\tfont-size: ${ font( 'mobileTextMinFontSize' ) };\n\t/* Override core line-height. To be reviewed. */\n\tline-height: normal;\n\n\t${ breakpoint( 'small' ) } {\n\t\tfont-size: ${ font( 'default.fontSize' ) };\n\t\t/* Override core line-height. To be reviewed. */\n\t\tline-height: normal;\n\t}\n\n\t&:focus {\n\t\t${ inputStyleFocus }\n\t}\n\n\t// Use opacity to work in various editor styles.\n\t&::-webkit-input-placeholder {\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t&::-moz-placeholder {\n\t\topacity: 1; // Necessary because Firefox reduces this from 1.\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t&:-ms-input-placeholder {\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t.is-dark-theme & {\n\t\t&::-webkit-input-placeholder {\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\n\t\t&::-moz-placeholder {\n\t\t\topacity: 1; // Necessary because Firefox reduces this from 1.\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\n\t\t&:-ms-input-placeholder {\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\t}\n`;\n"]}

package/build-style/style-rtl.css

@@ -653,6 +653,12 @@ svg.components-checkbox-control__indeterminate {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
+  position: relative;
+  z-index: 1;
+}
+.components-circular-option-picker > *:not(.components-circular-option-picker__swatches) {
+  position: relative;
+  z-index: 0;
 }
 
 .components-circular-option-picker__option-wrapper {
@@ -783,6 +789,7 @@ svg.components-checkbox-control__indeterminate {
   border-radius: 50%;
   display: inline-block;
   padding: 0;
+  background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
 .components-combobox-control {
@@ -868,23 +875,6 @@ input.components-combobox-control__input[type=text]:focus {
   padding: 0;
 }
 
-.components-color-list-picker,
-.components-color-list-picker__swatch-button {
-  width: 100%;
-}
-
-.components-color-list-picker__color-picker {
-  margin: 8px 0;
-}
-
-.components-color-list-picker__swatch-button {
-  padding: 6px;
-}
-
-.components-color-list-picker__swatch-color {
-  margin: 2px;
-}
-
 .components-color-palette__custom-color {
   position: relative;
   border: none;
@@ -922,14 +912,21 @@ input.components-combobox-control__input[type=text]:focus {
   margin-bottom: 24px;
 }
 
-.components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
-  opacity: 0.4;
-}
-
 .components-custom-gradient-picker__gradient-bar {
   border-radius: 2px;
   width: 100%;
   height: 48px;
+  position: relative;
+  z-index: 1;
+}
+.components-custom-gradient-picker__gradient-bar.has-gradient {
+  background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
+  background-position: 0 0, 12px 12px;
+  background-size: calc(2 * 12px) calc(2 * 12px);
+}
+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__gradient-bar-background {
+  position: absolute;
+  inset: 0;
 }
 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container {
   position: relative;
@@ -998,6 +995,11 @@ input.components-combobox-control__input[type=text]:focus {
   border-radius: 2px;
 }
 
+.components-custom-gradient-picker__ui-line {
+  position: relative;
+  z-index: 0;
+}
+
 .components-custom-select-control {
   position: relative;
   font-size: 13px;
@@ -1255,6 +1257,23 @@ body.is-dragging-components-draggable {
   color: transparent;
 }
 
+.components-color-list-picker,
+.components-color-list-picker__swatch-button {
+  width: 100%;
+}
+
+.components-color-list-picker__color-picker {
+  margin: 8px 0;
+}
+
+.components-color-list-picker__swatch-button {
+  padding: 6px;
+}
+
+.components-color-list-picker__swatch-color {
+  margin: 2px;
+}
+
 .components-form-toggle {
   position: relative;
   display: inline-block;
@@ -1346,7 +1365,6 @@ body.is-dragging-components-draggable {
   /* Override core line-height. To be reviewed. */
   line-height: normal;
   width: 100%;
-  margin: 0 0 8px 0;
   padding: 0;
   cursor: text;
 }
@@ -1416,12 +1434,6 @@ body.is-dragging-components-draggable {
   width: auto;
 }
 
-.components-form-token-field__help {
-  font-size: 12px;
-  font-style: normal;
-  color: #757575;
-}
-
 .components-form-token-field__token {
   font-size: 13px;
   display: flex;

package/build-style/style.css

@@ -653,6 +653,12 @@ svg.components-checkbox-control__indeterminate {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
+  position: relative;
+  z-index: 1;
+}
+.components-circular-option-picker > *:not(.components-circular-option-picker__swatches) {
+  position: relative;
+  z-index: 0;
 }
 
 .components-circular-option-picker__option-wrapper {
@@ -783,6 +789,7 @@ svg.components-checkbox-control__indeterminate {
   border-radius: 50%;
   display: inline-block;
   padding: 0;
+  background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
 .components-combobox-control {
@@ -868,23 +875,6 @@ input.components-combobox-control__input[type=text]:focus {
   padding: 0;
 }
 
-.components-color-list-picker,
-.components-color-list-picker__swatch-button {
-  width: 100%;
-}
-
-.components-color-list-picker__color-picker {
-  margin: 8px 0;
-}
-
-.components-color-list-picker__swatch-button {
-  padding: 6px;
-}
-
-.components-color-list-picker__swatch-color {
-  margin: 2px;
-}
-
 .components-color-palette__custom-color {
   position: relative;
   border: none;
@@ -924,14 +914,23 @@ input.components-combobox-control__input[type=text]:focus {
   margin-bottom: 24px;
 }
 
-.components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
-  opacity: 0.4;
-}
-
 .components-custom-gradient-picker__gradient-bar {
   border-radius: 2px;
   width: 100%;
   height: 48px;
+  position: relative;
+  z-index: 1;
+}
+.components-custom-gradient-picker__gradient-bar.has-gradient {
+  /*rtl:begin:ignore*/
+  background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
+  background-position: 0 0, 12px 12px;
+  /*rtl:end:ignore*/
+  background-size: calc(2 * 12px) calc(2 * 12px);
+}
+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__gradient-bar-background {
+  position: absolute;
+  inset: 0;
 }
 .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container {
   position: relative;
@@ -1001,6 +1000,11 @@ input.components-combobox-control__input[type=text]:focus {
   border-radius: 2px;
 }
 
+.components-custom-gradient-picker__ui-line {
+  position: relative;
+  z-index: 0;
+}
+
 .components-custom-select-control {
   position: relative;
   font-size: 13px;
@@ -1258,6 +1262,23 @@ body.is-dragging-components-draggable {
   color: transparent;
 }
 
+.components-color-list-picker,
+.components-color-list-picker__swatch-button {
+  width: 100%;
+}
+
+.components-color-list-picker__color-picker {
+  margin: 8px 0;
+}
+
+.components-color-list-picker__swatch-button {
+  padding: 6px;
+}
+
+.components-color-list-picker__swatch-color {
+  margin: 2px;
+}
+
 .components-form-toggle {
   position: relative;
   display: inline-block;
@@ -1349,7 +1370,6 @@ body.is-dragging-components-draggable {
   /* Override core line-height. To be reviewed. */
   line-height: normal;
   width: 100%;
-  margin: 0 0 8px 0;
   padding: 0;
   cursor: text;
 }
@@ -1419,12 +1439,6 @@ body.is-dragging-components-draggable {
   width: auto;
 }
 
-.components-form-token-field__help {
-  font-size: 12px;
-  font-style: normal;
-  color: #757575;
-}
-
 .components-form-token-field__token {
   font-size: 13px;
   display: flex;

package/build-types/angle-picker-control/angle-circle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"angle-circle.d.ts","sourceRoot":"","sources":["../../src/angle-picker-control/angle-circle.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQhD,iBAAS,WAAW,CAAE,EACrB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,gBAAgB,EAAE,KAAK,CAAE,eA+EpD;AAmBD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"angle-circle.d.ts","sourceRoot":"","sources":["../../src/angle-picker-control/angle-circle.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQhD,iBAAS,WAAW,CAAE,EACrB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,gBAAgB,EAAE,KAAK,CAAE,eA8EpD;AAmBD,eAAe,WAAW,CAAC"}

package/build-types/angle-picker-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/angle-picker-control/index.tsx"],"names":[],"mappings":";AA0BA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAyFvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,kBAAkB;;uCAA8C,CAAC;AAE9E,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/angle-picker-control/index.tsx"],"names":[],"mappings":";AAuBA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AA+EvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,kBAAkB;;uCAA8C,CAAC;AAE9E,eAAe,kBAAkB,CAAC"}

package/build-types/angle-picker-control/styles/angle-picker-control-styles.d.ts

@@ -17,4 +17,9 @@ export declare const CircleIndicator: import("@emotion/styled").StyledComponent<
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UnitText: import("@emotion/styled").StyledComponent<import("../../text/types").Props & import("react").RefAttributes<any> & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>>, "as" | keyof import("react").RefAttributes<any> | keyof import("../../text/types").Props> & {
+    as?: keyof JSX.IntrinsicElements | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 //# sourceMappingURL=angle-picker-control-styles.d.ts.map

package/build-types/angle-picker-control/styles/angle-picker-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"angle-picker-control-styles.d.ts","sourceRoot":"","sources":["../../../src/angle-picker-control/styles/angle-picker-control-styles.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAexD,eAAO,MAAM,IAAI;;;;qEAEhB,CAAC;AAEF,eAAO,MAAM,UAAU;;;yGAQtB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;yGASlC,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAc3B,CAAC"}
+{"version":3,"file":"angle-picker-control-styles.d.ts","sourceRoot":"","sources":["../../../src/angle-picker-control/styles/angle-picker-control-styles.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAexD,eAAO,MAAM,IAAI;;;;qEAEhB,CAAC;AAEF,eAAO,MAAM,UAAU;;;yGAYtB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;yGASlC,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAW3B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;UAGpB,CAAC"}

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

@@ -1,26 +1,31 @@
+/// <reference types="react" />
 /**
- * @param {GetAnimateOptions} options
+ * Internal dependencies
+ */
+import type { AnimateProps, GetAnimateOptions } from './types';
+/**
+ * @param options
+ *
+ * @return ClassName that applies the animations
+ */
+export declare function getAnimateClassName(options: GetAnimateOptions): string | undefined;
+/**
+ * Simple interface to introduce animations to components.
+ *
+ * ```jsx
+ * import { Animate, Notice } from '@wordpress/components';
  *
- * @return {string | undefined} ClassName that applies the animations
+ * const MyAnimatedNotice = () => (
+ * 	<Animate type="slide-in" options={ { origin: 'top' } }>
+ * 		{ ( { className } ) => (
+ * 			<Notice className={ className } status="success">
+ * 				<p>Animation finished.</p>
+ * 			</Notice>
+ * 		) }
+ * 	</Animate>
+ * );
+ * ```
  */
-export function getAnimateClassName(options: GetAnimateOptions): string | undefined;
-export default function Animate({ type, options, children }: {
-    type: any;
-    options?: {} | undefined;
-    children: any;
-}): any;
-export type AppearOrigin = 'top' | 'top left' | 'top right' | 'middle' | 'middle left' | 'middle right' | 'bottom' | 'bottom left' | 'bottom right';
-export type SlideInOrigin = 'left' | 'right';
-export type AppearOptions = {
-    type: 'appear';
-    origin?: AppearOrigin;
-};
-export type SlideInOptions = {
-    type: 'slide-in';
-    origin?: SlideInOrigin;
-};
-export type LoadingOptions = {
-    type: 'loading';
-};
-export type GetAnimateOptions = AppearOptions | SlideInOptions | LoadingOptions;
+export declare function Animate({ type, options, children }: AnimateProps): JSX.Element;
+export default Animate;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animate/index.js"],"names":[],"mappings":"AAwBA;;;;GAIG;AACH,6CAJW,iBAAiB,GAEhB,MAAM,GAAG,SAAS,CAyB7B;AAGD;;;;QAIC;2BArDY,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc;4BACxH,MAAM,GAAG,OAAO;4BAChB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,MAAM,CAAC,EAAE,YAAY,CAAA;CAAE;6BACzC;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE;6BAC5C;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE;gCACnB,aAAa,GAAG,cAAc,GAAG,cAAc"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animate/index.tsx"],"names":[],"mappings":";AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAU/D;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAE,OAAO,EAAE,iBAAiB,sBAuB9D;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,OAAO,CAAE,EAAE,IAAI,EAAE,OAAY,EAAE,QAAQ,EAAE,EAAE,YAAY,eAOtE;AAED,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { Animate } from '..';
+declare const meta: ComponentMeta<typeof Animate>;
+export default meta;
+export declare const Default: ComponentStory<typeof Animate>;
+export declare const AppearTopLeft: ComponentStory<typeof Animate>;
+export declare const AppearTopRight: ComponentStory<typeof Animate>;
+export declare const AppearBottomLeft: ComponentStory<typeof Animate>;
+export declare const AppearBottomRight: ComponentStory<typeof Animate>;
+export declare const Loading: ComponentStory<typeof Animate>;
+export declare const SlideIn: ComponentStory<typeof Animate>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/animate/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAG7B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,OAAO,CAOxC,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,OAAO,CAAwB,CAAC;AAS7E,eAAO,MAAM,aAAa,EAAE,cAAc,CAAE,OAAO,OAAO,CAEzD,CAAC;AAUF,eAAO,MAAM,cAAc,EAAE,cAAc,CAAE,OAAO,OAAO,CAE1D,CAAC;AAUF,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAE,OAAO,OAAO,CAE5D,CAAC;AAUF,eAAO,MAAM,iBAAiB,EAAE,cAAc,CAAE,OAAO,OAAO,CAC1C,CAAC;AAWrB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,OAAO,CAAwB,CAAC;AAU7E,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,OAAO,CAAwB,CAAC"}

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export type AppearOptions = {
+    type: 'appear';
+    origin?: 'top' | 'top left' | 'top right' | 'middle' | 'middle left' | 'middle right' | 'bottom' | 'bottom left' | 'bottom right';
+};
+type SlideInOptions = {
+    type: 'slide-in';
+    origin?: 'left' | 'right';
+};
+type LoadingOptions = {
+    type: 'loading';
+    origin?: never;
+};
+type NoAnimationOptions = {
+    type?: never;
+    origin?: never;
+};
+export type GetAnimateOptions = AppearOptions | SlideInOptions | LoadingOptions | NoAnimationOptions;
+type DistributiveTypeAndOptions<T extends {
+    type?: any;
+}> = T extends any ? Pick<T, 'type'> & {
+    options?: Omit<T, 'type'>;
+} : never;
+export type AnimateProps = DistributiveTypeAndOptions<GetAnimateOptions> & {
+    children: (props: {
+        className?: string;
+    }) => JSX.Element;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/animate/types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,CAAC,EACJ,KAAK,GACL,UAAU,GACV,WAAW,GACX,QAAQ,GACR,aAAa,GACb,cAAc,GACd,QAAQ,GACR,aAAa,GACb,cAAc,CAAC;CAClB,CAAC;AACF,KAAK,cAAc,GAAG;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAAC;AACtE,KAAK,cAAc,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC1D,KAAK,kBAAkB,GAAG;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,iBAAiB,GAC1B,aAAa,GACb,cAAc,GACd,cAAc,GACd,kBAAkB,CAAC;AAItB,KAAK,0BAA0B,CAAE,CAAC,SAAS;IAAE,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,IAAK,CAAC,SAAS,GAAG,GACxE,IAAI,CAAE,CAAC,EAAE,MAAM,CAAE,GAAG;IAAE,OAAO,CAAC,EAAE,IAAI,CAAE,CAAC,EAAE,MAAM,CAAE,CAAA;CAAE,GACnD,KAAK,CAAC;AAET,MAAM,MAAM,YAAY,GAAG,0BAA0B,CAAE,iBAAiB,CAAE,GAAG;IAC5E,QAAQ,EAAE,CAAE,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAM,GAAG,CAAC,OAAO,CAAC;CAC3D,CAAC"}

package/build-types/color-picker/color-input.d.ts

@@ -1,14 +1,4 @@
 /// <reference types="react" />
-/**
- * External dependencies
- */
-import type { Colord } from 'colord';
-interface ColorInputProps {
-    colorType: 'hsl' | 'hex' | 'rgb';
-    color: Colord;
-    onChange: (nextColor: Colord) => void;
-    enableAlpha: boolean;
-}
+import type { ColorInputProps } from './types';
 export declare const ColorInput: ({ colorType, color, onChange, enableAlpha, }: ColorInputProps) => JSX.Element;
-export {};
 //# sourceMappingURL=color-input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../src/color-picker/color-input.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AASrC,UAAU,eAAe;IACxB,SAAS,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAE,SAAS,EAAE,MAAM,KAAM,IAAI,CAAC;IACxC,WAAW,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,iDAKpB,eAAe,gBAWjB,CAAC"}
+{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../src/color-picker/color-input.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,UAAU,iDAKpB,eAAe,gBAWjB,CAAC"}

package/build-types/color-picker/component.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
 import type { ColorType } from './types';
-export interface ColorPickerProps {
-    enableAlpha?: boolean;
-    color?: string;
-    onChange?: (color: string) => void;
-    defaultValue?: string;
-    copyFormat?: ColorType;
-}
-declare const ConnectedColorPicker: import("../ui/context").WordPressComponent<"div", ColorPickerProps & import("react").RefAttributes<any>, false>;
-export default ConnectedColorPicker;
+export declare const ColorPicker: import("../ui/context").WordPressComponent<import("react").ElementType<any>, {
+    enableAlpha?: boolean | undefined;
+    color?: string | undefined;
+    onChange?: ((color: string) => void) | undefined;
+    defaultValue?: string | undefined;
+    copyFormat?: ColorType | undefined;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "defaultValue" | "onChange" | "color" | "children" | "as" | "enableAlpha" | "copyFormat"> & import("react").RefAttributes<any>, boolean>;
+export default ColorPicker;
 //# sourceMappingURL=component.d.ts.map

package/build-types/color-picker/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/color-picker/component.tsx"],"names":[],"mappings":";AAkCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,MAAM,WAAW,gBAAgB;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,SAAS,CAAC;CACvB;AAkFD,QAAA,MAAM,oBAAoB,iHAA+C,CAAC;AAE1E,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/color-picker/component.tsx"],"names":[],"mappings":";AA8BA,OAAO,KAAK,EAAoB,SAAS,EAAE,MAAM,SAAS,CAAC;AAoF3D,eAAO,MAAM,WAAW;;;;;;wTAGvB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build-types/color-picker/hex-input.d.ts

@@ -1,13 +1,4 @@
 /// <reference types="react" />
-/**
- * External dependencies
- */
-import { Colord } from 'colord';
-interface HexInputProps {
-    color: Colord;
-    onChange: (nextColor: Colord) => void;
-    enableAlpha: boolean;
-}
+import type { HexInputProps } from './types';
 export declare const HexInput: ({ color, onChange, enableAlpha }: HexInputProps) => JSX.Element;
-export {};
 //# sourceMappingURL=hex-input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"hex-input.d.ts","sourceRoot":"","sources":["../../src/color-picker/hex-input.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,EAAU,MAAM,EAAE,MAAM,QAAQ,CAAC;AAiBxC,UAAU,aAAa;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAE,SAAS,EAAE,MAAM,KAAM,IAAI,CAAC;IACxC,WAAW,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,qCAAuC,aAAa,gBA8CxE,CAAC"}
+{"version":3,"file":"hex-input.d.ts","sourceRoot":"","sources":["../../src/color-picker/hex-input.tsx"],"names":[],"mappings":";AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,QAAQ,qCAAuC,aAAa,gBA8CxE,CAAC"}

package/build-types/color-picker/hsl-input.d.ts

@@ -1,13 +1,4 @@
 /// <reference types="react" />
-/**
- * External dependencies
- */
-import { Colord } from 'colord';
-interface HslInputProps {
-    color: Colord;
-    onChange: (nextColor: Colord) => void;
-    enableAlpha: boolean;
-}
+import type { HslInputProps } from './types';
 export declare const HslInput: ({ color, onChange, enableAlpha }: HslInputProps) => JSX.Element;
-export {};
 //# sourceMappingURL=hsl-input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"hsl-input.d.ts","sourceRoot":"","sources":["../../src/color-picker/hsl-input.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,EAAU,MAAM,EAAE,MAAM,QAAQ,CAAC;AAOxC,UAAU,aAAa;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAE,SAAS,EAAE,MAAM,KAAM,IAAI,CAAC;IACxC,WAAW,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,qCAAuC,aAAa,gBAsExE,CAAC"}
+{"version":3,"file":"hsl-input.d.ts","sourceRoot":"","sources":["../../src/color-picker/hsl-input.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,QAAQ,qCAAuC,aAAa,gBAsExE,CAAC"}

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

@@ -1,12 +1,4 @@
 /// <reference types="react" />
-interface InputWithSliderProps {
-    min: number;
-    max: number;
-    value: number;
-    label: string;
-    abbreviation: string;
-    onChange: (value: number) => void;
-}
+import type { InputWithSliderProps } from './types';
 export declare const InputWithSlider: ({ min, max, label, abbreviation, onChange, value, }: InputWithSliderProps) => JSX.Element;
-export {};
 //# sourceMappingURL=input-with-slider.d.ts.map

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,gBAiDtB,CAAC"}
+{"version":3,"file":"input-with-slider.d.ts","sourceRoot":"","sources":["../../src/color-picker/input-with-slider.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,eAAe,wDAOzB,oBAAoB,gBAiDtB,CAAC"}

package/build-types/color-picker/legacy-adapter.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-import { useDeprecatedProps } from './use-deprecated-props';
-type LegacyAdapterProps = Parameters<typeof useDeprecatedProps>[0];
+import type { LegacyAdapterProps } from './types';
 export declare const LegacyAdapter: (props: LegacyAdapterProps) => JSX.Element;
-export {};
 //# sourceMappingURL=legacy-adapter.d.ts.map

package/build-types/color-picker/legacy-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legacy-adapter.d.ts","sourceRoot":"","sources":["../../src/color-picker/legacy-adapter.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,KAAK,kBAAkB,GAAG,UAAU,CAAE,OAAO,kBAAkB,CAAE,CAAE,CAAC,CAAE,CAAC;AAEvE,eAAO,MAAM,aAAa,UAAY,kBAAkB,gBAEvD,CAAC"}
+{"version":3,"file":"legacy-adapter.d.ts","sourceRoot":"","sources":["../../src/color-picker/legacy-adapter.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,eAAO,MAAM,aAAa,UAAY,kBAAkB,gBAEvD,CAAC"}

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

@@ -1,10 +1,7 @@
 /// <reference types="react" />
-import { Colord } from 'colord';
-interface PickerProps {
-    color: Colord;
-    enableAlpha: boolean;
-    onChange: (nextColor: Colord) => void;
-}
+/**
+ * Internal dependencies
+ */
+import type { PickerProps } from './types';
 export declare const Picker: ({ color, enableAlpha, onChange }: PickerProps) => JSX.Element;
-export {};
 //# sourceMappingURL=picker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"picker.d.ts","sourceRoot":"","sources":["../../src/color-picker/picker.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAU,MAAM,EAAE,MAAM,QAAQ,CAAC;AAMxC,UAAU,WAAW;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAE,SAAS,EAAE,MAAM,KAAM,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,MAAM,qCAAuC,WAAW,gBAcpE,CAAC"}
+{"version":3,"file":"picker.d.ts","sourceRoot":"","sources":["../../src/color-picker/picker.tsx"],"names":[],"mappings":";AAUA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,MAAM,qCAAuC,WAAW,gBAcpE,CAAC"}

package/build-types/color-picker/rgb-input.d.ts

@@ -1,13 +1,4 @@
 /// <reference types="react" />
-/**
- * External dependencies
- */
-import { Colord } from 'colord';
-interface RgbInputProps {
-    color: Colord;
-    onChange: (nextColor: Colord) => void;
-    enableAlpha: boolean;
-}
+import type { RgbInputProps } from './types';
 export declare const RgbInput: ({ color, onChange, enableAlpha }: RgbInputProps) => JSX.Element;
-export {};
 //# sourceMappingURL=rgb-input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"rgb-input.d.ts","sourceRoot":"","sources":["../../src/color-picker/rgb-input.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,EAAU,MAAM,EAAE,MAAM,QAAQ,CAAC;AAOxC,UAAU,aAAa;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAE,SAAS,EAAE,MAAM,KAAM,IAAI,CAAC;IACxC,WAAW,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,qCAAuC,aAAa,gBAwDxE,CAAC"}
+{"version":3,"file":"rgb-input.d.ts","sourceRoot":"","sources":["../../src/color-picker/rgb-input.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,QAAQ,qCAAuC,aAAa,gBAwDxE,CAAC"}

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { ColorPicker } from '../component';
+declare const meta: ComponentMeta<typeof ColorPicker>;
+export default meta;
+export declare const Default: ComponentStory<import("../../ui/context").WordPressComponent<import("react").ElementType<any>, {
+    enableAlpha?: boolean | undefined;
+    color?: string | undefined;
+    onChange?: ((color: string) => void) | undefined;
+    defaultValue?: string | undefined;
+    copyFormat?: import("../types").ColorType | undefined;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "defaultValue" | "onChange" | "color" | "children" | "as" | "enableAlpha" | "copyFormat"> & import("react").RefAttributes<any>, boolean>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/color-picker/stories/index.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE;;GAEG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,WAAW,CAc5C,CAAC;AACF,eAAe,IAAI,CAAC;AAoBpB,eAAO,MAAM,OAAO;;;;;;yTAAsB,CAAC"}

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

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

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

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