@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/build/toggle-control/index.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ToggleControl = ToggleControl;
 exports.default = void 0;
-var _element = require("@wordpress/element");
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _compose = require("@wordpress/compose");
 var _flex = require("../flex");
 var _formToggle = _interopRequireDefault(require("../form-toggle"));
 var _baseControl = _interopRequireDefault(require("../base-control"));
 var _hStack = require("../h-stack");
 var _utils = require("../utils");
-var _space = require("../ui/utils/space");
+var _space = require("../utils/space");
 /**
  * External dependencies
  */
@@ -62,9 +62,9 @@ function ToggleControl({
   const instanceId = (0, _compose.useInstanceId)(ToggleControl);
   const id = `inspector-toggle-control-${instanceId}`;
   const cx = (0, _utils.useCx)();
-  const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/(0, _react.css)({
+  const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/(0, _react2.css)({
     marginBottom: (0, _space.space)(3)
-  }, process.env.NODE_ENV === "production" ? "" : ";label:classes;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWNvbnRyb2wvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThEK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtY29udHJvbC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IENoYW5nZUV2ZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlSW5zdGFuY2VJZCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXhCbG9jayB9IGZyb20gJy4uL2ZsZXgnO1xuaW1wb3J0IEZvcm1Ub2dnbGUgZnJvbSAnLi4vZm9ybS10b2dnbGUnO1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vdWkvY29udGV4dC93b3JkcHJlc3MtY29tcG9uZW50JztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlQ29udHJvbFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5cbi8qKlxuICogVG9nZ2xlQ29udHJvbCBpcyB1c2VkIHRvIGdlbmVyYXRlIGEgdG9nZ2xlIHVzZXIgaW50ZXJmYWNlLlxuICpcbiAqIGBgYGpzeFxuICogaW1wb3J0IHsgVG9nZ2xlQ29udHJvbCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKiBpbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG4gKlxuICogY29uc3QgTXlUb2dnbGVDb250cm9sID0gKCkgPT4ge1xuICogICBjb25zdCBbIHZhbHVlLCBzZXRWYWx1ZSBdID0gdXNlU3RhdGUoIGZhbHNlICk7XG4gKlxuICogICByZXR1cm4gKFxuICogICAgIDxUb2dnbGVDb250cm9sXG4gKiAgICAgICBsYWJlbD1cIkZpeGVkIEJhY2tncm91bmRcIlxuICogICAgICAgY2hlY2tlZD17IHZhbHVlIH1cbiAqICAgICAgIG9uQ2hhbmdlPXsgKCkgPT4gc2V0VmFsdWUoICggc3RhdGUgKSA9PiAhIHN0YXRlICkgfVxuICogICAgIC8+XG4gKiAgICk7XG4gKiB9O1xuICogYGBgXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBUb2dnbGVDb250cm9sKCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tLFxuXHRsYWJlbCxcblx0Y2hlY2tlZCxcblx0aGVscCxcblx0Y2xhc3NOYW1lLFxuXHRvbkNoYW5nZSxcblx0ZGlzYWJsZWQsXG59OiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgVG9nZ2xlQ29udHJvbFByb3BzLCAnaW5wdXQnLCBmYWxzZSA+ICkge1xuXHRmdW5jdGlvbiBvbkNoYW5nZVRvZ2dsZSggZXZlbnQ6IENoYW5nZUV2ZW50PCBIVE1MSW5wdXRFbGVtZW50ID4gKSB7XG5cdFx0b25DaGFuZ2UoIGV2ZW50LnRhcmdldC5jaGVja2VkICk7XG5cdH1cblx0Y29uc3QgaW5zdGFuY2VJZCA9IHVzZUluc3RhbmNlSWQoIFRvZ2dsZUNvbnRyb2wgKTtcblx0Y29uc3QgaWQgPSBgaW5zcGVjdG9yLXRvZ2dsZS1jb250cm9sLSR7IGluc3RhbmNlSWQgfWA7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXHRjb25zdCBjbGFzc2VzID0gY3goXG5cdFx0J2NvbXBvbmVudHMtdG9nZ2xlLWNvbnRyb2wnLFxuXHRcdGNsYXNzTmFtZSxcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGNzcyggeyBtYXJnaW5Cb3R0b206IHNwYWNlKCAzICkgfSApXG5cdCk7XG5cblx0bGV0IGRlc2NyaWJlZEJ5LCBoZWxwTGFiZWw7XG5cdGlmICggaGVscCApIHtcblx0XHRpZiAoIHR5cGVvZiBoZWxwID09PSAnZnVuY3Rpb24nICkge1xuXHRcdFx0Ly8gYGhlbHBgIGFzIGEgZnVuY3Rpb24gd29ya3Mgb25seSBmb3IgY29udHJvbGxlZCBjb21wb25lbnRzIHdoZXJlXG5cdFx0XHQvLyBgY2hlY2tlZGAgaXMgcGFzc2VkIGRvd24gZnJvbSBwYXJlbnQgY29tcG9uZW50LiBVbmNvbnRyb2xsZWRcblx0XHRcdC8vIGNvbXBvbmVudCBjYW4gc2hvdyBvbmx5IGEgc3RhdGljIGhlbHAgbGFiZWwuXG5cdFx0XHRpZiAoIGNoZWNrZWQgIT09IHVuZGVmaW5lZCApIHtcblx0XHRcdFx0aGVscExhYmVsID0gaGVscCggY2hlY2tlZCApO1xuXHRcdFx0fVxuXHRcdH0gZWxzZSB7XG5cdFx0XHRoZWxwTGFiZWwgPSBoZWxwO1xuXHRcdH1cblx0XHRpZiAoIGhlbHBMYWJlbCApIHtcblx0XHRcdGRlc2NyaWJlZEJ5ID0gaWQgKyAnX19oZWxwJztcblx0XHR9XG5cdH1cblxuXHRyZXR1cm4gKFxuXHRcdDxCYXNlQ29udHJvbFxuXHRcdFx0aWQ9eyBpZCB9XG5cdFx0XHRoZWxwPXsgaGVscExhYmVsIH1cblx0XHRcdGNsYXNzTmFtZT17IGNsYXNzZXMgfVxuXHRcdFx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b21cblx0XHQ+XG5cdFx0XHQ8SFN0YWNrIGp1c3RpZnk9XCJmbGV4LXN0YXJ0XCIgc3BhY2luZz17IDMgfT5cblx0XHRcdFx0PEZvcm1Ub2dnbGVcblx0XHRcdFx0XHRpZD17IGlkIH1cblx0XHRcdFx0XHRjaGVja2VkPXsgY2hlY2tlZCB9XG5cdFx0XHRcdFx0b25DaGFuZ2U9eyBvbkNoYW5nZVRvZ2dsZSB9XG5cdFx0XHRcdFx0YXJpYS1kZXNjcmliZWRieT17IGRlc2NyaWJlZEJ5IH1cblx0XHRcdFx0XHRkaXNhYmxlZD17IGRpc2FibGVkIH1cblx0XHRcdFx0Lz5cblx0XHRcdFx0PEZsZXhCbG9ja1xuXHRcdFx0XHRcdGFzPVwibGFiZWxcIlxuXHRcdFx0XHRcdGh0bWxGb3I9eyBpZCB9XG5cdFx0XHRcdFx0Y2xhc3NOYW1lPVwiY29tcG9uZW50cy10b2dnbGUtY29udHJvbF9fbGFiZWxcIlxuXHRcdFx0XHQ+XG5cdFx0XHRcdFx0eyBsYWJlbCB9XG5cdFx0XHRcdDwvRmxleEJsb2NrPlxuXHRcdFx0PC9IU3RhY2s+XG5cdFx0PC9CYXNlQ29udHJvbD5cblx0KTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgVG9nZ2xlQ29udHJvbDtcbiJdfQ== */"));
+  }, process.env.NODE_ENV === "production" ? "" : ";label:classes;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWNvbnRyb2wvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThEK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtY29udHJvbC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IENoYW5nZUV2ZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlSW5zdGFuY2VJZCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXhCbG9jayB9IGZyb20gJy4uL2ZsZXgnO1xuaW1wb3J0IEZvcm1Ub2dnbGUgZnJvbSAnLi4vZm9ybS10b2dnbGUnO1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vY29udGV4dC93b3JkcHJlc3MtY29tcG9uZW50JztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlQ29udHJvbFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91dGlscy9zcGFjZSc7XG5cbi8qKlxuICogVG9nZ2xlQ29udHJvbCBpcyB1c2VkIHRvIGdlbmVyYXRlIGEgdG9nZ2xlIHVzZXIgaW50ZXJmYWNlLlxuICpcbiAqIGBgYGpzeFxuICogaW1wb3J0IHsgVG9nZ2xlQ29udHJvbCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKiBpbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG4gKlxuICogY29uc3QgTXlUb2dnbGVDb250cm9sID0gKCkgPT4ge1xuICogICBjb25zdCBbIHZhbHVlLCBzZXRWYWx1ZSBdID0gdXNlU3RhdGUoIGZhbHNlICk7XG4gKlxuICogICByZXR1cm4gKFxuICogICAgIDxUb2dnbGVDb250cm9sXG4gKiAgICAgICBsYWJlbD1cIkZpeGVkIEJhY2tncm91bmRcIlxuICogICAgICAgY2hlY2tlZD17IHZhbHVlIH1cbiAqICAgICAgIG9uQ2hhbmdlPXsgKCkgPT4gc2V0VmFsdWUoICggc3RhdGUgKSA9PiAhIHN0YXRlICkgfVxuICogICAgIC8+XG4gKiAgICk7XG4gKiB9O1xuICogYGBgXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBUb2dnbGVDb250cm9sKCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tLFxuXHRsYWJlbCxcblx0Y2hlY2tlZCxcblx0aGVscCxcblx0Y2xhc3NOYW1lLFxuXHRvbkNoYW5nZSxcblx0ZGlzYWJsZWQsXG59OiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgVG9nZ2xlQ29udHJvbFByb3BzLCAnaW5wdXQnLCBmYWxzZSA+ICkge1xuXHRmdW5jdGlvbiBvbkNoYW5nZVRvZ2dsZSggZXZlbnQ6IENoYW5nZUV2ZW50PCBIVE1MSW5wdXRFbGVtZW50ID4gKSB7XG5cdFx0b25DaGFuZ2UoIGV2ZW50LnRhcmdldC5jaGVja2VkICk7XG5cdH1cblx0Y29uc3QgaW5zdGFuY2VJZCA9IHVzZUluc3RhbmNlSWQoIFRvZ2dsZUNvbnRyb2wgKTtcblx0Y29uc3QgaWQgPSBgaW5zcGVjdG9yLXRvZ2dsZS1jb250cm9sLSR7IGluc3RhbmNlSWQgfWA7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXHRjb25zdCBjbGFzc2VzID0gY3goXG5cdFx0J2NvbXBvbmVudHMtdG9nZ2xlLWNvbnRyb2wnLFxuXHRcdGNsYXNzTmFtZSxcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGNzcyggeyBtYXJnaW5Cb3R0b206IHNwYWNlKCAzICkgfSApXG5cdCk7XG5cblx0bGV0IGRlc2NyaWJlZEJ5LCBoZWxwTGFiZWw7XG5cdGlmICggaGVscCApIHtcblx0XHRpZiAoIHR5cGVvZiBoZWxwID09PSAnZnVuY3Rpb24nICkge1xuXHRcdFx0Ly8gYGhlbHBgIGFzIGEgZnVuY3Rpb24gd29ya3Mgb25seSBmb3IgY29udHJvbGxlZCBjb21wb25lbnRzIHdoZXJlXG5cdFx0XHQvLyBgY2hlY2tlZGAgaXMgcGFzc2VkIGRvd24gZnJvbSBwYXJlbnQgY29tcG9uZW50LiBVbmNvbnRyb2xsZWRcblx0XHRcdC8vIGNvbXBvbmVudCBjYW4gc2hvdyBvbmx5IGEgc3RhdGljIGhlbHAgbGFiZWwuXG5cdFx0XHRpZiAoIGNoZWNrZWQgIT09IHVuZGVmaW5lZCApIHtcblx0XHRcdFx0aGVscExhYmVsID0gaGVscCggY2hlY2tlZCApO1xuXHRcdFx0fVxuXHRcdH0gZWxzZSB7XG5cdFx0XHRoZWxwTGFiZWwgPSBoZWxwO1xuXHRcdH1cblx0XHRpZiAoIGhlbHBMYWJlbCApIHtcblx0XHRcdGRlc2NyaWJlZEJ5ID0gaWQgKyAnX19oZWxwJztcblx0XHR9XG5cdH1cblxuXHRyZXR1cm4gKFxuXHRcdDxCYXNlQ29udHJvbFxuXHRcdFx0aWQ9eyBpZCB9XG5cdFx0XHRoZWxwPXsgaGVscExhYmVsIH1cblx0XHRcdGNsYXNzTmFtZT17IGNsYXNzZXMgfVxuXHRcdFx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b21cblx0XHQ+XG5cdFx0XHQ8SFN0YWNrIGp1c3RpZnk9XCJmbGV4LXN0YXJ0XCIgc3BhY2luZz17IDMgfT5cblx0XHRcdFx0PEZvcm1Ub2dnbGVcblx0XHRcdFx0XHRpZD17IGlkIH1cblx0XHRcdFx0XHRjaGVja2VkPXsgY2hlY2tlZCB9XG5cdFx0XHRcdFx0b25DaGFuZ2U9eyBvbkNoYW5nZVRvZ2dsZSB9XG5cdFx0XHRcdFx0YXJpYS1kZXNjcmliZWRieT17IGRlc2NyaWJlZEJ5IH1cblx0XHRcdFx0XHRkaXNhYmxlZD17IGRpc2FibGVkIH1cblx0XHRcdFx0Lz5cblx0XHRcdFx0PEZsZXhCbG9ja1xuXHRcdFx0XHRcdGFzPVwibGFiZWxcIlxuXHRcdFx0XHRcdGh0bWxGb3I9eyBpZCB9XG5cdFx0XHRcdFx0Y2xhc3NOYW1lPVwiY29tcG9uZW50cy10b2dnbGUtY29udHJvbF9fbGFiZWxcIlxuXHRcdFx0XHQ+XG5cdFx0XHRcdFx0eyBsYWJlbCB9XG5cdFx0XHRcdDwvRmxleEJsb2NrPlxuXHRcdFx0PC9IU3RhY2s+XG5cdFx0PC9CYXNlQ29udHJvbD5cblx0KTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgVG9nZ2xlQ29udHJvbDtcbiJdfQ== */"));
   let describedBy, helpLabel;
   if (help) {
     if (typeof help === 'function') {
@@ -81,26 +81,25 @@ function ToggleControl({
       describedBy = id + '__help';
     }
   }
-  return (0, _element.createElement)(_baseControl.default, {
+  return (0, _react.createElement)(_baseControl.default, {
     id: id,
     help: helpLabel,
     className: classes,
     __nextHasNoMarginBottom: true
-  }, (0, _element.createElement)(_hStack.HStack, {
+  }, (0, _react.createElement)(_hStack.HStack, {
     justify: "flex-start",
     spacing: 3
-  }, (0, _element.createElement)(_formToggle.default, {
+  }, (0, _react.createElement)(_formToggle.default, {
     id: id,
     checked: checked,
     onChange: onChangeToggle,
     "aria-describedby": describedBy,
     disabled: disabled
-  }), (0, _element.createElement)(_flex.FlexBlock, {
+  }), (0, _react.createElement)(_flex.FlexBlock, {
     as: "label",
     htmlFor: id,
     className: "components-toggle-control__label"
   }, label)));
 }
-var _default = ToggleControl;
-exports.default = _default;
+var _default = exports.default = ToggleControl;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_compose","_flex","_formToggle","_interopRequireDefault","_baseControl","_hStack","_utils","_space","ToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","onChangeToggle","event","target","instanceId","useInstanceId","id","cx","useCx","classes","css","marginBottom","space","process","env","NODE_ENV","describedBy","helpLabel","undefined","_element","createElement","default","HStack","justify","spacing","FlexBlock","as","htmlFor","_default","exports"],"sources":["@wordpress/components/src/toggle-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent } from 'react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../ui/utils/space';\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n *   const [ value, setValue ] = useState( false );\n *\n *   return (\n *     <ToggleControl\n *       label=\"Fixed Background\"\n *       checked={ value }\n *       onChange={ () => setValue( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function ToggleControl( {\n\t__nextHasNoMarginBottom,\n\tlabel,\n\tchecked,\n\thelp,\n\tclassName,\n\tonChange,\n\tdisabled,\n}: WordPressComponentProps< ToggleControlProps, 'input', false > ) {\n\tfunction onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {\n\t\tonChange( event.target.checked );\n\t}\n\tconst instanceId = useInstanceId( ToggleControl );\n\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\tconst cx = useCx();\n\tconst classes = cx(\n\t\t'components-toggle-control',\n\t\tclassName,\n\t\t! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )\n\t);\n\n\tlet describedBy, helpLabel;\n\tif ( help ) {\n\t\tif ( typeof help === 'function' ) {\n\t\t\t// `help` as a function works only for controlled components where\n\t\t\t// `checked` is passed down from parent component. Uncontrolled\n\t\t\t// component can show only a static help label.\n\t\t\tif ( checked !== undefined ) {\n\t\t\t\thelpLabel = help( checked );\n\t\t\t}\n\t\t} else {\n\t\t\thelpLabel = help;\n\t\t}\n\t\tif ( helpLabel ) {\n\t\t\tdescribedBy = id + '__help';\n\t\t}\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\thelp={ helpLabel }\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 3 }>\n\t\t\t\t<FormToggle\n\t\t\t\t\tid={ id }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\tonChange={ onChangeToggle }\n\t\t\t\t\taria-describedby={ describedBy }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock\n\t\t\t\t\tas=\"label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName=\"components-toggle-control__label\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default ToggleControl;\n"],"mappings":";;;;;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAD,sBAAA,CAAAJ,OAAA;AAGA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AArBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASS,aAAaA,CAAE;EAC9BC,uBAAuB;EACvBC,KAAK;EACLC,OAAO;EACPC,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC;AAC8D,CAAC,EAAG;EAClE,SAASC,cAAcA,CAAEC,KAAsC,EAAG;IACjEH,QAAQ,CAAEG,KAAK,CAACC,MAAM,CAACP,OAAQ,CAAC;EACjC;EACA,MAAMQ,UAAU,GAAG,IAAAC,sBAAa,EAAEZ,aAAc,CAAC;EACjD,MAAMa,EAAE,GAAI,4BAA4BF,UAAY,EAAC;EAErD,MAAMG,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAClB,MAAMC,OAAO,GAAGF,EAAE,CACjB,2BAA2B,EAC3BT,SAAS,EACT,CAAEJ,uBAAuB,iBAAI,IAAAgB,UAAG,EAAE;IAAEC,YAAY,EAAE,IAAAC,YAAK,EAAE,CAAE;EAAE,CAAC,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,4CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,0lIAAC,CAChE,CAAC;EAED,IAAIC,WAAW,EAAEC,SAAS;EAC1B,IAAKpB,IAAI,EAAG;IACX,IAAK,OAAOA,IAAI,KAAK,UAAU,EAAG;MACjC;MACA;MACA;MACA,IAAKD,OAAO,KAAKsB,SAAS,EAAG;QAC5BD,SAAS,GAAGpB,IAAI,CAAED,OAAQ,CAAC;MAC5B;IACD,CAAC,MAAM;MACNqB,SAAS,GAAGpB,IAAI;IACjB;IACA,IAAKoB,SAAS,EAAG;MAChBD,WAAW,GAAGV,EAAE,GAAG,QAAQ;IAC5B;EACD;EAEA,OACC,IAAAa,QAAA,CAAAC,aAAA,EAAC/B,YAAA,CAAAgC,OAAW;IACXf,EAAE,EAAGA,EAAI;IACTT,IAAI,EAAGoB,SAAW;IAClBnB,SAAS,EAAGW,OAAS;IACrBf,uBAAuB;EAAA,GAEvB,IAAAyB,QAAA,CAAAC,aAAA,EAAC9B,OAAA,CAAAgC,MAAM;IAACC,OAAO,EAAC,YAAY;IAACC,OAAO,EAAG;EAAG,GACzC,IAAAL,QAAA,CAAAC,aAAA,EAACjC,WAAA,CAAAkC,OAAU;IACVf,EAAE,EAAGA,EAAI;IACTV,OAAO,EAAGA,OAAS;IACnBG,QAAQ,EAAGE,cAAgB;IAC3B,oBAAmBe,WAAa;IAChChB,QAAQ,EAAGA;EAAU,CACrB,CAAC,EACF,IAAAmB,QAAA,CAAAC,aAAA,EAAClC,KAAA,CAAAuC,SAAS;IACTC,EAAE,EAAC,OAAO;IACVC,OAAO,EAAGrB,EAAI;IACdR,SAAS,EAAC;EAAkC,GAE1CH,KACQ,CACJ,CACI,CAAC;AAEhB;AAAC,IAAAiC,QAAA,GAEcnC,aAAa;AAAAoC,OAAA,CAAAR,OAAA,GAAAO,QAAA"}
+{"version":3,"names":["_react2","require","_compose","_flex","_formToggle","_interopRequireDefault","_baseControl","_hStack","_utils","_space","ToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","onChangeToggle","event","target","instanceId","useInstanceId","id","cx","useCx","classes","css","marginBottom","space","process","env","NODE_ENV","describedBy","helpLabel","undefined","_react","createElement","default","HStack","justify","spacing","FlexBlock","as","htmlFor","_default","exports"],"sources":["@wordpress/components/src/toggle-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent } from 'react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../utils/space';\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n *   const [ value, setValue ] = useState( false );\n *\n *   return (\n *     <ToggleControl\n *       label=\"Fixed Background\"\n *       checked={ value }\n *       onChange={ () => setValue( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function ToggleControl( {\n\t__nextHasNoMarginBottom,\n\tlabel,\n\tchecked,\n\thelp,\n\tclassName,\n\tonChange,\n\tdisabled,\n}: WordPressComponentProps< ToggleControlProps, 'input', false > ) {\n\tfunction onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {\n\t\tonChange( event.target.checked );\n\t}\n\tconst instanceId = useInstanceId( ToggleControl );\n\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\tconst cx = useCx();\n\tconst classes = cx(\n\t\t'components-toggle-control',\n\t\tclassName,\n\t\t! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )\n\t);\n\n\tlet describedBy, helpLabel;\n\tif ( help ) {\n\t\tif ( typeof help === 'function' ) {\n\t\t\t// `help` as a function works only for controlled components where\n\t\t\t// `checked` is passed down from parent component. Uncontrolled\n\t\t\t// component can show only a static help label.\n\t\t\tif ( checked !== undefined ) {\n\t\t\t\thelpLabel = help( checked );\n\t\t\t}\n\t\t} else {\n\t\t\thelpLabel = help;\n\t\t}\n\t\tif ( helpLabel ) {\n\t\t\tdescribedBy = id + '__help';\n\t\t}\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\thelp={ helpLabel }\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 3 }>\n\t\t\t\t<FormToggle\n\t\t\t\t\tid={ id }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\tonChange={ onChangeToggle }\n\t\t\t\t\taria-describedby={ describedBy }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock\n\t\t\t\t\tas=\"label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName=\"components-toggle-control__label\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default ToggleControl;\n"],"mappings":";;;;;;;;;AAIA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAD,sBAAA,CAAAJ,OAAA;AAGA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AArBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASS,aAAaA,CAAE;EAC9BC,uBAAuB;EACvBC,KAAK;EACLC,OAAO;EACPC,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC;AAC8D,CAAC,EAAG;EAClE,SAASC,cAAcA,CAAEC,KAAsC,EAAG;IACjEH,QAAQ,CAAEG,KAAK,CAACC,MAAM,CAACP,OAAQ,CAAC;EACjC;EACA,MAAMQ,UAAU,GAAG,IAAAC,sBAAa,EAAEZ,aAAc,CAAC;EACjD,MAAMa,EAAE,GAAI,4BAA4BF,UAAY,EAAC;EAErD,MAAMG,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAClB,MAAMC,OAAO,GAAGF,EAAE,CACjB,2BAA2B,EAC3BT,SAAS,EACT,CAAEJ,uBAAuB,iBAAI,IAAAgB,WAAG,EAAE;IAAEC,YAAY,EAAE,IAAAC,YAAK,EAAE,CAAE;EAAE,CAAC,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,4CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,klIAAC,CAChE,CAAC;EAED,IAAIC,WAAW,EAAEC,SAAS;EAC1B,IAAKpB,IAAI,EAAG;IACX,IAAK,OAAOA,IAAI,KAAK,UAAU,EAAG;MACjC;MACA;MACA;MACA,IAAKD,OAAO,KAAKsB,SAAS,EAAG;QAC5BD,SAAS,GAAGpB,IAAI,CAAED,OAAQ,CAAC;MAC5B;IACD,CAAC,MAAM;MACNqB,SAAS,GAAGpB,IAAI;IACjB;IACA,IAAKoB,SAAS,EAAG;MAChBD,WAAW,GAAGV,EAAE,GAAG,QAAQ;IAC5B;EACD;EAEA,OACC,IAAAa,MAAA,CAAAC,aAAA,EAAC/B,YAAA,CAAAgC,OAAW;IACXf,EAAE,EAAGA,EAAI;IACTT,IAAI,EAAGoB,SAAW;IAClBnB,SAAS,EAAGW,OAAS;IACrBf,uBAAuB;EAAA,GAEvB,IAAAyB,MAAA,CAAAC,aAAA,EAAC9B,OAAA,CAAAgC,MAAM;IAACC,OAAO,EAAC,YAAY;IAACC,OAAO,EAAG;EAAG,GACzC,IAAAL,MAAA,CAAAC,aAAA,EAACjC,WAAA,CAAAkC,OAAU;IACVf,EAAE,EAAGA,EAAI;IACTV,OAAO,EAAGA,OAAS;IACnBG,QAAQ,EAAGE,cAAgB;IAC3B,oBAAmBe,WAAa;IAChChB,QAAQ,EAAGA;EAAU,CACrB,CAAC,EACF,IAAAmB,MAAA,CAAAC,aAAA,EAAClC,KAAA,CAAAuC,SAAS;IACTC,EAAE,EAAC,OAAO;IACVC,OAAO,EAAGrB,EAAI;IACdR,SAAS,EAAC;EAAkC,GAE1CH,KACQ,CACJ,CACI,CAAC;AAEhB;AAAC,IAAAiC,QAAA,GAAAC,OAAA,CAAAR,OAAA,GAEc5B,aAAa"}

package/build/toggle-control/index.native.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("react");
 var _element = require("@wordpress/element");
 var _switchCell = _interopRequireDefault(require("../mobile/bottom-sheet/switch-cell"));
 /**
@@ -26,7 +27,7 @@ const ToggleControl = (0, _element.memo)(({
 }) => {
   const id = `inspector-toggle-control-${instanceId}`;
   const helpLabel = help && typeof help === 'function' ? help(checked) : help;
-  return (0, _element.createElement)(_switchCell.default, {
+  return (0, _react.createElement)(_switchCell.default, {
     label: label,
     id: id,
     help: helpLabel,
@@ -36,6 +37,5 @@ const ToggleControl = (0, _element.memo)(({
     ...props
   });
 });
-var _default = ToggleControl;
-exports.default = _default;
+var _default = exports.default = ToggleControl;
 //# sourceMappingURL=index.native.js.map

package/build/toggle-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_switchCell","_interopRequireDefault","ToggleControl","memo","label","checked","help","instanceId","className","onChange","props","id","helpLabel","createElement","default","value","onValueChange","_default","exports"],"sources":["@wordpress/components/src/toggle-control/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport SwitchCell from '../mobile/bottom-sheet/switch-cell';\n\nconst ToggleControl = memo(\n\t( { label, checked, help, instanceId, className, onChange, ...props } ) => {\n\t\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\t\tconst helpLabel =\n\t\t\thelp && typeof help === 'function' ? help( checked ) : help;\n\n\t\treturn (\n\t\t\t<SwitchCell\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ helpLabel }\n\t\t\t\tclassName={ className }\n\t\t\t\tvalue={ checked }\n\t\t\t\tonValueChange={ onChange }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport default ToggleControl;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAIA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAPA;AACA;AACA;;AAEA;AACA;AACA;;AAGA,MAAMG,aAAa,GAAG,IAAAC,aAAI,EACzB,CAAE;EAAEC,KAAK;EAAEC,OAAO;EAAEC,IAAI;EAAEC,UAAU;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,KAAM;EAC1E,MAAMC,EAAE,GAAI,4BAA4BJ,UAAY,EAAC;EAErD,MAAMK,SAAS,GACdN,IAAI,IAAI,OAAOA,IAAI,KAAK,UAAU,GAAGA,IAAI,CAAED,OAAQ,CAAC,GAAGC,IAAI;EAE5D,OACC,IAAAR,QAAA,CAAAe,aAAA,EAACb,WAAA,CAAAc,OAAU;IACVV,KAAK,EAAGA,KAAO;IACfO,EAAE,EAAGA,EAAI;IACTL,IAAI,EAAGM,SAAW;IAClBJ,SAAS,EAAGA,SAAW;IACvBO,KAAK,EAAGV,OAAS;IACjBW,aAAa,EAAGP,QAAU;IAAA,GACrBC;EAAK,CACV,CAAC;AAEJ,CACD,CAAC;AAAC,IAAAO,QAAA,GAEaf,aAAa;AAAAgB,OAAA,CAAAJ,OAAA,GAAAG,QAAA"}
+{"version":3,"names":["_element","require","_switchCell","_interopRequireDefault","ToggleControl","memo","label","checked","help","instanceId","className","onChange","props","id","helpLabel","_react","createElement","default","value","onValueChange","_default","exports"],"sources":["@wordpress/components/src/toggle-control/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport SwitchCell from '../mobile/bottom-sheet/switch-cell';\n\nconst ToggleControl = memo(\n\t( { label, checked, help, instanceId, className, onChange, ...props } ) => {\n\t\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\t\tconst helpLabel =\n\t\t\thelp && typeof help === 'function' ? help( checked ) : help;\n\n\t\treturn (\n\t\t\t<SwitchCell\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ helpLabel }\n\t\t\t\tclassName={ className }\n\t\t\t\tvalue={ checked }\n\t\t\t\tonValueChange={ onChange }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport default ToggleControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAIA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAPA;AACA;AACA;;AAEA;AACA;AACA;;AAGA,MAAMG,aAAa,GAAG,IAAAC,aAAI,EACzB,CAAE;EAAEC,KAAK;EAAEC,OAAO;EAAEC,IAAI;EAAEC,UAAU;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,KAAM;EAC1E,MAAMC,EAAE,GAAI,4BAA4BJ,UAAY,EAAC;EAErD,MAAMK,SAAS,GACdN,IAAI,IAAI,OAAOA,IAAI,KAAK,UAAU,GAAGA,IAAI,CAAED,OAAQ,CAAC,GAAGC,IAAI;EAE5D,OACC,IAAAO,MAAA,CAAAC,aAAA,EAACd,WAAA,CAAAe,OAAU;IACVX,KAAK,EAAGA,KAAO;IACfO,EAAE,EAAGA,EAAI;IACTL,IAAI,EAAGM,SAAW;IAClBJ,SAAS,EAAGA,SAAW;IACvBQ,KAAK,EAAGX,OAAS;IACjBY,aAAa,EAAGR,QAAU;IAAA,GACrBC;EAAK,CACV,CAAC;AAEJ,CACD,CAAC;AAAC,IAAAQ,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAEab,aAAa"}

package/build/toggle-group-control/context.js

@@ -12,6 +12,5 @@ var _element = require("@wordpress/element");
 const ToggleGroupControlContext = (0, _element.createContext)({});
 const useToggleGroupControlContext = () => (0, _element.useContext)(ToggleGroupControlContext);
 exports.useToggleGroupControlContext = useToggleGroupControlContext;
-var _default = ToggleGroupControlContext;
-exports.default = _default;
+var _default = exports.default = ToggleGroupControlContext;
 //# sourceMappingURL=context.js.map

package/build/toggle-group-control/context.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","ToggleGroupControlContext","createContext","useToggleGroupControlContext","useContext","exports","_default","default"],"sources":["@wordpress/components/src/toggle-group-control/context.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ToggleGroupControlContextProps } from './types';\n\nconst ToggleGroupControlContext = createContext(\n\t{} as ToggleGroupControlContextProps\n);\nexport const useToggleGroupControlContext = () =>\n\tuseContext( ToggleGroupControlContext );\nexport default ToggleGroupControlContext;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAQA,MAAMC,yBAAyB,GAAG,IAAAC,sBAAa,EAC9C,CAAC,CACF,CAAC;AACM,MAAMC,4BAA4B,GAAGA,CAAA,KAC3C,IAAAC,mBAAU,EAAEH,yBAA0B,CAAC;AAACI,OAAA,CAAAF,4BAAA,GAAAA,4BAAA;AAAA,IAAAG,QAAA,GAC1BL,yBAAyB;AAAAI,OAAA,CAAAE,OAAA,GAAAD,QAAA"}
+{"version":3,"names":["_element","require","ToggleGroupControlContext","createContext","useToggleGroupControlContext","useContext","exports","_default","default"],"sources":["@wordpress/components/src/toggle-group-control/context.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ToggleGroupControlContextProps } from './types';\n\nconst ToggleGroupControlContext = createContext(\n\t{} as ToggleGroupControlContextProps\n);\nexport const useToggleGroupControlContext = () =>\n\tuseContext( ToggleGroupControlContext );\nexport default ToggleGroupControlContext;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAQA,MAAMC,yBAAyB,GAAG,IAAAC,sBAAa,EAC9C,CAAC,CACF,CAAC;AACM,MAAMC,4BAA4B,GAAGA,CAAA,KAC3C,IAAAC,mBAAU,EAAEH,yBAA0B,CAAC;AAACI,OAAA,CAAAF,4BAAA,GAAAA,4BAAA;AAAA,IAAAG,QAAA,GAAAD,OAAA,CAAAE,OAAA,GAC1BN,yBAAyB"}

package/build/toggle-group-control/toggle-group-control/as-button-group.js

@@ -5,16 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToggleGroupControlAsButtonGroup = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _view = require("../../view");
-var _toggleGroupControlBackdrop = _interopRequireDefault(require("./toggle-group-control-backdrop"));
+var _utils = require("../../utils");
 var _context = _interopRequireDefault(require("../context"));
-var _hooks = require("../../utils/hooks");
-/**
- * External dependencies
- */
-
+var _utils2 = require("./utils");
 /**
  * WordPress dependencies
  */
@@ -29,54 +26,42 @@ function UnforwardedToggleGroupControlAsButtonGroup({
   label,
   onChange,
   size,
-  value,
+  value: valueProp,
+  id: idProp,
   ...otherProps
 }, forwardedRef) {
-  const containerRef = (0, _element.useRef)();
-  const [resizeListener, sizes] = (0, _compose.useResizeObserver)();
-  const baseId = (0, _compose.useInstanceId)(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group').toString();
-  const [selectedValue, setSelectedValue] = (0, _element.useState)(value);
-  const groupContext = {
-    baseId,
-    state: selectedValue,
-    setState: setSelectedValue
-  };
-  const previousValue = (0, _compose.usePrevious)(value);
+  const generatedId = (0, _compose.useInstanceId)(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');
+  const baseId = idProp || generatedId;
 
-  // Propagate groupContext.state change.
-  (0, _hooks.useUpdateEffect)(() => {
-    // Avoid calling onChange if groupContext state changed
-    // from incoming value.
-    if (previousValue !== groupContext.state) {
-      onChange(groupContext.state);
-    }
-  }, [groupContext.state]);
-
-  // Sync incoming value with groupContext.state.
-  (0, _hooks.useUpdateEffect)(() => {
-    if (value !== groupContext.state) {
-      groupContext.setState(value);
-    }
-  }, [value]);
-  return (0, _element.createElement)(_context.default.Provider, {
-    value: {
-      ...groupContext,
-      isBlock: !isAdaptiveWidth,
-      isDeselectable: true,
-      size
-    }
-  }, (0, _element.createElement)(_view.View, {
+  // Use a heuristic to understand if the component is being used in controlled
+  // or uncontrolled mode, and consequently:
+  // - when controlled, convert `undefined` values to `''` (ie. "no value")
+  // - use the `value` prop as the `defaultValue` when uncontrolled
+  const {
+    value,
+    defaultValue
+  } = (0, _utils2.useComputeControlledOrUncontrolledValue)(valueProp);
+  const [selectedValue, setSelectedValue] = (0, _utils.useControlledValue)({
+    defaultValue,
+    value,
+    onChange
+  });
+  const groupContextValue = (0, _element.useMemo)(() => ({
+    baseId,
+    value: selectedValue,
+    setValue: setSelectedValue,
+    isBlock: !isAdaptiveWidth,
+    isDeselectable: true,
+    size
+  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size]);
+  return (0, _react.createElement)(_context.default.Provider, {
+    value: groupContextValue
+  }, (0, _react.createElement)(_view.View, {
     "aria-label": label,
     ...otherProps,
-    ref: (0, _compose.useMergeRefs)([containerRef, forwardedRef]),
+    ref: forwardedRef,
     role: "group"
-  }, resizeListener, (0, _element.createElement)(_toggleGroupControlBackdrop.default, {
-    state: groupContext.state,
-    containerRef: containerRef,
-    containerWidth: sizes.width,
-    isAdaptiveWidth: isAdaptiveWidth
-  }), children));
+  }, children));
 }
-const ToggleGroupControlAsButtonGroup = (0, _element.forwardRef)(UnforwardedToggleGroupControlAsButtonGroup);
-exports.ToggleGroupControlAsButtonGroup = ToggleGroupControlAsButtonGroup;
+const ToggleGroupControlAsButtonGroup = exports.ToggleGroupControlAsButtonGroup = (0, _element.forwardRef)(UnforwardedToggleGroupControlAsButtonGroup);
 //# sourceMappingURL=as-button-group.js.map

package/build/toggle-group-control/toggle-group-control/as-button-group.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_view","_toggleGroupControlBackdrop","_interopRequireDefault","_context","_hooks","UnforwardedToggleGroupControlAsButtonGroup","children","isAdaptiveWidth","label","onChange","size","value","otherProps","forwardedRef","containerRef","useRef","resizeListener","sizes","useResizeObserver","baseId","useInstanceId","ToggleGroupControlAsButtonGroup","toString","selectedValue","setSelectedValue","useState","groupContext","state","setState","previousValue","usePrevious","useUpdateEffect","createElement","default","Provider","isBlock","isDeselectable","View","ref","useMergeRefs","role","containerWidth","width","forwardRef","exports"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMergeRefs,\n\tuseInstanceId,\n\tusePrevious,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { forwardRef, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport ToggleGroupControlBackdrop from './toggle-group-control-backdrop';\nimport ToggleGroupControlContext from '../context';\nimport { useUpdateEffect } from '../../utils/hooks';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlMainControlProps } from '../types';\n\nfunction UnforwardedToggleGroupControlAsButtonGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst containerRef = useRef();\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\tconst baseId = useInstanceId(\n\t\tToggleGroupControlAsButtonGroup,\n\t\t'toggle-group-control-as-button-group'\n\t).toString();\n\tconst [ selectedValue, setSelectedValue ] = useState( value );\n\tconst groupContext = {\n\t\tbaseId,\n\t\tstate: selectedValue,\n\t\tsetState: setSelectedValue,\n\t};\n\tconst previousValue = usePrevious( value );\n\n\t// Propagate groupContext.state change.\n\tuseUpdateEffect( () => {\n\t\t// Avoid calling onChange if groupContext state changed\n\t\t// from incoming value.\n\t\tif ( previousValue !== groupContext.state ) {\n\t\t\tonChange( groupContext.state );\n\t\t}\n\t}, [ groupContext.state ] );\n\n\t// Sync incoming value with groupContext.state.\n\tuseUpdateEffect( () => {\n\t\tif ( value !== groupContext.state ) {\n\t\t\tgroupContext.setState( value );\n\t\t}\n\t}, [ value ] );\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider\n\t\t\tvalue={ {\n\t\t\t\t...groupContext,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tisDeselectable: true,\n\t\t\t\tsize,\n\t\t\t} }\n\t\t>\n\t\t\t<View\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t\trole=\"group\"\n\t\t\t>\n\t\t\t\t{ resizeListener }\n\t\t\t\t<ToggleGroupControlBackdrop\n\t\t\t\t\tstate={ groupContext.state }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\tcontainerWidth={ sizes.width }\n\t\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsButtonGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsButtonGroup\n);\n"],"mappings":";;;;;;;AAcA,IAAAA,QAAA,GAAAC,OAAA;AANA,IAAAC,QAAA,GAAAD,OAAA;AAWA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,2BAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAtBA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;;AAQA,SAASO,0CAA0CA,CAClD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC,KAAK;EACL,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,YAAY,GAAG,IAAAC,eAAM,EAAC,CAAC;EAC7B,MAAM,CAAEC,cAAc,EAAEC,KAAK,CAAE,GAAG,IAAAC,0BAAiB,EAAC,CAAC;EACrD,MAAMC,MAAM,GAAG,IAAAC,sBAAa,EAC3BC,+BAA+B,EAC/B,sCACD,CAAC,CAACC,QAAQ,CAAC,CAAC;EACZ,MAAM,CAAEC,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,iBAAQ,EAAEd,KAAM,CAAC;EAC7D,MAAMe,YAAY,GAAG;IACpBP,MAAM;IACNQ,KAAK,EAAEJ,aAAa;IACpBK,QAAQ,EAAEJ;EACX,CAAC;EACD,MAAMK,aAAa,GAAG,IAAAC,oBAAW,EAAEnB,KAAM,CAAC;;EAE1C;EACA,IAAAoB,sBAAe,EAAE,MAAM;IACtB;IACA;IACA,IAAKF,aAAa,KAAKH,YAAY,CAACC,KAAK,EAAG;MAC3ClB,QAAQ,CAAEiB,YAAY,CAACC,KAAM,CAAC;IAC/B;EACD,CAAC,EAAE,CAAED,YAAY,CAACC,KAAK,CAAG,CAAC;;EAE3B;EACA,IAAAI,sBAAe,EAAE,MAAM;IACtB,IAAKpB,KAAK,KAAKe,YAAY,CAACC,KAAK,EAAG;MACnCD,YAAY,CAACE,QAAQ,CAAEjB,KAAM,CAAC;IAC/B;EACD,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC;EAEd,OACC,IAAAd,QAAA,CAAAmC,aAAA,EAAC7B,QAAA,CAAA8B,OAAyB,CAACC,QAAQ;IAClCvB,KAAK,EAAG;MACP,GAAGe,YAAY;MACfS,OAAO,EAAE,CAAE5B,eAAe;MAC1B6B,cAAc,EAAE,IAAI;MACpB1B;IACD;EAAG,GAEH,IAAAb,QAAA,CAAAmC,aAAA,EAAChC,KAAA,CAAAqC,IAAI;IACJ,cAAa7B,KAAO;IAAA,GACfI,UAAU;IACf0B,GAAG,EAAG,IAAAC,qBAAY,EAAE,CAAEzB,YAAY,EAAED,YAAY,CAAG,CAAG;IACtD2B,IAAI,EAAC;EAAO,GAEVxB,cAAc,EAChB,IAAAnB,QAAA,CAAAmC,aAAA,EAAC/B,2BAAA,CAAAgC,OAA0B;IAC1BN,KAAK,EAAGD,YAAY,CAACC,KAAO;IAC5Bb,YAAY,EAAGA,YAAc;IAC7B2B,cAAc,EAAGxB,KAAK,CAACyB,KAAO;IAC9BnC,eAAe,EAAGA;EAAiB,CACnC,CAAC,EACAD,QACG,CAC6B,CAAC;AAEvC;AAEO,MAAMe,+BAA+B,GAAG,IAAAsB,mBAAU,EACxDtC,0CACD,CAAC;AAACuC,OAAA,CAAAvB,+BAAA,GAAAA,+BAAA"}
+{"version":3,"names":["_compose","require","_element","_view","_utils","_context","_interopRequireDefault","_utils2","UnforwardedToggleGroupControlAsButtonGroup","children","isAdaptiveWidth","label","onChange","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsButtonGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","selectedValue","setSelectedValue","useControlledValue","groupContextValue","useMemo","setValue","isBlock","isDeselectable","_react","createElement","default","Provider","View","ref","role","exports","forwardRef"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsButtonGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsButtonGroup,\n\t\t'toggle-group-control-as-button-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\tconst [ selectedValue, setSelectedValue ] = useControlledValue( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tonChange,\n\t} );\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue: setSelectedValue,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tisDeselectable: true,\n\t\t\t\tsize,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<View\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\trole=\"group\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsButtonGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsButtonGroup\n);\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,QAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAbA;AACA;AACA;;AAIA;AACA;AACA;;AAWA,SAASO,0CAA0CA,CAClD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAAkD,EACjD;EACD,MAAMC,WAAW,GAAG,IAAAC,sBAAa,EAChCC,+BAA+B,EAC/B,sCACD,CAAC;EACD,MAAMC,MAAM,GAAGN,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAEU;EAAa,CAAC,GAC5B,IAAAC,+CAAuC,EAAEV,SAAU,CAAC;EAErD,MAAM,CAAEW,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,yBAAkB,EAAE;IAC/DJ,YAAY;IACZV,KAAK;IACLF;EACD,CAAE,CAAC;EAEH,MAAMiB,iBAAiB,GAAG,IAAAC,gBAAO,EAChC,OACG;IACDP,MAAM;IACNT,KAAK,EAAEY,aAAa;IACpBK,QAAQ,EAAEJ,gBAAgB;IAC1BK,OAAO,EAAE,CAAEtB,eAAe;IAC1BuB,cAAc,EAAE,IAAI;IACpBpB;EACD,CAAC,CAAoC,EACtC,CAAEU,MAAM,EAAEG,aAAa,EAAEC,gBAAgB,EAAEjB,eAAe,EAAEG,IAAI,CACjE,CAAC;EAED,OACC,IAAAqB,MAAA,CAAAC,aAAA,EAAC9B,QAAA,CAAA+B,OAAyB,CAACC,QAAQ;IAACvB,KAAK,EAAGe;EAAmB,GAC9D,IAAAK,MAAA,CAAAC,aAAA,EAAChC,KAAA,CAAAmC,IAAI;IACJ,cAAa3B,KAAO;IAAA,GACfO,UAAU;IACfqB,GAAG,EAAGpB,YAAc;IACpBqB,IAAI,EAAC;EAAO,GAEV/B,QACG,CAC6B,CAAC;AAEvC;AAEO,MAAMa,+BAA+B,GAAAmB,OAAA,CAAAnB,+BAAA,GAAG,IAAAoB,mBAAU,EACxDlC,0CACD,CAAC"}

package/build/toggle-group-control/toggle-group-control/as-radio-group.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToggleGroupControlAsRadioGroup = void 0;
-var _element = require("@wordpress/element");
-var _reakit = require("reakit");
+var _react = require("react");
+var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _view = require("../../view");
-var _toggleGroupControlBackdrop = _interopRequireDefault(require("./toggle-group-control-backdrop"));
 var _context = _interopRequireDefault(require("../context"));
-var _hooks = require("../../utils/hooks");
+var _utils = require("./utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * External dependencies
  */
@@ -30,54 +32,53 @@ function UnforwardedToggleGroupControlAsRadioGroup({
   children,
   isAdaptiveWidth,
   label,
-  onChange,
+  onChange: onChangeProp,
   size,
-  value,
+  value: valueProp,
+  id: idProp,
   ...otherProps
 }, forwardedRef) {
-  const containerRef = (0, _element.useRef)();
-  const [resizeListener, sizes] = (0, _compose.useResizeObserver)();
-  const baseId = (0, _compose.useInstanceId)(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group').toString();
-  const radio = (0, _reakit.useRadioState)({
-    baseId,
-    state: value
-  });
-  const previousValue = (0, _compose.usePrevious)(value);
+  const generatedId = (0, _compose.useInstanceId)(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group');
+  const baseId = idProp || generatedId;
 
-  // Propagate radio.state change.
-  (0, _hooks.useUpdateEffect)(() => {
-    // Avoid calling onChange if radio state changed
-    // from incoming value.
-    if (previousValue !== radio.state) {
-      onChange(radio.state);
-    }
-  }, [radio.state]);
+  // Use a heuristic to understand if the component is being used in controlled
+  // or uncontrolled mode, and consequently:
+  // - when controlled, convert `undefined` values to `''` (ie. "no value")
+  // - use the `value` prop as the `defaultValue` when uncontrolled
+  const {
+    value,
+    defaultValue
+  } = (0, _utils.useComputeControlledOrUncontrolledValue)(valueProp);
 
-  // Sync incoming value with radio.state.
-  (0, _hooks.useUpdateEffect)(() => {
-    if (value !== radio.state) {
-      radio.setState(value);
-    }
-  }, [value]);
-  return (0, _element.createElement)(_context.default.Provider, {
-    value: {
-      ...radio,
-      isBlock: !isAdaptiveWidth,
-      size
-    }
-  }, (0, _element.createElement)(_reakit.RadioGroup, {
-    ...radio,
+  // `useRadioStore`'s `setValue` prop can be called with `null`, while
+  // the component's `onChange` prop only expects `undefined`
+  const wrappedOnChangeProp = onChangeProp ? v => {
+    onChangeProp(v !== null && v !== void 0 ? v : undefined);
+  } : undefined;
+  const radio = Ariakit.useRadioStore({
+    defaultValue,
+    value,
+    setValue: wrappedOnChangeProp
+  });
+  const selectedValue = radio.useState('value');
+  const setValue = radio.setValue;
+  const groupContextValue = (0, _element.useMemo)(() => ({
+    baseId,
+    isBlock: !isAdaptiveWidth,
+    size,
+    value: selectedValue,
+    setValue
+  }), [baseId, isAdaptiveWidth, size, selectedValue, setValue]);
+  return (0, _react.createElement)(_context.default.Provider, {
+    value: groupContextValue
+  }, (0, _react.createElement)(Ariakit.RadioGroup, {
+    store: radio,
     "aria-label": label,
-    as: _view.View,
+    render: (0, _react.createElement)(_view.View, null),
     ...otherProps,
-    ref: (0, _compose.useMergeRefs)([containerRef, forwardedRef])
-  }, resizeListener, (0, _element.createElement)(_toggleGroupControlBackdrop.default, {
-    state: radio.state,
-    containerRef: containerRef,
-    containerWidth: sizes.width,
-    isAdaptiveWidth: isAdaptiveWidth
-  }), children));
+    id: baseId,
+    ref: forwardedRef
+  }, children));
 }
-const ToggleGroupControlAsRadioGroup = (0, _element.forwardRef)(UnforwardedToggleGroupControlAsRadioGroup);
-exports.ToggleGroupControlAsRadioGroup = ToggleGroupControlAsRadioGroup;
+const ToggleGroupControlAsRadioGroup = exports.ToggleGroupControlAsRadioGroup = (0, _element.forwardRef)(UnforwardedToggleGroupControlAsRadioGroup);
 //# sourceMappingURL=as-radio-group.js.map

package/build/toggle-group-control/toggle-group-control/as-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_reakit","_compose","_view","_toggleGroupControlBackdrop","_interopRequireDefault","_context","_hooks","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","size","value","otherProps","forwardedRef","containerRef","useRef","resizeListener","sizes","useResizeObserver","baseId","useInstanceId","ToggleGroupControlAsRadioGroup","toString","radio","useRadioState","state","previousValue","usePrevious","useUpdateEffect","setState","createElement","default","Provider","isBlock","RadioGroup","as","View","ref","useMergeRefs","containerWidth","width","forwardRef","exports"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { RadioGroup, useRadioState } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMergeRefs,\n\tuseInstanceId,\n\tusePrevious,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport ToggleGroupControlBackdrop from './toggle-group-control-backdrop';\nimport ToggleGroupControlContext from '../context';\nimport { useUpdateEffect } from '../../utils/hooks';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlMainControlProps } from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst containerRef = useRef();\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\tconst baseId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t).toString();\n\tconst radio = useRadioState( {\n\t\tbaseId,\n\t\tstate: value,\n\t} );\n\tconst previousValue = usePrevious( value );\n\n\t// Propagate radio.state change.\n\tuseUpdateEffect( () => {\n\t\t// Avoid calling onChange if radio state changed\n\t\t// from incoming value.\n\t\tif ( previousValue !== radio.state ) {\n\t\t\tonChange( radio.state );\n\t\t}\n\t}, [ radio.state ] );\n\n\t// Sync incoming value with radio.state.\n\tuseUpdateEffect( () => {\n\t\tif ( value !== radio.state ) {\n\t\t\tradio.setState( value );\n\t\t}\n\t}, [ value ] );\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider\n\t\t\tvalue={ { ...radio, isBlock: ! isAdaptiveWidth, size } }\n\t\t>\n\t\t\t<RadioGroup\n\t\t\t\t{ ...radio }\n\t\t\t\taria-label={ label }\n\t\t\t\tas={ View }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t>\n\t\t\t\t{ resizeListener }\n\t\t\t\t<ToggleGroupControlBackdrop\n\t\t\t\t\tstate={ radio.state }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\tcontainerWidth={ sizes.width }\n\t\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":";;;;;;;AAgBA,IAAAA,QAAA,GAAAC,OAAA;AAXA,IAAAC,OAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AAWA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,2BAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,QAAA,GAAAD,sBAAA,CAAAL,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAxBA;AACA;AACA;;AAEA;;AAGA;AACA;AACA;;AASA;AACA;AACA;;AAQA,SAASQ,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC,KAAK;EACL,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,YAAY,GAAG,IAAAC,eAAM,EAAC,CAAC;EAC7B,MAAM,CAAEC,cAAc,EAAEC,KAAK,CAAE,GAAG,IAAAC,0BAAiB,EAAC,CAAC;EACrD,MAAMC,MAAM,GAAG,IAAAC,sBAAa,EAC3BC,8BAA8B,EAC9B,qCACD,CAAC,CAACC,QAAQ,CAAC,CAAC;EACZ,MAAMC,KAAK,GAAG,IAAAC,qBAAa,EAAE;IAC5BL,MAAM;IACNM,KAAK,EAAEd;EACR,CAAE,CAAC;EACH,MAAMe,aAAa,GAAG,IAAAC,oBAAW,EAAEhB,KAAM,CAAC;;EAE1C;EACA,IAAAiB,sBAAe,EAAE,MAAM;IACtB;IACA;IACA,IAAKF,aAAa,KAAKH,KAAK,CAACE,KAAK,EAAG;MACpChB,QAAQ,CAAEc,KAAK,CAACE,KAAM,CAAC;IACxB;EACD,CAAC,EAAE,CAAEF,KAAK,CAACE,KAAK,CAAG,CAAC;;EAEpB;EACA,IAAAG,sBAAe,EAAE,MAAM;IACtB,IAAKjB,KAAK,KAAKY,KAAK,CAACE,KAAK,EAAG;MAC5BF,KAAK,CAACM,QAAQ,CAAElB,KAAM,CAAC;IACxB;EACD,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC;EAEd,OACC,IAAAf,QAAA,CAAAkC,aAAA,EAAC3B,QAAA,CAAA4B,OAAyB,CAACC,QAAQ;IAClCrB,KAAK,EAAG;MAAE,GAAGY,KAAK;MAAEU,OAAO,EAAE,CAAE1B,eAAe;MAAEG;IAAK;EAAG,GAExD,IAAAd,QAAA,CAAAkC,aAAA,EAAChC,OAAA,CAAAoC,UAAU;IAAA,GACLX,KAAK;IACV,cAAaf,KAAO;IACpB2B,EAAE,EAAGC,UAAM;IAAA,GACNxB,UAAU;IACfyB,GAAG,EAAG,IAAAC,qBAAY,EAAE,CAAExB,YAAY,EAAED,YAAY,CAAG;EAAG,GAEpDG,cAAc,EAChB,IAAApB,QAAA,CAAAkC,aAAA,EAAC7B,2BAAA,CAAA8B,OAA0B;IAC1BN,KAAK,EAAGF,KAAK,CAACE,KAAO;IACrBX,YAAY,EAAGA,YAAc;IAC7ByB,cAAc,EAAGtB,KAAK,CAACuB,KAAO;IAC9BjC,eAAe,EAAGA;EAAiB,CACnC,CAAC,EACAD,QACS,CACuB,CAAC;AAEvC;AAEO,MAAMe,8BAA8B,GAAG,IAAAoB,mBAAU,EACvDpC,yCACD,CAAC;AAACqC,OAAA,CAAArB,8BAAA,GAAAA,8BAAA"}
+{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_compose","_element","_view","_context","_interopRequireDefault","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","selectedValue","useState","groupContextValue","useMemo","isBlock","_react","createElement","Provider","RadioGroup","store","render","View","ref","exports","forwardRef"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t  }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t} );\n\n\tconst selectedValue = radio.useState( 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":";;;;;;;;AAKA,IAAAA,OAAA,GAAAC,uBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,KAAA,GAAAH,OAAA;AAEA,IAAAI,QAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAAkE,SAAAO,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAnBlE;AACA;AACA;;AAEA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAUA,SAASY,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAG,IAAAC,sBAAa,EAChCC,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGN,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAEU;EAAa,CAAC,GAC5B,IAAAC,8CAAuC,EAAEV,SAAU,CAAC;;EAErD;EACA;EACA,MAAMW,mBAAmB,GAAGd,YAAY,GACnCe,CAAyB,IAAM;IACjCf,YAAY,CAAEe,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAGpD,OAAO,CAACqD,aAAa,CAAE;IACpCN,YAAY;IACZV,KAAK;IACLiB,QAAQ,EAAEL;EACX,CAAE,CAAC;EAEH,MAAMM,aAAa,GAAGH,KAAK,CAACI,QAAQ,CAAE,OAAQ,CAAC;EAC/C,MAAMF,QAAQ,GAAGF,KAAK,CAACE,QAAQ;EAE/B,MAAMG,iBAAiB,GAAG,IAAAC,gBAAO,EAChC,OACG;IACDZ,MAAM;IACNa,OAAO,EAAE,CAAE3B,eAAe;IAC1BI,IAAI;IACJC,KAAK,EAAEkB,aAAa;IACpBD;EACD,CAAC,CAAoC,EACtC,CAAER,MAAM,EAAEd,eAAe,EAAEI,IAAI,EAAEmB,aAAa,EAAED,QAAQ,CACzD,CAAC;EAED,OACC,IAAAM,MAAA,CAAAC,aAAA,EAACvD,QAAA,CAAAS,OAAyB,CAAC+C,QAAQ;IAACzB,KAAK,EAAGoB;EAAmB,GAC9D,IAAAG,MAAA,CAAAC,aAAA,EAAC7D,OAAO,CAAC+D,UAAU;IAClBC,KAAK,EAAGZ,KAAO;IACf,cAAanB,KAAO;IACpBgC,MAAM,EAAG,IAAAL,MAAA,CAAAC,aAAA,EAACxD,KAAA,CAAA6D,IAAI,MAAE,CAAG;IAAA,GACdzB,UAAU;IACfF,EAAE,EAAGO,MAAQ;IACbqB,GAAG,EAAGzB;EAAc,GAElBX,QACiB,CACe,CAAC;AAEvC;AAEO,MAAMc,8BAA8B,GAAAuB,OAAA,CAAAvB,8BAAA,GAAG,IAAAwB,mBAAU,EACvDvC,yCACD,CAAC"}

package/build/toggle-group-control/toggle-group-control/component.js

@@ -5,27 +5,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ToggleGroupControl = void 0;
+var _react = require("react");
+var _framerMotion = require("framer-motion");
+var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
-var _context = require("../../ui/context");
+var _context = require("../../context");
 var _hooks = require("../../utils/hooks");
 var _baseControl = _interopRequireDefault(require("../../base-control"));
-var styles = _interopRequireWildcard(require("./styles"));
+var _styles = _interopRequireWildcard(require("./styles"));
+var styles = _styles;
 var _asRadioGroup = require("./as-radio-group");
 var _asButtonGroup = require("./as-button-group");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * External dependencies
  */
 
+// eslint-disable-next-line no-restricted-imports
+
 /**
  * WordPress dependencies
  */
 
-const noop = () => {};
 function UnconnectedToggleGroupControl(props, forwardedRef) {
   const {
     __nextHasNoMarginBottom = false,
+    __next40pxDefaultSize = false,
     className,
     isAdaptiveWidth = false,
     isBlock = false,
@@ -33,33 +39,36 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     label,
     hideLabelFromVision = false,
     help,
-    onChange = noop,
+    onChange,
     size = 'default',
     value,
     children,
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'ToggleGroupControl');
+  const baseId = (0, _compose.useInstanceId)(ToggleGroupControl, 'toggle-group-control');
+  const normalizedSize = __next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
   const cx = (0, _hooks.useCx)();
-  const classes = (0, _element.useMemo)(() => cx(styles.ToggleGroupControl({
+  const classes = (0, _element.useMemo)(() => cx(styles.toggleGroupControl({
     isBlock,
     isDeselectable,
-    size
-  }), isBlock && styles.block, className), [className, cx, isBlock, isDeselectable, size]);
+    size: normalizedSize
+  }), isBlock && styles.block, className), [className, cx, isBlock, isDeselectable, normalizedSize]);
   const MainControl = isDeselectable ? _asButtonGroup.ToggleGroupControlAsButtonGroup : _asRadioGroup.ToggleGroupControlAsRadioGroup;
-  return (0, _element.createElement)(_baseControl.default, {
+  return (0, _react.createElement)(_baseControl.default, {
     help: help,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom
-  }, !hideLabelFromVision && (0, _element.createElement)(styles.VisualLabelWrapper, null, (0, _element.createElement)(_baseControl.default.VisualLabel, null, label)), (0, _element.createElement)(MainControl, {
+  }, !hideLabelFromVision && (0, _react.createElement)(_styles.VisualLabelWrapper, null, (0, _react.createElement)(_baseControl.default.VisualLabel, null, label)), (0, _react.createElement)(MainControl, {
     ...otherProps,
-    children: children,
     className: classes,
     isAdaptiveWidth: isAdaptiveWidth,
     label: label,
     onChange: onChange,
     ref: forwardedRef,
-    size: size,
+    size: normalizedSize,
     value: value
-  }));
+  }, (0, _react.createElement)(_framerMotion.LayoutGroup, {
+    id: baseId
+  }, children)));
 }
 
 /**
@@ -91,8 +100,6 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
  * }
  * ```
  */
-const ToggleGroupControl = (0, _context.contextConnect)(UnconnectedToggleGroupControl, 'ToggleGroupControl');
-exports.ToggleGroupControl = ToggleGroupControl;
-var _default = ToggleGroupControl;
-exports.default = _default;
+const ToggleGroupControl = exports.ToggleGroupControl = (0, _context.contextConnect)(UnconnectedToggleGroupControl, 'ToggleGroupControl');
+var _default = exports.default = ToggleGroupControl;
 //# sourceMappingURL=component.js.map