@plasmicpkgs/react-aria 0.0.27 → 0.0.29

package/dist/react-aria.esm.js

@@ -1,10 +1,10 @@
-import React, { forwardRef, useImperativeHandle, Component } from 'react';
-import { Button, Checkbox, Text, FieldError, Label, CheckboxGroup, ComboBox, ComboBoxStateContext, Form, Input, ListBoxItem, ListBox, Heading, ModalOverlay, Modal, Dialog, PopoverContext, Popover, Radio, RadioGroup, Header, Section, Collection, SelectValue, Select, Switch, TextArea, TextField } from 'react-aria-components';
+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 registerComponent from '@plasmicapp/host/registerComponent';
 import { useFilter } from '@react-aria/i18n';
 import { mergeProps } from '@react-aria/utils';
 import { usePlasmicCanvasContext } from '@plasmicapp/host';
-import { useTooltipTrigger } from 'react-aria';
+import { mergeProps as mergeProps$1, useTooltipTrigger } from 'react-aria';
 import flattenChildren from 'react-keyed-flatten-children';
 import { useTooltipTriggerState } from 'react-stately';
 
@@ -74,9 +74,17 @@ const ARIA_COMPONENTS_INTERACTION_VARIANTS = {
   focusVisible: {
     cssSelector: "[data-focus-visible]",
     displayName: "Focus Visible"
+  },
+  dragging: {
+    cssSelector: "[data-dragging]",
+    displayName: "Dragging"
   }
 };
