@plasmicpkgs/react-aria 0.0.49 → 0.0.51

package/dist/react-aria.esm.js

@@ -1,40 +1,41 @@
-import React, { useEffect, Component, forwardRef, useImperativeHandle, useMemo } from 'react';
-import { Button, Checkbox, Text, FieldError, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Header, Section, Collection, PopoverContext, SelectContext, Popover, ComboBox, ComboBoxStateContext, Heading, ModalOverlay, Modal, Dialog, DialogTrigger, Form, Radio, RadioGroup, Select, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField } from 'react-aria-components';
+import React, { useEffect, useState, useMemo, forwardRef, useImperativeHandle, Component } from 'react';
+import { Button, Checkbox, Text, FieldError, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Section, Header, PopoverContext, SelectContext, Popover, ComboBox, Heading, ModalOverlay, Modal, Dialog, DialogTrigger, Form, Radio, RadioGroup, Select, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField } from 'react-aria-components';
 import registerComponent from '@plasmicapp/host/registerComponent';
-import { useFilter } from '@react-aria/i18n';
 import { mergeProps, useTooltipTrigger } from 'react-aria';
 import { mergeProps as mergeProps$1 } from '@react-aria/utils';
 import { usePlasmicCanvasContext } from '@plasmicapp/host';
 import flattenChildren from 'react-keyed-flatten-children';
 import { useTooltipTriggerState } from 'react-stately';
 
