@wordpress/components 31.0.1-next.6deb34194.0 → 31.0.1-next.738bb1424.0

package/build-module/popover/utils.js

@@ -1,4 +1,5 @@
 // packages/components/src/popover/utils.ts
+import { cubicBezier } from "framer-motion";
 var POSITION_TO_PLACEMENT = {
   bottom: "bottom",
   top: "top",
@@ -129,17 +130,21 @@ var placementToMotionAnimationProps = (placement) => {
     style: PLACEMENT_TO_ANIMATION_ORIGIN[placement],
     initial: {
       opacity: 0,
-      scale: 0,
-      [translateProp]: `${2 * translateDirection}em`
+      [translateProp]: `${4 * translateDirection}px`
     },
     animate: {
       opacity: 1,
-      scale: 1,
       [translateProp]: 0
     },
     transition: {
-      duration: 0.1,
-      ease: [0, 0, 0.2, 1]
+      opacity: {
+        duration: 0.08,
+        ease: "linear"
+      },
+      [translateProp]: {
+        duration: 0.3,
+        ease: cubicBezier(0, 0, 0, 1)
+      }
     }
   };
 };

package/build-module/popover/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/popover/utils.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\n\nconst POSITION_TO_PLACEMENT = {\n  bottom: 'bottom',\n  top: 'top',\n  'middle left': 'left',\n  'middle right': 'right',\n  'bottom left': 'bottom-end',\n  'bottom center': 'bottom',\n  'bottom right': 'bottom-start',\n  'top left': 'top-end',\n  'top center': 'top',\n  'top right': 'top-start',\n  'middle left left': 'left',\n  'middle left right': 'left',\n  'middle left bottom': 'left-end',\n  'middle left top': 'left-start',\n  'middle right left': 'right',\n  'middle right right': 'right',\n  'middle right bottom': 'right-end',\n  'middle right top': 'right-start',\n  'bottom left left': 'bottom-end',\n  'bottom left right': 'bottom-end',\n  'bottom left bottom': 'bottom-end',\n  'bottom left top': 'bottom-end',\n  'bottom center left': 'bottom',\n  'bottom center right': 'bottom',\n  'bottom center bottom': 'bottom',\n  'bottom center top': 'bottom',\n  'bottom right left': 'bottom-start',\n  'bottom right right': 'bottom-start',\n  'bottom right bottom': 'bottom-start',\n  'bottom right top': 'bottom-start',\n  'top left left': 'top-end',\n  'top left right': 'top-end',\n  'top left bottom': 'top-end',\n  'top left top': 'top-end',\n  'top center left': 'top',\n  'top center right': 'top',\n  'top center bottom': 'top',\n  'top center top': 'top',\n  'top right left': 'top-start',\n  'top right right': 'top-start',\n  'top right bottom': 'top-start',\n  'top right top': 'top-start',\n  // `middle`/`middle center [corner?]` positions are associated to a fallback\n  // `bottom` placement because there aren't any corresponding placement values.\n  middle: 'bottom',\n  'middle center': 'bottom',\n  'middle center bottom': 'bottom',\n  'middle center left': 'bottom',\n  'middle center right': 'bottom',\n  'middle center top': 'bottom'\n};\n\n/**\n * Converts the `Popover`'s legacy \"position\" prop to the new \"placement\" prop\n * (used by `floating-ui`).\n *\n * @param position The legacy position\n * @return The corresponding placement\n */\nexport const positionToPlacement = position => {\n  var _POSITION_TO_PLACEMEN;\n  return (_POSITION_TO_PLACEMEN = POSITION_TO_PLACEMENT[position]) !== null && _POSITION_TO_PLACEMEN !== void 0 ? _POSITION_TO_PLACEMEN : 'bottom';\n};\n\n/**\n * @typedef AnimationOrigin\n * @type {Object}\n * @property {number} originX A number between 0 and 1 (in CSS logical properties jargon, 0 is \"start\", 0.5 is \"center\", and 1 is \"end\")\n * @property {number} originY A number between 0 and 1 (0 is top, 0.5 is center, and 1 is bottom)\n */\n\nconst PLACEMENT_TO_ANIMATION_ORIGIN = {\n  top: {\n    originX: 0.5,\n    originY: 1\n  },\n  // open from bottom, center\n  'top-start': {\n    originX: 0,\n    originY: 1\n  },\n  // open from bottom, left\n  'top-end': {\n    originX: 1,\n    originY: 1\n  },\n  // open from bottom, right\n  right: {\n    originX: 0,\n    originY: 0.5\n  },\n  // open from middle, left\n  'right-start': {\n    originX: 0,\n    originY: 0\n  },\n  // open from top, left\n  'right-end': {\n    originX: 0,\n    originY: 1\n  },\n  // open from bottom, left\n  bottom: {\n    originX: 0.5,\n    originY: 0\n  },\n  // open from top, center\n  'bottom-start': {\n    originX: 0,\n    originY: 0\n  },\n  // open from top, left\n  'bottom-end': {\n    originX: 1,\n    originY: 0\n  },\n  // open from top, right\n  left: {\n    originX: 1,\n    originY: 0.5\n  },\n  // open from middle, right\n  'left-start': {\n    originX: 1,\n    originY: 0\n  },\n  // open from top, right\n  'left-end': {\n    originX: 1,\n    originY: 1\n  },\n  // open from bottom, right\n  overlay: {\n    originX: 0.5,\n    originY: 0.5\n  } // open from center, center\n};\n\n/**\n * Given the floating-ui `placement`, compute the framer-motion props for the\n * popover's entry animation.\n *\n * @param placement A placement string from floating ui\n * @return The object containing the motion props\n */\nexport const placementToMotionAnimationProps = placement => {\n  const translateProp = placement.startsWith('top') || placement.startsWith('bottom') ? 'translateY' : 'translateX';\n  const translateDirection = placement.startsWith('top') || placement.startsWith('left') ? 1 : -1;\n  return {\n    style: PLACEMENT_TO_ANIMATION_ORIGIN[placement],\n    initial: {\n      opacity: 0,\n      scale: 0,\n      [translateProp]: `${2 * translateDirection}em`\n    },\n    animate: {\n      opacity: 1,\n      scale: 1,\n      [translateProp]: 0\n    },\n    transition: {\n      duration: 0.1,\n      ease: [0, 0, 0.2, 1]\n    }\n  };\n};\nfunction isTopBottom(anchorRef) {\n  return !!anchorRef?.top;\n}\nfunction isRef(anchorRef) {\n  return !!anchorRef?.current;\n}\nexport const getReferenceElement = ({\n  anchor,\n  anchorRef,\n  anchorRect,\n  getAnchorRect,\n  fallbackReferenceElement\n}) => {\n  var _referenceElement;\n  let referenceElement = null;\n  if (anchor) {\n    referenceElement = anchor;\n  } else if (isTopBottom(anchorRef)) {\n    // Create a virtual element for the ref. The expectation is that\n    // if anchorRef.top is defined, then anchorRef.bottom is defined too.\n    // Seems to be used by the block toolbar, when multiple blocks are selected\n    // (top and bottom blocks are used to calculate the resulting rect).\n    referenceElement = {\n      getBoundingClientRect() {\n        const topRect = anchorRef.top.getBoundingClientRect();\n        const bottomRect = anchorRef.bottom.getBoundingClientRect();\n        return new window.DOMRect(topRect.x, topRect.y, topRect.width, bottomRect.bottom - topRect.top);\n      }\n    };\n  } else if (isRef(anchorRef)) {\n    // Standard React ref.\n    referenceElement = anchorRef.current;\n  } else if (anchorRef) {\n    // If `anchorRef` holds directly the element's value (no `current` key)\n    // This is a weird scenario and should be deprecated.\n    referenceElement = anchorRef;\n  } else if (anchorRect) {\n    // Create a virtual element for the ref.\n    referenceElement = {\n      getBoundingClientRect() {\n        return anchorRect;\n      }\n    };\n  } else if (getAnchorRect) {\n    // Create a virtual element for the ref.\n    referenceElement = {\n      getBoundingClientRect() {\n        var _rect$x, _rect$y, _rect$width, _rect$height;\n        const rect = getAnchorRect(fallbackReferenceElement);\n        return new window.DOMRect((_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left, (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top, (_rect$width = rect.width) !== null && _rect$width !== void 0 ? _rect$width : rect.right - rect.left, (_rect$height = rect.height) !== null && _rect$height !== void 0 ? _rect$height : rect.bottom - rect.top);\n      }\n    };\n  } else if (fallbackReferenceElement) {\n    // If no explicit ref is passed via props, fall back to\n    // anchoring to the popover's parent node.\n    referenceElement = fallbackReferenceElement.parentElement;\n  }\n\n  // Convert any `undefined` value to `null`.\n  return (_referenceElement = referenceElement) !== null && _referenceElement !== void 0 ? _referenceElement : null;\n};\n\n/**\n * Computes the final coordinate that needs to be applied to the floating\n * element when applying transform inline styles, defaulting to `undefined`\n * if the provided value is `null` or `NaN`.\n *\n * @param c input coordinate (usually as returned from floating-ui)\n * @return The coordinate's value to be used for inline styles. An `undefined`\n *         return value means \"no style set\" for this coordinate.\n */\nexport const computePopoverPosition = c => c === null || Number.isNaN(c) ? undefined : Math.round(c);"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { cubicBezier } from 'framer-motion';\n\n/**\n * Internal dependencies\n */\n\nconst POSITION_TO_PLACEMENT = {\n  bottom: 'bottom',\n  top: 'top',\n  'middle left': 'left',\n  'middle right': 'right',\n  'bottom left': 'bottom-end',\n  'bottom center': 'bottom',\n  'bottom right': 'bottom-start',\n  'top left': 'top-end',\n  'top center': 'top',\n  'top right': 'top-start',\n  'middle left left': 'left',\n  'middle left right': 'left',\n  'middle left bottom': 'left-end',\n  'middle left top': 'left-start',\n  'middle right left': 'right',\n  'middle right right': 'right',\n  'middle right bottom': 'right-end',\n  'middle right top': 'right-start',\n  'bottom left left': 'bottom-end',\n  'bottom left right': 'bottom-end',\n  'bottom left bottom': 'bottom-end',\n  'bottom left top': 'bottom-end',\n  'bottom center left': 'bottom',\n  'bottom center right': 'bottom',\n  'bottom center bottom': 'bottom',\n  'bottom center top': 'bottom',\n  'bottom right left': 'bottom-start',\n  'bottom right right': 'bottom-start',\n  'bottom right bottom': 'bottom-start',\n  'bottom right top': 'bottom-start',\n  'top left left': 'top-end',\n  'top left right': 'top-end',\n  'top left bottom': 'top-end',\n  'top left top': 'top-end',\n  'top center left': 'top',\n  'top center right': 'top',\n  'top center bottom': 'top',\n  'top center top': 'top',\n  'top right left': 'top-start',\n  'top right right': 'top-start',\n  'top right bottom': 'top-start',\n  'top right top': 'top-start',\n  // `middle`/`middle center [corner?]` positions are associated to a fallback\n  // `bottom` placement because there aren't any corresponding placement values.\n  middle: 'bottom',\n  'middle center': 'bottom',\n  'middle center bottom': 'bottom',\n  'middle center left': 'bottom',\n  'middle center right': 'bottom',\n  'middle center top': 'bottom'\n};\n\n/**\n * Converts the `Popover`'s legacy \"position\" prop to the new \"placement\" prop\n * (used by `floating-ui`).\n *\n * @param position The legacy position\n * @return The corresponding placement\n */\nexport const positionToPlacement = position => {\n  var _POSITION_TO_PLACEMEN;\n  return (_POSITION_TO_PLACEMEN = POSITION_TO_PLACEMENT[position]) !== null && _POSITION_TO_PLACEMEN !== void 0 ? _POSITION_TO_PLACEMEN : 'bottom';\n};\n\n/**\n * @typedef AnimationOrigin\n * @type {Object}\n * @property {number} originX A number between 0 and 1 (in CSS logical properties jargon, 0 is \"start\", 0.5 is \"center\", and 1 is \"end\")\n * @property {number} originY A number between 0 and 1 (0 is top, 0.5 is center, and 1 is bottom)\n */\n\nconst PLACEMENT_TO_ANIMATION_ORIGIN = {\n  top: {\n    originX: 0.5,\n    originY: 1\n  },\n  // open from bottom, center\n  'top-start': {\n    originX: 0,\n    originY: 1\n  },\n  // open from bottom, left\n  'top-end': {\n    originX: 1,\n    originY: 1\n  },\n  // open from bottom, right\n  right: {\n    originX: 0,\n    originY: 0.5\n  },\n  // open from middle, left\n  'right-start': {\n    originX: 0,\n    originY: 0\n  },\n  // open from top, left\n  'right-end': {\n    originX: 0,\n    originY: 1\n  },\n  // open from bottom, left\n  bottom: {\n    originX: 0.5,\n    originY: 0\n  },\n  // open from top, center\n  'bottom-start': {\n    originX: 0,\n    originY: 0\n  },\n  // open from top, left\n  'bottom-end': {\n    originX: 1,\n    originY: 0\n  },\n  // open from top, right\n  left: {\n    originX: 1,\n    originY: 0.5\n  },\n  // open from middle, right\n  'left-start': {\n    originX: 1,\n    originY: 0\n  },\n  // open from top, right\n  'left-end': {\n    originX: 1,\n    originY: 1\n  },\n  // open from bottom, right\n  overlay: {\n    originX: 0.5,\n    originY: 0.5\n  } // open from center, center\n};\n\n/**\n * Given the floating-ui `placement`, compute the framer-motion props for the\n * popover's entry animation.\n *\n * @param placement A placement string from floating ui\n * @return The object containing the motion props\n */\nexport const placementToMotionAnimationProps = placement => {\n  const translateProp = placement.startsWith('top') || placement.startsWith('bottom') ? 'translateY' : 'translateX';\n  const translateDirection = placement.startsWith('top') || placement.startsWith('left') ? 1 : -1;\n  return {\n    style: PLACEMENT_TO_ANIMATION_ORIGIN[placement],\n    initial: {\n      opacity: 0,\n      [translateProp]: `${4 * translateDirection}px`\n    },\n    animate: {\n      opacity: 1,\n      [translateProp]: 0\n    },\n    transition: {\n      opacity: {\n        duration: 0.08,\n        ease: 'linear'\n      },\n      [translateProp]: {\n        duration: 0.3,\n        ease: cubicBezier(0, 0, 0, 1)\n      }\n    }\n  };\n};\nfunction isTopBottom(anchorRef) {\n  return !!anchorRef?.top;\n}\nfunction isRef(anchorRef) {\n  return !!anchorRef?.current;\n}\nexport const getReferenceElement = ({\n  anchor,\n  anchorRef,\n  anchorRect,\n  getAnchorRect,\n  fallbackReferenceElement\n}) => {\n  var _referenceElement;\n  let referenceElement = null;\n  if (anchor) {\n    referenceElement = anchor;\n  } else if (isTopBottom(anchorRef)) {\n    // Create a virtual element for the ref. The expectation is that\n    // if anchorRef.top is defined, then anchorRef.bottom is defined too.\n    // Seems to be used by the block toolbar, when multiple blocks are selected\n    // (top and bottom blocks are used to calculate the resulting rect).\n    referenceElement = {\n      getBoundingClientRect() {\n        const topRect = anchorRef.top.getBoundingClientRect();\n        const bottomRect = anchorRef.bottom.getBoundingClientRect();\n        return new window.DOMRect(topRect.x, topRect.y, topRect.width, bottomRect.bottom - topRect.top);\n      }\n    };\n  } else if (isRef(anchorRef)) {\n    // Standard React ref.\n    referenceElement = anchorRef.current;\n  } else if (anchorRef) {\n    // If `anchorRef` holds directly the element's value (no `current` key)\n    // This is a weird scenario and should be deprecated.\n    referenceElement = anchorRef;\n  } else if (anchorRect) {\n    // Create a virtual element for the ref.\n    referenceElement = {\n      getBoundingClientRect() {\n        return anchorRect;\n      }\n    };\n  } else if (getAnchorRect) {\n    // Create a virtual element for the ref.\n    referenceElement = {\n      getBoundingClientRect() {\n        var _rect$x, _rect$y, _rect$width, _rect$height;\n        const rect = getAnchorRect(fallbackReferenceElement);\n        return new window.DOMRect((_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left, (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top, (_rect$width = rect.width) !== null && _rect$width !== void 0 ? _rect$width : rect.right - rect.left, (_rect$height = rect.height) !== null && _rect$height !== void 0 ? _rect$height : rect.bottom - rect.top);\n      }\n    };\n  } else if (fallbackReferenceElement) {\n    // If no explicit ref is passed via props, fall back to\n    // anchoring to the popover's parent node.\n    referenceElement = fallbackReferenceElement.parentElement;\n  }\n\n  // Convert any `undefined` value to `null`.\n  return (_referenceElement = referenceElement) !== null && _referenceElement !== void 0 ? _referenceElement : null;\n};\n\n/**\n * Computes the final coordinate that needs to be applied to the floating\n * element when applying transform inline styles, defaulting to `undefined`\n * if the provided value is `null` or `NaN`.\n *\n * @param c input coordinate (usually as returned from floating-ui)\n * @return The coordinate's value to be used for inline styles. An `undefined`\n *         return value means \"no style set\" for this coordinate.\n */\nexport const computePopoverPosition = c => c === null || Number.isNaN(c) ? undefined : Math.round(c);"],
+  "mappings": "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",
   "names": []
 }

