@wordpress/components 19.7.0-next.e230fbab09.0 → 19.7.0

package/build/box-control/utils.js

@@ -71,6 +71,7 @@ function mode(arr) {
  * Gets the 'all' input value and unit from values data.
  *
  * @param {Object} values         Box values.
+ * @param {Object} selectedUnits  Box units.
  * @param {Array}  availableSides Available box sides to evaluate.
  *
  * @return {string} A value + unit for the 'all' input.
@@ -79,17 +80,17 @@ function mode(arr) {
 
 function getAllValue() {
   let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let availableSides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ALL_SIDES;
+  let selectedUnits = arguments.length > 1 ? arguments[1] : undefined;
+  let availableSides = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ALL_SIDES;
   const sides = normalizeSides(availableSides);
   const parsedQuantitiesAndUnits = sides.map(side => (0, _utils.parseQuantityAndUnitFromRawValue)(values[side]));
-  const allValues = parsedQuantitiesAndUnits.map(value => {
+  const allParsedQuantities = parsedQuantitiesAndUnits.map(value => {
     var _value$;
 
     return (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : '';
   });
-  const allUnits = parsedQuantitiesAndUnits.map(value => value[1]);
-  const value = allValues.every(v => v === allValues[0]) ? allValues[0] : '';
-  const unit = mode(allUnits);
+  const allParsedUnits = parsedQuantitiesAndUnits.map(value => value[1]);
+  const commonQuantity = allParsedQuantities.every(v => v === allParsedQuantities[0]) ? allParsedQuantities[0] : '';
   /**
    * The isNumber check is important. On reset actions, the incoming value
    * may be null or an empty string.
@@ -100,8 +101,19 @@ function getAllValue() {
    * simple truthy check.
    */
 
-  const allValue = (0, _lodash.isNumber)(value) ? `${value}${unit}` : undefined;
-  return allValue;
+  let commonUnit;
+
+  if ((0, _lodash.isNumber)(commonQuantity)) {
+    commonUnit = mode(allParsedUnits);
+  } else {
+    var _getAllUnitFallback;
+
+    // Set meaningful unit selection if no commonQuantity and user has previously
+    // selected units without assigning values while controls were unlinked.
+    commonUnit = (_getAllUnitFallback = getAllUnitFallback(selectedUnits)) !== null && _getAllUnitFallback !== void 0 ? _getAllUnitFallback : mode(allParsedUnits);
+  }
+
+  return [commonQuantity, commonUnit].join('');
 }
 /**
  * Determine the most common unit selection to use as a fallback option.
@@ -122,8 +134,9 @@ function getAllUnitFallback(selectedUnits) {
 /**
  * Checks to determine if values are mixed.
  *
- * @param {Object} values Box values.
- * @param {Array}  sides  Available box sides to evaluate.
+ * @param {Object} values        Box values.
+ * @param {Object} selectedUnits Box units.
+ * @param {Array}  sides         Available box sides to evaluate.
  *
  * @return {boolean} Whether values are mixed.
  */
@@ -131,8 +144,9 @@ function getAllUnitFallback(selectedUnits) {
 
 function isValuesMixed() {
   let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let sides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ALL_SIDES;
-  const allValue = getAllValue(values, sides);
+  let selectedUnits = arguments.length > 1 ? arguments[1] : undefined;
+  let sides = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ALL_SIDES;
+  const allValue = getAllValue(values, selectedUnits, sides);
   const isMixed = isNaN(parseFloat(allValue));
   return isMixed;
 }

package/build/box-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/utils.js"],"names":["LABELS","all","top","bottom","left","right","mixed","vertical","horizontal","DEFAULT_VALUES","undefined","DEFAULT_VISUALIZER_VALUES","ALL_SIDES","mode","arr","sort","a","b","filter","v","length","pop","getAllValue","values","availableSides","sides","normalizeSides","parsedQuantitiesAndUnits","map","side","allValues","value","allUnits","every","unit","allValue","getAllUnitFallback","selectedUnits","filteredUnits","Object","Boolean","isValuesMixed","isMixed","isNaN","parseFloat","isValuesDefined","test","getInitialSide","isLinked","splitOnAxis","initialSide","filteredSides","includes","push","newSides"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty, isNumber } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\n\nexport const LABELS = {\n\tall: __( 'All' ),\n\ttop: __( 'Top' ),\n\tbottom: __( 'Bottom' ),\n\tleft: __( 'Left' ),\n\tright: __( 'Right' ),\n\tmixed: __( 'Mixed' ),\n\tvertical: __( 'Vertical' ),\n\thorizontal: __( 'Horizontal' ),\n};\n\nexport const DEFAULT_VALUES = {\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nexport const DEFAULT_VISUALIZER_VALUES = {\n\ttop: false,\n\tright: false,\n\tbottom: false,\n\tleft: false,\n};\n\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\n\n/**\n * Gets an items with the most occurrence within an array\n * https://stackoverflow.com/a/20762713\n *\n * @param {Array<any>} arr Array of items to check.\n * @return {any} The item with the most occurrences.\n */\nfunction mode( arr ) {\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tarr.filter( ( v ) => v === a ).length -\n\t\t\t\tarr.filter( ( v ) => v === b ).length\n\t\t)\n\t\t.pop();\n}\n\n/**\n * Gets the 'all' input value and unit from values data.\n *\n * @param {Object} values         Box values.\n * @param {Array}  availableSides Available box sides to evaluate.\n *\n * @return {string} A value + unit for the 'all' input.\n */\nexport function getAllValue( values = {}, availableSides = ALL_SIDES ) {\n\tconst sides = normalizeSides( availableSides );\n\tconst parsedQuantitiesAndUnits = sides.map( ( side ) =>\n\t\tparseQuantityAndUnitFromRawValue( values[ side ] )\n\t);\n\tconst allValues = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );\n\n\tconst value = allValues.every( ( v ) => v === allValues[ 0 ] )\n\t\t? allValues[ 0 ]\n\t\t: '';\n\tconst unit = mode( allUnits );\n\n\t/**\n\t * The isNumber check is important. On reset actions, the incoming value\n\t * may be null or an empty string.\n\t *\n\t * Also, the value may also be zero (0), which is considered a valid unit value.\n\t *\n\t * isNumber() is more specific for these cases, rather than relying on a\n\t * simple truthy check.\n\t */\n\tconst allValue = isNumber( value ) ? `${ value }${ unit }` : undefined;\n\n\treturn allValue;\n}\n\n/**\n * Determine the most common unit selection to use as a fallback option.\n *\n * @param {Object} selectedUnits Current unit selections for individual sides.\n * @return {string} Most common unit selection.\n */\nexport function getAllUnitFallback( selectedUnits ) {\n\tif ( ! selectedUnits || typeof selectedUnits !== 'object' ) {\n\t\treturn undefined;\n\t}\n\n\tconst filteredUnits = Object.values( selectedUnits ).filter( Boolean );\n\n\treturn mode( filteredUnits );\n}\n\n/**\n * Checks to determine if values are mixed.\n *\n * @param {Object} values Box values.\n * @param {Array}  sides  Available box sides to evaluate.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesMixed( values = {}, sides = ALL_SIDES ) {\n\tconst allValue = getAllValue( values, sides );\n\tconst isMixed = isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param {Object} values Box values.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesDefined( values ) {\n\treturn (\n\t\tvalues !== undefined &&\n\t\t! isEmpty(\n\t\t\tObject.values( values ).filter(\n\t\t\t\t// Switching units when input is empty causes values only\n\t\t\t\t// containing units. This gives false positive on mixed values\n\t\t\t\t// unless filtered.\n\t\t\t\t( value ) => !! value && /\\d/.test( value )\n\t\t\t)\n\t\t)\n\t);\n}\n\n/**\n * Get initial selected side, factoring in whether the sides are linked,\n * and whether the vertical / horizontal directions are grouped via splitOnAxis.\n *\n * @param {boolean} isLinked    Whether the box control's fields are linked.\n * @param {boolean} splitOnAxis Whether splitting by horizontal or vertical axis.\n * @return {string} The initial side.\n */\nexport function getInitialSide( isLinked, splitOnAxis ) {\n\tlet initialSide = 'all';\n\n\tif ( ! isLinked ) {\n\t\tinitialSide = splitOnAxis ? 'vertical' : 'top';\n\t}\n\n\treturn initialSide;\n}\n\n/**\n * Normalizes provided sides configuration to an array containing only top,\n * right, bottom and left. This essentially just maps `horizontal` or `vertical`\n * to their appropriate sides to facilitate correctly determining value for\n * all input control.\n *\n * @param {Array} sides Available sides for box control.\n * @return {Array} Normalized sides configuration.\n */\nexport function normalizeSides( sides ) {\n\tconst filteredSides = [];\n\n\tif ( ! sides?.length ) {\n\t\treturn ALL_SIDES;\n\t}\n\n\tif ( sides.includes( 'vertical' ) ) {\n\t\tfilteredSides.push( ...[ 'top', 'bottom' ] );\n\t} else if ( sides.includes( 'horizontal' ) ) {\n\t\tfilteredSides.push( ...[ 'left', 'right' ] );\n\t} else {\n\t\tconst newSides = ALL_SIDES.filter( ( side ) => sides.includes( side ) );\n\t\tfilteredSides.push( ...newSides );\n\t}\n\n\treturn filteredSides;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/utils.js"],"names":["LABELS","all","top","bottom","left","right","mixed","vertical","horizontal","DEFAULT_VALUES","undefined","DEFAULT_VISUALIZER_VALUES","ALL_SIDES","mode","arr","sort","a","b","filter","v","length","pop","getAllValue","values","selectedUnits","availableSides","sides","normalizeSides","parsedQuantitiesAndUnits","map","side","allParsedQuantities","value","allParsedUnits","commonQuantity","every","commonUnit","getAllUnitFallback","join","filteredUnits","Object","Boolean","isValuesMixed","allValue","isMixed","isNaN","parseFloat","isValuesDefined","test","getInitialSide","isLinked","splitOnAxis","initialSide","filteredSides","includes","push","newSides"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty, isNumber } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\n\nexport const LABELS = {\n\tall: __( 'All' ),\n\ttop: __( 'Top' ),\n\tbottom: __( 'Bottom' ),\n\tleft: __( 'Left' ),\n\tright: __( 'Right' ),\n\tmixed: __( 'Mixed' ),\n\tvertical: __( 'Vertical' ),\n\thorizontal: __( 'Horizontal' ),\n};\n\nexport const DEFAULT_VALUES = {\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nexport const DEFAULT_VISUALIZER_VALUES = {\n\ttop: false,\n\tright: false,\n\tbottom: false,\n\tleft: false,\n};\n\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\n\n/**\n * Gets an items with the most occurrence within an array\n * https://stackoverflow.com/a/20762713\n *\n * @param {Array<any>} arr Array of items to check.\n * @return {any} The item with the most occurrences.\n */\nfunction mode( arr ) {\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tarr.filter( ( v ) => v === a ).length -\n\t\t\t\tarr.filter( ( v ) => v === b ).length\n\t\t)\n\t\t.pop();\n}\n\n/**\n * Gets the 'all' input value and unit from values data.\n *\n * @param {Object} values         Box values.\n * @param {Object} selectedUnits  Box units.\n * @param {Array}  availableSides Available box sides to evaluate.\n *\n * @return {string} A value + unit for the 'all' input.\n */\nexport function getAllValue(\n\tvalues = {},\n\tselectedUnits,\n\tavailableSides = ALL_SIDES\n) {\n\tconst sides = normalizeSides( availableSides );\n\tconst parsedQuantitiesAndUnits = sides.map( ( side ) =>\n\t\tparseQuantityAndUnitFromRawValue( values[ side ] )\n\t);\n\tconst allParsedQuantities = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allParsedUnits = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 1 ]\n\t);\n\n\tconst commonQuantity = allParsedQuantities.every(\n\t\t( v ) => v === allParsedQuantities[ 0 ]\n\t)\n\t\t? allParsedQuantities[ 0 ]\n\t\t: '';\n\n\t/**\n\t * The isNumber check is important. On reset actions, the incoming value\n\t * may be null or an empty string.\n\t *\n\t * Also, the value may also be zero (0), which is considered a valid unit value.\n\t *\n\t * isNumber() is more specific for these cases, rather than relying on a\n\t * simple truthy check.\n\t */\n\tlet commonUnit;\n\tif ( isNumber( commonQuantity ) ) {\n\t\tcommonUnit = mode( allParsedUnits );\n\t} else {\n\t\t// Set meaningful unit selection if no commonQuantity and user has previously\n\t\t// selected units without assigning values while controls were unlinked.\n\t\tcommonUnit =\n\t\t\tgetAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );\n\t}\n\n\treturn [ commonQuantity, commonUnit ].join( '' );\n}\n\n/**\n * Determine the most common unit selection to use as a fallback option.\n *\n * @param {Object} selectedUnits Current unit selections for individual sides.\n * @return {string} Most common unit selection.\n */\nexport function getAllUnitFallback( selectedUnits ) {\n\tif ( ! selectedUnits || typeof selectedUnits !== 'object' ) {\n\t\treturn undefined;\n\t}\n\n\tconst filteredUnits = Object.values( selectedUnits ).filter( Boolean );\n\n\treturn mode( filteredUnits );\n}\n\n/**\n * Checks to determine if values are mixed.\n *\n * @param {Object} values        Box values.\n * @param {Object} selectedUnits Box units.\n * @param {Array}  sides         Available box sides to evaluate.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst isMixed = isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param {Object} values Box values.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesDefined( values ) {\n\treturn (\n\t\tvalues !== undefined &&\n\t\t! isEmpty(\n\t\t\tObject.values( values ).filter(\n\t\t\t\t// Switching units when input is empty causes values only\n\t\t\t\t// containing units. This gives false positive on mixed values\n\t\t\t\t// unless filtered.\n\t\t\t\t( value ) => !! value && /\\d/.test( value )\n\t\t\t)\n\t\t)\n\t);\n}\n\n/**\n * Get initial selected side, factoring in whether the sides are linked,\n * and whether the vertical / horizontal directions are grouped via splitOnAxis.\n *\n * @param {boolean} isLinked    Whether the box control's fields are linked.\n * @param {boolean} splitOnAxis Whether splitting by horizontal or vertical axis.\n * @return {string} The initial side.\n */\nexport function getInitialSide( isLinked, splitOnAxis ) {\n\tlet initialSide = 'all';\n\n\tif ( ! isLinked ) {\n\t\tinitialSide = splitOnAxis ? 'vertical' : 'top';\n\t}\n\n\treturn initialSide;\n}\n\n/**\n * Normalizes provided sides configuration to an array containing only top,\n * right, bottom and left. This essentially just maps `horizontal` or `vertical`\n * to their appropriate sides to facilitate correctly determining value for\n * all input control.\n *\n * @param {Array} sides Available sides for box control.\n * @return {Array} Normalized sides configuration.\n */\nexport function normalizeSides( sides ) {\n\tconst filteredSides = [];\n\n\tif ( ! sides?.length ) {\n\t\treturn ALL_SIDES;\n\t}\n\n\tif ( sides.includes( 'vertical' ) ) {\n\t\tfilteredSides.push( ...[ 'top', 'bottom' ] );\n\t} else if ( sides.includes( 'horizontal' ) ) {\n\t\tfilteredSides.push( ...[ 'left', 'right' ] );\n\t} else {\n\t\tconst newSides = ALL_SIDES.filter( ( side ) => sides.includes( side ) );\n\t\tfilteredSides.push( ...newSides );\n\t}\n\n\treturn filteredSides;\n}\n"]}

package/build/checkbox-control/index.js

@@ -38,6 +38,7 @@ function CheckboxControl(_ref) {
     className,
     heading,
     checked,
+    indeterminate,
     help,
     onChange,
     ...props
@@ -50,6 +51,20 @@ function CheckboxControl(_ref) {
     });
   }
 
+  const [showCheckedIcon, setShowCheckedIcon] = (0, _element.useState)(false);
+  const [showIndeterminateIcon, setShowIndeterminateIcon] = (0, _element.useState)(false); // Run the following callback everytime the `ref` (and the additional
+  // dependencies) change.
+
+  const ref = (0, _compose.useRefEffect)(node => {
+    if (!node) {
+      return;
+    } // It cannot be set using an HTML attribute.
+
+
+    node.indeterminate = !!indeterminate;
+    setShowCheckedIcon(node.matches(':checked'));
+    setShowIndeterminateIcon(node.matches(':indeterminate'));
+  }, [checked, indeterminate]);
   const instanceId = (0, _compose.useInstanceId)(CheckboxControl);
   const id = `inspector-checkbox-control-${instanceId}`;
 
@@ -63,6 +78,7 @@ function CheckboxControl(_ref) {
   }, (0, _element.createElement)("span", {
     className: "components-checkbox-control__input-container"
   }, (0, _element.createElement)("input", (0, _extends2.default)({
+    ref: ref,
     id: id,
     className: "components-checkbox-control__input",
     type: "checkbox",
@@ -70,7 +86,11 @@ function CheckboxControl(_ref) {
     onChange: onChangeValue,
     checked: checked,
     "aria-describedby": !!help ? id + '__help' : undefined
-  }, props)), checked ? (0, _element.createElement)(_icons.Icon, {
+  }, props)), showIndeterminateIcon ? (0, _element.createElement)(_icons.Icon, {
+    icon: _icons.reset,
+    className: "components-checkbox-control__indeterminate",
+    role: "presentation"
+  }) : null, showCheckedIcon ? (0, _element.createElement)(_icons.Icon, {
     icon: _icons.check,
     className: "components-checkbox-control__checked",
     role: "presentation"

package/build/checkbox-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/checkbox-control/index.js"],"names":["CheckboxControl","label","className","heading","checked","help","onChange","props","alternative","since","instanceId","id","onChangeValue","event","target","undefined","check"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGe,SAASA,eAAT,OAQX;AAAA,MARqC;AACxCC,IAAAA,KADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,OAHwC;AAIxCC,IAAAA,OAJwC;AAKxCC,IAAAA,IALwC;AAMxCC,IAAAA,QANwC;AAOxC,OAAGC;AAPqC,GAQrC;;AACH,MAAKJ,OAAL,EAAe;AACd,6BAAY,qCAAZ,EAAmD;AAClDK,MAAAA,WAAW,EAAE,2CADqC;AAElDC,MAAAA,KAAK,EAAE;AAF2C,KAAnD;AAIA;;AAED,QAAMC,UAAU,GAAG,4BAAeV,eAAf,CAAnB;AACA,QAAMW,EAAE,GAAI,8BAA8BD,UAAY,EAAtD;;AACA,QAAME,aAAa,GAAKC,KAAF,IAAaP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaV,OAAf,CAA3C;;AAEA,SACC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,OADT;AAEC,IAAA,EAAE,EAAGQ,EAFN;AAGC,IAAA,IAAI,EAAGN,IAHR;AAIC,IAAA,SAAS,EAAG,yBAAY,6BAAZ,EAA2CH,SAA3C;AAJb,KAMC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC;AACC,IAAA,EAAE,EAAGS,EADN;AAEC,IAAA,SAAS,EAAC,oCAFX;AAGC,IAAA,IAAI,EAAC,UAHN;AAIC,IAAA,KAAK,EAAC,GAJP;AAKC,IAAA,QAAQ,EAAGC,aALZ;AAMC,IAAA,OAAO,EAAGR,OANX;AAOC,wBAAmB,CAAC,CAAEC,IAAH,GAAUM,EAAE,GAAG,QAAf,GAA0BI;AAP9C,KAQMR,KARN,EADD,EAWGH,OAAO,GACR,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGY,YADR;AAEC,IAAA,SAAS,EAAC,sCAFX;AAGC,IAAA,IAAI,EAAC;AAHN,IADQ,GAML,IAjBL,CAND,EAyBC;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,OAAO,EAAGL;AAFX,KAIGV,KAJH,CAzBD,CADD;AAkCA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nexport default function CheckboxControl( {\n\tlabel,\n\tclassName,\n\theading,\n\tchecked,\n\thelp,\n\tonChange,\n\t...props\n} ) {\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst instanceId = useInstanceId( CheckboxControl );\n\tconst id = `inspector-checkbox-control-${ instanceId }`;\n\tconst onChangeValue = ( event ) => onChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t\t{ checked ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</span>\n\t\t\t<label\n\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\thtmlFor={ id }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</label>\n\t\t</BaseControl>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/checkbox-control/index.js"],"names":["CheckboxControl","label","className","heading","checked","indeterminate","help","onChange","props","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","instanceId","id","onChangeValue","event","target","undefined","reset","check"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;AACA;;AACA;;AAKA;;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;AAGe,SAASA,eAAT,OASX;AAAA,MATqC;AACxCC,IAAAA,KADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,OAHwC;AAIxCC,IAAAA,OAJwC;AAKxCC,IAAAA,aALwC;AAMxCC,IAAAA,IANwC;AAOxCC,IAAAA,QAPwC;AAQxC,OAAGC;AARqC,GASrC;;AACH,MAAKL,OAAL,EAAe;AACd,6BAAY,qCAAZ,EAAmD;AAClDM,MAAAA,WAAW,EAAE,2CADqC;AAElDC,MAAAA,KAAK,EAAE;AAF2C,KAAnD;AAIA;;AAED,QAAM,CAAEC,eAAF,EAAmBC,kBAAnB,IAA0C,uBAAU,KAAV,CAAhD;AACA,QAAM,CAAEC,qBAAF,EAAyBC,wBAAzB,IAAsD,uBAC3D,KAD2D,CAA5D,CATG,CAaH;AACA;;AACA,QAAMC,GAAG,GAAG,2BACTC,IAAF,IAAY;AACX,QAAK,CAAEA,IAAP,EAAc;AACb;AACA,KAHU,CAKX;;;AACAA,IAAAA,IAAI,CAACX,aAAL,GAAqB,CAAC,CAAEA,aAAxB;AAEAO,IAAAA,kBAAkB,CAAEI,IAAI,CAACC,OAAL,CAAc,UAAd,CAAF,CAAlB;AACAH,IAAAA,wBAAwB,CAAEE,IAAI,CAACC,OAAL,CAAc,gBAAd,CAAF,CAAxB;AACA,GAXU,EAYX,CAAEb,OAAF,EAAWC,aAAX,CAZW,CAAZ;AAcA,QAAMa,UAAU,GAAG,4BAAelB,eAAf,CAAnB;AACA,QAAMmB,EAAE,GAAI,8BAA8BD,UAAY,EAAtD;;AACA,QAAME,aAAa,GAAKC,KAAF,IAAad,QAAQ,CAAEc,KAAK,CAACC,MAAN,CAAalB,OAAf,CAA3C;;AAEA,SACC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,OADT;AAEC,IAAA,EAAE,EAAGgB,EAFN;AAGC,IAAA,IAAI,EAAGb,IAHR;AAIC,IAAA,SAAS,EAAG,yBAAY,6BAAZ,EAA2CJ,SAA3C;AAJb,KAMC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC;AACC,IAAA,GAAG,EAAGa,GADP;AAEC,IAAA,EAAE,EAAGI,EAFN;AAGC,IAAA,SAAS,EAAC,oCAHX;AAIC,IAAA,IAAI,EAAC,UAJN;AAKC,IAAA,KAAK,EAAC,GALP;AAMC,IAAA,QAAQ,EAAGC,aANZ;AAOC,IAAA,OAAO,EAAGhB,OAPX;AAQC,wBAAmB,CAAC,CAAEE,IAAH,GAAUa,EAAE,GAAG,QAAf,GAA0BI;AAR9C,KASMf,KATN,EADD,EAYGK,qBAAqB,GACtB,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGW,YADR;AAEC,IAAA,SAAS,EAAC,4CAFX;AAGC,IAAA,IAAI,EAAC;AAHN,IADsB,GAMnB,IAlBL,EAmBGb,eAAe,GAChB,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGc,YADR;AAEC,IAAA,SAAS,EAAC,sCAFX;AAGC,IAAA,IAAI,EAAC;AAHN,IADgB,GAMb,IAzBL,CAND,EAiCC;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,OAAO,EAAGN;AAFX,KAIGlB,KAJH,CAjCD,CADD;AA0CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nexport default function CheckboxControl( {\n\tlabel,\n\tclassName,\n\theading,\n\tchecked,\n\tindeterminate,\n\thelp,\n\tonChange,\n\t...props\n} ) {\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] = useState(\n\t\tfalse\n\t);\n\n\t// Run the following callback everytime the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst instanceId = useInstanceId( CheckboxControl );\n\tconst id = `inspector-checkbox-control-${ instanceId }`;\n\tconst onChangeValue = ( event ) => onChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</span>\n\t\t\t<label\n\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\thtmlFor={ id }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</label>\n\t\t</BaseControl>\n\t);\n}\n"]}

package/build/color-palette/index.js

@@ -32,6 +32,10 @@ var _circularOptionPicker = _interopRequireDefault(require("../circular-option-p
 
 var _vStack = require("../v-stack");
 
+var _flex = require("../flex");
+
+var _truncate = require("../truncate");
+
 var _styles = require("./styles");
 
 // @ts-nocheck
@@ -133,6 +137,36 @@ function CustomColorPickerDropdown(_ref5) {
   }, props));
 }
 
+const extractColorNameFromCurrentValue = function (currentValue) {
+  let colors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let showMultiplePalettes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+  if (!currentValue) {
+    return '';
+  } // Normalize format of `colors` to simplify the following loop
+
+
+  const colorPalettes = showMultiplePalettes ? colors : [{
+    colors
+  }];
+
+  for (const {
+    colors: paletteColors
+  } of colorPalettes) {
+    for (const {
+      name: colorName,
+      color: colorValue
+    } of paletteColors) {
+      if ((0, _colord.colord)(currentValue).toHex() === (0, _colord.colord)(colorValue).toHex()) {
+        return colorName;
+      }
+    }
+  } // translators: shown when the user has picked a custom color (i.e not in the palette of colors).
+
+
+  return (0, _i18n.__)('Custom');
+};
+
 function ColorPalette(_ref6) {
   let {
     clearable = true,
@@ -146,7 +180,8 @@ function ColorPalette(_ref6) {
     __experimentalIsRenderedInSidebar = false
   } = _ref6;
   const clearColor = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
-  const Component = __experimentalHasMultipleOrigins && colors !== null && colors !== void 0 && colors.length ? MultiplePalettes : SinglePalette;
+  const showMultiplePalettes = __experimentalHasMultipleOrigins && (colors === null || colors === void 0 ? void 0 : colors.length);
+  const Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;
 
   const renderCustomColorPicker = () => (0, _element.createElement)(_colorPicker.ColorPicker, {
     color: value,
@@ -161,6 +196,10 @@ function ColorPalette(_ref6) {
   }
 
   const colordColor = (0, _colord.colord)(value);
+  const valueWithoutLeadingHash = value !== null && value !== void 0 && value.startsWith('#') ? value.substring(1) : value !== null && value !== void 0 ? value : '';
+  const buttonLabelName = (0, _element.useMemo)(() => extractColorNameFromCurrentValue(value, colors, showMultiplePalettes), [value, colors, showMultiplePalettes]);
+  const customColorAccessibleLabel = !!valueWithoutLeadingHash ? (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+  (0, _i18n.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, valueWithoutLeadingHash) : (0, _i18n.__)('Custom color picker.');
   return (0, _element.createElement)(_vStack.VStack, {
     spacing: 3,
     className: className
@@ -173,17 +212,27 @@ function ColorPalette(_ref6) {
         isOpen,
         onToggle
       } = _ref7;
-      return (0, _element.createElement)("button", {
+      return (0, _element.createElement)(_flex.Flex, {
+        as: 'button',
+        justify: "space-between",
+        align: "flex-start",
         className: "components-color-palette__custom-color",
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
         onClick: onToggle,
-        "aria-label": (0, _i18n.__)('Custom color picker'),
+        "aria-label": customColorAccessibleLabel,
         style: {
           background: value,
           color: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
         }
-      }, value);
+      }, (0, _element.createElement)(_flex.FlexItem, {
+        isBlock: true,
+        as: _truncate.Truncate,
+        className: "components-color-palette__custom-color-name"
+      }, buttonLabelName), (0, _element.createElement)(_flex.FlexItem, {
+        as: "span",
+        className: "components-color-palette__custom-color-value"
+      }, valueWithoutLeadingHash));
     }
   }), (0, _element.createElement)(Component, {
     clearable: clearable,

package/build/color-palette/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","map","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","dropdownPosition","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvalue === color ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName={ classnames(\n\t\t\t\t'components-color-palette__custom-color-dropdown-content',\n\t\t\t\t{\n\t\t\t\t\t'is-rendered-in-sidebar': isRenderedInSidebar,\n\t\t\t\t}\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst Component =\n\t\t__experimentalHasMultipleOrigins && colors?.length\n\t\t\t? MultiplePalettes\n\t\t\t: SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tlet dropdownPosition;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tdropdownPosition = 'bottom left';\n\t}\n\n\tconst colordColor = colord( value );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tposition={ dropdownPosition }\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ __( 'Custom color picker' ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ value }\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","map","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","colorPalettes","paletteColors","colorName","colorValue","toHex","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","dropdownPosition","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background","Truncate"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvalue === color ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName={ classnames(\n\t\t\t\t'components-color-palette__custom-color-dropdown-content',\n\t\t\t\t{\n\t\t\t\t\t'is-rendered-in-sidebar': isRenderedInSidebar,\n\t\t\t\t}\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nconst extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tif (\n\t\t\t\tcolord( currentValue ).toHex() === colord( colorValue ).toHex()\n\t\t\t) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tlet dropdownPosition;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tdropdownPosition = 'bottom left';\n\t}\n\n\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tvalueWithoutLeadingHash\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tposition={ dropdownPosition }\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}

package/build/custom-select-control/index.js

@@ -74,6 +74,8 @@ function CustomSelectControl(_ref3) {
   var _menuProps$ariaActiv;
 
   let {
+    /** Start opting into the larger default height that will become the default size in a future version. */
+    __next36pxDefaultSize = false,
     className,
     hideLabelFromVision,
     label,
@@ -141,8 +143,10 @@ function CustomSelectControl(_ref3) {
     // This is needed because some speech recognition software don't support `aria-labelledby`.
     'aria-label': label,
     'aria-labelledby': undefined,
-    className: 'components-custom-select-control__button',
-    isSmall: true,
+    className: (0, _classnames.default)('components-custom-select-control__button', {
+      'is-next-36px-default-size': __next36pxDefaultSize
+    }),
+    isSmall: !__next36pxDefaultSize,
     describedBy: getDescribedBy()
   }), itemToString(selectedItem), (0, _element.createElement)(_icons.Icon, {
     icon: _icons.chevronDown,
@@ -156,7 +160,8 @@ function CustomSelectControl(_ref3) {
     key: item.key,
     className: (0, _classnames.default)(item.className, 'components-custom-select-control__item', {
       'is-highlighted': index === highlightedIndex,
-      'has-hint': !!item.__experimentalHint
+      'has-hint': !!item.__experimentalHint,
+      'is-next-36px-default-size': __next36pxDefaultSize
     }),
     style: item.style
   }), item.name, item.__experimentalHint && (0, _element.createElement)("span", {

package/build/custom-select-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-select-control/index.js"],"names":["itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","useSelect","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","value","_selectedItem","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","getDescribedBy","menuProps","onKeyDownHandler","e","stopPropagation","onKeyDown","startsWith","isSmall","chevronDown","map","index","key","__experimentalHint","style","check"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { useSelect } from 'downshift';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check, chevronDown } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Button, VisuallyHidden } from '../';\n\nconst itemToString = ( item ) => item?.name;\n// This is needed so that in Windows, where\n// the menu does not necessarily open on\n// key up/down, you can still switch between\n// options with the menu closed.\nconst stateReducer = (\n\t{ selectedItem },\n\t{ type, changes, props: { items } }\n) => {\n\tswitch ( type ) {\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:\n\t\t\t// If we already have a selected item, try to select the next one,\n\t\t\t// without circular navigation. Otherwise, select the first item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.min(\n\t\t\t\t\t\t\t\t\titems.indexOf( selectedItem ) + 1,\n\t\t\t\t\t\t\t\t\titems.length - 1\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t],\n\t\t\t};\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:\n\t\t\t// If we already have a selected item, try to select the previous one,\n\t\t\t// without circular navigation. Otherwise, select the last item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.max( items.indexOf( selectedItem ) - 1, 0 )\n\t\t\t\t\t\t\t: items.length - 1\n\t\t\t\t\t],\n\t\t\t};\n\t\tdefault:\n\t\t\treturn changes;\n\t}\n};\nexport default function CustomSelectControl( {\n\tclassName,\n\thideLabelFromVision,\n\tlabel,\n\tdescribedBy,\n\toptions: items,\n\tonChange: onSelectedItemChange,\n\tvalue: _selectedItem,\n} ) {\n\tconst {\n\t\tgetLabelProps,\n\t\tgetToggleButtonProps,\n\t\tgetMenuProps,\n\t\tgetItemProps,\n\t\tisOpen,\n\t\thighlightedIndex,\n\t\tselectedItem,\n\t} = useSelect( {\n\t\tinitialSelectedItem: items[ 0 ],\n\t\titems,\n\t\titemToString,\n\t\tonSelectedItemChange,\n\t\t...( typeof _selectedItem !== 'undefined' && _selectedItem !== null\n\t\t\t? { selectedItem: _selectedItem }\n\t\t\t: undefined ),\n\t\tstateReducer,\n\t} );\n\n\tfunction getDescribedBy() {\n\t\tif ( describedBy ) {\n\t\t\treturn describedBy;\n\t\t}\n\n\t\tif ( ! selectedItem ) {\n\t\t\treturn __( 'No selection' );\n\t\t}\n\n\t\t// translators: %s: The selected option.\n\t\treturn sprintf( __( 'Currently selected: %s' ), selectedItem.name );\n\t}\n\n\tconst menuProps = getMenuProps( {\n\t\tclassName: 'components-custom-select-control__menu',\n\t\t'aria-hidden': ! isOpen,\n\t} );\n\n\tconst onKeyDownHandler = useCallback(\n\t\t( e ) => {\n\t\t\te.stopPropagation();\n\t\t\tmenuProps?.onKeyDown?.( e );\n\t\t},\n\t\t[ menuProps ]\n\t);\n\n\t// We need this here, because the null active descendant is not fully ARIA compliant.\n\tif (\n\t\tmenuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )\n\t) {\n\t\tdelete menuProps[ 'aria-activedescendant' ];\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ hideLabelFromVision ? (\n\t\t\t\t<VisuallyHidden as=\"label\" { ...getLabelProps() }>\n\t\t\t\t\t{ label }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */\n\t\t\t\t<label\n\t\t\t\t\t{ ...getLabelProps( {\n\t\t\t\t\t\tclassName: 'components-custom-select-control__label',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</label>\n\t\t\t) }\n\t\t\t<Button\n\t\t\t\t{ ...getToggleButtonProps( {\n\t\t\t\t\t// This is needed because some speech recognition software don't support `aria-labelledby`.\n\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t'aria-labelledby': undefined,\n\t\t\t\t\tclassName: 'components-custom-select-control__button',\n\t\t\t\t\tisSmall: true,\n\t\t\t\t\tdescribedBy: getDescribedBy(),\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ itemToString( selectedItem ) }\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\tclassName=\"components-custom-select-control__button-icon\"\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t{ isOpen &&\n\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t'has-hint': !! item.__experimentalHint,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tstyle: item.style,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\t\t\t\t\t\t\t\t<span className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t\t\t\t{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-select-control/index.js"],"names":["itemToString","item","name","stateReducer","selectedItem","type","changes","props","items","useSelect","stateChangeTypes","ToggleButtonKeyDownArrowDown","Math","min","indexOf","length","ToggleButtonKeyDownArrowUp","max","CustomSelectControl","__next36pxDefaultSize","className","hideLabelFromVision","label","describedBy","options","onChange","onSelectedItemChange","value","_selectedItem","getLabelProps","getToggleButtonProps","getMenuProps","getItemProps","isOpen","highlightedIndex","initialSelectedItem","undefined","getDescribedBy","menuProps","onKeyDownHandler","e","stopPropagation","onKeyDown","startsWith","isSmall","chevronDown","map","index","key","__experimentalHint","style","check"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { useSelect } from 'downshift';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check, chevronDown } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Button, VisuallyHidden } from '../';\n\nconst itemToString = ( item ) => item?.name;\n// This is needed so that in Windows, where\n// the menu does not necessarily open on\n// key up/down, you can still switch between\n// options with the menu closed.\nconst stateReducer = (\n\t{ selectedItem },\n\t{ type, changes, props: { items } }\n) => {\n\tswitch ( type ) {\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:\n\t\t\t// If we already have a selected item, try to select the next one,\n\t\t\t// without circular navigation. Otherwise, select the first item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.min(\n\t\t\t\t\t\t\t\t\titems.indexOf( selectedItem ) + 1,\n\t\t\t\t\t\t\t\t\titems.length - 1\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t],\n\t\t\t};\n\t\tcase useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:\n\t\t\t// If we already have a selected item, try to select the previous one,\n\t\t\t// without circular navigation. Otherwise, select the last item.\n\t\t\treturn {\n\t\t\t\tselectedItem:\n\t\t\t\t\titems[\n\t\t\t\t\t\tselectedItem\n\t\t\t\t\t\t\t? Math.max( items.indexOf( selectedItem ) - 1, 0 )\n\t\t\t\t\t\t\t: items.length - 1\n\t\t\t\t\t],\n\t\t\t};\n\t\tdefault:\n\t\t\treturn changes;\n\t}\n};\nexport default function CustomSelectControl( {\n\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t__next36pxDefaultSize = false,\n\tclassName,\n\thideLabelFromVision,\n\tlabel,\n\tdescribedBy,\n\toptions: items,\n\tonChange: onSelectedItemChange,\n\tvalue: _selectedItem,\n} ) {\n\tconst {\n\t\tgetLabelProps,\n\t\tgetToggleButtonProps,\n\t\tgetMenuProps,\n\t\tgetItemProps,\n\t\tisOpen,\n\t\thighlightedIndex,\n\t\tselectedItem,\n\t} = useSelect( {\n\t\tinitialSelectedItem: items[ 0 ],\n\t\titems,\n\t\titemToString,\n\t\tonSelectedItemChange,\n\t\t...( typeof _selectedItem !== 'undefined' && _selectedItem !== null\n\t\t\t? { selectedItem: _selectedItem }\n\t\t\t: undefined ),\n\t\tstateReducer,\n\t} );\n\n\tfunction getDescribedBy() {\n\t\tif ( describedBy ) {\n\t\t\treturn describedBy;\n\t\t}\n\n\t\tif ( ! selectedItem ) {\n\t\t\treturn __( 'No selection' );\n\t\t}\n\n\t\t// translators: %s: The selected option.\n\t\treturn sprintf( __( 'Currently selected: %s' ), selectedItem.name );\n\t}\n\n\tconst menuProps = getMenuProps( {\n\t\tclassName: 'components-custom-select-control__menu',\n\t\t'aria-hidden': ! isOpen,\n\t} );\n\n\tconst onKeyDownHandler = useCallback(\n\t\t( e ) => {\n\t\t\te.stopPropagation();\n\t\t\tmenuProps?.onKeyDown?.( e );\n\t\t},\n\t\t[ menuProps ]\n\t);\n\n\t// We need this here, because the null active descendant is not fully ARIA compliant.\n\tif (\n\t\tmenuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )\n\t) {\n\t\tdelete menuProps[ 'aria-activedescendant' ];\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-select-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ hideLabelFromVision ? (\n\t\t\t\t<VisuallyHidden as=\"label\" { ...getLabelProps() }>\n\t\t\t\t\t{ label }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) : (\n\t\t\t\t/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */\n\t\t\t\t<label\n\t\t\t\t\t{ ...getLabelProps( {\n\t\t\t\t\t\tclassName: 'components-custom-select-control__label',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</label>\n\t\t\t) }\n\t\t\t<Button\n\t\t\t\t{ ...getToggleButtonProps( {\n\t\t\t\t\t// This is needed because some speech recognition software don't support `aria-labelledby`.\n\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t'aria-labelledby': undefined,\n\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t'components-custom-select-control__button',\n\t\t\t\t\t\t{ 'is-next-36px-default-size': __next36pxDefaultSize }\n\t\t\t\t\t),\n\t\t\t\t\tisSmall: ! __next36pxDefaultSize,\n\t\t\t\t\tdescribedBy: getDescribedBy(),\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ itemToString( selectedItem ) }\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\tclassName=\"components-custom-select-control__button-icon\"\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>\n\t\t\t\t{ isOpen &&\n\t\t\t\t\titems.map( ( item, index ) => (\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-key\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t{ ...getItemProps( {\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t\t\titem.className,\n\t\t\t\t\t\t\t\t\t'components-custom-select-control__item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'is-highlighted':\n\t\t\t\t\t\t\t\t\t\t\tindex === highlightedIndex,\n\t\t\t\t\t\t\t\t\t\t'has-hint': !! item.__experimentalHint,\n\t\t\t\t\t\t\t\t\t\t'is-next-36px-default-size': __next36pxDefaultSize,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tstyle: item.style,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ item.name }\n\t\t\t\t\t\t\t{ item.__experimentalHint && (\n\t\t\t\t\t\t\t\t<span className=\"components-custom-select-control__item-hint\">\n\t\t\t\t\t\t\t\t\t{ item.__experimentalHint }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ item === selectedItem && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-select-control__item-icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</div>\n\t);\n}\n"]}

package/build/divider/styles.js

@@ -15,13 +15,8 @@ var _space = require("../ui/utils/space");
 
 var _utils = require("../utils");
 
-/**
- * External dependencies
- */
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
-/**
- * Internal dependencies
- */
 const MARGIN_DIRECTIONS = {
   vertical: {
     start: 'marginLeft',
@@ -35,36 +30,53 @@ const MARGIN_DIRECTIONS = {
 // When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,
 // the latter will take priority.
 
-const renderMargin = _ref => {
+const renderMargin = _ref2 => {
   let {
     'aria-orientation': orientation = 'horizontal',
     margin,
     marginStart,
     marginEnd
-  } = _ref;
+  } = _ref2;
   return /*#__PURE__*/(0, _react.css)((0, _utils.rtl)({
     [MARGIN_DIRECTIONS[orientation].start]: (0, _space.space)(marginStart !== null && marginStart !== void 0 ? marginStart : margin),
     [MARGIN_DIRECTIONS[orientation].end]: (0, _space.space)(marginEnd !== null && marginEnd !== void 0 ? marginEnd : margin)
-  })(), process.env.NODE_ENV === "production" ? "" : ";label:renderMargin;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0NDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5jb25zdCBNQVJHSU5fRElSRUNUSU9OUzogUmVjb3JkPFxuXHROb25OdWxsYWJsZTwgUHJvcHNbICdvcmllbnRhdGlvbicgXSA+LFxuXHRSZWNvcmQ8ICdzdGFydCcgfCAnZW5kJywgc3RyaW5nID5cbj4gPSB7XG5cdHZlcnRpY2FsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5MZWZ0Jyxcblx0XHRlbmQ6ICdtYXJnaW5SaWdodCcsXG5cdH0sXG5cdGhvcml6b250YWw6IHtcblx0XHRzdGFydDogJ21hcmdpblRvcCcsXG5cdFx0ZW5kOiAnbWFyZ2luQm90dG9tJyxcblx0fSxcbn07XG5cbi8vIFJlbmRlcnMgdGhlIGNvcnJlY3QgbWFyZ2lucyBnaXZlbiB0aGUgRGl2aWRlcidzIGBvcmllbnRhdGlvbmAgYW5kIHRoZSB3cml0aW5nIGRpcmVjdGlvbi5cbi8vIFdoZW4gYm90aCB0aGUgZ2VuZXJpYyBgbWFyZ2luYCBhbmQgdGhlIHNwZWNpZmljIGBtYXJnaW5TdGFydHxtYXJnaW5FbmRgIHByb3BzIGFyZSBkZWZpbmVkLFxuLy8gdGhlIGxhdHRlciB3aWxsIHRha2UgcHJpb3JpdHkuXG5jb25zdCByZW5kZXJNYXJnaW4gPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcblx0bWFyZ2luLFxuXHRtYXJnaW5TdGFydCxcblx0bWFyZ2luRW5kLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoXG5cdFx0cnRsKCB7XG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLnN0YXJ0IF06IHNwYWNlKFxuXHRcdFx0XHRtYXJnaW5TdGFydCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLmVuZCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luRW5kID8/IG1hcmdpblxuXHRcdFx0KSxcblx0XHR9ICkoKVxuXHQpO1xuXG5jb25zdCByZW5kZXJCb3JkZXIgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0WyBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1xuXHRcdFx0PyAnYm9yZGVyUmlnaHQnXG5cdFx0XHQ6ICdib3JkZXJCb3R0b20nIF06ICcxcHggc29saWQgY3VycmVudENvbG9yJyxcblx0fSApO1xufTtcblxuY29uc3QgcmVuZGVyU2l6ZSA9ICgge1xuXHQnYXJpYS1vcmllbnRhdGlvbic6IG9yaWVudGF0aW9uID0gJ2hvcml6b250YWwnLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoIHtcblx0XHRoZWlnaHQ6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gJ2F1dG8nIDogMCxcblx0XHR3aWR0aDogb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCcgPyAwIDogJ2F1dG8nLFxuXHR9ICk7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyVmlldyA9IHN0eWxlZC5ocjwgUHJvcHMgPmBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cblx0JHsgcmVuZGVyQm9yZGVyIH1cblx0JHsgcmVuZGVyU2l6ZSB9XG5cdCR7IHJlbmRlck1hcmdpbiB9XG5gO1xuIl19 */");
+  })(), process.env.NODE_ENV === "production" ? "" : ";label:renderMargin;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0NDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5jb25zdCBNQVJHSU5fRElSRUNUSU9OUzogUmVjb3JkPFxuXHROb25OdWxsYWJsZTwgUHJvcHNbICdvcmllbnRhdGlvbicgXSA+LFxuXHRSZWNvcmQ8ICdzdGFydCcgfCAnZW5kJywgc3RyaW5nID5cbj4gPSB7XG5cdHZlcnRpY2FsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5MZWZ0Jyxcblx0XHRlbmQ6ICdtYXJnaW5SaWdodCcsXG5cdH0sXG5cdGhvcml6b250YWw6IHtcblx0XHRzdGFydDogJ21hcmdpblRvcCcsXG5cdFx0ZW5kOiAnbWFyZ2luQm90dG9tJyxcblx0fSxcbn07XG5cbi8vIFJlbmRlcnMgdGhlIGNvcnJlY3QgbWFyZ2lucyBnaXZlbiB0aGUgRGl2aWRlcidzIGBvcmllbnRhdGlvbmAgYW5kIHRoZSB3cml0aW5nIGRpcmVjdGlvbi5cbi8vIFdoZW4gYm90aCB0aGUgZ2VuZXJpYyBgbWFyZ2luYCBhbmQgdGhlIHNwZWNpZmljIGBtYXJnaW5TdGFydHxtYXJnaW5FbmRgIHByb3BzIGFyZSBkZWZpbmVkLFxuLy8gdGhlIGxhdHRlciB3aWxsIHRha2UgcHJpb3JpdHkuXG5jb25zdCByZW5kZXJNYXJnaW4gPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcblx0bWFyZ2luLFxuXHRtYXJnaW5TdGFydCxcblx0bWFyZ2luRW5kLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoXG5cdFx0cnRsKCB7XG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLnN0YXJ0IF06IHNwYWNlKFxuXHRcdFx0XHRtYXJnaW5TdGFydCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLmVuZCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luRW5kID8/IG1hcmdpblxuXHRcdFx0KSxcblx0XHR9ICkoKVxuXHQpO1xuXG5jb25zdCByZW5kZXJEaXNwbGF5ID0gKCB7XG5cdCdhcmlhLW9yaWVudGF0aW9uJzogb3JpZW50YXRpb24gPSAnaG9yaXpvbnRhbCcsXG59OiBQcm9wcyApID0+IHtcblx0cmV0dXJuIG9yaWVudGF0aW9uID09PSAndmVydGljYWwnXG5cdFx0PyBjc3MoIHsgZGlzcGxheTogJ2lubGluZScgfSApXG5cdFx0OiB1bmRlZmluZWQ7XG59O1xuXG5jb25zdCByZW5kZXJCb3JkZXIgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0WyBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1xuXHRcdFx0PyAnYm9yZGVyUmlnaHQnXG5cdFx0XHQ6ICdib3JkZXJCb3R0b20nIF06ICcxcHggc29saWQgY3VycmVudENvbG9yJyxcblx0fSApO1xufTtcblxuY29uc3QgcmVuZGVyU2l6ZSA9ICgge1xuXHQnYXJpYS1vcmllbnRhdGlvbic6IG9yaWVudGF0aW9uID0gJ2hvcml6b250YWwnLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoIHtcblx0XHRoZWlnaHQ6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gJ2F1dG8nIDogMCxcblx0XHR3aWR0aDogb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCcgPyAwIDogJ2F1dG8nLFxuXHR9ICk7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyVmlldyA9IHN0eWxlZC5ocjwgUHJvcHMgPmBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cblx0JHsgcmVuZGVyRGlzcGxheSB9XG5cdCR7IHJlbmRlckJvcmRlciB9XG5cdCR7IHJlbmRlclNpemUgfVxuXHQkeyByZW5kZXJNYXJnaW4gfVxuYDtcbiJdfQ== */");
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1u4hpl4",
+  styles: "display:inline"
+} : {
+  name: "9r0jm7-renderDisplay",
+  styles: "display:inline;label:renderDisplay;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbURJIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5jb25zdCBNQVJHSU5fRElSRUNUSU9OUzogUmVjb3JkPFxuXHROb25OdWxsYWJsZTwgUHJvcHNbICdvcmllbnRhdGlvbicgXSA+LFxuXHRSZWNvcmQ8ICdzdGFydCcgfCAnZW5kJywgc3RyaW5nID5cbj4gPSB7XG5cdHZlcnRpY2FsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5MZWZ0Jyxcblx0XHRlbmQ6ICdtYXJnaW5SaWdodCcsXG5cdH0sXG5cdGhvcml6b250YWw6IHtcblx0XHRzdGFydDogJ21hcmdpblRvcCcsXG5cdFx0ZW5kOiAnbWFyZ2luQm90dG9tJyxcblx0fSxcbn07XG5cbi8vIFJlbmRlcnMgdGhlIGNvcnJlY3QgbWFyZ2lucyBnaXZlbiB0aGUgRGl2aWRlcidzIGBvcmllbnRhdGlvbmAgYW5kIHRoZSB3cml0aW5nIGRpcmVjdGlvbi5cbi8vIFdoZW4gYm90aCB0aGUgZ2VuZXJpYyBgbWFyZ2luYCBhbmQgdGhlIHNwZWNpZmljIGBtYXJnaW5TdGFydHxtYXJnaW5FbmRgIHByb3BzIGFyZSBkZWZpbmVkLFxuLy8gdGhlIGxhdHRlciB3aWxsIHRha2UgcHJpb3JpdHkuXG5jb25zdCByZW5kZXJNYXJnaW4gPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcblx0bWFyZ2luLFxuXHRtYXJnaW5TdGFydCxcblx0bWFyZ2luRW5kLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoXG5cdFx0cnRsKCB7XG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLnN0YXJ0IF06IHNwYWNlKFxuXHRcdFx0XHRtYXJnaW5TdGFydCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLmVuZCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luRW5kID8/IG1hcmdpblxuXHRcdFx0KSxcblx0XHR9ICkoKVxuXHQpO1xuXG5jb25zdCByZW5kZXJEaXNwbGF5ID0gKCB7XG5cdCdhcmlhLW9yaWVudGF0aW9uJzogb3JpZW50YXRpb24gPSAnaG9yaXpvbnRhbCcsXG59OiBQcm9wcyApID0+IHtcblx0cmV0dXJuIG9yaWVudGF0aW9uID09PSAndmVydGljYWwnXG5cdFx0PyBjc3MoIHsgZGlzcGxheTogJ2lubGluZScgfSApXG5cdFx0OiB1bmRlZmluZWQ7XG59O1xuXG5jb25zdCByZW5kZXJCb3JkZXIgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0WyBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1xuXHRcdFx0PyAnYm9yZGVyUmlnaHQnXG5cdFx0XHQ6ICdib3JkZXJCb3R0b20nIF06ICcxcHggc29saWQgY3VycmVudENvbG9yJyxcblx0fSApO1xufTtcblxuY29uc3QgcmVuZGVyU2l6ZSA9ICgge1xuXHQnYXJpYS1vcmllbnRhdGlvbic6IG9yaWVudGF0aW9uID0gJ2hvcml6b250YWwnLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoIHtcblx0XHRoZWlnaHQ6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gJ2F1dG8nIDogMCxcblx0XHR3aWR0aDogb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCcgPyAwIDogJ2F1dG8nLFxuXHR9ICk7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyVmlldyA9IHN0eWxlZC5ocjwgUHJvcHMgPmBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cblx0JHsgcmVuZGVyRGlzcGxheSB9XG5cdCR7IHJlbmRlckJvcmRlciB9XG5cdCR7IHJlbmRlclNpemUgfVxuXHQkeyByZW5kZXJNYXJnaW4gfVxuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-const renderBorder = _ref2 => {
+const renderDisplay = _ref3 => {
   let {
     'aria-orientation': orientation = 'horizontal'
-  } = _ref2;
+  } = _ref3;
+  return orientation === 'vertical' ? _ref : undefined;
+};
+
+const renderBorder = _ref4 => {
+  let {
+    'aria-orientation': orientation = 'horizontal'
+  } = _ref4;
   return /*#__PURE__*/(0, _react.css)({
     [orientation === 'vertical' ? 'borderRight' : 'borderBottom']: '1px solid currentColor'
-  }, process.env.NODE_ENV === "production" ? "" : ";label:renderBorder;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0RRIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5jb25zdCBNQVJHSU5fRElSRUNUSU9OUzogUmVjb3JkPFxuXHROb25OdWxsYWJsZTwgUHJvcHNbICdvcmllbnRhdGlvbicgXSA+LFxuXHRSZWNvcmQ8ICdzdGFydCcgfCAnZW5kJywgc3RyaW5nID5cbj4gPSB7XG5cdHZlcnRpY2FsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5MZWZ0Jyxcblx0XHRlbmQ6ICdtYXJnaW5SaWdodCcsXG5cdH0sXG5cdGhvcml6b250YWw6IHtcblx0XHRzdGFydDogJ21hcmdpblRvcCcsXG5cdFx0ZW5kOiAnbWFyZ2luQm90dG9tJyxcblx0fSxcbn07XG5cbi8vIFJlbmRlcnMgdGhlIGNvcnJlY3QgbWFyZ2lucyBnaXZlbiB0aGUgRGl2aWRlcidzIGBvcmllbnRhdGlvbmAgYW5kIHRoZSB3cml0aW5nIGRpcmVjdGlvbi5cbi8vIFdoZW4gYm90aCB0aGUgZ2VuZXJpYyBgbWFyZ2luYCBhbmQgdGhlIHNwZWNpZmljIGBtYXJnaW5TdGFydHxtYXJnaW5FbmRgIHByb3BzIGFyZSBkZWZpbmVkLFxuLy8gdGhlIGxhdHRlciB3aWxsIHRha2UgcHJpb3JpdHkuXG5jb25zdCByZW5kZXJNYXJnaW4gPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcblx0bWFyZ2luLFxuXHRtYXJnaW5TdGFydCxcblx0bWFyZ2luRW5kLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoXG5cdFx0cnRsKCB7XG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLnN0YXJ0IF06IHNwYWNlKFxuXHRcdFx0XHRtYXJnaW5TdGFydCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLmVuZCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luRW5kID8/IG1hcmdpblxuXHRcdFx0KSxcblx0XHR9ICkoKVxuXHQpO1xuXG5jb25zdCByZW5kZXJCb3JkZXIgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0WyBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1xuXHRcdFx0PyAnYm9yZGVyUmlnaHQnXG5cdFx0XHQ6ICdib3JkZXJCb3R0b20nIF06ICcxcHggc29saWQgY3VycmVudENvbG9yJyxcblx0fSApO1xufTtcblxuY29uc3QgcmVuZGVyU2l6ZSA9ICgge1xuXHQnYXJpYS1vcmllbnRhdGlvbic6IG9yaWVudGF0aW9uID0gJ2hvcml6b250YWwnLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoIHtcblx0XHRoZWlnaHQ6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gJ2F1dG8nIDogMCxcblx0XHR3aWR0aDogb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCcgPyAwIDogJ2F1dG8nLFxuXHR9ICk7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyVmlldyA9IHN0eWxlZC5ocjwgUHJvcHMgPmBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cblx0JHsgcmVuZGVyQm9yZGVyIH1cblx0JHsgcmVuZGVyU2l6ZSB9XG5cdCR7IHJlbmRlck1hcmdpbiB9XG5gO1xuIl19 */");
+  }, process.env.NODE_ENV === "production" ? "" : ";label:renderBorder;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMERRIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5jb25zdCBNQVJHSU5fRElSRUNUSU9OUzogUmVjb3JkPFxuXHROb25OdWxsYWJsZTwgUHJvcHNbICdvcmllbnRhdGlvbicgXSA+LFxuXHRSZWNvcmQ8ICdzdGFydCcgfCAnZW5kJywgc3RyaW5nID5cbj4gPSB7XG5cdHZlcnRpY2FsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5MZWZ0Jyxcblx0XHRlbmQ6ICdtYXJnaW5SaWdodCcsXG5cdH0sXG5cdGhvcml6b250YWw6IHtcblx0XHRzdGFydDogJ21hcmdpblRvcCcsXG5cdFx0ZW5kOiAnbWFyZ2luQm90dG9tJyxcblx0fSxcbn07XG5cbi8vIFJlbmRlcnMgdGhlIGNvcnJlY3QgbWFyZ2lucyBnaXZlbiB0aGUgRGl2aWRlcidzIGBvcmllbnRhdGlvbmAgYW5kIHRoZSB3cml0aW5nIGRpcmVjdGlvbi5cbi8vIFdoZW4gYm90aCB0aGUgZ2VuZXJpYyBgbWFyZ2luYCBhbmQgdGhlIHNwZWNpZmljIGBtYXJnaW5TdGFydHxtYXJnaW5FbmRgIHByb3BzIGFyZSBkZWZpbmVkLFxuLy8gdGhlIGxhdHRlciB3aWxsIHRha2UgcHJpb3JpdHkuXG5jb25zdCByZW5kZXJNYXJnaW4gPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcblx0bWFyZ2luLFxuXHRtYXJnaW5TdGFydCxcblx0bWFyZ2luRW5kLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoXG5cdFx0cnRsKCB7XG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLnN0YXJ0IF06IHNwYWNlKFxuXHRcdFx0XHRtYXJnaW5TdGFydCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLmVuZCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luRW5kID8/IG1hcmdpblxuXHRcdFx0KSxcblx0XHR9ICkoKVxuXHQpO1xuXG5jb25zdCByZW5kZXJEaXNwbGF5ID0gKCB7XG5cdCdhcmlhLW9yaWVudGF0aW9uJzogb3JpZW50YXRpb24gPSAnaG9yaXpvbnRhbCcsXG59OiBQcm9wcyApID0+IHtcblx0cmV0dXJuIG9yaWVudGF0aW9uID09PSAndmVydGljYWwnXG5cdFx0PyBjc3MoIHsgZGlzcGxheTogJ2lubGluZScgfSApXG5cdFx0OiB1bmRlZmluZWQ7XG59O1xuXG5jb25zdCByZW5kZXJCb3JkZXIgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0WyBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1xuXHRcdFx0PyAnYm9yZGVyUmlnaHQnXG5cdFx0XHQ6ICdib3JkZXJCb3R0b20nIF06ICcxcHggc29saWQgY3VycmVudENvbG9yJyxcblx0fSApO1xufTtcblxuY29uc3QgcmVuZGVyU2l6ZSA9ICgge1xuXHQnYXJpYS1vcmllbnRhdGlvbic6IG9yaWVudGF0aW9uID0gJ2hvcml6b250YWwnLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoIHtcblx0XHRoZWlnaHQ6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gJ2F1dG8nIDogMCxcblx0XHR3aWR0aDogb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCcgPyAwIDogJ2F1dG8nLFxuXHR9ICk7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyVmlldyA9IHN0eWxlZC5ocjwgUHJvcHMgPmBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cblx0JHsgcmVuZGVyRGlzcGxheSB9XG5cdCR7IHJlbmRlckJvcmRlciB9XG5cdCR7IHJlbmRlclNpemUgfVxuXHQkeyByZW5kZXJNYXJnaW4gfVxuYDtcbiJdfQ== */");
 };
 
-const renderSize = _ref3 => {
+const renderSize = _ref5 => {
   let {
     'aria-orientation': orientation = 'horizontal'
-  } = _ref3;
+  } = _ref5;
   return /*#__PURE__*/(0, _react.css)({
     height: orientation === 'vertical' ? 'auto' : 0,
     width: orientation === 'vertical' ? 0 : 'auto'
-  }, process.env.NODE_ENV === "production" ? "" : ";label:renderSize;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNERDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5jb25zdCBNQVJHSU5fRElSRUNUSU9OUzogUmVjb3JkPFxuXHROb25OdWxsYWJsZTwgUHJvcHNbICdvcmllbnRhdGlvbicgXSA+LFxuXHRSZWNvcmQ8ICdzdGFydCcgfCAnZW5kJywgc3RyaW5nID5cbj4gPSB7XG5cdHZlcnRpY2FsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5MZWZ0Jyxcblx0XHRlbmQ6ICdtYXJnaW5SaWdodCcsXG5cdH0sXG5cdGhvcml6b250YWw6IHtcblx0XHRzdGFydDogJ21hcmdpblRvcCcsXG5cdFx0ZW5kOiAnbWFyZ2luQm90dG9tJyxcblx0fSxcbn07XG5cbi8vIFJlbmRlcnMgdGhlIGNvcnJlY3QgbWFyZ2lucyBnaXZlbiB0aGUgRGl2aWRlcidzIGBvcmllbnRhdGlvbmAgYW5kIHRoZSB3cml0aW5nIGRpcmVjdGlvbi5cbi8vIFdoZW4gYm90aCB0aGUgZ2VuZXJpYyBgbWFyZ2luYCBhbmQgdGhlIHNwZWNpZmljIGBtYXJnaW5TdGFydHxtYXJnaW5FbmRgIHByb3BzIGFyZSBkZWZpbmVkLFxuLy8gdGhlIGxhdHRlciB3aWxsIHRha2UgcHJpb3JpdHkuXG5jb25zdCByZW5kZXJNYXJnaW4gPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcblx0bWFyZ2luLFxuXHRtYXJnaW5TdGFydCxcblx0bWFyZ2luRW5kLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoXG5cdFx0cnRsKCB7XG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLnN0YXJ0IF06IHNwYWNlKFxuXHRcdFx0XHRtYXJnaW5TdGFydCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLmVuZCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luRW5kID8/IG1hcmdpblxuXHRcdFx0KSxcblx0XHR9ICkoKVxuXHQpO1xuXG5jb25zdCByZW5kZXJCb3JkZXIgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0WyBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1xuXHRcdFx0PyAnYm9yZGVyUmlnaHQnXG5cdFx0XHQ6ICdib3JkZXJCb3R0b20nIF06ICcxcHggc29saWQgY3VycmVudENvbG9yJyxcblx0fSApO1xufTtcblxuY29uc3QgcmVuZGVyU2l6ZSA9ICgge1xuXHQnYXJpYS1vcmllbnRhdGlvbic6IG9yaWVudGF0aW9uID0gJ2hvcml6b250YWwnLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoIHtcblx0XHRoZWlnaHQ6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gJ2F1dG8nIDogMCxcblx0XHR3aWR0aDogb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCcgPyAwIDogJ2F1dG8nLFxuXHR9ICk7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyVmlldyA9IHN0eWxlZC5ocjwgUHJvcHMgPmBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cblx0JHsgcmVuZGVyQm9yZGVyIH1cblx0JHsgcmVuZGVyU2l6ZSB9XG5cdCR7IHJlbmRlck1hcmdpbiB9XG5gO1xuIl19 */");
+  }, process.env.NODE_ENV === "production" ? "" : ";label:renderSize;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0VDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5jb25zdCBNQVJHSU5fRElSRUNUSU9OUzogUmVjb3JkPFxuXHROb25OdWxsYWJsZTwgUHJvcHNbICdvcmllbnRhdGlvbicgXSA+LFxuXHRSZWNvcmQ8ICdzdGFydCcgfCAnZW5kJywgc3RyaW5nID5cbj4gPSB7XG5cdHZlcnRpY2FsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5MZWZ0Jyxcblx0XHRlbmQ6ICdtYXJnaW5SaWdodCcsXG5cdH0sXG5cdGhvcml6b250YWw6IHtcblx0XHRzdGFydDogJ21hcmdpblRvcCcsXG5cdFx0ZW5kOiAnbWFyZ2luQm90dG9tJyxcblx0fSxcbn07XG5cbi8vIFJlbmRlcnMgdGhlIGNvcnJlY3QgbWFyZ2lucyBnaXZlbiB0aGUgRGl2aWRlcidzIGBvcmllbnRhdGlvbmAgYW5kIHRoZSB3cml0aW5nIGRpcmVjdGlvbi5cbi8vIFdoZW4gYm90aCB0aGUgZ2VuZXJpYyBgbWFyZ2luYCBhbmQgdGhlIHNwZWNpZmljIGBtYXJnaW5TdGFydHxtYXJnaW5FbmRgIHByb3BzIGFyZSBkZWZpbmVkLFxuLy8gdGhlIGxhdHRlciB3aWxsIHRha2UgcHJpb3JpdHkuXG5jb25zdCByZW5kZXJNYXJnaW4gPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcblx0bWFyZ2luLFxuXHRtYXJnaW5TdGFydCxcblx0bWFyZ2luRW5kLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoXG5cdFx0cnRsKCB7XG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLnN0YXJ0IF06IHNwYWNlKFxuXHRcdFx0XHRtYXJnaW5TdGFydCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0XHRbIE1BUkdJTl9ESVJFQ1RJT05TWyBvcmllbnRhdGlvbiBdLmVuZCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luRW5kID8/IG1hcmdpblxuXHRcdFx0KSxcblx0XHR9ICkoKVxuXHQpO1xuXG5jb25zdCByZW5kZXJEaXNwbGF5ID0gKCB7XG5cdCdhcmlhLW9yaWVudGF0aW9uJzogb3JpZW50YXRpb24gPSAnaG9yaXpvbnRhbCcsXG59OiBQcm9wcyApID0+IHtcblx0cmV0dXJuIG9yaWVudGF0aW9uID09PSAndmVydGljYWwnXG5cdFx0PyBjc3MoIHsgZGlzcGxheTogJ2lubGluZScgfSApXG5cdFx0OiB1bmRlZmluZWQ7XG59O1xuXG5jb25zdCByZW5kZXJCb3JkZXIgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0WyBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1xuXHRcdFx0PyAnYm9yZGVyUmlnaHQnXG5cdFx0XHQ6ICdib3JkZXJCb3R0b20nIF06ICcxcHggc29saWQgY3VycmVudENvbG9yJyxcblx0fSApO1xufTtcblxuY29uc3QgcmVuZGVyU2l6ZSA9ICgge1xuXHQnYXJpYS1vcmllbnRhdGlvbic6IG9yaWVudGF0aW9uID0gJ2hvcml6b250YWwnLFxufTogUHJvcHMgKSA9PlxuXHRjc3MoIHtcblx0XHRoZWlnaHQ6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gJ2F1dG8nIDogMCxcblx0XHR3aWR0aDogb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCcgPyAwIDogJ2F1dG8nLFxuXHR9ICk7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyVmlldyA9IHN0eWxlZC5ocjwgUHJvcHMgPmBcblx0Ym9yZGVyOiAwO1xuXHRtYXJnaW46IDA7XG5cblx0JHsgcmVuZGVyRGlzcGxheSB9XG5cdCR7IHJlbmRlckJvcmRlciB9XG5cdCR7IHJlbmRlclNpemUgfVxuXHQkeyByZW5kZXJNYXJnaW4gfVxuYDtcbiJdfQ== */");
 };
 
 const DividerView = (0, _base.default)("hr", process.env.NODE_ENV === "production" ? {
@@ -72,6 +84,6 @@ const DividerView = (0, _base.default)("hr", process.env.NODE_ENV === "productio
 } : {
   target: "e19on6iw0",
   label: "DividerView"
-})("border:0;margin:0;", renderBorder, " ", renderSize, " ", renderMargin, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUU2QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2RpdmlkZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgTUFSR0lOX0RJUkVDVElPTlM6IFJlY29yZDxcblx0Tm9uTnVsbGFibGU8IFByb3BzWyAnb3JpZW50YXRpb24nIF0gPixcblx0UmVjb3JkPCAnc3RhcnQnIHwgJ2VuZCcsIHN0cmluZyA+XG4+ID0ge1xuXHR2ZXJ0aWNhbDoge1xuXHRcdHN0YXJ0OiAnbWFyZ2luTGVmdCcsXG5cdFx0ZW5kOiAnbWFyZ2luUmlnaHQnLFxuXHR9LFxuXHRob3Jpem9udGFsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5Ub3AnLFxuXHRcdGVuZDogJ21hcmdpbkJvdHRvbScsXG5cdH0sXG59O1xuXG4vLyBSZW5kZXJzIHRoZSBjb3JyZWN0IG1hcmdpbnMgZ2l2ZW4gdGhlIERpdmlkZXIncyBgb3JpZW50YXRpb25gIGFuZCB0aGUgd3JpdGluZyBkaXJlY3Rpb24uXG4vLyBXaGVuIGJvdGggdGhlIGdlbmVyaWMgYG1hcmdpbmAgYW5kIHRoZSBzcGVjaWZpYyBgbWFyZ2luU3RhcnR8bWFyZ2luRW5kYCBwcm9wcyBhcmUgZGVmaW5lZCxcbi8vIHRoZSBsYXR0ZXIgd2lsbCB0YWtlIHByaW9yaXR5LlxuY29uc3QgcmVuZGVyTWFyZ2luID0gKCB7XG5cdCdhcmlhLW9yaWVudGF0aW9uJzogb3JpZW50YXRpb24gPSAnaG9yaXpvbnRhbCcsXG5cdG1hcmdpbixcblx0bWFyZ2luU3RhcnQsXG5cdG1hcmdpbkVuZCxcbn06IFByb3BzICkgPT5cblx0Y3NzKFxuXHRcdHJ0bCgge1xuXHRcdFx0WyBNQVJHSU5fRElSRUNUSU9OU1sgb3JpZW50YXRpb24gXS5zdGFydCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luU3RhcnQgPz8gbWFyZ2luXG5cdFx0XHQpLFxuXHRcdFx0WyBNQVJHSU5fRElSRUNUSU9OU1sgb3JpZW50YXRpb24gXS5lbmQgXTogc3BhY2UoXG5cdFx0XHRcdG1hcmdpbkVuZCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0fSApKClcblx0KTtcblxuY29uc3QgcmVuZGVyQm9yZGVyID0gKCB7XG5cdCdhcmlhLW9yaWVudGF0aW9uJzogb3JpZW50YXRpb24gPSAnaG9yaXpvbnRhbCcsXG59OiBQcm9wcyApID0+IHtcblx0cmV0dXJuIGNzcygge1xuXHRcdFsgb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCdcblx0XHRcdD8gJ2JvcmRlclJpZ2h0J1xuXHRcdFx0OiAnYm9yZGVyQm90dG9tJyBdOiAnMXB4IHNvbGlkIGN1cnJlbnRDb2xvcicsXG5cdH0gKTtcbn07XG5cbmNvbnN0IHJlbmRlclNpemUgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT5cblx0Y3NzKCB7XG5cdFx0aGVpZ2h0OiBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJyA/ICdhdXRvJyA6IDAsXG5cdFx0d2lkdGg6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gMCA6ICdhdXRvJyxcblx0fSApO1xuXG5leHBvcnQgY29uc3QgRGl2aWRlclZpZXcgPSBzdHlsZWQuaHI8IFByb3BzID5gXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXG5cdCR7IHJlbmRlckJvcmRlciB9XG5cdCR7IHJlbmRlclNpemUgfVxuXHQkeyByZW5kZXJNYXJnaW4gfVxuYDtcbiJdfQ== */"));
+})("border:0;margin:0;", renderDisplay, " ", renderBorder, " ", renderSize, " ", renderMargin, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGl2aWRlci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUU2QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2RpdmlkZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgTUFSR0lOX0RJUkVDVElPTlM6IFJlY29yZDxcblx0Tm9uTnVsbGFibGU8IFByb3BzWyAnb3JpZW50YXRpb24nIF0gPixcblx0UmVjb3JkPCAnc3RhcnQnIHwgJ2VuZCcsIHN0cmluZyA+XG4+ID0ge1xuXHR2ZXJ0aWNhbDoge1xuXHRcdHN0YXJ0OiAnbWFyZ2luTGVmdCcsXG5cdFx0ZW5kOiAnbWFyZ2luUmlnaHQnLFxuXHR9LFxuXHRob3Jpem9udGFsOiB7XG5cdFx0c3RhcnQ6ICdtYXJnaW5Ub3AnLFxuXHRcdGVuZDogJ21hcmdpbkJvdHRvbScsXG5cdH0sXG59O1xuXG4vLyBSZW5kZXJzIHRoZSBjb3JyZWN0IG1hcmdpbnMgZ2l2ZW4gdGhlIERpdmlkZXIncyBgb3JpZW50YXRpb25gIGFuZCB0aGUgd3JpdGluZyBkaXJlY3Rpb24uXG4vLyBXaGVuIGJvdGggdGhlIGdlbmVyaWMgYG1hcmdpbmAgYW5kIHRoZSBzcGVjaWZpYyBgbWFyZ2luU3RhcnR8bWFyZ2luRW5kYCBwcm9wcyBhcmUgZGVmaW5lZCxcbi8vIHRoZSBsYXR0ZXIgd2lsbCB0YWtlIHByaW9yaXR5LlxuY29uc3QgcmVuZGVyTWFyZ2luID0gKCB7XG5cdCdhcmlhLW9yaWVudGF0aW9uJzogb3JpZW50YXRpb24gPSAnaG9yaXpvbnRhbCcsXG5cdG1hcmdpbixcblx0bWFyZ2luU3RhcnQsXG5cdG1hcmdpbkVuZCxcbn06IFByb3BzICkgPT5cblx0Y3NzKFxuXHRcdHJ0bCgge1xuXHRcdFx0WyBNQVJHSU5fRElSRUNUSU9OU1sgb3JpZW50YXRpb24gXS5zdGFydCBdOiBzcGFjZShcblx0XHRcdFx0bWFyZ2luU3RhcnQgPz8gbWFyZ2luXG5cdFx0XHQpLFxuXHRcdFx0WyBNQVJHSU5fRElSRUNUSU9OU1sgb3JpZW50YXRpb24gXS5lbmQgXTogc3BhY2UoXG5cdFx0XHRcdG1hcmdpbkVuZCA/PyBtYXJnaW5cblx0XHRcdCksXG5cdFx0fSApKClcblx0KTtcblxuY29uc3QgcmVuZGVyRGlzcGxheSA9ICgge1xuXHQnYXJpYS1vcmllbnRhdGlvbic6IG9yaWVudGF0aW9uID0gJ2hvcml6b250YWwnLFxufTogUHJvcHMgKSA9PiB7XG5cdHJldHVybiBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJ1xuXHRcdD8gY3NzKCB7IGRpc3BsYXk6ICdpbmxpbmUnIH0gKVxuXHRcdDogdW5kZWZpbmVkO1xufTtcblxuY29uc3QgcmVuZGVyQm9yZGVyID0gKCB7XG5cdCdhcmlhLW9yaWVudGF0aW9uJzogb3JpZW50YXRpb24gPSAnaG9yaXpvbnRhbCcsXG59OiBQcm9wcyApID0+IHtcblx0cmV0dXJuIGNzcygge1xuXHRcdFsgb3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCdcblx0XHRcdD8gJ2JvcmRlclJpZ2h0J1xuXHRcdFx0OiAnYm9yZGVyQm90dG9tJyBdOiAnMXB4IHNvbGlkIGN1cnJlbnRDb2xvcicsXG5cdH0gKTtcbn07XG5cbmNvbnN0IHJlbmRlclNpemUgPSAoIHtcblx0J2FyaWEtb3JpZW50YXRpb24nOiBvcmllbnRhdGlvbiA9ICdob3Jpem9udGFsJyxcbn06IFByb3BzICkgPT5cblx0Y3NzKCB7XG5cdFx0aGVpZ2h0OiBvcmllbnRhdGlvbiA9PT0gJ3ZlcnRpY2FsJyA/ICdhdXRvJyA6IDAsXG5cdFx0d2lkdGg6IG9yaWVudGF0aW9uID09PSAndmVydGljYWwnID8gMCA6ICdhdXRvJyxcblx0fSApO1xuXG5leHBvcnQgY29uc3QgRGl2aWRlclZpZXcgPSBzdHlsZWQuaHI8IFByb3BzID5gXG5cdGJvcmRlcjogMDtcblx0bWFyZ2luOiAwO1xuXG5cdCR7IHJlbmRlckRpc3BsYXkgfVxuXHQkeyByZW5kZXJCb3JkZXIgfVxuXHQkeyByZW5kZXJTaXplIH1cblx0JHsgcmVuZGVyTWFyZ2luIH1cbmA7XG4iXX0= */"));
 exports.DividerView = DividerView;
 //# sourceMappingURL=styles.js.map

package/build/divider/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/divider/styles.ts"],"names":["MARGIN_DIRECTIONS","vertical","start","end","horizontal","renderMargin","orientation","margin","marginStart","marginEnd","renderBorder","renderSize","height","width","DividerView"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAKA,MAAMA,iBAGL,GAAG;AACHC,EAAAA,QAAQ,EAAE;AACTC,IAAAA,KAAK,EAAE,YADE;AAETC,IAAAA,GAAG,EAAE;AAFI,GADP;AAKHC,EAAAA,UAAU,EAAE;AACXF,IAAAA,KAAK,EAAE,WADI;AAEXC,IAAAA,GAAG,EAAE;AAFM;AALT,CAHJ,C,CAcA;AACA;AACA;;AACA,MAAME,YAAY,GAAG;AAAA,MAAE;AACtB,wBAAoBC,WAAW,GAAG,YADZ;AAEtBC,IAAAA,MAFsB;AAGtBC,IAAAA,WAHsB;AAItBC,IAAAA;AAJsB,GAAF;AAAA,sBAMpB,gBACC,gBAAK;AACJ,KAAET,iBAAiB,CAAEM,WAAF,CAAjB,CAAiCJ,KAAnC,GAA4C,kBAC3CM,WAD2C,aAC3CA,WAD2C,cAC3CA,WAD2C,GAC5BD,MAD4B,CADxC;AAIJ,KAAEP,iBAAiB,CAAEM,WAAF,CAAjB,CAAiCH,GAAnC,GAA0C,kBACzCM,SADyC,aACzCA,SADyC,cACzCA,SADyC,GAC5BF,MAD4B;AAJtC,GAAL,GADD,kqFANoB;AAAA,CAArB;;AAiBA,MAAMG,YAAY,GAAG,SAEP;AAAA,MAFS;AACtB,wBAAoBJ,WAAW,GAAG;AADZ,GAET;AACb,sBAAO,gBAAK;AACX,KAAEA,WAAW,KAAK,UAAhB,GACC,aADD,GAEC,cAFH,GAEqB;AAHV,GAAL,kqFAAP;AAKA,CARD;;AAUA,MAAMK,UAAU,GAAG;AAAA,MAAE;AACpB,wBAAoBL,WAAW,GAAG;AADd,GAAF;AAAA,sBAGlB,gBAAK;AACJM,IAAAA,MAAM,EAAEN,WAAW,KAAK,UAAhB,GAA6B,MAA7B,GAAsC,CAD1C;AAEJO,IAAAA,KAAK,EAAEP,WAAW,KAAK,UAAhB,GAA6B,CAA7B,GAAiC;AAFpC,GAAL,gqFAHkB;AAAA,CAAnB;;AAQO,MAAMQ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,yBAIpBJ,YAJoB,OAKpBC,UALoB,OAMpBN,YANoB,ymFAAjB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { space } from '../ui/utils/space';\nimport { rtl } from '../utils';\nimport type { Props } from './types';\n\nconst MARGIN_DIRECTIONS: Record<\n\tNonNullable< Props[ 'orientation' ] >,\n\tRecord< 'start' | 'end', string >\n> = {\n\tvertical: {\n\t\tstart: 'marginLeft',\n\t\tend: 'marginRight',\n\t},\n\thorizontal: {\n\t\tstart: 'marginTop',\n\t\tend: 'marginBottom',\n\t},\n};\n\n// Renders the correct margins given the Divider's `orientation` and the writing direction.\n// When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,\n// the latter will take priority.\nconst renderMargin = ( {\n\t'aria-orientation': orientation = 'horizontal',\n\tmargin,\n\tmarginStart,\n\tmarginEnd,\n}: Props ) =>\n\tcss(\n\t\trtl( {\n\t\t\t[ MARGIN_DIRECTIONS[ orientation ].start ]: space(\n\t\t\t\tmarginStart ?? margin\n\t\t\t),\n\t\t\t[ MARGIN_DIRECTIONS[ orientation ].end ]: space(\n\t\t\t\tmarginEnd ?? margin\n\t\t\t),\n\t\t} )()\n\t);\n\nconst renderBorder = ( {\n\t'aria-orientation': orientation = 'horizontal',\n}: Props ) => {\n\treturn css( {\n\t\t[ orientation === 'vertical'\n\t\t\t? 'borderRight'\n\t\t\t: 'borderBottom' ]: '1px solid currentColor',\n\t} );\n};\n\nconst renderSize = ( {\n\t'aria-orientation': orientation = 'horizontal',\n}: Props ) =>\n\tcss( {\n\t\theight: orientation === 'vertical' ? 'auto' : 0,\n\t\twidth: orientation === 'vertical' ? 0 : 'auto',\n\t} );\n\nexport const DividerView = styled.hr< Props >`\n\tborder: 0;\n\tmargin: 0;\n\n\t${ renderBorder }\n\t${ renderSize }\n\t${ renderMargin }\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/divider/styles.ts"],"names":["MARGIN_DIRECTIONS","vertical","start","end","horizontal","renderMargin","orientation","margin","marginStart","marginEnd","renderDisplay","undefined","renderBorder","renderSize","height","width","DividerView"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;AACA;;;;AAGA,MAAMA,iBAGL,GAAG;AACHC,EAAAA,QAAQ,EAAE;AACTC,IAAAA,KAAK,EAAE,YADE;AAETC,IAAAA,GAAG,EAAE;AAFI,GADP;AAKHC,EAAAA,UAAU,EAAE;AACXF,IAAAA,KAAK,EAAE,WADI;AAEXC,IAAAA,GAAG,EAAE;AAFM;AALT,CAHJ,C,CAcA;AACA;AACA;;AACA,MAAME,YAAY,GAAG;AAAA,MAAE;AACtB,wBAAoBC,WAAW,GAAG,YADZ;AAEtBC,IAAAA,MAFsB;AAGtBC,IAAAA,WAHsB;AAItBC,IAAAA;AAJsB,GAAF;AAAA,sBAMpB,gBACC,gBAAK;AACJ,KAAET,iBAAiB,CAAEM,WAAF,CAAjB,CAAiCJ,KAAnC,GAA4C,kBAC3CM,WAD2C,aAC3CA,WAD2C,cAC3CA,WAD2C,GAC5BD,MAD4B,CADxC;AAIJ,KAAEP,iBAAiB,CAAEM,WAAF,CAAjB,CAAiCH,GAAnC,GAA0C,kBACzCM,SADyC,aACzCA,SADyC,cACzCA,SADyC,GAC5BF,MAD4B;AAJtC,GAAL,GADD,k8FANoB;AAAA,CAArB;;;;;;;;;;;;AAiBA,MAAMG,aAAa,GAAG,SAER;AAAA,MAFU;AACvB,wBAAoBJ,WAAW,GAAG;AADX,GAEV;AACb,SAAOA,WAAW,KAAK,UAAhB,UAEJK,SAFH;AAGA,CAND;;AAQA,MAAMC,YAAY,GAAG,SAEP;AAAA,MAFS;AACtB,wBAAoBN,WAAW,GAAG;AADZ,GAET;AACb,sBAAO,gBAAK;AACX,KAAEA,WAAW,KAAK,UAAhB,GACC,aADD,GAEC,cAFH,GAEqB;AAHV,GAAL,k8FAAP;AAKA,CARD;;AAUA,MAAMO,UAAU,GAAG;AAAA,MAAE;AACpB,wBAAoBP,WAAW,GAAG;AADd,GAAF;AAAA,sBAGlB,gBAAK;AACJQ,IAAAA,MAAM,EAAER,WAAW,KAAK,UAAhB,GAA6B,MAA7B,GAAsC,CAD1C;AAEJS,IAAAA,KAAK,EAAET,WAAW,KAAK,UAAhB,GAA6B,CAA7B,GAAiC;AAFpC,GAAL,g8FAHkB;AAAA,CAAnB;;AAQO,MAAMU,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,yBAIpBN,aAJoB,OAKpBE,YALoB,OAMpBC,UANoB,OAOpBR,YAPoB,q4FAAjB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { space } from '../ui/utils/space';\nimport { rtl } from '../utils';\nimport type { Props } from './types';\n\nconst MARGIN_DIRECTIONS: Record<\n\tNonNullable< Props[ 'orientation' ] >,\n\tRecord< 'start' | 'end', string >\n> = {\n\tvertical: {\n\t\tstart: 'marginLeft',\n\t\tend: 'marginRight',\n\t},\n\thorizontal: {\n\t\tstart: 'marginTop',\n\t\tend: 'marginBottom',\n\t},\n};\n\n// Renders the correct margins given the Divider's `orientation` and the writing direction.\n// When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,\n// the latter will take priority.\nconst renderMargin = ( {\n\t'aria-orientation': orientation = 'horizontal',\n\tmargin,\n\tmarginStart,\n\tmarginEnd,\n}: Props ) =>\n\tcss(\n\t\trtl( {\n\t\t\t[ MARGIN_DIRECTIONS[ orientation ].start ]: space(\n\t\t\t\tmarginStart ?? margin\n\t\t\t),\n\t\t\t[ MARGIN_DIRECTIONS[ orientation ].end ]: space(\n\t\t\t\tmarginEnd ?? margin\n\t\t\t),\n\t\t} )()\n\t);\n\nconst renderDisplay = ( {\n\t'aria-orientation': orientation = 'horizontal',\n}: Props ) => {\n\treturn orientation === 'vertical'\n\t\t? css( { display: 'inline' } )\n\t\t: undefined;\n};\n\nconst renderBorder = ( {\n\t'aria-orientation': orientation = 'horizontal',\n}: Props ) => {\n\treturn css( {\n\t\t[ orientation === 'vertical'\n\t\t\t? 'borderRight'\n\t\t\t: 'borderBottom' ]: '1px solid currentColor',\n\t} );\n};\n\nconst renderSize = ( {\n\t'aria-orientation': orientation = 'horizontal',\n}: Props ) =>\n\tcss( {\n\t\theight: orientation === 'vertical' ? 'auto' : 0,\n\t\twidth: orientation === 'vertical' ? 0 : 'auto',\n\t} );\n\nexport const DividerView = styled.hr< Props >`\n\tborder: 0;\n\tmargin: 0;\n\n\t${ renderDisplay }\n\t${ renderBorder }\n\t${ renderSize }\n\t${ renderMargin }\n`;\n"]}