-var __defProp$r = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
-var __hasOwnProp$r = Object.prototype.hasOwnProperty;
-var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$r = (a, b) => {
+var __defProp$q = Object.defineProperty;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
+var __hasOwnProp$q = Object.prototype.hasOwnProperty;
+var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$q = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$r.call(b, prop))
-      __defNormalProp$r(a, prop, b[prop]);
-  if (__getOwnPropSymbols$r)
-    for (var prop of __getOwnPropSymbols$r(b)) {
-      if (__propIsEnum$r.call(b, prop))
-        __defNormalProp$r(a, prop, b[prop]);
+    if (__hasOwnProp$q.call(b, prop))
+      __defNormalProp$q(a, prop, b[prop]);
+  if (__getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(b)) {
+      if (__propIsEnum$q.call(b, prop))
+        __defNormalProp$q(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 function registerComponentHelper(loader, component, meta, overrides) {
   var _a;
-  meta = __spreadProps$e(__spreadValues$r({}, meta), {
-    defaultStyles: __spreadValues$r(__spreadValues$r({}, defaultStyles), (_a = meta.defaultStyles) != null ? _a : {})
+  meta = __spreadProps$d(__spreadValues$q({}, meta), {
+    defaultStyles: __spreadValues$q({
+      boxSizing: "border-box"
+    }, (_a = meta.defaultStyles) != null ? _a : {})
   });
   if (overrides) {
-    meta = __spreadProps$e(__spreadValues$r(__spreadValues$r({}, meta), overrides), {
-      props: __spreadValues$r(__spreadValues$r({}, meta.props), overrides.props)
+    meta = __spreadProps$d(__spreadValues$q(__spreadValues$q({}, meta), overrides), {
+      props: __spreadValues$q(__spreadValues$q({}, meta.props), overrides.props)
     });
     if (overrides.parentComponentName) {
       meta.name = makeChildComponentName(
@@ -67,16 +68,10 @@ function extractPlasmicDataProps(props) {
     Object.entries(props).filter(([key]) => key.startsWith("data-plasmic-"))
   );
 }
-function withoutNils(array) {
-  return array.filter((x) => x != null);
-}
 function isDefined(thing) {
   return thing !== void 0 && thing !== null;
 }
 
-const defaultStyles = {
-  boxSizing: "border-box"
-};
 function hasParent(_props, ctx) {
   return isDefined(ctx == null ? void 0 : ctx.parent) === true;
 }
@@ -107,6 +102,7 @@ function createNameProp() {
   return {
     type: "string",
     description: "Name for this field if it is part of a form",
+    displayName: "Form field key",
     hidden: hasParent,
     advanced: true
   };
@@ -462,7 +458,7 @@ function ChangesObserver({
       updateInteractionVariant(changes);
     }
   }, [changes, updateInteractionVariant]);
-  return children;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 }
 function realWithObservedValues(children, changes, updateInteractionVariant) {
   return /* @__PURE__ */ React.createElement(
@@ -483,33 +479,33 @@ function pickAriaComponentVariants(keys) {
   };
 }
 
-var __defProp$q = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
-var __hasOwnProp$q = Object.prototype.hasOwnProperty;
-var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$q = (a, b) => {
+var __defProp$p = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
+var __hasOwnProp$p = Object.prototype.hasOwnProperty;
+var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$p = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$q.call(b, prop))
-      __defNormalProp$q(a, prop, b[prop]);
-  if (__getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(b)) {
-      if (__propIsEnum$q.call(b, prop))
-        __defNormalProp$q(a, prop, b[prop]);
+    if (__hasOwnProp$p.call(b, prop))
+      __defNormalProp$p(a, prop, b[prop]);
+  if (__getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(b)) {
+      if (__propIsEnum$p.call(b, prop))
+        __defNormalProp$p(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-var __objRest$k = (source, exclude) => {
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __objRest$n = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
+  if (source != null && __getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -521,7 +517,7 @@ const BUTTON_INTERACTION_VARIANTS = [
   "focusVisible",
   "disabled"
 ];
-const { interactionVariants: interactionVariants$c, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(
+const { interactionVariants: interactionVariants$d, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(
   BUTTON_INTERACTION_VARIANTS
 );
 function BaseButton(props) {
@@ -530,14 +526,14 @@ function BaseButton(props) {
     resetsForm,
     children,
     updateInteractionVariant
-  } = _a, rest = __objRest$k(_a, [
+  } = _a, rest = __objRest$n(_a, [
     "submitsForm",
     "resetsForm",
     "children",
     "updateInteractionVariant"
   ]);
   const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-  return /* @__PURE__ */ React.createElement(Button, __spreadValues$q({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$a(
+  return /* @__PURE__ */ React.createElement(Button, __spreadValues$p({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$b(
     children,
     {
       hovered: isHovered,
@@ -559,7 +555,7 @@ function registerButton(loader, overrides) {
       displayName: "Aria Button",
       importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
-      interactionVariants: interactionVariants$c,
+      interactionVariants: interactionVariants$d,
       defaultStyles: {
         borderWidth: "1px",
         borderStyle: "solid",
@@ -567,7 +563,8 @@ function registerButton(loader, overrides) {
         padding: "2px 10px",
         cursor: "pointer"
       },
-      props: __spreadProps$d(__spreadValues$q({}, getCommonProps("button", [
+      props: __spreadProps$c(__spreadValues$p({}, getCommonProps("button", [
+        "autoFocus",
         "isDisabled",
         "aria-label"
       ])), {
@@ -614,38 +611,36 @@ const PlasmicSliderContext = React.createContext(void 0);
 React.createContext(void 0);
 const PlasmicPopoverContext = React.createContext(void 0);
 const PlasmicListBoxContext = React.createContext(void 0);
-const PlasmicItemContext = React.createContext(void 0);
-const PlasmicSectionContext = React.createContext(void 0);
-const PlasmicHeaderContext = React.createContext(void 0);
-const PlasmicInputContext = React.createContext(void 0);
+React.createContext(void 0);
+React.createContext(void 0);
 
-var __defProp$p = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
-var __hasOwnProp$p = Object.prototype.hasOwnProperty;
-var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$p = (a, b) => {
+var __defProp$o = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$o = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$p.call(b, prop))
-      __defNormalProp$p(a, prop, b[prop]);
-  if (__getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(b)) {
-      if (__propIsEnum$p.call(b, prop))
-        __defNormalProp$p(a, prop, b[prop]);
+    if (__hasOwnProp$o.call(b, prop))
+      __defNormalProp$o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$o(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-var __objRest$j = (source, exclude) => {
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __objRest$m = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
+  if (source != null && __getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -661,16 +656,16 @@ const CHECKBOX_INTERACTION_VARIANTS = [
   "readonly",
   "selected"
 ];
-const { interactionVariants: interactionVariants$b, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(
+const { interactionVariants: interactionVariants$c, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(
   CHECKBOX_INTERACTION_VARIANTS
 );
 function BaseCheckbox(props) {
-  const _a = props, { children, updateInteractionVariant, setControlContextData } = _a, rest = __objRest$j(_a, ["children", "updateInteractionVariant", "setControlContextData"]);
+  const _a = props, { children, updateInteractionVariant, setControlContextData } = _a, rest = __objRest$m(_a, ["children", "updateInteractionVariant", "setControlContextData"]);
   const contextProps = React.useContext(PlasmicCheckboxGroupContext);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: contextProps
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadValues$p({}, rest), ({
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadValues$o({}, rest), ({
     isHovered,
     isPressed,
     isFocused,
@@ -679,7 +674,7 @@ function BaseCheckbox(props) {
     isIndeterminate,
     isSelected,
     isReadOnly
-  }) => withObservedValues$9(
+  }) => withObservedValues$a(
     children,
     {
       hovered: isHovered,
@@ -749,8 +744,8 @@ function registerCheckbox(loader, overrides) {
       displayName: "Aria Checkbox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
-      interactionVariants: interactionVariants$b,
-      props: __spreadProps$c(__spreadValues$p({}, getCommonProps("checkbox", [
+      interactionVariants: interactionVariants$c,
+      props: __spreadProps$b(__spreadValues$o({}, getCommonProps("checkbox", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -818,37 +813,37 @@ function registerCheckbox(loader, overrides) {
   );
 }
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
-var __hasOwnProp$o = Object.prototype.hasOwnProperty;
-var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$o = (a, b) => {
+var __defProp$n = Object.defineProperty;
+var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$o.call(b, prop))
-      __defNormalProp$o(a, prop, b[prop]);
-  if (__getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(b)) {
-      if (__propIsEnum$o.call(b, prop))
-        __defNormalProp$o(a, prop, b[prop]);
+    if (__hasOwnProp$n.call(b, prop))
+      __defNormalProp$n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
+        __defNormalProp$n(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$i = (source, exclude) => {
+var __objRest$l = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$n.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
+  if (source != null && __getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$n.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BaseText(_a) {
-  var _b = _a, { children } = _b, rest = __objRest$i(_b, ["children"]);
-  return /* @__PURE__ */ React.createElement(Text, __spreadValues$o({}, rest), children);
+  var _b = _a, { children } = _b, rest = __objRest$l(_b, ["children"]);
+  return /* @__PURE__ */ React.createElement(Text, __spreadValues$n({}, rest), children);
 }
 const TEXT_COMPONENT_NAME = makeComponentName("text");
 function registerText(loader, overrides) {
@@ -882,28 +877,28 @@ function registerText(loader, overrides) {
   );
 }
 
-var __defProp$n = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
-var __hasOwnProp$n = Object.prototype.hasOwnProperty;
-var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$n = (a, b) => {
+var __defProp$m = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$m = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$n.call(b, prop))
-      __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$n(a, prop, b[prop]);
+    if (__hasOwnProp$m.call(b, prop))
+      __defNormalProp$m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
+        __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 const DESCRIPTION_COMPONENT_NAME = makeComponentName("description");
 function registerDescription(loader, overrides) {
-  return registerText(loader, __spreadProps$b(__spreadValues$n({}, overrides), {
+  return registerText(loader, __spreadProps$a(__spreadValues$m({}, overrides), {
     name: DESCRIPTION_COMPONENT_NAME,
     displayName: "Aria Description",
     props: {
@@ -916,30 +911,30 @@ function registerDescription(loader, overrides) {
   }));
 }
 
-var __defProp$m = Object.defineProperty;
-var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
-var __hasOwnProp$m = Object.prototype.hasOwnProperty;
-var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$m = (a, b) => {
+var __defProp$l = Object.defineProperty;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$l = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$m.call(b, prop))
-      __defNormalProp$m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
-        __defNormalProp$m(a, prop, b[prop]);
+    if (__hasOwnProp$l.call(b, prop))
+      __defNormalProp$l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$l(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$h = (source, exclude) => {
+var __objRest$k = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.call(source, prop))
+  if (source != null && __getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -956,7 +951,7 @@ function BaseFieldError(_a) {
     tooShort,
     typeMismatch,
     valueMissing
-  } = _b, rest = __objRest$h(_b, [
+  } = _b, rest = __objRest$k(_b, [
     "badInput",
     "customError",
     "patternMismatch",
@@ -968,7 +963,7 @@ function BaseFieldError(_a) {
     "typeMismatch",
     "valueMissing"
   ]);
-  return /* @__PURE__ */ React.createElement(FieldError, __spreadValues$m({}, rest), ({ validationDetails, validationErrors }) => {
+  return /* @__PURE__ */ React.createElement(FieldError, __spreadValues$l({}, rest), ({ validationDetails, validationErrors }) => {
     if (validationDetails.badInput && badInput) {
       return badInput;
     }
@@ -1100,33 +1095,33 @@ function registerLabel(loader, overrides) {
   );
 }
 
-var __defProp$l = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$l = (a, b) => {
+var __defProp$k = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$l.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
+    if (__hasOwnProp$k.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
+        __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-var __objRest$g = (source, exclude) => {
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __objRest$j = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
+  if (source != null && __getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1135,12 +1130,12 @@ const CHECKBOX_GROUP_INTERACTION_VARIANTS = [
   "disabled",
   "readonly"
 ];
-const { interactionVariants: interactionVariants$a, withObservedValues: withObservedValues$8 } = pickAriaComponentVariants(
+const { interactionVariants: interactionVariants$b, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(
   CHECKBOX_GROUP_INTERACTION_VARIANTS
 );
 function BaseCheckboxGroup(props) {
-  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$g(_a, ["children", "updateInteractionVariant"]);
-  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$l({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$8(
+  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$j(_a, ["children", "updateInteractionVariant"]);
+  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$9(
     children,
     {
       disabled: isDisabled,
@@ -1168,8 +1163,8 @@ function registerCheckboxGroup(loader, overrides) {
       displayName: "Aria Checkbox Group",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
-      interactionVariants: interactionVariants$a,
-      props: __spreadProps$a(__spreadValues$l({}, getCommonProps("checkbox group", [
+      interactionVariants: interactionVariants$b,
+      props: __spreadProps$9(__spreadValues$k({}, getCommonProps("checkbox group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -1284,195 +1279,80 @@ function registerCheckboxGroup(loader, overrides) {
   );
 }
 
-function useStrictOptions(props) {
-  const { options, optionInfo } = props;
-  return React.useMemo(() => {
-    return deriveStrictOptions({ options, optionInfo });
-  }, [options, optionInfo]);
-}
-function deriveStrictOptions(props) {
-  var _a;
-  const { options, optionInfo } = props;
-  let sectionCount = 0;
-  const makeStrict = (op) => {
-    var _a2, _b, _c, _d, _e, _f;
-    if (!op) {
-      return void 0;
-    } else if (typeof op === "string" || typeof op === "number") {
-      const item = {
-        id: op
-      };
-      return item;
-    } else if (optionInfo) {
-      const info = optionInfo(op);
-      if (info.type === "option-group") {
-        const section = {
-          type: "option-group",
-          items: (_c = (_b = (_a2 = info.items) == null ? void 0 : _a2.map) == null ? void 0 : _b.call(_a2, (item) => makeStrict(item))) == null ? void 0 : _c.filter((x) => !!x),
-          label: info.label,
-          key: `option-group-${sectionCount}`
-        };
-        sectionCount += 1;
-        return section;
-      } else {
-        let item = info;
-        if (!("id" in item)) {
-          item = {
-            type: "option",
-            id: JSON.stringify(item)
-          };
-        }
-        return item;
-      }
-    } else if (typeof op === "object") {
-      if ("items" in op) {
-        const section = {
-          type: "option-group",
-          items: (_f = (_e = (_d = op.items) == null ? void 0 : _d.map) == null ? void 0 : _e.call(_d, (item) => makeStrict(item))) == null ? void 0 : _f.filter((x) => !!x),
-          label: op.label,
-          key: `option-group-${sectionCount}`
-        };
-        sectionCount += 1;
-        return section;
-      } else {
-        let item = op;
-        if (!("id" in item)) {
-          item = {
-            type: "option",
-            id: JSON.stringify(item)
-          };
-        }
-        return item;
-      }
+class ListBoxItemIdManager {
+  constructor() {
+    this._ids = /* @__PURE__ */ new Set();
+    this._observers = /* @__PURE__ */ new Set();
+  }
+  generateDuplicateId(id, count = 1) {
+    const dupId = `${id} duplicate(${count})`;
+    if (this._ids.has(dupId)) {
+      return this.generateDuplicateId(id, count + 1);
     } else {
-      return void 0;
+      return dupId;
+    }
+  }
+  generateMissingId(count = 1) {
+    const missingId = `missing(${count})`;
+    if (this._ids.has(missingId)) {
+      return this.generateMissingId(count + 1);
+    } else {
+      return missingId;
     }
-  };
-  const strictOptions = (_a = options == null ? void 0 : options.map(makeStrict)) == null ? void 0 : _a.filter((x) => !!x);
-  const optionText = (op) => {
-    var _a2;
-    return (_a2 = op.label) != null ? _a2 : op.id;
-  };
-  return { options: strictOptions, optionText };
-}
-function flattenOptions(options) {
-  if (!options) {
-    return [];
-  } else {
-    return options.flatMap(
-      (op) => {
-        var _a;
-        return op.type === "option-group" ? (_a = op.items) != null ? _a : [] : op;
-      }
-    );
   }
-}
-function makeOptionsPropType() {
-  const type = {
-    type: "array",
-    itemType: {
-      type: "object",
-      nameFunc: (item) => item.label || item.id,
-      fields: {
-        type: {
-          type: "choice",
-          options: [
-            { value: "option", label: "Option" },
-            { value: "option-group", label: "Option Group" }
-          ],
-          defaultValue: "option"
-        },
-        id: {
-          type: "string",
-          hidden: (_ps, _ctx, { item }) => item.type !== "option"
-        },
-        label: "string",
-        items: {
-          type: "array",
-          displayName: "Options",
-          hidden: (_ps, _ctx, { item }) => {
-            return item.type !== "option-group";
-          },
-          itemType: {
-            type: "object",
-            nameFunc: (item) => item.label || item.id,
-            fields: {
-              id: "string",
-              label: "string"
-            }
-          }
-        }
-      }
-    },
-    defaultValue: [
-      {
-        id: "option1",
-        label: "Option 1",
-        type: "option"
-      },
-      {
-        id: "option2",
-        label: "Option 2",
-        type: "option"
-      },
-      {
-        label: "Section 1",
-        type: "option-group",
-        items: [
-          {
-            id: "section-1-1",
-            label: "Section item 1",
-            type: "option"
-          },
-          {
-            id: "section-1-2",
-            label: "Section item 2",
-            type: "option"
-          }
-        ]
-      }
-    ]
-  };
-  return type;
-}
-function makeValuePropType() {
-  const type = {
-    type: "choice",
-    options: (ps) => {
-      const { options, optionText } = deriveStrictOptions(ps);
-      return flattenOptions(options).map((op) => ({
-        value: op.id,
-        label: optionText(op)
-      }));
-    }
-  };
-  return type;
+  register(id) {
+    let newId;
+    if (!id) {
+      newId = this.generateMissingId();
+    } else if (this._ids.has(id)) {
+      newId = this.generateDuplicateId(id);
+    } else {
+      newId = id;
+    }
+    this._ids.add(newId);
+    this.notify();
+    return newId;
+  }
+  unregister(id) {
+    this._ids.delete(id);
+    this.notify();
+  }
+  subscribe(observer) {
+    this._observers.add(observer);
+  }
+  // Notify all observers about an event.
+  notify() {
+    this._observers.forEach((observer) => observer(this.ids));
+  }
+  get ids() {
+    return Array.from(this._ids);
+  }
 }
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$k = (a, b) => {
+var __defProp$j = Object.defineProperty;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$j = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$k.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
+    if (__hasOwnProp$j.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$f = (source, exclude) => {
+var __objRest$i = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
+  if (source != null && __getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1482,7 +1362,7 @@ const INPUT_INTERACTION_VARIANTS = [
   "hovered",
   "disabled"
 ];
-const { interactionVariants: interactionVariants$9 } = pickAriaComponentVariants(
+const { interactionVariants: interactionVariants$a } = pickAriaComponentVariants(
   INPUT_INTERACTION_VARIANTS
 );
 const inputHelpers$1 = {
@@ -1501,7 +1381,7 @@ function BaseInput(props) {
     setControlContextData,
     disabled,
     autoComplete
-  } = _a, rest = __objRest$f(_a, [
+  } = _a, rest = __objRest$i(_a, [
     "updateInteractionVariant",
     "setControlContextData",
     "disabled",
@@ -1526,7 +1406,7 @@ function BaseInput(props) {
   }, [mergedProps.disabled, updateInteractionVariant]);
   return /* @__PURE__ */ React.createElement(
     Input,
-    __spreadValues$k({
+    __spreadValues$j({
       autoComplete: resolveAutoComplete(autoComplete),
       onHoverChange: (isHovered) => {
         updateInteractionVariant == null ? void 0 : updateInteractionVariant({
@@ -1556,15 +1436,15 @@ function registerInput(loader, overrides) {
       displayName: "Aria Input",
       importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
       importName: "BaseInput",
-      interactionVariants: interactionVariants$9,
+      interactionVariants: interactionVariants$a,
       defaultStyles: {
         width: "300px",
         borderWidth: "1px",
         borderStyle: "solid",
         borderColor: "black",
-        padding: "2px 10px"
+        padding: "4px 10px"
       },
-      props: __spreadValues$k({}, getCommonProps("Input", [
+      props: __spreadValues$j({}, getCommonProps("Input", [
         "name",
         "disabled",
         "readOnly",
@@ -1595,7 +1475,7 @@ function registerInput(loader, overrides) {
         "onInput"
       ])),
       states: {
-        value: __spreadValues$k({
+        value: __spreadValues$j({
           type: "writable",
           valueProp: "value",
           onChangeProp: "onChange",
@@ -1613,46 +1493,98 @@ function registerInput(loader, overrides) {
   );
 }
 
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError(_) {
-    return { hasError: true };
-  }
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallback;
-    }
-    return this.props.children;
-  }
-}
-
-var __defProp$j = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$j = (a, b) => {
+var __defProp$i = Object.defineProperty;
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$i = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$j.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$j(a, prop, b[prop]);
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __objRest$h = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const LIST_BOX_ITEM_INTERACTION_VARIANTS = [
+  "hovered",
+  "pressed",
+  "focused",
+  "focusVisible",
+  "selected",
+  "disabled"
+];
+const { interactionVariants: interactionVariants$9, withObservedValues: withObservedValues$8 } = pickAriaComponentVariants(
+  LIST_BOX_ITEM_INTERACTION_VARIANTS
+);
 function BaseListBoxItem(props) {
-  const contextProps = React.useContext(PlasmicItemContext);
-  const mergedProps = mergeProps$1(contextProps, props);
-  const listboxItem = /* @__PURE__ */ React.createElement(ListBoxItem, __spreadProps$9(__spreadValues$j({}, mergedProps), { textValue: contextProps == null ? void 0 : contextProps.label }), mergedProps.children);
-  return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React.createElement(ListBox, null, listboxItem) }, listboxItem);
+  const _a = props, {
+    children,
+    setControlContextData,
+    updateInteractionVariant,
+    id
+  } = _a, rest = __objRest$h(_a, [
+    "children",
+    "setControlContextData",
+    "updateInteractionVariant",
+    "id"
+  ]);
+  const listboxContext = React.useContext(PlasmicListBoxContext);
+  const isStandalone = !listboxContext;
+  const [registeredId, setRegisteredId] = useState();
+  useEffect(() => {
+    if (!listboxContext) {
+      return;
+    }
+    const localId = listboxContext.idManager.register(id);
+    setRegisteredId(localId);
+    return () => {
+      listboxContext.idManager.unregister(localId);
+      setRegisteredId(void 0);
+    };
+  }, [id]);
+  setControlContextData == null ? void 0 : setControlContextData({
+    // this means that a unique id was registered, different from the provided id
+    hasDuplicateId: !isStandalone && id !== registeredId
+  });
+  const listboxItem = /* @__PURE__ */ React.createElement(ListBoxItem, __spreadValues$i({ key: registeredId, id: registeredId }, rest), ({
+    isHovered,
+    isPressed,
+    isFocused,
+    isFocusVisible,
+    isSelected,
+    isDisabled
+  }) => withObservedValues$8(
+    children,
+    {
+      hovered: isHovered,
+      pressed: isPressed,
+      focused: isFocused,
+      focusVisible: isFocusVisible,
+      selected: isSelected,
+      disabled: isDisabled
+    },
+    updateInteractionVariant
+  ));
+  if (isStandalone) {
+    return /* @__PURE__ */ React.createElement(ListBox, { selectionMode: "single" }, listboxItem);
+  }
+  return listboxItem;
 }
 const makeDefaultListBoxItemChildren = (label, description) => ({
   type: "vbox",
@@ -1700,7 +1632,23 @@ function registerListBoxItem(loader, overrides) {
       displayName: "Aria ListBoxItem",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBoxItem",
       importName: "BaseListBoxItem",
+      interactionVariants: interactionVariants$9,
       props: {
+        id: {
+          type: "string",
+          description: "The id of the item",
+          required: true,
+          validator: (_value, _props, ctx) => {
+            if (ctx == null ? void 0 : ctx.hasDuplicateId) {
+              return "Please make sure the id is unique!";
+            }
+            return true;
+          }
+        },
+        textValue: {
+          type: "string",
+          description: "A text representation of the item's contents, used for features like typeahead."
+        },
         children: {
           type: "slot",
           defaultValue: makeDefaultListBoxItemChildren("Item")
@@ -1711,45 +1659,6 @@ function registerListBoxItem(loader, overrides) {
   );
 }
 
-var __defProp$i = Object.defineProperty;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$i.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
-    }
-  return a;
-};
-function BaseHeader(props) {
-  const contextProps = React.useContext(PlasmicHeaderContext);
-  return /* @__PURE__ */ React.createElement(Header, __spreadValues$i({}, mergeProps$1(contextProps, props)));
-}
-function registerHeader(loader, overrides) {
-  return registerComponentHelper(
-    loader,
-    BaseHeader,
-    {
-      name: makeComponentName("header"),
-      displayName: "Aria Header",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerHeader",
-      importName: "BaseHeader",
-      defaultStyles: {
-        fontWeight: "bold",
-        fontSize: "20px"
-      },
-      props: {}
-    },
-    overrides
-  );
-}
-
 var __defProp$h = Object.defineProperty;
 var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
 var __hasOwnProp$h = Object.prototype.hasOwnProperty;
@@ -1766,22 +1675,25 @@ var __spreadValues$h = (a, b) => {
     }
   return a;
 };
+var __objRest$g = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 function BaseSection(props) {
-  const contextProps = React.useContext(PlasmicSectionContext);
-  const mergedProps = mergeProps$1(contextProps, props);
-  const { section, renderHeader, key, renderItem } = mergedProps;
-  return /* @__PURE__ */ React.createElement(Section, __spreadValues$h({ id: key }, mergedProps), /* @__PURE__ */ React.createElement(PlasmicHeaderContext.Provider, { value: { children: section == null ? void 0 : section.label } }, renderHeader == null ? void 0 : renderHeader(section)), /* @__PURE__ */ React.createElement(Collection, { items: section == null ? void 0 : section.items }, (item) => {
-    return /* @__PURE__ */ React.createElement(PlasmicItemContext.Provider, { value: item }, renderItem == null ? void 0 : renderItem(item));
-  }));
+  const _a = props, { header, items } = _a, rest = __objRest$g(_a, ["header", "items"]);
+  const contextProps = React.useContext(PlasmicListBoxContext);
+  const mergedProps = mergeProps$1(contextProps, rest);
+  return /* @__PURE__ */ React.createElement(Section, __spreadValues$h({}, mergedProps), /* @__PURE__ */ React.createElement(Header, null, header), items);
 }
 function registerSection(loader, overrides) {
-  const thisName = makeChildComponentName(
-    overrides == null ? void 0 : overrides.parentComponentName,
-    makeComponentName("section")
-  );
-  const headerMeta = registerHeader(loader, {
-    parentComponentName: thisName
-  });
   return registerComponentHelper(
     loader,
     BaseSection,
@@ -1795,14 +1707,17 @@ function registerSection(loader, overrides) {
         padding: "10px"
       },
       props: {
-        renderHeader: {
+        header: {
           type: "slot",
-          displayName: "Render section header",
-          renderPropParams: ["sectionProps"],
-          defaultValue: {
-            type: "component",
-            name: headerMeta.name
-          }
+          defaultValue: [
+            {
+              type: "text",
+              value: "Section Header."
+            }
+          ]
+        },
+        items: {
+          type: "slot"
         }
       }
     },
@@ -1811,8 +1726,6 @@ function registerSection(loader, overrides) {
 }
 
 var __defProp$g = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
 var __hasOwnProp$g = Object.prototype.hasOwnProperty;
 var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
@@ -1828,8 +1741,7 @@ var __spreadValues$g = (a, b) => {
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$e = (source, exclude) => {
+var __objRest$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1841,37 +1753,71 @@ var __objRest$e = (source, exclude) => {
     }
   return target;
 };
-function BaseListBox(props) {
-  const contextProps = React.useContext(PlasmicListBoxContext);
-  const isStandalone = !contextProps;
-  const _a = props, { options: _rawOptions, setControlContextData } = _a, rest = __objRest$e(_a, ["options", "setControlContextData"]);
-  const { options } = useStrictOptions(props);
-  const _b = mergeProps$1(
-    contextProps,
-    rest,
-    isStandalone ? { items: options } : {}
-  ), { renderItem, renderSection } = _b, mergedProps = __objRest$e(_b, ["renderItem", "renderSection"]);
-  setControlContextData == null ? void 0 : setControlContextData({
-    parent: isStandalone ? void 0 : {}
-  });
-  return /* @__PURE__ */ React.createElement(ListBox, __spreadValues$g({}, mergedProps), (item) => {
-    var _a2;
-    if (item.type === "option-group") {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        PlasmicSectionContext.Provider,
-        {
-          value: {
-            renderItem,
-            key: (_a2 = item.key) != null ? _a2 : item.label,
-            section: item
-          }
-        },
-        renderSection == null ? void 0 : renderSection(item)
-      ));
-    } else {
-      return /* @__PURE__ */ React.createElement(PlasmicItemContext.Provider, { value: item }, renderItem == null ? void 0 : renderItem(item));
+const listboxHelpers = {
+  states: {
+    selectedKey: {
+      onChangeArgsToValue: (value) => {
+        return Array.from(value)[0];
+      }
     }
-  });
+  }
+};
+function normalizeSelectedKeys(selectedKeys) {
+  return typeof selectedKeys === "string" && selectedKeys !== "all" ? [selectedKeys] : selectedKeys;
+}
+function BaseListBox(props) {
+  const _a = props, {
+    setControlContextData,
+    children,
+    selectedKeys,
+    defaultSelectedKeys
+  } = _a, rest = __objRest$f(_a, [
+    "setControlContextData",
+    "children",
+    "selectedKeys",
+    "defaultSelectedKeys"
+  ]);
+  const context = React.useContext(PlasmicListBoxContext);
+  const isStandalone = !context;
+  const [ids, setIds] = useState([]);
+  const idManager = useMemo(
+    () => {
+      var _a2;
+      return (_a2 = context == null ? void 0 : context.idManager) != null ? _a2 : new ListBoxItemIdManager();
+    },
+    []
+  );
+  useEffect(() => {
+    setControlContextData == null ? void 0 : setControlContextData({
+      itemIds: ids,
+      isStandalone
+    });
+  }, [ids, isStandalone]);
+  useEffect(() => {
+    idManager.subscribe((_ids) => {
+      setIds(_ids);
+    });
+  }, []);
+  const listbox = /* @__PURE__ */ React.createElement(
+    ListBox,
+    __spreadValues$g({
+      selectedKeys: normalizeSelectedKeys(selectedKeys),
+      defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys)
+    }, rest),
+    children
+  );
+  if (isStandalone) {
+    return /* @__PURE__ */ React.createElement(
+      PlasmicListBoxContext.Provider,
+      {
+        value: {
+          idManager
+        }
+      },
+      listbox
+    );
+  }
+  return listbox;
 }
 const LIST_BOX_COMPONENT_NAME = makeComponentName("listbox");
 function registerListBox(loader, overrides) {
@@ -1879,7 +1825,56 @@ function registerListBox(loader, overrides) {
     parentComponentName: LIST_BOX_COMPONENT_NAME
   });
   const sectionMeta = registerSection(loader, {
-    parentComponentName: LIST_BOX_COMPONENT_NAME
+    parentComponentName: LIST_BOX_COMPONENT_NAME,
+    props: {
+      items: {
+        type: "slot",
+        defaultValue: [
+          {
+            type: "component",
+            name: listBoxItemMeta.name,
+            props: {
+              id: "section-1-1",
+              textValue: "Section1-Item 1",
+              children: [
+                makeDefaultListBoxItemChildren(
+                  "Item 1",
+                  "Add dynamic values to make it more interesting"
+                )
+              ]
+            }
+          },
+          {
+            type: "component",
+            name: listBoxItemMeta.name,
+            props: {
+              id: "section-1-2",
+              textValue: "Section1-Item 2",
+              children: [
+                makeDefaultListBoxItemChildren(
+                  "Item 2",
+                  "Add dynamic values to make it more interesting"
+                )
+              ]
+            }
+          },
+          {
+            type: "component",
+            name: listBoxItemMeta.name,
+            props: {
+              id: "section-1-3",
+              textValue: "Section1-Item 3",
+              children: [
+                makeDefaultListBoxItemChildren(
+                  "Item 3",
+                  "Add dynamic values to make it more interesting"
+                )
+              ]
+            }
+          }
+        ]
+      }
+    }
   });
   registerComponentHelper(
     loader,
@@ -1896,38 +1891,97 @@ function registerListBox(loader, overrides) {
         borderColor: "black"
       },
       props: {
-        options: __spreadProps$8(__spreadValues$g({}, makeOptionsPropType()), {
-          displayName: "Items",
-          hidden: hasParent
-        }),
-        renderItem: {
+        children: {
           type: "slot",
-          displayName: "Render Item",
-          renderPropParams: ["itemProps"],
-          defaultValue: {
-            type: "component",
-            name: listBoxItemMeta.name,
-            props: {
-              children: makeDefaultListBoxItemChildren(
-                "Item (itemProps.label)",
-                "Connect with `itemProps` in the data picker to display list box items"
-              )
+          displayName: "List Items",
+          allowedComponents: [listBoxItemMeta.name, sectionMeta.name],
+          allowRootWrapper: true,
+          defaultValue: [
+            {
+              type: "component",
+              name: listBoxItemMeta.name,
+              props: {
+                id: "1",
+                textValue: "Item 1",
+                children: [
+                  makeDefaultListBoxItemChildren(
+                    "Item 1",
+                    "Add dynamic values to make it more interesting"
+                  )
+                ]
+              }
+            },
+            {
+              type: "component",
+              name: listBoxItemMeta.name,
+              props: {
+                id: "2",
+                textValue: "Item 2",
+                children: [
+                  makeDefaultListBoxItemChildren(
+                    "Item 2",
+                    "Add dynamic values to make it more interesting"
+                  )
+                ]
+              }
+            },
+            {
+              type: "component",
+              name: listBoxItemMeta.name,
+              props: {
+                id: "3",
+                textValue: "Item 3",
+                children: [
+                  makeDefaultListBoxItemChildren(
+                    "Item 3",
+                    "Add dynamic values to make it more interesting"
+                  )
+                ]
+              }
+            },
+            {
+              type: "component",
+              name: sectionMeta.name
             }
-          }
+          ]
         },
-        renderSection: {
-          type: "slot",
-          displayName: "Render Section",
-          renderPropParams: ["sectionProps"],
-          defaultValue: {
-            type: "component",
-            name: sectionMeta.name,
-            styles: {
-              backgroundColor: "#F4FAFF"
-            }
-          }
+        selectionMode: {
+          type: "choice",
+          description: "The selection mode of the listbox",
+          options: ["none", "single"],
+          defaultValue: "none",
+          hidden: (_props, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
+        },
+        selectedKeys: {
+          type: "choice",
+          description: "The selected keys of the listbox",
+          editOnly: true,
+          uncontrolledProp: "defaultSelectedKeys",
+          displayName: "Initial selected key",
+          options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
+          hidden: (props, ctx) => !(ctx == null ? void 0 : ctx.isStandalone) || props.selectionMode === "none",
+          // We do not support multiple selections yet (Because React Aria select and combobox only support single selections).
+          multiSelect: false
+        },
+        onSelectionChange: {
+          type: "eventHandler",
+          argTypes: [{ name: "itemIds", type: "object" }]
         }
-      }
+      },
+      states: {
+        selectedKey: __spreadValues$g({
+          type: "writable",
+          valueProp: "selectedKeys",
+          onChangeProp: "onSelectionChange",
+          variableType: "text"
+        }, listboxHelpers.states.selectedKey)
+      },
+      componentHelpers: {
+        helpers: listboxHelpers,
+        importName: "listboxHelpers",
+        importPath: "@plasmicpkgs/react-aria/skinny/registerListBox"
+      },
+      trapsFocus: true
     },
     overrides
   );
@@ -1949,7 +2003,7 @@ var __spreadValues$f = (a, b) => {
     }
   return a;
 };
-var __objRest$d = (source, exclude) => {
+var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1962,7 +2016,7 @@ var __objRest$d = (source, exclude) => {
   return target;
 };
 function BasePopover(props) {
-  const _a = props, { resetClassName, setControlContextData } = _a, restProps = __objRest$d(_a, ["resetClassName", "setControlContextData"]);
+  const _a = props, { resetClassName, setControlContextData } = _a, restProps = __objRest$e(_a, ["resetClassName", "setControlContextData"]);
   const isStandalone = !React.useContext(PopoverContext);
   const context = React.useContext(PlasmicPopoverContext);
   const isInsideSelect = !!React.useContext(SelectContext);
@@ -1995,7 +2049,6 @@ function BasePopover(props) {
 const POPOVER_COMPONENT_NAME = makeComponentName("popover");
 const POPOVER_ARROW_IMG = {
   type: "img",
-  // TODO: Replace with the image of an arrow pointing up, like: https://icon-sets.iconify.design/mdi/triangle/
   src: "https://static1.plasmic.app/arrow-up.svg",
   styles: {
     position: "absolute",
@@ -2059,7 +2112,7 @@ function registerPopover(loader, overrides) {
           type: "number",
           displayName: "Offset",
           description: "Additional offset applied vertically between the popover and its trigger",
-          defaultValueHint: 0
+          defaultValueHint: 8
         },
         shouldFlip: {
           type: "boolean",
@@ -2093,8 +2146,8 @@ function registerPopover(loader, overrides) {
 }
 
 var __defProp$e = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
 var __hasOwnProp$e = Object.prototype.hasOwnProperty;
 var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
@@ -2110,226 +2163,77 @@ var __spreadValues$e = (a, b) => {
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-function BaseComboBox(props) {
-  const {
-    value,
-    onChange,
-    menuTrigger,
-    filterValue,
-    onFilterValueChange,
-    valueType,
-    allowsCustomValue,
-    placeholder,
-    previewOpen,
-    onOpenChange,
-    isDisabled,
-    className,
-    style,
-    structure,
-    name
-  } = props;
-  const { options, optionText } = useStrictOptions(props);
-  const { contains } = useFilter({ sensitivity: "base" });
-  const [showAllOptions, setShowAllOptions] = React.useState(false);
-  const filteredOptions = React.useMemo(() => {
-    if (!filterValue || filterValue.trim().length === 0) {
-      return options;
-    }
-    if (!options) {
-      return options;
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __objRest$d = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
+        target[prop] = source[prop];
     }
-    const filterOptions = (opts) => {
-      return withoutNils(
-        opts.map((op) => {
-          if (op.type === "option-group") {
-            return __spreadProps$7(__spreadValues$e({}, op), {
-              items: op.items ? filterOptions(op.items) : void 0
-            });
-          } else {
-            if (contains(optionText(op), filterValue)) {
-              return op;
-            } else {
-              return void 0;
-            }
-          }
-        })
-      );
-    };
-    return filterOptions(options);
-  }, [filterValue, options, contains, optionText]);
-  const flattenedOptions = React.useMemo(
-    () => flattenOptions(options),
-    [options]
-  );
-  const disabledKeys = flattenedOptions.filter((op) => op.isDisabled).map((op) => op.id);
-  const onSelectionChange = React.useCallback(
-    (key) => {
-      if (key === null) {
-        return;
-      }
-      const selectedOption = flattenedOptions == null ? void 0 : flattenedOptions.find((op) => op.id === key);
-      if (valueType === "text") {
-        if (selectedOption) {
-          onChange == null ? void 0 : onChange(optionText(selectedOption));
-        }
-      } else {
-        onChange == null ? void 0 : onChange(key);
-      }
-      if (selectedOption) {
-        onFilterValueChange == null ? void 0 : onFilterValueChange(optionText(selectedOption));
-      }
-    },
-    [flattenedOptions, valueType, onChange, optionText, onFilterValueChange]
-  );
-  const onInputValueChange = React.useCallback(
-    (newValue) => {
-      onFilterValueChange == null ? void 0 : onFilterValueChange(newValue);
-      setShowAllOptions(false);
-      if (valueType === "text") {
-        if (allowsCustomValue) {
-          onChange == null ? void 0 : onChange(newValue);
-        } else {
-          const matchingOption = flattenedOptions == null ? void 0 : flattenedOptions.find(
-            (op) => optionText(op) === newValue
-          );
-          if (matchingOption) {
-            onChange == null ? void 0 : onChange(optionText(matchingOption));
-          }
-        }
+  return target;
+};
+const COMBOBOX_NAME = makeComponentName("combobox");
+function BaseComboBox(props) {
+  const _a = props, { children, setControlContextData, isOpen } = _a, rest = __objRest$d(_a, ["children", "setControlContextData", "isOpen"]);
+  const idManager = useMemo(() => new ListBoxItemIdManager(), []);
+  useEffect(() => {
+    idManager.subscribe((ids) => {
+      setControlContextData == null ? void 0 : setControlContextData({
+        itemIds: ids
+      });
+    });
+  }, []);
+  return /* @__PURE__ */ React.createElement(ComboBox, __spreadValues$e({}, rest), /* @__PURE__ */ React.createElement(PlasmicPopoverContext.Provider, { value: { isOpen } }, /* @__PURE__ */ React.createElement(
+    PlasmicListBoxContext.Provider,
+    {
+      value: {
+        idManager
       }
     },
-    [
-      onFilterValueChange,
-      onChange,
-      flattenedOptions,
-      optionText,
-      valueType,
-      allowsCustomValue
-    ]
-  );
-  const onBlur = React.useCallback(() => {
-    if (!allowsCustomValue) {
-      const selectedOption = flattenedOptions == null ? void 0 : flattenedOptions.find(
-        (op) => valueType === "text" ? optionText(op) === value : op.id === value
-      );
-      if (selectedOption) {
-        const selectedOptionText = optionText(selectedOption);
-        if (selectedOptionText !== filterValue) {
-          onFilterValueChange == null ? void 0 : onFilterValueChange(selectedOptionText);
-        }
-      }
-    }
-  }, [
-    allowsCustomValue,
-    flattenedOptions,
-    valueType,
-    optionText,
-    value,
-    filterValue,
-    onFilterValueChange
-  ]);
-  return /* @__PURE__ */ React.createElement(
-    ComboBox,
-    __spreadValues$e({
-      selectedKey: value,
-      onSelectionChange,
-      isDisabled,
-      className,
-      style,
-      items: showAllOptions ? options : filteredOptions,
-      menuTrigger,
-      inputValue: filterValue,
-      onInputChange: onInputValueChange,
-      allowsCustomValue,
-      disabledKeys,
-      onOpenChange: (isOpen, trigger) => {
-        if (isOpen && trigger === "manual") {
-          setShowAllOptions(true);
-        } else {
-          setShowAllOptions(false);
-        }
-        onOpenChange == null ? void 0 : onOpenChange(isOpen);
-      },
-      onBlur,
-      formValue: valueType === "text" ? "text" : "key",
-      name
-    }, extractPlasmicDataProps(props)),
-    /* @__PURE__ */ React.createElement(
-      PlasmicListBoxContext.Provider,
-      {
-        value: {
-          getItemType: (option) => option.type === "section" ? "section" : "item"
-        }
-      },
-      /* @__PURE__ */ React.createElement(PlasmicInputContext.Provider, { value: { placeholder } }, structure)
-    ),
-    /* @__PURE__ */ React.createElement(BaseComboBoxEffects, { previewOpen })
-  );
-}
-function BaseComboBoxEffects(props) {
-  const { previewOpen } = props;
-  const comboBoxState = React.useContext(ComboBoxStateContext);
-  const prevPreviewOpenRef = React.useRef(previewOpen);
-  React.useEffect(() => {
-    if (comboBoxState) {
-      if (previewOpen) {
-        comboBoxState.open(void 0, "manual");
-      } else if (prevPreviewOpenRef.current) {
-        comboBoxState.close();
-      }
-    }
-    prevPreviewOpenRef.current = previewOpen;
-  }, [previewOpen, comboBoxState, prevPreviewOpenRef]);
-  return null;
+    children
+  )));
 }
 function registerComboBox(loader) {
-  const rootName = makeComponentName("combobox");
   registerComponentHelper(loader, BaseComboBox, {
-    name: rootName,
+    name: COMBOBOX_NAME,
     displayName: "Aria ComboBox",
     importPath: "@plasmicpkgs/react-aria/skinny/registerComboBox",
     importName: "BaseComboBox",
-    props: {
-      options: makeOptionsPropType(),
-      value: makeValuePropType(),
-      onChange: {
-        type: "eventHandler",
-        argTypes: [{ name: "value", type: "string" }]
-      },
-      filterValue: {
-        type: "string"
-      },
-      onFilterValueChange: {
-        type: "eventHandler",
-        argTypes: [{ name: "value", type: "string" }]
-      },
-      isDisabled: {
-        type: "boolean"
-      },
-      valueType: {
-        displayName: "`value` Type",
+    props: __spreadProps$8(__spreadValues$e({}, getCommonProps("ComboBox", [
+      "name",
+      "aria-label",
+      "placeholder",
+      "isDisabled"
+    ])), {
+      selectedKey: {
         type: "choice",
-        options: [
-          { value: "value", label: "By option value" },
-          { value: "text", label: "By option text" }
-        ],
-        defaultValueHint: "value",
-        description: "This controls whether `value` and `onChange` are option values or option text.  Choosing `text` allows you to optionally allow a custom value that's not in the provided list of options.",
-        advanced: true
+        description: "The selected keys of the listbox",
+        editOnly: true,
+        uncontrolledProp: "defaultSelectedKey",
+        displayName: "Initial selected key",
+        options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
+        // React Aria ComboBox do not support multiple comboBoxions yet
+        multiSelect: false
       },
-      allowsCustomValue: {
+      isOpen: {
         type: "boolean",
-        displayName: "Allows custom value?",
-        description: "Allows entering a value that is not one of the options",
-        hidden: (ps) => ps.valueType !== "text",
-        advanced: true
+        defaultValue: false,
+        // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.
+        hidden: () => true
+      },
+      onSelectionChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "selectedKey", type: "string" }]
       },
       onOpenChange: {
         type: "eventHandler",
         argTypes: [{ name: "isOpen", type: "boolean" }]
       },
-      structure: {
+      children: {
         type: "slot",
         defaultValue: [
           {
@@ -2353,45 +2257,24 @@ function registerComboBox(loader) {
               },
               {
                 type: "hbox",
-                styles: {
-                  width: "stretch",
-                  borderWidth: "1px",
-                  borderStyle: "solid",
-                  borderColor: "black",
-                  padding: 0,
-                  position: "relative"
-                },
                 children: [
                   {
                     type: "component",
                     name: INPUT_COMPONENT_NAME,
                     styles: {
-                      borderWidth: 0,
-                      width: "100%",
-                      padding: "2px 30px 2px 10px"
+                      width: "100%"
                     }
                   },
                   {
                     type: "component",
                     name: BUTTON_COMPONENT_NAME,
-                    styles: {
-                      borderWidth: 0,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      position: "absolute",
-                      right: "10px",
-                      top: 0,
-                      padding: 0,
-                      height: "100%"
-                    },
                     props: {
                       children: {
                         type: "img",
+                        // TODO: Replace with the image of an arrow pointing up, like: https://icon-sets.iconify.design/mdi/triangle/
                         src: "https://static1.plasmic.app/arrow-up.svg",
                         styles: {
-                          height: "20px",
-                          width: "20px",
+                          width: "15px",
                           transform: "rotate(180deg)"
                         }
                       }
@@ -2404,15 +2287,18 @@ function registerComboBox(loader) {
                 name: POPOVER_COMPONENT_NAME,
                 styles: {
                   backgroundColor: "white",
-                  width: "300px",
                   padding: "10px",
                   overflow: "scroll"
                 },
                 props: {
+                  offset: 0,
                   children: [
                     {
                       type: "component",
                       name: LIST_BOX_COMPONENT_NAME,
+                      props: {
+                        selectionMode: "single"
+                      },
                       styles: {
                         borderWidth: 0,
                         width: "stretch"
@@ -2424,29 +2310,18 @@ function registerComboBox(loader) {
             ]
           }
         ]
-      },
-      previewOpen: {
-        type: "boolean",
-        displayName: "Preview opened?",
-        description: "Preview opened state while designing in Plasmic editor",
-        editOnly: true
       }
-    },
+    }),
     states: {
-      value: {
+      selectedKey: {
         type: "writable",
-        valueProp: "value",
-        onChangeProp: "onChange",
-        variableType: "text"
-      },
-      filterValue: {
-        type: "writable",
-        valueProp: "filterValue",
-        onChangeProp: "onFilterValueChange",
+        valueProp: "selectedKey",
+        onChangeProp: "onSelectionChange",
         variableType: "text"
       },
       isOpen: {
-        type: "readonly",
+        type: "writable",
+        valueProp: "isOpen",
         onChangeProp: "onOpenChange",
         variableType: "boolean"
       }
@@ -2455,8 +2330,8 @@ function registerComboBox(loader) {
 }
 
 var __defProp$d = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
 var __hasOwnProp$d = Object.prototype.hasOwnProperty;
 var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
@@ -2472,7 +2347,7 @@ var __spreadValues$d = (a, b) => {
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2526,7 +2401,7 @@ const BaseModal = forwardRef(
     const body = /* @__PURE__ */ React.createElement(React.Fragment, null, heading && /* @__PURE__ */ React.createElement(Heading, { slot: "title" }, heading), children);
     return /* @__PURE__ */ React.createElement(
       ModalOverlay,
-      __spreadProps$6(__spreadValues$d({}, mergedProps), {
+      __spreadProps$7(__spreadValues$d({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
       /* @__PURE__ */ React.createElement(Modal, { className }, isCanvas ? body : /* @__PURE__ */ React.createElement(Dialog, null, body))
@@ -2825,8 +2700,8 @@ function registerForm(loader, overrides) {
 }
 
 var __defProp$a = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
 var __hasOwnProp$a = Object.prototype.hasOwnProperty;
 var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
@@ -2842,7 +2717,7 @@ var __spreadValues$a = (a, b) => {
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2943,7 +2818,7 @@ function registerRadio(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadio",
       importName: "BaseRadio",
       interactionVariants: interactionVariants$8,
-      props: __spreadProps$5(__spreadValues$a({}, getCommonProps("radio", [
+      props: __spreadProps$6(__spreadValues$a({}, getCommonProps("radio", [
         "isDisabled",
         "autoFocus",
         "aria-label"
@@ -2965,8 +2840,8 @@ function registerRadio(loader, overrides) {
 }
 
 var __defProp$9 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
 var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
 var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
@@ -2982,7 +2857,7 @@ var __spreadValues$9 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3031,7 +2906,7 @@ function registerRadioGroup(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadioGroup",
       importName: "BaseRadioGroup",
       interactionVariants: interactionVariants$7,
-      props: __spreadProps$4(__spreadValues$9({}, getCommonProps("radio group", [
+      props: __spreadProps$5(__spreadValues$9({}, getCommonProps("radio group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -3138,6 +3013,8 @@ function registerRadioGroup(loader, overrides) {
 }
 
 var __defProp$8 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
 var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
 var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
@@ -3153,6 +3030,7 @@ var __spreadValues$8 = (a, b) => {
     }
   return a;
 };
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 const BaseSelectValue = (props) => {
   const { children, customize } = props;
   return /* @__PURE__ */ React.createElement(SelectValue, null, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React.createElement(React.Fragment, null, isPlaceholder ? /* @__PURE__ */ React.createElement("span", null, "Select an item") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", null, customize ? children : selectedText))));
@@ -3160,29 +3038,36 @@ const BaseSelectValue = (props) => {
 const SELECT_NAME = makeComponentName("select");
 function BaseSelect(props) {
   const {
-    value,
-    onChange,
+    selectedKey,
+    onSelectionChange,
     placeholder,
     previewOpen,
     onOpenChange,
     isDisabled,
     className,
     style,
-    structure,
+    children,
     name,
     isOpen,
+    setControlContextData,
     "aria-label": ariaLabel
   } = props;
-  const { options } = useStrictOptions(props);
   const isEditMode = !!usePlasmicCanvasContext();
   const openProp = isEditMode && previewOpen ? true : isOpen;
-  const disabledKeys = flattenOptions(options).filter((op) => op.isDisabled).map((op) => op.id);
+  let idManager = useMemo(() => new ListBoxItemIdManager(), []);
+  useEffect(() => {
+    idManager.subscribe((ids) => {
+      setControlContextData == null ? void 0 : setControlContextData({
+        itemIds: ids
+      });
+    });
+  }, []);
   return /* @__PURE__ */ React.createElement(
     Select,
     __spreadValues$8({
       placeholder,
-      selectedKey: value,
-      onSelectionChange: onChange,
+      selectedKey,
+      onSelectionChange,
       onOpenChange,
       isDisabled,
       className,
@@ -3195,11 +3080,10 @@ function BaseSelect(props) {
       PlasmicListBoxContext.Provider,
       {
         value: {
-          items: options,
-          disabledKeys
+          idManager
         }
       },
-      structure
+      children
     ))
   );
 }
@@ -3241,27 +3125,44 @@ function registerSelect(loader) {
     displayName: "Aria Select",
     importPath: "@plasmicpkgs/react-aria/skinny/registerSelect",
     importName: "BaseSelect",
-    props: {
-      options: makeOptionsPropType(),
-      placeholder: {
-        type: "string"
-      },
-      isDisabled: {
-        type: "boolean"
+    props: __spreadProps$4(__spreadValues$8({}, getCommonProps("Select", [
+      "name",
+      "aria-label",
+      "placeholder",
+      "isDisabled",
+      "autoFocus"
+    ])), {
+      selectedKey: {
+        type: "choice",
+        description: "The selected keys of the listbox",
+        editOnly: true,
+        uncontrolledProp: "defaultSelectedKey",
+        displayName: "Initial selected key",
+        options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
+        // React Aria Select do not support multiple selections yet
+        multiSelect: false
       },
-      value: makeValuePropType(),
-      onChange: {
+      onSelectionChange: {
         type: "eventHandler",
         argTypes: [{ name: "value", type: "string" }]
       },
+      disabledKeys: {
+        type: "choice",
+        description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+        options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
+        multiSelect: true,
+        advanced: true
+      },
       previewOpen: {
         type: "boolean",
         displayName: "Preview opened?",
         description: "Preview opened state while designing in Plasmic editor",
-        editOnly: true
+        editOnly: true,
+        defaultValue: false
       },
       isOpen: {
         type: "boolean",
+        defaultValue: false,
         // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.
         hidden: () => true
       },
@@ -3269,40 +3170,7 @@ function registerSelect(loader) {
         type: "eventHandler",
         argTypes: [{ name: "isOpen", type: "boolean" }]
       },
-      // optionValue: {
-      //   type: "string",
-      //   displayName: "Field key for an option's value",
-      //   hidden: (ps) =>
-      //     !ps.options ||
-      //     !ps.options[0] ||
-      //     typeof ps.options[0] === "string" ||
-      //     "value" in ps.options[0],
-      //   exprHint:
-      //     "Return a function that takes in an option object, and returns the key to use",
-      // },
-      // optionText: {
-      //   type: "string",
-      //   displayName: "Field key for an option's text value",
-      //   hidden: (ps) =>
-      //     !ps.options ||
-      //     !ps.options[0] ||
-      //     typeof ps.options[0] === "string" ||
-      //     "value" in ps.options[0],
-      //   exprHint:
-      //     "Return a function that takes in an option object, and returns the text value to use",
-      // },
-      // optionDisabled: {
-      //   type: "string",
-      //   displayName: "Field key for whether an option is disabled",
-      //   hidden: (ps) =>
-      //     !ps.options ||
-      //     !ps.options[0] ||
-      //     typeof ps.options[0] === "string" ||
-      //     "value" in ps.options[0],
-      //   exprHint:
-      //     "Return a function that takes in an option object, and returns true if option should be disabled",
-      // },
-      structure: {
+      children: {
         type: "slot",
         defaultValue: [
           {
@@ -3370,6 +3238,9 @@ function registerSelect(loader) {
                     {
                       type: "component",
                       name: LIST_BOX_COMPONENT_NAME,
+                      props: {
+                        selectionMode: "single"
+                      },
                       styles: {
                         borderWidth: 0,
                         width: "stretch"
@@ -3381,31 +3252,13 @@ function registerSelect(loader) {
             ]
           }
         ]
-      },
-      // renderOption: {
-      //   type: "slot",
-      //   displayName: "Custom render option",
-      //   renderPropParams: ["item"],
-      //   hidePlaceholder: true
-      // },
-      name: {
-        type: "string",
-        displayName: "Form field key",
-        description: "Name of the input, when submitting in an HTML form",
-        advanced: true
-      },
-      "aria-label": {
-        type: "string",
-        displayName: "ARIA label",
-        description: "Label for this input, if no visible label is used",
-        advanced: true
       }
-    },
+    }),
     states: {
-      value: {
+      selectedKey: {
         type: "writable",
-        valueProp: "value",
-        onChangeProp: "onChange",
+        valueProp: "selectedKey",
+        onChangeProp: "onSelectionChange",
         variableType: "text"
       },
       isOpen: {
@@ -3480,6 +3333,22 @@ function registerSliderOutput(loader, overrides) {
   );
 }
 
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(_) {
+    return { hasError: true };
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+}
+
 var __defProp$6 = Object.defineProperty;
 var __defProps$3 = Object.defineProperties;
 var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;