@wordpress/components 36.1.0 → 37.0.1-next.v.202607070741.0

package/CHANGELOG.md

@@ -2,15 +2,71 @@
 
 ## Unreleased
 
+## 37.0.0-next.0 (2026-07-07)
+
+### Breaking Changes
+
+-   `ExternalLink`: No longer sets the `rel` attribute by default. Consumers relying on the previous behavior should pass `rel` explicitly ([#79743](https://github.com/WordPress/gutenberg/pull/79743)).
+-   `View`: The legacy Emotion `css` prop no longer applies styles and is now accepted as a no-op for compatibility. Use `style` for inline styles or `className` for CSS-based styling instead ([#79443](https://github.com/WordPress/gutenberg/pull/79443)).
+-   Components that compose Emotion style fragments with `cx()` should pass source-order-dependent fragments in a single `css()` call. Passing separate fragments can change override order after the following components stopped rendering styles through Emotion:
+    -   `Flex` ([#79450](https://github.com/WordPress/gutenberg/pull/79450))
+    -   `Surface` ([#79445](https://github.com/WordPress/gutenberg/pull/79445))
+    -   `Theme` ([#79447](https://github.com/WordPress/gutenberg/pull/79447))
+    -   `Truncate` ([#79446](https://github.com/WordPress/gutenberg/pull/79446))
+    -   `View` ([#79443](https://github.com/WordPress/gutenberg/pull/79443))
+-   The `__next40pxDefaultSize` prop is now true by default. The prop can be safely removed from the following:
+    -   `BorderBoxControl` ([#79420](https://github.com/WordPress/gutenberg/pull/79420))
+    -   `BorderControl` ([#79418](https://github.com/WordPress/gutenberg/pull/79418))
+    -   `ComboboxControl` ([#79636](https://github.com/WordPress/gutenberg/pull/79636)).
+    -   `CustomSelectControl` ([#79796](https://github.com/WordPress/gutenberg/pull/79796)).
+    -   `FontSizePicker` ([#79481](https://github.com/WordPress/gutenberg/pull/79481))
+    -   `FormFileUpload` ([#79655](https://github.com/WordPress/gutenberg/pull/79655))
+    -   `FormTokenField` ([#79720](https://github.com/WordPress/gutenberg/pull/79720))
+    -   `RangeControl` ([#79590](https://github.com/WordPress/gutenberg/pull/79590))
+    -   `Radio` ([#79657](https://github.com/WordPress/gutenberg/pull/79657))
+    -   `SelectControl` ([#79797](https://github.com/WordPress/gutenberg/pull/79797))
+    -   `ToggleGroupControl` ([#79656](https://github.com/WordPress/gutenberg/pull/79656))
+    -   `TreeSelect` ([#79550](https://github.com/WordPress/gutenberg/pull/79550))
+    -   `UnitControl` ([#79721](https://github.com/WordPress/gutenberg/pull/79721))
+
+### Enhancements
+
+-   `Button`: Align focus rings with the design system ([#78646](https://github.com/WordPress/gutenberg/pull/78646)).
+-   The `size` prop no longer has any effect and can be safely removed from the following:
+    -   `BorderBoxControl` ([#79420](https://github.com/WordPress/gutenberg/pull/79420))
+    -   `BorderControl` ([#79418](https://github.com/WordPress/gutenberg/pull/79418))
+    -   `FontSizePicker` ([#79481](https://github.com/WordPress/gutenberg/pull/79481))
+    -   `ToggleGroupControl` ([#79656](https://github.com/WordPress/gutenberg/pull/79656))
+
+### Documentation
+
+-   Document `clsx` object syntax for conditional CSS Module classes ([#79490](https://github.com/WordPress/gutenberg/pull/79490), [#79535](https://github.com/WordPress/gutenberg/pull/79535)).
+
+### Bug Fixes
+
+-   `Divider`: Restore lower-specificity border styles so custom border colors can override the default divider color. ([#79534](https://github.com/WordPress/gutenberg/pull/79534))
+
+### Internal
+
+-   Enforce CSS Module class selector naming for component-library packages ([#79504](https://github.com/WordPress/gutenberg/pull/79504)).
+-   Update `@ariakit/react` to `0.4.32` ([#79860](https://github.com/WordPress/gutenberg/pull/79860)).
+-   `Flex`: Migrate styles from Emotion to SCSS Modules ([#79450](https://github.com/WordPress/gutenberg/pull/79450)).
+-   `Surface`: Migrate styles from Emotion to SCSS Modules and use WPDS tokens for migrated visual values ([#79445](https://github.com/WordPress/gutenberg/pull/79445)).
+-   `Theme`: Migrate styles from Emotion to SCSS Modules ([#79447](https://github.com/WordPress/gutenberg/pull/79447)).
+-   `Truncate`: Migrate styles from Emotion to SCSS Modules ([#79446](https://github.com/WordPress/gutenberg/pull/79446)).
+-   `View`: Migrate away from Emotion while preserving polymorphic `as` behavior and style cascade order ([#79443](https://github.com/WordPress/gutenberg/pull/79443)).
+
 ## 36.1.0 (2026-07-01)
 
 ## 36.0.0 (2026-06-24)
 
 ### Breaking Changes
 
--   The `__next40pxDefaultSize` prop is now true by default. The prop can be safely removed ([#79386](https://github.com/WordPress/gutenberg/pull/79386), [#79419](https://github.com/WordPress/gutenberg/pull/79419)):
-    -   `BoxControl`
-    -   `TextControl`
+-   Components that compose Emotion style fragments with `cx()` should pass source-order-dependent fragments in a single `css()` call. Passing separate fragments can change override order after the following components stopped rendering styles through Emotion:
+    -   `Divider` ([#79444](https://github.com/WordPress/gutenberg/pull/79444))
+-   The `__next40pxDefaultSize` prop is now true by default. The prop can be safely removed from the following:
+    -   `BoxControl` ([#79419](https://github.com/WordPress/gutenberg/pull/79419))
+    -   `TextControl` ([#79386](https://github.com/WordPress/gutenberg/pull/79386))
 
 ### Enhancements
 
@@ -34,6 +90,7 @@
 ### Documentation
 
 -   `Menu`: Fix `overriden` typo to `overridden` in `CheckboxItemProps` and `RadioItemProps`. ([#79331](https://github.com/WordPress/gutenberg/pull/79331))
+-   Add component documentation for `ColorPicker`, `CustomSelectControl`, `Navigator`, `NumberControl`, `ResizableBox`, and `Slot` components ([#79460](https://github.com/WordPress/gutenberg/pull/79460)).
 
 ### Code Quality
 

package/CONTRIBUTING.md

@@ -418,7 +418,7 @@ On the component's main named export, add a JSDoc comment that includes the main
 
 All new components should be styled using SCSS Modules.
 
-Place component-local styles in a `style.module.scss` file next to the component, import the module from JavaScript or TypeScript, and compose class names with `clsx`. Preserve existing public `components-*` class names where consumers may rely on them. For dynamic values, prefer inline CSS custom properties consumed by the SCSS module. For variants and state, prefer conditional module classes composed with `clsx`.
+Place component-local styles in a `style.module.scss` file next to the component, import the module from JavaScript or TypeScript, and compose class names with `clsx`. Preserve existing public `components-*` class names where consumers may rely on them. For dynamic values, prefer inline CSS custom properties consumed by the SCSS module. For variants and state, prefer conditional module classes composed with `clsx` object syntax, e.g. `{ [ styles.className ]: condition }`.
 
 Legacy components may still use Emotion while they are being migrated, but new Emotion usage should not be added.
 
@@ -445,9 +445,11 @@ function MyComponent( { __nextHasNoOuterMargins = false, className } ) {
 			className={ clsx(
 				'components-my-component',
 				styles.root,
-				! __nextHasNoOuterMargins &&
-					styles.deprecatedOuterMargins,
-				className
+				className,
+				{
+					[ styles.deprecatedOuterMargins ]:
+						! __nextHasNoOuterMargins,
+				}
 			) }
 		/>
 	);

package/build/border-box-control/border-box-control/component.cjs

@@ -79,7 +79,6 @@ var UnconnectedBorderBoxControl = (props, forwardedRef) => {
     onSplitChange,
     popoverPlacement,
     popoverOffset,
-    size,
     splitValue,
     toggleLinked,
     wrapperClassName,
@@ -116,10 +115,8 @@ var UnconnectedBorderBoxControl = (props, forwardedRef) => {
         shouldSanitizeBorder: false,
         value: linkedValue,
         withSlider: true,
-        width: size === "__unstable-large" ? "116px" : "110px",
-        __experimentalIsRenderedInSidebar,
-        __shouldNotWarnDeprecated36pxSize: true,
-        size
+        width: "116px",
+        __experimentalIsRenderedInSidebar
       }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_border_box_control_split_controls.default, {
         colors,
         disableCustomColors,
@@ -129,12 +126,10 @@ var UnconnectedBorderBoxControl = (props, forwardedRef) => {
         popoverPlacement,
         popoverOffset,
         value: splitValue,
-        __experimentalIsRenderedInSidebar,
-        size
+        __experimentalIsRenderedInSidebar
       }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_border_box_control_linked_button.default, {
         onClick: toggleLinked,
-        isLinked,
-        size
+        isLinked
       })]
     })]
   });

package/build/border-box-control/border-box-control/component.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-box-control/border-box-control/component.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControl } from './hook';\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: \"label\",\n    children: label\n  }) : /*#__PURE__*/_jsx(StyledLabel, {\n    children: label\n  });\n};\nconst UnconnectedBorderBoxControl = (props, forwardedRef) => {\n  const {\n    className,\n    colors,\n    disableCustomColors,\n    disableUnits,\n    enableAlpha,\n    enableStyle,\n    hasMixedBorders,\n    hideLabelFromVision,\n    isLinked,\n    label,\n    linkedControlClassName,\n    linkedValue,\n    onLinkedChange,\n    onSplitChange,\n    popoverPlacement,\n    popoverOffset,\n    size,\n    splitValue,\n    toggleLinked,\n    wrapperClassName,\n    __experimentalIsRenderedInSidebar,\n    ...otherProps\n  } = useBorderBoxControl(props);\n\n  // Use internal state instead of a ref to make sure that the component\n  // re-renders when the popover's anchor updates.\n  const [popoverAnchor, setPopoverAnchor] = useState(null);\n\n  // Memoize popoverProps to avoid returning a new object every time.\n  const popoverProps = useMemo(() => popoverPlacement ? {\n    placement: popoverPlacement,\n    offset: popoverOffset,\n    anchor: popoverAnchor,\n    shift: true\n  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);\n  const mergedRef = useMergeRefs([setPopoverAnchor, forwardedRef]);\n  return /*#__PURE__*/_jsxs(View, {\n    className: className,\n    ...otherProps,\n    ref: mergedRef,\n    children: [/*#__PURE__*/_jsx(BorderLabel, {\n      label: label,\n      hideLabelFromVision: hideLabelFromVision\n    }), /*#__PURE__*/_jsxs(View, {\n      className: wrapperClassName,\n      children: [isLinked ? /*#__PURE__*/_jsx(BorderControl, {\n        className: linkedControlClassName,\n        colors: colors,\n        disableUnits: disableUnits,\n        disableCustomColors: disableCustomColors,\n        enableAlpha: enableAlpha,\n        enableStyle: enableStyle,\n        onChange: onLinkedChange,\n        placeholder: hasMixedBorders ? __('Mixed') : undefined,\n        __unstablePopoverProps: popoverProps,\n        shouldSanitizeBorder: false // This component will handle that.\n        ,\n        value: linkedValue,\n        withSlider: true,\n        width: size === '__unstable-large' ? '116px' : '110px',\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        __shouldNotWarnDeprecated36pxSize: true,\n        size: size\n      }) : /*#__PURE__*/_jsx(BorderBoxControlSplitControls, {\n        colors: colors,\n        disableCustomColors: disableCustomColors,\n        enableAlpha: enableAlpha,\n        enableStyle: enableStyle,\n        onChange: onSplitChange,\n        popoverPlacement: popoverPlacement,\n        popoverOffset: popoverOffset,\n        value: splitValue,\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        size: size\n      }), /*#__PURE__*/_jsx(BorderBoxControlLinkedButton, {\n        onClick: toggleLinked,\n        isLinked: isLinked,\n        size: size\n      })]\n    })]\n  });\n};\n\n/**\n * An input control for the color, style, and width of the border of a box. The\n * border can be customized as a whole, or individually for each side of the box.\n *\n * ```jsx\n * import { BorderBoxControl } 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 MyBorderBoxControl = () => {\n * \tconst defaultBorder = {\n * \t\tcolor: '#72aee6',\n * \t\tstyle: 'dashed',\n * \t\twidth: '1px',\n * \t};\n * \tconst [ borders, setBorders ] = useState( {\n * \t\ttop: defaultBorder,\n * \t\tright: defaultBorder,\n * \t\tbottom: defaultBorder,\n * \t\tleft: defaultBorder,\n * \t} );\n * \tconst onChange = ( newBorders ) => setBorders( newBorders );\n *\n * \treturn (\n * \t\t<BorderBoxControl\n * \t\t\t__next40pxDefaultSize\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Borders' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ borders }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderBoxControl = contextConnect(UnconnectedBorderBoxControl, 'BorderBoxControl');\nexport default BorderBoxControl;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAkC;AAClC,qBAA6B;AAK7B,8CAAyC;AACzC,+CAA0C;AAC1C,4BAA8B;AAC9B,iCAA4B;AAC5B,kBAAqB;AACrB,6BAA+B;AAC/B,qBAA+B;AAC/B,kBAAoC;AACpC,yBAA2C;AAC3C,IAAM,cAAc,WAAS;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AACA,SAAO,sBAAmC,uCAAAA,KAAK,uCAAgB;AAAA,IAC7D,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,CAAC,IAAiB,uCAAAA,KAAK,wCAAa;AAAA,IAClC,UAAU;AAAA,EACZ,CAAC;AACH;AACA,IAAM,8BAA8B,CAAC,OAAO,iBAAiB;AAC3D,QAAM;AAAA,IACJ;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;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAoB,KAAK;AAI7B,QAAM,CAAC,eAAe,gBAAgB,QAAI,yBAAS,IAAI;AAGvD,QAAM,mBAAe,wBAAQ,MAAM,mBAAmB;AAAA,IACpD,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,IAAI,QAAW,CAAC,kBAAkB,eAAe,aAAa,CAAC;AAC/D,QAAM,gBAAY,6BAAa,CAAC,kBAAkB,YAAY,CAAC;AAC/D,SAAoB,uCAAAC,MAAM,kBAAM;AAAA,IAC9B;AAAA,IACA,GAAG;AAAA,IACH,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAD,KAAK,aAAa;AAAA,MACxC;AAAA,MACA;AAAA,IACF,CAAC,GAAgB,uCAAAC,MAAM,kBAAM;AAAA,MAC3B,WAAW;AAAA,MACX,UAAU,CAAC,WAAwB,uCAAAD,KAAK,qCAAe;AAAA,QACrD,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,aAAa,sBAAkB,gBAAG,OAAO,IAAI;AAAA,QAC7C,wBAAwB;AAAA,QACxB,sBAAsB;AAAA,QAEtB,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,OAAO,SAAS,qBAAqB,UAAU;AAAA,QAC/C;AAAA,QACA,mCAAmC;AAAA,QACnC;AAAA,MACF,CAAC,IAAiB,uCAAAA,KAAK,yCAAAE,SAA+B;AAAA,QACpD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,MACF,CAAC,GAAgB,uCAAAF,KAAK,wCAAAG,SAA8B;AAAA,QAClD,SAAS;AAAA,QACT;AAAA,QACA;AAAA,MACF,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAyCO,IAAM,uBAAmB,+BAAe,6BAA6B,kBAAkB;AAC9F,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControl } from './hook';\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: \"label\",\n    children: label\n  }) : /*#__PURE__*/_jsx(StyledLabel, {\n    children: label\n  });\n};\nconst UnconnectedBorderBoxControl = (props, forwardedRef) => {\n  const {\n    className,\n    colors,\n    disableCustomColors,\n    disableUnits,\n    enableAlpha,\n    enableStyle,\n    hasMixedBorders,\n    hideLabelFromVision,\n    isLinked,\n    label,\n    linkedControlClassName,\n    linkedValue,\n    onLinkedChange,\n    onSplitChange,\n    popoverPlacement,\n    popoverOffset,\n    splitValue,\n    toggleLinked,\n    wrapperClassName,\n    __experimentalIsRenderedInSidebar,\n    ...otherProps\n  } = useBorderBoxControl(props);\n\n  // Use internal state instead of a ref to make sure that the component\n  // re-renders when the popover's anchor updates.\n  const [popoverAnchor, setPopoverAnchor] = useState(null);\n\n  // Memoize popoverProps to avoid returning a new object every time.\n  const popoverProps = useMemo(() => popoverPlacement ? {\n    placement: popoverPlacement,\n    offset: popoverOffset,\n    anchor: popoverAnchor,\n    shift: true\n  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);\n  const mergedRef = useMergeRefs([setPopoverAnchor, forwardedRef]);\n  return /*#__PURE__*/_jsxs(View, {\n    className: className,\n    ...otherProps,\n    ref: mergedRef,\n    children: [/*#__PURE__*/_jsx(BorderLabel, {\n      label: label,\n      hideLabelFromVision: hideLabelFromVision\n    }), /*#__PURE__*/_jsxs(View, {\n      className: wrapperClassName,\n      children: [isLinked ? /*#__PURE__*/_jsx(BorderControl, {\n        className: linkedControlClassName,\n        colors: colors,\n        disableUnits: disableUnits,\n        disableCustomColors: disableCustomColors,\n        enableAlpha: enableAlpha,\n        enableStyle: enableStyle,\n        onChange: onLinkedChange,\n        placeholder: hasMixedBorders ? __('Mixed') : undefined,\n        __unstablePopoverProps: popoverProps,\n        shouldSanitizeBorder: false // This component will handle that.\n        ,\n        value: linkedValue,\n        withSlider: true,\n        width: \"116px\",\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar\n      }) : /*#__PURE__*/_jsx(BorderBoxControlSplitControls, {\n        colors: colors,\n        disableCustomColors: disableCustomColors,\n        enableAlpha: enableAlpha,\n        enableStyle: enableStyle,\n        onChange: onSplitChange,\n        popoverPlacement: popoverPlacement,\n        popoverOffset: popoverOffset,\n        value: splitValue,\n        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar\n      }), /*#__PURE__*/_jsx(BorderBoxControlLinkedButton, {\n        onClick: toggleLinked,\n        isLinked: isLinked\n      })]\n    })]\n  });\n};\n\n/**\n * An input control for the color, style, and width of the border of a box. The\n * border can be customized as a whole, or individually for each side of the box.\n *\n * ```jsx\n * import { BorderBoxControl } 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 MyBorderBoxControl = () => {\n * \tconst defaultBorder = {\n * \t\tcolor: '#72aee6',\n * \t\tstyle: 'dashed',\n * \t\twidth: '1px',\n * \t};\n * \tconst [ borders, setBorders ] = useState( {\n * \t\ttop: defaultBorder,\n * \t\tright: defaultBorder,\n * \t\tbottom: defaultBorder,\n * \t\tleft: defaultBorder,\n * \t} );\n * \tconst onChange = ( newBorders ) => setBorders( newBorders );\n *\n * \treturn (\n * \t\t<BorderBoxControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Borders' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ borders }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderBoxControl = contextConnect(UnconnectedBorderBoxControl, 'BorderBoxControl');\nexport default BorderBoxControl;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAkC;AAClC,qBAA6B;AAK7B,8CAAyC;AACzC,+CAA0C;AAC1C,4BAA8B;AAC9B,iCAA4B;AAC5B,kBAAqB;AACrB,6BAA+B;AAC/B,qBAA+B;AAC/B,kBAAoC;AACpC,yBAA2C;AAC3C,IAAM,cAAc,WAAS;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AACA,SAAO,sBAAmC,uCAAAA,KAAK,uCAAgB;AAAA,IAC7D,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,CAAC,IAAiB,uCAAAA,KAAK,wCAAa;AAAA,IAClC,UAAU;AAAA,EACZ,CAAC;AACH;AACA,IAAM,8BAA8B,CAAC,OAAO,iBAAiB;AAC3D,QAAM;AAAA,IACJ;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;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAoB,KAAK;AAI7B,QAAM,CAAC,eAAe,gBAAgB,QAAI,yBAAS,IAAI;AAGvD,QAAM,mBAAe,wBAAQ,MAAM,mBAAmB;AAAA,IACpD,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,IAAI,QAAW,CAAC,kBAAkB,eAAe,aAAa,CAAC;AAC/D,QAAM,gBAAY,6BAAa,CAAC,kBAAkB,YAAY,CAAC;AAC/D,SAAoB,uCAAAC,MAAM,kBAAM;AAAA,IAC9B;AAAA,IACA,GAAG;AAAA,IACH,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAD,KAAK,aAAa;AAAA,MACxC;AAAA,MACA;AAAA,IACF,CAAC,GAAgB,uCAAAC,MAAM,kBAAM;AAAA,MAC3B,WAAW;AAAA,MACX,UAAU,CAAC,WAAwB,uCAAAD,KAAK,qCAAe;AAAA,QACrD,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,aAAa,sBAAkB,gBAAG,OAAO,IAAI;AAAA,QAC7C,wBAAwB;AAAA,QACxB,sBAAsB;AAAA,QAEtB,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,OAAO;AAAA,QACP;AAAA,MACF,CAAC,IAAiB,uCAAAA,KAAK,yCAAAE,SAA+B;AAAA,QACpD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP;AAAA,MACF,CAAC,GAAgB,uCAAAF,KAAK,wCAAAG,SAA8B;AAAA,QAClD,SAAS;AAAA,QACT;AAAA,MACF,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAwCO,IAAM,uBAAmB,+BAAe,6BAA6B,kBAAkB;AAC9F,IAAO,oBAAQ;",
   "names": ["_jsx", "_jsxs", "BorderBoxControlSplitControls", "BorderBoxControlLinkedButton"]
 }

package/build/border-box-control/border-box-control/hook.cjs

@@ -38,7 +38,6 @@ var styles = __toESM(require("../styles.cjs"));
 var import_utils = require("../utils.cjs");
 var import_context = require("../../context/index.cjs");
 var import_use_cx = require("../../utils/hooks/use-cx.cjs");
-var import_deprecated_36px_size = require("../../utils/deprecated-36px-size.cjs");
 function useBorderBoxControl(props) {
   const {
     className,
@@ -46,18 +45,13 @@ function useBorderBoxControl(props) {
     onChange,
     enableAlpha = false,
     enableStyle = true,
-    size = "default",
     value,
     __experimentalIsRenderedInSidebar = false,
-    __next40pxDefaultSize,
+    // Deprecated props, no longer used.
+    size: _size,
+    __next40pxDefaultSize: _next40pxDefaultSize,
     ...otherProps
   } = (0, import_context.useContextSystem)(props, "BorderBoxControl");
-  (0, import_deprecated_36px_size.maybeWarnDeprecated36pxSize)({
-    componentName: "BorderBoxControl",
-    __next40pxDefaultSize,
-    size
-  });
-  const computedSize = size === "default" && __next40pxDefaultSize ? "__unstable-large" : size;
   const mixedBorders = (0, import_utils.hasMixedBorders)(value);
   const splitBorders = (0, import_utils.hasSplitBorders)(value);
   const linkedValue = splitBorders ? (0, import_utils.getCommonBorder)(value) : value;
@@ -132,7 +126,6 @@ function useBorderBoxControl(props) {
     onSplitChange,
     toggleLinked,
     linkedValue,
-    size: computedSize,
     splitValue,
     wrapperClassName,
     __experimentalIsRenderedInSidebar

package/build/border-box-control/border-box-control/hook.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-box-control/border-box-control/hook.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { getBorderDiff, getCommonBorder, getSplitBorders, hasMixedBorders, hasSplitBorders, isCompleteBorder, isEmptyBorder } from '../utils';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';\nexport function useBorderBoxControl(props) {\n  const {\n    className,\n    colors = [],\n    onChange,\n    enableAlpha = false,\n    enableStyle = true,\n    size = 'default',\n    value,\n    __experimentalIsRenderedInSidebar = false,\n    __next40pxDefaultSize,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControl');\n  maybeWarnDeprecated36pxSize({\n    componentName: 'BorderBoxControl',\n    __next40pxDefaultSize,\n    size\n  });\n  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\n  const mixedBorders = hasMixedBorders(value);\n  const splitBorders = hasSplitBorders(value);\n  const linkedValue = splitBorders ? getCommonBorder(value) : value;\n  const splitValue = splitBorders ? value : getSplitBorders(value);\n\n  // If no numeric width value is set, the unit select will be disabled.\n  const hasWidthValue = !isNaN(parseFloat(`${linkedValue?.width}`));\n  const [isLinked, setIsLinked] = useState(!mixedBorders);\n  const toggleLinked = () => setIsLinked(!isLinked);\n  const onLinkedChange = newBorder => {\n    if (!newBorder) {\n      return onChange(undefined);\n    }\n\n    // If we have all props defined on the new border apply it.\n    if (!mixedBorders || isCompleteBorder(newBorder)) {\n      return onChange(isEmptyBorder(newBorder) ? undefined : newBorder);\n    }\n\n    // If we had mixed borders we might have had some shared border props\n    // that we need to maintain. For example; we could have mixed borders\n    // with all the same color but different widths. Then from the linked\n    // control we change the color. We should keep the separate  widths.\n    const changes = getBorderDiff(linkedValue, newBorder);\n    const updatedBorders = {\n      top: {\n        ...value?.top,\n        ...changes\n      },\n      right: {\n        ...value?.right,\n        ...changes\n      },\n      bottom: {\n        ...value?.bottom,\n        ...changes\n      },\n      left: {\n        ...value?.left,\n        ...changes\n      }\n    };\n    if (hasMixedBorders(updatedBorders)) {\n      return onChange(updatedBorders);\n    }\n    const filteredResult = isEmptyBorder(updatedBorders.top) ? undefined : updatedBorders.top;\n    onChange(filteredResult);\n  };\n  const onSplitChange = (newBorder, side) => {\n    const updatedBorders = {\n      ...splitValue,\n      [side]: newBorder\n    };\n    if (hasMixedBorders(updatedBorders)) {\n      onChange(updatedBorders);\n    } else {\n      onChange(newBorder);\n    }\n  };\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderBoxControl, className);\n  }, [cx, className]);\n  const linkedControlClassName = useMemo(() => {\n    return cx(styles.linkedBorderControl());\n  }, [cx]);\n  const wrapperClassName = useMemo(() => {\n    return cx(styles.wrapper);\n  }, [cx]);\n  return {\n    ...otherProps,\n    className: classes,\n    colors,\n    disableUnits: mixedBorders && !hasWidthValue,\n    enableAlpha,\n    enableStyle,\n    hasMixedBorders: mixedBorders,\n    isLinked,\n    linkedControlClassName,\n    onLinkedChange,\n    onSplitChange,\n    toggleLinked,\n    linkedValue,\n    size: computedSize,\n    splitValue,\n    wrapperClassName,\n    __experimentalIsRenderedInSidebar\n  };\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAkC;AAKlC,aAAwB;AACxB,mBAAmI;AACnI,qBAAiC;AACjC,oBAAsB;AACtB,kCAA4C;AACrC,SAAS,oBAAoB,OAAO;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,CAAC;AAAA,IACV;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA,oCAAoC;AAAA,IACpC;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,kBAAkB;AAC9C,+DAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,eAAe,SAAS,aAAa,wBAAwB,qBAAqB;AACxF,QAAM,mBAAe,8BAAgB,KAAK;AAC1C,QAAM,mBAAe,8BAAgB,KAAK;AAC1C,QAAM,cAAc,mBAAe,8BAAgB,KAAK,IAAI;AAC5D,QAAM,aAAa,eAAe,YAAQ,8BAAgB,KAAK;AAG/D,QAAM,gBAAgB,CAAC,MAAM,WAAW,GAAG,aAAa,KAAK,EAAE,CAAC;AAChE,QAAM,CAAC,UAAU,WAAW,QAAI,yBAAS,CAAC,YAAY;AACtD,QAAM,eAAe,MAAM,YAAY,CAAC,QAAQ;AAChD,QAAM,iBAAiB,eAAa;AAClC,QAAI,CAAC,WAAW;AACd,aAAO,SAAS,MAAS;AAAA,IAC3B;AAGA,QAAI,CAAC,oBAAgB,+BAAiB,SAAS,GAAG;AAChD,aAAO,aAAS,4BAAc,SAAS,IAAI,SAAY,SAAS;AAAA,IAClE;AAMA,UAAM,cAAU,4BAAc,aAAa,SAAS;AACpD,UAAM,iBAAiB;AAAA,MACrB,KAAK;AAAA,QACH,GAAG,OAAO;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA,OAAO;AAAA,QACL,GAAG,OAAO;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,QACN,GAAG,OAAO;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA,MAAM;AAAA,QACJ,GAAG,OAAO;AAAA,QACV,GAAG;AAAA,MACL;AAAA,IACF;AACA,YAAI,8BAAgB,cAAc,GAAG;AACnC,aAAO,SAAS,cAAc;AAAA,IAChC;AACA,UAAM,qBAAiB,4BAAc,eAAe,GAAG,IAAI,SAAY,eAAe;AACtF,aAAS,cAAc;AAAA,EACzB;AACA,QAAM,gBAAgB,CAAC,WAAW,SAAS;AACzC,UAAM,iBAAiB;AAAA,MACrB,GAAG;AAAA,MACH,CAAC,IAAI,GAAG;AAAA,IACV;AACA,YAAI,8BAAgB,cAAc,GAAG;AACnC,eAAS,cAAc;AAAA,IACzB,OAAO;AACL,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AACA,QAAM,SAAK,qBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,WAAO,GAAU,yBAAkB,SAAS;AAAA,EAC9C,GAAG,CAAC,IAAI,SAAS,CAAC;AAClB,QAAM,6BAAyB,wBAAQ,MAAM;AAC3C,WAAO,GAAU,2BAAoB,CAAC;AAAA,EACxC,GAAG,CAAC,EAAE,CAAC;AACP,QAAM,uBAAmB,wBAAQ,MAAM;AACrC,WAAO,GAAU,cAAO;AAAA,EAC1B,GAAG,CAAC,EAAE,CAAC;AACP,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,IACA,cAAc,gBAAgB,CAAC;AAAA,IAC/B;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { getBorderDiff, getCommonBorder, getSplitBorders, hasMixedBorders, hasSplitBorders, isCompleteBorder, isEmptyBorder } from '../utils';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nexport function useBorderBoxControl(props) {\n  const {\n    className,\n    colors = [],\n    onChange,\n    enableAlpha = false,\n    enableStyle = true,\n    value,\n    __experimentalIsRenderedInSidebar = false,\n    // Deprecated props, no longer used.\n    size: _size,\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControl');\n  const mixedBorders = hasMixedBorders(value);\n  const splitBorders = hasSplitBorders(value);\n  const linkedValue = splitBorders ? getCommonBorder(value) : value;\n  const splitValue = splitBorders ? value : getSplitBorders(value);\n\n  // If no numeric width value is set, the unit select will be disabled.\n  const hasWidthValue = !isNaN(parseFloat(`${linkedValue?.width}`));\n  const [isLinked, setIsLinked] = useState(!mixedBorders);\n  const toggleLinked = () => setIsLinked(!isLinked);\n  const onLinkedChange = newBorder => {\n    if (!newBorder) {\n      return onChange(undefined);\n    }\n\n    // If we have all props defined on the new border apply it.\n    if (!mixedBorders || isCompleteBorder(newBorder)) {\n      return onChange(isEmptyBorder(newBorder) ? undefined : newBorder);\n    }\n\n    // If we had mixed borders we might have had some shared border props\n    // that we need to maintain. For example; we could have mixed borders\n    // with all the same color but different widths. Then from the linked\n    // control we change the color. We should keep the separate  widths.\n    const changes = getBorderDiff(linkedValue, newBorder);\n    const updatedBorders = {\n      top: {\n        ...value?.top,\n        ...changes\n      },\n      right: {\n        ...value?.right,\n        ...changes\n      },\n      bottom: {\n        ...value?.bottom,\n        ...changes\n      },\n      left: {\n        ...value?.left,\n        ...changes\n      }\n    };\n    if (hasMixedBorders(updatedBorders)) {\n      return onChange(updatedBorders);\n    }\n    const filteredResult = isEmptyBorder(updatedBorders.top) ? undefined : updatedBorders.top;\n    onChange(filteredResult);\n  };\n  const onSplitChange = (newBorder, side) => {\n    const updatedBorders = {\n      ...splitValue,\n      [side]: newBorder\n    };\n    if (hasMixedBorders(updatedBorders)) {\n      onChange(updatedBorders);\n    } else {\n      onChange(newBorder);\n    }\n  };\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderBoxControl, className);\n  }, [cx, className]);\n  const linkedControlClassName = useMemo(() => {\n    return cx(styles.linkedBorderControl());\n  }, [cx]);\n  const wrapperClassName = useMemo(() => {\n    return cx(styles.wrapper);\n  }, [cx]);\n  return {\n    ...otherProps,\n    className: classes,\n    colors,\n    disableUnits: mixedBorders && !hasWidthValue,\n    enableAlpha,\n    enableStyle,\n    hasMixedBorders: mixedBorders,\n    isLinked,\n    linkedControlClassName,\n    onLinkedChange,\n    onSplitChange,\n    toggleLinked,\n    linkedValue,\n    splitValue,\n    wrapperClassName,\n    __experimentalIsRenderedInSidebar\n  };\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAkC;AAKlC,aAAwB;AACxB,mBAAmI;AACnI,qBAAiC;AACjC,oBAAsB;AACf,SAAS,oBAAoB,OAAO;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,CAAC;AAAA,IACV;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd;AAAA,IACA,oCAAoC;AAAA;AAAA,IAEpC,MAAM;AAAA,IACN,uBAAuB;AAAA,IACvB,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,kBAAkB;AAC9C,QAAM,mBAAe,8BAAgB,KAAK;AAC1C,QAAM,mBAAe,8BAAgB,KAAK;AAC1C,QAAM,cAAc,mBAAe,8BAAgB,KAAK,IAAI;AAC5D,QAAM,aAAa,eAAe,YAAQ,8BAAgB,KAAK;AAG/D,QAAM,gBAAgB,CAAC,MAAM,WAAW,GAAG,aAAa,KAAK,EAAE,CAAC;AAChE,QAAM,CAAC,UAAU,WAAW,QAAI,yBAAS,CAAC,YAAY;AACtD,QAAM,eAAe,MAAM,YAAY,CAAC,QAAQ;AAChD,QAAM,iBAAiB,eAAa;AAClC,QAAI,CAAC,WAAW;AACd,aAAO,SAAS,MAAS;AAAA,IAC3B;AAGA,QAAI,CAAC,oBAAgB,+BAAiB,SAAS,GAAG;AAChD,aAAO,aAAS,4BAAc,SAAS,IAAI,SAAY,SAAS;AAAA,IAClE;AAMA,UAAM,cAAU,4BAAc,aAAa,SAAS;AACpD,UAAM,iBAAiB;AAAA,MACrB,KAAK;AAAA,QACH,GAAG,OAAO;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA,OAAO;AAAA,QACL,GAAG,OAAO;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,QACN,GAAG,OAAO;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA,MAAM;AAAA,QACJ,GAAG,OAAO;AAAA,QACV,GAAG;AAAA,MACL;AAAA,IACF;AACA,YAAI,8BAAgB,cAAc,GAAG;AACnC,aAAO,SAAS,cAAc;AAAA,IAChC;AACA,UAAM,qBAAiB,4BAAc,eAAe,GAAG,IAAI,SAAY,eAAe;AACtF,aAAS,cAAc;AAAA,EACzB;AACA,QAAM,gBAAgB,CAAC,WAAW,SAAS;AACzC,UAAM,iBAAiB;AAAA,MACrB,GAAG;AAAA,MACH,CAAC,IAAI,GAAG;AAAA,IACV;AACA,YAAI,8BAAgB,cAAc,GAAG;AACnC,eAAS,cAAc;AAAA,IACzB,OAAO;AACL,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AACA,QAAM,SAAK,qBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,WAAO,GAAU,yBAAkB,SAAS;AAAA,EAC9C,GAAG,CAAC,IAAI,SAAS,CAAC;AAClB,QAAM,6BAAyB,wBAAQ,MAAM;AAC3C,WAAO,GAAU,2BAAoB,CAAC;AAAA,EACxC,GAAG,CAAC,EAAE,CAAC;AACP,QAAM,uBAAmB,wBAAQ,MAAM;AACrC,WAAO,GAAU,cAAO;AAAA,EAC1B,GAAG,CAAC,EAAE,CAAC;AACP,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,IACA,cAAc,gBAAgB,CAAC;AAAA,IAC/B;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/build/border-box-control/border-box-control-linked-button/hook.cjs

@@ -40,13 +40,12 @@ var import_use_cx = require("../../utils/hooks/use-cx.cjs");
 function useBorderBoxControlLinkedButton(props) {
   const {
     className,
-    size = "default",
     ...otherProps
   } = (0, import_context.useContextSystem)(props, "BorderBoxControlLinkedButton");
   const cx = (0, import_use_cx.useCx)();
   const classes = (0, import_element.useMemo)(() => {
-    return cx(styles.borderBoxControlLinkedButton(size), className);
-  }, [className, cx, size]);
+    return cx(styles.borderBoxControlLinkedButton, className);
+  }, [className, cx]);
   return {
     ...otherProps,
     className: classes

package/build/border-box-control/border-box-control-linked-button/hook.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-box-control/border-box-control-linked-button/hook.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nexport function useBorderBoxControlLinkedButton(props) {\n  const {\n    className,\n    size = 'default',\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControlLinkedButton');\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderBoxControlLinkedButton(size), className);\n  }, [className, cx, size]);\n  return {\n    ...otherProps,\n    className: classes\n  };\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AAKxB,aAAwB;AACxB,qBAAiC;AACjC,oBAAsB;AACf,SAAS,gCAAgC,OAAO;AACrD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,8BAA8B;AAG1D,QAAM,SAAK,qBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,WAAO,GAAU,oCAA6B,IAAI,GAAG,SAAS;AAAA,EAChE,GAAG,CAAC,WAAW,IAAI,IAAI,CAAC;AACxB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,EACb;AACF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nexport function useBorderBoxControlLinkedButton(props) {\n  const {\n    className,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControlLinkedButton');\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderBoxControlLinkedButton, className);\n  }, [className, cx]);\n  return {\n    ...otherProps,\n    className: classes\n  };\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AAKxB,aAAwB;AACxB,qBAAiC;AACjC,oBAAsB;AACf,SAAS,gCAAgC,OAAO;AACrD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,8BAA8B;AAG1D,QAAM,SAAK,qBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,WAAO,GAAU,qCAA8B,SAAS;AAAA,EAC1D,GAAG,CAAC,WAAW,EAAE,CAAC;AAClB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,EACb;AACF;",
   "names": []
 }

package/build/border-box-control/border-box-control-split-controls/component.cjs

@@ -53,7 +53,6 @@ var BorderBoxControlSplitControls = (props, forwardedRef) => {
     popoverPlacement,
     popoverOffset,
     rightAlignedClassName,
-    size = "default",
     value,
     __experimentalIsRenderedInSidebar,
     ...otherProps
@@ -71,9 +70,7 @@ var BorderBoxControlSplitControls = (props, forwardedRef) => {
     enableAlpha,
     enableStyle,
     isCompact: true,
-    __experimentalIsRenderedInSidebar,
-    size,
-    __shouldNotWarnDeprecated36pxSize: true
+    __experimentalIsRenderedInSidebar
   };
   const mergedRef = (0, import_compose.useMergeRefs)([setPopoverAnchor, forwardedRef]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_grid.Grid, {
@@ -81,8 +78,7 @@ var BorderBoxControlSplitControls = (props, forwardedRef) => {
     ref: mergedRef,
     gap: 3,
     children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_border_box_control_visualizer.default, {
-      value,
-      size
+      value
     }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_border_control.BorderControl, {
       className: centeredClassName,
       hideLabelFromVision: true,

package/build/border-box-control/border-box-control-split-controls/component.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-box-control/border-box-control-split-controls/component.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlSplitControls } from './hook';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst BorderBoxControlSplitControls = (props, forwardedRef) => {\n  const {\n    centeredClassName,\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    onChange,\n    popoverPlacement,\n    popoverOffset,\n    rightAlignedClassName,\n    size = 'default',\n    value,\n    __experimentalIsRenderedInSidebar,\n    ...otherProps\n  } = useBorderBoxControlSplitControls(props);\n\n  // Use internal state instead of a ref to make sure that the component\n  // re-renders when the popover's anchor updates.\n  const [popoverAnchor, setPopoverAnchor] = useState(null);\n\n  // Memoize popoverProps to avoid returning a new object every time.\n  const popoverProps = useMemo(() => popoverPlacement ? {\n    placement: popoverPlacement,\n    offset: popoverOffset,\n    anchor: popoverAnchor,\n    shift: true\n  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);\n  const sharedBorderControlProps = {\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    isCompact: true,\n    __experimentalIsRenderedInSidebar,\n    size,\n    __shouldNotWarnDeprecated36pxSize: true\n  };\n  const mergedRef = useMergeRefs([setPopoverAnchor, forwardedRef]);\n  return /*#__PURE__*/_jsxs(Grid, {\n    ...otherProps,\n    ref: mergedRef,\n    gap: 3,\n    children: [/*#__PURE__*/_jsx(BorderBoxControlVisualizer, {\n      value: value,\n      size: size\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      className: centeredClassName,\n      hideLabelFromVision: true,\n      label: __('Top border'),\n      onChange: newBorder => onChange(newBorder, 'top'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.top,\n      ...sharedBorderControlProps\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      hideLabelFromVision: true,\n      label: __('Left border'),\n      onChange: newBorder => onChange(newBorder, 'left'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.left,\n      ...sharedBorderControlProps\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      className: rightAlignedClassName,\n      hideLabelFromVision: true,\n      label: __('Right border'),\n      onChange: newBorder => onChange(newBorder, 'right'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.right,\n      ...sharedBorderControlProps\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      className: centeredClassName,\n      hideLabelFromVision: true,\n      label: __('Bottom border'),\n      onChange: newBorder => onChange(newBorder, 'bottom'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.bottom,\n      ...sharedBorderControlProps\n    })]\n  });\n};\nconst ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');\nexport default ConnectedBorderBoxControlSplitControls;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAkC;AAClC,qBAA6B;AAK7B,2CAAuC;AACvC,4BAA8B;AAC9B,kBAAqB;AACrB,qBAA+B;AAC/B,kBAAiD;AACjD,yBAA2C;AAC3C,IAAM,gCAAgC,CAAC,OAAO,iBAAiB;AAC7D,QAAM;AAAA,IACJ;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,GAAG;AAAA,EACL,QAAI,8CAAiC,KAAK;AAI1C,QAAM,CAAC,eAAe,gBAAgB,QAAI,yBAAS,IAAI;AAGvD,QAAM,mBAAe,wBAAQ,MAAM,mBAAmB;AAAA,IACpD,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,IAAI,QAAW,CAAC,kBAAkB,eAAe,aAAa,CAAC;AAC/D,QAAM,2BAA2B;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,mCAAmC;AAAA,EACrC;AACA,QAAM,gBAAY,6BAAa,CAAC,kBAAkB,YAAY,CAAC;AAC/D,SAAoB,uCAAAA,MAAM,kBAAM;AAAA,IAC9B,GAAG;AAAA,IACH,KAAK;AAAA,IACL,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAC,KAAK,qCAAAC,SAA4B;AAAA,MACvD;AAAA,MACA;AAAA,IACF,CAAC,GAAgB,uCAAAD,KAAK,qCAAe;AAAA,MACnC,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,WAAO,gBAAG,YAAY;AAAA,MACtB,UAAU,eAAa,SAAS,WAAW,KAAK;AAAA,MAChD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,GAAgB,uCAAAA,KAAK,qCAAe;AAAA,MACnC,qBAAqB;AAAA,MACrB,WAAO,gBAAG,aAAa;AAAA,MACvB,UAAU,eAAa,SAAS,WAAW,MAAM;AAAA,MACjD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,GAAgB,uCAAAA,KAAK,qCAAe;AAAA,MACnC,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,WAAO,gBAAG,cAAc;AAAA,MACxB,UAAU,eAAa,SAAS,WAAW,OAAO;AAAA,MAClD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,GAAgB,uCAAAA,KAAK,qCAAe;AAAA,MACnC,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,WAAO,gBAAG,eAAe;AAAA,MACzB,UAAU,eAAa,SAAS,WAAW,QAAQ;AAAA,MACnD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAM,6CAAyC,+BAAe,+BAA+B,+BAA+B;AAC5H,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlSplitControls } from './hook';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst BorderBoxControlSplitControls = (props, forwardedRef) => {\n  const {\n    centeredClassName,\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    onChange,\n    popoverPlacement,\n    popoverOffset,\n    rightAlignedClassName,\n    value,\n    __experimentalIsRenderedInSidebar,\n    ...otherProps\n  } = useBorderBoxControlSplitControls(props);\n\n  // Use internal state instead of a ref to make sure that the component\n  // re-renders when the popover's anchor updates.\n  const [popoverAnchor, setPopoverAnchor] = useState(null);\n\n  // Memoize popoverProps to avoid returning a new object every time.\n  const popoverProps = useMemo(() => popoverPlacement ? {\n    placement: popoverPlacement,\n    offset: popoverOffset,\n    anchor: popoverAnchor,\n    shift: true\n  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);\n  const sharedBorderControlProps = {\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    isCompact: true,\n    __experimentalIsRenderedInSidebar\n  };\n  const mergedRef = useMergeRefs([setPopoverAnchor, forwardedRef]);\n  return /*#__PURE__*/_jsxs(Grid, {\n    ...otherProps,\n    ref: mergedRef,\n    gap: 3,\n    children: [/*#__PURE__*/_jsx(BorderBoxControlVisualizer, {\n      value: value\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      className: centeredClassName,\n      hideLabelFromVision: true,\n      label: __('Top border'),\n      onChange: newBorder => onChange(newBorder, 'top'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.top,\n      ...sharedBorderControlProps\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      hideLabelFromVision: true,\n      label: __('Left border'),\n      onChange: newBorder => onChange(newBorder, 'left'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.left,\n      ...sharedBorderControlProps\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      className: rightAlignedClassName,\n      hideLabelFromVision: true,\n      label: __('Right border'),\n      onChange: newBorder => onChange(newBorder, 'right'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.right,\n      ...sharedBorderControlProps\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      className: centeredClassName,\n      hideLabelFromVision: true,\n      label: __('Bottom border'),\n      onChange: newBorder => onChange(newBorder, 'bottom'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.bottom,\n      ...sharedBorderControlProps\n    })]\n  });\n};\nconst ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');\nexport default ConnectedBorderBoxControlSplitControls;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAkC;AAClC,qBAA6B;AAK7B,2CAAuC;AACvC,4BAA8B;AAC9B,kBAAqB;AACrB,qBAA+B;AAC/B,kBAAiD;AACjD,yBAA2C;AAC3C,IAAM,gCAAgC,CAAC,OAAO,iBAAiB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,8CAAiC,KAAK;AAI1C,QAAM,CAAC,eAAe,gBAAgB,QAAI,yBAAS,IAAI;AAGvD,QAAM,mBAAe,wBAAQ,MAAM,mBAAmB;AAAA,IACpD,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,IAAI,QAAW,CAAC,kBAAkB,eAAe,aAAa,CAAC;AAC/D,QAAM,2BAA2B;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACF;AACA,QAAM,gBAAY,6BAAa,CAAC,kBAAkB,YAAY,CAAC;AAC/D,SAAoB,uCAAAA,MAAM,kBAAM;AAAA,IAC9B,GAAG;AAAA,IACH,KAAK;AAAA,IACL,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAC,KAAK,qCAAAC,SAA4B;AAAA,MACvD;AAAA,IACF,CAAC,GAAgB,uCAAAD,KAAK,qCAAe;AAAA,MACnC,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,WAAO,gBAAG,YAAY;AAAA,MACtB,UAAU,eAAa,SAAS,WAAW,KAAK;AAAA,MAChD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,GAAgB,uCAAAA,KAAK,qCAAe;AAAA,MACnC,qBAAqB;AAAA,MACrB,WAAO,gBAAG,aAAa;AAAA,MACvB,UAAU,eAAa,SAAS,WAAW,MAAM;AAAA,MACjD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,GAAgB,uCAAAA,KAAK,qCAAe;AAAA,MACnC,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,WAAO,gBAAG,cAAc;AAAA,MACxB,UAAU,eAAa,SAAS,WAAW,OAAO;AAAA,MAClD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,GAAgB,uCAAAA,KAAK,qCAAe;AAAA,MACnC,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,WAAO,gBAAG,eAAe;AAAA,MACzB,UAAU,eAAa,SAAS,WAAW,QAAQ;AAAA,MACnD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAM,6CAAyC,+BAAe,+BAA+B,+BAA+B;AAC5H,IAAO,oBAAQ;",
   "names": ["_jsxs", "_jsx", "BorderBoxControlVisualizer"]
 }

package/build/border-box-control/border-box-control-split-controls/hook.cjs

@@ -43,14 +43,13 @@ function useBorderBoxControlSplitControls(props) {
     colors = [],
     enableAlpha = false,
     enableStyle = true,
-    size = "default",
     __experimentalIsRenderedInSidebar = false,
     ...otherProps
   } = (0, import_context.useContextSystem)(props, "BorderBoxControlSplitControls");
   const cx = (0, import_utils.useCx)();
   const classes = (0, import_element.useMemo)(() => {
-    return cx(styles.borderBoxControlSplitControls(size), className);
-  }, [cx, className, size]);
+    return cx(styles.borderBoxControlSplitControls, className);
+  }, [cx, className]);
   const centeredClassName = (0, import_element.useMemo)(() => {
     return cx(styles.centeredBorderControl, className);
   }, [cx, className]);
@@ -65,7 +64,6 @@ function useBorderBoxControlSplitControls(props) {
     enableAlpha,
     enableStyle,
     rightAlignedClassName,
-    size,
     __experimentalIsRenderedInSidebar
   };
 }

package/build/border-box-control/border-box-control-split-controls/hook.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-box-control/border-box-control-split-controls/hook.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/';\nexport function useBorderBoxControlSplitControls(props) {\n  const {\n    className,\n    colors = [],\n    enableAlpha = false,\n    enableStyle = true,\n    size = 'default',\n    __experimentalIsRenderedInSidebar = false,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControlSplitControls');\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderBoxControlSplitControls(size), className);\n  }, [cx, className, size]);\n  const centeredClassName = useMemo(() => {\n    return cx(styles.centeredBorderControl, className);\n  }, [cx, className]);\n  const rightAlignedClassName = useMemo(() => {\n    return cx(styles.rightBorderControl(), className);\n  }, [cx, className]);\n  return {\n    ...otherProps,\n    centeredClassName,\n    className: classes,\n    colors,\n    enableAlpha,\n    enableStyle,\n    rightAlignedClassName,\n    size,\n    __experimentalIsRenderedInSidebar\n  };\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AAKxB,aAAwB;AACxB,qBAAiC;AACjC,mBAAsB;AACf,SAAS,iCAAiC,OAAO;AACtD,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,CAAC;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,OAAO;AAAA,IACP,oCAAoC;AAAA,IACpC,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,+BAA+B;AAG3D,QAAM,SAAK,oBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,WAAO,GAAU,qCAA8B,IAAI,GAAG,SAAS;AAAA,EACjE,GAAG,CAAC,IAAI,WAAW,IAAI,CAAC;AACxB,QAAM,wBAAoB,wBAAQ,MAAM;AACtC,WAAO,GAAU,8BAAuB,SAAS;AAAA,EACnD,GAAG,CAAC,IAAI,SAAS,CAAC;AAClB,QAAM,4BAAwB,wBAAQ,MAAM;AAC1C,WAAO,GAAU,0BAAmB,GAAG,SAAS;AAAA,EAClD,GAAG,CAAC,IAAI,SAAS,CAAC;AAClB,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/';\nexport function useBorderBoxControlSplitControls(props) {\n  const {\n    className,\n    colors = [],\n    enableAlpha = false,\n    enableStyle = true,\n    __experimentalIsRenderedInSidebar = false,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControlSplitControls');\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderBoxControlSplitControls, className);\n  }, [cx, className]);\n  const centeredClassName = useMemo(() => {\n    return cx(styles.centeredBorderControl, className);\n  }, [cx, className]);\n  const rightAlignedClassName = useMemo(() => {\n    return cx(styles.rightBorderControl(), className);\n  }, [cx, className]);\n  return {\n    ...otherProps,\n    centeredClassName,\n    className: classes,\n    colors,\n    enableAlpha,\n    enableStyle,\n    rightAlignedClassName,\n    __experimentalIsRenderedInSidebar\n  };\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AAKxB,aAAwB;AACxB,qBAAiC;AACjC,mBAAsB;AACf,SAAS,iCAAiC,OAAO;AACtD,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,CAAC;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,oCAAoC;AAAA,IACpC,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,+BAA+B;AAG3D,QAAM,SAAK,oBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,WAAO,GAAU,sCAA+B,SAAS;AAAA,EAC3D,GAAG,CAAC,IAAI,SAAS,CAAC;AAClB,QAAM,wBAAoB,wBAAQ,MAAM;AACtC,WAAO,GAAU,8BAAuB,SAAS;AAAA,EACnD,GAAG,CAAC,IAAI,SAAS,CAAC;AAClB,QAAM,4BAAwB,wBAAQ,MAAM;AAC1C,WAAO,GAAU,0BAAmB,GAAG,SAAS;AAAA,EAClD,GAAG,CAAC,IAAI,SAAS,CAAC;AAClB,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/build/border-box-control/border-box-control-visualizer/hook.cjs

@@ -41,13 +41,12 @@ function useBorderBoxControlVisualizer(props) {
   const {
     className,
     value,
-    size = "default",
     ...otherProps
   } = (0, import_context.useContextSystem)(props, "BorderBoxControlVisualizer");
   const cx = (0, import_utils.useCx)();
   const classes = (0, import_element.useMemo)(() => {
-    return cx(styles.borderBoxControlVisualizer(value, size), className);
-  }, [cx, className, value, size]);
+    return cx(styles.borderBoxControlVisualizer(value), className);
+  }, [cx, className, value]);
   return {
     ...otherProps,
     className: classes,

package/build/border-box-control/border-box-control-visualizer/hook.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-box-control/border-box-control-visualizer/hook.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils';\nexport function useBorderBoxControlVisualizer(props) {\n  const {\n    className,\n    value,\n    size = 'default',\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControlVisualizer');\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderBoxControlVisualizer(value, size), className);\n  }, [cx, className, value, size]);\n  return {\n    ...otherProps,\n    className: classes,\n    value\n  };\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AAKxB,aAAwB;AACxB,qBAAiC;AACjC,mBAAsB;AACf,SAAS,8BAA8B,OAAO;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,4BAA4B;AAGxD,QAAM,SAAK,oBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,WAAO,GAAU,kCAA2B,OAAO,IAAI,GAAG,SAAS;AAAA,EACrE,GAAG,CAAC,IAAI,WAAW,OAAO,IAAI,CAAC;AAC/B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,EACF;AACF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils';\nexport function useBorderBoxControlVisualizer(props) {\n  const {\n    className,\n    value,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControlVisualizer');\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderBoxControlVisualizer(value), className);\n  }, [cx, className, value]);\n  return {\n    ...otherProps,\n    className: classes,\n    value\n  };\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AAKxB,aAAwB;AACxB,qBAAiC;AACjC,mBAAsB;AACf,SAAS,8BAA8B,OAAO;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,4BAA4B;AAGxD,QAAM,SAAK,oBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,WAAO,GAAU,kCAA2B,KAAK,GAAG,SAAS;AAAA,EAC/D,GAAG,CAAC,IAAI,WAAW,KAAK,CAAC;AACzB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,EACF;AACF;",
   "names": []
 }