package/build-module/private-apis.js

@@ -1,17 +1,17 @@
 // packages/components/src/private-apis.ts
-import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from "./popover/utils";
-import { Menu } from "./menu";
-import { ComponentsContext } from "./context/context-system-provider";
-import Theme from "./theme";
-import { Tabs } from "./tabs";
-import { kebabCase, normalizeTextString } from "./utils/strings";
-import { withIgnoreIMEEvents } from "./utils/with-ignore-ime-events";
-import { lock } from "./lock-unlock";
-import Badge from "./badge";
-import { DateCalendar, DateRangeCalendar, TZDate } from "./calendar";
-import { ValidatedCheckboxControl, ValidatedInputControl, ValidatedNumberControl, ValidatedSelectControl, ValidatedRadioControl, ValidatedTextControl, ValidatedTextareaControl, ValidatedToggleControl, ValidatedToggleGroupControl } from "./validated-form-controls";
-import { ValidatedFormTokenField } from "./validated-form-controls/components/form-token-field";
-import { Picker } from "./color-picker/picker";
+import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from "./popover/utils.js";
+import { Menu } from "./menu/index.js";
+import { ComponentsContext } from "./context/context-system-provider.js";
+import Theme from "./theme/index.js";
+import { Tabs } from "./tabs/index.js";
+import { kebabCase, normalizeTextString } from "./utils/strings.js";
+import { withIgnoreIMEEvents } from "./utils/with-ignore-ime-events.js";
+import { lock } from "./lock-unlock.js";
+import Badge from "./badge/index.js";
+import { DateCalendar, DateRangeCalendar, TZDate } from "./calendar/index.js";
+import { ValidatedCheckboxControl, ValidatedInputControl, ValidatedNumberControl, ValidatedSelectControl, ValidatedRadioControl, ValidatedTextControl, ValidatedTextareaControl, ValidatedToggleControl, ValidatedToggleGroupControl } from "./validated-form-controls/index.js";
+import { ValidatedFormTokenField } from "./validated-form-controls/components/form-token-field.js";
+import { Picker } from "./color-picker/picker.js";
 var privateApis = {};
 lock(privateApis, {
   __experimentalPopoverLegacyPositionToPlacement,

package/build-module/progress-bar/index.js

@@ -1,7 +1,7 @@
 // packages/components/src/progress-bar/index.tsx
 import { __ } from "@wordpress/i18n";
 import { forwardRef } from "@wordpress/element";
-import * as ProgressBarStyled from "./styles";
+import * as ProgressBarStyled from "./styles.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function UnforwardedProgressBar(props, ref) {
   const {

package/build-module/progress-bar/styles.js

@@ -2,7 +2,7 @@
 import _styled from "@emotion/styled/base";
 import { css, keyframes } from "@emotion/react";
 import { isRTL } from "@wordpress/i18n";
-import { COLORS, CONFIG } from "../utils";
+import { COLORS, CONFIG } from "../utils/index.js";
 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).";
 }

package/build-module/query-controls/author-select.js

@@ -1,6 +1,6 @@
 // packages/components/src/query-controls/author-select.tsx
-import { buildTermsTree } from "./terms";
-import TreeSelect from "../tree-select";
+import { buildTermsTree } from "./terms.js";
+import TreeSelect from "../tree-select/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function AuthorSelect({
   __next40pxDefaultSize,
@@ -20,7 +20,6 @@ function AuthorSelect({
     onChange: onChangeProp,
     tree: termsTree,
     selectedId: selectedAuthorId !== void 0 ? String(selectedAuthorId) : void 0,
-    __nextHasNoMarginBottom: true,
     __next40pxDefaultSize
   });
 }

