@wordpress/components 32.0.1-next.ba3aee3a2.0 → 32.0.2-next.v.0

package/build/slot-fill/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/slot-fill/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseFill from './fill';\nimport BaseSlot from './slot';\nimport BubblesVirtuallyFill from './bubbles-virtually/fill';\nimport BubblesVirtuallySlot from './bubbles-virtually/slot';\nimport BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';\nimport SlotFillProvider from './provider';\nimport SlotFillContext from './bubbles-virtually/slot-fill-context';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport { default as useSlot } from './bubbles-virtually/use-slot';\nexport { default as useSlotFills } from './bubbles-virtually/use-slot-fills';\nexport function Fill(props) {\n  // We're adding both Fills here so they can register themselves before\n  // their respective slot has been registered. Only the Fill that has a slot\n  // will render. The other one will return null.\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(BaseFill, {\n      ...props\n    }), /*#__PURE__*/_jsx(BubblesVirtuallyFill, {\n      ...props\n    })]\n  });\n}\nexport function UnforwardedSlot(props, ref) {\n  const {\n    bubblesVirtually,\n    ...restProps\n  } = props;\n  if (bubblesVirtually) {\n    return /*#__PURE__*/_jsx(BubblesVirtuallySlot, {\n      ...restProps,\n      ref: ref\n    });\n  }\n  return /*#__PURE__*/_jsx(BaseSlot, {\n    ...restProps\n  });\n}\nexport const Slot = forwardRef(UnforwardedSlot);\nexport function Provider({\n  children,\n  passthrough = false\n}) {\n  const parent = useContext(SlotFillContext);\n  if (!parent.isDefault && passthrough) {\n    return /*#__PURE__*/_jsx(_Fragment, {\n      children: children\n    });\n  }\n  return /*#__PURE__*/_jsx(SlotFillProvider, {\n    children: /*#__PURE__*/_jsx(BubblesVirtuallySlotFillProvider, {\n      children: children\n    })\n  });\n}\nProvider.displayName = 'SlotFillProvider';\nexport function createSlotFill(key) {\n  const baseName = typeof key === 'symbol' ? key.description : key;\n  const FillComponent = props => /*#__PURE__*/_jsx(Fill, {\n    name: key,\n    ...props\n  });\n  FillComponent.displayName = `${baseName}Fill`;\n  const SlotComponent = props => /*#__PURE__*/_jsx(Slot, {\n    name: key,\n    ...props\n  });\n  SlotComponent.displayName = `${baseName}Slot`;\n  /**\n   * @deprecated 6.8.0\n   * Please use `slotFill.name` instead of `slotFill.Slot.__unstableName`.\n   */\n  SlotComponent.__unstableName = key;\n  return {\n    name: key,\n    Fill: FillComponent,\n    Slot: SlotComponent\n  };\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAAuC;AAKvC,kBAAqB;AACrB,kBAAqB;AACrB,IAAAA,eAAiC;AACjC,IAAAC,eAAiC;AACjC,gCAA6C;AAC7C,sBAA6B;AAC7B,+BAA4B;AAC5B,yBAAkE;AAClE,sBAAmC;AACnC,4BAAwC;AACjC,SAAS,KAAK,OAAO;AAI1B,SAAoB,uCAAAC,MAAM,mBAAAC,UAAW;AAAA,IACnC,UAAU,CAAc,uCAAAC,KAAK,YAAAC,SAAU;AAAA,MACrC,GAAG;AAAA,IACL,CAAC,GAAgB,uCAAAD,KAAK,aAAAE,SAAsB;AAAA,MAC1C,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,SAAS,gBAAgB,OAAO,KAAK;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,MAAI,kBAAkB;AACpB,WAAoB,uCAAAF,KAAK,aAAAG,SAAsB;AAAA,MAC7C,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AACA,SAAoB,uCAAAH,KAAK,YAAAI,SAAU;AAAA,IACjC,GAAG;AAAA,EACL,CAAC;AACH;AACO,IAAM,WAAO,2BAAW,eAAe;AACvC,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,cAAc;AAChB,GAAG;AACD,QAAM,aAAS,2BAAW,yBAAAC,OAAe;AACzC,MAAI,CAAC,OAAO,aAAa,aAAa;AACpC,WAAoB,uCAAAL,KAAK,mBAAAD,UAAW;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH;AACA,SAAoB,uCAAAC,KAAK,gBAAAM,SAAkB;AAAA,IACzC,UAAuB,uCAAAN,KAAK,0BAAAO,SAAkC;AAAA,MAC5D;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,cAAc;AAChB,SAAS,eAAe,KAAK;AAClC,QAAM,WAAW,OAAO,QAAQ,WAAW,IAAI,cAAc;AAC7D,QAAM,gBAAgB,WAAsB,uCAAAP,KAAK,MAAM;AAAA,IACrD,MAAM;AAAA,IACN,GAAG;AAAA,EACL,CAAC;AACD,gBAAc,cAAc,GAAG,QAAQ;AACvC,QAAM,gBAAgB,WAAsB,uCAAAA,KAAK,MAAM;AAAA,IACrD,MAAM;AAAA,IACN,GAAG;AAAA,EACL,CAAC;AACD,gBAAc,cAAc,GAAG,QAAQ;AAKvC,gBAAc,iBAAiB;AAC/B,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;",
-  "names": ["import_fill", "import_slot", "_jsxs", "_Fragment", "_jsx", "BaseFill", "BubblesVirtuallyFill", "BubblesVirtuallySlot", "BaseSlot", "SlotFillContext", "SlotFillProvider", "BubblesVirtuallySlotFillProvider"]
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Fill from './fill';\nimport BaseSlot from './slot';\nimport BubblesVirtuallySlot from './bubbles-virtually/slot';\nimport SlotFillProvider from './provider';\nimport SlotFillContext from './context';\nimport { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nexport { default as useSlot } from './bubbles-virtually/use-slot';\nexport { default as useSlotFills } from './bubbles-virtually/use-slot-fills';\nexport { Fill };\nexport const Slot = forwardRef((props, ref) => {\n  const {\n    bubblesVirtually,\n    ...restProps\n  } = props;\n  if (bubblesVirtually) {\n    return /*#__PURE__*/_jsx(BubblesVirtuallySlot, {\n      ...restProps,\n      ref: ref\n    });\n  }\n  return /*#__PURE__*/_jsx(BaseSlot, {\n    ...restProps\n  });\n});\nSlot.displayName = 'Slot';\nexport function Provider({\n  children,\n  passthrough = false\n}) {\n  const parent = useContext(SlotFillContext);\n  if (!parent.isDefault && passthrough) {\n    return /*#__PURE__*/_jsx(_Fragment, {\n      children: children\n    });\n  }\n  return /*#__PURE__*/_jsx(SlotFillProvider, {\n    children: children\n  });\n}\nProvider.displayName = 'SlotFillProvider';\nexport function createSlotFill(key) {\n  const baseName = typeof key === 'symbol' ? key.description : key;\n  const FillComponent = props => /*#__PURE__*/_jsx(Fill, {\n    name: key,\n    ...props\n  });\n  FillComponent.displayName = `${baseName}Fill`;\n  const SlotComponent = props => /*#__PURE__*/_jsx(Slot, {\n    name: key,\n    ...props\n  });\n  SlotComponent.displayName = `${baseName}Slot`;\n  /**\n   * @deprecated 6.8.0\n   * Please use `slotFill.name` instead of `slotFill.Slot.__unstableName`.\n   */\n  SlotComponent.__unstableName = key;\n  return {\n    name: key,\n    Fill: FillComponent,\n    Slot: SlotComponent\n  };\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAAuC;AAKvC,kBAAiB;AACjB,kBAAqB;AACrB,IAAAC,eAAiC;AACjC,sBAA6B;AAC7B,qBAA4B;AAC5B,yBAAmD;AACnD,sBAAmC;AACnC,4BAAwC;AAEjC,IAAM,WAAO,2BAAW,CAAC,OAAO,QAAQ;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,MAAI,kBAAkB;AACpB,WAAoB,uCAAAC,KAAK,aAAAC,SAAsB;AAAA,MAC7C,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AACA,SAAoB,uCAAAD,KAAK,YAAAE,SAAU;AAAA,IACjC,GAAG;AAAA,EACL,CAAC;AACH,CAAC;AACD,KAAK,cAAc;AACZ,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,cAAc;AAChB,GAAG;AACD,QAAM,aAAS,2BAAW,eAAAC,OAAe;AACzC,MAAI,CAAC,OAAO,aAAa,aAAa;AACpC,WAAoB,uCAAAH,KAAK,mBAAAI,UAAW;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH;AACA,SAAoB,uCAAAJ,KAAK,gBAAAK,SAAkB;AAAA,IACzC;AAAA,EACF,CAAC;AACH;AACA,SAAS,cAAc;AAChB,SAAS,eAAe,KAAK;AAClC,QAAM,WAAW,OAAO,QAAQ,WAAW,IAAI,cAAc;AAC7D,QAAM,gBAAgB,WAAsB,uCAAAL,KAAK,YAAAM,SAAM;AAAA,IACrD,MAAM;AAAA,IACN,GAAG;AAAA,EACL,CAAC;AACD,gBAAc,cAAc,GAAG,QAAQ;AACvC,QAAM,gBAAgB,WAAsB,uCAAAN,KAAK,MAAM;AAAA,IACrD,MAAM;AAAA,IACN,GAAG;AAAA,EACL,CAAC;AACD,gBAAc,cAAc,GAAG,QAAQ;AAKvC,gBAAc,iBAAiB;AAC/B,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;",
+  "names": ["Fill", "import_slot", "_jsx", "BubblesVirtuallySlot", "BaseSlot", "SlotFillContext", "_Fragment", "SlotFillProvider", "Fill"]
 }

package/build/slot-fill/provider.cjs

@@ -34,27 +34,45 @@ __export(provider_exports, {
   default: () => provider_default
 });
 module.exports = __toCommonJS(provider_exports);
+var import_compose = require("@wordpress/compose");
 var import_element = require("@wordpress/element");
+var import_is_shallow_equal = require("@wordpress/is-shallow-equal");
 var import_context = __toESM(require("./context.cjs"));
-var import_compose = require("@wordpress/compose");
 var import_jsx_runtime = require("react/jsx-runtime");
 function createSlotRegistry() {
   const slots = (0, import_compose.observableMap)();
   const fills = (0, import_compose.observableMap)();
-  function registerSlot(name, instance) {
-    slots.set(name, instance);
+  function registerSlot(name, slot) {
+    slots.set(name, slot);
   }
   function unregisterSlot(name, instance) {
-    if (slots.get(name) !== instance) {
+    const currentSlot = slots.get(name);
+    if (!currentSlot || currentSlot.instance !== instance) {
       return;
     }
     slots.delete(name);
   }
-  function registerFill(name, instance, children) {
-    fills.set(name, [...fills.get(name) || [], {
-      instance,
-      children
-    }]);
+  function updateSlot(name, slot) {
+    if (slot.type !== "portal") {
+      return;
+    }
+    const slotForName = slots.get(name);
+    if (!slotForName) {
+      return;
+    }
+    if (slotForName.type !== "portal") {
+      return;
+    }
+    if (slotForName.instance !== slot.instance) {
+      return;
+    }
+    if ((0, import_is_shallow_equal.isShallowEqual)(slotForName.fillProps, slot.fillProps)) {
+      return;
+    }
+    slots.set(name, slot);
+  }
+  function registerFill(name, fill) {
+    fills.set(name, [...fills.get(name) || [], fill]);
   }
   function unregisterFill(name, instance) {
     const fillsForName = fills.get(name);
@@ -63,24 +81,21 @@ function createSlotRegistry() {
     }
     fills.set(name, fillsForName.filter((fill) => fill.instance !== instance));
   }
-  function updateFill(name, instance, children) {
+  function updateFill(name, fill) {
     const fillsForName = fills.get(name);
     if (!fillsForName) {
       return;
     }
-    const fillForInstance = fillsForName.find((f) => f.instance === instance);
+    const fillForInstance = fillsForName.find((f) => f.instance === fill.instance);
     if (!fillForInstance) {
       return;
     }
-    if (fillForInstance.children === children) {
+    if (fillForInstance.children === fill.children) {
       return;
     }
     fills.set(name, fillsForName.map((f) => {
-      if (f.instance === instance) {
-        return {
-          instance,
-          children
-        };
+      if (f.instance === fill.instance) {
+        return fill;
       }
       return f;
     }));
@@ -90,6 +105,7 @@ function createSlotRegistry() {
     fills,
     registerSlot,
     unregisterSlot,
+    updateSlot,
     registerFill,
     unregisterFill,
     updateFill

package/build/slot-fill/provider.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/slot-fill/provider.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\nimport { observableMap } from '@wordpress/compose';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction createSlotRegistry() {\n  const slots = observableMap();\n  const fills = observableMap();\n  function registerSlot(name, instance) {\n    slots.set(name, instance);\n  }\n  function unregisterSlot(name, instance) {\n    // If a previous instance of a Slot by this name unmounts, do nothing,\n    // as the slot and its fills should only be removed for the current\n    // known instance.\n    if (slots.get(name) !== instance) {\n      return;\n    }\n    slots.delete(name);\n  }\n  function registerFill(name, instance, children) {\n    fills.set(name, [...(fills.get(name) || []), {\n      instance,\n      children\n    }]);\n  }\n  function unregisterFill(name, instance) {\n    const fillsForName = fills.get(name);\n    if (!fillsForName) {\n      return;\n    }\n    fills.set(name, fillsForName.filter(fill => fill.instance !== instance));\n  }\n  function updateFill(name, instance, children) {\n    const fillsForName = fills.get(name);\n    if (!fillsForName) {\n      return;\n    }\n    const fillForInstance = fillsForName.find(f => f.instance === instance);\n    if (!fillForInstance) {\n      return;\n    }\n    if (fillForInstance.children === children) {\n      return;\n    }\n    fills.set(name, fillsForName.map(f => {\n      if (f.instance === instance) {\n        // Replace with new record with updated `children`.\n        return {\n          instance,\n          children\n        };\n      }\n      return f;\n    }));\n  }\n  return {\n    slots,\n    fills,\n    registerSlot,\n    unregisterSlot,\n    registerFill,\n    unregisterFill,\n    updateFill\n  };\n}\nexport function SlotFillProvider({\n  children\n}) {\n  const [contextValue] = useState(createSlotRegistry);\n  return /*#__PURE__*/_jsx(SlotFillContext.Provider, {\n    value: contextValue,\n    children: children\n  });\n}\nexport default SlotFillProvider;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAyB;AAKzB,qBAA4B;AAC5B,qBAA8B;AAC9B,yBAA4B;AAC5B,SAAS,qBAAqB;AAC5B,QAAM,YAAQ,8BAAc;AAC5B,QAAM,YAAQ,8BAAc;AAC5B,WAAS,aAAa,MAAM,UAAU;AACpC,UAAM,IAAI,MAAM,QAAQ;AAAA,EAC1B;AACA,WAAS,eAAe,MAAM,UAAU;AAItC,QAAI,MAAM,IAAI,IAAI,MAAM,UAAU;AAChC;AAAA,IACF;AACA,UAAM,OAAO,IAAI;AAAA,EACnB;AACA,WAAS,aAAa,MAAM,UAAU,UAAU;AAC9C,UAAM,IAAI,MAAM,CAAC,GAAI,MAAM,IAAI,IAAI,KAAK,CAAC,GAAI;AAAA,MAC3C;AAAA,MACA;AAAA,IACF,CAAC,CAAC;AAAA,EACJ;AACA,WAAS,eAAe,MAAM,UAAU;AACtC,UAAM,eAAe,MAAM,IAAI,IAAI;AACnC,QAAI,CAAC,cAAc;AACjB;AAAA,IACF;AACA,UAAM,IAAI,MAAM,aAAa,OAAO,UAAQ,KAAK,aAAa,QAAQ,CAAC;AAAA,EACzE;AACA,WAAS,WAAW,MAAM,UAAU,UAAU;AAC5C,UAAM,eAAe,MAAM,IAAI,IAAI;AACnC,QAAI,CAAC,cAAc;AACjB;AAAA,IACF;AACA,UAAM,kBAAkB,aAAa,KAAK,OAAK,EAAE,aAAa,QAAQ;AACtE,QAAI,CAAC,iBAAiB;AACpB;AAAA,IACF;AACA,QAAI,gBAAgB,aAAa,UAAU;AACzC;AAAA,IACF;AACA,UAAM,IAAI,MAAM,aAAa,IAAI,OAAK;AACpC,UAAI,EAAE,aAAa,UAAU;AAE3B,eAAO;AAAA,UACL;AAAA,UACA;AAAA,QACF;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC,CAAC;AAAA,EACJ;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AACO,SAAS,iBAAiB;AAAA,EAC/B;AACF,GAAG;AACD,QAAM,CAAC,YAAY,QAAI,yBAAS,kBAAkB;AAClD,SAAoB,uCAAAA,KAAK,eAAAC,QAAgB,UAAU;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACA,IAAO,mBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { observableMap } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { isShallowEqual } from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction createSlotRegistry() {\n  const slots = observableMap();\n  const fills = observableMap();\n  function registerSlot(name, slot) {\n    slots.set(name, slot);\n  }\n  function unregisterSlot(name, instance) {\n    // If a previous instance of a Slot by this name unmounts, do nothing,\n    // as the slot and its fills should only be removed for the current\n    // known instance.\n    const currentSlot = slots.get(name);\n    if (!currentSlot || currentSlot.instance !== instance) {\n      return;\n    }\n    slots.delete(name);\n  }\n  function updateSlot(name, slot) {\n    if (slot.type !== 'portal') {\n      return;\n    }\n    const slotForName = slots.get(name);\n    if (!slotForName) {\n      return;\n    }\n    if (slotForName.type !== 'portal') {\n      return;\n    }\n    if (slotForName.instance !== slot.instance) {\n      return;\n    }\n    if (isShallowEqual(slotForName.fillProps, slot.fillProps)) {\n      return;\n    }\n    slots.set(name, slot);\n  }\n  function registerFill(name, fill) {\n    fills.set(name, [...(fills.get(name) || []), fill]);\n  }\n  function unregisterFill(name, instance) {\n    const fillsForName = fills.get(name);\n    if (!fillsForName) {\n      return;\n    }\n    fills.set(name, fillsForName.filter(fill => fill.instance !== instance));\n  }\n  function updateFill(name, fill) {\n    const fillsForName = fills.get(name);\n    if (!fillsForName) {\n      return;\n    }\n    const fillForInstance = fillsForName.find(f => f.instance === fill.instance);\n    if (!fillForInstance) {\n      return;\n    }\n    if (fillForInstance.children === fill.children) {\n      return;\n    }\n    fills.set(name, fillsForName.map(f => {\n      if (f.instance === fill.instance) {\n        // Replace with the new fill record with updated `children`.\n        return fill;\n      }\n      return f;\n    }));\n  }\n  return {\n    slots,\n    fills,\n    registerSlot,\n    unregisterSlot,\n    updateSlot,\n    registerFill,\n    unregisterFill,\n    updateFill\n  };\n}\nexport function SlotFillProvider({\n  children\n}) {\n  const [contextValue] = useState(createSlotRegistry);\n  return /*#__PURE__*/_jsx(SlotFillContext.Provider, {\n    value: contextValue,\n    children: children\n  });\n}\nexport default SlotFillProvider;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAC9B,qBAAyB;AACzB,8BAA+B;AAK/B,qBAA4B;AAC5B,yBAA4B;AAC5B,SAAS,qBAAqB;AAC5B,QAAM,YAAQ,8BAAc;AAC5B,QAAM,YAAQ,8BAAc;AAC5B,WAAS,aAAa,MAAM,MAAM;AAChC,UAAM,IAAI,MAAM,IAAI;AAAA,EACtB;AACA,WAAS,eAAe,MAAM,UAAU;AAItC,UAAM,cAAc,MAAM,IAAI,IAAI;AAClC,QAAI,CAAC,eAAe,YAAY,aAAa,UAAU;AACrD;AAAA,IACF;AACA,UAAM,OAAO,IAAI;AAAA,EACnB;AACA,WAAS,WAAW,MAAM,MAAM;AAC9B,QAAI,KAAK,SAAS,UAAU;AAC1B;AAAA,IACF;AACA,UAAM,cAAc,MAAM,IAAI,IAAI;AAClC,QAAI,CAAC,aAAa;AAChB;AAAA,IACF;AACA,QAAI,YAAY,SAAS,UAAU;AACjC;AAAA,IACF;AACA,QAAI,YAAY,aAAa,KAAK,UAAU;AAC1C;AAAA,IACF;AACA,YAAI,wCAAe,YAAY,WAAW,KAAK,SAAS,GAAG;AACzD;AAAA,IACF;AACA,UAAM,IAAI,MAAM,IAAI;AAAA,EACtB;AACA,WAAS,aAAa,MAAM,MAAM;AAChC,UAAM,IAAI,MAAM,CAAC,GAAI,MAAM,IAAI,IAAI,KAAK,CAAC,GAAI,IAAI,CAAC;AAAA,EACpD;AACA,WAAS,eAAe,MAAM,UAAU;AACtC,UAAM,eAAe,MAAM,IAAI,IAAI;AACnC,QAAI,CAAC,cAAc;AACjB;AAAA,IACF;AACA,UAAM,IAAI,MAAM,aAAa,OAAO,UAAQ,KAAK,aAAa,QAAQ,CAAC;AAAA,EACzE;AACA,WAAS,WAAW,MAAM,MAAM;AAC9B,UAAM,eAAe,MAAM,IAAI,IAAI;AACnC,QAAI,CAAC,cAAc;AACjB;AAAA,IACF;AACA,UAAM,kBAAkB,aAAa,KAAK,OAAK,EAAE,aAAa,KAAK,QAAQ;AAC3E,QAAI,CAAC,iBAAiB;AACpB;AAAA,IACF;AACA,QAAI,gBAAgB,aAAa,KAAK,UAAU;AAC9C;AAAA,IACF;AACA,UAAM,IAAI,MAAM,aAAa,IAAI,OAAK;AACpC,UAAI,EAAE,aAAa,KAAK,UAAU;AAEhC,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT,CAAC,CAAC;AAAA,EACJ;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AACO,SAAS,iBAAiB;AAAA,EAC/B;AACF,GAAG;AACD,QAAM,CAAC,YAAY,QAAI,yBAAS,kBAAkB;AAClD,SAAoB,uCAAAA,KAAK,eAAAC,QAAgB,UAAU;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACA,IAAO,mBAAQ;",
   "names": ["_jsx", "SlotFillContext"]
 }

package/build/slot-fill/slot.cjs

@@ -56,21 +56,24 @@ function addKeysToChildren(children) {
 }
 function Slot(props) {
   var _useObservableValue;
-  const registry = (0, import_element.useContext)(import_context.default);
-  const instanceRef = (0, import_element.useRef)({});
   const {
     name,
     children,
     fillProps = {}
   } = props;
+  const registry = (0, import_element.useContext)(import_context.default);
+  const instanceRef = (0, import_element.useRef)({});
   (0, import_element.useLayoutEffect)(() => {
     const instance = instanceRef.current;
-    registry.registerSlot(name, instance);
+    registry.registerSlot(name, {
+      type: "children",
+      instance
+    });
     return () => registry.unregisterSlot(name, instance);
   }, [registry, name]);
   let fills = (_useObservableValue = (0, import_compose.useObservableValue)(registry.fills, name)) !== null && _useObservableValue !== void 0 ? _useObservableValue : [];
   const currentSlot = (0, import_compose.useObservableValue)(registry.slots, name);
-  if (currentSlot !== instanceRef.current) {
+  if (!currentSlot || currentSlot.instance !== instanceRef.current) {
     fills = [];
   }
   const renderedFills = fills.map((fill) => {

package/build/slot-fill/slot.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/slot-fill/slot.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useObservableValue } from '@wordpress/compose';\nimport { useContext, useLayoutEffect, useRef, Children, cloneElement, isEmptyElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\nimport { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Whether the argument is a function.\n *\n * @param maybeFunc The argument to check.\n * @return True if the argument is a function, false otherwise.\n */\nfunction isFunction(maybeFunc) {\n  return typeof maybeFunc === 'function';\n}\nfunction addKeysToChildren(children) {\n  return Children.map(children, (child, childIndex) => {\n    if (!child || typeof child === 'string') {\n      return child;\n    }\n    let childKey = childIndex;\n    if (typeof child === 'object' && 'key' in child && child?.key) {\n      childKey = child.key;\n    }\n    return cloneElement(child, {\n      key: childKey\n    });\n  });\n}\nfunction Slot(props) {\n  var _useObservableValue;\n  const registry = useContext(SlotFillContext);\n  const instanceRef = useRef({});\n  const {\n    name,\n    children,\n    fillProps = {}\n  } = props;\n  useLayoutEffect(() => {\n    const instance = instanceRef.current;\n    registry.registerSlot(name, instance);\n    return () => registry.unregisterSlot(name, instance);\n  }, [registry, name]);\n  let fills = (_useObservableValue = useObservableValue(registry.fills, name)) !== null && _useObservableValue !== void 0 ? _useObservableValue : [];\n  const currentSlot = useObservableValue(registry.slots, name);\n\n  // Fills should only be rendered in the currently registered instance of the slot.\n  if (currentSlot !== instanceRef.current) {\n    fills = [];\n  }\n  const renderedFills = fills.map(fill => {\n    const fillChildren = isFunction(fill.children) ? fill.children(fillProps) : fill.children;\n    return addKeysToChildren(fillChildren);\n  }).filter(\n  // In some cases fills are rendered only when some conditions apply.\n  // This ensures that we only use non-empty fills when rendering, i.e.,\n  // it allows us to render wrappers only when the fills are actually present.\n  element => !isEmptyElement(element));\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: isFunction(children) ? children(renderedFills) : renderedFills\n  });\n}\nexport default Slot;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAAmC;AACnC,qBAA4F;AAK5F,qBAA4B;AAC5B,yBAAmD;AAOnD,SAAS,WAAW,WAAW;AAC7B,SAAO,OAAO,cAAc;AAC9B;AACA,SAAS,kBAAkB,UAAU;AACnC,SAAO,wBAAS,IAAI,UAAU,CAAC,OAAO,eAAe;AACnD,QAAI,CAAC,SAAS,OAAO,UAAU,UAAU;AACvC,aAAO;AAAA,IACT;AACA,QAAI,WAAW;AACf,QAAI,OAAO,UAAU,YAAY,SAAS,SAAS,OAAO,KAAK;AAC7D,iBAAW,MAAM;AAAA,IACnB;AACA,eAAO,6BAAa,OAAO;AAAA,MACzB,KAAK;AAAA,IACP,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,KAAK,OAAO;AACnB,MAAI;AACJ,QAAM,eAAW,2BAAW,eAAAA,OAAe;AAC3C,QAAM,kBAAc,uBAAO,CAAC,CAAC;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY,CAAC;AAAA,EACf,IAAI;AACJ,sCAAgB,MAAM;AACpB,UAAM,WAAW,YAAY;AAC7B,aAAS,aAAa,MAAM,QAAQ;AACpC,WAAO,MAAM,SAAS,eAAe,MAAM,QAAQ;AAAA,EACrD,GAAG,CAAC,UAAU,IAAI,CAAC;AACnB,MAAI,SAAS,0BAAsB,mCAAmB,SAAS,OAAO,IAAI,OAAO,QAAQ,wBAAwB,SAAS,sBAAsB,CAAC;AACjJ,QAAM,kBAAc,mCAAmB,SAAS,OAAO,IAAI;AAG3D,MAAI,gBAAgB,YAAY,SAAS;AACvC,YAAQ,CAAC;AAAA,EACX;AACA,QAAM,gBAAgB,MAAM,IAAI,UAAQ;AACtC,UAAM,eAAe,WAAW,KAAK,QAAQ,IAAI,KAAK,SAAS,SAAS,IAAI,KAAK;AACjF,WAAO,kBAAkB,YAAY;AAAA,EACvC,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA,IAIH,aAAW,KAAC,+BAAe,OAAO;AAAA,EAAC;AACnC,SAAoB,uCAAAC,KAAK,mBAAAC,UAAW;AAAA,IAClC,UAAU,WAAW,QAAQ,IAAI,SAAS,aAAa,IAAI;AAAA,EAC7D,CAAC;AACH;AACA,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useObservableValue } from '@wordpress/compose';\nimport { useContext, useLayoutEffect, useRef, Children, cloneElement, isEmptyElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './context';\nimport { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Whether the argument is a function.\n *\n * @param maybeFunc The argument to check.\n * @return True if the argument is a function, false otherwise.\n */\nfunction isFunction(maybeFunc) {\n  return typeof maybeFunc === 'function';\n}\nfunction addKeysToChildren(children) {\n  return Children.map(children, (child, childIndex) => {\n    if (!child || typeof child === 'string') {\n      return child;\n    }\n    let childKey = childIndex;\n    if (typeof child === 'object' && 'key' in child && child?.key) {\n      childKey = child.key;\n    }\n    return cloneElement(child, {\n      key: childKey\n    });\n  });\n}\nfunction Slot(props) {\n  var _useObservableValue;\n  const {\n    name,\n    children,\n    fillProps = {}\n  } = props;\n  const registry = useContext(SlotFillContext);\n  const instanceRef = useRef({});\n  useLayoutEffect(() => {\n    const instance = instanceRef.current;\n    registry.registerSlot(name, {\n      type: 'children',\n      instance\n    });\n    return () => registry.unregisterSlot(name, instance);\n  }, [registry, name]);\n  let fills = (_useObservableValue = useObservableValue(registry.fills, name)) !== null && _useObservableValue !== void 0 ? _useObservableValue : [];\n  const currentSlot = useObservableValue(registry.slots, name);\n\n  // Fills should only be rendered in the currently registered instance of the slot.\n  if (!currentSlot || currentSlot.instance !== instanceRef.current) {\n    fills = [];\n  }\n  const renderedFills = fills.map(fill => {\n    const fillChildren = isFunction(fill.children) ? fill.children(fillProps) : fill.children;\n    return addKeysToChildren(fillChildren);\n  }).filter(\n  // In some cases fills are rendered only when some conditions apply.\n  // This ensures that we only use non-empty fills when rendering, i.e.,\n  // it allows us to render wrappers only when the fills are actually present.\n  element => !isEmptyElement(element));\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: isFunction(children) ? children(renderedFills) : renderedFills\n  });\n}\nexport default Slot;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAAmC;AACnC,qBAA4F;AAK5F,qBAA4B;AAC5B,yBAAmD;AAOnD,SAAS,WAAW,WAAW;AAC7B,SAAO,OAAO,cAAc;AAC9B;AACA,SAAS,kBAAkB,UAAU;AACnC,SAAO,wBAAS,IAAI,UAAU,CAAC,OAAO,eAAe;AACnD,QAAI,CAAC,SAAS,OAAO,UAAU,UAAU;AACvC,aAAO;AAAA,IACT;AACA,QAAI,WAAW;AACf,QAAI,OAAO,UAAU,YAAY,SAAS,SAAS,OAAO,KAAK;AAC7D,iBAAW,MAAM;AAAA,IACnB;AACA,eAAO,6BAAa,OAAO;AAAA,MACzB,KAAK;AAAA,IACP,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,KAAK,OAAO;AACnB,MAAI;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY,CAAC;AAAA,EACf,IAAI;AACJ,QAAM,eAAW,2BAAW,eAAAA,OAAe;AAC3C,QAAM,kBAAc,uBAAO,CAAC,CAAC;AAC7B,sCAAgB,MAAM;AACpB,UAAM,WAAW,YAAY;AAC7B,aAAS,aAAa,MAAM;AAAA,MAC1B,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AACD,WAAO,MAAM,SAAS,eAAe,MAAM,QAAQ;AAAA,EACrD,GAAG,CAAC,UAAU,IAAI,CAAC;AACnB,MAAI,SAAS,0BAAsB,mCAAmB,SAAS,OAAO,IAAI,OAAO,QAAQ,wBAAwB,SAAS,sBAAsB,CAAC;AACjJ,QAAM,kBAAc,mCAAmB,SAAS,OAAO,IAAI;AAG3D,MAAI,CAAC,eAAe,YAAY,aAAa,YAAY,SAAS;AAChE,YAAQ,CAAC;AAAA,EACX;AACA,QAAM,gBAAgB,MAAM,IAAI,UAAQ;AACtC,UAAM,eAAe,WAAW,KAAK,QAAQ,IAAI,KAAK,SAAS,SAAS,IAAI,KAAK;AACjF,WAAO,kBAAkB,YAAY;AAAA,EACvC,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA,IAIH,aAAW,KAAC,+BAAe,OAAO;AAAA,EAAC;AACnC,SAAoB,uCAAAC,KAAK,mBAAAC,UAAW;AAAA,IAClC,UAAU,WAAW,QAAQ,IAAI,SAAS,aAAa,IAAI;AAAA,EAC7D,CAAC;AACH;AACA,IAAO,eAAQ;",
   "names": ["SlotFillContext", "_jsx", "_Fragment"]
 }

package/build/snackbar/index.cjs

@@ -155,6 +155,7 @@ function UnforwardedSnackbar({
   });
 }
 var Snackbar = (0, import_element.forwardRef)(UnforwardedSnackbar);
+Snackbar.displayName = "Snackbar";
 var snackbar_default = Snackbar;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/snackbar/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/snackbar/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, useLayoutEffect, useRef, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ExternalLink from '../external-link';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst NOTICE_TIMEOUT = 6000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param message    Message to announce.\n * @param politeness Politeness to announce.\n */\nfunction useSpokenMessage(message, politeness) {\n  const spokenMessage = typeof message === 'string' ? message : renderToString(message);\n  useEffect(() => {\n    if (spokenMessage) {\n      speak(spokenMessage, politeness);\n    }\n  }, [spokenMessage, politeness]);\n}\nfunction UnforwardedSnackbar({\n  className,\n  children,\n  spokenMessage = children,\n  politeness = 'polite',\n  actions = [],\n  onRemove,\n  icon = null,\n  explicitDismiss = false,\n  // onDismiss is a callback executed when the snackbar is dismissed.\n  // It is distinct from onRemove, which _looks_ like a callback but is\n  // actually the function to call to remove the snackbar from the UI.\n  onDismiss,\n  listRef\n}, ref) {\n  function dismissMe(event) {\n    if (event && event.preventDefault) {\n      event.preventDefault();\n    }\n\n    // Prevent focus loss by moving it to the list element.\n    listRef?.current?.focus();\n    onDismiss?.();\n    onRemove?.();\n  }\n  function onActionClick(event, onClick) {\n    event.stopPropagation();\n    onRemove?.();\n    if (onClick) {\n      onClick(event);\n    }\n  }\n  useSpokenMessage(spokenMessage, politeness);\n\n  // The `onDismiss/onRemove` can have unstable references,\n  // trigger side-effect cleanup, and reset timers.\n  const callbacksRef = useRef({\n    onDismiss,\n    onRemove\n  });\n  useLayoutEffect(() => {\n    callbacksRef.current = {\n      onDismiss,\n      onRemove\n    };\n  });\n  useEffect(() => {\n    // Only set up the timeout dismiss if we're not explicitly dismissing.\n    const timeoutHandle = setTimeout(() => {\n      if (!explicitDismiss) {\n        callbacksRef.current.onDismiss?.();\n        callbacksRef.current.onRemove?.();\n      }\n    }, NOTICE_TIMEOUT);\n    return () => clearTimeout(timeoutHandle);\n  }, [explicitDismiss]);\n  const classes = clsx(className, 'components-snackbar', {\n    'components-snackbar-explicit-dismiss': !!explicitDismiss\n  });\n  if (actions && actions.length > 1) {\n    // We need to inform developers that snackbar only accepts 1 action.\n    globalThis.SCRIPT_DEBUG === true ? warning('Snackbar can only have one action. Use Notice if your message requires many actions.') : void 0;\n    // return first element only while keeping it inside an array\n    actions = [actions[0]];\n  }\n  const snackbarContentClassnames = clsx('components-snackbar__content', {\n    'components-snackbar__content-with-icon': !!icon\n  });\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: ref,\n    className: classes,\n    onClick: !explicitDismiss ? dismissMe : undefined,\n    tabIndex: 0,\n    role: !explicitDismiss ? 'button' : undefined,\n    onKeyPress: !explicitDismiss ? dismissMe : undefined,\n    \"aria-label\": !explicitDismiss ? __('Dismiss this notice') : undefined,\n    \"data-testid\": \"snackbar\",\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: snackbarContentClassnames,\n      children: [icon && /*#__PURE__*/_jsx(\"div\", {\n        className: \"components-snackbar__icon\",\n        children: icon\n      }), children, actions.map(({\n        label,\n        onClick,\n        url,\n        openInNewTab = false\n      }, index) => url !== undefined && openInNewTab ? /*#__PURE__*/_jsx(ExternalLink, {\n        href: url,\n        onClick: event => onActionClick(event, onClick),\n        className: \"components-snackbar__action\",\n        children: label\n      }, index) : /*#__PURE__*/_jsx(Button, {\n        __next40pxDefaultSize: true,\n        href: url,\n        variant: \"link\",\n        onClick: event => onActionClick(event, onClick),\n        className: \"components-snackbar__action\",\n        children: label\n      }, index)), explicitDismiss && /*#__PURE__*/_jsx(\"span\", {\n        role: \"button\",\n        \"aria-label\": __('Dismiss this notice'),\n        tabIndex: 0,\n        className: \"components-snackbar__dismiss-button\",\n        onClick: dismissMe,\n        onKeyPress: dismissMe,\n        children: \"\\u2715\"\n      })]\n    })\n  });\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n *   <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef(UnforwardedSnackbar);\nexport default Snackbar;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, useLayoutEffect, useRef, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ExternalLink from '../external-link';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst NOTICE_TIMEOUT = 6000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param message    Message to announce.\n * @param politeness Politeness to announce.\n */\nfunction useSpokenMessage(message, politeness) {\n  const spokenMessage = typeof message === 'string' ? message : renderToString(message);\n  useEffect(() => {\n    if (spokenMessage) {\n      speak(spokenMessage, politeness);\n    }\n  }, [spokenMessage, politeness]);\n}\nfunction UnforwardedSnackbar({\n  className,\n  children,\n  spokenMessage = children,\n  politeness = 'polite',\n  actions = [],\n  onRemove,\n  icon = null,\n  explicitDismiss = false,\n  // onDismiss is a callback executed when the snackbar is dismissed.\n  // It is distinct from onRemove, which _looks_ like a callback but is\n  // actually the function to call to remove the snackbar from the UI.\n  onDismiss,\n  listRef\n}, ref) {\n  function dismissMe(event) {\n    if (event && event.preventDefault) {\n      event.preventDefault();\n    }\n\n    // Prevent focus loss by moving it to the list element.\n    listRef?.current?.focus();\n    onDismiss?.();\n    onRemove?.();\n  }\n  function onActionClick(event, onClick) {\n    event.stopPropagation();\n    onRemove?.();\n    if (onClick) {\n      onClick(event);\n    }\n  }\n  useSpokenMessage(spokenMessage, politeness);\n\n  // The `onDismiss/onRemove` can have unstable references,\n  // trigger side-effect cleanup, and reset timers.\n  const callbacksRef = useRef({\n    onDismiss,\n    onRemove\n  });\n  useLayoutEffect(() => {\n    callbacksRef.current = {\n      onDismiss,\n      onRemove\n    };\n  });\n  useEffect(() => {\n    // Only set up the timeout dismiss if we're not explicitly dismissing.\n    const timeoutHandle = setTimeout(() => {\n      if (!explicitDismiss) {\n        callbacksRef.current.onDismiss?.();\n        callbacksRef.current.onRemove?.();\n      }\n    }, NOTICE_TIMEOUT);\n    return () => clearTimeout(timeoutHandle);\n  }, [explicitDismiss]);\n  const classes = clsx(className, 'components-snackbar', {\n    'components-snackbar-explicit-dismiss': !!explicitDismiss\n  });\n  if (actions && actions.length > 1) {\n    // We need to inform developers that snackbar only accepts 1 action.\n    globalThis.SCRIPT_DEBUG === true ? warning('Snackbar can only have one action. Use Notice if your message requires many actions.') : void 0;\n    // return first element only while keeping it inside an array\n    actions = [actions[0]];\n  }\n  const snackbarContentClassnames = clsx('components-snackbar__content', {\n    'components-snackbar__content-with-icon': !!icon\n  });\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: ref,\n    className: classes,\n    onClick: !explicitDismiss ? dismissMe : undefined,\n    tabIndex: 0,\n    role: !explicitDismiss ? 'button' : undefined,\n    onKeyPress: !explicitDismiss ? dismissMe : undefined,\n    \"aria-label\": !explicitDismiss ? __('Dismiss this notice') : undefined,\n    \"data-testid\": \"snackbar\",\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: snackbarContentClassnames,\n      children: [icon && /*#__PURE__*/_jsx(\"div\", {\n        className: \"components-snackbar__icon\",\n        children: icon\n      }), children, actions.map(({\n        label,\n        onClick,\n        url,\n        openInNewTab = false\n      }, index) => url !== undefined && openInNewTab ? /*#__PURE__*/_jsx(ExternalLink, {\n        href: url,\n        onClick: event => onActionClick(event, onClick),\n        className: \"components-snackbar__action\",\n        children: label\n      }, index) : /*#__PURE__*/_jsx(Button, {\n        __next40pxDefaultSize: true,\n        href: url,\n        variant: \"link\",\n        onClick: event => onActionClick(event, onClick),\n        className: \"components-snackbar__action\",\n        children: label\n      }, index)), explicitDismiss && /*#__PURE__*/_jsx(\"span\", {\n        role: \"button\",\n        \"aria-label\": __('Dismiss this notice'),\n        tabIndex: 0,\n        className: \"components-snackbar__dismiss-button\",\n        onClick: dismissMe,\n        onKeyPress: dismissMe,\n        children: \"\\u2715\"\n      })]\n    })\n  });\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n *   <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef(UnforwardedSnackbar);\nSnackbar.displayName = 'Snackbar';\nexport default Snackbar;"],
+  "mappings": "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",
   "names": ["clsx", "warning", "_jsx", "_jsxs", "ExternalLink", "Button"]
 }

package/build/spinner/index.cjs

@@ -65,6 +65,7 @@ function UnforwardedSpinner({
   });
 }
 var Spinner = (0, import_element.forwardRef)(UnforwardedSpinner);
+Spinner.displayName = "Spinner";
 var spinner_default = Spinner;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/spinner/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/spinner/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * Internal dependencies\n */\nimport { StyledSpinner, SpinnerTrack, SpinnerIndicator } from './styles';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function UnforwardedSpinner({\n  className,\n  ...props\n}, forwardedRef) {\n  return /*#__PURE__*/_jsxs(StyledSpinner, {\n    className: clsx('components-spinner', className),\n    viewBox: \"0 0 100 100\",\n    width: \"16\",\n    height: \"16\",\n    xmlns: \"http://www.w3.org/2000/svg\",\n    role: \"presentation\",\n    focusable: \"false\",\n    ...props,\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(SpinnerTrack, {\n      cx: \"50\",\n      cy: \"50\",\n      r: \"50\",\n      vectorEffect: \"non-scaling-stroke\"\n    }), /*#__PURE__*/_jsx(SpinnerIndicator, {\n      d: \"m 50 0 a 50 50 0 0 1 50 50\",\n      vectorEffect: \"non-scaling-stroke\"\n    })]\n  });\n}\n/**\n * `Spinner` is a component used to notify users that their action is being processed.\n *\n * ```jsx\n * import { Spinner } from '@wordpress/components';\n *\n * function Example() {\n * \treturn <Spinner />;\n * }\n * ```\n */\nexport const Spinner = forwardRef(UnforwardedSpinner);\nexport default Spinner;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,oBAA8D;AAI9D,qBAA2B;AAC3B,yBAA2C;AACpC,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,SAAoB,uCAAAA,MAAM,6BAAe;AAAA,IACvC,eAAW,YAAAC,SAAK,sBAAsB,SAAS;AAAA,IAC/C,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,GAAG;AAAA,IACH,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAC,KAAK,4BAAc;AAAA,MACzC,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,GAAG;AAAA,MACH,cAAc;AAAA,IAChB,CAAC,GAAgB,uCAAAA,KAAK,gCAAkB;AAAA,MACtC,GAAG;AAAA,MACH,cAAc;AAAA,IAChB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAYO,IAAM,cAAU,2BAAW,kBAAkB;AACpD,IAAO,kBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * Internal dependencies\n */\nimport { StyledSpinner, SpinnerTrack, SpinnerIndicator } from './styles';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function UnforwardedSpinner({\n  className,\n  ...props\n}, forwardedRef) {\n  return /*#__PURE__*/_jsxs(StyledSpinner, {\n    className: clsx('components-spinner', className),\n    viewBox: \"0 0 100 100\",\n    width: \"16\",\n    height: \"16\",\n    xmlns: \"http://www.w3.org/2000/svg\",\n    role: \"presentation\",\n    focusable: \"false\",\n    ...props,\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(SpinnerTrack, {\n      cx: \"50\",\n      cy: \"50\",\n      r: \"50\",\n      vectorEffect: \"non-scaling-stroke\"\n    }), /*#__PURE__*/_jsx(SpinnerIndicator, {\n      d: \"m 50 0 a 50 50 0 0 1 50 50\",\n      vectorEffect: \"non-scaling-stroke\"\n    })]\n  });\n}\n/**\n * `Spinner` is a component used to notify users that their action is being processed.\n *\n * ```jsx\n * import { Spinner } from '@wordpress/components';\n *\n * function Example() {\n * \treturn <Spinner />;\n * }\n * ```\n */\nexport const Spinner = forwardRef(UnforwardedSpinner);\nSpinner.displayName = 'Spinner';\nexport default Spinner;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,oBAA8D;AAI9D,qBAA2B;AAC3B,yBAA2C;AACpC,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,SAAoB,uCAAAA,MAAM,6BAAe;AAAA,IACvC,eAAW,YAAAC,SAAK,sBAAsB,SAAS;AAAA,IAC/C,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,GAAG;AAAA,IACH,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAC,KAAK,4BAAc;AAAA,MACzC,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,GAAG;AAAA,MACH,cAAc;AAAA,IAChB,CAAC,GAAgB,uCAAAA,KAAK,gCAAkB;AAAA,MACtC,GAAG;AAAA,MACH,cAAc;AAAA,IAChB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAYO,IAAM,cAAU,2BAAW,kBAAkB;AACpD,QAAQ,cAAc;AACtB,IAAO,kBAAQ;",
   "names": ["_jsxs", "clsx", "_jsx"]
 }

package/build/tab-panel/index.cjs

@@ -156,6 +156,7 @@ var UnforwardedTabPanel = ({
   });
 };
 var TabPanel2 = (0, import_element.forwardRef)(UnforwardedTabPanel);
+TabPanel2.displayName = "TabPanel";
 var tab_panel_default = TabPanel2;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/tab-panel/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab-panel/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect, useLayoutEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nimport Button from '../button';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// Separate the actual tab name from the instance ID. This is\n// necessary because Ariakit internally uses the element ID when\n// a new tab is selected, but our implementation looks specifically\n// for the tab name to be passed to the `onSelect` callback.\nconst extractTabName = id => {\n  if (typeof id === 'undefined' || id === null) {\n    return;\n  }\n  return id.match(/^tab-panel-[0-9]*-(.*)/)?.[1];\n};\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nconst UnforwardedTabPanel = ({\n  className,\n  children,\n  tabs,\n  selectOnMove = true,\n  initialTabName,\n  orientation = 'horizontal',\n  activeClass = 'is-active',\n  onSelect\n}, ref) => {\n  const instanceId = useInstanceId(TabPanel, 'tab-panel');\n  const prependInstanceId = useCallback(tabName => {\n    if (typeof tabName === 'undefined') {\n      return;\n    }\n    return `${instanceId}-${tabName}`;\n  }, [instanceId]);\n  const tabStore = Ariakit.useTabStore({\n    setSelectedId: newTabValue => {\n      if (typeof newTabValue === 'undefined' || newTabValue === null) {\n        return;\n      }\n      const newTab = tabs.find(t => prependInstanceId(t.name) === newTabValue);\n      if (newTab?.disabled || newTab === selectedTab) {\n        return;\n      }\n      const simplifiedTabName = extractTabName(newTabValue);\n      if (typeof simplifiedTabName === 'undefined') {\n        return;\n      }\n      onSelect?.(simplifiedTabName);\n    },\n    orientation,\n    selectOnMove,\n    defaultSelectedId: prependInstanceId(initialTabName),\n    rtl: isRTL()\n  });\n  const selectedTabName = extractTabName(Ariakit.useStoreState(tabStore, 'selectedId'));\n  const setTabStoreSelectedId = useCallback(tabName => {\n    tabStore.setState('selectedId', prependInstanceId(tabName));\n  }, [prependInstanceId, tabStore]);\n  const selectedTab = tabs.find(({\n    name\n  }) => name === selectedTabName);\n  const previousSelectedTabName = usePrevious(selectedTabName);\n\n  // Ensure `onSelect` is called when the initial tab is selected.\n  useEffect(() => {\n    if (previousSelectedTabName !== selectedTabName && selectedTabName === initialTabName && !!selectedTabName) {\n      onSelect?.(selectedTabName);\n    }\n  }, [selectedTabName, initialTabName, onSelect, previousSelectedTabName]);\n\n  // Handle selecting the initial tab.\n  useLayoutEffect(() => {\n    // If there's a selected tab, don't override it.\n    if (selectedTab) {\n      return;\n    }\n    const initialTab = tabs.find(tab => tab.name === initialTabName);\n    // Wait for the denoted initial tab to be declared before making a\n    // selection. This ensures that if a tab is declared lazily it can\n    // still receive initial selection.\n    if (initialTabName && !initialTab) {\n      return;\n    }\n    if (initialTab && !initialTab.disabled) {\n      // Select the initial tab if it's not disabled.\n      setTabStoreSelectedId(initialTab.name);\n    } else {\n      // Fallback to the first enabled tab when the initial tab is\n      // disabled or it can't be found.\n      const firstEnabledTab = tabs.find(tab => !tab.disabled);\n      if (firstEnabledTab) {\n        setTabStoreSelectedId(firstEnabledTab.name);\n      }\n    }\n  }, [tabs, selectedTab, initialTabName, instanceId, setTabStoreSelectedId]);\n\n  // Handle the currently selected tab becoming disabled.\n  useEffect(() => {\n    // This effect only runs when the selected tab is defined and becomes disabled.\n    if (!selectedTab?.disabled) {\n      return;\n    }\n    const firstEnabledTab = tabs.find(tab => !tab.disabled);\n    // If the currently selected tab becomes disabled, select the first enabled tab.\n    // (if there is one).\n    if (firstEnabledTab) {\n      setTabStoreSelectedId(firstEnabledTab.name);\n    }\n  }, [tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId]);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: ref,\n    children: [/*#__PURE__*/_jsx(Ariakit.TabList, {\n      store: tabStore,\n      className: \"components-tab-panel__tabs\",\n      children: tabs.map(tab => {\n        return /*#__PURE__*/_jsx(Ariakit.Tab, {\n          id: prependInstanceId(tab.name),\n          className: clsx('components-tab-panel__tabs-item', tab.className, {\n            [activeClass]: tab.name === selectedTabName\n          }),\n          disabled: tab.disabled,\n          \"aria-controls\": `${prependInstanceId(tab.name)}-view`,\n          render: /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            icon: tab.icon,\n            label: tab.icon && tab.title,\n            showTooltip: !!tab.icon\n          }),\n          children: !tab.icon && tab.title\n        }, tab.name);\n      })\n    }), selectedTab && /*#__PURE__*/_jsx(Ariakit.TabPanel, {\n      id: `${prependInstanceId(selectedTab.name)}-view`,\n      store: tabStore,\n      tabId: prependInstanceId(selectedTab.name),\n      className: \"components-tab-panel__tab-content\",\n      children: children(selectedTab)\n    })]\n  });\n};\nexport const TabPanel = forwardRef(UnforwardedTabPanel);\nexport default TabPanel;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect, useLayoutEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nimport Button from '../button';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// Separate the actual tab name from the instance ID. This is\n// necessary because Ariakit internally uses the element ID when\n// a new tab is selected, but our implementation looks specifically\n// for the tab name to be passed to the `onSelect` callback.\nconst extractTabName = id => {\n  if (typeof id === 'undefined' || id === null) {\n    return;\n  }\n  return id.match(/^tab-panel-[0-9]*-(.*)/)?.[1];\n};\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nconst UnforwardedTabPanel = ({\n  className,\n  children,\n  tabs,\n  selectOnMove = true,\n  initialTabName,\n  orientation = 'horizontal',\n  activeClass = 'is-active',\n  onSelect\n}, ref) => {\n  const instanceId = useInstanceId(TabPanel, 'tab-panel');\n  const prependInstanceId = useCallback(tabName => {\n    if (typeof tabName === 'undefined') {\n      return;\n    }\n    return `${instanceId}-${tabName}`;\n  }, [instanceId]);\n  const tabStore = Ariakit.useTabStore({\n    setSelectedId: newTabValue => {\n      if (typeof newTabValue === 'undefined' || newTabValue === null) {\n        return;\n      }\n      const newTab = tabs.find(t => prependInstanceId(t.name) === newTabValue);\n      if (newTab?.disabled || newTab === selectedTab) {\n        return;\n      }\n      const simplifiedTabName = extractTabName(newTabValue);\n      if (typeof simplifiedTabName === 'undefined') {\n        return;\n      }\n      onSelect?.(simplifiedTabName);\n    },\n    orientation,\n    selectOnMove,\n    defaultSelectedId: prependInstanceId(initialTabName),\n    rtl: isRTL()\n  });\n  const selectedTabName = extractTabName(Ariakit.useStoreState(tabStore, 'selectedId'));\n  const setTabStoreSelectedId = useCallback(tabName => {\n    tabStore.setState('selectedId', prependInstanceId(tabName));\n  }, [prependInstanceId, tabStore]);\n  const selectedTab = tabs.find(({\n    name\n  }) => name === selectedTabName);\n  const previousSelectedTabName = usePrevious(selectedTabName);\n\n  // Ensure `onSelect` is called when the initial tab is selected.\n  useEffect(() => {\n    if (previousSelectedTabName !== selectedTabName && selectedTabName === initialTabName && !!selectedTabName) {\n      onSelect?.(selectedTabName);\n    }\n  }, [selectedTabName, initialTabName, onSelect, previousSelectedTabName]);\n\n  // Handle selecting the initial tab.\n  useLayoutEffect(() => {\n    // If there's a selected tab, don't override it.\n    if (selectedTab) {\n      return;\n    }\n    const initialTab = tabs.find(tab => tab.name === initialTabName);\n    // Wait for the denoted initial tab to be declared before making a\n    // selection. This ensures that if a tab is declared lazily it can\n    // still receive initial selection.\n    if (initialTabName && !initialTab) {\n      return;\n    }\n    if (initialTab && !initialTab.disabled) {\n      // Select the initial tab if it's not disabled.\n      setTabStoreSelectedId(initialTab.name);\n    } else {\n      // Fallback to the first enabled tab when the initial tab is\n      // disabled or it can't be found.\n      const firstEnabledTab = tabs.find(tab => !tab.disabled);\n      if (firstEnabledTab) {\n        setTabStoreSelectedId(firstEnabledTab.name);\n      }\n    }\n  }, [tabs, selectedTab, initialTabName, instanceId, setTabStoreSelectedId]);\n\n  // Handle the currently selected tab becoming disabled.\n  useEffect(() => {\n    // This effect only runs when the selected tab is defined and becomes disabled.\n    if (!selectedTab?.disabled) {\n      return;\n    }\n    const firstEnabledTab = tabs.find(tab => !tab.disabled);\n    // If the currently selected tab becomes disabled, select the first enabled tab.\n    // (if there is one).\n    if (firstEnabledTab) {\n      setTabStoreSelectedId(firstEnabledTab.name);\n    }\n  }, [tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId]);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: ref,\n    children: [/*#__PURE__*/_jsx(Ariakit.TabList, {\n      store: tabStore,\n      className: \"components-tab-panel__tabs\",\n      children: tabs.map(tab => {\n        return /*#__PURE__*/_jsx(Ariakit.Tab, {\n          id: prependInstanceId(tab.name),\n          className: clsx('components-tab-panel__tabs-item', tab.className, {\n            [activeClass]: tab.name === selectedTabName\n          }),\n          disabled: tab.disabled,\n          \"aria-controls\": `${prependInstanceId(tab.name)}-view`,\n          render: /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            icon: tab.icon,\n            label: tab.icon && tab.title,\n            showTooltip: !!tab.icon\n          }),\n          children: !tab.icon && tab.title\n        }, tab.name);\n      })\n    }), selectedTab && /*#__PURE__*/_jsx(Ariakit.TabPanel, {\n      id: `${prependInstanceId(selectedTab.name)}-view`,\n      store: tabStore,\n      tabId: prependInstanceId(selectedTab.name),\n      className: \"components-tab-panel__tab-content\",\n      children: children(selectedTab)\n    })]\n  });\n};\nexport const TabPanel = forwardRef(UnforwardedTabPanel);\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;"],
+  "mappings": "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",
   "names": ["TabPanel", "_jsxs", "_jsx", "clsx", "Button"]
 }

package/build/text-control/index.cjs

@@ -83,6 +83,7 @@ function UnforwardedTextControl(props, ref) {
   });
 }
 var TextControl = (0, import_element.forwardRef)(UnforwardedTextControl);
+TextControl.displayName = "TextControl";
 var text_control_default = TextControl;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/text-control/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/text-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTextControl(props, ref) {\n  const {\n    // Prevent passing this to `input`.\n    __nextHasNoMarginBottom: _,\n    __next40pxDefaultSize = false,\n    label,\n    hideLabelFromVision,\n    value,\n    help,\n    id: idProp,\n    className,\n    onChange,\n    type = 'text',\n    ...additionalProps\n  } = props;\n  const id = useInstanceId(TextControl, 'inspector-text-control', idProp);\n  const onChangeValue = event => onChange(event.target.value);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'TextControl',\n    size: undefined,\n    __next40pxDefaultSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: id,\n    help: help,\n    className: className,\n    children: /*#__PURE__*/_jsx(\"input\", {\n      className: clsx('components-text-control__input', {\n        'is-next-40px-default-size': __next40pxDefaultSize\n      }),\n      type: type,\n      id: id,\n      value: value,\n      onChange: onChangeValue,\n      \"aria-describedby\": !!help ? id + '__help' : undefined,\n      ref: ref,\n      ...additionalProps\n    })\n  });\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n *   const [ className, setClassName ] = useState( '' );\n *\n *   return (\n *     <TextControl\n *       __next40pxDefaultSize\n *       label=\"Additional CSS Class\"\n *       value={ className }\n *       onChange={ ( value ) => setClassName( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextControl = forwardRef(UnforwardedTextControl);\nexport default TextControl;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,qBAA8B;AAC9B,qBAA2B;AAK3B,0BAAwB;AACxB,kCAA4C;AAC5C,yBAA4B;AAC5B,SAAS,uBAAuB,OAAO,KAAK;AAC1C,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAK,8BAAc,aAAa,0BAA0B,MAAM;AACtE,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,+DAA4B;AAAA,IAC1B,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAuB,uCAAAD,KAAK,SAAS;AAAA,MACnC,eAAW,YAAAE,SAAK,kCAAkC;AAAA,QAChD,6BAA6B;AAAA,MAC/B,CAAC;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,oBAAoB,CAAC,CAAC,OAAO,KAAK,WAAW;AAAA,MAC7C;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,kBAAc,2BAAW,sBAAsB;AAC5D,IAAO,uBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTextControl(props, ref) {\n  const {\n    // Prevent passing this to `input`.\n    __nextHasNoMarginBottom: _,\n    __next40pxDefaultSize = false,\n    label,\n    hideLabelFromVision,\n    value,\n    help,\n    id: idProp,\n    className,\n    onChange,\n    type = 'text',\n    ...additionalProps\n  } = props;\n  const id = useInstanceId(TextControl, 'inspector-text-control', idProp);\n  const onChangeValue = event => onChange(event.target.value);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'TextControl',\n    size: undefined,\n    __next40pxDefaultSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: id,\n    help: help,\n    className: className,\n    children: /*#__PURE__*/_jsx(\"input\", {\n      className: clsx('components-text-control__input', {\n        'is-next-40px-default-size': __next40pxDefaultSize\n      }),\n      type: type,\n      id: id,\n      value: value,\n      onChange: onChangeValue,\n      \"aria-describedby\": !!help ? id + '__help' : undefined,\n      ref: ref,\n      ...additionalProps\n    })\n  });\n}\n\n/**\n * TextControl components let users enter and edit text.\n *\n * ```jsx\n * import { TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextControl = () => {\n *   const [ className, setClassName ] = useState( '' );\n *\n *   return (\n *     <TextControl\n *       __next40pxDefaultSize\n *       label=\"Additional CSS Class\"\n *       value={ className }\n *       onChange={ ( value ) => setClassName( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextControl = forwardRef(UnforwardedTextControl);\nTextControl.displayName = 'TextControl';\nexport default TextControl;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,qBAA8B;AAC9B,qBAA2B;AAK3B,0BAAwB;AACxB,kCAA4C;AAC5C,yBAA4B;AAC5B,SAAS,uBAAuB,OAAO,KAAK;AAC1C,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAK,8BAAc,aAAa,0BAA0B,MAAM;AACtE,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,+DAA4B;AAAA,IAC1B,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAuB,uCAAAD,KAAK,SAAS;AAAA,MACnC,eAAW,YAAAE,SAAK,kCAAkC;AAAA,QAChD,6BAA6B;AAAA,MAC/B,CAAC;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,oBAAoB,CAAC,CAAC,OAAO,KAAK,WAAW;AAAA,MAC7C;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,kBAAc,2BAAW,sBAAsB;AAC5D,YAAY,cAAc;AAC1B,IAAO,uBAAQ;",
   "names": ["_jsx", "BaseControl", "clsx"]
 }

package/build/text-highlight/index.cjs

@@ -43,6 +43,7 @@ var TextHighlight = (props) => {
     mark: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("mark", {})
   });
 };
+TextHighlight.displayName = "TextHighlight";
 var text_highlight_default = TextHighlight;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/text-highlight/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/text-highlight/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { escapeRegExp } from '../utils/strings';\nimport { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Highlights occurrences of a given string within another string of text. Wraps\n * each match with a `<mark>` tag which provides browser default styling.\n *\n * ```jsx\n * import { TextHighlight } from '@wordpress/components';\n *\n * const MyTextHighlight = () => (\n *   <TextHighlight\n *     text=\"Why do we like Gutenberg? Because Gutenberg is the best!\"\n *     highlight=\"Gutenberg\"\n *   />\n * );\n * ```\n */\nexport const TextHighlight = props => {\n  const {\n    text = '',\n    highlight = ''\n  } = props;\n  const trimmedHighlightText = highlight.trim();\n  if (!trimmedHighlightText) {\n    return /*#__PURE__*/_jsx(_Fragment, {\n      children: text\n    });\n  }\n  const regex = new RegExp(`(${escapeRegExp(trimmedHighlightText)})`, 'gi');\n  return createInterpolateElement(text.replace(regex, '<mark>$&</mark>'), {\n    mark: /*#__PURE__*/_jsx(\"mark\", {})\n  });\n};\nexport default TextHighlight;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAyC;AAKzC,qBAA6B;AAC7B,yBAAmD;AAgB5C,IAAM,gBAAgB,WAAS;AACpC,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,EACd,IAAI;AACJ,QAAM,uBAAuB,UAAU,KAAK;AAC5C,MAAI,CAAC,sBAAsB;AACzB,WAAoB,uCAAAA,KAAK,mBAAAC,UAAW;AAAA,MAClC,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,QAAM,QAAQ,IAAI,OAAO,QAAI,6BAAa,oBAAoB,CAAC,KAAK,IAAI;AACxE,aAAO,yCAAyB,KAAK,QAAQ,OAAO,iBAAiB,GAAG;AAAA,IACtE,MAAmB,uCAAAD,KAAK,QAAQ,CAAC,CAAC;AAAA,EACpC,CAAC;AACH;AACA,IAAO,yBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { escapeRegExp } from '../utils/strings';\nimport { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Highlights occurrences of a given string within another string of text. Wraps\n * each match with a `<mark>` tag which provides browser default styling.\n *\n * ```jsx\n * import { TextHighlight } from '@wordpress/components';\n *\n * const MyTextHighlight = () => (\n *   <TextHighlight\n *     text=\"Why do we like Gutenberg? Because Gutenberg is the best!\"\n *     highlight=\"Gutenberg\"\n *   />\n * );\n * ```\n */\nexport const TextHighlight = props => {\n  const {\n    text = '',\n    highlight = ''\n  } = props;\n  const trimmedHighlightText = highlight.trim();\n  if (!trimmedHighlightText) {\n    return /*#__PURE__*/_jsx(_Fragment, {\n      children: text\n    });\n  }\n  const regex = new RegExp(`(${escapeRegExp(trimmedHighlightText)})`, 'gi');\n  return createInterpolateElement(text.replace(regex, '<mark>$&</mark>'), {\n    mark: /*#__PURE__*/_jsx(\"mark\", {})\n  });\n};\nTextHighlight.displayName = 'TextHighlight';\nexport default TextHighlight;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAyC;AAKzC,qBAA6B;AAC7B,yBAAmD;AAgB5C,IAAM,gBAAgB,WAAS;AACpC,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,EACd,IAAI;AACJ,QAAM,uBAAuB,UAAU,KAAK;AAC5C,MAAI,CAAC,sBAAsB;AACzB,WAAoB,uCAAAA,KAAK,mBAAAC,UAAW;AAAA,MAClC,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,QAAM,QAAQ,IAAI,OAAO,QAAI,6BAAa,oBAAoB,CAAC,KAAK,IAAI;AACxE,aAAO,yCAAyB,KAAK,QAAQ,OAAO,iBAAiB,GAAG;AAAA,IACtE,MAAmB,uCAAAD,KAAK,QAAQ,CAAC,CAAC;AAAA,EACpC,CAAC;AACH;AACA,cAAc,cAAc;AAC5B,IAAO,yBAAQ;",
   "names": ["_jsx", "_Fragment"]
 }

package/build/textarea-control/index.cjs

@@ -76,6 +76,7 @@ function UnforwardedTextareaControl(props, ref) {
   });
 }
 var TextareaControl = (0, import_element.forwardRef)(UnforwardedTextareaControl);
+TextareaControl.displayName = "TextareaControl";
 var textarea_control_default = TextareaControl;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/textarea-control/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/textarea-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTextareaControl(props, ref) {\n  const {\n    // Prevent passing this to `textarea`.\n    __nextHasNoMarginBottom: _,\n    label,\n    hideLabelFromVision,\n    value,\n    help,\n    onChange,\n    rows = 4,\n    className,\n    ...additionalProps\n  } = props;\n  const instanceId = useInstanceId(TextareaControl);\n  const id = `inspector-textarea-control-${instanceId}`;\n  const onChangeValue = event => onChange(event.target.value);\n  const classes = clsx('components-textarea-control', className);\n  return /*#__PURE__*/_jsx(BaseControl, {\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: id,\n    help: help,\n    className: classes,\n    children: /*#__PURE__*/_jsx(StyledTextarea, {\n      className: \"components-textarea-control__input\",\n      id: id,\n      rows: rows,\n      onChange: onChangeValue,\n      \"aria-describedby\": !!help ? id + '__help' : undefined,\n      value: value,\n      ref: ref,\n      ...additionalProps\n    })\n  });\n}\n\n/**\n * TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n *\n * ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextareaControl = () => {\n *   const [ text, setText ] = useState( '' );\n *\n *   return (\n *     <TextareaControl\n *       label=\"Text\"\n *       help=\"Enter some text\"\n *       value={ text }\n *       onChange={ ( value ) => setText( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextareaControl = forwardRef(UnforwardedTextareaControl);\nexport default TextareaControl;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAA8B;AAC9B,qBAA2B;AAK3B,0BAAwB;AACxB,qCAA+B;AAC/B,yBAA4B;AAC5B,SAAS,2BAA2B,OAAO,KAAK;AAC9C,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,iBAAa,8BAAc,eAAe;AAChD,QAAM,KAAK,8BAA8B,UAAU;AACnD,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,QAAM,cAAU,YAAAA,SAAK,+BAA+B,SAAS;AAC7D,SAAoB,uCAAAC,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAuB,uCAAAD,KAAK,+CAAgB;AAAA,MAC1C,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,oBAAoB,CAAC,CAAC,OAAO,KAAK,WAAW;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAyBO,IAAM,sBAAkB,2BAAW,0BAA0B;AACpE,IAAO,2BAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTextareaControl(props, ref) {\n  const {\n    // Prevent passing this to `textarea`.\n    __nextHasNoMarginBottom: _,\n    label,\n    hideLabelFromVision,\n    value,\n    help,\n    onChange,\n    rows = 4,\n    className,\n    ...additionalProps\n  } = props;\n  const instanceId = useInstanceId(TextareaControl);\n  const id = `inspector-textarea-control-${instanceId}`;\n  const onChangeValue = event => onChange(event.target.value);\n  const classes = clsx('components-textarea-control', className);\n  return /*#__PURE__*/_jsx(BaseControl, {\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: id,\n    help: help,\n    className: classes,\n    children: /*#__PURE__*/_jsx(StyledTextarea, {\n      className: \"components-textarea-control__input\",\n      id: id,\n      rows: rows,\n      onChange: onChangeValue,\n      \"aria-describedby\": !!help ? id + '__help' : undefined,\n      value: value,\n      ref: ref,\n      ...additionalProps\n    })\n  });\n}\n\n/**\n * TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n *\n * ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextareaControl = () => {\n *   const [ text, setText ] = useState( '' );\n *\n *   return (\n *     <TextareaControl\n *       label=\"Text\"\n *       help=\"Enter some text\"\n *       value={ text }\n *       onChange={ ( value ) => setText( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextareaControl = forwardRef(UnforwardedTextareaControl);\nTextareaControl.displayName = 'TextareaControl';\nexport default TextareaControl;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAA8B;AAC9B,qBAA2B;AAK3B,0BAAwB;AACxB,qCAA+B;AAC/B,yBAA4B;AAC5B,SAAS,2BAA2B,OAAO,KAAK;AAC9C,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,iBAAa,8BAAc,eAAe;AAChD,QAAM,KAAK,8BAA8B,UAAU;AACnD,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,QAAM,cAAU,YAAAA,SAAK,+BAA+B,SAAS;AAC7D,SAAoB,uCAAAC,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAuB,uCAAAD,KAAK,+CAAgB;AAAA,MAC1C,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,oBAAoB,CAAC,CAAC,OAAO,KAAK,WAAW;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAyBO,IAAM,sBAAkB,2BAAW,0BAA0B;AACpE,gBAAgB,cAAc;AAC9B,IAAO,2BAAQ;",
   "names": ["clsx", "_jsx", "BaseControl"]
 }

package/build/toggle-control/index.cjs

@@ -97,6 +97,7 @@ function UnforwardedToggleControl({
   });
 }
 var ToggleControl = (0, import_element.forwardRef)(UnforwardedToggleControl);
+ToggleControl.displayName = "ToggleControl";
 var toggle_control_default = ToggleControl;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/toggle-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\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 { HStack } from '../h-stack';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedToggleControl({\n  label,\n  checked,\n  help,\n  className,\n  onChange,\n  disabled\n}, ref) {\n  function onChangeToggle(event) {\n    onChange(event.target.checked);\n  }\n  const instanceId = useInstanceId(ToggleControl);\n  const id = `inspector-toggle-control-${instanceId}`;\n  let describedBy, helpLabel;\n  if (help) {\n    if (typeof help === 'function') {\n      // `help` as a function works only for controlled components where\n      // `checked` is passed down from parent component. Uncontrolled\n      // component can show only a static help label.\n      if (checked !== undefined) {\n        helpLabel = help(checked);\n      }\n    } else {\n      helpLabel = help;\n    }\n    if (helpLabel) {\n      describedBy = id + '__help';\n    }\n  }\n  return /*#__PURE__*/_jsx(BaseControl, {\n    id: id,\n    help: helpLabel && /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-toggle-control__help\",\n      children: helpLabel\n    }),\n    className: clsx('components-toggle-control', className),\n    children: /*#__PURE__*/_jsxs(HStack, {\n      justify: \"flex-start\",\n      spacing: 2,\n      children: [/*#__PURE__*/_jsx(FormToggle, {\n        id: id,\n        checked: checked,\n        onChange: onChangeToggle,\n        \"aria-describedby\": describedBy,\n        disabled: disabled,\n        ref: ref\n      }), /*#__PURE__*/_jsx(FlexBlock, {\n        as: \"label\",\n        htmlFor: id,\n        className: clsx('components-toggle-control__label', {\n          'is-disabled': disabled\n        }),\n        children: label\n      })]\n    })\n  });\n}\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 const ToggleControl = forwardRef(UnforwardedToggleControl);\nexport default ToggleControl;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,qBAA2B;AAC3B,qBAA8B;AAK9B,kBAA0B;AAC1B,yBAAuB;AACvB,0BAAwB;AACxB,qBAAuB;AACvB,yBAA2C;AAC3C,SAAS,yBAAyB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AACN,WAAS,eAAe,OAAO;AAC7B,aAAS,MAAM,OAAO,OAAO;AAAA,EAC/B;AACA,QAAM,iBAAa,8BAAc,aAAa;AAC9C,QAAM,KAAK,4BAA4B,UAAU;AACjD,MAAI,aAAa;AACjB,MAAI,MAAM;AACR,QAAI,OAAO,SAAS,YAAY;AAI9B,UAAI,YAAY,QAAW;AACzB,oBAAY,KAAK,OAAO;AAAA,MAC1B;AAAA,IACF,OAAO;AACL,kBAAY;AAAA,IACd;AACA,QAAI,WAAW;AACb,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF;AACA,SAAoB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA,MAAM,aAA0B,uCAAAD,KAAK,QAAQ;AAAA,MAC3C,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC;AAAA,IACD,eAAW,YAAAE,SAAK,6BAA6B,SAAS;AAAA,IACtD,UAAuB,uCAAAC,MAAM,uBAAQ;AAAA,MACnC,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU,CAAc,uCAAAH,KAAK,mBAAAI,SAAY;AAAA,QACvC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,MACF,CAAC,GAAgB,uCAAAJ,KAAK,uBAAW;AAAA,QAC/B,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,eAAW,YAAAE,SAAK,oCAAoC;AAAA,UAClD,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,oBAAgB,2BAAW,wBAAwB;AAChE,IAAO,yBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\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 { HStack } from '../h-stack';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedToggleControl({\n  label,\n  checked,\n  help,\n  className,\n  onChange,\n  disabled\n}, ref) {\n  function onChangeToggle(event) {\n    onChange(event.target.checked);\n  }\n  const instanceId = useInstanceId(ToggleControl);\n  const id = `inspector-toggle-control-${instanceId}`;\n  let describedBy, helpLabel;\n  if (help) {\n    if (typeof help === 'function') {\n      // `help` as a function works only for controlled components where\n      // `checked` is passed down from parent component. Uncontrolled\n      // component can show only a static help label.\n      if (checked !== undefined) {\n        helpLabel = help(checked);\n      }\n    } else {\n      helpLabel = help;\n    }\n    if (helpLabel) {\n      describedBy = id + '__help';\n    }\n  }\n  return /*#__PURE__*/_jsx(BaseControl, {\n    id: id,\n    help: helpLabel && /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-toggle-control__help\",\n      children: helpLabel\n    }),\n    className: clsx('components-toggle-control', className),\n    children: /*#__PURE__*/_jsxs(HStack, {\n      justify: \"flex-start\",\n      spacing: 2,\n      children: [/*#__PURE__*/_jsx(FormToggle, {\n        id: id,\n        checked: checked,\n        onChange: onChangeToggle,\n        \"aria-describedby\": describedBy,\n        disabled: disabled,\n        ref: ref\n      }), /*#__PURE__*/_jsx(FlexBlock, {\n        as: \"label\",\n        htmlFor: id,\n        className: clsx('components-toggle-control__label', {\n          'is-disabled': disabled\n        }),\n        children: label\n      })]\n    })\n  });\n}\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 const ToggleControl = forwardRef(UnforwardedToggleControl);\nToggleControl.displayName = 'ToggleControl';\nexport default ToggleControl;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kBAAiB;AAKjB,qBAA2B;AAC3B,qBAA8B;AAK9B,kBAA0B;AAC1B,yBAAuB;AACvB,0BAAwB;AACxB,qBAAuB;AACvB,yBAA2C;AAC3C,SAAS,yBAAyB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AACN,WAAS,eAAe,OAAO;AAC7B,aAAS,MAAM,OAAO,OAAO;AAAA,EAC/B;AACA,QAAM,iBAAa,8BAAc,aAAa;AAC9C,QAAM,KAAK,4BAA4B,UAAU;AACjD,MAAI,aAAa;AACjB,MAAI,MAAM;AACR,QAAI,OAAO,SAAS,YAAY;AAI9B,UAAI,YAAY,QAAW;AACzB,oBAAY,KAAK,OAAO;AAAA,MAC1B;AAAA,IACF,OAAO;AACL,kBAAY;AAAA,IACd;AACA,QAAI,WAAW;AACb,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF;AACA,SAAoB,uCAAAA,KAAK,oBAAAC,SAAa;AAAA,IACpC;AAAA,IACA,MAAM,aAA0B,uCAAAD,KAAK,QAAQ;AAAA,MAC3C,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC;AAAA,IACD,eAAW,YAAAE,SAAK,6BAA6B,SAAS;AAAA,IACtD,UAAuB,uCAAAC,MAAM,uBAAQ;AAAA,MACnC,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU,CAAc,uCAAAH,KAAK,mBAAAI,SAAY;AAAA,QACvC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,MACF,CAAC,GAAgB,uCAAAJ,KAAK,uBAAW;AAAA,QAC/B,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,eAAW,YAAAE,SAAK,oCAAoC;AAAA,UAClD,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,oBAAgB,2BAAW,wBAAwB;AAChE,cAAc,cAAc;AAC5B,IAAO,yBAAQ;",
   "names": ["_jsx", "BaseControl", "clsx", "_jsxs", "FormToggle"]
 }

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

@@ -83,6 +83,7 @@ function UnforwardedToggleGroupControlAsButtonGroup({
   });
 }
 var ToggleGroupControlAsButtonGroup = (0, import_element.forwardRef)(UnforwardedToggleGroupControlAsButtonGroup);
+ToggleGroupControlAsButtonGroup.displayName = "ToggleGroupControlAsButtonGroup";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ToggleGroupControlAsButtonGroup

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../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 ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsButtonGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange,\n  size,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n  const [selectedValue, setSelectedValue] = useControlledValue({\n    defaultValue,\n    value,\n    onChange\n  });\n  const groupContextValue = useMemo(() => ({\n    baseId,\n    value: selectedValue,\n    setValue: setSelectedValue,\n    isBlock: !isAdaptiveWidth,\n    isDeselectable: true,\n    size,\n    setSelectedElement\n  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size, setSelectedElement]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(View, {\n      \"aria-label\": label,\n      ...otherProps,\n      ref: forwardedRef,\n      role: \"group\",\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAC9B,qBAAoC;AAKpC,kBAAqB;AACrB,mBAAmC;AACnC,qBAAsC;AACtC,IAAAA,gBAAwD;AACxD,yBAA4B;AAC5B,SAAS,2CAA2C;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,kBAAc,8BAAc,iCAAiC,sCAAsC;AACzG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,uDAAwC,SAAS;AACrD,QAAM,CAAC,eAAe,gBAAgB,QAAI,iCAAmB;AAAA,IAC3D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,wBAAoB,wBAAQ,OAAO;AAAA,IACvC;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS,CAAC;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,eAAe,kBAAkB,iBAAiB,MAAM,kBAAkB,CAAC;AACxF,SAAoB,uCAAAC,KAAK,eAAAC,QAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,uCAAAD,KAAK,kBAAM;AAAA,MAChC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,sCAAkC,2BAAW,0CAA0C;",
+  "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 ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsButtonGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange,\n  size,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n  const [selectedValue, setSelectedValue] = useControlledValue({\n    defaultValue,\n    value,\n    onChange\n  });\n  const groupContextValue = useMemo(() => ({\n    baseId,\n    value: selectedValue,\n    setValue: setSelectedValue,\n    isBlock: !isAdaptiveWidth,\n    isDeselectable: true,\n    size,\n    setSelectedElement\n  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size, setSelectedElement]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(View, {\n      \"aria-label\": label,\n      ...otherProps,\n      ref: forwardedRef,\n      role: \"group\",\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);\nToggleGroupControlAsButtonGroup.displayName = 'ToggleGroupControlAsButtonGroup';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAC9B,qBAAoC;AAKpC,kBAAqB;AACrB,mBAAmC;AACnC,qBAAsC;AACtC,IAAAA,gBAAwD;AACxD,yBAA4B;AAC5B,SAAS,2CAA2C;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,kBAAc,8BAAc,iCAAiC,sCAAsC;AACzG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,uDAAwC,SAAS;AACrD,QAAM,CAAC,eAAe,gBAAgB,QAAI,iCAAmB;AAAA,IAC3D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,wBAAoB,wBAAQ,OAAO;AAAA,IACvC;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS,CAAC;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,eAAe,kBAAkB,iBAAiB,MAAM,kBAAkB,CAAC;AACxF,SAAoB,uCAAAC,KAAK,eAAAC,QAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,uCAAAD,KAAK,kBAAM;AAAA,MAChC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,sCAAkC,2BAAW,0CAA0C;AACpG,gCAAgC,cAAc;",
   "names": ["import_utils", "_jsx", "ToggleGroupControlContext"]
 }

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

@@ -99,6 +99,7 @@ function UnforwardedToggleGroupControlAsRadioGroup({
   });
 }
 var ToggleGroupControlAsRadioGroup = (0, import_element.forwardRef)(UnforwardedToggleGroupControlAsRadioGroup);
+ToggleGroupControlAsRadioGroup.displayName = "ToggleGroupControlAsRadioGroup";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ToggleGroupControlAsRadioGroup

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useEffect, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsRadioGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange: onChangeProp,\n  size,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n\n  // `useRadioStore`'s `setValue` prop can be called with `null`, while\n  // the component's `onChange` prop only expects `undefined`\n  const wrappedOnChangeProp = onChangeProp ? v => {\n    onChangeProp(v !== null && v !== void 0 ? v : undefined);\n  } : undefined;\n  const radio = Ariakit.useRadioStore({\n    defaultValue,\n    value,\n    setValue: wrappedOnChangeProp,\n    rtl: isRTL()\n  });\n  const selectedValue = Ariakit.useStoreState(radio, 'value');\n  const setValue = radio.setValue;\n\n  // Ensures that the active id is also reset after the value is \"reset\" by the consumer.\n  useEffect(() => {\n    if (selectedValue === '') {\n      radio.setActiveId(undefined);\n    }\n  }, [radio, selectedValue]);\n  const groupContextValue = useMemo(() => ({\n    activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(),\n    baseId,\n    isBlock: !isAdaptiveWidth,\n    size,\n    // @ts-expect-error - This is wrong and we should fix it.\n    value: selectedValue,\n    // @ts-expect-error - This is wrong and we should fix it.\n    setValue,\n    setSelectedElement\n  }), [baseId, isAdaptiveWidth, radio, selectedValue, setSelectedElement, setValue, size]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(Ariakit.RadioGroup, {\n      store: radio,\n      \"aria-label\": label,\n      render: /*#__PURE__*/_jsx(View, {}),\n      ...otherProps,\n      id: baseId,\n      ref: forwardedRef,\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsRadioGroup = forwardRef(UnforwardedToggleGroupControlAsRadioGroup);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,cAAyB;AAKzB,qBAA8B;AAC9B,qBAA+C;AAC/C,kBAAsB;AAKtB,kBAAqB;AACrB,qBAAsC;AACtC,mBAAwD;AACxD,yBAA4B;AAC5B,SAAS,0CAA0C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,kBAAc,8BAAc,gCAAgC,qCAAqC;AACvG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,sDAAwC,SAAS;AAIrD,QAAM,sBAAsB,eAAe,OAAK;AAC9C,iBAAa,MAAM,QAAQ,MAAM,SAAS,IAAI,MAAS;AAAA,EACzD,IAAI;AACJ,QAAM,QAAgB,sBAAc;AAAA,IAClC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,SAAK,mBAAM;AAAA,EACb,CAAC;AACD,QAAM,gBAAwB,sBAAc,OAAO,OAAO;AAC1D,QAAM,WAAW,MAAM;AAGvB,gCAAU,MAAM;AACd,QAAI,kBAAkB,IAAI;AACxB,YAAM,YAAY,MAAS;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,OAAO,aAAa,CAAC;AACzB,QAAM,wBAAoB,wBAAQ,OAAO;AAAA,IACvC,0BAA0B,MAAM,MAAM,SAAS,EAAE,aAAa,MAAM,MAAM;AAAA,IAC1E;AAAA,IACA,SAAS,CAAC;AAAA,IACV;AAAA;AAAA,IAEA,OAAO;AAAA;AAAA,IAEP;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,iBAAiB,OAAO,eAAe,oBAAoB,UAAU,IAAI,CAAC;AACvF,SAAoB,uCAAAA,KAAK,eAAAC,QAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,uCAAAD,KAAa,oBAAY;AAAA,MAC9C,OAAO;AAAA,MACP,cAAc;AAAA,MACd,QAAqB,uCAAAA,KAAK,kBAAM,CAAC,CAAC;AAAA,MAClC,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,qCAAiC,2BAAW,yCAAyC;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useEffect, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsRadioGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange: onChangeProp,\n  size,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n\n  // `useRadioStore`'s `setValue` prop can be called with `null`, while\n  // the component's `onChange` prop only expects `undefined`\n  const wrappedOnChangeProp = onChangeProp ? v => {\n    onChangeProp(v !== null && v !== void 0 ? v : undefined);\n  } : undefined;\n  const radio = Ariakit.useRadioStore({\n    defaultValue,\n    value,\n    setValue: wrappedOnChangeProp,\n    rtl: isRTL()\n  });\n  const selectedValue = Ariakit.useStoreState(radio, 'value');\n  const setValue = radio.setValue;\n\n  // Ensures that the active id is also reset after the value is \"reset\" by the consumer.\n  useEffect(() => {\n    if (selectedValue === '') {\n      radio.setActiveId(undefined);\n    }\n  }, [radio, selectedValue]);\n  const groupContextValue = useMemo(() => ({\n    activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(),\n    baseId,\n    isBlock: !isAdaptiveWidth,\n    size,\n    // @ts-expect-error - This is wrong and we should fix it.\n    value: selectedValue,\n    // @ts-expect-error - This is wrong and we should fix it.\n    setValue,\n    setSelectedElement\n  }), [baseId, isAdaptiveWidth, radio, selectedValue, setSelectedElement, setValue, size]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(Ariakit.RadioGroup, {\n      store: radio,\n      \"aria-label\": label,\n      render: /*#__PURE__*/_jsx(View, {}),\n      ...otherProps,\n      id: baseId,\n      ref: forwardedRef,\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsRadioGroup = forwardRef(UnforwardedToggleGroupControlAsRadioGroup);\nToggleGroupControlAsRadioGroup.displayName = 'ToggleGroupControlAsRadioGroup';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,cAAyB;AAKzB,qBAA8B;AAC9B,qBAA+C;AAC/C,kBAAsB;AAKtB,kBAAqB;AACrB,qBAAsC;AACtC,mBAAwD;AACxD,yBAA4B;AAC5B,SAAS,0CAA0C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,kBAAc,8BAAc,gCAAgC,qCAAqC;AACvG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,QAAI,sDAAwC,SAAS;AAIrD,QAAM,sBAAsB,eAAe,OAAK;AAC9C,iBAAa,MAAM,QAAQ,MAAM,SAAS,IAAI,MAAS;AAAA,EACzD,IAAI;AACJ,QAAM,QAAgB,sBAAc;AAAA,IAClC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,SAAK,mBAAM;AAAA,EACb,CAAC;AACD,QAAM,gBAAwB,sBAAc,OAAO,OAAO;AAC1D,QAAM,WAAW,MAAM;AAGvB,gCAAU,MAAM;AACd,QAAI,kBAAkB,IAAI;AACxB,YAAM,YAAY,MAAS;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,OAAO,aAAa,CAAC;AACzB,QAAM,wBAAoB,wBAAQ,OAAO;AAAA,IACvC,0BAA0B,MAAM,MAAM,SAAS,EAAE,aAAa,MAAM,MAAM;AAAA,IAC1E;AAAA,IACA,SAAS,CAAC;AAAA,IACV;AAAA;AAAA,IAEA,OAAO;AAAA;AAAA,IAEP;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,iBAAiB,OAAO,eAAe,oBAAoB,UAAU,IAAI,CAAC;AACvF,SAAoB,uCAAAA,KAAK,eAAAC,QAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,uCAAAD,KAAa,oBAAY;AAAA,MAC9C,OAAO;AAAA,MACP,cAAc;AAAA,MACd,QAAqB,uCAAAA,KAAK,kBAAM,CAAC,CAAC;AAAA,MAClC,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,qCAAiC,2BAAW,yCAAyC;AAClG,+BAA+B,cAAc;",
   "names": ["_jsx", "ToggleGroupControlContext"]
 }

package/build/toggle-group-control/toggle-group-control-option/component.cjs

@@ -41,6 +41,7 @@ function UnforwardedToggleGroupControlOption(props, ref) {
   });
 }
 var ToggleGroupControlOption = (0, import_element.forwardRef)(UnforwardedToggleGroupControlOption);
+ToggleGroupControlOption.displayName = "ToggleGroupControlOption";
 var component_default = ToggleGroupControlOption;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/toggle-group-control/toggle-group-control-option/component.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control-option/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOption(props, ref) {\n  const {\n    label,\n    ...restProps\n  } = props;\n  const optionLabel = restProps['aria-label'] || label;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    \"aria-label\": optionLabel,\n    ref: ref,\n    children: label\n  });\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *       __next40pxDefaultSize\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(UnforwardedToggleGroupControlOption);\nexport default ToggleGroupControlOption;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAA2B;AAM3B,8CAA6C;AAC7C,yBAA4B;AAC5B,SAAS,oCAAoC,OAAO,KAAK;AACvD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,UAAU,YAAY,KAAK;AAC/C,SAAoB,uCAAAA,KAAK,sEAA8B;AAAA,IACrD,GAAG;AAAA,IACH,cAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACH;AA2BO,IAAM,+BAA2B,2BAAW,mCAAmC;AACtF,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOption(props, ref) {\n  const {\n    label,\n    ...restProps\n  } = props;\n  const optionLabel = restProps['aria-label'] || label;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    \"aria-label\": optionLabel,\n    ref: ref,\n    children: label\n  });\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *       __next40pxDefaultSize\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(UnforwardedToggleGroupControlOption);\nToggleGroupControlOption.displayName = 'ToggleGroupControlOption';\nexport default ToggleGroupControlOption;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,qBAA2B;AAM3B,8CAA6C;AAC7C,yBAA4B;AAC5B,SAAS,oCAAoC,OAAO,KAAK;AACvD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,UAAU,YAAY,KAAK;AAC/C,SAAoB,uCAAAA,KAAK,sEAA8B;AAAA,IACrD,GAAG;AAAA,IACH,cAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACH;AA2BO,IAAM,+BAA2B,2BAAW,mCAAmC;AACtF,yBAAyB,cAAc;AACvC,IAAO,oBAAQ;",
   "names": ["_jsx"]
 }