@plasmicpkgs/react-aria 0.0.42 → 0.0.44

package/dist/react-aria.esm.js

@@ -1,5 +1,5 @@
-import React, { useEffect, Component, forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
-import { Button, Label, Checkbox, Text, FieldError, CheckboxGroup, Input, ListBoxItem, ListBox, Header, Section, Collection, PopoverContext, SelectContext, Popover, ComboBox, ComboBoxStateContext, Heading, ModalOverlay, Modal, Dialog, DialogTrigger, Form, Radio, RadioGroup, Select, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField } from 'react-aria-components';
+import React, { useEffect, Component, forwardRef, useImperativeHandle, useMemo } from 'react';
+import { Button, Checkbox, Text, FieldError, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Header, Section, Collection, PopoverContext, SelectContext, Popover, ComboBox, ComboBoxStateContext, Heading, ModalOverlay, Modal, Dialog, DialogTrigger, Form, Radio, RadioGroup, Select, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField } from 'react-aria-components';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import { useFilter } from '@react-aria/i18n';
 import { mergeProps, useTooltipTrigger } from 'react-aria';
@@ -8,51 +8,400 @@ import { usePlasmicCanvasContext } from '@plasmicapp/host';
 import flattenChildren from 'react-keyed-flatten-children';
 import { useTooltipTriggerState } from 'react-stately';
 
-function getCommonInputProps(fieldName, fields) {
-  const commonInputProps = {
-    name: {
+var __defProp$r = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
+var __hasOwnProp$r = Object.prototype.hasOwnProperty;
+var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$r = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$r.call(b, prop))
+      __defNormalProp$r(a, prop, b[prop]);
+  if (__getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(b)) {
+      if (__propIsEnum$r.call(b, prop))
+        __defNormalProp$r(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+function registerComponentHelper(loader, component, meta, overrides) {
+  if (overrides) {
+    meta = __spreadProps$e(__spreadValues$r(__spreadValues$r({}, meta), overrides), {
+      props: __spreadValues$r(__spreadValues$r({}, meta.props), overrides.props)
+    });
+    if (overrides.parentComponentName) {
+      meta.name = makeChildComponentName(
+        overrides.parentComponentName,
+        meta.name
+      );
+    }
+  }
+  if (loader) {
+    loader.registerComponent(component, meta);
+  } else {
+    registerComponent(component, meta);
+  }
+  return meta;
+}
+function makeComponentName(name) {
+  return `plasmic-react-aria-${name}`;
+}
+function makeChildComponentName(fullParentName, fullChildName) {
+  if (!fullParentName) {
+    return fullChildName;
+  }
+  return `${fullParentName}-${fullChildName.replace(
+    "plasmic-react-aria-",
+    ""
+  )}`;
+}
+function extractPlasmicDataProps(props) {
+  return Object.fromEntries(
+    Object.entries(props).filter(([key]) => key.startsWith("data-plasmic-"))
+  );
+}
+function withoutNils(array) {
+  return array.filter((x) => x != null);
+}
+function isDefined(thing) {
+  return thing !== void 0 && thing !== null;
+}
+
+function hasParent(_props, ctx) {
+  return isDefined(ctx == null ? void 0 : ctx.parent) === true;
+}
+function isParentReadOnly(_props, ctx) {
+  var _a;
+  return ((_a = ctx == null ? void 0 : ctx.parent) == null ? void 0 : _a.isReadOnly) === true;
+}
+function isParentDisabled(_props, ctx) {
+  var _a;
+  return ((_a = ctx == null ? void 0 : ctx.parent) == null ? void 0 : _a.isDisabled) === true;
+}
+function resolveAutoComplete(autoCompleteProp) {
+  if (typeof autoCompleteProp === "string") {
+    return autoCompleteProp;
+  }
+  if (!autoCompleteProp || !Array.isArray(autoCompleteProp) || autoCompleteProp.includes("off")) {
+    return void 0;
+  }
+  if (autoCompleteProp.includes("off")) {
+    return "off";
+  }
+  if (autoCompleteProp.includes("on") && autoCompleteProp.length === 1) {
+    return "on";
+  }
+  return autoCompleteProp.filter((x) => x !== "on").join(" ");
+}
+function createNameProp() {
+  return {
+    type: "string",
+    description: "Name for this field if it is part of a form",
+    hidden: hasParent,
+    advanced: true
+  };
+}
+function createDisabledProp(componentName) {
+  return {
+    displayName: "Disabled",
+    type: "boolean",
+    description: `Whether the ${componentName} is read-only and unfocusable`,
+    defaultValueHint: false,
+    hidden: isParentDisabled
+  };
+}
+function createReadOnlyProp(componentName) {
+  return {
+    displayName: "Read only",
+    type: "boolean",
+    description: `Whether the value of this ${componentName} can be changed by the user. Unlike disabled, read-only does not prevent the user from interacting with the component (such as focus).`,
+    defaultValueHint: false,
+    advanced: true,
+    hidden: isParentReadOnly
+  };
+}
+function createRequiredProp(componentName) {
+  return {
+    displayName: "Required",
+    type: "boolean",
+    description: `Whether user input is required on the ${componentName} before form submission.`,
+    defaultValueHint: false,
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createAutoFocusProp(componentName) {
+  return {
+    type: "boolean",
+    description: `Whether the ${componentName} should be focused when rendered`,
+    defaultValueHint: false,
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createAriaLabelProp(componentName) {
+  return {
+    type: "string",
+    displayName: "Aria Label",
+    description: `Label for this ${componentName}, if no visible label is used, to identify the element to assistive technology`,
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createChildrenProp() {
+  return {
+    type: "slot",
+    mergeWithParent: true
+  };
+}
+function getCommonProps(componentName, propNames) {
+  const commonProps = {
+    name: createNameProp(),
+    disabled: createDisabledProp(componentName),
+    isDisabled: createDisabledProp(componentName),
+    readOnly: createReadOnlyProp(componentName),
+    isReadOnly: createReadOnlyProp(componentName),
+    autoFocus: createAutoFocusProp(componentName),
+    "aria-label": createAriaLabelProp(componentName),
+    required: createRequiredProp(componentName),
+    isRequired: createRequiredProp(componentName),
+    children: createChildrenProp(),
+    // NOTE: The following props are only applicable to inputs, textareas, and text fields
+    value: {
       type: "string",
-      description: "Name for this field if it is part of a form"
+      editOnly: true,
+      displayName: "Default Value",
+      uncontrolledProp: "defaultValue",
+      description: `The default value of the ${componentName}`,
+      hidden: hasParent
     },
-    isDisabled: {
-      displayName: "Disabled",
-      type: "boolean",
-      description: `Whether the ${fieldName} is read-only and unfocusable`,
-      defaultValueHint: false
+    maxLength: {
+      type: "number",
+      description: "The maximum number of characters supported by the input",
+      advanced: true,
+      hidden: hasParent
     },
-    isReadOnly: {
-      displayName: "Read only",
-      type: "boolean",
-      description: `Whether the value of this ${fieldName} can be changed by the user`,
-      defaultValueHint: false
+    minLength: {
+      type: "number",
+      description: "The minimum number of characters supported by the input",
+      advanced: true,
+      hidden: hasParent
     },
-    autoFocus: {
-      type: "boolean",
-      description: `Whether the ${fieldName} should be focused when rendered`,
-      defaultValueHint: false,
-      advanced: true
-    },
-    "aria-label": {
+    pattern: {
       type: "string",
-      displayName: "Aria Label",
-      description: `Label for this ${fieldName}, if no visible label is used, to identify the element to assistive technology`,
-      advanced: true
+      description: "Regex pattern that the value of the input must match to be valid",
+      helpText: "For more information about writing Regular Expressions (regex), check out https://regexr.com/",
+      validator: (value) => {
+        try {
+          new RegExp(value);
+          return true;
+        } catch (error) {
+          return "Invalid Regex";
+        }
+      },
+      advanced: true,
+      hidden: hasParent
+    },
+    type: {
+      type: "choice",
+      defaultValueHint: "text",
+      options: ["text", "search", "url", "tel", "email", "password"],
+      description: "The type of data that an input field is expected to handle. It influences the input's behavior, validation, and the kind of interface provided to the user.",
+      advanced: true,
+      hidden: hasParent
+    },
+    inputMode: {
+      type: "choice",
+      description: "hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.",
+      options: [
+        "none",
+        "text",
+        "tel",
+        "url",
+        "email",
+        "numeric",
+        "decimal",
+        "search"
+      ],
+      hidden: hasParent
+    },
+    autoComplete: {
+      type: "choice",
+      advanced: true,
+      multiSelect: true,
+      hidden: hasParent,
+      description: "Guidance as to the type of data expected in the field",
+      helpText: "For explanations on what each of the values mean, check https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values",
+      options: [
+        "on",
+        "off",
+        "name",
+        "honorific-prefix",
+        "given-name",
+        "additional-name",
+        "family-name",
+        "honorific-suffix",
+        "nickname",
+        "email",
+        "username",
+        "new-password",
+        "current-password",
+        "one-time-code",
+        "organization-title",
+        "organization",
+        "street-address",
+        "shipping",
+        "billing",
+        "address-line1",
+        "address-line2",
+        "address-line3",
+        "address-level4",
+        "address-level3",
+        "address-level2",
+        "address-level1",
+        "country",
+        "country-name",
+        "postal-code",
+        "cc-name",
+        "cc-given-name",
+        "cc-additional-name",
+        "cc-family-name",
+        "cc-number",
+        "cc-exp",
+        "cc-exp-month",
+        "cc-exp-year",
+        "cc-csc",
+        "cc-type",
+        "transaction-currency",
+        "transaction-amount",
+        "language",
+        "bday",
+        "bday-day",
+        "bday-month",
+        "bday-year",
+        "sex",
+        "tel",
+        "tel-country-code",
+        "tel-national",
+        "tel-area-code",
+        "tel-local",
+        "tel-local-suffix",
+        "tel-local-prefix",
+        "tel-extension",
+        "impp",
+        "url",
+        "photo",
+        "webauthn"
+      ]
+    },
+    validationBehavior: {
+      type: "choice",
+      options: ["native", "aria"],
+      description: "Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.",
+      defaultValueHint: "native",
+      advanced: true,
+      hidden: hasParent
+    },
+    onChange: {
+      type: "eventHandler",
+      argTypes: [{ name: "value", type: "string" }],
+      hidden: hasParent
+    },
+    onFocus: {
+      type: "eventHandler",
+      argTypes: [{ name: "focusEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
+    },
+    onBlur: {
+      type: "eventHandler",
+      argTypes: [{ name: "focusEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
+    },
+    onFocusChange: {
+      type: "eventHandler",
+      argTypes: [{ name: "isFocused", type: "boolean" }],
+      advanced: true,
+      hidden: hasParent
+    },
+    onKeyDown: {
+      type: "eventHandler",
+      argTypes: [{ name: "keyboardEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
+    },
+    onKeyUp: {
+      type: "eventHandler",
+      argTypes: [{ name: "keyboardEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
+    },
+    onCopy: {
+      type: "eventHandler",
+      argTypes: [{ name: "clipbordEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
     },
-    isRequired: {
-      displayName: "Required",
-      type: "boolean",
-      description: `Whether user input is required on the ${fieldName} before form submission.`,
-      defaultValueHint: false
+    onCut: {
+      type: "eventHandler",
+      argTypes: [{ name: "clipbordEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
     },
-    children: {
-      type: "slot",
-      mergeWithParent: true
+    onPaste: {
+      type: "eventHandler",
+      argTypes: [{ name: "clipbordEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
+    },
+    onCompositionStart: {
+      type: "eventHandler",
+      argTypes: [{ name: "compositionEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
+    },
+    onCompositionEnd: {
+      type: "eventHandler",
+      argTypes: [{ name: "compositionEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
+    },
+    onCompositionUpdate: {
+      type: "eventHandler",
+      argTypes: [{ name: "compositionEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
+    },
+    onSelect: {
+      type: "eventHandler",
+      argTypes: [{ name: "selectionEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
+    },
+    onBeforeInput: {
+      type: "eventHandler",
+      argTypes: [{ name: "inputEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
+    },
+    onInput: {
+      type: "eventHandler",
+      argTypes: [{ name: "inputEvent", type: "object" }],
+      advanced: true,
+      hidden: hasParent
+    },
+    placeholder: {
+      type: "string"
     }
   };
   const filteredProps = {};
-  fields.forEach((field) => {
-    if (commonInputProps.hasOwnProperty(field)) {
-      filteredProps[field] = commonInputProps[field];
+  propNames.forEach((propName) => {
+    if (Object.prototype.hasOwnProperty.call(commonProps, propName)) {
+      filteredProps[propName] = commonProps[propName];
     }
   });
   return filteredProps;
@@ -127,68 +476,6 @@ function pickAriaComponentVariants(keys) {
   };
 }
 
-var __defProp$r = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
-var __hasOwnProp$r = Object.prototype.hasOwnProperty;
-var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$r = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$r.call(b, prop))
-      __defNormalProp$r(a, prop, b[prop]);
-  if (__getOwnPropSymbols$r)
-    for (var prop of __getOwnPropSymbols$r(b)) {
-      if (__propIsEnum$r.call(b, prop))
-        __defNormalProp$r(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
-function registerComponentHelper(loader, component, meta, overrides) {
-  if (overrides) {
-    meta = __spreadProps$e(__spreadValues$r(__spreadValues$r({}, meta), overrides), {
-      props: __spreadValues$r(__spreadValues$r({}, meta.props), overrides.props)
-    });
-    if (overrides.parentComponentName) {
-      meta.name = makeChildComponentName(
-        overrides.parentComponentName,
-        meta.name
-      );
-    }
-  }
-  if (loader) {
-    loader.registerComponent(component, meta);
-  } else {
-    registerComponent(component, meta);
-  }
-  return meta;
-}
-function makeComponentName(name) {
-  return `plasmic-react-aria-${name}`;
-}
-function makeChildComponentName(fullParentName, fullChildName) {
-  if (!fullParentName) {
-    return fullChildName;
-  }
-  return `${fullParentName}-${fullChildName.replace(
-    "plasmic-react-aria-",
-    ""
-  )}`;
-}
-function extractPlasmicDataProps(props) {
-  return Object.fromEntries(
-    Object.entries(props).filter(([key]) => key.startsWith("data-plasmic-"))
-  );
-}
-function withoutNils(array) {
-  return array.filter((x) => x != null);
-}
-function isDefined(thing) {
-  return thing !== void 0 && thing !== null;
-}
-
 var __defProp$q = Object.defineProperty;
 var __defProps$d = Object.defineProperties;
 var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
@@ -273,7 +560,7 @@ function registerButton(loader, overrides) {
         padding: "2px 10px",
         cursor: "pointer"
       },
-      props: __spreadProps$d(__spreadValues$q({}, getCommonInputProps("button", [
+      props: __spreadProps$d(__spreadValues$q({}, getCommonProps("button", [
         "isDisabled",
         "aria-label"
       ])), {
@@ -319,37 +606,11 @@ const PlasmicDialogTriggerContext = React.createContext(void 0);
 const PlasmicSliderContext = React.createContext(void 0);
 React.createContext(void 0);
 const PlasmicListBoxContext = React.createContext(void 0);
-const PlasmicPopoverContext = React.createContext(void 0);
 const PlasmicItemContext = React.createContext(void 0);
 const PlasmicSectionContext = React.createContext(void 0);
 const PlasmicHeaderContext = React.createContext(void 0);
 const PlasmicInputContext = React.createContext(void 0);
 
-const BaseLabel = Label;
-const LABEL_COMPONENT_NAME = makeComponentName("label");
-function registerLabel(loader, overrides) {
-  registerComponentHelper(
-    loader,
-    BaseLabel,
-    {
-      name: LABEL_COMPONENT_NAME,
-      displayName: "Aria Label",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerLabel",
-      importName: "BaseLabel",
-      defaultStyles: {
-        cursor: "pointer"
-      },
-      props: {
-        children: {
-          type: "slot"
-        }
-      },
-      trapsFocus: true
-    },
-    overrides
-  );
-}
-
 var __defProp$p = Object.defineProperty;
 var __defProps$c = Object.defineProperties;
 var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
@@ -389,7 +650,8 @@ const CHECKBOX_INTERACTION_VARIANTS = [
   "indeterminate",
   "disabled",
   "selected",
-  "readonly"
+  "readonly",
+  "selected"
 ];
 const { interactionVariants: interactionVariants$b, withObservedValues: withObservedValues$9 } = pickAriaComponentVariants(
   CHECKBOX_INTERACTION_VARIANTS
@@ -397,9 +659,8 @@ const { interactionVariants: interactionVariants$b, withObservedValues: withObse
 function BaseCheckbox(props) {
   const _a = props, { children, updateInteractionVariant, setControlContextData } = _a, rest = __objRest$j(_a, ["children", "updateInteractionVariant", "setControlContextData"]);
   const contextProps = React.useContext(PlasmicCheckboxGroupContext);
-  const isStandalone = !contextProps;
   setControlContextData == null ? void 0 : setControlContextData({
-    isStandalone
+    parent: contextProps
   });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadValues$p({}, rest), ({
     isHovered,
@@ -458,14 +719,8 @@ const makeDefaultCheckboxChildren = ({
           }
         },
         {
-          type: "component",
-          name: LABEL_COMPONENT_NAME,
-          props: {
-            children: {
-              type: "text",
-              value: label
-            }
-          }
+          type: "text",
+          value: label
         }
       ]
     },
@@ -487,7 +742,7 @@ function registerCheckbox(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
       interactionVariants: interactionVariants$b,
-      props: __spreadProps$c(__spreadValues$p({}, getCommonInputProps("checkbox", [
+      props: __spreadProps$c(__spreadValues$p({}, getCommonProps("checkbox", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -505,13 +760,15 @@ function registerCheckbox(loader, overrides) {
         },
         value: {
           type: "string",
-          description: "The value of the input element, used when submitting an HTML form."
+          description: 'The value of the checkbox in "selected" state, used when submitting an HTML form.',
+          defaultValueHint: "on"
         },
         isSelected: {
           type: "boolean",
+          displayName: "Default Selected",
           editOnly: true,
           uncontrolledProp: "defaultSelected",
-          description: "Whether the checkbox is toggled on",
+          description: "Whether the checkbox should be selected by default",
           defaultValueHint: false,
           defaultValue: false
         },
@@ -544,7 +801,7 @@ function registerCheckbox(loader, overrides) {
           valueProp: "isSelected",
           onChangeProp: "onChange",
           variableType: "boolean",
-          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
+          hidden: hasParent
         }
       },
       trapsFocus: true
@@ -810,6 +1067,31 @@ function registerFieldError(loader, overrides) {
   );
 }
 
+const BaseLabel = Label;
+const LABEL_COMPONENT_NAME = makeComponentName("label");
+function registerLabel(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseLabel,
+    {
+      name: LABEL_COMPONENT_NAME,
+      displayName: "Aria Label",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerLabel",
+      importName: "BaseLabel",
+      defaultStyles: {
+        cursor: "pointer"
+      },
+      props: {
+        children: {
+          type: "slot"
+        }
+      },
+      trapsFocus: true
+    },
+    overrides
+  );
+}
+
 var __defProp$l = Object.defineProperty;
 var __defProps$a = Object.defineProperties;
 var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
@@ -849,8 +1131,8 @@ const { interactionVariants: interactionVariants$a, withObservedValues: withObse
   CHECKBOX_GROUP_INTERACTION_VARIANTS
 );
 function BaseCheckboxGroup(props) {
-  const _a = props, { children, updateInteractionVariant } = _a; __objRest$g(_a, ["children", "updateInteractionVariant"]);
-  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$l({}, props), ({ isDisabled, isReadOnly }) => withObservedValues$8(
+  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$g(_a, ["children", "updateInteractionVariant"]);
+  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$l({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$8(
     children,
     {
       disabled: isDisabled,
@@ -879,7 +1161,7 @@ function registerCheckboxGroup(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
       interactionVariants: interactionVariants$a,
-      props: __spreadProps$a(__spreadValues$l({}, getCommonInputProps("checkbox group", [
+      props: __spreadProps$a(__spreadValues$l({}, getCommonProps("checkbox group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -1195,23 +1477,49 @@ const INPUT_INTERACTION_VARIANTS = [
 const { interactionVariants: interactionVariants$9 } = pickAriaComponentVariants(
   INPUT_INTERACTION_VARIANTS
 );
+const inputHelpers$1 = {
+  states: {
+    value: {
+      onChangeArgsToValue: (e) => {
+        return e.target.value;
+      }
+    }
+  }
+};
 function BaseInput(props) {
   var _b;
-  const context = React.useContext(PlasmicTextFieldContext);
-  const isStandalone = !context;
-  const _a = props, { updateInteractionVariant, setControlContextData, disabled } = _a, rest = __objRest$f(_a, ["updateInteractionVariant", "setControlContextData", "disabled"]);
+  const _a = props, {
+    updateInteractionVariant,
+    setControlContextData,
+    disabled,
+    autoComplete
+  } = _a, rest = __objRest$f(_a, [
+    "updateInteractionVariant",
+    "setControlContextData",
+    "disabled",
+    "autoComplete"
+  ]);
+  const textFieldContext = React.useContext(PlasmicTextFieldContext);
+  setControlContextData == null ? void 0 : setControlContextData({
+    parent: textFieldContext
+  });
   const mergedProps = mergeProps(rest, {
-    disabled: (_b = context == null ? void 0 : context.isDisabled) != null ? _b : disabled
+    /**
+     * While react-aria internally does the merging of the disabled prop,
+     * we need to explicity do it here, because react-aria does it behind the scenes,
+     * whereas we need the calculated value of the disabled prop to be able to update the "disabled" interaction variant.
+     *  */
+    disabled: (_b = textFieldContext == null ? void 0 : textFieldContext.isDisabled) != null ? _b : disabled
   });
   useEffect(() => {
     updateInteractionVariant == null ? void 0 : updateInteractionVariant({
       disabled: mergedProps.disabled
     });
   }, [mergedProps.disabled, updateInteractionVariant]);
-  setControlContextData == null ? void 0 : setControlContextData({ isStandalone });
   return /* @__PURE__ */ React.createElement(
     Input,
     __spreadValues$k({
+      autoComplete: resolveAutoComplete(autoComplete),
       onHoverChange: (isHovered) => {
         updateInteractionVariant == null ? void 0 : updateInteractionVariant({
           hovered: isHovered
@@ -1248,16 +1556,48 @@ function registerInput(loader, overrides) {
         borderColor: "black",
         padding: "2px 10px"
       },
-      props: {
-        placeholder: {
-          type: "string"
-        },
-        disabled: {
-          type: "boolean",
-          description: "Whether the input is disabled",
-          defaultValueHint: false,
-          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
-        }
+      props: __spreadValues$k({}, getCommonProps("Input", [
+        "name",
+        "disabled",
+        "readOnly",
+        "autoFocus",
+        "aria-label",
+        "required",
+        "placeholder",
+        "value",
+        "maxLength",
+        "minLength",
+        "pattern",
+        "type",
+        "inputMode",
+        "autoComplete",
+        "onChange",
+        "onFocus",
+        "onBlur",
+        "onKeyDown",
+        "onKeyUp",
+        "onCopy",
+        "onCut",
+        "onPaste",
+        "onCompositionStart",
+        "onCompositionEnd",
+        "onCompositionUpdate",
+        "onSelect",
+        "onBeforeInput",
+        "onInput"
+      ])),
+      states: {
+        value: __spreadValues$k({
+          type: "writable",
+          valueProp: "value",
+          onChangeProp: "onChange",
+          variableType: "text"
+        }, inputHelpers$1.states.value)
+      },
+      componentHelpers: {
+        helpers: inputHelpers$1,
+        importName: "inputHelpers",
+        importPath: "@plasmicpkgs/react-aria/skinny/registerInput"
       },
       trapsFocus: true
     },
@@ -1494,18 +1834,17 @@ var __objRest$e = (source, exclude) => {
   return target;
 };
 function BaseListBox(props) {
-  var _c;
   const contextProps = React.useContext(PlasmicListBoxContext);
   const isStandalone = !contextProps;
-  const _a = props, rest = __objRest$e(_a, ["options"]);
+  const _a = props, { options: _rawOptions, setControlContextData } = _a, rest = __objRest$e(_a, ["options", "setControlContextData"]);
   const { options } = useStrictOptions(props);
   const _b = mergeProps$1(
     contextProps,
     rest,
     isStandalone ? { items: options } : {}
   ), { renderItem, renderSection } = _b, mergedProps = __objRest$e(_b, ["renderItem", "renderSection"]);
-  (_c = props.setControlContextData) == null ? void 0 : _c.call(props, {
-    isStandalone
+  setControlContextData == null ? void 0 : setControlContextData({
+    parent: isStandalone ? void 0 : {}
   });
   return /* @__PURE__ */ React.createElement(ListBox, __spreadValues$g({}, mergedProps), (item) => {
     var _a2;
@@ -1551,7 +1890,7 @@ function registerListBox(loader, overrides) {
       props: {
         options: __spreadProps$8(__spreadValues$g({}, makeOptionsPropType()), {
           displayName: "Items",
-          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
+          hidden: hasParent
         }),
         renderItem: {
           type: "slot",
@@ -1614,37 +1953,34 @@ var __objRest$d = (source, exclude) => {
     }
   return target;
 };
-const SHOULD_FLIP_INSIDE_SELECT = false;
 function BasePopover(props) {
   const _a = props, { resetClassName, setControlContextData } = _a, restProps = __objRest$d(_a, ["resetClassName", "setControlContextData"]);
   const isStandalone = !React.useContext(PopoverContext);
-  const contextProps = React.useContext(PlasmicPopoverContext);
   const isInsideSelect = !!React.useContext(SelectContext);
+  const triggerRef = React.useRef(null);
+  const isEditMode = !!usePlasmicCanvasContext();
+  const defaultShouldFlip = isInsideSelect ? false : true;
   const mergedProps = mergeProps$1(
-    contextProps,
+    { shouldFlip: defaultShouldFlip },
+    /**
+     * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *
+     *
+     * Setting isNonModal to true in edit mode (canvas) means that the popover will not prevent the user from interacting with the canvas while the popover is open.
+     */
+    isEditMode ? { isNonModal: true } : null,
     restProps,
-    {
-      className: `${resetClassName}`
-    },
-    isInsideSelect && !isDefined(restProps.shouldFlip) ? { shouldFlip: SHOULD_FLIP_INSIDE_SELECT } : void 0
+    { className: `${resetClassName}` },
+    // Override some props if the popover is standalone
+    isStandalone ? {
+      triggerRef,
+      isNonModal: true,
+      isOpen: true
+    } : null
   );
-  const isEditMode = !!usePlasmicCanvasContext();
-  const triggerRef = React.useRef(null);
-  const standaloneProps = isStandalone ? {
-    triggerRef,
-    isNonModal: true,
-    isOpen: true
-  } : {};
   setControlContextData == null ? void 0 : setControlContextData({
-    isStandalone,
-    isInsideSelect
+    defaultShouldFlip
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(
-    Popover,
-    __spreadValues$f(__spreadValues$f({
-      isNonModal: isEditMode ? true : void 0
-    }, mergedProps), standaloneProps)
-  ));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(Popover, __spreadValues$f({}, mergedProps)));
 }
 const POPOVER_COMPONENT_NAME = makeComponentName("popover");
 const POPOVER_ARROW_IMG = {
@@ -1718,7 +2054,10 @@ function registerPopover(loader, overrides) {
         shouldFlip: {
           type: "boolean",
           description: "Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.",
-          defaultValueHint: (_ps, ctx) => (ctx == null ? void 0 : ctx.isInsideSelect) ? SHOULD_FLIP_INSIDE_SELECT : true
+          defaultValueHint: (_ps, ctx) => {
+            var _a;
+            return (_a = ctx == null ? void 0 : ctx.defaultShouldFlip) != null ? _a : true;
+          }
         },
         placement: {
           type: "choice",
@@ -2161,7 +2500,7 @@ const BaseModal = forwardRef(
       isOpen: isStandalone ? isOpen : contextProps.isOpen
     });
     setControlContextData == null ? void 0 : setControlContextData({
-      isStandalone
+      parent: isStandalone ? void 0 : {}
     });
     useImperativeHandle(ref, () => ({
       close: () => {
@@ -2271,7 +2610,7 @@ function registerModal(loader, overrides) {
           uncontrolledProp: "defaultOpen",
           defaultValueHint: false,
           defaultValue: true,
-          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
+          hidden: hasParent
         },
         isDismissable: {
           type: "boolean",
@@ -2292,7 +2631,7 @@ function registerModal(loader, overrides) {
           valueProp: "isOpen",
           onChangeProp: "onOpenChange",
           variableType: "boolean",
-          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
+          hidden: hasParent
         }
       },
       trapsFocus: true
@@ -2509,14 +2848,19 @@ const RADIO_INTERACTION_VARIANTS = [
   "focused",
   "focusVisible",
   "disabled",
-  "readonly"
+  "readonly",
+  "selected"
 ];
 const { interactionVariants: interactionVariants$8, withObservedValues: withObservedValues$7 } = pickAriaComponentVariants(
   RADIO_INTERACTION_VARIANTS
 );
 function BaseRadio(props) {
-  const _a = props, { children, updateInteractionVariant, setControlContextData } = _a, rest = __objRest$9(_a, ["children", "updateInteractionVariant", "setControlContextData"]);
+  const _a = props, { children, setControlContextData, updateInteractionVariant } = _a, rest = __objRest$9(_a, ["children", "setControlContextData", "updateInteractionVariant"]);
   const contextProps = React.useContext(PlasmicRadioGroupContext);
+  const isStandalone = !contextProps;
+  setControlContextData == null ? void 0 : setControlContextData({
+    parent: contextProps
+  });
   const radio = /* @__PURE__ */ React.createElement(Radio, __spreadValues$a({}, rest), ({
     isHovered,
     isPressed,
@@ -2538,11 +2882,10 @@ function BaseRadio(props) {
     },
     updateInteractionVariant
   ));
-  const isStandalone = !contextProps;
-  setControlContextData == null ? void 0 : setControlContextData({
-    isStandalone
-  });
-  return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React.createElement(RadioGroup, null, radio) }, radio);
+  if (isStandalone) {
+    return /* @__PURE__ */ React.createElement(RadioGroup, null, radio);
+  }
+  return radio;
 }
 const makeDefaultRadioChildren = (label) => ({
   type: "hbox",
@@ -2586,7 +2929,7 @@ function registerRadio(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadio",
       importName: "BaseRadio",
       interactionVariants: interactionVariants$8,
-      props: __spreadProps$5(__spreadValues$a({}, getCommonInputProps("radio", [
+      props: __spreadProps$5(__spreadValues$a({}, getCommonProps("radio", [
         "isDisabled",
         "autoFocus",
         "aria-label"
@@ -2599,23 +2942,8 @@ function registerRadio(loader, overrides) {
         value: {
           type: "string",
           description: "The value of the input element, used when submitting an HTML form."
-        },
-        // Keeping for backwards compatibility reasons
-        onSelectionChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isSelected", type: "boolean" }],
-          hidden: () => true
         }
       }),
-      states: {
-        // Keeping for backwards compatibility reasons
-        isSelected: {
-          type: "readonly",
-          onChangeProp: "onSelectionChange",
-          variableType: "boolean",
-          hidden: () => true
-        }
-      },
       trapsFocus: true
     },
     overrides
@@ -2689,7 +3017,7 @@ function registerRadioGroup(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadioGroup",
       importName: "BaseRadioGroup",
       interactionVariants: interactionVariants$7,
-      props: __spreadProps$4(__spreadValues$9({}, getCommonInputProps("radio group", [
+      props: __spreadProps$4(__spreadValues$9({}, getCommonProps("radio group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -2760,6 +3088,7 @@ function registerRadioGroup(loader, overrides) {
         value: {
           type: "string",
           editOnly: true,
+          displayName: "Default Value",
           uncontrolledProp: "defaultValue",
           description: "The current value"
         },
@@ -3110,7 +3439,7 @@ function BaseSliderOutput(props) {
 }
 const SLIDER_OUTPUT_COMPONENT_NAME = makeComponentName("sliderOutput");
 function registerSliderOutput(loader, overrides) {
-  registerComponentHelper(
+  return registerComponentHelper(
     loader,
     BaseSliderOutput,
     {
@@ -3202,7 +3531,7 @@ function BaseSliderThumb(_a) {
 }
 const SLIDER_THUMB_COMPONENT_NAME = makeComponentName("sliderThumb");
 function registerSliderThumb(loader, overrides) {
-  registerComponentHelper(
+  return registerComponentHelper(
     loader,
     BaseSliderThumb,
     {
@@ -3220,7 +3549,7 @@ function registerSliderThumb(loader, overrides) {
         cursor: "pointer"
       },
       interactionVariants: interactionVariants$5,
-      props: __spreadProps$3(__spreadValues$6({}, getCommonInputProps("slider thumb", [
+      props: __spreadProps$3(__spreadValues$6({}, getCommonProps("slider thumb", [
         "name",
         "isDisabled",
         "autoFocus"
@@ -3274,52 +3603,59 @@ const { interactionVariants: interactionVariants$4, withObservedValues: withObse
   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;
+  if (Array.isArray(values)) {
+    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 isMultiValueGuard(value) {
+  return Array.isArray(value) && value.length > 1;
+}
 function BaseSliderTrack(props) {
   const context = React.useContext(PlasmicSliderContext);
+  const isStandalone = !context;
   const mergedProps = mergeProps(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);
-    const values = Array.isArray(mergedProps == null ? void 0 : mergedProps.value) ? mergedProps.value : [mergedProps.value].filter((v) => v !== void 0);
-    const difference = values.length - rawThumbs.length;
-    if (!difference) {
-      return rawThumbs;
+  const _a = mergedProps, { children, progressBar, updateInteractionVariant } = _a, rest = __objRest$5(_a, ["children", "progressBar", "updateInteractionVariant"]);
+  const isMultiValue = isMultiValueGuard(mergedProps.value);
+  const { minIndex, maxIndex } = useMemo(() => {
+    if (!context || !Array.isArray(context.value) || context.value.length <= 1) {
+      return { minIndex: 0, maxIndex: 0 };
     }
-    if (difference < 0) {
-      return rawThumbs.slice(0, values.length);
+    return findMinMaxIndices(context.value);
+  }, [context == null ? void 0 : context.value]);
+  const thumbs = useMemo(() => {
+    const thumbNodes = flattenChildren(children);
+    if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context == null ? void 0 : context.value)) {
+      return [];
     }
-    const lastThumb = rawThumbs[rawThumbs.length - 1];
-    return rawThumbs.concat(new Array(difference).fill(lastThumb));
-  }, [children, mergedProps.value]);
+    const values = isDefined(context) ? Array.isArray(context.value) ? context.value : [context.value] : [];
+    const lastThumb = thumbNodes[thumbNodes.length - 1];
+    return values.map((v, i) => {
+      const currentThumb = thumbNodes[i];
+      if (i >= thumbNodes.length) {
+        if (React.isValidElement(lastThumb)) {
+          return React.cloneElement(lastThumb, {
+            index: i
+          });
+        }
+      }
+      if (!React.isValidElement(currentThumb)) {
+        return null;
+      }
+      return React.cloneElement(currentThumb, {
+        index: i
+      });
+    });
+  }, [children, context == null ? void 0 : context.value]);
   const track = /* @__PURE__ */ React.createElement(SliderTrack, __spreadValues$5({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React.createElement(React.Fragment, null, withObservedValues$3(
     /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       "div",
@@ -3333,28 +3669,20 @@ function BaseSliderTrack(props) {
         }
       },
       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
-      })
-    )),
+    ), thumbs),
     {
       hovered: isHovered
     },
     updateInteractionVariant
   )));
-  return /* @__PURE__ */ React.createElement(
-    ErrorBoundary,
-    {
-      fallback: /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, track)
-    },
-    track
-  );
+  if (isStandalone) {
+    return /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, track);
+  }
+  return track;
 }
 const SLIDER_TRACK_COMPONENT_NAME = makeComponentName("sliderTrack");
-function registerSliderTrack(loader, overrides) {
-  registerComponentHelper(
+function registerSliderTrack(sliderThumbMeta, loader, overrides) {
+  return registerComponentHelper(
     loader,
     BaseSliderTrack,
     {
@@ -3373,14 +3701,13 @@ function registerSliderTrack(loader, overrides) {
       props: {
         children: {
           type: "slot",
-          description: "The thumbs of the slider",
+          displayName: "Thumbs",
+          description: "The thumbs of the slider. For range slider, you can add more than one thumb.",
+          allowedComponents: [sliderThumbMeta.name],
           defaultValue: [
             {
               type: "component",
-              name: makeChildComponentName(
-                SLIDER_COMPONENT_NAME,
-                SLIDER_THUMB_COMPONENT_NAME
-              )
+              name: sliderThumbMeta.name
             }
           ]
         },
@@ -3450,106 +3777,101 @@ var __objRest$4 = (source, exclude) => {
   return target;
 };
 const SLIDER_COMPONENT_NAME = makeComponentName("slider");
+const RANGE_SLIDER_COMPONENT_NAME = makeComponentName("range-slider");
 const SLIDER_INTERACTION_VARIANTS = ["disabled"];
 const { interactionVariants: interactionVariants$3, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(
   SLIDER_INTERACTION_VARIANTS
 );
-const sliderHelpers = {
-  states: {
-    range: {
-      onChangeArgsToValue: (value, isMultiValue) => {
-        if (isMultiValue) {
-          return Array.isArray(value) ? value : [value, value + 10];
-        }
-        return void 0;
-      }
-    },
-    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,
-    children,
-    updateInteractionVariant,
-    defaultValue,
-    onChange
-  } = _a, rest = __objRest$4(_a, [
-    "range",
-    "value",
-    "defaultRange",
-    "children",
-    "updateInteractionVariant",
-    "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(rest, {
-    value: props.isMultiValue ? range : value,
-    defaultValue: props.isMultiValue ? defaultRange : defaultValue
-  });
-  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),
-    ({ isDisabled }) => withObservedValues$2(
+  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$4(_a, ["children", "updateInteractionVariant"]);
+  return /* @__PURE__ */ React.createElement(
+    PlasmicSliderContext.Provider,
+    {
+      value: __spreadProps$2(__spreadValues$4({}, rest), {
+        // Here's why the type casting is needed here: https://github.com/Microsoft/TypeScript/issues/3410
+        onChange: rest.onChange,
+        onChangeEnd: rest.onChangeEnd
+      })
+    },
+    /* @__PURE__ */ React.createElement(Slider, __spreadValues$4({}, rest), ({ isDisabled }) => withObservedValues$2(
       children,
       {
         disabled: isDisabled
       },
       updateInteractionVariant
-    )
-  ));
+    ))
+  );
+}
+function getCommonSliderProps() {
+  return {
+    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
+    }
+  };
 }
 function registerSlider(loader, overrides) {
+  const sliderOutputMeta = registerSliderOutput(loader, {
+    parentComponentName: SLIDER_COMPONENT_NAME
+  });
+  const sliderThumbMeta = registerSliderThumb(loader, {
+    parentComponentName: SLIDER_COMPONENT_NAME
+  });
+  const sliderTrackMeta = registerSliderTrack(sliderThumbMeta, loader, {
+    parentComponentName: SLIDER_COMPONENT_NAME
+  });
   registerComponentHelper(
     loader,
     BaseSlider,
     {
-      name: SLIDER_COMPONENT_NAME,
-      displayName: "Aria Slider",
+      name: RANGE_SLIDER_COMPONENT_NAME,
+      displayName: "Aria Range Slider",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSlider",
       importName: "BaseSlider",
       interactionVariants: interactionVariants$3,
       defaultStyles: {
         width: "300px"
       },
-      props: __spreadProps$2(__spreadValues$4({}, getCommonInputProps("slider", [
+      props: __spreadProps$2(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
         "isDisabled",
-        "name",
-        "autoFocus",
         "aria-label"
-      ])), {
+      ])), getCommonSliderProps()), {
+        value: {
+          type: "array",
+          editOnly: true,
+          displayName: "Initial value",
+          uncontrolledProp: "defaultValue",
+          description: "The intial value of the slider",
+          defaultValue: [20, 50],
+          validator: (value) => {
+            if (!Array.isArray(value)) {
+              return "Input must be an array.";
+            }
+            for (let i = 1; i < value.length; i++) {
+              if (value[i] < value[i - 1]) {
+                return "Array elements are not in ascending order.";
+              }
+            }
+            return true;
+          }
+        },
         children: {
           type: "slot",
           defaultValue: [
@@ -3573,10 +3895,7 @@ function registerSlider(loader, overrides) {
                 },
                 {
                   type: "component",
-                  name: makeChildComponentName(
-                    SLIDER_COMPONENT_NAME,
-                    SLIDER_OUTPUT_COMPONENT_NAME
-                  ),
+                  name: sliderOutputMeta.name,
                   props: {
                     children: {
                       type: "text",
@@ -3588,49 +3907,102 @@ function registerSlider(loader, overrides) {
             },
             {
               type: "component",
-              name: makeChildComponentName(
-                SLIDER_COMPONENT_NAME,
-                SLIDER_TRACK_COMPONENT_NAME
-              )
+              name: sliderTrackMeta.name,
+              props: {
+                children: [
+                  {
+                    type: "component",
+                    name: sliderThumbMeta.name
+                  },
+                  {
+                    type: "component",
+                    name: sliderThumbMeta.name,
+                    styles: {
+                      backgroundColor: "blue"
+                    }
+                  }
+                ]
+              }
             }
           ]
         },
-        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
+        onChange: {
+          type: "eventHandler",
+          argTypes: [{ name: "value", type: "object" }]
         },
-        range: {
-          type: "array",
-          editOnly: true,
-          uncontrolledProp: "defaultRange",
-          description: "The default range of the slider",
-          defaultValueHint: [10, 20],
-          defaultValue: [10, 20],
-          hidden: (ps) => !ps.isMultiValue
+        onChangeEnd: {
+          type: "eventHandler",
+          argTypes: [{ name: "value", type: "object" }]
+        }
+      }),
+      states: {
+        value: {
+          type: "writable",
+          valueProp: "value",
+          onChangeProp: "onChange",
+          variableType: "array"
+        }
+      },
+      trapsFocus: true
+    },
+    {
+      parentComponentName: SLIDER_COMPONENT_NAME
+    }
+  );
+  registerComponentHelper(
+    loader,
+    BaseSlider,
+    {
+      name: SLIDER_COMPONENT_NAME,
+      displayName: "Aria Slider",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerSlider",
+      importName: "BaseSlider",
+      interactionVariants: interactionVariants$3,
+      defaultStyles: {
+        width: "300px"
+      },
+      props: __spreadProps$2(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
+        "isDisabled",
+        "aria-label"
+      ])), getCommonSliderProps()), {
+        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: sliderOutputMeta.name,
+                  props: {
+                    children: {
+                      type: "text",
+                      value: "Output"
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              type: "component",
+              name: sliderTrackMeta.name
+            }
+          ]
         },
         value: {
           type: "number",
@@ -3638,52 +4010,29 @@ function registerSlider(loader, overrides) {
           uncontrolledProp: "defaultValue",
           description: "The default value of the slider",
           defaultValueHint: 0,
-          defaultValue: 0,
-          hidden: (ps) => Boolean(ps.isMultiValue)
+          defaultValue: 0
         },
         onChange: {
           type: "eventHandler",
-          argTypes: [{ name: "value", type: "object" }]
+          argTypes: [{ name: "value", type: "number" }]
         },
         onChangeEnd: {
           type: "eventHandler",
-          argTypes: [{ name: "value", type: "object" }]
+          argTypes: [{ name: "value", type: "number" }]
         }
       }),
       states: {
-        range: __spreadValues$4({
-          type: "writable",
-          valueProp: "range",
-          onChangeProp: "onChange",
-          variableType: "array",
-          hidden: (ps) => !ps.isMultiValue
-        }, sliderHelpers.states.range),
-        value: __spreadValues$4({
+        value: {
           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"
+          variableType: "number"
+        }
       },
       trapsFocus: true
     },
     overrides
   );
-  registerSliderOutput(loader, {
-    parentComponentName: SLIDER_COMPONENT_NAME
-  });
-  registerSliderThumb(loader, {
-    parentComponentName: SLIDER_COMPONENT_NAME
-  });
-  registerSliderTrack(loader, {
-    parentComponentName: SLIDER_COMPONENT_NAME
-  });
 }
 
 var __defProp$3 = Object.defineProperty;
@@ -3770,7 +4119,7 @@ function registerSwitch(loader, overrides) {
         justifyContent: "flex-start",
         padding: 0
       },
-      props: __spreadProps$1(__spreadValues$3({}, getCommonInputProps("switch", [
+      props: __spreadProps$1(__spreadValues$3({}, getCommonProps("switch", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -3849,10 +4198,16 @@ function registerSwitch(loader, overrides) {
           ]
         },
         value: {
+          type: "string",
+          description: 'The value of the switch in "selected" state, used when submitting an HTML form.',
+          defaultValueHint: "on"
+        },
+        isSelected: {
           type: "boolean",
           editOnly: true,
+          displayName: "Default Selected",
           uncontrolledProp: "defaultSelected",
-          description: "Whether the switch is toggled on",
+          description: "Whether the switch should be selected by default",
           defaultValueHint: false
         },
         onChange: {
@@ -3863,7 +4218,7 @@ function registerSwitch(loader, overrides) {
       states: {
         isSelected: {
           type: "writable",
-          valueProp: "value",
+          valueProp: "isSelected",
           onChangeProp: "onChange",
           variableType: "boolean"
         }
@@ -3910,20 +4265,30 @@ const TEXTAREA_INTERACTION_VARIANTS = [
 const { interactionVariants: interactionVariants$1 } = pickAriaComponentVariants(
   TEXTAREA_INTERACTION_VARIANTS
 );
+const inputHelpers = {
+  states: {
+    value: {
+      onChangeArgsToValue: (e) => {
+        return e.target.value;
+      }
+    }
+  }
+};
 function BaseTextArea(props) {
   var _b;
   const _a = props, { disabled, updateInteractionVariant, setControlContextData } = _a, rest = __objRest$2(_a, ["disabled", "updateInteractionVariant", "setControlContextData"]);
-  const context = React.useContext(PlasmicTextFieldContext);
-  const isStandalone = !context;
+  const textFieldContext = React.useContext(PlasmicTextFieldContext);
   const mergedProps = mergeProps(rest, {
-    disabled: (_b = context == null ? void 0 : context.isDisabled) != null ? _b : disabled
+    disabled: (_b = textFieldContext == null ? void 0 : textFieldContext.isDisabled) != null ? _b : disabled
   });
   useEffect(() => {
     updateInteractionVariant == null ? void 0 : updateInteractionVariant({
       disabled: mergedProps.disabled
     });
   }, [mergedProps.disabled, updateInteractionVariant]);
-  setControlContextData == null ? void 0 : setControlContextData({ isStandalone });
+  setControlContextData == null ? void 0 : setControlContextData({
+    parent: textFieldContext
+  });
   return /* @__PURE__ */ React.createElement(
     TextArea,
     __spreadValues$2({
@@ -3955,36 +4320,45 @@ function registerTextArea(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerTextArea",
       importName: "BaseTextArea",
       interactionVariants: interactionVariants$1,
-      props: {
-        placeholder: {
-          type: "string"
-        },
-        disabled: {
-          type: "boolean",
-          description: "Whether the input is disabled",
-          defaultValueHint: false,
-          hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
-        },
-        onKeyDown: {
-          type: "eventHandler",
-          argTypes: [{ name: "keyboardEvent", type: "object" }]
-        },
-        onKeyUp: {
-          type: "eventHandler",
-          argTypes: [{ name: "keyboardEvent", type: "object" }]
-        },
-        onCopy: {
-          type: "eventHandler",
-          argTypes: [{ name: "clipbordEvent", type: "object" }]
-        },
-        onCut: {
-          type: "eventHandler",
-          argTypes: [{ name: "clipbordEvent", type: "object" }]
-        },
-        onPaste: {
-          type: "eventHandler",
-          argTypes: [{ name: "clipbordEvent", type: "object" }]
-        }
+      props: __spreadValues$2({}, getCommonProps("Text Area", [
+        "name",
+        "disabled",
+        "readOnly",
+        "autoFocus",
+        "aria-label",
+        "required",
+        "placeholder",
+        "value",
+        "maxLength",
+        "minLength",
+        "inputMode",
+        "onChange",
+        "onFocus",
+        "onBlur",
+        "onKeyDown",
+        "onKeyUp",
+        "onCopy",
+        "onCut",
+        "onPaste",
+        "onCompositionStart",
+        "onCompositionEnd",
+        "onCompositionUpdate",
+        "onSelect",
+        "onBeforeInput",
+        "onInput"
+      ])),
+      states: {
+        value: __spreadValues$2({
+          type: "writable",
+          valueProp: "value",
+          onChangeProp: "onChange",
+          variableType: "text"
+        }, inputHelpers.states.value)
+      },
+      componentHelpers: {
+        helpers: inputHelpers,
+        importName: "inputHelpers",
+        importPath: "@plasmicpkgs/react-aria/skinny/registerTextArea"
       },
       trapsFocus: true
     },
@@ -4031,31 +4405,15 @@ const { interactionVariants, withObservedValues } = pickAriaComponentVariants(
   TEXT_FIELD_INTERACTION_VARIANTS
 );
 function BaseTextField(props) {
-  const _a = props, {
-    enableAutoComplete,
-    autoComplete,
+  const _a = props, { children, updateInteractionVariant, autoComplete } = _a, rest = __objRest$1(_a, ["children", "updateInteractionVariant", "autoComplete"]);
+  return /* @__PURE__ */ React.createElement(PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(TextField, __spreadValues$1({ autoComplete: resolveAutoComplete(autoComplete) }, rest), ({ isDisabled, isReadOnly }) => withObservedValues(
     children,
+    {
+      disabled: isDisabled,
+      readonly: isReadOnly
+    },
     updateInteractionVariant
-  } = _a, rest = __objRest$1(_a, [
-    "enableAutoComplete",
-    "autoComplete",
-    "children",
-    "updateInteractionVariant"
-  ]);
-  return /* @__PURE__ */ React.createElement(PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(
-    TextField,
-    __spreadValues$1({
-      autoComplete: enableAutoComplete ? autoComplete : void 0
-    }, rest),
-    ({ isDisabled, isReadOnly }) => withObservedValues(
-      children,
-      {
-        disabled: isDisabled,
-        readonly: isReadOnly
-      },
-      updateInteractionVariant
-    )
-  ));
+  )));
 }
 const TEXT_FIELD_COMPONENT_NAME = makeComponentName("textField");
 function registerTextField(loader, overrides) {
@@ -4069,13 +4427,36 @@ function registerTextField(loader, overrides) {
       importName: "BaseTextField",
       interactionVariants,
       // TODO: Support for validate prop
-      props: __spreadProps(__spreadValues$1({}, getCommonInputProps("input", [
+      props: __spreadProps(__spreadValues$1({}, getCommonProps("Text Field", [
         "name",
         "isDisabled",
         "isReadOnly",
         "autoFocus",
         "aria-label",
-        "isRequired"
+        "isRequired",
+        "value",
+        "maxLength",
+        "minLength",
+        "pattern",
+        "type",
+        "inputMode",
+        "validationBehavior",
+        "autoComplete",
+        "onChange",
+        "onFocus",
+        "onBlur",
+        "onFocusChange",
+        "onKeyDown",
+        "onKeyUp",
+        "onCopy",
+        "onCut",
+        "onPaste",
+        "onCompositionStart",
+        "onCompositionEnd",
+        "onCompositionUpdate",
+        "onSelect",
+        "onBeforeInput",
+        "onInput"
       ])), {
         children: {
           type: "slot",
@@ -4119,12 +4500,6 @@ function registerTextField(loader, overrides) {
             ]
           }
         },
-        value: {
-          type: "string",
-          editOnly: true,
-          uncontrolledProp: "defaultValue",
-          description: "The current value"
-        },
         isInvalid: {
           // TODO: Not sure if needed
           displayName: "Invalid",
@@ -4136,190 +4511,8 @@ function registerTextField(loader, overrides) {
           // TODO: Not sure if needed
           type: "array",
           description: "Errors for custom validation"
-        },
-        // validate: {
-        //   type: "function" as const,
-        //   argNames: ["value"],
-        //   argValues: (_ps: any, ctx: any) => [ctx.data[0]],
-        // },
-        enableAutoComplete: {
-          type: "boolean",
-          description: "Whether the browser is allowed to automatically complete the input",
-          defaultValueHint: false
-        },
-        autoComplete: {
-          type: "choice",
-          hidden: ({ enableAutoComplete }) => !enableAutoComplete,
-          description: "Guidance as to the type of data expected in the field",
-          helpText: "For explanations on what each of the values mean, check https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values",
-          options: [
-            "name",
-            "honorific-prefix",
-            "given-name",
-            "additional-name",
-            "family-name",
-            "honorific-suffix",
-            "nickname",
-            "email",
-            "username",
-            "new-password",
-            "current-password",
-            "one-time-code",
-            "organization-title",
-            "organization",
-            "street-address",
-            "shipping",
-            "billing",
-            "address-line1",
-            "address-line2",
-            "address-line3",
-            "address-level4",
-            "address-level3",
-            "address-level2",
-            "address-level1",
-            "country",
-            "country-name",
-            "postal-code",
-            "cc-name",
-            "cc-given-name",
-            "cc-additional-name",
-            "cc-family-name",
-            "cc-number",
-            "cc-exp",
-            "cc-exp-month",
-            "cc-exp-year",
-            "cc-csc",
-            "cc-type",
-            "transaction-currency",
-            "transaction-amount",
-            "language",
-            "bday",
-            "bday-day",
-            "bday-month",
-            "bday-year",
-            "sex",
-            "tel",
-            "tel-country-code",
-            "tel-national",
-            "tel-area-code",
-            "tel-local",
-            "tel-local-suffix",
-            "tel-local-prefix",
-            "tel-extension",
-            "impp",
-            "url",
-            "photo",
-            "webauthn"
-          ]
-        },
-        maxLength: {
-          type: "number",
-          description: "The maximum number of characters supported by the input"
-        },
-        minLength: {
-          type: "number",
-          description: "The minimum number of characters supported by the input"
-        },
-        pattern: {
-          type: "string",
-          description: "Regex pattern that the value of the input must match to be valid",
-          helpText: "For more information about writing Regular Expressions (regex), check out https://regexr.com/",
-          validator: (value) => {
-            try {
-              new RegExp(value);
-              return true;
-            } catch (error) {
-              return "Invalid Regex";
-            }
-          }
-        },
-        type: {
-          type: "choice",
-          defaultValueHint: "text",
-          options: ["text", "search", "url", "tel", "email", "password"]
-        },
-        inputMode: {
-          type: "choice",
-          description: "hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.",
-          options: [
-            "none",
-            "text",
-            "tel",
-            "url",
-            "email",
-            "numeric",
-            "decimal",
-            "search"
-          ]
-        },
-        validationBehavior: {
-          type: "choice",
-          options: ["native", "aria"],
-          description: "Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.",
-          defaultValueHint: "native"
-        },
-        onChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "value", type: "string" }]
-        },
-        onFocus: {
-          type: "eventHandler",
-          argTypes: [{ name: "focusEvent", type: "object" }]
-        },
-        onBlur: {
-          type: "eventHandler",
-          argTypes: [{ name: "focusEvent", type: "object" }]
-        },
-        onFocusChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isFocused", type: "boolean" }]
-        },
-        onKeyDown: {
-          type: "eventHandler",
-          argTypes: [{ name: "keyboardEvent", type: "object" }]
-        },
-        onKeyUp: {
-          type: "eventHandler",
-          argTypes: [{ name: "keyboardEvent", type: "object" }]
-        },
-        onCopy: {
-          type: "eventHandler",
-          argTypes: [{ name: "clipbordEvent", type: "object" }]
-        },
-        onCut: {
-          type: "eventHandler",
-          argTypes: [{ name: "clipbordEvent", type: "object" }]
-        },
-        onPaste: {
-          type: "eventHandler",
-          argTypes: [{ name: "clipbordEvent", type: "object" }]
-        },
-        onCompositionStart: {
-          type: "eventHandler",
-          argTypes: [{ name: "compositionEvent", type: "object" }]
-        },
-        onCompositionEnd: {
-          type: "eventHandler",
-          argTypes: [{ name: "compositionEvent", type: "object" }]
-        },
-        onCompositionUpdate: {
-          type: "eventHandler",
-          argTypes: [{ name: "compositionEvent", type: "object" }]
-        },
-        onSelect: {
-          type: "eventHandler",
-          argTypes: [{ name: "selectionEvent", type: "object" }]
-        },
-        onBeforeInput: {
-          type: "eventHandler",
-          argTypes: [{ name: "inputEvent", type: "object" }]
-        },
-        onInput: {
-          type: "eventHandler",
-          argTypes: [{ name: "inputEvent", type: "object" }]
         }
       }),
-      // NOTE: React-Aria does not support render props for <Input> and <Textarea>, so focusVisible and inputHovered states are not implemented
       states: {
         value: {
           type: "writable",