package/build-module/query-controls/author-select.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/query-controls/author-select.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { buildTermsTree } from './terms';\nimport TreeSelect from '../tree-select';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function AuthorSelect({\n  __next40pxDefaultSize,\n  label,\n  noOptionLabel,\n  authorList,\n  selectedAuthorId,\n  onChange: onChangeProp\n}) {\n  if (!authorList) {\n    return null;\n  }\n  const termsTree = buildTermsTree(authorList);\n  return /*#__PURE__*/_jsx(TreeSelect, {\n    label,\n    noOptionLabel,\n    onChange: onChangeProp,\n    tree: termsTree,\n    selectedId: selectedAuthorId !== undefined ? String(selectedAuthorId) : undefined,\n    __nextHasNoMarginBottom: true,\n    __next40pxDefaultSize: __next40pxDefaultSize\n  });\n}"],
-  "mappings": ";AAGA,SAAS,sBAAsB;AAC/B,OAAO,gBAAgB;AACvB,SAAS,OAAO,YAAY;AACb,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAAG;AACD,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AACA,QAAM,YAAY,eAAe,UAAU;AAC3C,SAAoB,qBAAK,YAAY;AAAA,IACnC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN,YAAY,qBAAqB,SAAY,OAAO,gBAAgB,IAAI;AAAA,IACxE,yBAAyB;AAAA,IACzB;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { buildTermsTree } from './terms';\nimport TreeSelect from '../tree-select';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function AuthorSelect({\n  __next40pxDefaultSize,\n  label,\n  noOptionLabel,\n  authorList,\n  selectedAuthorId,\n  onChange: onChangeProp\n}) {\n  if (!authorList) {\n    return null;\n  }\n  const termsTree = buildTermsTree(authorList);\n  return /*#__PURE__*/_jsx(TreeSelect, {\n    label,\n    noOptionLabel,\n    onChange: onChangeProp,\n    tree: termsTree,\n    selectedId: selectedAuthorId !== undefined ? String(selectedAuthorId) : undefined,\n    __next40pxDefaultSize: __next40pxDefaultSize\n  });\n}"],
+  "mappings": ";AAGA,SAAS,sBAAsB;AAC/B,OAAO,gBAAgB;AACvB,SAAS,OAAO,YAAY;AACb,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAAG;AACD,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AACA,QAAM,YAAY,eAAe,UAAU;AAC3C,SAAoB,qBAAK,YAAY;AAAA,IACnC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN,YAAY,qBAAqB,SAAY,OAAO,gBAAgB,IAAI;AAAA,IACxE;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/build-module/query-controls/category-select.js

@@ -1,7 +1,7 @@
 // packages/components/src/query-controls/category-select.tsx
-import { buildTermsTree } from "./terms";
-import TreeSelect from "../tree-select";
 import { useMemo } from "@wordpress/element";
+import { buildTermsTree } from "./terms.js";
+import TreeSelect from "../tree-select/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function CategorySelect({
   __next40pxDefaultSize,
@@ -22,7 +22,6 @@ function CategorySelect({
     tree: termsTree,
     selectedId: selectedCategoryId !== void 0 ? String(selectedCategoryId) : void 0,
     ...props,
-    __nextHasNoMarginBottom: true,
     __next40pxDefaultSize
   });
 }

package/build-module/query-controls/category-select.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/query-controls/category-select.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { buildTermsTree } from './terms';\nimport TreeSelect from '../tree-select';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function CategorySelect({\n  __next40pxDefaultSize,\n  label,\n  noOptionLabel,\n  categoriesList,\n  selectedCategoryId,\n  onChange: onChangeProp,\n  ...props\n}) {\n  const termsTree = useMemo(() => {\n    return buildTermsTree(categoriesList);\n  }, [categoriesList]);\n  return /*#__PURE__*/_jsx(TreeSelect, {\n    label,\n    noOptionLabel,\n    onChange: onChangeProp,\n    tree: termsTree,\n    selectedId: selectedCategoryId !== undefined ? String(selectedCategoryId) : undefined,\n    ...props,\n    __nextHasNoMarginBottom: true,\n    __next40pxDefaultSize: __next40pxDefaultSize\n  });\n}"],
-  "mappings": ";AAGA,SAAS,sBAAsB;AAC/B,OAAO,gBAAgB;AAKvB,SAAS,eAAe;AACxB,SAAS,OAAO,YAAY;AACb,SAAR,eAAgC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAG;AACD,QAAM,YAAY,QAAQ,MAAM;AAC9B,WAAO,eAAe,cAAc;AAAA,EACtC,GAAG,CAAC,cAAc,CAAC;AACnB,SAAoB,qBAAK,YAAY;AAAA,IACnC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN,YAAY,uBAAuB,SAAY,OAAO,kBAAkB,IAAI;AAAA,IAC5E,GAAG;AAAA,IACH,yBAAyB;AAAA,IACzB;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import { useMemo } from '@wordpress/element';\nimport { buildTermsTree } from './terms';\nimport TreeSelect from '../tree-select';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function CategorySelect({\n  __next40pxDefaultSize,\n  label,\n  noOptionLabel,\n  categoriesList,\n  selectedCategoryId,\n  onChange: onChangeProp,\n  ...props\n}) {\n  const termsTree = useMemo(() => {\n    return buildTermsTree(categoriesList);\n  }, [categoriesList]);\n  return /*#__PURE__*/_jsx(TreeSelect, {\n    label,\n    noOptionLabel,\n    onChange: onChangeProp,\n    tree: termsTree,\n    selectedId: selectedCategoryId !== undefined ? String(selectedCategoryId) : undefined,\n    ...props,\n    __next40pxDefaultSize: __next40pxDefaultSize\n  });\n}"],
+  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,OAAO,gBAAgB;AACvB,SAAS,OAAO,YAAY;AACb,SAAR,eAAgC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAG;AACD,QAAM,YAAY,QAAQ,MAAM;AAC9B,WAAO,eAAe,cAAc;AAAA,EACtC,GAAG,CAAC,cAAc,CAAC;AACnB,SAAoB,qBAAK,YAAY;AAAA,IACnC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN,YAAY,uBAAuB,SAAY,OAAO,kBAAkB,IAAI;AAAA,IAC5E,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/build-module/query-controls/index.js

@@ -1,11 +1,11 @@
 // packages/components/src/query-controls/index.tsx
 import { __, _x } from "@wordpress/i18n";
-import AuthorSelect from "./author-select";
-import CategorySelect from "./category-select";
-import FormTokenField from "../form-token-field";
-import RangeControl from "../range-control";
-import SelectControl from "../select-control";
-import { VStack } from "../v-stack";
+import AuthorSelect from "./author-select.js";
+import CategorySelect from "./category-select.js";
+import FormTokenField from "../form-token-field/index.js";
+import RangeControl from "../range-control/index.js";
+import SelectControl from "../select-control/index.js";
+import { VStack } from "../v-stack/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var DEFAULT_MIN_ITEMS = 1;
 var DEFAULT_MAX_ITEMS = 100;
