@plasmicpkgs/react-aria 0.0.29 → 0.0.31

package/dist/react-aria.esm.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useImperativeHandle, Component, useMemo, useRef, useEffect } from 'react';
-import { Button, Checkbox, Text, FieldError, Label, CheckboxGroup, ComboBox, ComboBoxStateContext, DialogTrigger, Form, Input, ListBoxItem, ListBox, Heading, ModalOverlay, Modal, Dialog, PopoverContext, Popover, Radio, RadioGroup, Header, Section, Collection, SelectValue, Select, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField } from 'react-aria-components';
+import { Button, Label, Checkbox, Text, FieldError, CheckboxGroup, Input, ListBoxItem, Header, Section, Collection, ListBox, PopoverContext, 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 registerComponent from '@plasmicapp/host/registerComponent';
 import { useFilter } from '@react-aria/i18n';
 import { mergeProps } from '@react-aria/utils';
@@ -111,29 +111,29 @@ function pickAriaComponentVariants(keys) {
   };
 }
 
-var __defProp$p = Object.defineProperty;
+var __defProp$q = Object.defineProperty;
 var __defProps$d = Object.defineProperties;
 var __getOwnPropDescs$d = 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 __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$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$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$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 function registerComponentHelper(loader, component, meta, overrides) {
   if (overrides) {
-    meta = __spreadProps$d(__spreadValues$p(__spreadValues$p({}, meta), overrides), {
-      props: __spreadValues$p(__spreadValues$p({}, 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(
@@ -147,6 +147,7 @@ function registerComponentHelper(loader, component, meta, overrides) {
   } else {
     registerComponent(component, meta);
   }
+  return meta;
 }
 function makeComponentName(name) {
   return `plasmic-react-aria-${name}`;
@@ -169,21 +170,21 @@ function withoutNils(array) {
   return array.filter((x) => x != null);
 }
 
-var __defProp$o = Object.defineProperty;
+var __defProp$p = Object.defineProperty;
 var __defProps$c = Object.defineProperties;
 var __getOwnPropDescs$c = 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) => {
+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$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$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;
 };
@@ -191,11 +192,11 @@ var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
 var __objRest$h = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$o.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$o)
-    for (var prop of __getOwnPropSymbols$o(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.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;
@@ -222,7 +223,7 @@ function BaseButton(props) {
     "updateInteractionVariant"
   ]);
   const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-  return /* @__PURE__ */ React.createElement(Button, __spreadValues$o({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$5(
+  return /* @__PURE__ */ React.createElement(Button, __spreadValues$p({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$5(
     children,
     {
       hovered: isHovered,
@@ -233,21 +234,35 @@ function BaseButton(props) {
     updateInteractionVariant
   ));
 }
+const BUTTON_COMPONENT_NAME = makeComponentName("button");
 function registerButton(loader, overrides) {
   registerComponentHelper(
     loader,
     BaseButton,
     {
-      name: makeComponentName("button"),
+      name: BUTTON_COMPONENT_NAME,
       displayName: "Aria Button",
       importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
       interactionVariants: interactionVariants$7,
-      props: __spreadProps$c(__spreadValues$o({}, getCommonInputProps("button", [
+      defaultStyles: {
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "black",
+        padding: "2px 10px"
+      },
+      props: __spreadProps$c(__spreadValues$p({}, getCommonInputProps("button", [
         "isDisabled",
-        "aria-label",
-        "children"
+        "aria-label"
       ])), {
+        children: {
+          type: "slot",
+          mergeWithParent: true,
+          defaultValue: {
+            type: "text",
+            value: "Button"
+          }
+        },
         submitsForm: {
           type: "boolean",
           displayName: "Submits form?",
@@ -275,21 +290,58 @@ function registerButton(loader, overrides) {
   );
 }
 
-var __defProp$n = Object.defineProperty;
+const PlasmicCheckboxGroupContext = React.createContext(void 0);
+const PlasmicRadioGroupContext = React.createContext(void 0);
+const PlasmicDialogTriggerContext = React.createContext(void 0);
+const PlasmicSliderContext = React.createContext(void 0);
+React.createContext(void 0);
+const PlasmicListBoxContext = React.createContext(void 0);
+const PlasmicPopoverContext = 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);
+
+const BaseLabel = Label;
+const LABEL_COMPONENT_NAME = makeComponentName("label");
+function registerLabel(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseLabel,
+    {
+      name: LABEL_COMPONENT_NAME,
+      displayName: "Aria Label",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerLabel",
+      importName: "BaseLabel",
+      defaultStyles: {
+        cursor: "pointer"
+      },
+      props: {
+        children: {
+          type: "slot"
+        }
+      },
+      trapsFocus: true
+    },
+    overrides
+  );
+}
+
+var __defProp$o = 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 __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$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$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;
 };
@@ -297,11 +349,11 @@ var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
 var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$n.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$n)
-    for (var prop of __getOwnPropSymbols$n(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$n.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;
@@ -316,8 +368,13 @@ const { interactionVariants: interactionVariants$6, withObservedValues: withObse
   CHECKBOX_INTERACTION_VARIANTS
 );
 function BaseCheckbox(props) {
-  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$g(_a, ["children", "updateInteractionVariant"]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadValues$n({}, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$4(
+  const _a = props, { children, updateInteractionVariant, setControlContextData } = _a, rest = __objRest$g(_a, ["children", "updateInteractionVariant", "setControlContextData"]);
+  const contextProps = React.useContext(PlasmicCheckboxGroupContext);
+  const isStandalone = !contextProps;
+  setControlContextData == null ? void 0 : setControlContextData({
+    isStandalone
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadValues$o({}, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$4(
     children,
     {
       hovered: isHovered,
@@ -328,8 +385,60 @@ function BaseCheckbox(props) {
     updateInteractionVariant
   )));
 }
+const makeDefaultCheckboxChildren = ({
+  label,
+  showDocs
+}) => ({
+  type: "vbox",
+  styles: {
+    display: "flex",
+    alignItems: "center",
+    gap: "2px",
+    padding: 0
+  },
+  children: [
+    {
+      type: "hbox",
+      styles: {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        padding: 0
+      },
+      children: [
+        {
+          type: "box",
+          styles: {
+            width: "7px",
+            height: "7px",
+            borderRadius: "3px",
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: "black"
+          }
+        },
+        {
+          type: "component",
+          name: LABEL_COMPONENT_NAME,
+          props: {
+            children: {
+              type: "text",
+              value: label
+            }
+          }
+        }
+      ]
+    },
+    ...showDocs ? [
+      {
+        type: "text",
+        value: "Add interaction variants to see it in action..."
+      }
+    ] : []
+  ]
+});
 function registerCheckbox(loader, overrides) {
-  registerComponentHelper(
+  return registerComponentHelper(
     loader,
     BaseCheckbox,
     {
@@ -338,15 +447,22 @@ function registerCheckbox(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
       interactionVariants: interactionVariants$6,
-      props: __spreadProps$b(__spreadValues$n({}, getCommonInputProps("checkbox", [
+      props: __spreadProps$b(__spreadValues$o({}, getCommonInputProps("checkbox", [
         "name",
         "isDisabled",
         "isReadOnly",
         "aria-label",
-        "children",
         "isRequired",
         "autoFocus"
       ])), {
+        children: {
+          type: "slot",
+          mergeWithParent: true,
+          defaultValue: makeDefaultCheckboxChildren({
+            label: "Label",
+            showDocs: true
+          })
+        },
         value: {
           type: "string",
           description: "The value of the input element, used when submitting an HTML form."
@@ -356,7 +472,8 @@ function registerCheckbox(loader, overrides) {
           editOnly: true,
           uncontrolledProp: "defaultSelected",
           description: "Whether the checkbox is toggled on",
-          defaultValueHint: false
+          defaultValueHint: false,
+          defaultValue: false
         },
         isIndeterminate: {
           displayName: "Indeterminate",
@@ -386,7 +503,8 @@ function registerCheckbox(loader, overrides) {
           type: "writable",
           valueProp: "isSelected",
           onChangeProp: "onChange",
-          variableType: "boolean"
+          variableType: "boolean",
+          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
         }
       },
       trapsFocus: true
@@ -395,50 +513,56 @@ function registerCheckbox(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$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$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$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$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$m.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$m)
-    for (var prop of __getOwnPropSymbols$m(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.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$f(_b, ["children"]);
-  return /* @__PURE__ */ React.createElement(Text, __spreadValues$m({}, rest), children);
+  return /* @__PURE__ */ React.createElement(Text, __spreadValues$n({}, rest), children);
 }
+const TEXT_COMPONENT_NAME = makeComponentName("text");
 function registerText(loader, overrides) {
-  registerComponentHelper(
+  return registerComponentHelper(
     loader,
     BaseText,
     {
-      name: makeComponentName("text"),
+      name: TEXT_COMPONENT_NAME,
       displayName: "Aria Text",
       importPath: "@plasmicpkgs/react-aria/skinny/registerText",
       importName: "BaseText",
       props: {
         children: {
-          type: "slot"
+          type: "slot",
+          mergeWithParent: true,
+          defaultValue: {
+            type: "text",
+            value: "Some text..."
+          }
         },
         slot: {
           type: "string"
@@ -450,58 +574,64 @@ function registerText(loader, overrides) {
   );
 }
 
-var __defProp$l = Object.defineProperty;
+var __defProp$m = 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 __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$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$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$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+const DESCRIPTION_COMPONENT_NAME = makeComponentName("description");
 function registerDescription(loader, overrides) {
-  registerText(loader, __spreadProps$a(__spreadValues$l({}, overrides), {
+  return registerText(loader, __spreadProps$a(__spreadValues$m({}, overrides), {
+    name: DESCRIPTION_COMPONENT_NAME,
     displayName: "Aria Description",
     props: {
-      slot: { type: "string", hidden: () => true, defaultValue: "description" }
+      slot: {
+        type: "string",
+        hidden: () => true,
+        defaultValue: "description"
+      }
     }
   }));
 }
 
-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$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$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$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$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$k.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$k)
-    for (var prop of __getOwnPropSymbols$k(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.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;
@@ -530,27 +660,37 @@ function BaseFieldError(_a) {
     "typeMismatch",
     "valueMissing"
   ]);
-  return /* @__PURE__ */ React.createElement(FieldError, __spreadValues$k({}, rest), ({ validationDetails, validationErrors }) => {
-    if (validationDetails.badInput && badInput)
+  return /* @__PURE__ */ React.createElement(FieldError, __spreadValues$l({}, rest), ({ validationDetails, validationErrors }) => {
+    if (validationDetails.badInput && badInput) {
       return badInput;
-    if (validationDetails.customError && customError)
+    }
+    if (validationDetails.customError && customError) {
       return customError;
-    if (validationDetails.patternMismatch && patternMismatch)
+    }
+    if (validationDetails.patternMismatch && patternMismatch) {
       return patternMismatch;
-    if (validationDetails.rangeOverflow && rangeOverflow)
+    }
+    if (validationDetails.rangeOverflow && rangeOverflow) {
       return rangeOverflow;
-    if (validationDetails.rangeUnderflow && rangeUnderflow)
+    }
+    if (validationDetails.rangeUnderflow && rangeUnderflow) {
       return rangeUnderflow;
-    if (validationDetails.stepMismatch && stepMismatch)
+    }
+    if (validationDetails.stepMismatch && stepMismatch) {
       return stepMismatch;
-    if (validationDetails.tooLong && tooLong)
+    }
+    if (validationDetails.tooLong && tooLong) {
       return tooLong;
-    if (validationDetails.tooShort && tooShort)
+    }
+    if (validationDetails.tooShort && tooShort) {
       return tooShort;
-    if (validationDetails.typeMismatch && typeMismatch)
+    }
+    if (validationDetails.typeMismatch && typeMismatch) {
       return typeMismatch;
-    if (validationDetails.valueMissing && valueMissing)
+    }
+    if (validationDetails.valueMissing && valueMissing) {
       return valueMissing;
+    }
     return validationErrors;
   });
 }
@@ -627,62 +767,48 @@ function registerFieldError(loader, overrides) {
   );
 }
 
-const BaseLabel = Label;
-const LABEL_COMPONENT_NAME = makeComponentName("label");
-function registerLabel(loader, overrides) {
-  registerComponentHelper(
-    loader,
-    BaseLabel,
-    {
-      name: LABEL_COMPONENT_NAME,
-      displayName: "Aria Label",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerLabel",
-      importName: "BaseLabel",
-      defaultStyles: {
-        cursor: "pointer"
-      },
-      props: {
-        children: {
-          type: "slot"
-        }
-      },
-      trapsFocus: true
-    },
-    overrides
-  );
-}
-
-var __defProp$j = Object.defineProperty;
+var __defProp$k = 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 __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$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$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$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-const BaseCheckboxGroup = CheckboxGroup;
-const componentName$2 = makeComponentName("checkboxGroup");
+function BaseCheckboxGroup(props) {
+  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$k({}, props)));
+}
+const componentName = makeComponentName("checkboxGroup");
 function registerCheckboxGroup(loader, overrides) {
+  const thisName = makeChildComponentName(
+    overrides == null ? void 0 : overrides.parentComponentName,
+    componentName
+  );
+  registerFieldError(loader, { parentComponentName: thisName });
+  const checkboxMeta = registerCheckbox(loader, {
+    parentComponentName: thisName
+  });
+  registerLabel(loader, { parentComponentName: thisName });
   registerComponentHelper(
     loader,
     BaseCheckboxGroup,
     {
-      name: componentName$2,
+      name: componentName,
       displayName: "Aria Checkbox Group",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
-      props: __spreadProps$9(__spreadValues$j({}, getCommonInputProps("checkbox group", [
+      props: __spreadProps$9(__spreadValues$k({}, getCommonInputProps("checkbox group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -690,6 +816,76 @@ function registerCheckboxGroup(loader, overrides) {
         "children",
         "isRequired"
       ])), {
+        children: {
+          type: "slot",
+          mergeWithParent: true,
+          defaultValue: [
+            {
+              type: "vbox",
+              styles: {
+                display: "flex",
+                gap: "5px",
+                padding: 0,
+                alignItems: "flex-start"
+              },
+              children: [
+                {
+                  type: "component",
+                  name: LABEL_COMPONENT_NAME,
+                  props: {
+                    children: {
+                      type: "text",
+                      value: "Checkbox Group"
+                    }
+                  }
+                },
+                {
+                  type: "component",
+                  name: checkboxMeta.name,
+                  props: {
+                    children: makeDefaultCheckboxChildren({
+                      label: "Checkbox 1",
+                      showDocs: false
+                    }),
+                    value: "checkbox1"
+                  }
+                },
+                {
+                  type: "component",
+                  name: checkboxMeta.name,
+                  props: {
+                    children: makeDefaultCheckboxChildren({
+                      label: "Checkbox 2",
+                      showDocs: false
+                    }),
+                    value: "checkbox2"
+                  }
+                },
+                {
+                  type: "component",
+                  name: checkboxMeta.name,
+                  props: {
+                    children: makeDefaultCheckboxChildren({
+                      label: "Checkbox 3",
+                      showDocs: false
+                    }),
+                    value: "checkbox3"
+                  }
+                },
+                {
+                  type: "component",
+                  name: DESCRIPTION_COMPONENT_NAME,
+                  props: {
+                    children: {
+                      type: "text",
+                      value: "Add interaction variants to see it in action..."
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        },
         value: {
           type: "array",
           editOnly: true,
@@ -725,27 +921,8 @@ function registerCheckboxGroup(loader, overrides) {
     },
     overrides
   );
-  const thisName = makeChildComponentName(
-    overrides == null ? void 0 : overrides.parentComponentName,
-    componentName$2
-  );
-  registerFieldError(loader, { parentComponentName: thisName });
-  registerCheckbox(loader, { parentComponentName: thisName });
-  registerLabel(loader, { parentComponentName: thisName });
-  registerDescription(loader, {
-    parentComponentName: thisName
-  });
 }
 
-const PlasmicSliderContext = React.createContext(void 0);
-React.createContext(void 0);
-const PlasmicListBoxContext = React.createContext(void 0);
-const PlasmicPopoverContext = 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);
-
 function useStrictOptions(props) {
   const { options, optionInfo } = props;
   return React.useMemo(() => {
@@ -876,6 +1053,22 @@ function makeOptionsPropType() {
         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"
+          }
+        ]
       }
     ]
   };
@@ -895,6 +1088,90 @@ function makeValuePropType() {
   return type;
 }
 
+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$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$d = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = 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;
+};
+const INPUT_INTERACTION_VARIANTS = ["focused", "hovered"];
+const { interactionVariants: interactionVariants$5 } = pickAriaComponentVariants(
+  INPUT_INTERACTION_VARIANTS
+);
+function BaseInput(props) {
+  const _a = props, { updateInteractionVariant } = _a, rest = __objRest$d(_a, ["updateInteractionVariant"]);
+  return /* @__PURE__ */ React.createElement(
+    Input,
+    __spreadValues$j({
+      onHoverChange: (isHovered) => {
+        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+          hovered: isHovered
+        });
+      },
+      onFocus: () => {
+        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+          focused: true
+        });
+      },
+      onBlur: () => {
+        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+          focused: false
+        });
+      }
+    }, rest)
+  );
+}
+const INPUT_COMPONENT_NAME = makeComponentName("input");
+function registerInput(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseInput,
+    {
+      name: INPUT_COMPONENT_NAME,
+      displayName: "Aria Input",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
+      importName: "BaseInput",
+      interactionVariants: interactionVariants$5,
+      defaultStyles: {
+        width: "300px",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "black",
+        padding: "2px 10px"
+      },
+      props: {
+        placeholder: {
+          type: "string"
+        }
+      },
+      trapsFocus: true
+    },
+    overrides
+  );
+}
+
 var __defProp$i = Object.defineProperty;
 var __defProps$8 = Object.defineProperties;
 var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
@@ -914,254 +1191,66 @@ var __spreadValues$i = (a, b) => {
   return a;
 };
 var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(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;
-    }
-    const filterOptions = (opts) => {
-      return withoutNils(
-        opts.map((op) => {
-          if (op.type === "option-group") {
-            return __spreadProps$8(__spreadValues$i({}, 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));
+function BaseListBoxItem(props) {
+  const contextProps = React.useContext(PlasmicItemContext);
+  const mergedProps = mergeProps(contextProps, props);
+  return /* @__PURE__ */ React.createElement(ListBoxItem, __spreadProps$8(__spreadValues$i({}, mergedProps), { textValue: contextProps.label }), mergedProps.children);
+}
+const makeDefaultListBoxItemChildren = (label, description) => ({
+  type: "vbox",
+  styles: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "2px"
+  },
+  children: [
+    {
+      type: "component",
+      name: TEXT_COMPONENT_NAME,
+      props: {
+        slot: "label",
+        children: {
+          type: "text",
+          styles: {
+            fontWeight: 500
+          },
+          value: label
         }
-      } 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));
-          }
-        }
-      }
-    },
-    [
-      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);
+    {
+      type: "component",
+      name: DESCRIPTION_COMPONENT_NAME,
+      props: {
+        children: {
+          type: "text",
+          styles: {
+            color: "#838383"
+          },
+          value: description != null ? description : `Some description for ${label}...`
         }
       }
     }
-  }, [
-    allowsCustomValue,
-    flattenedOptions,
-    valueType,
-    optionText,
-    value,
-    filterValue,
-    onFilterValueChange
-  ]);
-  return /* @__PURE__ */ React.createElement(
-    ComboBox,
-    __spreadValues$i({
-      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"
+  ]
+});
+function registerListBoxItem(loader, overrides) {
+  return registerComponentHelper(
+    loader,
+    BaseListBoxItem,
+    {
+      name: makeComponentName("item"),
+      displayName: "Aria ListBoxItem",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerListBoxItem",
+      importName: "BaseListBoxItem",
+      props: {
+        children: {
+          type: "slot",
+          defaultValue: makeDefaultListBoxItemChildren("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;
-}
-function registerComboBox(loader) {
-  const rootName = makeComponentName("combobox");
-  registerComponentHelper(loader, BaseComboBox, {
-    name: rootName,
-    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",
-        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
-      },
-      allowsCustomValue: {
-        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
-      },
-      onOpenChange: {
-        type: "eventHandler",
-        argTypes: [{ name: "isOpen", type: "boolean" }]
-      },
-      structure: {
-        type: "slot"
-      },
-      previewOpen: {
-        type: "boolean",
-        displayName: "Preview opened?",
-        description: "Preview opened state while designing in Plasmic editor",
-        editOnly: true
       }
     },
-    states: {
-      value: {
-        type: "writable",
-        valueProp: "value",
-        onChangeProp: "onChange",
-        variableType: "text"
-      },
-      filterValue: {
-        type: "writable",
-        valueProp: "filterValue",
-        onChangeProp: "onFilterValueChange",
-        variableType: "text"
-      },
-      isOpen: {
-        type: "readonly",
-        onChangeProp: "onOpenChange",
-        variableType: "boolean"
-      }
-    }
-  });
+    overrides
+  );
 }
 
 var __defProp$h = Object.defineProperty;
@@ -1180,59 +1269,24 @@ var __spreadValues$h = (a, b) => {
     }
   return a;
 };
-var __objRest$d = (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 BaseDialogTrigger(props) {
-  const _a = props, { trigger, dialog } = _a, rest = __objRest$d(_a, ["trigger", "dialog"]);
-  return /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$h({}, rest), trigger, dialog);
+function BaseHeader(props) {
+  const contextProps = React.useContext(PlasmicHeaderContext);
+  return /* @__PURE__ */ React.createElement(Header, __spreadValues$h({}, mergeProps(contextProps, props)));
 }
-function registerDialogTrigger(loader, overrides) {
-  registerComponentHelper(
+function registerHeader(loader, overrides) {
+  return registerComponentHelper(
     loader,
-    BaseDialogTrigger,
+    BaseHeader,
     {
-      name: makeComponentName("dialogTrigger"),
-      displayName: "Aria Dialog Trigger",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerDialogTrigger",
-      importName: "BaseDialogTrigger",
-      isAttachment: true,
-      props: {
-        trigger: {
-          type: "slot"
-        },
-        dialog: {
-          type: "slot"
-        },
-        isOpen: {
-          type: "boolean",
-          defaultValueHint: false,
-          editOnly: true,
-          uncontrolledProp: "defaultOpen"
-        },
-        onOpenChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isOpen", type: "boolean" }]
-        }
-      },
-      states: {
-        isOpen: {
-          type: "writable",
-          valueProp: "isOpen",
-          onChangeProp: "onOpenChange",
-          variableType: "boolean"
-        }
+      name: makeComponentName("header"),
+      displayName: "Aria Header",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerHeader",
+      importName: "BaseHeader",
+      defaultStyles: {
+        fontWeight: "bold",
+        fontSize: "20px"
       },
-      trapsFocus: true
+      props: {}
     },
     overrides
   );
@@ -1254,73 +1308,53 @@ var __spreadValues$g = (a, b) => {
     }
   return a;
 };
-var __objRest$c = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function BaseForm(props) {
-  const _a = props, { onSubmit, children } = _a, rest = __objRest$c(_a, ["onSubmit", "children"]);
-  return /* @__PURE__ */ React.createElement(
-    Form,
-    __spreadValues$g({
-      onSubmit: (e) => {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        const formValues = {};
-        formData.forEach((value, key) => {
-          const field = e.currentTarget.elements.namedItem(key);
-          if (field instanceof RadioNodeList && Array.from(field.values()).every(
-            (f) => f.type === "checkbox"
-          )) {
-            formValues[key] = formData.getAll(key);
-          } else {
-            field.type;
-            formValues[key] = formData.get(key);
-          }
-        });
-        onSubmit == null ? void 0 : onSubmit(formValues);
-      }
-    }, rest),
-    children
-  );
+function BaseSection(props) {
+  const contextProps = React.useContext(PlasmicSectionContext);
+  const mergedProps = mergeProps(contextProps, props);
+  const { section, renderHeader, key, renderItem } = mergedProps;
+  return /* @__PURE__ */ React.createElement(Section, __spreadValues$g({ 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));
+  }));
 }
-function registerForm(loader, overrides) {
-  registerComponentHelper(
+function registerSection(loader, overrides) {
+  const thisName = makeChildComponentName(
+    overrides == null ? void 0 : overrides.parentComponentName,
+    makeComponentName("section")
+  );
+  const headerMeta = registerHeader(loader, {
+    parentComponentName: thisName
+  });
+  return registerComponentHelper(
     loader,
-    BaseForm,
+    BaseSection,
     {
-      name: makeComponentName("form"),
-      displayName: "Aria Form",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerForm",
-      importName: "BaseForm",
+      name: makeComponentName("section"),
+      displayName: "Aria Section",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerSection",
+      importName: "BaseSection",
+      defaultStyles: {
+        width: "stretch",
+        padding: "10px"
+      },
       props: {
-        children: {
-          type: "slot"
-        },
-        onSubmit: {
-          type: "eventHandler",
-          argTypes: [{ name: "data", type: "object" }]
-        },
-        onReset: {
-          type: "eventHandler",
-          argTypes: []
+        renderHeader: {
+          type: "slot",
+          displayName: "Render section header",
+          renderPropParams: ["sectionProps"],
+          defaultValue: {
+            type: "component",
+            name: headerMeta.name
+          }
         }
-      },
-      trapsFocus: true
+      }
     },
     overrides
   );
 }
 
 var __defProp$f = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
 var __hasOwnProp$f = Object.prototype.hasOwnProperty;
 var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
@@ -1336,7 +1370,8 @@ var __spreadValues$f = (a, b) => {
     }
   return a;
 };
-var __objRest$b = (source, exclude) => {
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1348,194 +1383,598 @@ var __objRest$b = (source, exclude) => {
     }
   return target;
 };
-const INPUT_INTERACTION_VARIANTS = ["focused", "hovered"];
-const { interactionVariants: interactionVariants$5 } = pickAriaComponentVariants(
-  INPUT_INTERACTION_VARIANTS
-);
-function BaseInput(props) {
-  const _a = props, { updateInteractionVariant } = _a, rest = __objRest$b(_a, ["updateInteractionVariant"]);
-  return /* @__PURE__ */ React.createElement(
-    Input,
-    __spreadValues$f({
-      onHoverChange: (isHovered) => {
-        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
-          hovered: isHovered
-        });
-      },
-      onFocus: () => {
-        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
-          focused: true
-        });
+function BaseListBox(props) {
+  var _c;
+  const contextProps = React.useContext(PlasmicListBoxContext);
+  const isStandalone = !contextProps;
+  const _a = props, rest = __objRest$c(_a, ["options"]);
+  const { options } = useStrictOptions(props);
+  const _b = mergeProps(
+    contextProps,
+    rest,
+    isStandalone ? { items: options } : {}
+  ), { renderItem, renderSection } = _b, mergedProps = __objRest$c(_b, ["renderItem", "renderSection"]);
+  (_c = props.setControlContextData) == null ? void 0 : _c.call(props, {
+    isStandalone
+  });
+  return /* @__PURE__ */ React.createElement(ListBox, __spreadValues$f({}, 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 LIST_BOX_COMPONENT_NAME = makeComponentName("listbox");
+function registerListBox(loader, overrides) {
+  const listBoxItemMeta = registerListBoxItem(loader, {
+    parentComponentName: LIST_BOX_COMPONENT_NAME
+  });
+  const sectionMeta = registerSection(loader, {
+    parentComponentName: LIST_BOX_COMPONENT_NAME
+  });
+  registerComponentHelper(
+    loader,
+    BaseListBox,
+    {
+      name: LIST_BOX_COMPONENT_NAME,
+      displayName: "Aria ListBox",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerListBox",
+      importName: "BaseListBox",
+      defaultStyles: {
+        width: "250px",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "black"
       },
-      onBlur: () => {
-        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
-          focused: false
-        });
+      props: {
+        options: __spreadProps$7(__spreadValues$f({}, makeOptionsPropType()), {
+          displayName: "Items",
+          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
+        }),
+        renderItem: {
+          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"
+              )
+            }
+          }
+        },
+        renderSection: {
+          type: "slot",
+          displayName: "Render Section",
+          renderPropParams: ["sectionProps"],
+          defaultValue: {
+            type: "component",
+            name: sectionMeta.name,
+            styles: {
+              backgroundColor: "#F4FAFF"
+            }
+          }
+        }
       }
-    }, rest)
+    },
+    overrides
   );
 }
-function registerInput(loader, overrides) {
+
+var __defProp$e = Object.defineProperty;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$e.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest$b = (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];
+    }
+  return target;
+};
+function BasePopover(props) {
+  const _a = props, { resetClassName } = _a, restProps = __objRest$b(_a, ["resetClassName"]);
+  const isStandalone = !React.useContext(PopoverContext);
+  const contextProps = React.useContext(PlasmicPopoverContext);
+  const mergedProps = mergeProps(contextProps, restProps, {
+    className: `${resetClassName}`
+  });
+  const triggerRef = React.useRef(null);
+  const standaloneProps = isStandalone ? {
+    triggerRef,
+    isNonModal: true,
+    isOpen: true
+  } : {};
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(Popover, __spreadValues$e(__spreadValues$e({}, mergedProps), standaloneProps)));
+}
+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",
+    top: "-14px",
+    // center the arrow horizontally on the popover
+    left: "50%",
+    transform: "translateX(-50%)",
+    width: "15px"
+  }
+};
+function registerPopover(loader, overrides) {
   registerComponentHelper(
     loader,
-    BaseInput,
+    BasePopover,
     {
-      name: makeComponentName("input"),
-      displayName: "Aria Input",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
-      importName: "BaseInput",
-      interactionVariants: interactionVariants$5,
+      name: POPOVER_COMPONENT_NAME,
+      displayName: "Aria Popover",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerPopover",
+      importName: "BasePopover",
+      defaultStyles: {
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "black",
+        padding: "20px",
+        width: "300px",
+        backgroundColor: "#FDE3C3"
+      },
       props: {
-        placeholder: {
-          type: "string"
+        children: {
+          type: "slot",
+          defaultValue: [
+            POPOVER_ARROW_IMG,
+            {
+              type: "vbox",
+              styles: {
+                width: "stretch",
+                padding: 0,
+                gap: "10px"
+              },
+              children: [
+                {
+                  type: "text",
+                  value: "This is a Popover!"
+                },
+                {
+                  type: "text",
+                  value: "You can put anything you can imagine here!",
+                  styles: {
+                    fontWeight: 500
+                  }
+                },
+                {
+                  type: "text",
+                  value: "Use it in a `Aria Dialog Trigger` component to trigger it on a button click!"
+                }
+              ]
+            }
+          ]
+        },
+        offset: {
+          type: "number",
+          displayName: "Offset",
+          description: "Additional offset applied vertically between the popover and its trigger",
+          defaultValueHint: 0
+        },
+        placement: {
+          type: "choice",
+          description: "Default placement of the popover relative to the trigger, if there is enough space",
+          options: [
+            "bottom",
+            "bottom left",
+            "bottom right",
+            "top",
+            "top left",
+            "top right"
+          ]
+        },
+        resetClassName: {
+          type: "themeResetClass"
+        }
+      },
+      styleSections: true
+    },
+    overrides
+  );
+}
+
+var __defProp$d = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(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;
+    }
+    const filterOptions = (opts) => {
+      return withoutNils(
+        opts.map((op) => {
+          if (op.type === "option-group") {
+            return __spreadProps$6(__spreadValues$d({}, 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));
+          }
+        }
+      }
+    },
+    [
+      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$d({
+      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"
         }
       },
-      trapsFocus: true
-    },
-    overrides
+      /* @__PURE__ */ React.createElement(PlasmicInputContext.Provider, { value: { placeholder } }, structure)
+    ),
+    /* @__PURE__ */ React.createElement(BaseComboBoxEffects, { previewOpen })
   );
 }
-
-var __defProp$e = Object.defineProperty;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
-    }
-  return a;
-};
-function BaseListBoxItem(props) {
-  const contextProps = React.useContext(PlasmicItemContext);
-  const mergedProps = mergeProps(contextProps, props);
-  return /* @__PURE__ */ React.createElement(ListBoxItem, __spreadValues$e({}, mergedProps), mergedProps.children);
-}
-function registerListBoxItem(loader, overrides) {
-  registerComponentHelper(
-    loader,
-    BaseListBoxItem,
-    {
-      name: makeComponentName("item"),
-      displayName: "Aria ListBoxItem",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerListBoxItem",
-      importName: "BaseListBoxItem",
-      props: {
-        children: {
-          type: "slot"
-        }
+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();
       }
-    },
-    overrides
-  );
-}
-
-var __defProp$d = Object.defineProperty;
-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;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-var __objRest$a = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function BaseListBox(props) {
-  var _c;
-  const contextProps = React.useContext(PlasmicListBoxContext);
-  const isStandalone = !contextProps;
-  const _a = props, rest = __objRest$a(_a, ["options"]);
-  const { options } = useStrictOptions(props);
-  const _b = mergeProps(
-    contextProps,
-    rest,
-    isStandalone ? { items: options } : {}
-  ), { renderItem, renderSection } = _b, mergedProps = __objRest$a(_b, ["renderItem", "renderSection"]);
-  (_c = props.setControlContextData) == null ? void 0 : _c.call(props, {
-    isStandalone
-  });
-  return /* @__PURE__ */ React.createElement(ListBox, __spreadValues$d({}, 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));
     }
-  });
+    prevPreviewOpenRef.current = previewOpen;
+  }, [previewOpen, comboBoxState, prevPreviewOpenRef]);
+  return null;
 }
-function registerListBox(loader, overrides) {
-  registerComponentHelper(
-    loader,
-    BaseListBox,
-    {
-      name: makeComponentName("listbox"),
-      displayName: "Aria ListBox",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerListBox",
-      importName: "BaseListBox",
-      props: {
-        options: __spreadProps$7(__spreadValues$d({}, makeOptionsPropType()), {
-          displayName: "Items",
-          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
-        }),
-        renderItem: {
-          type: "slot",
-          displayName: "Render Item",
-          renderPropParams: ["itemProps"]
-        },
-        renderSection: {
-          type: "slot",
-          displayName: "Render Section",
-          renderPropParams: ["sectionProps"]
-        }
+function registerComboBox(loader) {
+  const rootName = makeComponentName("combobox");
+  registerComponentHelper(loader, BaseComboBox, {
+    name: rootName,
+    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",
+        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
+      },
+      allowsCustomValue: {
+        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
+      },
+      onOpenChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "isOpen", type: "boolean" }]
+      },
+      structure: {
+        type: "slot",
+        defaultValue: [
+          {
+            type: "vbox",
+            styles: {
+              justifyContent: "flex-start",
+              alignItems: "flex-start",
+              width: "300px",
+              padding: 0
+            },
+            children: [
+              {
+                type: "component",
+                name: LABEL_COMPONENT_NAME,
+                props: {
+                  children: {
+                    type: "text",
+                    value: "Label"
+                  }
+                }
+              },
+              {
+                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"
+                    }
+                  },
+                  {
+                    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",
+                        src: "https://static1.plasmic.app/arrow-up.svg",
+                        styles: {
+                          height: "20px",
+                          width: "20px",
+                          transform: "rotate(180deg)"
+                        }
+                      }
+                    }
+                  }
+                ]
+              },
+              {
+                type: "component",
+                name: POPOVER_COMPONENT_NAME,
+                styles: {
+                  backgroundColor: "white",
+                  width: "300px",
+                  padding: "10px",
+                  overflow: "scroll"
+                },
+                props: {
+                  children: [
+                    {
+                      type: "component",
+                      name: LIST_BOX_COMPONENT_NAME,
+                      styles: {
+                        borderWidth: 0,
+                        width: "stretch"
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        ]
+      },
+      previewOpen: {
+        type: "boolean",
+        displayName: "Preview opened?",
+        description: "Preview opened state while designing in Plasmic editor",
+        editOnly: true
       }
     },
-    overrides
-  );
-  registerListBoxItem(loader, {
-    parentComponentName: makeComponentName("listbox")
+    states: {
+      value: {
+        type: "writable",
+        valueProp: "value",
+        onChangeProp: "onChange",
+        variableType: "text"
+      },
+      filterValue: {
+        type: "writable",
+        valueProp: "filterValue",
+        onChangeProp: "onFilterValueChange",
+        variableType: "text"
+      },
+      isOpen: {
+        type: "readonly",
+        onChangeProp: "onOpenChange",
+        variableType: "boolean"
+      }
+    }
   });
 }
 
 var __defProp$c = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
 var __hasOwnProp$c = Object.prototype.hasOwnProperty;
 var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
@@ -1551,8 +1990,8 @@ var __spreadValues$c = (a, b) => {
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-var __objRest$9 = (source, exclude) => {
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1571,14 +2010,26 @@ const BaseModal = forwardRef(
       heading,
       modalOverlayClass,
       onOpenChange,
-      className
-    } = _a, rest = __objRest$9(_a, [
+      className,
+      isOpen,
+      setControlContextData
+    } = _a, rest = __objRest$a(_a, [
       "children",
       "heading",
       "modalOverlayClass",
       "onOpenChange",
-      "className"
+      "className",
+      "isOpen",
+      "setControlContextData"
     ]);
+    const contextProps = React.useContext(PlasmicDialogTriggerContext);
+    const isStandalone = !contextProps;
+    const mergedProps = mergeProps$1(contextProps, rest, {
+      isOpen: isStandalone ? isOpen : contextProps.isOpen
+    });
+    setControlContextData == null ? void 0 : setControlContextData({
+      isStandalone
+    });
     useImperativeHandle(ref, () => ({
       close: () => {
         onOpenChange(false);
@@ -1591,7 +2042,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$c({}, rest), {
+      __spreadProps$5(__spreadValues$c({}, mergedProps), {
         className: modalOverlayClass,
         onOpenChange
       }),
@@ -1599,16 +2050,31 @@ const BaseModal = forwardRef(
     );
   }
 );
+const MODAL_COMPONENT_NAME = makeComponentName("modal");
 function registerModal(loader, overrides) {
   registerComponentHelper(
     loader,
     BaseModal,
     {
-      name: makeComponentName("modal"),
+      name: MODAL_COMPONENT_NAME,
       displayName: "Aria Modal",
       importPath: "@plasmicpkgs/react-aria/skinny/registerModal",
       importName: "BaseModal",
       styleSections: true,
+      defaultStyles: {
+        // centering the modal on the page by default
+        position: "fixed",
+        top: "10%",
+        left: "50%",
+        width: "50%",
+        transform: "translateX(-50%)",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "black",
+        padding: "20px",
+        maxWidth: "300px",
+        backgroundColor: "#FDE3C3"
+      },
       refActions: {
         open: {
           description: "Open the modal",
@@ -1621,10 +2087,46 @@ function registerModal(loader, overrides) {
       },
       props: {
         heading: {
-          type: "slot"
+          type: "slot",
+          defaultValue: {
+            type: "text",
+            value: "Modal Heading",
+            styles: {
+              fontSize: "20px",
+              fontWeight: "bold",
+              marginBottom: "10px"
+            }
+          }
         },
         children: {
-          type: "slot"
+          type: "slot",
+          defaultValue: {
+            type: "vbox",
+            styles: {
+              width: "stretch",
+              padding: 0,
+              gap: "10px",
+              justifyContent: "flex-start",
+              alignItems: "flex-start"
+            },
+            children: [
+              {
+                type: "text",
+                value: "This is a Modal!"
+              },
+              {
+                type: "text",
+                value: "You can put anything you can imagine here!",
+                styles: {
+                  fontWeight: 500
+                }
+              },
+              {
+                type: "text",
+                value: "Use it in a `Aria Dialog Trigger` component to trigger it on a button click!"
+              }
+            ]
+          }
         },
         modalOverlayClass: {
           type: "class",
@@ -1634,7 +2136,9 @@ function registerModal(loader, overrides) {
           type: "boolean",
           editOnly: true,
           uncontrolledProp: "defaultOpen",
-          defaultValueHint: false
+          defaultValueHint: false,
+          defaultValue: true,
+          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
         },
         isDismissable: {
           type: "boolean",
@@ -1654,7 +2158,8 @@ function registerModal(loader, overrides) {
           type: "writable",
           valueProp: "isOpen",
           onChangeProp: "onOpenChange",
-          variableType: "boolean"
+          variableType: "boolean",
+          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
         }
       },
       trapsFocus: true
@@ -1679,7 +2184,7 @@ var __spreadValues$b = (a, b) => {
     }
   return a;
 };
-var __objRest$8 = (source, exclude) => {
+var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1691,57 +2196,143 @@ var __objRest$8 = (source, exclude) => {
     }
   return target;
 };
-function BasePopover(props) {
-  const _a = props, { resetClassName } = _a, restProps = __objRest$8(_a, ["resetClassName"]);
-  const isStandalone = !React.useContext(PopoverContext);
-  const contextProps = React.useContext(PlasmicPopoverContext);
-  const mergedProps = mergeProps(contextProps, restProps, {
-    className: `${resetClassName}`
-  });
-  const triggerRef = React.useRef(null);
-  const standaloneProps = isStandalone ? {
-    triggerRef,
-    isNonModal: true,
-    isOpen: true
-  } : {};
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(Popover, __spreadValues$b(__spreadValues$b({}, mergedProps), standaloneProps)));
+function BaseDialogTrigger(props) {
+  const _a = props, { trigger, dialog } = _a, rest = __objRest$9(_a, ["trigger", "dialog"]);
+  return /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$b({}, rest), trigger, dialog));
 }
-function registerPopover(loader, overrides) {
+function registerDialogTrigger(loader, overrides) {
   registerComponentHelper(
     loader,
-    BasePopover,
+    BaseDialogTrigger,
     {
-      name: "plasmic-react-aria-popover",
-      displayName: "Aria Popover",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerPopover",
-      importName: "BasePopover",
+      name: makeComponentName("dialogTrigger"),
+      displayName: "Aria Dialog Trigger",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerDialogTrigger",
+      importName: "BaseDialogTrigger",
+      isAttachment: true,
+      props: {
+        trigger: {
+          type: "slot",
+          defaultValue: {
+            type: "component",
+            name: BUTTON_COMPONENT_NAME,
+            props: {
+              children: {
+                type: "text",
+                value: "Open Dialog"
+              }
+            }
+          }
+        },
+        dialog: {
+          type: "slot",
+          defaultValue: {
+            type: "component",
+            name: MODAL_COMPONENT_NAME
+          }
+        },
+        isOpen: {
+          type: "boolean",
+          defaultValueHint: false,
+          editOnly: true,
+          uncontrolledProp: "defaultOpen"
+        },
+        onOpenChange: {
+          type: "eventHandler",
+          argTypes: [{ name: "isOpen", type: "boolean" }]
+        }
+      },
+      states: {
+        isOpen: {
+          type: "writable",
+          valueProp: "isOpen",
+          onChangeProp: "onOpenChange",
+          variableType: "boolean"
+        }
+      },
+      trapsFocus: true
+    },
+    overrides
+  );
+}
+
+var __defProp$a = Object.defineProperty;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest$8 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function BaseForm(props) {
+  const _a = props, { onSubmit, children } = _a, rest = __objRest$8(_a, ["onSubmit", "children"]);
+  return /* @__PURE__ */ React.createElement(
+    Form,
+    __spreadValues$a({
+      onSubmit: (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const formValues = {};
+        formData.forEach((value, key) => {
+          const field = e.currentTarget.elements.namedItem(key);
+          if (field instanceof RadioNodeList && Array.from(field.values()).every(
+            (f) => f.type === "checkbox"
+          )) {
+            formValues[key] = formData.getAll(key);
+          } else {
+            field.type;
+            formValues[key] = formData.get(key);
+          }
+        });
+        onSubmit == null ? void 0 : onSubmit(formValues);
+      }
+    }, rest),
+    children
+  );
+}
+function registerForm(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseForm,
+    {
+      name: makeComponentName("form"),
+      displayName: "Aria Form",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerForm",
+      importName: "BaseForm",
       props: {
         children: {
           type: "slot"
         },
-        offset: {
-          type: "number",
-          displayName: "Offset",
-          description: "Additional offset applied vertically between the popover and its trigger",
-          defaultValueHint: 0
-        },
-        placement: {
-          type: "choice",
-          description: "Default placement of the popover relative to the trigger, if there is enough space",
-          options: [
-            "bottom",
-            "bottom left",
-            "bottom right",
-            "top",
-            "top left",
-            "top right"
-          ]
+        onSubmit: {
+          type: "eventHandler",
+          argTypes: [{ name: "data", type: "object" }]
         },
-        resetClassName: {
-          type: "themeResetClass"
+        onReset: {
+          type: "eventHandler",
+          argTypes: []
         }
       },
-      styleSections: true
+      trapsFocus: true
     },
     overrides
   );
@@ -1763,33 +2354,33 @@ class ErrorBoundary extends Component {
   }
 }
 
-var __defProp$a = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
+  if (source != null && __getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1804,8 +2395,9 @@ const { interactionVariants: interactionVariants$4, withObservedValues: withObse
   RADIO_INTERACTION_VARIANTS
 );
 function BaseRadio(props) {
-  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$7(_a, ["children", "updateInteractionVariant"]);
-  const radio = /* @__PURE__ */ React.createElement(Radio, __spreadValues$a({}, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$3(
+  const _a = props, { children, updateInteractionVariant, setControlContextData } = _a, rest = __objRest$7(_a, ["children", "updateInteractionVariant", "setControlContextData"]);
+  const contextProps = React.useContext(PlasmicRadioGroupContext);
+  const radio = /* @__PURE__ */ React.createElement(Radio, __spreadValues$9({}, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$3(
     children,
     {
       hovered: isHovered,
@@ -1815,10 +2407,46 @@ function BaseRadio(props) {
     },
     updateInteractionVariant
   ));
+  const isStandalone = !contextProps;
+  setControlContextData == null ? void 0 : setControlContextData({
+    isStandalone
+  });
   return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React.createElement(RadioGroup, null, radio) }, radio);
 }
+const makeDefaultRadioChildren = (label) => ({
+  type: "hbox",
+  styles: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: 0
+  },
+  children: [
+    {
+      type: "box",
+      styles: {
+        width: "7px",
+        height: "7px",
+        borderRadius: "100%",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "black"
+      }
+    },
+    {
+      type: "component",
+      name: LABEL_COMPONENT_NAME,
+      props: {
+        children: {
+          type: "text",
+          value: label
+        }
+      }
+    }
+  ]
+});
 function registerRadio(loader, overrides) {
-  registerComponentHelper(
+  return registerComponentHelper(
     loader,
     BaseRadio,
     {
@@ -1827,12 +2455,16 @@ function registerRadio(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadio",
       importName: "BaseRadio",
       interactionVariants: interactionVariants$4,
-      props: __spreadProps$5(__spreadValues$a({}, getCommonInputProps("radio", [
+      props: __spreadProps$4(__spreadValues$9({}, getCommonInputProps("radio", [
         "isDisabled",
         "autoFocus",
-        "aria-label",
-        "children"
+        "aria-label"
       ])), {
+        children: {
+          type: "slot",
+          mergeWithParent: true,
+          defaultValue: makeDefaultRadioChildren("Radio")
+        },
         value: {
           type: "string",
           description: "The value of the input element, used when submitting an HTML form."
@@ -1846,7 +2478,8 @@ function registerRadio(loader, overrides) {
         isSelected: {
           type: "readonly",
           onChangeProp: "onSelectionChange",
-          variableType: "boolean"
+          variableType: "boolean",
+          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
         }
       },
       trapsFocus: true
@@ -1855,44 +2488,113 @@ function registerRadio(loader, overrides) {
   );
 }
 
-var __defProp$9 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-const BaseRadioGroup = RadioGroup;
-const componentName$1 = makeComponentName("radioGroup");
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+function BaseRadioGroup(props) {
+  return /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadValues$8({}, props)));
+}
+const RADIO_GROUP_COMPONENT_NAME = makeComponentName("radioGroup");
 function registerRadioGroup(loader, overrides) {
+  const thisName = makeChildComponentName(
+    overrides == null ? void 0 : overrides.parentComponentName,
+    RADIO_GROUP_COMPONENT_NAME
+  );
+  registerFieldError(loader, { parentComponentName: thisName });
+  const radioMeta = registerRadio(loader, { parentComponentName: thisName });
+  registerLabel(loader, { parentComponentName: thisName });
   registerComponentHelper(
     loader,
     BaseRadioGroup,
     {
-      name: componentName$1,
+      name: RADIO_GROUP_COMPONENT_NAME,
       displayName: "Aria RadioGroup",
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadioGroup",
       importName: "BaseRadioGroup",
-      props: __spreadProps$4(__spreadValues$9({}, getCommonInputProps("radio group", [
+      props: __spreadProps$3(__spreadValues$8({}, getCommonInputProps("radio group", [
         "name",
         "isDisabled",
         "isReadOnly",
         "aria-label",
-        "children",
         "isRequired"
       ])), {
+        children: {
+          type: "slot",
+          mergeWithParent: true,
+          defaultValue: [
+            {
+              type: "vbox",
+              styles: {
+                display: "flex",
+                gap: "5px",
+                padding: 0,
+                alignItems: "flex-start"
+              },
+              children: [
+                {
+                  type: "component",
+                  name: LABEL_COMPONENT_NAME,
+                  props: {
+                    children: {
+                      type: "text",
+                      value: "Radio Group"
+                    }
+                  }
+                },
+                {
+                  type: "component",
+                  name: radioMeta.name,
+                  props: {
+                    children: makeDefaultRadioChildren("Radio 1"),
+                    value: "radio1"
+                  }
+                },
+                {
+                  type: "component",
+                  name: radioMeta.name,
+                  props: {
+                    children: makeDefaultRadioChildren("Radio 2"),
+                    value: "radio2"
+                  }
+                },
+                {
+                  type: "component",
+                  name: radioMeta.name,
+                  props: {
+                    children: makeDefaultRadioChildren("Radio 3"),
+                    value: "radio3"
+                  }
+                },
+                {
+                  type: "component",
+                  name: DESCRIPTION_COMPONENT_NAME,
+                  props: {
+                    children: {
+                      type: "text",
+                      value: "Add interaction variants to see it in action..."
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        },
         value: {
           type: "string",
           editOnly: true,
@@ -1928,87 +2630,6 @@ function registerRadioGroup(loader, overrides) {
     },
     overrides
   );
-  const thisName = makeChildComponentName(
-    overrides == null ? void 0 : overrides.parentComponentName,
-    componentName$1
-  );
-  registerFieldError(loader, { parentComponentName: thisName });
-  registerRadio(loader, { parentComponentName: thisName });
-  registerLabel(loader, { parentComponentName: thisName });
-  registerDescription(loader, {
-    parentComponentName: thisName
-  });
-}
-
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
-    }
-  return a;
-};
-function BaseHeader(props) {
-  const contextProps = React.useContext(PlasmicHeaderContext);
-  return /* @__PURE__ */ React.createElement(Header, __spreadValues$8({}, mergeProps(contextProps, props)));
-}
-function registerHeader(loader, overrides) {
-  registerComponentHelper(
-    loader,
-    BaseHeader,
-    {
-      name: makeComponentName("header"),
-      displayName: "Aria Header",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerHeader",
-      importName: "BaseHeader",
-      props: {}
-    },
-    overrides
-  );
-}
-
-function BaseSection(props) {
-  const contextProps = React.useContext(PlasmicSectionContext);
-  const mergedProps = mergeProps(contextProps, props);
-  const { section, renderHeader, key, renderItem } = mergedProps;
-  return /* @__PURE__ */ React.createElement(Section, { id: key }, /* @__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));
-  }));
-}
-function registerSection(loader, overrides) {
-  registerComponentHelper(
-    loader,
-    BaseSection,
-    {
-      name: makeComponentName("section"),
-      displayName: "Aria Section",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerSection",
-      importName: "BaseSection",
-      props: {
-        renderHeader: {
-          type: "slot",
-          displayName: "Render section header",
-          renderPropParams: ["sectionProps"]
-        }
-      }
-    },
-    overrides
-  );
-  const thisName = makeChildComponentName(
-    overrides == null ? void 0 : overrides.parentComponentName,
-    makeComponentName("section")
-  );
-  registerHeader(loader, {
-    parentComponentName: thisName
-  });
 }
 
 var __defProp$7 = Object.defineProperty;
@@ -2027,6 +2648,10 @@ var __spreadValues$7 = (a, b) => {
     }
   return a;
 };
+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))));
+};
 const SELECT_NAME = makeComponentName("select");
 function BaseSelect(props) {
   const {
@@ -2071,6 +2696,38 @@ function BaseSelect(props) {
   );
 }
 function registerSelect(loader) {
+  const selectValueMeta = registerComponentHelper(loader, BaseSelectValue, {
+    name: makeComponentName("select-value"),
+    displayName: "Aria Selected Value",
+    importPath: "@plasmicpkgs/react-aria/registerSelect",
+    importName: "SelectValue",
+    parentComponentName: SELECT_NAME,
+    props: {
+      customize: {
+        type: "boolean",
+        advanced: true,
+        description: "Whether to customize the selected value display"
+      },
+      children: {
+        type: "slot",
+        defaultValue: [
+          {
+            type: "text",
+            value: "Selected value..."
+          }
+        ]
+      },
+      className: {
+        type: "class",
+        selectors: [
+          {
+            selector: ":self[data-placeholder]",
+            label: "Placeholder"
+          }
+        ]
+      }
+    }
+  });
   registerComponentHelper(loader, BaseSelect, {
     name: SELECT_NAME,
     displayName: "Aria Select",
@@ -2133,7 +2790,84 @@ function registerSelect(loader) {
       //     "Return a function that takes in an option object, and returns true if option should be disabled",
       // },
       structure: {
-        type: "slot"
+        type: "slot",
+        defaultValue: [
+          {
+            type: "vbox",
+            styles: {
+              justifyContent: "flex-start",
+              alignItems: "flex-start",
+              width: "300px",
+              padding: 0
+            },
+            children: [
+              {
+                type: "component",
+                name: LABEL_COMPONENT_NAME,
+                props: {
+                  children: {
+                    type: "text",
+                    value: "Label"
+                  }
+                }
+              },
+              {
+                type: "component",
+                name: BUTTON_COMPONENT_NAME,
+                styles: {
+                  width: "100%"
+                },
+                props: {
+                  children: {
+                    type: "hbox",
+                    styles: {
+                      width: "stretch",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      padding: "2px 5px"
+                    },
+                    children: [
+                      {
+                        type: "component",
+                        name: selectValueMeta.name
+                      },
+                      {
+                        type: "img",
+                        src: "https://static1.plasmic.app/arrow-up.svg",
+                        styles: {
+                          height: "20px",
+                          width: "20px",
+                          transform: "rotate(180deg)"
+                        }
+                      }
+                    ]
+                  }
+                }
+              },
+              {
+                type: "component",
+                name: POPOVER_COMPONENT_NAME,
+                styles: {
+                  backgroundColor: "white",
+                  padding: "10px",
+                  overflow: "scroll"
+                },
+                props: {
+                  children: [
+                    {
+                      type: "component",
+                      name: LIST_BOX_COMPONENT_NAME,
+                      styles: {
+                        borderWidth: 0,
+                        width: "stretch"
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        ]
       },
       // renderOption: {
       //   type: "slot",
@@ -2168,24 +2902,6 @@ function registerSelect(loader) {
       }
     }
   });
-  registerComponentHelper(loader, SelectValue, {
-    name: makeComponentName("select-value"),
-    displayName: "Aria Selected Value",
-    importPath: "@plasmicpkgs/react-aria/registerSelect",
-    importName: "SelectValue",
-    parentComponentName: SELECT_NAME,
-    props: {
-      className: {
-        type: "class",
-        selectors: [
-          {
-            selector: ":self[data-placeholder]",
-            label: "Placeholder"
-          }
-        ]
-      }
-    }
-  });
 }
 
 const BaseSliderOutput = SliderOutput;
@@ -2296,7 +3012,11 @@ function registerSliderThumb(loader, overrides) {
       },
       interactionVariants: interactionVariants$3,
       props: {
-        advanced: "boolean",
+        advanced: {
+          type: "boolean",
+          displayName: "Advanced",
+          description: "Enables the children slot for creating a more customized thumb"
+        },
         children: {
           type: "slot",
           hidden: (ps) => !ps.advanced
@@ -2376,18 +3096,13 @@ function BaseSliderTrack(props) {
   );
   const thumbs = useMemo(() => {
     const rawThumbs = flattenChildren(children);
-    if (mergedProps.value === void 0) {
-      return [];
-    }
-    if (!Array.isArray(mergedProps == null ? void 0 : mergedProps.value)) {
-      return rawThumbs;
-    }
-    const difference = mergedProps.value.length - rawThumbs.length;
+    const values = Array.isArray(mergedProps == null ? void 0 : mergedProps.value) ? mergedProps.value : [mergedProps.value].filter((v) => v !== void 0);
+    const difference = values.length - rawThumbs.length;
     if (!difference) {
       return rawThumbs;
     }
     if (difference < 0) {
-      return rawThumbs.slice(0, mergedProps.value.length);
+      return rawThumbs.slice(0, values.length);
     }
     const lastThumb = rawThumbs[rawThumbs.length - 1];
     return rawThumbs.concat(new Array(difference).fill(lastThumb));
@@ -2479,8 +3194,8 @@ function registerSliderTrack(loader, overrides) {
 }
 
 var __defProp$4 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
 var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
 var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
@@ -2496,7 +3211,7 @@ var __spreadValues$4 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2576,7 +3291,7 @@ function registerSlider(loader, overrides) {
       defaultStyles: {
         width: "300px"
       },
-      props: __spreadProps$3(__spreadValues$4({}, getCommonInputProps("slider", [
+      props: __spreadProps$2(__spreadValues$4({}, getCommonInputProps("slider", [
         "isDisabled",
         "name",
         "autoFocus",
@@ -2719,8 +3434,8 @@ function registerSlider(loader, overrides) {
 }
 
 var __defProp$3 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
 var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
 var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
@@ -2736,7 +3451,7 @@ var __spreadValues$3 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2781,14 +3496,91 @@ function registerSwitch(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerSwitch",
       importName: "BaseSwitch",
       interactionVariants: interactionVariants$1,
-      props: __spreadProps$2(__spreadValues$3({}, getCommonInputProps("switch", [
+      defaultStyles: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        padding: 0
+      },
+      props: __spreadProps$1(__spreadValues$3({}, getCommonInputProps("switch", [
         "name",
         "isDisabled",
         "isReadOnly",
         "autoFocus",
-        "aria-label",
-        "children"
+        "aria-label"
       ])), {
+        children: {
+          type: "slot",
+          mergeWithParent: true,
+          defaultValue: [
+            {
+              type: "hbox",
+              styles: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "10px",
+                padding: 0
+              },
+              children: [
+                {
+                  // the track
+                  type: "hbox",
+                  styles: {
+                    width: "30px",
+                    height: "16px",
+                    padding: 0,
+                    backgroundColor: "#D5D5D5",
+                    cursor: "pointer",
+                    borderRadius: "999px"
+                  },
+                  children: {
+                    // the thumb
+                    type: "hbox",
+                    styles: {
+                      width: "12px",
+                      height: "12px",
+                      position: "absolute",
+                      top: "2px",
+                      left: "2px",
+                      borderRadius: "100%",
+                      backgroundColor: "#fff",
+                      padding: 0,
+                      transitionProperty: "all",
+                      transitionDuration: "0.5s",
+                      transitionTimingFunction: "ease-in-out"
+                    }
+                  }
+                },
+                {
+                  // the label
+                  type: "component",
+                  name: LABEL_COMPONENT_NAME,
+                  props: {
+                    children: {
+                      type: "text",
+                      value: "Label"
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              type: "component",
+              name: DESCRIPTION_COMPONENT_NAME,
+              styles: {
+                fontSize: "12px"
+              },
+              props: {
+                children: {
+                  type: "text",
+                  value: "Add interaction variants to see it in action..."
+                }
+              }
+            }
+          ]
+        },
         value: {
           type: "boolean",
           editOnly: true,
@@ -2913,8 +3705,8 @@ function registerTextArea(loader, overrides) {
 }
 
 var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
 var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
 var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
@@ -2930,7 +3722,7 @@ var __spreadValues$1 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2953,26 +3745,67 @@ function BaseTextField(props) {
     children
   );
 }
-const componentName = makeComponentName("textField");
+const TEXT_FIELD_COMPONENT_NAME = makeComponentName("textField");
 function registerTextField(loader, overrides) {
   registerComponentHelper(
     loader,
     BaseTextField,
     {
-      name: componentName,
+      name: TEXT_FIELD_COMPONENT_NAME,
       displayName: "Aria TextField",
       importPath: "@plasmicpkgs/react-aria/skinny/registerTextField",
       importName: "BaseTextField",
       // TODO: Support for validate prop
-      props: __spreadProps$1(__spreadValues$1({}, getCommonInputProps("input", [
+      props: __spreadProps(__spreadValues$1({}, getCommonInputProps("input", [
         "name",
         "isDisabled",
         "isReadOnly",
         "autoFocus",
         "aria-label",
-        "children",
         "isRequired"
       ])), {
+        children: {
+          type: "slot",
+          mergeWithParent: true,
+          defaultValue: {
+            type: "vbox",
+            styles: {
+              justifyContent: "flex-start",
+              alignItems: "flex-start",
+              width: "300px",
+              gap: "5px"
+            },
+            children: [
+              {
+                type: "component",
+                name: LABEL_COMPONENT_NAME,
+                props: {
+                  children: {
+                    type: "text",
+                    value: "Label"
+                  }
+                }
+              },
+              {
+                type: "component",
+                name: INPUT_COMPONENT_NAME,
+                styles: {
+                  width: "100%"
+                }
+              },
+              {
+                type: "component",
+                name: DESCRIPTION_COMPONENT_NAME,
+                props: {
+                  children: {
+                    type: "text",
+                    value: "Type something..."
+                  }
+                }
+              }
+            ]
+          }
+        },
         value: {
           type: "string",
           editOnly: true,
@@ -3188,18 +4021,15 @@ function registerTextField(loader, overrides) {
   );
   const thisName = makeChildComponentName(
     overrides == null ? void 0 : overrides.parentComponentName,
-    componentName
+    TEXT_FIELD_COMPONENT_NAME
   );
   registerFieldError(loader, { parentComponentName: thisName });
   registerInput(loader, { parentComponentName: thisName });
   registerLabel(loader, { parentComponentName: thisName });
-  registerDescription(loader, { parentComponentName: thisName });
   registerTextArea(loader, { parentComponentName: thisName });
 }
 
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -3215,7 +4045,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3237,11 +4066,13 @@ function BaseTooltip(props) {
     state,
     ref
   );
+  const hasContent = tooltipContent && tooltipContent.type.name !== "CanvasSlotPlaceholder";
   const focusableChild = flattenChildren(children)[0];
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      style: { position: "relative" }
+      style: { position: "relative" },
+      className: resetClassName
     },
     React.isValidElement(focusableChild) ? React.cloneElement(focusableChild, __spreadValues({
       ref
@@ -3249,7 +4080,10 @@ function BaseTooltip(props) {
       focusableChild.props,
       triggerProps
     ))) : null,
-    state.isOpen && /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, tooltipProps), { className: `${className} ${resetClassName}` }), tooltipContent)
+    state.isOpen && /* @__PURE__ */ React.createElement(React.Fragment, null, React.cloneElement(
+      hasContent ? tooltipContent : /* @__PURE__ */ React.createElement("p", null, "Add some content to the tooltip..."),
+      mergeProps(tooltipProps, tooltipContent == null ? void 0 : tooltipContent.props.attrs, { className })
+    ))
   );
 }
 function registerTooltip(loader, overrides) {
@@ -3327,6 +4161,8 @@ function registerTooltip(loader, overrides) {
 }
 
 function registerAll(loader) {
+  registerText(loader);
+  registerDescription(loader);
   registerSelect(loader);
   registerComboBox(loader);
   registerButton(loader);
@@ -3334,7 +4170,6 @@ function registerAll(loader) {
   registerListBox(loader);
   registerPopover(loader);
   registerInput(loader);
-  registerSection(loader);
   registerSwitch(loader);
   registerForm(loader);
   registerCheckbox(loader);