@wordpress/components 30.9.1-next.8b30e05b0.0 → 31.0.1-next.738bb1424.0

package/build-module/border-box-control/border-box-control-split-controls/component.js

@@ -2,11 +2,11 @@
 import { __ } from "@wordpress/i18n";
 import { useMemo, useState } from "@wordpress/element";
 import { useMergeRefs } from "@wordpress/compose";
-import BorderBoxControlVisualizer from "../border-box-control-visualizer";
-import { BorderControl } from "../../border-control";
-import { Grid } from "../../grid";
-import { contextConnect } from "../../context";
-import { useBorderBoxControlSplitControls } from "./hook";
+import BorderBoxControlVisualizer from "../border-box-control-visualizer/index.js";
+import { BorderControl } from "../../border-control/index.js";
+import { Grid } from "../../grid/index.js";
+import { contextConnect } from "../../context/index.js";
+import { useBorderBoxControlSplitControls } from "./hook.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var BorderBoxControlSplitControls = (props, forwardedRef) => {
   const {

package/build-module/border-box-control/border-box-control-split-controls/hook.js

@@ -1,8 +1,8 @@
 // packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
 import { useMemo } from "@wordpress/element";
-import * as styles from "../styles";
-import { useContextSystem } from "../../context";
-import { useCx } from "../../utils/";
+import * as styles from "../styles.js";
+import { useContextSystem } from "../../context/index.js";
+import { useCx } from "../../utils/index.js";
 function useBorderBoxControlSplitControls(props) {
   const {
     className,

package/build-module/border-box-control/border-box-control-split-controls/index.js

@@ -1,5 +1,5 @@
 // packages/components/src/border-box-control/border-box-control-split-controls/index.ts
-import { default as default2 } from "./component";
+import { default as default2 } from "./component.js";
 export {
   default2 as default
 };

package/build-module/border-box-control/border-box-control-visualizer/component.js

@@ -1,7 +1,7 @@
 // packages/components/src/border-box-control/border-box-control-visualizer/component.tsx
-import { View } from "../../view";
-import { contextConnect } from "../../context";
-import { useBorderBoxControlVisualizer } from "./hook";
+import { View } from "../../view/index.js";
+import { contextConnect } from "../../context/index.js";
+import { useBorderBoxControlVisualizer } from "./hook.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var BorderBoxControlVisualizer = (props, forwardedRef) => {
   const {

package/build-module/border-box-control/border-box-control-visualizer/hook.js

@@ -1,8 +1,8 @@
 // packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
 import { useMemo } from "@wordpress/element";
-import * as styles from "../styles";
-import { useContextSystem } from "../../context";
-import { useCx } from "../../utils";
+import * as styles from "../styles.js";
+import { useContextSystem } from "../../context/index.js";
+import { useCx } from "../../utils/index.js";
 function useBorderBoxControlVisualizer(props) {
   const {
     className,

package/build-module/border-box-control/border-box-control-visualizer/index.js

@@ -1,5 +1,5 @@
 // packages/components/src/border-box-control/border-box-control-visualizer/index.ts
-import { default as default2 } from "./component";
+import { default as default2 } from "./component.js";
 export {
   default2 as default
 };

package/build-module/border-box-control/index.js

@@ -1,7 +1,7 @@
 // packages/components/src/border-box-control/index.ts
-import { default as default2 } from "./border-box-control/component";
-import { useBorderBoxControl } from "./border-box-control/hook";
-import { hasSplitBorders, isEmptyBorder, isDefinedBorder } from "./utils";
+import { default as default2 } from "./border-box-control/component.js";
+import { useBorderBoxControl } from "./border-box-control/hook.js";
+import { hasSplitBorders, isEmptyBorder, isDefinedBorder } from "./utils.js";
 export {
   default2 as BorderBoxControl,
   hasSplitBorders,

package/build-module/border-box-control/styles.js

@@ -1,6 +1,6 @@
 // packages/components/src/border-box-control/styles.ts
 import { css } from "@emotion/react";
-import { COLORS, CONFIG, rtl } from "../utils";
+import { COLORS, CONFIG, rtl } 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/border-box-control/utils.js

@@ -1,5 +1,5 @@
 // packages/components/src/border-box-control/utils.ts
-import { parseCSSUnitValue } from "../utils/unit-values";
+import { parseCSSUnitValue } from "../utils/unit-values.js";
 var sides = ["top", "right", "bottom", "left"];
 var borderProps = ["color", "style", "width"];
 var isEmptyBorder = (border) => {

package/build-module/border-control/border-control/component.js

@@ -1,15 +1,15 @@
 // packages/components/src/border-control/border-control/component.tsx
 import { __ } from "@wordpress/i18n";
-import BorderControlDropdown from "../border-control-dropdown";
-import UnitControl from "../../unit-control";
-import RangeControl from "../../range-control";
-import { HStack } from "../../h-stack";
-import { StyledLabel } from "../../base-control/styles/base-control-styles";
-import { View } from "../../view";
-import { VisuallyHidden } from "../../visually-hidden";
-import { contextConnect } from "../../context";
-import { useBorderControl } from "./hook";
-import { Spacer } from "../../spacer";
+import BorderControlDropdown from "../border-control-dropdown/index.js";
+import UnitControl from "../../unit-control/index.js";
+import RangeControl from "../../range-control/index.js";
+import { HStack } from "../../h-stack/index.js";
+import { StyledLabel } from "../../base-control/styles/base-control-styles.js";
+import { View } from "../../view/index.js";
+import { VisuallyHidden } from "../../visually-hidden/index.js";
+import { contextConnect } from "../../context/index.js";
+import { useBorderControl } from "./hook.js";
+import { Spacer } from "../../spacer/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var BorderLabel = (props) => {
   const {
@@ -96,7 +96,6 @@ var UnconnectedBorderControl = (props, forwardedRef) => {
         __unstableInputWidth: inputWidth,
         size
       }), withSlider && /* @__PURE__ */ _jsx(RangeControl, {
-        __nextHasNoMarginBottom: true,
         label: __("Border width"),
         hideLabelFromVision: true,
         className: sliderClassName,

package/build-module/border-control/border-control/component.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-control/border-control/component.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect } from '../../context';\nimport { useBorderControl } from './hook';\nimport { Spacer } from '../../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst BorderLabel = props => {\n  const {\n    label,\n    hideLabelFromVision\n  } = props;\n  if (!label) {\n    return null;\n  }\n  return hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n    as: \"legend\",\n    children: label\n  }) : /*#__PURE__*/_jsx(StyledLabel, {\n    as: \"legend\",\n    children: label\n  });\n};\nconst UnconnectedBorderControl = (props, forwardedRef) => {\n  const {\n    __next40pxDefaultSize = false,\n    colors,\n    disableCustomColors,\n    disableUnits,\n    enableAlpha,\n    enableStyle,\n    hideLabelFromVision,\n    innerWrapperClassName,\n    inputWidth,\n    isStyleSettable,\n    label,\n    onBorderChange,\n    onSliderChange,\n    onWidthChange,\n    placeholder,\n    __unstablePopoverProps,\n    previousStyleSelection,\n    showDropdownHeader,\n    size,\n    sliderClassName,\n    value: border,\n    widthUnit,\n    widthValue,\n    withSlider,\n    __experimentalIsRenderedInSidebar,\n    ...otherProps\n  } = useBorderControl(props);\n  return /*#__PURE__*/_jsxs(View, {\n    as: \"fieldset\",\n    ...otherProps,\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(BorderLabel, {\n      label: label,\n      hideLabelFromVision: hideLabelFromVision\n    }), /*#__PURE__*/_jsxs(HStack, {\n      spacing: 4,\n      className: innerWrapperClassName,\n      children: [/*#__PURE__*/_jsx(UnitControl, {\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        __shouldNotWarnDeprecated36pxSize: true,\n        prefix: /*#__PURE__*/_jsx(Spacer, {\n          marginRight: 1,\n          marginBottom: 0,\n          children: /*#__PURE__*/_jsx(BorderControlDropdown, {\n            border: border,\n            colors: colors,\n            __unstablePopoverProps: __unstablePopoverProps,\n            disableCustomColors: disableCustomColors,\n            enableAlpha: enableAlpha,\n            enableStyle: enableStyle,\n            isStyleSettable: isStyleSettable,\n            onChange: onBorderChange,\n            previousStyleSelection: previousStyleSelection,\n            __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n            size: size\n          })\n        }),\n        label: __('Border width'),\n        hideLabelFromVision: true,\n        min: 0,\n        onChange: onWidthChange,\n        value: border?.width || '',\n        placeholder: placeholder,\n        disableUnits: disableUnits,\n        __unstableInputWidth: inputWidth,\n        size: size\n      }), withSlider && /*#__PURE__*/_jsx(RangeControl, {\n        __nextHasNoMarginBottom: true,\n        label: __('Border width'),\n        hideLabelFromVision: true,\n        className: sliderClassName,\n        initialPosition: 0,\n        max: 100,\n        min: 0,\n        onChange: onSliderChange,\n        step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,\n        value: widthValue || undefined,\n        withInputField: false,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        __shouldNotWarnDeprecated36pxSize: true\n      })]\n    })]\n  });\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl');\nexport default BorderControl;"],
-  "mappings": ";AAGA,SAAS,UAAU;AAKnB,OAAO,2BAA2B;AAClC,OAAO,iBAAiB;AACxB,OAAO,kBAAkB;AACzB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,cAAc,WAAS;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AACA,SAAO,sBAAmC,qBAAK,gBAAgB;AAAA,IAC7D,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,CAAC,IAAiB,qBAAK,aAAa;AAAA,IAClC,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,CAAC;AACH;AACA,IAAM,2BAA2B,CAAC,OAAO,iBAAiB;AACxD,QAAM;AAAA,IACJ,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,KAAK;AAC1B,SAAoB,sBAAM,MAAM;AAAA,IAC9B,IAAI;AAAA,IACJ,GAAG;AAAA,IACH,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,aAAa;AAAA,MACxC;AAAA,MACA;AAAA,IACF,CAAC,GAAgB,sBAAM,QAAQ;AAAA,MAC7B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,CAAc,qBAAK,aAAa;AAAA,QACxC;AAAA,QACA,mCAAmC;AAAA,QACnC,QAAqB,qBAAK,QAAQ;AAAA,UAChC,aAAa;AAAA,UACb,cAAc;AAAA,UACd,UAAuB,qBAAK,uBAAuB;AAAA,YACjD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UACF,CAAC;AAAA,QACH,CAAC;AAAA,QACD,OAAO,GAAG,cAAc;AAAA,QACxB,qBAAqB;AAAA,QACrB,KAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO,QAAQ,SAAS;AAAA,QACxB;AAAA,QACA;AAAA,QACA,sBAAsB;AAAA,QACtB;AAAA,MACF,CAAC,GAAG,cAA2B,qBAAK,cAAc;AAAA,QAChD,yBAAyB;AAAA,QACzB,OAAO,GAAG,cAAc;AAAA,QACxB,qBAAqB;AAAA,QACrB,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAM,CAAC,MAAM,GAAG,EAAE,SAAS,SAAS,IAAI,IAAI;AAAA,QAC5C,OAAO,cAAc;AAAA,QACrB,gBAAgB;AAAA,QAChB;AAAA,QACA,mCAAmC;AAAA,MACrC,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAqCO,IAAM,gBAAgB,eAAe,0BAA0B,eAAe;AACrF,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect } from '../../context';\nimport { useBorderControl } from './hook';\nimport { Spacer } from '../../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst BorderLabel = props => {\n  const {\n    label,\n    hideLabelFromVision\n  } = props;\n  if (!label) {\n    return null;\n  }\n  return hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n    as: \"legend\",\n    children: label\n  }) : /*#__PURE__*/_jsx(StyledLabel, {\n    as: \"legend\",\n    children: label\n  });\n};\nconst UnconnectedBorderControl = (props, forwardedRef) => {\n  const {\n    __next40pxDefaultSize = false,\n    colors,\n    disableCustomColors,\n    disableUnits,\n    enableAlpha,\n    enableStyle,\n    hideLabelFromVision,\n    innerWrapperClassName,\n    inputWidth,\n    isStyleSettable,\n    label,\n    onBorderChange,\n    onSliderChange,\n    onWidthChange,\n    placeholder,\n    __unstablePopoverProps,\n    previousStyleSelection,\n    showDropdownHeader,\n    size,\n    sliderClassName,\n    value: border,\n    widthUnit,\n    widthValue,\n    withSlider,\n    __experimentalIsRenderedInSidebar,\n    ...otherProps\n  } = useBorderControl(props);\n  return /*#__PURE__*/_jsxs(View, {\n    as: \"fieldset\",\n    ...otherProps,\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(BorderLabel, {\n      label: label,\n      hideLabelFromVision: hideLabelFromVision\n    }), /*#__PURE__*/_jsxs(HStack, {\n      spacing: 4,\n      className: innerWrapperClassName,\n      children: [/*#__PURE__*/_jsx(UnitControl, {\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        __shouldNotWarnDeprecated36pxSize: true,\n        prefix: /*#__PURE__*/_jsx(Spacer, {\n          marginRight: 1,\n          marginBottom: 0,\n          children: /*#__PURE__*/_jsx(BorderControlDropdown, {\n            border: border,\n            colors: colors,\n            __unstablePopoverProps: __unstablePopoverProps,\n            disableCustomColors: disableCustomColors,\n            enableAlpha: enableAlpha,\n            enableStyle: enableStyle,\n            isStyleSettable: isStyleSettable,\n            onChange: onBorderChange,\n            previousStyleSelection: previousStyleSelection,\n            __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n            size: size\n          })\n        }),\n        label: __('Border width'),\n        hideLabelFromVision: true,\n        min: 0,\n        onChange: onWidthChange,\n        value: border?.width || '',\n        placeholder: placeholder,\n        disableUnits: disableUnits,\n        __unstableInputWidth: inputWidth,\n        size: size\n      }), withSlider && /*#__PURE__*/_jsx(RangeControl, {\n        label: __('Border width'),\n        hideLabelFromVision: true,\n        className: sliderClassName,\n        initialPosition: 0,\n        max: 100,\n        min: 0,\n        onChange: onSliderChange,\n        step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,\n        value: widthValue || undefined,\n        withInputField: false,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        __shouldNotWarnDeprecated36pxSize: true\n      })]\n    })]\n  });\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl');\nexport default BorderControl;"],
+  "mappings": ";AAGA,SAAS,UAAU;AAKnB,OAAO,2BAA2B;AAClC,OAAO,iBAAiB;AACxB,OAAO,kBAAkB;AACzB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,cAAc,WAAS;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AACA,SAAO,sBAAmC,qBAAK,gBAAgB;AAAA,IAC7D,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,CAAC,IAAiB,qBAAK,aAAa;AAAA,IAClC,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,CAAC;AACH;AACA,IAAM,2BAA2B,CAAC,OAAO,iBAAiB;AACxD,QAAM;AAAA,IACJ,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,KAAK;AAC1B,SAAoB,sBAAM,MAAM;AAAA,IAC9B,IAAI;AAAA,IACJ,GAAG;AAAA,IACH,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,aAAa;AAAA,MACxC;AAAA,MACA;AAAA,IACF,CAAC,GAAgB,sBAAM,QAAQ;AAAA,MAC7B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,CAAc,qBAAK,aAAa;AAAA,QACxC;AAAA,QACA,mCAAmC;AAAA,QACnC,QAAqB,qBAAK,QAAQ;AAAA,UAChC,aAAa;AAAA,UACb,cAAc;AAAA,UACd,UAAuB,qBAAK,uBAAuB;AAAA,YACjD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UACF,CAAC;AAAA,QACH,CAAC;AAAA,QACD,OAAO,GAAG,cAAc;AAAA,QACxB,qBAAqB;AAAA,QACrB,KAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO,QAAQ,SAAS;AAAA,QACxB;AAAA,QACA;AAAA,QACA,sBAAsB;AAAA,QACtB;AAAA,MACF,CAAC,GAAG,cAA2B,qBAAK,cAAc;AAAA,QAChD,OAAO,GAAG,cAAc;AAAA,QACxB,qBAAqB;AAAA,QACrB,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAM,CAAC,MAAM,GAAG,EAAE,SAAS,SAAS,IAAI,IAAI;AAAA,QAC5C,OAAO,cAAc;AAAA,QACrB,gBAAgB;AAAA,QAChB;AAAA,QACA,mCAAmC;AAAA,MACrC,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAqCO,IAAM,gBAAgB,eAAe,0BAA0B,eAAe;AACrF,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/border-control/border-control/hook.js

@@ -1,10 +1,10 @@
 // packages/components/src/border-control/border-control/hook.ts
 import { useCallback, useMemo, useState } from "@wordpress/element";
-import * as styles from "../styles";
-import { parseQuantityAndUnitFromRawValue } from "../../unit-control/utils";
-import { useContextSystem } from "../../context";
-import { useCx } from "../../utils/hooks/use-cx";
-import { maybeWarnDeprecated36pxSize } from "../../utils/deprecated-36px-size";
+import * as styles from "../styles.js";
+import { parseQuantityAndUnitFromRawValue } from "../../unit-control/utils.js";
+import { useContextSystem } from "../../context/index.js";
+import { useCx } from "../../utils/hooks/use-cx.js";
+import { maybeWarnDeprecated36pxSize } from "../../utils/deprecated-36px-size.js";
 var isValidBorder = (border) => {
   const hasWidth = border?.width !== void 0 && border.width !== "";
   const hasColor = border?.color !== void 0;

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

@@ -1,6 +1,6 @@
 // packages/components/src/border-control/border-control/index.ts
-import { default as default2 } from "./component";
-import { useBorderControl } from "./hook";
+import { default as default2 } from "./component.js";
+import { useBorderControl } from "./hook.js";
 export {
   default2 as BorderControl,
   useBorderControl

package/build-module/border-control/border-control-dropdown/component.js

@@ -1,15 +1,15 @@
 // packages/components/src/border-control/border-control-dropdown/component.tsx
 import { __, sprintf } from "@wordpress/i18n";
-import BorderControlStylePicker from "../border-control-style-picker";
-import Button from "../../button";
-import ColorIndicator from "../../color-indicator";
-import ColorPalette from "../../color-palette";
-import Dropdown from "../../dropdown";
-import { VStack } from "../../v-stack";
-import { contextConnect } from "../../context";
-import { useBorderControlDropdown } from "./hook";
-import DropdownContentWrapper from "../../dropdown/dropdown-content-wrapper";
-import { isMultiplePaletteArray } from "../../color-palette/utils";
+import BorderControlStylePicker from "../border-control-style-picker/index.js";
+import Button from "../../button/index.js";
+import ColorIndicator from "../../color-indicator/index.js";
+import ColorPalette from "../../color-palette/index.js";
+import Dropdown from "../../dropdown/index.js";
+import { VStack } from "../../v-stack/index.js";
+import { contextConnect } from "../../context/index.js";
+import { useBorderControlDropdown } from "./hook.js";
+import DropdownContentWrapper from "../../dropdown/dropdown-content-wrapper.js";
+import { isMultiplePaletteArray } from "../../color-palette/utils.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var getAriaLabelColorValue = (colorValue) => {
   return colorValue.replace(/^var\((.+)\)$/, "$1");

package/build-module/border-control/border-control-dropdown/hook.js

@@ -1,9 +1,9 @@
 // packages/components/src/border-control/border-control-dropdown/hook.ts
 import { useMemo } from "@wordpress/element";
-import * as styles from "../styles";
-import { parseQuantityAndUnitFromRawValue } from "../../unit-control/utils";
-import { useContextSystem } from "../../context";
-import { useCx } from "../../utils/hooks/use-cx";
+import * as styles from "../styles.js";
+import { parseQuantityAndUnitFromRawValue } from "../../unit-control/utils.js";
+import { useContextSystem } from "../../context/index.js";
+import { useCx } from "../../utils/hooks/use-cx.js";
 function useBorderControlDropdown(props) {
   const {
     border,

package/build-module/border-control/border-control-dropdown/index.js

@@ -1,5 +1,5 @@
 // packages/components/src/border-control/border-control-dropdown/index.ts
-import { default as default2 } from "./component";
+import { default as default2 } from "./component.js";
 export {
   default2 as default
 };

package/build-module/border-control/border-control-style-picker/component.js

@@ -1,8 +1,8 @@
 // packages/components/src/border-control/border-control-style-picker/component.tsx
 import { lineDashed, lineDotted, lineSolid } from "@wordpress/icons";
 import { __ } from "@wordpress/i18n";
-import { contextConnect } from "../../context";
-import { ToggleGroupControl, ToggleGroupControlOptionIcon } from "../../toggle-group-control";
+import { contextConnect } from "../../context/index.js";
+import { ToggleGroupControl, ToggleGroupControlOptionIcon } from "../../toggle-group-control/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var BORDER_STYLES = [{
   label: __("Solid"),
@@ -22,7 +22,6 @@ function UnconnectedBorderControlStylePicker({
   ...restProps
 }, forwardedRef) {
   return /* @__PURE__ */ _jsx(ToggleGroupControl, {
-    __nextHasNoMarginBottom: true,
     __next40pxDefaultSize: true,
     ref: forwardedRef,
     isDeselectable: true,

package/build-module/border-control/border-control-style-picker/component.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-control/border-control-style-picker/component.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../context';\nimport { ToggleGroupControl, ToggleGroupControlOptionIcon } from '../../toggle-group-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst BORDER_STYLES = [{\n  label: __('Solid'),\n  icon: lineSolid,\n  value: 'solid'\n}, {\n  label: __('Dashed'),\n  icon: lineDashed,\n  value: 'dashed'\n}, {\n  label: __('Dotted'),\n  icon: lineDotted,\n  value: 'dotted'\n}];\nfunction UnconnectedBorderControlStylePicker({\n  onChange,\n  ...restProps\n}, forwardedRef) {\n  return /*#__PURE__*/_jsx(ToggleGroupControl, {\n    __nextHasNoMarginBottom: true,\n    __next40pxDefaultSize: true,\n    ref: forwardedRef,\n    isDeselectable: true,\n    onChange: value => {\n      onChange?.(value);\n    },\n    ...restProps,\n    children: BORDER_STYLES.map(borderStyle => /*#__PURE__*/_jsx(ToggleGroupControlOptionIcon, {\n      value: borderStyle.value,\n      icon: borderStyle.icon,\n      label: borderStyle.label\n    }, borderStyle.value))\n  });\n}\nconst BorderControlStylePicker = contextConnect(UnconnectedBorderControlStylePicker, 'BorderControlStylePicker');\nexport default BorderControlStylePicker;"],
-  "mappings": ";AAGA,SAAS,YAAY,YAAY,iBAAiB;AAClD,SAAS,UAAU;AAKnB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,OAAO,YAAY;AAC5B,IAAM,gBAAgB,CAAC;AAAA,EACrB,OAAO,GAAG,OAAO;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AACT,GAAG;AAAA,EACD,OAAO,GAAG,QAAQ;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AACT,GAAG;AAAA,EACD,OAAO,GAAG,QAAQ;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AACD,SAAS,oCAAoC;AAAA,EAC3C;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,SAAoB,qBAAK,oBAAoB;AAAA,IAC3C,yBAAyB;AAAA,IACzB,uBAAuB;AAAA,IACvB,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,UAAU,WAAS;AACjB,iBAAW,KAAK;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,IACH,UAAU,cAAc,IAAI,iBAA4B,qBAAK,8BAA8B;AAAA,MACzF,OAAO,YAAY;AAAA,MACnB,MAAM,YAAY;AAAA,MAClB,OAAO,YAAY;AAAA,IACrB,GAAG,YAAY,KAAK,CAAC;AAAA,EACvB,CAAC;AACH;AACA,IAAM,2BAA2B,eAAe,qCAAqC,0BAA0B;AAC/G,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../context';\nimport { ToggleGroupControl, ToggleGroupControlOptionIcon } from '../../toggle-group-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst BORDER_STYLES = [{\n  label: __('Solid'),\n  icon: lineSolid,\n  value: 'solid'\n}, {\n  label: __('Dashed'),\n  icon: lineDashed,\n  value: 'dashed'\n}, {\n  label: __('Dotted'),\n  icon: lineDotted,\n  value: 'dotted'\n}];\nfunction UnconnectedBorderControlStylePicker({\n  onChange,\n  ...restProps\n}, forwardedRef) {\n  return /*#__PURE__*/_jsx(ToggleGroupControl, {\n    __next40pxDefaultSize: true,\n    ref: forwardedRef,\n    isDeselectable: true,\n    onChange: value => {\n      onChange?.(value);\n    },\n    ...restProps,\n    children: BORDER_STYLES.map(borderStyle => /*#__PURE__*/_jsx(ToggleGroupControlOptionIcon, {\n      value: borderStyle.value,\n      icon: borderStyle.icon,\n      label: borderStyle.label\n    }, borderStyle.value))\n  });\n}\nconst BorderControlStylePicker = contextConnect(UnconnectedBorderControlStylePicker, 'BorderControlStylePicker');\nexport default BorderControlStylePicker;"],
+  "mappings": ";AAGA,SAAS,YAAY,YAAY,iBAAiB;AAClD,SAAS,UAAU;AAKnB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,OAAO,YAAY;AAC5B,IAAM,gBAAgB,CAAC;AAAA,EACrB,OAAO,GAAG,OAAO;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AACT,GAAG;AAAA,EACD,OAAO,GAAG,QAAQ;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AACT,GAAG;AAAA,EACD,OAAO,GAAG,QAAQ;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AACD,SAAS,oCAAoC;AAAA,EAC3C;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,SAAoB,qBAAK,oBAAoB;AAAA,IAC3C,uBAAuB;AAAA,IACvB,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,UAAU,WAAS;AACjB,iBAAW,KAAK;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,IACH,UAAU,cAAc,IAAI,iBAA4B,qBAAK,8BAA8B;AAAA,MACzF,OAAO,YAAY;AAAA,MACnB,MAAM,YAAY;AAAA,MAClB,OAAO,YAAY;AAAA,IACrB,GAAG,YAAY,KAAK,CAAC;AAAA,EACvB,CAAC;AACH;AACA,IAAM,2BAA2B,eAAe,qCAAqC,0BAA0B;AAC/G,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/border-control/border-control-style-picker/index.js

@@ -1,5 +1,5 @@
 // packages/components/src/border-control/border-control-style-picker/index.ts
-import { default as default2 } from "./component";
+import { default as default2 } from "./component.js";
 export {
   default2 as default
 };

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

@@ -1,6 +1,6 @@
 // packages/components/src/border-control/index.ts
-import { default as default2 } from "./border-control/component";
-import { useBorderControl } from "./border-control/hook";
+import { default as default2 } from "./border-control/component.js";
+import { useBorderControl } from "./border-control/hook.js";
 export {
   default2 as BorderControl,
   useBorderControl

package/build-module/border-control/styles.js

@@ -1,9 +1,9 @@
 // packages/components/src/border-control/styles.ts
 import { css } from "@emotion/react";
-import { COLORS, CONFIG, boxSizingReset, rtl } from "../utils";
-import { space } from "../utils/space";
-import { StyledLabel } from "../base-control/styles/base-control-styles";
-import { ValueInput as UnitControlWrapper, UnitSelect } from "../unit-control/styles/unit-control-styles";
+import { COLORS, CONFIG, boxSizingReset, rtl } from "../utils/index.js";
+import { space } from "../utils/space.js";
+import { StyledLabel } from "../base-control/styles/base-control-styles.js";
+import { ValueInput as UnitControlWrapper, UnitSelect } from "../unit-control/styles/unit-control-styles.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/box-control/icon.js

@@ -1,5 +1,5 @@
 // packages/components/src/box-control/icon.tsx
-import { Root, Viewbox, TopStroke, RightStroke, BottomStroke, LeftStroke } from "./styles/box-control-icon-styles";
+import { Root, Viewbox, TopStroke, RightStroke, BottomStroke, LeftStroke } from "./styles/box-control-icon-styles.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var BASE_ICON_SIZE = 24;
 function BoxControlIcon({

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

@@ -3,17 +3,17 @@ import { useInstanceId } from "@wordpress/compose";
 import { useState } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import warning from "@wordpress/warning";
-import { BaseControl } from "../base-control";
-import InputControl from "./input-control";
-import LinkedButton from "./linked-button";
-import { Grid } from "../grid";
-import { InputWrapper, ResetButton, LinkedButtonWrapper } from "./styles/box-control-styles";
-import { parseQuantityAndUnitFromRawValue } from "../unit-control/utils";
-import { DEFAULT_VALUES, getInitialSide, isValueMixed, isValuesDefined, getAllowedSides } from "./utils";
-import { useControlledState } from "../utils/hooks";
-import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size";
+import { BaseControl } from "../base-control/index.js";
+import InputControl from "./input-control.js";
+import LinkedButton from "./linked-button.js";
+import { Grid } from "../grid/index.js";
+import { InputWrapper, ResetButton, LinkedButtonWrapper } from "./styles/box-control-styles.js";
+import { parseQuantityAndUnitFromRawValue } from "../unit-control/utils.js";
+import { DEFAULT_VALUES, getInitialSide, isValueMixed, isValuesDefined, getAllowedSides } from "./utils.js";
+import { useControlledState } from "../utils/hooks/index.js";
+import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { applyValueToSides } from "./utils";
+import { applyValueToSides } from "./utils.js";
 var defaultInputProps = {
   min: 0
 };

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

@@ -3,11 +3,11 @@ import { useInstanceId } from "@wordpress/compose";
 import { __ } from "@wordpress/i18n";
 import { useState } from "@wordpress/element";
 import { settings } from "@wordpress/icons";
-import Tooltip from "../tooltip";
-import { parseQuantityAndUnitFromRawValue } from "../unit-control/utils";
-import { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from "./utils";
-import { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from "./styles/box-control-styles";
-import Button from "../button";
+import Tooltip from "../tooltip/index.js";
+import { parseQuantityAndUnitFromRawValue } from "../unit-control/utils.js";
+import { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from "./utils.js";
+import { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from "./styles/box-control-styles.js";
+import Button from "../button/index.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var noop = () => {
 };
@@ -163,7 +163,6 @@ function BoxInputControl({
           hideLabelFromVision: true
         })
       }), /* @__PURE__ */ _jsx(FlexedRangeControl, {
-        __nextHasNoMarginBottom: true,
         __next40pxDefaultSize,
         __shouldNotWarnDeprecated36pxSize: true,
         "aria-controls": inputId,
@@ -194,8 +193,7 @@ function BoxInputControl({
       max: marks.length - 1,
       marks,
       label: LABELS[side],
-      hideLabelFromVision: true,
-      __nextHasNoMarginBottom: true
+      hideLabelFromVision: true
     }), hasPresets && /* @__PURE__ */ _jsx(Button, {
       label: showCustomValueControl ? __("Use size preset") : __("Set custom size"),
       icon: settings,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/box-control/input-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from './utils';\nimport { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';\nimport Button from '../button';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction getSidesToModify(side, sides, isAlt) {\n  const allowedSides = getAllowedSides(sides);\n  let modifiedSides = [];\n  switch (side) {\n    case 'all':\n      modifiedSides = ['top', 'bottom', 'left', 'right'];\n      break;\n    case 'horizontal':\n      modifiedSides = ['left', 'right'];\n      break;\n    case 'vertical':\n      modifiedSides = ['top', 'bottom'];\n      break;\n    default:\n      modifiedSides = [side];\n  }\n  if (isAlt) {\n    switch (side) {\n      case 'top':\n        modifiedSides.push('bottom');\n        break;\n      case 'bottom':\n        modifiedSides.push('top');\n        break;\n      case 'left':\n        modifiedSides.push('left');\n        break;\n      case 'right':\n        modifiedSides.push('right');\n        break;\n    }\n  }\n  return modifiedSides.filter(s => allowedSides.has(s));\n}\nexport default function BoxInputControl({\n  __next40pxDefaultSize,\n  onChange = noop,\n  onFocus = noop,\n  values,\n  selectedUnits,\n  setSelectedUnits,\n  sides,\n  side,\n  min = 0,\n  presets,\n  presetKey,\n  ...props\n}) {\n  var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;\n  const defaultValuesToModify = getSidesToModify(side, sides);\n  const handleOnFocus = event => {\n    onFocus(event, {\n      side\n    });\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n  };\n  const handleRawOnValueChange = next => {\n    const nextValues = {\n      ...values\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      nextValues[modifiedSide] = next;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnValueChange = (next, extra) => {\n    const nextValues = {\n      ...values\n    };\n    const isNumeric = next !== undefined && !isNaN(parseFloat(next));\n    const nextValue = isNumeric ? next : undefined;\n    const modifiedSides = getSidesToModify(side, sides,\n    /**\n     * Supports changing pair sides. For example, holding the ALT key\n     * when changing the TOP will also update BOTTOM.\n     */\n    // @ts-expect-error - TODO: event.altKey is only present when the change event was\n    // triggered by a keyboard event. Should this feature be implemented differently so\n    // it also works with drag events?\n    !!extra?.event.altKey);\n    modifiedSides.forEach(modifiedSide => {\n      nextValues[modifiedSide] = nextValue;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnUnitChange = next => {\n    const newUnits = {\n      ...selectedUnits\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      newUnits[modifiedSide] = next;\n    });\n    setSelectedUnits(newUnits);\n  };\n  const mergedValue = getMergedValue(values, defaultValuesToModify);\n  const hasValues = isValuesDefined(values);\n  const isMixed = hasValues && defaultValuesToModify.length > 1 && isValueMixed(values, defaultValuesToModify);\n  const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(mergedValue);\n  const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]];\n  const generatedId = useInstanceId(BoxInputControl, 'box-control-input');\n  const inputId = [generatedId, side].join('-');\n  const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);\n  const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n  const mixedPlaceholder = isMixed || isMixedUnit ? __('Mixed') : undefined;\n  const hasPresets = presets && presets.length > 0 && presetKey;\n  const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey);\n  const [showCustomValueControl, setShowCustomValueControl] = useState(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);\n  const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined;\n  const marks = hasPresets ? [{\n    value: 0,\n    label: '',\n    tooltip: __('None')\n  }, ...presets.map((preset, index) => {\n    var _preset$name;\n    return {\n      value: index + 1,\n      label: '',\n      tooltip: (_preset$name = preset.name) !== null && _preset$name !== void 0 ? _preset$name : preset.slug\n    };\n  })] : [];\n  return /*#__PURE__*/_jsxs(InputWrapper, {\n    expanded: true,\n    children: [/*#__PURE__*/_jsx(FlexedBoxControlIcon, {\n      side: side,\n      sides: sides\n    }), showCustomValueControl && /*#__PURE__*/_jsxs(_Fragment, {\n      children: [/*#__PURE__*/_jsx(Tooltip, {\n        placement: \"top-end\",\n        text: LABELS[side],\n        children: /*#__PURE__*/_jsx(StyledUnitControl, {\n          ...props,\n          min: min,\n          __shouldNotWarnDeprecated36pxSize: true,\n          __next40pxDefaultSize: __next40pxDefaultSize,\n          className: \"component-box-control__unit-control\",\n          id: inputId,\n          isPressEnterToChange: true,\n          disableUnits: isMixed || isMixedUnit,\n          value: usedValue,\n          onChange: handleOnValueChange,\n          onUnitChange: handleOnUnitChange,\n          onFocus: handleOnFocus,\n          label: LABELS[side],\n          placeholder: mixedPlaceholder,\n          hideLabelFromVision: true\n        })\n      }), /*#__PURE__*/_jsx(FlexedRangeControl, {\n        __nextHasNoMarginBottom: true,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        __shouldNotWarnDeprecated36pxSize: true,\n        \"aria-controls\": inputId,\n        label: LABELS[side],\n        hideLabelFromVision: true,\n        onChange: newValue => {\n          handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);\n        },\n        min: isFinite(min) ? min : 0,\n        max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,\n        step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,\n        value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,\n        withInputField: false\n      })]\n    }), hasPresets && !showCustomValueControl && /*#__PURE__*/_jsx(FlexedRangeControl, {\n      __next40pxDefaultSize: true,\n      className: \"spacing-sizes-control__range-control\",\n      value: presetIndex !== undefined ? presetIndex + 1 : 0,\n      onChange: newIndex => {\n        const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets);\n        handleRawOnValueChange(newValue);\n      },\n      withInputField: false,\n      \"aria-valuenow\": presetIndex !== undefined ? presetIndex + 1 : 0,\n      \"aria-valuetext\": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,\n      renderTooltipContent: index => marks[!index ? 0 : index].tooltip,\n      min: 0,\n      max: marks.length - 1,\n      marks: marks,\n      label: LABELS[side],\n      hideLabelFromVision: true,\n      __nextHasNoMarginBottom: true\n    }), hasPresets && /*#__PURE__*/_jsx(Button, {\n      label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),\n      icon: settings,\n      onClick: () => {\n        setShowCustomValueControl(!showCustomValueControl);\n      },\n      isPressed: showCustomValueControl,\n      size: \"small\",\n      iconSize: 24\n    })]\n  }, `box-control-${side}`);\n}"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from './utils';\nimport { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';\nimport Button from '../button';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction getSidesToModify(side, sides, isAlt) {\n  const allowedSides = getAllowedSides(sides);\n  let modifiedSides = [];\n  switch (side) {\n    case 'all':\n      modifiedSides = ['top', 'bottom', 'left', 'right'];\n      break;\n    case 'horizontal':\n      modifiedSides = ['left', 'right'];\n      break;\n    case 'vertical':\n      modifiedSides = ['top', 'bottom'];\n      break;\n    default:\n      modifiedSides = [side];\n  }\n  if (isAlt) {\n    switch (side) {\n      case 'top':\n        modifiedSides.push('bottom');\n        break;\n      case 'bottom':\n        modifiedSides.push('top');\n        break;\n      case 'left':\n        modifiedSides.push('left');\n        break;\n      case 'right':\n        modifiedSides.push('right');\n        break;\n    }\n  }\n  return modifiedSides.filter(s => allowedSides.has(s));\n}\nexport default function BoxInputControl({\n  __next40pxDefaultSize,\n  onChange = noop,\n  onFocus = noop,\n  values,\n  selectedUnits,\n  setSelectedUnits,\n  sides,\n  side,\n  min = 0,\n  presets,\n  presetKey,\n  ...props\n}) {\n  var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;\n  const defaultValuesToModify = getSidesToModify(side, sides);\n  const handleOnFocus = event => {\n    onFocus(event, {\n      side\n    });\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n  };\n  const handleRawOnValueChange = next => {\n    const nextValues = {\n      ...values\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      nextValues[modifiedSide] = next;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnValueChange = (next, extra) => {\n    const nextValues = {\n      ...values\n    };\n    const isNumeric = next !== undefined && !isNaN(parseFloat(next));\n    const nextValue = isNumeric ? next : undefined;\n    const modifiedSides = getSidesToModify(side, sides,\n    /**\n     * Supports changing pair sides. For example, holding the ALT key\n     * when changing the TOP will also update BOTTOM.\n     */\n    // @ts-expect-error - TODO: event.altKey is only present when the change event was\n    // triggered by a keyboard event. Should this feature be implemented differently so\n    // it also works with drag events?\n    !!extra?.event.altKey);\n    modifiedSides.forEach(modifiedSide => {\n      nextValues[modifiedSide] = nextValue;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnUnitChange = next => {\n    const newUnits = {\n      ...selectedUnits\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      newUnits[modifiedSide] = next;\n    });\n    setSelectedUnits(newUnits);\n  };\n  const mergedValue = getMergedValue(values, defaultValuesToModify);\n  const hasValues = isValuesDefined(values);\n  const isMixed = hasValues && defaultValuesToModify.length > 1 && isValueMixed(values, defaultValuesToModify);\n  const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(mergedValue);\n  const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]];\n  const generatedId = useInstanceId(BoxInputControl, 'box-control-input');\n  const inputId = [generatedId, side].join('-');\n  const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);\n  const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n  const mixedPlaceholder = isMixed || isMixedUnit ? __('Mixed') : undefined;\n  const hasPresets = presets && presets.length > 0 && presetKey;\n  const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey);\n  const [showCustomValueControl, setShowCustomValueControl] = useState(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);\n  const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined;\n  const marks = hasPresets ? [{\n    value: 0,\n    label: '',\n    tooltip: __('None')\n  }, ...presets.map((preset, index) => {\n    var _preset$name;\n    return {\n      value: index + 1,\n      label: '',\n      tooltip: (_preset$name = preset.name) !== null && _preset$name !== void 0 ? _preset$name : preset.slug\n    };\n  })] : [];\n  return /*#__PURE__*/_jsxs(InputWrapper, {\n    expanded: true,\n    children: [/*#__PURE__*/_jsx(FlexedBoxControlIcon, {\n      side: side,\n      sides: sides\n    }), showCustomValueControl && /*#__PURE__*/_jsxs(_Fragment, {\n      children: [/*#__PURE__*/_jsx(Tooltip, {\n        placement: \"top-end\",\n        text: LABELS[side],\n        children: /*#__PURE__*/_jsx(StyledUnitControl, {\n          ...props,\n          min: min,\n          __shouldNotWarnDeprecated36pxSize: true,\n          __next40pxDefaultSize: __next40pxDefaultSize,\n          className: \"component-box-control__unit-control\",\n          id: inputId,\n          isPressEnterToChange: true,\n          disableUnits: isMixed || isMixedUnit,\n          value: usedValue,\n          onChange: handleOnValueChange,\n          onUnitChange: handleOnUnitChange,\n          onFocus: handleOnFocus,\n          label: LABELS[side],\n          placeholder: mixedPlaceholder,\n          hideLabelFromVision: true\n        })\n      }), /*#__PURE__*/_jsx(FlexedRangeControl, {\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        __shouldNotWarnDeprecated36pxSize: true,\n        \"aria-controls\": inputId,\n        label: LABELS[side],\n        hideLabelFromVision: true,\n        onChange: newValue => {\n          handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);\n        },\n        min: isFinite(min) ? min : 0,\n        max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,\n        step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,\n        value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,\n        withInputField: false\n      })]\n    }), hasPresets && !showCustomValueControl && /*#__PURE__*/_jsx(FlexedRangeControl, {\n      __next40pxDefaultSize: true,\n      className: \"spacing-sizes-control__range-control\",\n      value: presetIndex !== undefined ? presetIndex + 1 : 0,\n      onChange: newIndex => {\n        const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets);\n        handleRawOnValueChange(newValue);\n      },\n      withInputField: false,\n      \"aria-valuenow\": presetIndex !== undefined ? presetIndex + 1 : 0,\n      \"aria-valuetext\": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,\n      renderTooltipContent: index => marks[!index ? 0 : index].tooltip,\n      min: 0,\n      max: marks.length - 1,\n      marks: marks,\n      label: LABELS[side],\n      hideLabelFromVision: true\n    }), hasPresets && /*#__PURE__*/_jsx(Button, {\n      label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),\n      icon: settings,\n      onClick: () => {\n        setShowCustomValueControl(!showCustomValueControl);\n      },\n      isPressed: showCustomValueControl,\n      size: \"small\",\n      iconSize: 24\n    })]\n  }, `box-control-${side}`);\n}"],
+  "mappings": "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",
   "names": []
 }

package/build-module/box-control/linked-button.js

@@ -1,7 +1,7 @@
 // packages/components/src/box-control/linked-button.tsx
 import { link, linkOff } from "@wordpress/icons";
 import { __ } from "@wordpress/i18n";
-import Button from "../button";
+import Button from "../button/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function LinkedButton({
   isLinked,

package/build-module/box-control/styles/box-control-styles.js

@@ -1,11 +1,11 @@
 // packages/components/src/box-control/styles/box-control-styles.ts
 import _styled from "@emotion/styled/base";
-import BoxControlIcon from "../icon";
-import Button from "../../button";
-import { HStack } from "../../h-stack";
-import RangeControl from "../../range-control";
-import UnitControl from "../../unit-control";
-import { space } from "../../utils/space";
+import BoxControlIcon from "../icon.js";
+import Button from "../../button/index.js";
+import { HStack } from "../../h-stack/index.js";
+import RangeControl from "../../range-control/index.js";
+import UnitControl from "../../unit-control/index.js";
+import { space } from "../../utils/space.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/button/deprecated.js

@@ -1,7 +1,7 @@
 // packages/components/src/button/deprecated.tsx
 import deprecated from "@wordpress/deprecated";
 import { forwardRef } from "@wordpress/element";
-import Button from ".";
+import Button from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedIconButton({
   label,

package/build-module/button/index.js

@@ -3,10 +3,10 @@ import clsx from "clsx";
 import deprecated from "@wordpress/deprecated";
 import { forwardRef } from "@wordpress/element";
 import { useInstanceId } from "@wordpress/compose";
-import Tooltip from "../tooltip";
-import Icon from "../icon";
-import { VisuallyHidden } from "../visually-hidden";
-import { positionToPlacement } from "../popover/utils";
+import Tooltip from "../tooltip/index.js";
+import Icon from "../icon/index.js";
+import { VisuallyHidden } from "../visually-hidden/index.js";
+import { positionToPlacement } from "../popover/utils.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var disabledEventsOnDisabledButton = ["onMouseDown", "onClick"];
 function useDeprecatedProps({

package/build-module/calendar/date-calendar/index.js

@@ -2,10 +2,10 @@
 import { DayPicker } from "react-day-picker";
 import { enUS } from "react-day-picker/locale";
 import { useCallback } from "@wordpress/element";
-import { COMMON_PROPS } from "../utils/constants";
-import { clampNumberOfMonths } from "../utils/misc";
-import { useControlledValue } from "../../utils/hooks";
-import { useLocalizationProps } from "../utils/use-localization-props";
+import { COMMON_PROPS } from "../utils/constants.js";
+import { clampNumberOfMonths } from "../utils/misc.js";
+import { useControlledValue } from "../../utils/hooks/index.js";
+import { useLocalizationProps } from "../utils/use-localization-props.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var DateCalendar = ({
   defaultSelected,

package/build-module/calendar/date-range-calendar/index.js

@@ -3,10 +3,10 @@ import { differenceInCalendarDays } from "date-fns";
 import { DayPicker, rangeContainsModifiers } from "react-day-picker";
 import { enUS } from "react-day-picker/locale";
 import { useMemo, useState, useCallback } from "@wordpress/element";
-import { COMMON_PROPS, MODIFIER_CLASSNAMES } from "../utils/constants";
-import { clampNumberOfMonths } from "../utils/misc";
-import { useControlledValue } from "../../utils/hooks";
-import { useLocalizationProps } from "../utils/use-localization-props";
+import { COMMON_PROPS, MODIFIER_CLASSNAMES } from "../utils/constants.js";
+import { clampNumberOfMonths } from "../utils/misc.js";
+import { useControlledValue } from "../../utils/hooks/index.js";
+import { useLocalizationProps } from "../utils/use-localization-props.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function usePreviewRange({
   selected,

package/build-module/calendar/index.js

@@ -1,7 +1,7 @@
 // packages/components/src/calendar/index.tsx
 import { TZDate } from "react-day-picker";
-import { DateCalendar } from "./date-calendar";
-import { DateRangeCalendar } from "./date-range-calendar";
+import { DateCalendar } from "./date-calendar/index.js";
+import { DateRangeCalendar } from "./date-range-calendar/index.js";
 export {
   DateCalendar,
   DateRangeCalendar,

package/build-module/calendar/utils/constants.js

@@ -1,5 +1,5 @@
 // packages/components/src/calendar/utils/constants.ts
-import { Day } from "./day-cell";
+import { Day } from "./day-cell.js";
 var CLASSNAMES = {
   root: "components-calendar",
   day: "components-calendar__day",