@@ -52,7 +52,6 @@ function QueryControls({
     spacing: "4",
     className: "components-query-controls",
     children: [onOrderChange && onOrderByChange && /* @__PURE__ */ _jsx(SelectControl, {
-      __nextHasNoMarginBottom: true,
       __next40pxDefaultSize: true,
       label: __("Order by"),
       value: orderBy === void 0 || order === void 0 ? void 0 : `${orderBy}/${order}`,
@@ -78,7 +77,6 @@ function QueryControls({
       onChange: props.onCategoryChange
     }, "query-controls-category-select"), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && /* @__PURE__ */ _jsx(FormTokenField, {
       __next40pxDefaultSize: true,
-      __nextHasNoMarginBottom: true,
       label: __("Categories"),
       value: props.selectedCategories && props.selectedCategories.map((item) => ({
         id: item.id,
@@ -99,7 +97,6 @@ function QueryControls({
       selectedAuthorId,
       onChange: onAuthorChange
     }, "query-controls-author-select"), onNumberOfItemsChange && /* @__PURE__ */ _jsx(RangeControl, {
-      __nextHasNoMarginBottom: true,
       __next40pxDefaultSize: true,
       label: __("Number of items"),
       value: numberOfItems,

package/build-module/query-controls/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/query-controls/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AuthorSelect from './author-select';\nimport CategorySelect from './category-select';\nimport FormTokenField from '../form-token-field';\nimport RangeControl from '../range-control';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_MIN_ITEMS = 1;\nconst DEFAULT_MAX_ITEMS = 100;\nconst MAX_CATEGORIES_SUGGESTIONS = 20;\nfunction isSingleCategorySelection(props) {\n  return 'categoriesList' in props;\n}\nfunction isMultipleCategorySelection(props) {\n  return 'categorySuggestions' in props;\n}\nconst defaultOrderByOptions = [{\n  label: __('Newest to oldest'),\n  value: 'date/desc'\n}, {\n  label: __('Oldest to newest'),\n  value: 'date/asc'\n}, {\n  /* translators: Label for ordering posts by title in ascending order. */\n  label: __('A \u2192 Z'),\n  value: 'title/asc'\n}, {\n  /* translators: Label for ordering posts by title in descending order. */\n  label: __('Z \u2192 A'),\n  value: 'title/desc'\n}];\n\n/**\n * Controls to query for posts.\n *\n * ```jsx\n * const MyQueryControls = () => (\n *   <QueryControls\n *     { ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } }\n *     onOrderByChange={ ( newOrderBy ) => {\n *       updateQuery( { orderBy: newOrderBy } )\n *     }\n *     onOrderChange={ ( newOrder ) => {\n *       updateQuery( { order: newOrder } )\n *     }\n *     categoriesList={ categories }\n *     selectedCategoryId={ category }\n *     onCategoryChange={ ( newCategory ) => {\n *       updateQuery( { category: newCategory } )\n *     }\n *     onNumberOfItemsChange={ ( newNumberOfItems ) => {\n *       updateQuery( { numberOfItems: newNumberOfItems } )\n *     } }\n *   />\n * );\n * ```\n */\nexport function QueryControls({\n  authorList,\n  selectedAuthorId,\n  numberOfItems,\n  order,\n  orderBy,\n  orderByOptions = defaultOrderByOptions,\n  maxItems = DEFAULT_MAX_ITEMS,\n  minItems = DEFAULT_MIN_ITEMS,\n  onAuthorChange,\n  onNumberOfItemsChange,\n  onOrderChange,\n  onOrderByChange,\n  // Props for single OR multiple category selection are not destructured here,\n  // but instead are destructured inline where necessary.\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: \"4\",\n    className: \"components-query-controls\",\n    children: [onOrderChange && onOrderByChange && /*#__PURE__*/_jsx(SelectControl, {\n      __nextHasNoMarginBottom: true,\n      __next40pxDefaultSize: true,\n      label: __('Order by'),\n      value: orderBy === undefined || order === undefined ? undefined : `${orderBy}/${order}`,\n      options: orderByOptions,\n      onChange: value => {\n        if (typeof value !== 'string') {\n          return;\n        }\n        const [newOrderBy, newOrder] = value.split('/');\n        if (newOrder !== order) {\n          onOrderChange(newOrder);\n        }\n        if (newOrderBy !== orderBy) {\n          onOrderByChange(newOrderBy);\n        }\n      }\n    }, \"query-controls-order-select\"), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && /*#__PURE__*/_jsx(CategorySelect, {\n      __next40pxDefaultSize: true,\n      categoriesList: props.categoriesList,\n      label: __('Category'),\n      noOptionLabel: _x('All', 'categories'),\n      selectedCategoryId: props.selectedCategoryId,\n      onChange: props.onCategoryChange\n    }, \"query-controls-category-select\"), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && /*#__PURE__*/_jsx(FormTokenField, {\n      __next40pxDefaultSize: true,\n      __nextHasNoMarginBottom: true,\n      label: __('Categories'),\n      value: props.selectedCategories && props.selectedCategories.map(item => ({\n        id: item.id,\n        // Keeping the fallback to `item.value` for legacy reasons,\n        // even if items of `selectedCategories` should not have a\n        // `value` property.\n        // @ts-expect-error\n        value: item.name || item.value\n      })),\n      suggestions: Object.keys(props.categorySuggestions),\n      onChange: props.onCategoryChange,\n      maxSuggestions: MAX_CATEGORIES_SUGGESTIONS\n    }, \"query-controls-categories-select\"), onAuthorChange && /*#__PURE__*/_jsx(AuthorSelect, {\n      __next40pxDefaultSize: true,\n      authorList: authorList,\n      label: __('Author'),\n      noOptionLabel: _x('All', 'authors'),\n      selectedAuthorId: selectedAuthorId,\n      onChange: onAuthorChange\n    }, \"query-controls-author-select\"), onNumberOfItemsChange && /*#__PURE__*/_jsx(RangeControl, {\n      __nextHasNoMarginBottom: true,\n      __next40pxDefaultSize: true,\n      label: __('Number of items'),\n      value: numberOfItems,\n      onChange: onNumberOfItemsChange,\n      min: minItems,\n      max: maxItems,\n      required: true\n    }, \"query-controls-range-control\")]\n  });\n}\nexport default QueryControls;"],
-  "mappings": ";AAGA,SAAS,IAAI,UAAU;AAKvB,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AAC3B,OAAO,oBAAoB;AAC3B,OAAO,kBAAkB;AACzB,OAAO,mBAAmB;AAC1B,SAAS,cAAc;AACvB,SAAS,OAAO,YAAY;AAC5B,IAAM,oBAAoB;AAC1B,IAAM,oBAAoB;AAC1B,IAAM,6BAA6B;AACnC,SAAS,0BAA0B,OAAO;AACxC,SAAO,oBAAoB;AAC7B;AACA,SAAS,4BAA4B,OAAO;AAC1C,SAAO,yBAAyB;AAClC;AACA,IAAM,wBAAwB,CAAC;AAAA,EAC7B,OAAO,GAAG,kBAAkB;AAAA,EAC5B,OAAO;AACT,GAAG;AAAA,EACD,OAAO,GAAG,kBAAkB;AAAA,EAC5B,OAAO;AACT,GAAG;AAAA;AAAA,EAED,OAAO,GAAG,YAAO;AAAA,EACjB,OAAO;AACT,GAAG;AAAA;AAAA,EAED,OAAO,GAAG,YAAO;AAAA,EACjB,OAAO;AACT,CAAC;AA2BM,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA,GAAG;AACL,GAAG;AACD,SAAoB,qBAAK,QAAQ;AAAA,IAC/B,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU,CAAC,iBAAiB,mBAAgC,qBAAK,eAAe;AAAA,MAC9E,yBAAyB;AAAA,MACzB,uBAAuB;AAAA,MACvB,OAAO,GAAG,UAAU;AAAA,MACpB,OAAO,YAAY,UAAa,UAAU,SAAY,SAAY,GAAG,OAAO,IAAI,KAAK;AAAA,MACrF,SAAS;AAAA,MACT,UAAU,WAAS;AACjB,YAAI,OAAO,UAAU,UAAU;AAC7B;AAAA,QACF;AACA,cAAM,CAAC,YAAY,QAAQ,IAAI,MAAM,MAAM,GAAG;AAC9C,YAAI,aAAa,OAAO;AACtB,wBAAc,QAAQ;AAAA,QACxB;AACA,YAAI,eAAe,SAAS;AAC1B,0BAAgB,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,IACF,GAAG,6BAA6B,GAAG,0BAA0B,KAAK,KAAK,MAAM,kBAAkB,MAAM,oBAAiC,qBAAK,gBAAgB;AAAA,MACzJ,uBAAuB;AAAA,MACvB,gBAAgB,MAAM;AAAA,MACtB,OAAO,GAAG,UAAU;AAAA,MACpB,eAAe,GAAG,OAAO,YAAY;AAAA,MACrC,oBAAoB,MAAM;AAAA,MAC1B,UAAU,MAAM;AAAA,IAClB,GAAG,gCAAgC,GAAG,4BAA4B,KAAK,KAAK,MAAM,uBAAuB,MAAM,oBAAiC,qBAAK,gBAAgB;AAAA,MACnK,uBAAuB;AAAA,MACvB,yBAAyB;AAAA,MACzB,OAAO,GAAG,YAAY;AAAA,MACtB,OAAO,MAAM,sBAAsB,MAAM,mBAAmB,IAAI,WAAS;AAAA,QACvE,IAAI,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT,OAAO,KAAK,QAAQ,KAAK;AAAA,MAC3B,EAAE;AAAA,MACF,aAAa,OAAO,KAAK,MAAM,mBAAmB;AAAA,MAClD,UAAU,MAAM;AAAA,MAChB,gBAAgB;AAAA,IAClB,GAAG,kCAAkC,GAAG,kBAA+B,qBAAK,cAAc;AAAA,MACxF,uBAAuB;AAAA,MACvB;AAAA,MACA,OAAO,GAAG,QAAQ;AAAA,MAClB,eAAe,GAAG,OAAO,SAAS;AAAA,MAClC;AAAA,MACA,UAAU;AAAA,IACZ,GAAG,8BAA8B,GAAG,yBAAsC,qBAAK,cAAc;AAAA,MAC3F,yBAAyB;AAAA,MACzB,uBAAuB;AAAA,MACvB,OAAO,GAAG,iBAAiB;AAAA,MAC3B,OAAO;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,KAAK;AAAA,MACL,UAAU;AAAA,IACZ,GAAG,8BAA8B,CAAC;AAAA,EACpC,CAAC;AACH;AACA,IAAO,yBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport AuthorSelect from './author-select';\nimport CategorySelect from './category-select';\nimport FormTokenField from '../form-token-field';\nimport RangeControl from '../range-control';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_MIN_ITEMS = 1;\nconst DEFAULT_MAX_ITEMS = 100;\nconst MAX_CATEGORIES_SUGGESTIONS = 20;\nfunction isSingleCategorySelection(props) {\n  return 'categoriesList' in props;\n}\nfunction isMultipleCategorySelection(props) {\n  return 'categorySuggestions' in props;\n}\nconst defaultOrderByOptions = [{\n  label: __('Newest to oldest'),\n  value: 'date/desc'\n}, {\n  label: __('Oldest to newest'),\n  value: 'date/asc'\n}, {\n  /* translators: Label for ordering posts by title in ascending order. */\n  label: __('A \u2192 Z'),\n  value: 'title/asc'\n}, {\n  /* translators: Label for ordering posts by title in descending order. */\n  label: __('Z \u2192 A'),\n  value: 'title/desc'\n}];\n\n/**\n * Controls to query for posts.\n *\n * ```jsx\n * const MyQueryControls = () => (\n *   <QueryControls\n *     { ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } }\n *     onOrderByChange={ ( newOrderBy ) => {\n *       updateQuery( { orderBy: newOrderBy } )\n *     }\n *     onOrderChange={ ( newOrder ) => {\n *       updateQuery( { order: newOrder } )\n *     }\n *     categoriesList={ categories }\n *     selectedCategoryId={ category }\n *     onCategoryChange={ ( newCategory ) => {\n *       updateQuery( { category: newCategory } )\n *     }\n *     onNumberOfItemsChange={ ( newNumberOfItems ) => {\n *       updateQuery( { numberOfItems: newNumberOfItems } )\n *     } }\n *   />\n * );\n * ```\n */\nexport function QueryControls({\n  authorList,\n  selectedAuthorId,\n  numberOfItems,\n  order,\n  orderBy,\n  orderByOptions = defaultOrderByOptions,\n  maxItems = DEFAULT_MAX_ITEMS,\n  minItems = DEFAULT_MIN_ITEMS,\n  onAuthorChange,\n  onNumberOfItemsChange,\n  onOrderChange,\n  onOrderByChange,\n  // Props for single OR multiple category selection are not destructured here,\n  // but instead are destructured inline where necessary.\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: \"4\",\n    className: \"components-query-controls\",\n    children: [onOrderChange && onOrderByChange && /*#__PURE__*/_jsx(SelectControl, {\n      __next40pxDefaultSize: true,\n      label: __('Order by'),\n      value: orderBy === undefined || order === undefined ? undefined : `${orderBy}/${order}`,\n      options: orderByOptions,\n      onChange: value => {\n        if (typeof value !== 'string') {\n          return;\n        }\n        const [newOrderBy, newOrder] = value.split('/');\n        if (newOrder !== order) {\n          onOrderChange(newOrder);\n        }\n        if (newOrderBy !== orderBy) {\n          onOrderByChange(newOrderBy);\n        }\n      }\n    }, \"query-controls-order-select\"), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && /*#__PURE__*/_jsx(CategorySelect, {\n      __next40pxDefaultSize: true,\n      categoriesList: props.categoriesList,\n      label: __('Category'),\n      noOptionLabel: _x('All', 'categories'),\n      selectedCategoryId: props.selectedCategoryId,\n      onChange: props.onCategoryChange\n    }, \"query-controls-category-select\"), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && /*#__PURE__*/_jsx(FormTokenField, {\n      __next40pxDefaultSize: true,\n      label: __('Categories'),\n      value: props.selectedCategories && props.selectedCategories.map(item => ({\n        id: item.id,\n        // Keeping the fallback to `item.value` for legacy reasons,\n        // even if items of `selectedCategories` should not have a\n        // `value` property.\n        // @ts-expect-error\n        value: item.name || item.value\n      })),\n      suggestions: Object.keys(props.categorySuggestions),\n      onChange: props.onCategoryChange,\n      maxSuggestions: MAX_CATEGORIES_SUGGESTIONS\n    }, \"query-controls-categories-select\"), onAuthorChange && /*#__PURE__*/_jsx(AuthorSelect, {\n      __next40pxDefaultSize: true,\n      authorList: authorList,\n      label: __('Author'),\n      noOptionLabel: _x('All', 'authors'),\n      selectedAuthorId: selectedAuthorId,\n      onChange: onAuthorChange\n    }, \"query-controls-author-select\"), onNumberOfItemsChange && /*#__PURE__*/_jsx(RangeControl, {\n      __next40pxDefaultSize: true,\n      label: __('Number of items'),\n      value: numberOfItems,\n      onChange: onNumberOfItemsChange,\n      min: minItems,\n      max: maxItems,\n      required: true\n    }, \"query-controls-range-control\")]\n  });\n}\nexport default QueryControls;"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,10 +1,10 @@
 // packages/components/src/radio-control/index.tsx
 import clsx from "clsx";
 import { useInstanceId } from "@wordpress/compose";
-import BaseControl from "../base-control";
-import { VStack } from "../v-stack";
-import { StyledHelp } from "../base-control/styles/base-control-styles";
-import { VisuallyHidden } from "../visually-hidden";
+import BaseControl from "../base-control/index.js";
+import { VStack } from "../v-stack/index.js";
+import { StyledHelp } from "../base-control/styles/base-control-styles.js";
+import { VisuallyHidden } from "../visually-hidden/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function generateOptionDescriptionId(radioGroupId, index) {
   return `${radioGroupId}-${index}-option-description`;
@@ -69,14 +69,12 @@ function RadioControl(props) {
           htmlFor: generateOptionId(id, index),
           children: option.label
         }), !!option.description ? /* @__PURE__ */ _jsx(StyledHelp, {
-          __nextHasNoMarginBottom: true,
           id: generateOptionDescriptionId(id, index),
           className: "components-radio-control__option-description",
           children: option.description
         }) : null]
       }, generateOptionId(id, index)))
     }), !!help && /* @__PURE__ */ _jsx(StyledHelp, {
-      __nextHasNoMarginBottom: true,
       id: generateHelpId(id),
       className: "components-base-control__help",
       children: help

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/radio-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { VStack } from '../v-stack';\nimport { StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction generateOptionDescriptionId(radioGroupId, index) {\n  return `${radioGroupId}-${index}-option-description`;\n}\nfunction generateOptionId(radioGroupId, index) {\n  return `${radioGroupId}-${index}`;\n}\nfunction generateHelpId(radioGroupId) {\n  return `${radioGroupId}__help`;\n}\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n *   const [ option, setOption ] = useState( 'a' );\n *\n *   return (\n *     <RadioControl\n *       label=\"User type\"\n *       help=\"The type of the current user\"\n *       selected={ option }\n *       options={ [\n *         { label: 'Author', value: 'a' },\n *         { label: 'Editor', value: 'e' },\n *       ] }\n *       onChange={ ( value ) => setOption( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function RadioControl(props) {\n  const {\n    label,\n    className,\n    selected,\n    help,\n    onChange,\n    onClick,\n    hideLabelFromVision,\n    options = [],\n    id: preferredId,\n    ...additionalProps\n  } = props;\n  const id = useInstanceId(RadioControl, 'inspector-radio-control', preferredId);\n  const onChangeValue = event => onChange(event.target.value);\n  if (!options?.length) {\n    return null;\n  }\n  return /*#__PURE__*/_jsxs(\"fieldset\", {\n    id: id,\n    className: clsx(className, 'components-radio-control'),\n    \"aria-describedby\": !!help ? generateHelpId(id) : undefined,\n    children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n      as: \"legend\",\n      children: label\n    }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      as: \"legend\",\n      children: label\n    }), /*#__PURE__*/_jsx(VStack, {\n      spacing: 3,\n      className: clsx('components-radio-control__group-wrapper', {\n        'has-help': !!help\n      }),\n      children: options.map((option, index) => /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-radio-control__option\",\n        children: [/*#__PURE__*/_jsx(\"input\", {\n          id: generateOptionId(id, index),\n          className: \"components-radio-control__input\",\n          type: \"radio\",\n          name: id,\n          value: option.value,\n          onChange: onChangeValue,\n          checked: option.value === selected,\n          \"aria-describedby\": !!option.description ? generateOptionDescriptionId(id, index) : undefined,\n          onClick: event => {\n            // Compat code for Safari to ensure that the radio is focused when clicked.\n            event.currentTarget.focus();\n            onClick?.(event);\n          },\n          ...additionalProps\n        }), /*#__PURE__*/_jsx(\"label\", {\n          className: \"components-radio-control__label\",\n          htmlFor: generateOptionId(id, index),\n          children: option.label\n        }), !!option.description ? /*#__PURE__*/_jsx(StyledHelp, {\n          __nextHasNoMarginBottom: true,\n          id: generateOptionDescriptionId(id, index),\n          className: \"components-radio-control__option-description\",\n          children: option.description\n        }) : null]\n      }, generateOptionId(id, index)))\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      __nextHasNoMarginBottom: true,\n      id: generateHelpId(id),\n      className: \"components-base-control__help\",\n      children: help\n    })]\n  });\n}\nexport default RadioControl;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,qBAAqB;AAK9B,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,4BAA4B,cAAc,OAAO;AACxD,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,iBAAiB,cAAc,OAAO;AAC7C,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,eAAe,cAAc;AACpC,SAAO,GAAG,YAAY;AACxB;AA2BO,SAAS,aAAa,OAAO;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,IACX,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,KAAK,cAAc,cAAc,2BAA2B,WAAW;AAC7E,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,MAAI,CAAC,SAAS,QAAQ;AACpB,WAAO;AAAA,EACT;AACA,SAAoB,sBAAM,YAAY;AAAA,IACpC;AAAA,IACA,WAAW,KAAK,WAAW,0BAA0B;AAAA,IACrD,oBAAoB,CAAC,CAAC,OAAO,eAAe,EAAE,IAAI;AAAA,IAClD,UAAU,CAAC,sBAAmC,qBAAK,gBAAgB;AAAA,MACjE,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,IAAiB,qBAAK,YAAY,aAAa;AAAA,MAC9C,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,SAAS;AAAA,MACT,WAAW,KAAK,2CAA2C;AAAA,QACzD,YAAY,CAAC,CAAC;AAAA,MAChB,CAAC;AAAA,MACD,UAAU,QAAQ,IAAI,CAAC,QAAQ,UAAuB,sBAAM,OAAO;AAAA,QACjE,WAAW;AAAA,QACX,UAAU,CAAc,qBAAK,SAAS;AAAA,UACpC,IAAI,iBAAiB,IAAI,KAAK;AAAA,UAC9B,WAAW;AAAA,UACX,MAAM;AAAA,UACN,MAAM;AAAA,UACN,OAAO,OAAO;AAAA,UACd,UAAU;AAAA,UACV,SAAS,OAAO,UAAU;AAAA,UAC1B,oBAAoB,CAAC,CAAC,OAAO,cAAc,4BAA4B,IAAI,KAAK,IAAI;AAAA,UACpF,SAAS,WAAS;AAEhB,kBAAM,cAAc,MAAM;AAC1B,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,GAAG;AAAA,QACL,CAAC,GAAgB,qBAAK,SAAS;AAAA,UAC7B,WAAW;AAAA,UACX,SAAS,iBAAiB,IAAI,KAAK;AAAA,UACnC,UAAU,OAAO;AAAA,QACnB,CAAC,GAAG,CAAC,CAAC,OAAO,cAA2B,qBAAK,YAAY;AAAA,UACvD,yBAAyB;AAAA,UACzB,IAAI,4BAA4B,IAAI,KAAK;AAAA,UACzC,WAAW;AAAA,UACX,UAAU,OAAO;AAAA,QACnB,CAAC,IAAI,IAAI;AAAA,MACX,GAAG,iBAAiB,IAAI,KAAK,CAAC,CAAC;AAAA,IACjC,CAAC,GAAG,CAAC,CAAC,QAAqB,qBAAK,YAAY;AAAA,MAC1C,yBAAyB;AAAA,MACzB,IAAI,eAAe,EAAE;AAAA,MACrB,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,wBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { VStack } from '../v-stack';\nimport { StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction generateOptionDescriptionId(radioGroupId, index) {\n  return `${radioGroupId}-${index}-option-description`;\n}\nfunction generateOptionId(radioGroupId, index) {\n  return `${radioGroupId}-${index}`;\n}\nfunction generateHelpId(radioGroupId) {\n  return `${radioGroupId}__help`;\n}\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n *   const [ option, setOption ] = useState( 'a' );\n *\n *   return (\n *     <RadioControl\n *       label=\"User type\"\n *       help=\"The type of the current user\"\n *       selected={ option }\n *       options={ [\n *         { label: 'Author', value: 'a' },\n *         { label: 'Editor', value: 'e' },\n *       ] }\n *       onChange={ ( value ) => setOption( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function RadioControl(props) {\n  const {\n    label,\n    className,\n    selected,\n    help,\n    onChange,\n    onClick,\n    hideLabelFromVision,\n    options = [],\n    id: preferredId,\n    ...additionalProps\n  } = props;\n  const id = useInstanceId(RadioControl, 'inspector-radio-control', preferredId);\n  const onChangeValue = event => onChange(event.target.value);\n  if (!options?.length) {\n    return null;\n  }\n  return /*#__PURE__*/_jsxs(\"fieldset\", {\n    id: id,\n    className: clsx(className, 'components-radio-control'),\n    \"aria-describedby\": !!help ? generateHelpId(id) : undefined,\n    children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n      as: \"legend\",\n      children: label\n    }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      as: \"legend\",\n      children: label\n    }), /*#__PURE__*/_jsx(VStack, {\n      spacing: 3,\n      className: clsx('components-radio-control__group-wrapper', {\n        'has-help': !!help\n      }),\n      children: options.map((option, index) => /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-radio-control__option\",\n        children: [/*#__PURE__*/_jsx(\"input\", {\n          id: generateOptionId(id, index),\n          className: \"components-radio-control__input\",\n          type: \"radio\",\n          name: id,\n          value: option.value,\n          onChange: onChangeValue,\n          checked: option.value === selected,\n          \"aria-describedby\": !!option.description ? generateOptionDescriptionId(id, index) : undefined,\n          onClick: event => {\n            // Compat code for Safari to ensure that the radio is focused when clicked.\n            event.currentTarget.focus();\n            onClick?.(event);\n          },\n          ...additionalProps\n        }), /*#__PURE__*/_jsx(\"label\", {\n          className: \"components-radio-control__label\",\n          htmlFor: generateOptionId(id, index),\n          children: option.label\n        }), !!option.description ? /*#__PURE__*/_jsx(StyledHelp, {\n          id: generateOptionDescriptionId(id, index),\n          className: \"components-radio-control__option-description\",\n          children: option.description\n        }) : null]\n      }, generateOptionId(id, index)))\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      id: generateHelpId(id),\n      className: \"components-base-control__help\",\n      children: help\n    })]\n  });\n}\nexport default RadioControl;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,qBAAqB;AAK9B,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,4BAA4B,cAAc,OAAO;AACxD,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,iBAAiB,cAAc,OAAO;AAC7C,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,eAAe,cAAc;AACpC,SAAO,GAAG,YAAY;AACxB;AA2BO,SAAS,aAAa,OAAO;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,IACX,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,KAAK,cAAc,cAAc,2BAA2B,WAAW;AAC7E,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,MAAI,CAAC,SAAS,QAAQ;AACpB,WAAO;AAAA,EACT;AACA,SAAoB,sBAAM,YAAY;AAAA,IACpC;AAAA,IACA,WAAW,KAAK,WAAW,0BAA0B;AAAA,IACrD,oBAAoB,CAAC,CAAC,OAAO,eAAe,EAAE,IAAI;AAAA,IAClD,UAAU,CAAC,sBAAmC,qBAAK,gBAAgB;AAAA,MACjE,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,IAAiB,qBAAK,YAAY,aAAa;AAAA,MAC9C,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,SAAS;AAAA,MACT,WAAW,KAAK,2CAA2C;AAAA,QACzD,YAAY,CAAC,CAAC;AAAA,MAChB,CAAC;AAAA,MACD,UAAU,QAAQ,IAAI,CAAC,QAAQ,UAAuB,sBAAM,OAAO;AAAA,QACjE,WAAW;AAAA,QACX,UAAU,CAAc,qBAAK,SAAS;AAAA,UACpC,IAAI,iBAAiB,IAAI,KAAK;AAAA,UAC9B,WAAW;AAAA,UACX,MAAM;AAAA,UACN,MAAM;AAAA,UACN,OAAO,OAAO;AAAA,UACd,UAAU;AAAA,UACV,SAAS,OAAO,UAAU;AAAA,UAC1B,oBAAoB,CAAC,CAAC,OAAO,cAAc,4BAA4B,IAAI,KAAK,IAAI;AAAA,UACpF,SAAS,WAAS;AAEhB,kBAAM,cAAc,MAAM;AAC1B,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,GAAG;AAAA,QACL,CAAC,GAAgB,qBAAK,SAAS;AAAA,UAC7B,WAAW;AAAA,UACX,SAAS,iBAAiB,IAAI,KAAK;AAAA,UACnC,UAAU,OAAO;AAAA,QACnB,CAAC,GAAG,CAAC,CAAC,OAAO,cAA2B,qBAAK,YAAY;AAAA,UACvD,IAAI,4BAA4B,IAAI,KAAK;AAAA,UACzC,WAAW;AAAA,UACX,UAAU,OAAO;AAAA,QACnB,CAAC,IAAI,IAAI;AAAA,MACX,GAAG,iBAAiB,IAAI,KAAK,CAAC,CAAC;AAAA,IACjC,CAAC,GAAG,CAAC,CAAC,QAAqB,qBAAK,YAAY;AAAA,MAC1C,IAAI,eAAe,EAAE;AAAA,MACrB,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,wBAAQ;",
   "names": []
 }

package/build-module/radio-group/index.js

@@ -3,8 +3,8 @@ import * as Ariakit from "@ariakit/react";
 import deprecated from "@wordpress/deprecated";
 import { useMemo, forwardRef } from "@wordpress/element";
 import { isRTL } from "@wordpress/i18n";
-import ButtonGroup from "../button-group";
-import { RadioGroupContext } from "./context";
+import ButtonGroup from "../button-group/index.js";
+import { RadioGroupContext } from "./context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedRadioGroup({
   label,

package/build-module/radio-group/radio.js

@@ -1,9 +1,9 @@
 // packages/components/src/radio-group/radio.tsx
 import { forwardRef, useContext } from "@wordpress/element";
 import * as Ariakit from "@ariakit/react";
-import Button from "../button";
-import { RadioGroupContext } from "./context";
-import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size";
+import Button from "../button/index.js";
+import { RadioGroupContext } from "./context.js";
+import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedRadio({
   value,

package/build-module/range-control/index.js

@@ -3,18 +3,18 @@ import clsx from "clsx";
 import { __, isRTL } from "@wordpress/i18n";
 import { useRef, useState, forwardRef } from "@wordpress/element";
 import { useInstanceId, useMergeRefs } from "@wordpress/compose";
-import BaseControl from "../base-control";
-import Button from "../button";
-import Icon from "../icon";
-import { COLORS } from "../utils";
-import { floatClamp, useControlledRangeValue } from "./utils";
-import { clamp } from "../utils/math";
-import InputRange from "./input-range";
-import RangeRail from "./rail";
-import SimpleTooltip from "./tooltip";
-import { ActionRightWrapper, AfterIconWrapper, BeforeIconWrapper, InputNumber, Root, Track, ThumbWrapper, Thumb, Wrapper } from "./styles/range-control-styles";
-import { space } from "../utils/space";
-import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size";
+import BaseControl from "../base-control/index.js";
+import Button from "../button/index.js";
+import Icon from "../icon/index.js";
+import { COLORS } from "../utils/index.js";
+import { floatClamp, useControlledRangeValue } from "./utils.js";
+import { clamp } from "../utils/math.js";
+import InputRange from "./input-range.js";
+import RangeRail from "./rail.js";
+import SimpleTooltip from "./tooltip.js";
+import { ActionRightWrapper, AfterIconWrapper, BeforeIconWrapper, InputNumber, Root, Track, ThumbWrapper, Thumb, Wrapper } from "./styles/range-control-styles.js";
+import { space } from "../utils/space.js";
+import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var noop = () => {
 };
@@ -32,7 +32,8 @@ function computeResetValue({
 }
 function UnforwardedRangeControl(props, forwardedRef) {
   const {
-    __nextHasNoMarginBottom = false,
+    __nextHasNoMarginBottom: _,
+    // Prevent passing to internal component
     afterIcon,
     allowReset = false,
     beforeIcon,
@@ -146,8 +147,6 @@ function UnforwardedRangeControl(props, forwardedRef) {
     __shouldNotWarnDeprecated36pxSize
   });
   return /* @__PURE__ */ _jsx(BaseControl, {
-    __nextHasNoMarginBottom,
-    __associatedWPComponentName: "RangeControl",
     className: classes,
     label,
     hideLabelFromVision,
@@ -161,7 +160,6 @@ function UnforwardedRangeControl(props, forwardedRef) {
           icon: beforeIcon
         })
       }), /* @__PURE__ */ _jsxs(Wrapper, {
-        __nextHasNoMarginBottom,
         className: wrapperClasses,
         color: colorProp,
         marks: !!marks,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/range-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useRef, useState, forwardRef } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { COLORS } from '../utils';\nimport { floatClamp, useControlledRangeValue } from './utils';\nimport { clamp } from '../utils/math';\nimport InputRange from './input-range';\nimport RangeRail from './rail';\nimport SimpleTooltip from './tooltip';\nimport { ActionRightWrapper, AfterIconWrapper, BeforeIconWrapper, InputNumber, Root, Track, ThumbWrapper, Thumb, Wrapper } from './styles/range-control-styles';\nimport { space } from '../utils/space';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\n\n/**\n * Computes the value that `RangeControl` should reset to when pressing\n * the reset button.\n */\nfunction computeResetValue({\n  resetFallbackValue,\n  initialPosition\n}) {\n  if (resetFallbackValue !== undefined) {\n    return !Number.isNaN(resetFallbackValue) ? resetFallbackValue : null;\n  }\n  if (initialPosition !== undefined) {\n    return !Number.isNaN(initialPosition) ? initialPosition : null;\n  }\n  return null;\n}\nfunction UnforwardedRangeControl(props, forwardedRef) {\n  const {\n    __nextHasNoMarginBottom = false,\n    afterIcon,\n    allowReset = false,\n    beforeIcon,\n    className,\n    color: colorProp = COLORS.theme.accent,\n    currentInput,\n    disabled = false,\n    help,\n    hideLabelFromVision = false,\n    initialPosition,\n    isShiftStepEnabled = true,\n    label,\n    marks = false,\n    max = 100,\n    min = 0,\n    onBlur = noop,\n    onChange = noop,\n    onFocus = noop,\n    onMouseLeave = noop,\n    onMouseMove = noop,\n    railColor,\n    renderTooltipContent = v => v,\n    resetFallbackValue,\n    __next40pxDefaultSize = false,\n    shiftStep = 10,\n    showTooltip: showTooltipProp,\n    step = 1,\n    trackColor,\n    value: valueProp,\n    withInputField = true,\n    __shouldNotWarnDeprecated36pxSize,\n    ...otherProps\n  } = props;\n  const [value, setValue] = useControlledRangeValue({\n    min,\n    max,\n    value: valueProp !== null && valueProp !== void 0 ? valueProp : null,\n    initial: initialPosition\n  });\n  const isResetPendent = useRef(false);\n  let hasTooltip = showTooltipProp;\n  let hasInputField = withInputField;\n  if (step === 'any') {\n    // The tooltip and number input field are hidden when the step is \"any\"\n    // because the decimals get too lengthy to fit well.\n    hasTooltip = false;\n    hasInputField = false;\n  }\n  const [showTooltip, setShowTooltip] = useState(hasTooltip);\n  const [isFocused, setIsFocused] = useState(false);\n  const inputRef = useRef();\n  const isCurrentlyFocused = inputRef.current?.matches(':focus');\n  const isThumbFocused = !disabled && isFocused;\n  const isValueReset = value === null;\n  const currentValue = value !== undefined ? value : currentInput;\n  const inputSliderValue = isValueReset ? '' : currentValue;\n  const rangeFillValue = isValueReset ? (max - min) / 2 + min : value;\n  const fillValue = isValueReset ? 50 : (value - min) / (max - min) * 100;\n  const fillValueOffset = `${clamp(fillValue, 0, 100)}%`;\n  const classes = clsx('components-range-control', className);\n  const wrapperClasses = clsx('components-range-control__wrapper', !!marks && 'is-marked');\n  const id = useInstanceId(UnforwardedRangeControl, 'inspector-range-control');\n  const describedBy = !!help ? `${id}__help` : undefined;\n  const enableTooltip = hasTooltip !== false && Number.isFinite(value);\n  const handleOnRangeChange = event => {\n    const nextValue = parseFloat(event.target.value);\n    setValue(nextValue);\n    onChange(nextValue);\n  };\n  const handleOnChange = next => {\n    // @ts-expect-error TODO: Investigate if it's problematic for setValue() to\n    // potentially receive a NaN when next is undefined.\n    let nextValue = parseFloat(next);\n    setValue(nextValue);\n\n    /*\n     * Calls onChange only when nextValue is numeric\n     * otherwise may queue a reset for the blur event.\n     */\n    if (!isNaN(nextValue)) {\n      if (nextValue < min || nextValue > max) {\n        nextValue = floatClamp(nextValue, min, max);\n      }\n      onChange(nextValue);\n      isResetPendent.current = false;\n    } else if (allowReset) {\n      isResetPendent.current = true;\n    }\n  };\n  const handleOnInputNumberBlur = () => {\n    if (isResetPendent.current) {\n      handleOnReset();\n      isResetPendent.current = false;\n    }\n  };\n  const handleOnReset = () => {\n    // Reset to `resetFallbackValue` if defined, otherwise set internal value\n    // to `null` \u2014 which, if propagated to the `value` prop, will cause\n    // the value to be reset to the `initialPosition` prop if defined.\n    const resetValue = Number.isNaN(resetFallbackValue) ? null : resetFallbackValue !== null && resetFallbackValue !== void 0 ? resetFallbackValue : null;\n    setValue(resetValue);\n\n    /**\n     * Previously, this callback would always receive undefined as\n     * an argument. This behavior is unexpected, specifically\n     * when resetFallbackValue is defined.\n     *\n     * The value of undefined is not ideal. Passing it through\n     * to internal <input /> elements would change it from a\n     * controlled component to an uncontrolled component.\n     *\n     * For now, to minimize unexpected regressions, we're going to\n     * preserve the undefined callback argument, except when a\n     * resetFallbackValue is defined.\n     */\n    onChange(resetValue !== null && resetValue !== void 0 ? resetValue : undefined);\n  };\n  const handleShowTooltip = () => setShowTooltip(true);\n  const handleHideTooltip = () => setShowTooltip(false);\n  const handleOnBlur = event => {\n    onBlur(event);\n    setIsFocused(false);\n    handleHideTooltip();\n  };\n  const handleOnFocus = event => {\n    onFocus(event);\n    setIsFocused(true);\n    handleShowTooltip();\n  };\n  const offsetStyle = {\n    [isRTL() ? 'right' : 'left']: fillValueOffset\n  };\n\n  // Add default size deprecation warning.\n  maybeWarnDeprecated36pxSize({\n    componentName: 'RangeControl',\n    __next40pxDefaultSize,\n    size: undefined,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    __nextHasNoMarginBottom: __nextHasNoMarginBottom,\n    __associatedWPComponentName: \"RangeControl\",\n    className: classes,\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: `${id}`,\n    help: help,\n    children: /*#__PURE__*/_jsxs(Root, {\n      className: \"components-range-control__root\",\n      __next40pxDefaultSize: __next40pxDefaultSize,\n      children: [beforeIcon && /*#__PURE__*/_jsx(BeforeIconWrapper, {\n        children: /*#__PURE__*/_jsx(Icon, {\n          icon: beforeIcon\n        })\n      }), /*#__PURE__*/_jsxs(Wrapper, {\n        __nextHasNoMarginBottom: __nextHasNoMarginBottom,\n        className: wrapperClasses,\n        color: colorProp,\n        marks: !!marks,\n        children: [/*#__PURE__*/_jsx(InputRange, {\n          ...otherProps,\n          className: \"components-range-control__slider\",\n          describedBy: describedBy,\n          disabled: disabled,\n          id: `${id}`,\n          label: label,\n          max: max,\n          min: min,\n          onBlur: handleOnBlur,\n          onChange: handleOnRangeChange,\n          onFocus: handleOnFocus,\n          onMouseMove: onMouseMove,\n          onMouseLeave: onMouseLeave,\n          ref: useMergeRefs([inputRef, forwardedRef]),\n          step: step,\n          value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined\n        }), /*#__PURE__*/_jsx(RangeRail, {\n          \"aria-hidden\": true,\n          disabled: disabled,\n          marks: marks,\n          max: max,\n          min: min,\n          railColor: railColor,\n          step: step,\n          value: rangeFillValue\n        }), /*#__PURE__*/_jsx(Track, {\n          \"aria-hidden\": true,\n          className: \"components-range-control__track\",\n          disabled: disabled,\n          style: {\n            width: fillValueOffset\n          },\n          trackColor: trackColor\n        }), /*#__PURE__*/_jsx(ThumbWrapper, {\n          className: \"components-range-control__thumb-wrapper\",\n          style: offsetStyle,\n          disabled: disabled,\n          children: /*#__PURE__*/_jsx(Thumb, {\n            \"aria-hidden\": true,\n            isFocused: isThumbFocused,\n            disabled: disabled\n          })\n        }), enableTooltip && /*#__PURE__*/_jsx(SimpleTooltip, {\n          className: \"components-range-control__tooltip\",\n          inputRef: inputRef,\n          tooltipPlacement: \"bottom\",\n          renderTooltipContent: renderTooltipContent,\n          show: isCurrentlyFocused || showTooltip,\n          style: offsetStyle,\n          value: value\n        })]\n      }), afterIcon && /*#__PURE__*/_jsx(AfterIconWrapper, {\n        children: /*#__PURE__*/_jsx(Icon, {\n          icon: afterIcon\n        })\n      }), hasInputField && /*#__PURE__*/_jsx(InputNumber, {\n        \"aria-label\": label,\n        className: \"components-range-control__number\",\n        disabled: disabled,\n        inputMode: \"decimal\",\n        isShiftStepEnabled: isShiftStepEnabled,\n        max: max,\n        min: min,\n        onBlur: handleOnInputNumberBlur,\n        onChange: handleOnChange,\n        shiftStep: shiftStep,\n        size: __next40pxDefaultSize ? '__unstable-large' : 'default',\n        __unstableInputWidth: __next40pxDefaultSize ? space(20) : space(16),\n        step: step\n        // @ts-expect-error TODO: Investigate if the `null` value is necessary\n        ,\n        value: inputSliderValue,\n        __shouldNotWarnDeprecated36pxSize: true\n      }), allowReset && /*#__PURE__*/_jsx(ActionRightWrapper, {\n        children: /*#__PURE__*/_jsx(Button, {\n          className: \"components-range-control__reset\"\n          // If the RangeControl itself is disabled, the reset button shouldn't be in the tab sequence.\n          ,\n          accessibleWhenDisabled: !disabled\n          // The reset button should be disabled if RangeControl itself is disabled,\n          // or if the current `value` is equal to the value that would be currently\n          // assigned when clicking the button.\n          ,\n          disabled: disabled || value === computeResetValue({\n            resetFallbackValue,\n            initialPosition\n          }),\n          variant: \"secondary\",\n          size: \"small\",\n          onClick: handleOnReset,\n          children: __('Reset')\n        })\n      })]\n    })\n  });\n}\n\n/**\n * RangeControls are used to make selections from a range of incremental values.\n *\n * ```jsx\n * import { RangeControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRangeControl = () => {\n *   const [ value, setValue ] = useState();\n *   return (\n *     <RangeControl\n *       __nextHasNoMarginBottom\n *       __next40pxDefaultSize\n *       help=\"Please select how transparent you would like this.\"\n *       initialPosition={ 50 }\n *       label=\"Opacity\"\n *       max={ 100 }\n *       min={ 0 }\n *       value={ value }\n *       onChange={ setValue }\n *     />\n *   );\n * };\n * ```\n */\nexport const RangeControl = forwardRef(UnforwardedRangeControl);\nexport default RangeControl;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useRef, useState, forwardRef } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { COLORS } from '../utils';\nimport { floatClamp, useControlledRangeValue } from './utils';\nimport { clamp } from '../utils/math';\nimport InputRange from './input-range';\nimport RangeRail from './rail';\nimport SimpleTooltip from './tooltip';\nimport { ActionRightWrapper, AfterIconWrapper, BeforeIconWrapper, InputNumber, Root, Track, ThumbWrapper, Thumb, Wrapper } from './styles/range-control-styles';\nimport { space } from '../utils/space';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\n\n/**\n * Computes the value that `RangeControl` should reset to when pressing\n * the reset button.\n */\nfunction computeResetValue({\n  resetFallbackValue,\n  initialPosition\n}) {\n  if (resetFallbackValue !== undefined) {\n    return !Number.isNaN(resetFallbackValue) ? resetFallbackValue : null;\n  }\n  if (initialPosition !== undefined) {\n    return !Number.isNaN(initialPosition) ? initialPosition : null;\n  }\n  return null;\n}\nfunction UnforwardedRangeControl(props, forwardedRef) {\n  const {\n    __nextHasNoMarginBottom: _,\n    // Prevent passing to internal component\n    afterIcon,\n    allowReset = false,\n    beforeIcon,\n    className,\n    color: colorProp = COLORS.theme.accent,\n    currentInput,\n    disabled = false,\n    help,\n    hideLabelFromVision = false,\n    initialPosition,\n    isShiftStepEnabled = true,\n    label,\n    marks = false,\n    max = 100,\n    min = 0,\n    onBlur = noop,\n    onChange = noop,\n    onFocus = noop,\n    onMouseLeave = noop,\n    onMouseMove = noop,\n    railColor,\n    renderTooltipContent = v => v,\n    resetFallbackValue,\n    __next40pxDefaultSize = false,\n    shiftStep = 10,\n    showTooltip: showTooltipProp,\n    step = 1,\n    trackColor,\n    value: valueProp,\n    withInputField = true,\n    __shouldNotWarnDeprecated36pxSize,\n    ...otherProps\n  } = props;\n  const [value, setValue] = useControlledRangeValue({\n    min,\n    max,\n    value: valueProp !== null && valueProp !== void 0 ? valueProp : null,\n    initial: initialPosition\n  });\n  const isResetPendent = useRef(false);\n  let hasTooltip = showTooltipProp;\n  let hasInputField = withInputField;\n  if (step === 'any') {\n    // The tooltip and number input field are hidden when the step is \"any\"\n    // because the decimals get too lengthy to fit well.\n    hasTooltip = false;\n    hasInputField = false;\n  }\n  const [showTooltip, setShowTooltip] = useState(hasTooltip);\n  const [isFocused, setIsFocused] = useState(false);\n  const inputRef = useRef();\n  const isCurrentlyFocused = inputRef.current?.matches(':focus');\n  const isThumbFocused = !disabled && isFocused;\n  const isValueReset = value === null;\n  const currentValue = value !== undefined ? value : currentInput;\n  const inputSliderValue = isValueReset ? '' : currentValue;\n  const rangeFillValue = isValueReset ? (max - min) / 2 + min : value;\n  const fillValue = isValueReset ? 50 : (value - min) / (max - min) * 100;\n  const fillValueOffset = `${clamp(fillValue, 0, 100)}%`;\n  const classes = clsx('components-range-control', className);\n  const wrapperClasses = clsx('components-range-control__wrapper', !!marks && 'is-marked');\n  const id = useInstanceId(UnforwardedRangeControl, 'inspector-range-control');\n  const describedBy = !!help ? `${id}__help` : undefined;\n  const enableTooltip = hasTooltip !== false && Number.isFinite(value);\n  const handleOnRangeChange = event => {\n    const nextValue = parseFloat(event.target.value);\n    setValue(nextValue);\n    onChange(nextValue);\n  };\n  const handleOnChange = next => {\n    // @ts-expect-error TODO: Investigate if it's problematic for setValue() to\n    // potentially receive a NaN when next is undefined.\n    let nextValue = parseFloat(next);\n    setValue(nextValue);\n\n    /*\n     * Calls onChange only when nextValue is numeric\n     * otherwise may queue a reset for the blur event.\n     */\n    if (!isNaN(nextValue)) {\n      if (nextValue < min || nextValue > max) {\n        nextValue = floatClamp(nextValue, min, max);\n      }\n      onChange(nextValue);\n      isResetPendent.current = false;\n    } else if (allowReset) {\n      isResetPendent.current = true;\n    }\n  };\n  const handleOnInputNumberBlur = () => {\n    if (isResetPendent.current) {\n      handleOnReset();\n      isResetPendent.current = false;\n    }\n  };\n  const handleOnReset = () => {\n    // Reset to `resetFallbackValue` if defined, otherwise set internal value\n    // to `null` \u2014 which, if propagated to the `value` prop, will cause\n    // the value to be reset to the `initialPosition` prop if defined.\n    const resetValue = Number.isNaN(resetFallbackValue) ? null : resetFallbackValue !== null && resetFallbackValue !== void 0 ? resetFallbackValue : null;\n    setValue(resetValue);\n\n    /**\n     * Previously, this callback would always receive undefined as\n     * an argument. This behavior is unexpected, specifically\n     * when resetFallbackValue is defined.\n     *\n     * The value of undefined is not ideal. Passing it through\n     * to internal <input /> elements would change it from a\n     * controlled component to an uncontrolled component.\n     *\n     * For now, to minimize unexpected regressions, we're going to\n     * preserve the undefined callback argument, except when a\n     * resetFallbackValue is defined.\n     */\n    onChange(resetValue !== null && resetValue !== void 0 ? resetValue : undefined);\n  };\n  const handleShowTooltip = () => setShowTooltip(true);\n  const handleHideTooltip = () => setShowTooltip(false);\n  const handleOnBlur = event => {\n    onBlur(event);\n    setIsFocused(false);\n    handleHideTooltip();\n  };\n  const handleOnFocus = event => {\n    onFocus(event);\n    setIsFocused(true);\n    handleShowTooltip();\n  };\n  const offsetStyle = {\n    [isRTL() ? 'right' : 'left']: fillValueOffset\n  };\n\n  // Add default size deprecation warning.\n  maybeWarnDeprecated36pxSize({\n    componentName: 'RangeControl',\n    __next40pxDefaultSize,\n    size: undefined,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    className: classes,\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: `${id}`,\n    help: help,\n    children: /*#__PURE__*/_jsxs(Root, {\n      className: \"components-range-control__root\",\n      __next40pxDefaultSize: __next40pxDefaultSize,\n      children: [beforeIcon && /*#__PURE__*/_jsx(BeforeIconWrapper, {\n        children: /*#__PURE__*/_jsx(Icon, {\n          icon: beforeIcon\n        })\n      }), /*#__PURE__*/_jsxs(Wrapper, {\n        className: wrapperClasses,\n        color: colorProp,\n        marks: !!marks,\n        children: [/*#__PURE__*/_jsx(InputRange, {\n          ...otherProps,\n          className: \"components-range-control__slider\",\n          describedBy: describedBy,\n          disabled: disabled,\n          id: `${id}`,\n          label: label,\n          max: max,\n          min: min,\n          onBlur: handleOnBlur,\n          onChange: handleOnRangeChange,\n          onFocus: handleOnFocus,\n          onMouseMove: onMouseMove,\n          onMouseLeave: onMouseLeave,\n          ref: useMergeRefs([inputRef, forwardedRef]),\n          step: step,\n          value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined\n        }), /*#__PURE__*/_jsx(RangeRail, {\n          \"aria-hidden\": true,\n          disabled: disabled,\n          marks: marks,\n          max: max,\n          min: min,\n          railColor: railColor,\n          step: step,\n          value: rangeFillValue\n        }), /*#__PURE__*/_jsx(Track, {\n          \"aria-hidden\": true,\n          className: \"components-range-control__track\",\n          disabled: disabled,\n          style: {\n            width: fillValueOffset\n          },\n          trackColor: trackColor\n        }), /*#__PURE__*/_jsx(ThumbWrapper, {\n          className: \"components-range-control__thumb-wrapper\",\n          style: offsetStyle,\n          disabled: disabled,\n          children: /*#__PURE__*/_jsx(Thumb, {\n            \"aria-hidden\": true,\n            isFocused: isThumbFocused,\n            disabled: disabled\n          })\n        }), enableTooltip && /*#__PURE__*/_jsx(SimpleTooltip, {\n          className: \"components-range-control__tooltip\",\n          inputRef: inputRef,\n          tooltipPlacement: \"bottom\",\n          renderTooltipContent: renderTooltipContent,\n          show: isCurrentlyFocused || showTooltip,\n          style: offsetStyle,\n          value: value\n        })]\n      }), afterIcon && /*#__PURE__*/_jsx(AfterIconWrapper, {\n        children: /*#__PURE__*/_jsx(Icon, {\n          icon: afterIcon\n        })\n      }), hasInputField && /*#__PURE__*/_jsx(InputNumber, {\n        \"aria-label\": label,\n        className: \"components-range-control__number\",\n        disabled: disabled,\n        inputMode: \"decimal\",\n        isShiftStepEnabled: isShiftStepEnabled,\n        max: max,\n        min: min,\n        onBlur: handleOnInputNumberBlur,\n        onChange: handleOnChange,\n        shiftStep: shiftStep,\n        size: __next40pxDefaultSize ? '__unstable-large' : 'default',\n        __unstableInputWidth: __next40pxDefaultSize ? space(20) : space(16),\n        step: step\n        // @ts-expect-error TODO: Investigate if the `null` value is necessary\n        ,\n        value: inputSliderValue,\n        __shouldNotWarnDeprecated36pxSize: true\n      }), allowReset && /*#__PURE__*/_jsx(ActionRightWrapper, {\n        children: /*#__PURE__*/_jsx(Button, {\n          className: \"components-range-control__reset\"\n          // If the RangeControl itself is disabled, the reset button shouldn't be in the tab sequence.\n          ,\n          accessibleWhenDisabled: !disabled\n          // The reset button should be disabled if RangeControl itself is disabled,\n          // or if the current `value` is equal to the value that would be currently\n          // assigned when clicking the button.\n          ,\n          disabled: disabled || value === computeResetValue({\n            resetFallbackValue,\n            initialPosition\n          }),\n          variant: \"secondary\",\n          size: \"small\",\n          onClick: handleOnReset,\n          children: __('Reset')\n        })\n      })]\n    })\n  });\n}\n\n/**\n * RangeControls are used to make selections from a range of incremental values.\n *\n * ```jsx\n * import { RangeControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRangeControl = () => {\n *   const [ value, setValue ] = useState();\n *   return (\n *     <RangeControl\n *       __next40pxDefaultSize\n *       help=\"Please select how transparent you would like this.\"\n *       initialPosition={ 50 }\n *       label=\"Opacity\"\n *       max={ 100 }\n *       min={ 0 }\n *       value={ value }\n *       onChange={ setValue }\n *     />\n *   );\n * };\n * ```\n */\nexport const RangeControl = forwardRef(UnforwardedRangeControl);\nexport default RangeControl;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/range-control/input-range.js

@@ -1,6 +1,6 @@
 // packages/components/src/range-control/input-range.tsx
 import { forwardRef } from "@wordpress/element";
-import { InputRange as BaseInputRange } from "./styles/range-control-styles";
+import { InputRange as BaseInputRange } from "./styles/range-control-styles.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function InputRange(props, ref) {
   const {

package/build-module/range-control/mark.js

@@ -1,6 +1,6 @@
 // packages/components/src/range-control/mark.tsx
 import clsx from "clsx";
-import { Mark, MarkLabel } from "./styles/range-control-styles";
+import { Mark, MarkLabel } from "./styles/range-control-styles.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function RangeMark(props) {
   const {

package/build-module/range-control/rail.js

@@ -1,7 +1,7 @@
 // packages/components/src/range-control/rail.tsx
 import { isRTL } from "@wordpress/i18n";
-import RangeMark from "./mark";
-import { MarksWrapper, Rail } from "./styles/range-control-styles";
+import RangeMark from "./mark.js";
+import { MarksWrapper, Rail } from "./styles/range-control-styles.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 function RangeRail(props) {