@wordpress/components 28.0.3 → 28.2.0

package/build-module/radio-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","useInstanceId","BaseControl","VStack","jsx","_jsx","jsxs","_jsxs","RadioControl","props","label","className","selected","help","onChange","hideLabelFromVision","options","additionalProps","instanceId","id","onChangeValue","event","target","value","length","__nextHasNoMarginBottom","children","spacing","map","option","index","type","name","checked","undefined","htmlFor"],"sources":["@wordpress/components/src/radio-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { RadioControlProps } from './types';\nimport { VStack } from '../v-stack';\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n *   const [ option, setOption ] = useState( 'a' );\n *\n *   return (\n *     <RadioControl\n *       label=\"User type\"\n *       help=\"The type of the current user\"\n *       selected={ option }\n *       options={ [\n *         { label: 'Author', value: 'a' },\n *         { label: 'Editor', value: 'e' },\n *       ] }\n *       onChange={ ( value ) => setOption( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function RadioControl(\n\tprops: WordPressComponentProps< RadioControlProps, 'input', false >\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\tselected,\n\t\thelp,\n\t\tonChange,\n\t\thideLabelFromVision,\n\t\toptions = [],\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( RadioControl );\n\tconst id = `inspector-radio-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\tif ( ! options?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ clsx( className, 'components-radio-control' ) }\n\t\t>\n\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t{ options.map( ( option, index ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ `${ id }-${ index }` }\n\t\t\t\t\t\tclassName=\"components-radio-control__option\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={ `${ id }-${ index }` }\n\t\t\t\t\t\t\tclassName=\"components-radio-control__input\"\n\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\tname={ id }\n\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\t\tchecked={ option.value === selected }\n\t\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\t\t!! help ? `${ id }__help` : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tclassName=\"components-radio-control__label\"\n\t\t\t\t\t\t\thtmlFor={ `${ id }-${ index }` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default RadioControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;AAGzC,SAASC,MAAM,QAAQ,YAAY;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAxBA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAyBA,OAAO,SAASC,YAAYA,CAC3BC,KAAmE,EAClE;EACD,MAAM;IACLC,KAAK;IACLC,SAAS;IACTC,QAAQ;IACRC,IAAI;IACJC,QAAQ;IACRC,mBAAmB;IACnBC,OAAO,GAAG,EAAE;IACZ,GAAGC;EACJ,CAAC,GAAGR,KAAK;EACT,MAAMS,UAAU,GAAGjB,aAAa,CAAEO,YAAa,CAAC;EAChD,MAAMW,EAAE,GAAI,2BAA2BD,UAAY,EAAC;EACpD,MAAME,aAAa,GAAKC,KAAsC,IAC7DP,QAAQ,CAAEO,KAAK,CAACC,MAAM,CAACC,KAAM,CAAC;EAE/B,IAAK,CAAEP,OAAO,EAAEQ,MAAM,EAAG;IACxB,OAAO,IAAI;EACZ;EAEA,oBACCnB,IAAA,CAACH,WAAW;IACXuB,uBAAuB;IACvBf,KAAK,EAAGA,KAAO;IACfS,EAAE,EAAGA,EAAI;IACTJ,mBAAmB,EAAGA,mBAAqB;IAC3CF,IAAI,EAAGA,IAAM;IACbF,SAAS,EAAGX,IAAI,CAAEW,SAAS,EAAE,0BAA2B,CAAG;IAAAe,QAAA,eAE3DrB,IAAA,CAACF,MAAM;MAACwB,OAAO,EAAG,CAAG;MAAAD,QAAA,EAClBV,OAAO,CAACY,GAAG,CAAE,CAAEC,MAAM,EAAEC,KAAK,kBAC7BvB,KAAA;QAECI,SAAS,EAAC,kCAAkC;QAAAe,QAAA,gBAE5CrB,IAAA;UACCc,EAAE,EAAI,GAAGA,EAAI,IAAIW,KAAO,EAAG;UAC3BnB,SAAS,EAAC,iCAAiC;UAC3CoB,IAAI,EAAC,OAAO;UACZC,IAAI,EAAGb,EAAI;UACXI,KAAK,EAAGM,MAAM,CAACN,KAAO;UACtBT,QAAQ,EAAGM,aAAe;UAC1Ba,OAAO,EAAGJ,MAAM,CAACN,KAAK,KAAKX,QAAU;UACrC,oBACC,CAAC,CAAEC,IAAI,GAAI,GAAGM,EAAI,QAAO,GAAGe,SAC5B;UAAA,GACIjB;QAAe,CACpB,CAAC,eACFZ,IAAA;UACCM,SAAS,EAAC,iCAAiC;UAC3CwB,OAAO,EAAI,GAAGhB,EAAI,IAAIW,KAAO,EAAG;UAAAJ,QAAA,EAE9BG,MAAM,CAACnB;QAAK,CACR,CAAC;MAAA,GArBD,GAAGS,EAAI,IAAIW,KAAO,EAsBrB,CACJ;IAAC,CACI;EAAC,CACG,CAAC;AAEhB;AAEA,eAAetB,YAAY","ignoreList":[]}
+{"version":3,"names":["clsx","useInstanceId","BaseControl","VStack","jsx","_jsx","jsxs","_jsxs","RadioControl","props","label","className","selected","help","onChange","hideLabelFromVision","options","additionalProps","instanceId","id","onChangeValue","event","target","value","length","__nextHasNoMarginBottom","children","spacing","map","option","index","type","name","checked","undefined","htmlFor"],"sources":["@wordpress/components/src/radio-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context';\nimport type { RadioControlProps } from './types';\nimport { VStack } from '../v-stack';\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n *   const [ option, setOption ] = useState( 'a' );\n *\n *   return (\n *     <RadioControl\n *       label=\"User type\"\n *       help=\"The type of the current user\"\n *       selected={ option }\n *       options={ [\n *         { label: 'Author', value: 'a' },\n *         { label: 'Editor', value: 'e' },\n *       ] }\n *       onChange={ ( value ) => setOption( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function RadioControl(\n\tprops: WordPressComponentProps< RadioControlProps, 'input', false >\n) {\n\tconst {\n\t\tlabel,\n\t\tclassName,\n\t\tselected,\n\t\thelp,\n\t\tonChange,\n\t\thideLabelFromVision,\n\t\toptions = [],\n\t\t...additionalProps\n\t} = props;\n\tconst instanceId = useInstanceId( RadioControl );\n\tconst id = `inspector-radio-control-${ instanceId }`;\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.value );\n\n\tif ( ! options?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\tid={ id }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\thelp={ help }\n\t\t\tclassName={ clsx( className, 'components-radio-control' ) }\n\t\t>\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t{ options.map( ( option, index ) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={ `${ id }-${ index }` }\n\t\t\t\t\t\tclassName=\"components-radio-control__option\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={ `${ id }-${ index }` }\n\t\t\t\t\t\t\tclassName=\"components-radio-control__input\"\n\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\tname={ id }\n\t\t\t\t\t\t\tvalue={ option.value }\n\t\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\t\tchecked={ option.value === selected }\n\t\t\t\t\t\t\taria-describedby={\n\t\t\t\t\t\t\t\t!! help ? `${ id }__help` : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tclassName=\"components-radio-control__label\"\n\t\t\t\t\t\t\thtmlFor={ `${ id }-${ index }` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t) ) }\n\t\t\t</VStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default RadioControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;AAGzC,SAASC,MAAM,QAAQ,YAAY;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAxBA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAyBA,OAAO,SAASC,YAAYA,CAC3BC,KAAmE,EAClE;EACD,MAAM;IACLC,KAAK;IACLC,SAAS;IACTC,QAAQ;IACRC,IAAI;IACJC,QAAQ;IACRC,mBAAmB;IACnBC,OAAO,GAAG,EAAE;IACZ,GAAGC;EACJ,CAAC,GAAGR,KAAK;EACT,MAAMS,UAAU,GAAGjB,aAAa,CAAEO,YAAa,CAAC;EAChD,MAAMW,EAAE,GAAI,2BAA2BD,UAAY,EAAC;EACpD,MAAME,aAAa,GAAKC,KAAsC,IAC7DP,QAAQ,CAAEO,KAAK,CAACC,MAAM,CAACC,KAAM,CAAC;EAE/B,IAAK,CAAEP,OAAO,EAAEQ,MAAM,EAAG;IACxB,OAAO,IAAI;EACZ;EAEA,oBACCnB,IAAA,CAACH,WAAW;IACXuB,uBAAuB;IACvBf,KAAK,EAAGA,KAAO;IACfS,EAAE,EAAGA,EAAI;IACTJ,mBAAmB,EAAGA,mBAAqB;IAC3CF,IAAI,EAAGA,IAAM;IACbF,SAAS,EAAGX,IAAI,CAAEW,SAAS,EAAE,0BAA2B,CAAG;IAAAe,QAAA,eAE3DrB,IAAA,CAACF,MAAM;MAACwB,OAAO,EAAG,CAAG;MAAAD,QAAA,EAClBV,OAAO,CAACY,GAAG,CAAE,CAAEC,MAAM,EAAEC,KAAK,kBAC7BvB,KAAA;QAECI,SAAS,EAAC,kCAAkC;QAAAe,QAAA,gBAE5CrB,IAAA;UACCc,EAAE,EAAI,GAAGA,EAAI,IAAIW,KAAO,EAAG;UAC3BnB,SAAS,EAAC,iCAAiC;UAC3CoB,IAAI,EAAC,OAAO;UACZC,IAAI,EAAGb,EAAI;UACXI,KAAK,EAAGM,MAAM,CAACN,KAAO;UACtBT,QAAQ,EAAGM,aAAe;UAC1Ba,OAAO,EAAGJ,MAAM,CAACN,KAAK,KAAKX,QAAU;UACrC,oBACC,CAAC,CAAEC,IAAI,GAAI,GAAGM,EAAI,QAAO,GAAGe,SAC5B;UAAA,GACIjB;QAAe,CACpB,CAAC,eACFZ,IAAA;UACCM,SAAS,EAAC,iCAAiC;UAC3CwB,OAAO,EAAI,GAAGhB,EAAI,IAAIW,KAAO,EAAG;UAAAJ,QAAA,EAE9BG,MAAM,CAACnB;QAAK,CACR,CAAC;MAAA,GArBD,GAAGS,EAAI,IAAIW,KAAO,EAsBrB,CACJ;IAAC,CACI;EAAC,CACG,CAAC;AAEhB;AAEA,eAAetB,YAAY","ignoreList":[]}

package/build-style/style-rtl.css

@@ -490,6 +490,7 @@ p + .components-button.is-tertiary {
 }
 .components-checkbox-control {
   --checkbox-input-size: 24px;
+  --checkbox-input-margin: 8px;
 }
 @media (min-width: 600px) {
   .components-checkbox-control {
@@ -633,7 +634,7 @@ p + .components-button.is-tertiary {
 .components-checkbox-control__input-container {
   position: relative;
   display: inline-block;
-  margin-left: 12px;
+  margin-left: var(--checkbox-input-margin);
   vertical-align: middle;
   width: var(--checkbox-input-size);
   aspect-ratio: 1;
@@ -664,7 +665,7 @@ svg.components-checkbox-control__indeterminate {
 
 .components-checkbox-control__help {
   display: inline-block;
-  margin-inline-start: calc(var(--checkbox-input-size) + 12px);
+  margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
 }
 
 .components-circular-option-picker {
@@ -1172,8 +1173,7 @@ body.is-dragging-components-draggable {
   opacity: 1;
   visibility: visible;
 }
-
-.components-drop-zone__content {
+.components-drop-zone .components-drop-zone__content {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -1188,6 +1188,31 @@ body.is-dragging-components-draggable {
   z-index: 50;
   text-align: center;
   color: #fff;
+  opacity: 0;
+  pointer-events: none;
+}
+.components-drop-zone .components-drop-zone__content-inner {
+  opacity: 0;
+  transform: scale(0.9);
+}
+.components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+@media (prefers-reduced-motion) {
+  .components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content {
+    transition: none;
+  }
+}
+.components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content-inner {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out 0.1s;
+}
+@media (prefers-reduced-motion) {
+  .components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content-inner {
+    transition: none;
+  }
 }
 
 .components-drop-zone__content-icon,
@@ -2643,7 +2668,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   min-width: 24px;
   max-width: 24px;
   display: inline-flex;
-  margin: 0 0 0 6px;
+  margin: 0 0 0 8px;
   padding: 0;
   appearance: none;
   cursor: pointer;

package/build-style/style.css

@@ -490,6 +490,7 @@ p + .components-button.is-tertiary {
 }
 .components-checkbox-control {
   --checkbox-input-size: 24px;
+  --checkbox-input-margin: 8px;
 }
 @media (min-width: 600px) {
   .components-checkbox-control {
@@ -633,7 +634,7 @@ p + .components-button.is-tertiary {
 .components-checkbox-control__input-container {
   position: relative;
   display: inline-block;
-  margin-right: 12px;
+  margin-right: var(--checkbox-input-margin);
   vertical-align: middle;
   width: var(--checkbox-input-size);
   aspect-ratio: 1;
@@ -664,7 +665,7 @@ svg.components-checkbox-control__indeterminate {
 
 .components-checkbox-control__help {
   display: inline-block;
-  margin-inline-start: calc(var(--checkbox-input-size) + 12px);
+  margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
 }
 
 .components-circular-option-picker {
@@ -1177,8 +1178,7 @@ body.is-dragging-components-draggable {
   opacity: 1;
   visibility: visible;
 }
-
-.components-drop-zone__content {
+.components-drop-zone .components-drop-zone__content {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -1193,6 +1193,31 @@ body.is-dragging-components-draggable {
   z-index: 50;
   text-align: center;
   color: #fff;
+  opacity: 0;
+  pointer-events: none;
+}
+.components-drop-zone .components-drop-zone__content-inner {
+  opacity: 0;
+  transform: scale(0.9);
+}
+.components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+@media (prefers-reduced-motion) {
+  .components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content {
+    transition: none;
+  }
+}
+.components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content-inner {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out 0.1s;
+}
+@media (prefers-reduced-motion) {
+  .components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content-inner {
+    transition: none;
+  }
 }
 
 .components-drop-zone__content-icon,
@@ -2652,7 +2677,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   min-width: 24px;
   max-width: 24px;
   display: inline-flex;
-  margin: 0 6px 0 0;
+  margin: 0 8px 0 0;
   padding: 0;
   appearance: none;
   cursor: pointer;

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/checkbox-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AACH,OAAO,eAAe,MAAM,IAAI,CAAC;AAIjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,eAAe,CAmBvC,CAAC;AACF,eAAe,IAAI,CAAC;AAoBpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,eAAe,CAEpD,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAE,OAAO,eAAe,CAgD1D,CAAC;AAMF;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,OAAO,CAAE,OAAO,eAAe,CA4B5D,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/checkbox-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AACH,OAAO,eAAe,MAAM,IAAI,CAAC;AAIjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,eAAe,CAmBvC,CAAC;AACF,eAAe,IAAI,CAAC;AAoBpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,eAAe,CAEpD,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAE,OAAO,eAAe,CAgD1D,CAAC;AAMF;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,OAAO,CAAE,OAAO,eAAe,CA+B5D,CAAC"}

package/build-types/custom-select-control/stories/index.story.d.ts

@@ -26,6 +26,21 @@ declare const _default: {
                 type: string;
             };
         };
+        onChange: {
+            control: {
+                type: null;
+            };
+        };
+        value: {
+            control: {
+                type: null;
+            };
+        };
+    };
+    parameters: {
+        actions: {
+            argTypesRegex: string;
+        };
     };
 };
 export default _default;

package/build-types/custom-select-control/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/custom-select-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;GAEG;AACH,OAAO,mBAAmB,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;AAErC,wBAaE;AAEF,eAAO,MAAM,OAAO,EAAE,OAAwC,CAAC;AA4B/D,eAAO,MAAM,cAAc,EAAE,OAAwC,CAAC;AAmBtE,eAAO,MAAM,SAAS,EAAE,OAAwC,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/custom-select-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOhD;;GAEG;AACH,OAAO,mBAAmB,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAErC,wBAkBE;AAqBF,eAAO,MAAM,OAAO,EAAE,OAA6B,CAAC;AA4BpD,eAAO,MAAM,cAAc,EAAE,OAA6B,CAAC;AAmB3D,eAAO,MAAM,SAAS,EAAE,OAA6B,CAAC"}

package/build-types/custom-select-control-v2/legacy-component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom-select-control-v2/legacy-component/index.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAGxD,iBAAS,mBAAmB,CAAE,KAAK,EAAE,uBAAuB,+BA2G3D;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom-select-control-v2/legacy-component/index.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAGxD,iBAAS,mBAAmB,CAAE,KAAK,EAAE,uBAAuB,+BAmH3D;AAED,eAAe,mBAAmB,CAAC"}

package/build-types/custom-select-control-v2/styles.d.ts

@@ -8,6 +8,10 @@ export declare const WithHintWrapper: import("@emotion/styled").StyledComponent<
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SelectedExperimentalHintWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SelectedExperimentalHintItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/build-types/custom-select-control-v2/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/custom-select-control-v2/styles.ts"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAQ1C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAItD,eAAO,MAAM,eAAe;;;yGAI3B,CAAC;AAEF,eAAO,MAAM,4BAA4B;;;2GAGxC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;2GAIhC,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;UAMvB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;UAOZ,YAAa,sBAAsB,CAAE,MAAM,CAAE,CAAE;yBAChC,OAAO;UA2C1B,CAAC;AAEJ,eAAO,MAAM,aAAa;;;;;;;;;UAQzB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;UAUtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;UAK7B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/custom-select-control-v2/styles.ts"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAS1C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAUtD,eAAO,MAAM,eAAe;;;yGAI3B,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;yGAE3C,CAAC;AAEF,eAAO,MAAM,4BAA4B;;;2GAGxC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;2GAIhC,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;UAMvB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;UAOZ,YAAa,sBAAsB,CAAE,MAAM,CAAE,CAAE;yBAChC,OAAO;UA4C1B,CAAC;AAEJ,eAAO,MAAM,aAAa;;;;;;;;;UAQzB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;UAUtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;UAK7B,CAAC"}

package/build-types/custom-select-control-v2/types.d.ts

@@ -64,6 +64,7 @@ type LegacyOption = {
     style?: React.CSSProperties;
     className?: string;
     __experimentalHint?: string;
+    [key: string]: any;
 };
 /**
  * The legacy object returned from the onChange event.

package/build-types/custom-select-control-v2/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/custom-select-control-v2/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/custom-select-control-v2/types.ts"],"names":[],"mappings":"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"}

package/build-types/drop-zone/index.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+/**
+ * Internal dependencies
+ */
 import type { DropZoneProps } from './types';
 import type { WordPressComponentProps } from '../context';
 /**

package/build-types/drop-zone/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/drop-zone/index.tsx"],"names":[],"mappings":";AAwBA,OAAO,KAAK,EAAY,aAAa,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAmE1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAE,EAClC,SAAS,EACT,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,GAAG,SAAS,EACZ,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAE,+BA6ExD;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/drop-zone/index.tsx"],"names":[],"mappings":";AAcA;;GAEG;AACH,OAAO,KAAK,EAAY,aAAa,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAE,EAClC,SAAS,EACT,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,GAAG,SAAS,EACZ,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAE,+BA0FxD;AAED,eAAe,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.0.3",
+	"version": "28.2.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,23 +43,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.0.1",
-		"@wordpress/compose": "^7.0.1",
-		"@wordpress/date": "^5.0.1",
-		"@wordpress/deprecated": "^4.0.1",
-		"@wordpress/dom": "^4.0.1",
-		"@wordpress/element": "^6.0.1",
-		"@wordpress/escape-html": "^3.0.1",
-		"@wordpress/hooks": "^4.0.1",
-		"@wordpress/html-entities": "^4.0.1",
-		"@wordpress/i18n": "^5.0.1",
-		"@wordpress/icons": "^10.0.2",
-		"@wordpress/is-shallow-equal": "^5.0.1",
-		"@wordpress/keycodes": "^4.0.1",
-		"@wordpress/primitives": "^4.0.1",
-		"@wordpress/private-apis": "^1.0.2",
-		"@wordpress/rich-text": "^7.0.2",
-		"@wordpress/warning": "^3.0.1",
+		"@wordpress/a11y": "^4.2.0",
+		"@wordpress/compose": "^7.2.0",
+		"@wordpress/date": "^5.2.0",
+		"@wordpress/deprecated": "^4.2.0",
+		"@wordpress/dom": "^4.2.0",
+		"@wordpress/element": "^6.2.0",
+		"@wordpress/escape-html": "^3.2.0",
+		"@wordpress/hooks": "^4.2.0",
+		"@wordpress/html-entities": "^4.2.0",
+		"@wordpress/i18n": "^5.2.0",
+		"@wordpress/icons": "^10.2.0",
+		"@wordpress/is-shallow-equal": "^5.2.0",
+		"@wordpress/keycodes": "^4.2.0",
+		"@wordpress/primitives": "^4.2.0",
+		"@wordpress/private-apis": "^1.2.0",
+		"@wordpress/rich-text": "^7.2.0",
+		"@wordpress/warning": "^3.2.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9dd5f8dcfa4fc7242e5d48be20ee789ad087b432"
+	"gitHead": "aa5b14bb5bdbb8d8a02914e154c3bc1c2f18ace6"
 }

package/src/checkbox-control/stories/index.story.tsx

@@ -142,6 +142,8 @@ export const WithCustomLabel: StoryFn< typeof CheckboxControl > = ( {
 					setChecked( v );
 					onChange( v );
 				} }
+				// Disable reason: For simplicity of the code snippet.
+				// eslint-disable-next-line no-restricted-syntax
 				id="my-checkbox-with-custom-label"
 				aria-describedby="my-custom-description"
 			/>
@@ -149,6 +151,7 @@ export const WithCustomLabel: StoryFn< typeof CheckboxControl > = ( {
 				<label htmlFor="my-checkbox-with-custom-label">
 					My custom label
 				</label>
+				{ /* eslint-disable-next-line no-restricted-syntax */ }
 				<div id="my-custom-description" style={ { fontSize: 13 } }>
 					A custom description.
 				</div>

package/src/checkbox-control/style.scss

@@ -5,6 +5,8 @@
 	@include break-small() {
 		--checkbox-input-size: 20px;
 	}
+
+	--checkbox-input-margin: #{$grid-unit-10};
 }
 
 .components-checkbox-control__label {
@@ -55,7 +57,7 @@
 .components-checkbox-control__input-container {
 	position: relative;
 	display: inline-block;
-	margin-right: $grid-unit-15;
+	margin-right: var(--checkbox-input-margin);
 	vertical-align: middle;
 	width: var(--checkbox-input-size);
 	aspect-ratio: 1;
@@ -84,5 +86,5 @@ svg.components-checkbox-control__indeterminate {
 
 .components-checkbox-control__help {
 	display: inline-block;
-	margin-inline-start: calc(var(--checkbox-input-size) + #{$grid-unit-15});
+	margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
 }

package/src/custom-select-control/stories/index.story.tsx

@@ -3,6 +3,11 @@
  */
 import type { StoryFn } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -20,10 +25,34 @@ export default {
 				type: 'radio',
 			},
 		},
+		onChange: { control: { type: null } },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 	},
 };
 
-export const Default: StoryFn = CustomSelectControl.bind( {} );
+const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
+	const [ value, setValue ] = useState( props.options[ 0 ] );
+
+	const onChange: React.ComponentProps<
+		typeof CustomSelectControl
+	>[ 'onChange' ] = ( changeObject: { selectedItem: any } ) => {
+		setValue( changeObject.selectedItem );
+		props.onChange?.( changeObject );
+	};
+
+	return (
+		<CustomSelectControl
+			{ ...props }
+			onChange={ onChange }
+			value={ value }
+		/>
+	);
+};
+
+export const Default: StoryFn = Template.bind( {} );
 Default.args = {
 	label: 'Label',
 	options: [
@@ -51,7 +80,7 @@ Default.args = {
 	],
 };
 
-export const WithLongLabels: StoryFn = CustomSelectControl.bind( {} );
+export const WithLongLabels: StoryFn = Template.bind( {} );
 WithLongLabels.args = {
 	...Default.args,
 	options: [
@@ -70,7 +99,7 @@ WithLongLabels.args = {
 	],
 };
 
-export const WithHints: StoryFn = CustomSelectControl.bind( {} );
+export const WithHints: StoryFn = Template.bind( {} );
 WithHints.args = {
 	...Default.args,
 	options: [