-function realWithObservedValues(children, changes, updateInteractionVariant) {
+function ChangesObserver({
+  children,
+  changes,
+  updateInteractionVariant
+}) {
   React.useEffect(() => {
     if (updateInteractionVariant) {
       updateInteractionVariant(changes);
@@ -84,6 +92,16 @@ function realWithObservedValues(children, changes, updateInteractionVariant) {
   }, [changes, updateInteractionVariant]);
   return children;
 }
+function realWithObservedValues(children, changes, updateInteractionVariant) {
+  return /* @__PURE__ */ React.createElement(
+    ChangesObserver,
+    {
+      changes,
+      updateInteractionVariant
+    },
+    children
+  );
+}
 function pickAriaComponentVariants(keys) {
   return {
     interactionVariants: Object.fromEntries(
@@ -93,29 +111,29 @@ function pickAriaComponentVariants(keys) {
   };
 }
 
-var __defProp$m = Object.defineProperty;
+var __defProp$p = Object.defineProperty;
 var __defProps$d = Object.defineProperties;
 var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
-var __hasOwnProp$m = Object.prototype.hasOwnProperty;
-var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$m = (a, b) => {
+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$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$p.call(b, prop))
+      __defNormalProp$p(a, prop, b[prop]);
+  if (__getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(b)) {
+      if (__propIsEnum$p.call(b, prop))
+        __defNormalProp$p(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 function registerComponentHelper(loader, component, meta, overrides) {
   if (overrides) {
-    meta = __spreadProps$d(__spreadValues$m(__spreadValues$m({}, meta), overrides), {
-      props: __spreadValues$m(__spreadValues$m({}, meta.props), overrides.props)
+    meta = __spreadProps$d(__spreadValues$p(__spreadValues$p({}, meta), overrides), {
+      props: __spreadValues$p(__spreadValues$p({}, meta.props), overrides.props)
     });
     if (overrides.parentComponentName) {
       meta.name = makeChildComponentName(
@@ -151,33 +169,33 @@ function withoutNils(array) {
   return array.filter((x) => x != null);
 }
 
-var __defProp$l = Object.defineProperty;
+var __defProp$o = Object.defineProperty;
 var __defProps$c = Object.defineProperties;
 var __getOwnPropDescs$c = 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$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$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$o.call(b, prop))
+      __defNormalProp$o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$o(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-var __objRest$e = (source, exclude) => {
+var __objRest$h = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$l.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$l)
-    for (var prop of __getOwnPropSymbols$l(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.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;
@@ -188,7 +206,7 @@ const BUTTON_INTERACTION_VARIANTS = [
   "focused",
   "focusVisible"
 ];
-const { interactionVariants: interactionVariants$5, withObservedValues: withObservedValues$3 } = pickAriaComponentVariants(
+const { interactionVariants: interactionVariants$7, withObservedValues: withObservedValues$5 } = pickAriaComponentVariants(
   BUTTON_INTERACTION_VARIANTS
 );
 function BaseButton(props) {
@@ -197,14 +215,14 @@ function BaseButton(props) {
     resetsForm,
     children,
     updateInteractionVariant
-  } = _a, rest = __objRest$e(_a, [
+  } = _a, rest = __objRest$h(_a, [
     "submitsForm",
     "resetsForm",
     "children",
     "updateInteractionVariant"
   ]);
   const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-  return /* @__PURE__ */ React.createElement(Button, __spreadValues$l({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$3(
+  return /* @__PURE__ */ React.createElement(Button, __spreadValues$o({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$5(
     children,
     {
       hovered: isHovered,
@@ -224,8 +242,8 @@ function registerButton(loader, overrides) {
       displayName: "Aria Button",
       importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
-      interactionVariants: interactionVariants$5,
-      props: __spreadProps$c(__spreadValues$l({}, getCommonInputProps("button", [
+      interactionVariants: interactionVariants$7,
+      props: __spreadProps$c(__spreadValues$o({}, getCommonInputProps("button", [
         "isDisabled",
         "aria-label",
         "children"
@@ -245,6 +263,10 @@ function registerButton(loader, overrides) {
           hidden: (ps) => Boolean(ps.submitsForm),
           description: "Whether clicking this button should reset the enclosing form.",
           advanced: true
+        },
+        onPress: {
+          type: "eventHandler",
+          argTypes: [{ name: "event", type: "object" }]
         }
       }),
       trapsFocus: true
@@ -253,33 +275,33 @@ function registerButton(loader, overrides) {
   );
 }
 
-var __defProp$k = Object.defineProperty;
+var __defProp$n = Object.defineProperty;
 var __defProps$b = Object.defineProperties;
 var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$k = (a, b) => {
+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$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$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 __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-var __objRest$d = (source, exclude) => {
+var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$k.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$k)
-    for (var prop of __getOwnPropSymbols$k(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.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;
@@ -290,12 +312,12 @@ const CHECKBOX_INTERACTION_VARIANTS = [
   "focused",
   "focusVisible"
 ];
-const { interactionVariants: interactionVariants$4, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(
+const { interactionVariants: interactionVariants$6, withObservedValues: withObservedValues$4 } = pickAriaComponentVariants(
   CHECKBOX_INTERACTION_VARIANTS
 );
 function BaseCheckbox(props) {
-  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$d(_a, ["children", "updateInteractionVariant"]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadValues$k({}, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$2(
+  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(
     children,
     {
       hovered: isHovered,
@@ -315,8 +337,8 @@ function registerCheckbox(loader, overrides) {
       displayName: "Aria Checkbox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
-      interactionVariants: interactionVariants$4,
-      props: __spreadProps$b(__spreadValues$k({}, getCommonInputProps("checkbox", [
+      interactionVariants: interactionVariants$6,
+      props: __spreadProps$b(__spreadValues$n({}, getCommonInputProps("checkbox", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -373,37 +395,37 @@ function registerCheckbox(loader, overrides) {
   );
 }
 
-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) => {
+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) => {
   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$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 __objRest$c = (source, exclude) => {
+var __objRest$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$m.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))
+  if (source != null && __getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BaseText(_a) {
-  var _b = _a, { children } = _b, rest = __objRest$c(_b, ["children"]);
-  return /* @__PURE__ */ React.createElement(Text, __spreadValues$j({}, rest), children);
+  var _b = _a, { children } = _b, rest = __objRest$f(_b, ["children"]);
+  return /* @__PURE__ */ React.createElement(Text, __spreadValues$m({}, rest), children);
 }
 function registerText(loader, overrides) {
   registerComponentHelper(
@@ -428,27 +450,27 @@ function registerText(loader, overrides) {
   );
 }
 
-var __defProp$i = Object.defineProperty;
+var __defProp$l = Object.defineProperty;
 var __defProps$a = Object.defineProperties;
 var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
+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$i.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
+    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 __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 function registerDescription(loader, overrides) {
-  registerText(loader, __spreadProps$a(__spreadValues$i({}, overrides), {
+  registerText(loader, __spreadProps$a(__spreadValues$l({}, overrides), {
     displayName: "Aria Description",
     props: {
       slot: { type: "string", hidden: () => true, defaultValue: "description" }
@@ -456,30 +478,30 @@ function registerDescription(loader, overrides) {
   }));
 }
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$h = (a, b) => {
+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) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$h.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b)) {
-      if (__propIsEnum$h.call(b, prop))
-        __defNormalProp$h(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 __objRest$b = (source, exclude) => {
+var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
+  if (source != null && __getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -496,7 +518,7 @@ function BaseFieldError(_a) {
     tooShort,
     typeMismatch,
     valueMissing
-  } = _b, rest = __objRest$b(_b, [
+  } = _b, rest = __objRest$e(_b, [
     "badInput",
     "customError",
     "patternMismatch",
@@ -508,7 +530,7 @@ function BaseFieldError(_a) {
     "typeMismatch",
     "valueMissing"
   ]);
-  return /* @__PURE__ */ React.createElement(FieldError, __spreadValues$h({}, rest), ({ validationDetails, validationErrors }) => {
+  return /* @__PURE__ */ React.createElement(FieldError, __spreadValues$k({}, rest), ({ validationDetails, validationErrors }) => {
     if (validationDetails.badInput && badInput)
       return badInput;
     if (validationDetails.customError && customError)
@@ -606,15 +628,19 @@ function registerFieldError(loader, overrides) {
 }
 
 const BaseLabel = Label;
+const LABEL_COMPONENT_NAME = makeComponentName("label");
 function registerLabel(loader, overrides) {
   registerComponentHelper(
     loader,
     BaseLabel,
     {
-      name: makeComponentName("label"),
+      name: LABEL_COMPONENT_NAME,
       displayName: "Aria Label",
       importPath: "@plasmicpkgs/react-aria/skinny/registerLabel",
       importName: "BaseLabel",
+      defaultStyles: {
+        cursor: "pointer"
+      },
       props: {
         children: {
           type: "slot"
@@ -626,21 +652,21 @@ function registerLabel(loader, overrides) {
   );
 }
 
-var __defProp$g = Object.defineProperty;
+var __defProp$j = Object.defineProperty;
 var __defProps$9 = Object.defineProperties;
 var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$g = (a, b) => {
+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$g.call(b, prop))
-      __defNormalProp$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$g(a, prop, b[prop]);
+    if (__hasOwnProp$j.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
 };
@@ -656,7 +682,7 @@ function registerCheckboxGroup(loader, overrides) {
       displayName: "Aria Checkbox Group",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
-      props: __spreadProps$9(__spreadValues$g({}, getCommonInputProps("checkbox group", [
+      props: __spreadProps$9(__spreadValues$j({}, getCommonInputProps("checkbox group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -711,6 +737,7 @@ function registerCheckboxGroup(loader, overrides) {
   });
 }
 
+const PlasmicSliderContext = React.createContext(void 0);
 React.createContext(void 0);
 const PlasmicListBoxContext = React.createContext(void 0);
 const PlasmicPopoverContext = React.createContext(void 0);
@@ -735,26 +762,26 @@ function deriveStrictOptions(props) {
       return void 0;
     } else if (typeof op === "string" || typeof op === "number") {
       const item = {
-        value: op
+        id: op
       };
       return item;
     } else if (optionInfo) {
       const info = optionInfo(op);
-      if (info.type === "section") {
+      if (info.type === "option-group") {
         const section = {
-          type: "section",
+          type: "option-group",
           items: (_c = (_b = (_a2 = info.items) == null ? void 0 : _a2.map) == null ? void 0 : _b.call(_a2, (item) => makeStrict(item))) == null ? void 0 : _c.filter((x) => !!x),
           label: info.label,
-          key: `section-${sectionCount}`
+          key: `option-group-${sectionCount}`
         };
         sectionCount += 1;
         return section;
       } else {
         let item = info;
-        if (!("value" in item)) {
+        if (!("id" in item)) {
           item = {
-            type: "item",
-            value: JSON.stringify(item)
+            type: "option",
+            id: JSON.stringify(item)
           };
         }
         return item;
@@ -762,19 +789,19 @@ function deriveStrictOptions(props) {
     } else if (typeof op === "object") {
       if ("items" in op) {
         const section = {
-          type: "section",
+          type: "option-group",
           items: (_f = (_e = (_d = op.items) == null ? void 0 : _d.map) == null ? void 0 : _e.call(_d, (item) => makeStrict(item))) == null ? void 0 : _f.filter((x) => !!x),
           label: op.label,
-          key: `section-${sectionCount}`
+          key: `option-group-${sectionCount}`
         };
         sectionCount += 1;
         return section;
       } else {
         let item = op;
-        if (!("value" in item)) {
+        if (!("id" in item)) {
           item = {
-            type: "item",
-            value: JSON.stringify(item)
+            type: "option",
+            id: JSON.stringify(item)
           };
         }
         return item;
@@ -786,7 +813,7 @@ function deriveStrictOptions(props) {
   const strictOptions = (_a = options == null ? void 0 : options.map(makeStrict)) == null ? void 0 : _a.filter((x) => !!x);
   const optionText = (op) => {
     var _a2;
-    return (_a2 = op.label) != null ? _a2 : op.value;
+    return (_a2 = op.label) != null ? _a2 : op.id;
   };
   return { options: strictOptions, optionText };
 }
@@ -797,7 +824,7 @@ function flattenOptions(options) {
     return options.flatMap(
       (op) => {
         var _a;
-        return op.type === "section" ? (_a = op.items) != null ? _a : [] : op;
+        return op.type === "option-group" ? (_a = op.items) != null ? _a : [] : op;
       }
     );
   }
@@ -807,7 +834,7 @@ function makeOptionsPropType() {
     type: "array",
     itemType: {
       type: "object",
-      nameFunc: (item) => item.label || item.value,
+      nameFunc: (item) => item.label || item.id,
       fields: {
         type: {
           type: "choice",
@@ -817,7 +844,7 @@ function makeOptionsPropType() {
           ],
           defaultValue: "option"
         },
-        value: {
+        id: {
           type: "string",
           hidden: (_ps, _ctx, { item }) => item.type !== "option"
         },
@@ -830,9 +857,9 @@ function makeOptionsPropType() {
           },
           itemType: {
             type: "object",
-            nameFunc: (item) => item.label || item.value,
+            nameFunc: (item) => item.label || item.id,
             fields: {
-              value: "string",
+              id: "string",
               label: "string"
             }
           }
@@ -841,12 +868,12 @@ function makeOptionsPropType() {
     },
     defaultValue: [
       {
-        value: "option1",
+        id: "option1",
         label: "Option 1",
         type: "option"
       },
       {
-        value: "option2",
+        id: "option2",
         label: "Option 2",
         type: "option"
       }
@@ -860,7 +887,7 @@ function makeValuePropType() {
     options: (ps) => {
       const { options, optionText } = deriveStrictOptions(ps);
       return flattenOptions(options).map((op) => ({
-        value: op.value,
+        value: op.id,
         label: optionText(op)
       }));
     }
@@ -868,21 +895,21 @@ function makeValuePropType() {
   return type;
 }
 
-var __defProp$f = Object.defineProperty;
+var __defProp$i = Object.defineProperty;
 var __defProps$8 = Object.defineProperties;
 var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$i = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
     }
   return a;
 };
@@ -918,8 +945,8 @@ function BaseComboBox(props) {
     const filterOptions = (opts) => {
       return withoutNils(
         opts.map((op) => {
-          if (op.type === "section") {
-            return __spreadProps$8(__spreadValues$f({}, op), {
+          if (op.type === "option-group") {
+            return __spreadProps$8(__spreadValues$i({}, op), {
               items: op.items ? filterOptions(op.items) : void 0
             });
           } else {
@@ -933,18 +960,18 @@ function BaseComboBox(props) {
       );
     };
     return filterOptions(options);
-  }, [options, filterValue, contains]);
+  }, [filterValue, options, contains, optionText]);
   const flattenedOptions = React.useMemo(
     () => flattenOptions(options),
     [options]
   );
-  const disabledKeys = flattenedOptions.filter((op) => op.isDisabled).map((op) => op.value);
+  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.value === key);
+      const selectedOption = flattenedOptions == null ? void 0 : flattenedOptions.find((op) => op.id === key);
       if (valueType === "text") {
         if (selectedOption) {
           onChange == null ? void 0 : onChange(optionText(selectedOption));
@@ -956,7 +983,7 @@ function BaseComboBox(props) {
         onFilterValueChange == null ? void 0 : onFilterValueChange(optionText(selectedOption));
       }
     },
-    [onChange, onFilterValueChange, flattenedOptions, optionText]
+    [flattenedOptions, valueType, onChange, optionText, onFilterValueChange]
   );
   const onInputValueChange = React.useCallback(
     (newValue) => {
@@ -987,7 +1014,7 @@ function BaseComboBox(props) {
   const onBlur = React.useCallback(() => {
     if (!allowsCustomValue) {
       const selectedOption = flattenedOptions == null ? void 0 : flattenedOptions.find(
-        (op) => valueType === "text" ? optionText(op) === value : op.value === value
+        (op) => valueType === "text" ? optionText(op) === value : op.id === value
       );
       if (selectedOption) {
         const selectedOptionText = optionText(selectedOption);
@@ -998,15 +1025,16 @@ function BaseComboBox(props) {
     }
   }, [
     allowsCustomValue,
-    valueType,
     flattenedOptions,
-    value,
+    valueType,
     optionText,
+    value,
+    filterValue,
     onFilterValueChange
   ]);
   return /* @__PURE__ */ React.createElement(
     ComboBox,
-    __spreadValues$f({
+    __spreadValues$i({
       selectedKey: value,
       onSelectionChange,
       isDisabled,
@@ -1034,15 +1062,6 @@ function BaseComboBox(props) {
       PlasmicListBoxContext.Provider,
       {
         value: {
-          makeItemProps: (item) => ({
-            key: item.value,
-            textValue: optionText(item),
-            children: optionText(item)
-          }),
-          makeSectionProps: (section) => ({
-            section,
-            key: section.key
-          }),
           getItemType: (option) => option.type === "section" ? "section" : "item"
         }
       },
@@ -1145,71 +1164,145 @@ function registerComboBox(loader) {
   });
 }
 
-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) => {
+var __defProp$h = Object.defineProperty;
+var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
+var __hasOwnProp$h = Object.prototype.hasOwnProperty;
+var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$h = (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]);
+    if (__hasOwnProp$h.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(b)) {
+      if (__propIsEnum$h.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$a = (source, exclude) => {
+var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$h.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))
+  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 BaseForm(props) {
-  const _a = props, { onSubmit, children } = _a, rest = __objRest$a(_a, ["onSubmit", "children"]);
-  return /* @__PURE__ */ React.createElement(
-    Form,
-    __spreadValues$e({
-      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 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 registerForm(loader, overrides) {
+function registerDialogTrigger(loader, overrides) {
   registerComponentHelper(
     loader,
-    BaseForm,
+    BaseDialogTrigger,
     {
-      name: makeComponentName("form"),
-      displayName: "Aria Form",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerForm",
-      importName: "BaseForm",
+      name: makeComponentName("dialogTrigger"),
+      displayName: "Aria Dialog Trigger",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerDialogTrigger",
+      importName: "BaseDialogTrigger",
+      isAttachment: true,
       props: {
-        children: {
+        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"
+        }
+      },
+      trapsFocus: true
+    },
+    overrides
+  );
+}
+
+var __defProp$g = Object.defineProperty;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$g = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
+    }
+  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 registerForm(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseForm,
+    {
+      name: makeComponentName("form"),
+      displayName: "Aria Form",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerForm",
+      importName: "BaseForm",
+      props: {
+        children: {
           type: "slot"
         },
         onSubmit: {
@@ -1227,43 +1320,43 @@ function registerForm(loader, overrides) {
   );
 }
 
-var __defProp$d = Object.defineProperty;
-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) => {
+var __defProp$f = Object.defineProperty;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$f = (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]);
+    if (__hasOwnProp$f.call(b, prop))
+      __defNormalProp$f(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$f(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$9 = (source, exclude) => {
+var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$f.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))
+  if (source != null && __getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const INPUT_INTERACTION_VARIANTS = ["focused", "hovered"];
-const { interactionVariants: interactionVariants$3 } = pickAriaComponentVariants(
+const { interactionVariants: interactionVariants$5 } = pickAriaComponentVariants(
   INPUT_INTERACTION_VARIANTS
 );
 function BaseInput(props) {
-  const _a = props, { updateInteractionVariant } = _a, rest = __objRest$9(_a, ["updateInteractionVariant"]);
+  const _a = props, { updateInteractionVariant } = _a, rest = __objRest$b(_a, ["updateInteractionVariant"]);
   return /* @__PURE__ */ React.createElement(
     Input,
-    __spreadValues$d({
+    __spreadValues$f({
       onHoverChange: (isHovered) => {
         updateInteractionVariant == null ? void 0 : updateInteractionVariant({
           hovered: isHovered
@@ -1291,7 +1384,7 @@ function registerInput(loader, overrides) {
       displayName: "Aria Input",
       importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
       importName: "BaseInput",
-      interactionVariants: interactionVariants$3,
+      interactionVariants: interactionVariants$5,
       props: {
         placeholder: {
           type: "string"
@@ -1303,27 +1396,26 @@ function registerInput(loader, overrides) {
   );
 }
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+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$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    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) {
-  var _a;
   const contextProps = React.useContext(PlasmicItemContext);
   const mergedProps = mergeProps(contextProps, props);
-  return /* @__PURE__ */ React.createElement(ListBoxItem, __spreadValues$c({ id: (_a = mergedProps.key) != null ? _a : void 0 }, mergedProps));
+  return /* @__PURE__ */ React.createElement(ListBoxItem, __spreadValues$e({}, mergedProps), mergedProps.children);
 }
 function registerListBoxItem(loader, overrides) {
   registerComponentHelper(
@@ -1335,23 +1427,8 @@ function registerListBoxItem(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBoxItem",
       importName: "BaseListBoxItem",
       props: {
-        className: {
-          type: "class",
-          displayName: "Additional states",
-          selectors: [
-            {
-              selector: ":self[data-selected]",
-              label: "Selected"
-            },
-            {
-              selector: ":self[data-focused], :self[data-hovered]",
-              label: "Focused"
-            },
-            {
-              selector: ":self[data-disabled]",
-              label: "Disabled"
-            }
-          ]
+        children: {
+          type: "slot"
         }
       }
     },
@@ -1359,102 +1436,67 @@ function registerListBoxItem(loader, overrides) {
   );
 }
 
-var __defProp$b = Object.defineProperty;
+var __defProp$d = Object.defineProperty;
 var __defProps$7 = Object.defineProperties;
 var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+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$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    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$8 = (source, exclude) => {
+var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(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;
 };
-const STANDALONE_PROPS = {
-  getItemType: (item) => item.type,
-  items: [
-    { type: "item", value: "op1", label: "Option 1" },
-    { type: "item", value: "op2", label: "Option 2" },
-    { type: "item", value: "op3", label: "Option 3" },
-    {
-      type: "section",
-      label: "Section 1",
-      items: [
-        { type: "item", value: "s1op1", label: "Section 1 Option 1" },
-        { type: "item", value: "s1op2", label: "Section 1 Option 2" },
-        { type: "item", value: "s1op3", label: "Section 1 Option 3" }
-      ]
-    },
-    {
-      type: "section",
-      label: "Section 2",
-      items: [
-        { type: "item", value: "s2op1", label: "Section 2 Option 1" },
-        { type: "item", value: "s2op2", label: "Section 2 Option 2" },
-        { type: "item", value: "s2op3", label: "Section 2 Option 3" }
-      ]
-    }
-  ],
-  makeItemProps: (item) => ({
-    key: item.value,
-    textValue: item.label,
-    children: item.label
-  }),
-  makeSectionProps: (section) => ({
-    section,
-    key: section.label
-  })
-};
 function BaseListBox(props) {
+  var _c;
   const contextProps = React.useContext(PlasmicListBoxContext);
   const isStandalone = !contextProps;
-  const _a = mergeProps(contextProps, props, isStandalone ? STANDALONE_PROPS : {}), {
-    makeItemProps,
-    makeSectionProps,
-    renderItem,
-    renderSection,
-    getItemType
-  } = _a, rest = __objRest$8(_a, [
-    "makeItemProps",
-    "makeSectionProps",
-    "renderItem",
-    "renderSection",
-    "getItemType"
-  ]);
-  return /* @__PURE__ */ React.createElement(ListBox, __spreadValues$b({}, mergeProps(contextProps, rest)), (item) => {
-    if ((getItemType == null ? void 0 : getItemType(item)) === "section") {
-      const sectionProps = makeSectionProps == null ? void 0 : makeSectionProps(item);
-      return /* @__PURE__ */ React.createElement(
+  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,
         {
-          key: sectionProps == null ? void 0 : sectionProps.key,
-          value: __spreadProps$7(__spreadValues$b({}, sectionProps), { makeItemProps, renderItem })
+          value: {
+            renderItem,
+            key: (_a2 = item.key) != null ? _a2 : item.label,
+            section: item
+          }
         },
         renderSection == null ? void 0 : renderSection(item)
-      );
+      ));
     } else {
-      const itemProps = makeItemProps == null ? void 0 : makeItemProps(item);
-      return /* @__PURE__ */ React.createElement(PlasmicItemContext.Provider, { key: itemProps == null ? void 0 : itemProps.key, value: itemProps }, renderItem == null ? void 0 : renderItem(item));
+      return /* @__PURE__ */ React.createElement(PlasmicItemContext.Provider, { value: item }, renderItem == null ? void 0 : renderItem(item));
     }
   });
 }
@@ -1468,29 +1510,19 @@ function registerListBox(loader, overrides) {
       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: ["item"]
+          renderPropParams: ["itemProps"]
         },
         renderSection: {
           type: "slot",
           displayName: "Render Section",
-          renderPropParams: ["section"]
-        },
-        className: {
-          type: "class",
-          displayName: "Additional states",
-          selectors: [
-            {
-              selector: ":self[data-focused]",
-              label: "Focused"
-            },
-            {
-              selector: ":self[data-focus-visible]",
-              label: "Focused by keyboard"
-            }
-          ]
+          renderPropParams: ["sectionProps"]
         }
       }
     },
@@ -1501,33 +1533,33 @@ function registerListBox(loader, overrides) {
   });
 }
 
-var __defProp$a = Object.defineProperty;
+var __defProp$c = Object.defineProperty;
 var __defProps$6 = Object.defineProperties;
 var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-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 __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (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$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-var __objRest$7 = (source, exclude) => {
+var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$c.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$c)
+    for (var prop of __getOwnPropSymbols$c(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1540,7 +1572,7 @@ const BaseModal = forwardRef(
       modalOverlayClass,
       onOpenChange,
       className
-    } = _a, rest = __objRest$7(_a, [
+    } = _a, rest = __objRest$9(_a, [
       "children",
       "heading",
       "modalOverlayClass",
@@ -1559,7 +1591,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$a({}, rest), {
+      __spreadProps$6(__spreadValues$c({}, rest), {
         className: modalOverlayClass,
         onOpenChange
       }),
@@ -1631,58 +1663,48 @@ function registerModal(loader, overrides) {
   );
 }
 
-var __defProp$9 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-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$b = Object.defineProperty;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (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$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
+    }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-var __objRest$6 = (source, exclude) => {
+var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
+  if (source != null && __getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BasePopover(props) {
-  const _a = props, { resetClassName } = _a, restProps = __objRest$6(_a, ["resetClassName"]);
+  const _a = props, { resetClassName } = _a, restProps = __objRest$8(_a, ["resetClassName"]);
   const isStandalone = !React.useContext(PopoverContext);
   const contextProps = React.useContext(PlasmicPopoverContext);
-  const canvas = usePlasmicCanvasContext();
   const mergedProps = mergeProps(contextProps, restProps, {
     className: `${resetClassName}`
   });
-  if (isStandalone) {
-    const triggerRef = React.useRef(null);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(
-      Popover,
-      __spreadProps$5(__spreadValues$9({}, mergedProps), {
-        triggerRef,
-        isNonModal: true,
-        isOpen: true
-      })
-    ));
-  } else {
-    return /* @__PURE__ */ React.createElement(Popover, __spreadProps$5(__spreadValues$9({}, mergedProps), { isNonModal: !!canvas }));
-  }
+  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 registerPopover(loader, overrides) {
   registerComponentHelper(
@@ -1718,20 +1740,6 @@ function registerPopover(loader, overrides) {
         resetClassName: {
           type: "themeResetClass"
         }
-        // className: {
-        //   type: "class",
-        //   displayName: "Additional states",
-        //   selectors: [
-        //     {
-        //       selector: ":self[data-entering]",
-        //       label: "Entering",
-        //     },
-        //     {
-        //       selector: ":self[data-exiting]",
-        //       label: "Exiting",
-        //     },
-        //   ],
-        // },
       },
       styleSections: true
     },
@@ -1755,33 +1763,33 @@ class ErrorBoundary extends Component {
   }
 }
 
-var __defProp$8 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-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) => {
+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) => {
   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]);
+    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 __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-var __objRest$5 = (source, exclude) => {
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(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;
@@ -1792,12 +1800,12 @@ const RADIO_INTERACTION_VARIANTS = [
   "focused",
   "focusVisible"
 ];
-const { interactionVariants: interactionVariants$2, withObservedValues: withObservedValues$1 } = pickAriaComponentVariants(
+const { interactionVariants: interactionVariants$4, withObservedValues: withObservedValues$3 } = pickAriaComponentVariants(
   RADIO_INTERACTION_VARIANTS
 );
 function BaseRadio(props) {
-  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$5(_a, ["children", "updateInteractionVariant"]);
-  const radio = /* @__PURE__ */ React.createElement(Radio, __spreadValues$8({}, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$1(
+  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(
     children,
     {
       hovered: isHovered,
@@ -1818,8 +1826,8 @@ function registerRadio(loader, overrides) {
       displayName: "Aria Radio",
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadio",
       importName: "BaseRadio",
-      interactionVariants: interactionVariants$2,
-      props: __spreadProps$4(__spreadValues$8({}, getCommonInputProps("radio", [
+      interactionVariants: interactionVariants$4,
+      props: __spreadProps$5(__spreadValues$a({}, getCommonInputProps("radio", [
         "isDisabled",
         "autoFocus",
         "aria-label",
@@ -1847,25 +1855,25 @@ function registerRadio(loader, overrides) {
   );
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (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$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(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$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 const BaseRadioGroup = RadioGroup;
 const componentName$1 = makeComponentName("radioGroup");
 function registerRadioGroup(loader, overrides) {
@@ -1877,7 +1885,7 @@ function registerRadioGroup(loader, overrides) {
       displayName: "Aria RadioGroup",
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadioGroup",
       importName: "BaseRadioGroup",
-      props: __spreadProps$3(__spreadValues$7({}, getCommonInputProps("radio group", [
+      props: __spreadProps$4(__spreadValues$9({}, getCommonInputProps("radio group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -1932,6 +1940,274 @@ function registerRadioGroup(loader, overrides) {
   });
 }
 
+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;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+    }
+  return a;
+};
+const SELECT_NAME = makeComponentName("select");
+function BaseSelect(props) {
+  const {
+    value,
+    onChange,
+    placeholder,
+    previewOpen,
+    onOpenChange,
+    isDisabled,
+    className,
+    style,
+    structure,
+    name,
+    "aria-label": ariaLabel
+  } = props;
+  const { options } = useStrictOptions(props);
+  const canvas = usePlasmicCanvasContext();
+  const disabledKeys = flattenOptions(options).filter((op) => op.isDisabled).map((op) => op.id);
+  return /* @__PURE__ */ React.createElement(
+    Select,
+    __spreadValues$7(__spreadValues$7({
+      placeholder,
+      selectedKey: value,
+      onSelectionChange: onChange,
+      onOpenChange,
+      isDisabled,
+      className,
+      style,
+      name,
+      "aria-label": ariaLabel
+    }, previewOpen && canvas ? { isOpen: previewOpen } : void 0), extractPlasmicDataProps(props)),
+    /* @__PURE__ */ React.createElement(
+      PlasmicListBoxContext.Provider,
+      {
+        value: {
+          items: options,
+          disabledKeys
+        }
+      },
+      structure
+    )
+  );
+}
+function registerSelect(loader) {
+  registerComponentHelper(loader, BaseSelect, {
+    name: SELECT_NAME,
+    displayName: "Aria Select",
+    importPath: "@plasmicpkgs/react-aria/skinny/registerSelect",
+    importName: "BaseSelect",
+    props: {
+      options: makeOptionsPropType(),
+      placeholder: {
+        type: "string"
+      },
+      isDisabled: {
+        type: "boolean"
+      },
+      value: makeValuePropType(),
+      onChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "value", type: "string" }]
+      },
+      previewOpen: {
+        type: "boolean",
+        displayName: "Preview opened?",
+        description: "Preview opened state while designing in Plasmic editor",
+        editOnly: true
+      },
+      onOpenChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "isOpen", type: "boolean" }]
+      },
+      // optionValue: {
+      //   type: "string",
+      //   displayName: "Field key for an option's value",
+      //   hidden: (ps) =>
+      //     !ps.options ||
+      //     !ps.options[0] ||
+      //     typeof ps.options[0] === "string" ||
+      //     "value" in ps.options[0],
+      //   exprHint:
+      //     "Return a function that takes in an option object, and returns the key to use",
+      // },
+      // optionText: {
+      //   type: "string",
+      //   displayName: "Field key for an option's text value",
+      //   hidden: (ps) =>
+      //     !ps.options ||
+      //     !ps.options[0] ||
+      //     typeof ps.options[0] === "string" ||
+      //     "value" in ps.options[0],
+      //   exprHint:
+      //     "Return a function that takes in an option object, and returns the text value to use",
+      // },
+      // optionDisabled: {
+      //   type: "string",
+      //   displayName: "Field key for whether an option is disabled",
+      //   hidden: (ps) =>
+      //     !ps.options ||
+      //     !ps.options[0] ||
+      //     typeof ps.options[0] === "string" ||
+      //     "value" in ps.options[0],
+      //   exprHint:
+      //     "Return a function that takes in an option object, and returns true if option should be disabled",
+      // },
+      structure: {
+        type: "slot"
+      },
+      // renderOption: {
+      //   type: "slot",
+      //   displayName: "Custom render option",
+      //   renderPropParams: ["item"],
+      //   hidePlaceholder: true
+      // },
+      name: {
+        type: "string",
+        displayName: "Form field key",
+        description: "Name of the input, when submitting in an HTML form",
+        advanced: true
+      },
+      "aria-label": {
+        type: "string",
+        displayName: "Aria Label",
+        description: "Label for this input, if no visible label is used",
+        advanced: true
+      }
+    },
+    states: {
+      value: {
+        type: "writable",
+        valueProp: "value",
+        onChangeProp: "onChange",
+        variableType: "text"
+      },
+      isOpen: {
+        type: "readonly",
+        onChangeProp: "onOpenChange",
+        variableType: "boolean"
+      }
+    }
+  });
+  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;
+const SLIDER_OUTPUT_COMPONENT_NAME = makeComponentName("sliderOutput");
+function registerSliderOutput(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseSliderOutput,
+    {
+      name: SLIDER_OUTPUT_COMPONENT_NAME,
+      displayName: "Aria Slider Output",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerSliderOutput",
+      importName: "BaseSliderOutput",
+      props: {
+        children: { type: "slot" }
+      },
+      trapsFocus: true
+    },
+    overrides
+  );
+}
+
 var __defProp$6 = Object.defineProperty;
 var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
 var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
@@ -1948,20 +2224,85 @@ var __spreadValues$6 = (a, b) => {
     }
   return a;
 };
-function BaseHeader(props) {
-  const contextProps = React.useContext(PlasmicHeaderContext);
-  return /* @__PURE__ */ React.createElement(Header, __spreadValues$6({}, mergeProps(contextProps, props)));
+var __objRest$6 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const SLIDER_THUMB_INTERACTION_VARIANTS = [
+  "dragging",
+  "hovered",
+  "focused",
+  "focusVisible"
+];
+const { interactionVariants: interactionVariants$3, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(
+  SLIDER_THUMB_INTERACTION_VARIANTS
+);
+function BaseSliderThumb(_a) {
+  var _b = _a, {
+    children,
+    advanced,
+    updateInteractionVariant
+  } = _b, rest = __objRest$6(_b, [
+    "children",
+    "advanced",
+    "updateInteractionVariant"
+  ]);
+  const context = React.useContext(PlasmicSliderContext);
+  const mergedProps = mergeProps$1(context, rest);
+  const thumb = /* @__PURE__ */ React.createElement(SliderThumb, __spreadValues$6({}, mergedProps), ({ isDragging, isHovered, isFocused, isFocusVisible }) => withObservedValues$2(
+    /* @__PURE__ */ React.createElement(React.Fragment, null, advanced ? children : void 0),
+    {
+      dragging: isDragging,
+      hovered: isHovered,
+      focused: isFocused,
+      focusVisible: isFocusVisible
+    },
+    updateInteractionVariant
+  ));
+  return /* @__PURE__ */ React.createElement(
+    ErrorBoundary,
+    {
+      fallback: /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, /* @__PURE__ */ React.createElement(SliderTrack, null, thumb))
+    },
+    thumb
+  );
 }
-function registerHeader(loader, overrides) {
+const SLIDER_THUMB_COMPONENT_NAME = makeComponentName("sliderThumb");
+function registerSliderThumb(loader, overrides) {
   registerComponentHelper(
     loader,
-    BaseHeader,
+    BaseSliderThumb,
     {
-      name: makeComponentName("header"),
-      displayName: "Aria Header",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerHeader",
-      importName: "BaseHeader",
-      props: {}
+      name: SLIDER_THUMB_COMPONENT_NAME,
+      displayName: "Aria Slider Thumb",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerSliderThumb",
+      importName: "BaseSliderThumb",
+      defaultStyles: {
+        position: "absolute",
+        top: "5px",
+        width: "20px",
+        height: "20px",
+        backgroundColor: "#C80101",
+        borderRadius: "100%",
+        cursor: "pointer"
+      },
+      interactionVariants: interactionVariants$3,
+      props: {
+        advanced: "boolean",
+        children: {
+          type: "slot",
+          hidden: (ps) => !ps.advanced
+        }
+      },
+      trapsFocus: true
     },
     overrides
   );
@@ -1983,7 +2324,7 @@ var __spreadValues$5 = (a, b) => {
     }
   return a;
 };
-var __objRest$4 = (source, exclude) => {
+var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1995,44 +2336,151 @@ var __objRest$4 = (source, exclude) => {
     }
   return target;
 };
-function BaseSection(props) {
-  const contextProps = React.useContext(PlasmicSectionContext);
-  const mergedProps = mergeProps(contextProps, props);
-  const _a = mergedProps, { section, renderHeader, key, makeItemProps, renderItem } = _a, rest = __objRest$4(_a, ["section", "renderHeader", "key", "makeItemProps", "renderItem"]);
-  return /* @__PURE__ */ React.createElement(Section, __spreadValues$5({ id: key != null ? key : void 0 }, rest), /* @__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) => {
-    const itemProps = makeItemProps == null ? void 0 : makeItemProps(item);
-    return /* @__PURE__ */ React.createElement(PlasmicItemContext.Provider, { key: itemProps == null ? void 0 : itemProps.key, value: itemProps }, renderItem == null ? void 0 : renderItem(item));
-  }));
+const SLIDER_TRACK_INTERACTION_VARIANTS = ["hovered"];
+const { interactionVariants: interactionVariants$2, withObservedValues: withObservedValues$1 } = pickAriaComponentVariants(
+  SLIDER_TRACK_INTERACTION_VARIANTS
+);
+function findMinMaxIndices(values) {
+  if (typeof values === "number" || (values == null ? void 0 : values.length) === 0 || !Array.isArray(values)) {
+    return { minIndex: 0, maxIndex: 0 };
+  }
+  let minIndex = 0;
+  let maxIndex = 0;
+  for (let i = 1; i < values.length; i++) {
+    if (values[i] < values[minIndex]) {
+      minIndex = i;
+    }
+    if (values[i] > values[maxIndex]) {
+      maxIndex = i;
+    }
+  }
+  return { minIndex, maxIndex };
 }
-function registerSection(loader, overrides) {
-  registerComponentHelper(
-    loader,
-    BaseSection,
+function BaseSliderTrack(props) {
+  const context = React.useContext(PlasmicSliderContext);
+  const mergedProps = mergeProps$1(context, props);
+  const _a = mergedProps, {
+    children,
+    progressBar,
+    updateInteractionVariant,
+    isMultiValue
+  } = _a, rest = __objRest$5(_a, [
+    "children",
+    "progressBar",
+    "updateInteractionVariant",
+    "isMultiValue"
+  ]);
+  const { minIndex, maxIndex } = useMemo(
+    () => findMinMaxIndices(mergedProps.value),
+    [mergedProps.value]
+  );
+  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;
+    if (!difference) {
+      return rawThumbs;
+    }
+    if (difference < 0) {
+      return rawThumbs.slice(0, mergedProps.value.length);
+    }
+    const lastThumb = rawThumbs[rawThumbs.length - 1];
+    return rawThumbs.concat(new Array(difference).fill(lastThumb));
+  }, [children, mergedProps.value]);
+  const track = /* @__PURE__ */ React.createElement(SliderTrack, __spreadValues$5({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React.createElement(React.Fragment, null, withObservedValues$1(
+    /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: `${(!isMultiValue ? state.getThumbPercent(minIndex) : state.getThumbPercent(maxIndex) - state.getThumbPercent(minIndex)) * 100}%`,
+          height: "100%",
+          position: "absolute",
+          top: 0,
+          left: !isMultiValue ? 0 : state.getThumbPercent(minIndex) * 100 + "%"
+        }
+      },
+      progressBar
+    ), thumbs.map(
+      (thumb, i) => React.isValidElement(thumb) && React.cloneElement(thumb, {
+        // sets the index of the thumb, so that each thumb reflects the correct value
+        index: i
+      })
+    )),
     {
-      name: makeComponentName("section"),
-      displayName: "Aria Section",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerSection",
-      importName: "BaseSection",
+      hovered: isHovered
+    },
+    updateInteractionVariant
+  )));
+  return /* @__PURE__ */ React.createElement(
+    ErrorBoundary,
+    {
+      fallback: /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, track)
+    },
+    track
+  );
+}
+const SLIDER_TRACK_COMPONENT_NAME = makeComponentName("sliderTrack");
+function registerSliderTrack(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseSliderTrack,
+    {
+      name: SLIDER_TRACK_COMPONENT_NAME,
+      displayName: "Aria Slider Track",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerSliderTrack",
+      importName: "BaseSliderTrack",
+      defaultStyles: {
+        width: "stretch",
+        backgroundColor: "#aaa",
+        position: "relative",
+        height: "10px",
+        padding: 0
+      },
+      interactionVariants: interactionVariants$2,
       props: {
-        renderHeader: {
+        children: {
           type: "slot",
-          displayName: "Render section header",
-          renderPropParams: ["section"]
+          description: "The thumbs of the slider",
+          defaultValue: [
+            {
+              type: "component",
+              name: makeChildComponentName(
+                SLIDER_COMPONENT_NAME,
+                SLIDER_THUMB_COMPONENT_NAME
+              )
+            }
+          ]
+        },
+        progressBar: {
+          type: "slot",
+          displayName: "Progress Bar",
+          defaultValue: [
+            {
+              type: "box",
+              styles: {
+                height: "100%",
+                width: "100%",
+                backgroundColor: "#ffa6a6",
+                padding: 0
+              }
+            }
+          ]
         }
-      }
+      },
+      trapsFocus: true
     },
     overrides
   );
-  const thisName = makeChildComponentName(
-    overrides == null ? void 0 : overrides.parentComponentName,
-    makeComponentName("section")
-  );
-  registerHeader(loader, {
-    parentComponentName: thisName
-  });
 }
 
 var __defProp$4 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
 var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
 var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
@@ -2048,175 +2496,225 @@ var __spreadValues$4 = (a, b) => {
     }
   return a;
 };
-const SELECT_NAME = makeComponentName("select");
-function BaseSelect(props) {
-  const {
-    value,
-    onChange,
-    placeholder,
-    previewOpen,
-    onOpenChange,
-    isDisabled,
-    className,
-    style,
-    structure,
-    renderOption,
-    name,
-    "aria-label": ariaLabel
-  } = props;
-  const { options, optionText } = useStrictOptions(props);
-  const canvas = usePlasmicCanvasContext();
-  const disabledKeys = flattenOptions(options).filter((op) => op.isDisabled).map((op) => op.value);
-  return /* @__PURE__ */ React.createElement(
-    Select,
-    __spreadValues$4(__spreadValues$4({
-      placeholder,
-      selectedKey: value,
-      onSelectionChange: onChange,
-      onOpenChange,
-      isDisabled,
-      className,
-      style,
-      name,
-      "aria-label": ariaLabel
-    }, previewOpen && canvas ? { isOpen: previewOpen } : void 0), extractPlasmicDataProps(props)),
-    /* @__PURE__ */ React.createElement(
-      PlasmicListBoxContext.Provider,
-      {
-        value: {
-          items: options,
-          disabledKeys,
-          makeItemProps: (item) => ({
-            key: item.value,
-            textValue: optionText(item),
-            children: renderOption ? renderOption(item) : optionText(item)
-          }),
-          makeSectionProps: (section) => ({
-            section,
-            key: section.key
-          }),
-          getItemType: (option) => option.type === "section" ? "section" : "item"
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __objRest$4 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const SLIDER_COMPONENT_NAME = makeComponentName("slider");
+const sliderHelpers = {
+  states: {
+    range: {
+      onChangeArgsToValue: (value, isMultiValue) => {
+        if (isMultiValue) {
+          return Array.isArray(value) ? value : [value, value + 10];
         }
-      },
-      structure
-    )
-  );
-}
-function registerSelect(loader) {
-  registerComponentHelper(loader, BaseSelect, {
-    name: SELECT_NAME,
-    displayName: "Aria Select",
-    importPath: "@plasmicpkgs/react-aria/skinny/registerSelect",
-    importName: "BaseSelect",
-    props: {
-      options: makeOptionsPropType(),
-      placeholder: {
-        type: "string"
-      },
-      isDisabled: {
-        type: "boolean"
-      },
-      value: makeValuePropType(),
-      onChange: {
-        type: "eventHandler",
-        argTypes: [{ name: "value", type: "string" }]
-      },
-      previewOpen: {
-        type: "boolean",
-        displayName: "Preview opened?",
-        description: "Preview opened state while designing in Plasmic editor",
-        editOnly: true
-      },
-      onOpenChange: {
-        type: "eventHandler",
-        argTypes: [{ name: "isOpen", type: "boolean" }]
-      },
-      // optionValue: {
-      //   type: "string",
-      //   displayName: "Field key for an option's value",
-      //   hidden: (ps) =>
-      //     !ps.options ||
-      //     !ps.options[0] ||
-      //     typeof ps.options[0] === "string" ||
-      //     "value" in ps.options[0],
-      //   exprHint:
-      //     "Return a function that takes in an option object, and returns the key to use",
-      // },
-      // optionText: {
-      //   type: "string",
-      //   displayName: "Field key for an option's text value",
-      //   hidden: (ps) =>
-      //     !ps.options ||
-      //     !ps.options[0] ||
-      //     typeof ps.options[0] === "string" ||
-      //     "value" in ps.options[0],
-      //   exprHint:
-      //     "Return a function that takes in an option object, and returns the text value to use",
-      // },
-      // optionDisabled: {
-      //   type: "string",
-      //   displayName: "Field key for whether an option is disabled",
-      //   hidden: (ps) =>
-      //     !ps.options ||
-      //     !ps.options[0] ||
-      //     typeof ps.options[0] === "string" ||
-      //     "value" in ps.options[0],
-      //   exprHint:
-      //     "Return a function that takes in an option object, and returns true if option should be disabled",
-      // },
-      structure: {
-        type: "slot"
-      },
-      // renderOption: {
-      //   type: "slot",
-      //   displayName: "Custom render option",
-      //   renderPropParams: ["item"],
-      //   hidePlaceholder: true
-      // },
-      name: {
-        type: "string",
-        displayName: "Form field key",
-        description: "Name of the input, when submitting in an HTML form",
-        advanced: true
-      },
-      "aria-label": {
-        type: "string",
-        displayName: "Aria Label",
-        description: "Label for this input, if no visible label is used",
-        advanced: true
+        return void 0;
       }
     },
-    states: {
-      value: {
-        type: "writable",
-        valueProp: "value",
-        onChangeProp: "onChange",
-        variableType: "text"
-      },
-      isOpen: {
-        type: "readonly",
-        onChangeProp: "onOpenChange",
-        variableType: "boolean"
+    value: {
+      onChangeArgsToValue: (value, isMultiValue) => {
+        if (isMultiValue) {
+          return void 0;
+        }
+        return Array.isArray(value) ? value[0] : value;
       }
     }
+  }
+};
+function BaseSlider(props) {
+  const _a = props, { range, value, defaultRange, defaultValue, onChange } = _a, rest = __objRest$4(_a, ["range", "value", "defaultRange", "defaultValue", "onChange"]);
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    var _a2, _b, _c;
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if (props.isMultiValue) {
+      const minValue = (_a2 = props.minValue) != null ? _a2 : 0;
+      (_b = props.onChange) == null ? void 0 : _b.call(
+        props,
+        Array.isArray(range) && range.length > 1 ? range : [minValue, minValue + 10],
+        true
+      );
+      return;
+    }
+    (_c = props.onChange) == null ? void 0 : _c.call(props, Array.isArray(value) ? 0 : value != null ? value : 0, false);
+  }, [props.isMultiValue]);
+  const mergedProps = mergeProps$1(rest, {
+    value: props.isMultiValue ? range : value,
+    defaultValue: props.isMultiValue ? defaultRange : defaultValue
   });
-  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"
-          }
-        ]
+  return /* @__PURE__ */ React.createElement(PlasmicSliderContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(
+    Slider,
+    __spreadValues$4({
+      key: props.isMultiValue ? "multi" : "single",
+      onChange: (newValue) => {
+        onChange == null ? void 0 : onChange(newValue, props.isMultiValue);
       }
-    }
+    }, mergedProps)
+  ));
+}
+function registerSlider(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseSlider,
+    {
+      name: SLIDER_COMPONENT_NAME,
+      displayName: "Aria Slider",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerSlider",
+      importName: "BaseSlider",
+      defaultStyles: {
+        width: "300px"
+      },
+      props: __spreadProps$3(__spreadValues$4({}, getCommonInputProps("slider", [
+        "isDisabled",
+        "name",
+        "autoFocus",
+        "aria-label"
+      ])), {
+        children: {
+          type: "slot",
+          defaultValue: [
+            {
+              type: "hbox",
+              styles: {
+                width: "stretch",
+                justifyContent: "space-between",
+                padding: "8px 0px"
+              },
+              children: [
+                {
+                  type: "component",
+                  name: LABEL_COMPONENT_NAME,
+                  props: {
+                    children: {
+                      type: "text",
+                      value: "Label"
+                    }
+                  }
+                },
+                {
+                  type: "component",
+                  name: makeChildComponentName(
+                    SLIDER_COMPONENT_NAME,
+                    SLIDER_OUTPUT_COMPONENT_NAME
+                  ),
+                  props: {
+                    children: {
+                      type: "text",
+                      value: "Output"
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              type: "component",
+              name: makeChildComponentName(
+                SLIDER_COMPONENT_NAME,
+                SLIDER_TRACK_COMPONENT_NAME
+              )
+            }
+          ]
+        },
+        orientation: {
+          type: "choice",
+          options: ["horizontal", "vertical"],
+          defaultValueHint: "horizontal",
+          defaultValue: "horizontal"
+        },
+        minValue: {
+          type: "number",
+          description: "The minimum value of the slider",
+          defaultValueHint: 0
+        },
+        maxValue: {
+          type: "number",
+          description: "The maximum value of the slider",
+          defaultValueHint: 100
+        },
+        step: {
+          type: "number",
+          description: "The step value of the slider",
+          defaultValueHint: 1
+        },
+        isMultiValue: {
+          type: "boolean",
+          displayName: "Multi-valued",
+          description: "Whether the slider supports range (multiple thumbs)",
+          defaultValue: false,
+          defaultValueHint: false
+        },
+        range: {
+          type: "array",
+          editOnly: true,
+          uncontrolledProp: "defaultRange",
+          description: "The default range of the slider",
+          defaultValueHint: [10, 20],
+          defaultValue: [10, 20],
+          hidden: (ps) => !ps.isMultiValue
+        },
+        value: {
+          type: "number",
+          editOnly: true,
+          uncontrolledProp: "defaultValue",
+          description: "The default value of the slider",
+          defaultValueHint: 0,
+          defaultValue: 0,
+          hidden: (ps) => Boolean(ps.isMultiValue)
+        },
+        onChange: {
+          type: "eventHandler",
+          argTypes: [{ name: "value", type: "object" }]
+        },
+        onChangeEnd: {
+          type: "eventHandler",
+          argTypes: [{ name: "value", type: "object" }]
+        }
+      }),
+      states: {
+        range: __spreadValues$4({
+          type: "writable",
+          valueProp: "range",
+          onChangeProp: "onChange",
+          variableType: "array",
+          hidden: (ps) => !ps.isMultiValue
+        }, sliderHelpers.states.range),
+        value: __spreadValues$4({
+          type: "writable",
+          valueProp: "value",
+          onChangeProp: "onChange",
+          variableType: "number",
+          hidden: (ps) => Boolean(ps.isMultiValue)
+        }, sliderHelpers.states.value)
+      },
+      componentHelpers: {
+        helpers: sliderHelpers,
+        importName: "sliderHelpers",
+        importPath: "@plasmicpkgs/react-aria/skinny/registerSlider"
+      },
+      trapsFocus: true
+    },
+    overrides
+  );
+  registerSliderOutput(loader, {
+    parentComponentName: SLIDER_COMPONENT_NAME
+  });
+  registerSliderThumb(loader, {
+    parentComponentName: SLIDER_COMPONENT_NAME
+  });
+  registerSliderTrack(loader, {
+    parentComponentName: SLIDER_COMPONENT_NAME
   });
 }
 
@@ -2740,12 +3238,19 @@ function BaseTooltip(props) {
     ref
   );
   const focusableChild = flattenChildren(children)[0];
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, React.isValidElement(focusableChild) ? React.cloneElement(focusableChild, __spreadValues({
-    ref
-  }, mergeProps(
-    focusableChild.props,
-    triggerProps
-  ))) : null, state.isOpen && /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, tooltipProps), { className: `${className} ${resetClassName}` }), tooltipContent));
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: { position: "relative" }
+    },
+    React.isValidElement(focusableChild) ? React.cloneElement(focusableChild, __spreadValues({
+      ref
+    }, mergeProps(
+      focusableChild.props,
+      triggerProps
+    ))) : null,
+    state.isOpen && /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, tooltipProps), { className: `${className} ${resetClassName}` }), tooltipContent)
+  );
 }
 function registerTooltip(loader, overrides) {
   registerComponentHelper(
@@ -2838,6 +3343,8 @@ function registerAll(loader) {
   registerTextField(loader);
   registerModal(loader);
   registerTooltip(loader);
+  registerDialogTrigger(loader);
+  registerSlider(loader);
 }
 
 export { registerAll };