@plasmicpkgs/react-aria 0.0.151 → 0.0.152

package/dist/react-aria.esm.js

@@ -1,5 +1,5 @@
 import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo, usePlasmicLink } from '@plasmicapp/host';
-import React, { useEffect, useState, useMemo, useCallback, forwardRef, useImperativeHandle, useContext, useRef } from 'react';
+import React, { useEffect, useMemo, useState, useCallback, forwardRef, useImperativeHandle, useContext, useRef } from 'react';
 import { mergeProps, useLink, useHover, useFocusRing, useButton, useFocusWithin, useId } from 'react-aria';
 import { Button, Checkbox, Text, Label, CheckboxGroup, useContextProps, InputContext, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Dialog, ModalOverlay, Modal, DialogTrigger, Heading, TooltipTriggerStateContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, Slider, SliderTrackContext, SliderThumb, SliderTrack, Switch, TextAreaContext, TextField, Provider, Tooltip } from 'react-aria-components';
 import registerComponent from '@plasmicapp/host/registerComponent';
@@ -7,33 +7,33 @@ import { mergeProps as mergeProps$1 } from '@react-aria/utils';
 import flattenChildren from 'react-keyed-flatten-children';
 import { useTooltipTriggerState } from 'react-stately';
 
-var __defProp$s = Object.defineProperty;
+var __defProp$t = Object.defineProperty;
 var __defProps$n = Object.defineProperties;
 var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
-var __hasOwnProp$s = Object.prototype.hasOwnProperty;
-var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$s = (a, b) => {
+var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
+var __hasOwnProp$t = Object.prototype.hasOwnProperty;
+var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$t = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$s.call(b, prop))
-      __defNormalProp$s(a, prop, b[prop]);
-  if (__getOwnPropSymbols$s)
-    for (var prop of __getOwnPropSymbols$s(b)) {
-      if (__propIsEnum$s.call(b, prop))
-        __defNormalProp$s(a, prop, b[prop]);
+    if (__hasOwnProp$t.call(b, prop))
+      __defNormalProp$t(a, prop, b[prop]);
+  if (__getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(b)) {
+      if (__propIsEnum$t.call(b, prop))
+        __defNormalProp$t(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
-var __objRest$o = (source, exclude) => {
+var __objRest$p = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$s.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$t.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$s)
-    for (var prop of __getOwnPropSymbols$s(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$s.call(source, prop))
+  if (source != null && __getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$t.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -88,8 +88,8 @@ function useAutoOpen({
 }
 function registerComponentHelper(loader, component, meta, overrides) {
   if (overrides) {
-    meta = __spreadProps$n(__spreadValues$s(__spreadValues$s({}, meta), overrides), {
-      props: __spreadValues$s(__spreadValues$s({}, meta.props), overrides.props)
+    meta = __spreadProps$n(__spreadValues$t(__spreadValues$t({}, meta), overrides), {
+      props: __spreadValues$t(__spreadValues$t({}, meta.props), overrides.props)
     });
     if (overrides.parentComponentName) {
       meta.name = makeChildComponentName(
@@ -126,7 +126,7 @@ function isDefined(thing) {
   return thing !== void 0 && thing !== null;
 }
 function filterHoverProps(props) {
-  const _a = props, otherProps = __objRest$o(_a, [
+  const _a = props, otherProps = __objRest$p(_a, [
     "onHoverStart",
     "onHoverChange",
     "onHoverEnd"
@@ -134,19 +134,19 @@ function filterHoverProps(props) {
   return otherProps;
 }
 
-var __defProp$r = Object.defineProperty;
-var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
-var __hasOwnProp$r = Object.prototype.hasOwnProperty;
-var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$r = (a, b) => {
+var __defProp$s = Object.defineProperty;
+var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
+var __hasOwnProp$s = Object.prototype.hasOwnProperty;
+var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$s = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$r.call(b, prop))
-      __defNormalProp$r(a, prop, b[prop]);
-  if (__getOwnPropSymbols$r)
-    for (var prop of __getOwnPropSymbols$r(b)) {
-      if (__propIsEnum$r.call(b, prop))
-        __defNormalProp$r(a, prop, b[prop]);
+    if (__hasOwnProp$s.call(b, prop))
+      __defNormalProp$s(a, prop, b[prop]);
+  if (__getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(b)) {
+      if (__propIsEnum$s.call(b, prop))
+        __defNormalProp$s(a, prop, b[prop]);
     }
   return a;
 };
@@ -176,6 +176,13 @@ function resolveAutoComplete(autoCompleteProp) {
   }
   return autoCompleteProp.filter((x) => x !== "on").join(" ");
 }
+function createIdProp(componentName) {
+  return {
+    type: "string",
+    description: `Sets the HTML id attribute on the root element of the ${componentName}.`,
+    advanced: true
+  };
+}
 function createNameProp() {
   return {
     type: "string",
@@ -234,263 +241,283 @@ function createAriaLabelProp(componentName) {
     hidden: hasParent
   };
 }
-function createChildrenProp() {
+function createInitialValueProp(componentName) {
   return {
-    type: "slot",
-    mergeWithParent: true
+    type: "string",
+    editOnly: true,
+    displayName: "Initial value",
+    uncontrolledProp: "defaultValue",
+    description: `The default value of the ${componentName}`,
+    hidden: hasParent
   };
 }
-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",
-      editOnly: true,
-      displayName: "Initial value",
-      uncontrolledProp: "defaultValue",
-      description: `The default value of the ${componentName}`,
-      hidden: hasParent
-    },
-    maxLength: {
-      type: "number",
-      description: "The maximum number of characters supported by the input",
-      advanced: true,
-      hidden: hasParent
-    },
-    minLength: {
-      type: "number",
-      description: "The minimum number of characters supported by the input",
-      advanced: true,
-      hidden: hasParent
-    },
-    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), visit [Regexr](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: "Learn more about the available options on the [MDN guide](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
-    },
-    onCut: {
-      type: "eventHandler",
-      argTypes: [{ name: "clipbordEvent", type: "object" }],
-      advanced: true,
-      hidden: hasParent
-    },
-    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
+function createMaxLengthProp() {
+  return {
+    type: "number",
+    description: "The maximum number of characters supported by the input",
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createMinLengthProp() {
+  return {
+    type: "number",
+    description: "The minimum number of characters supported by the input",
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createPatternProp() {
+  return {
+    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), visit [Regexr](https://regexr.com/)",
+    validator: (value) => {
+      try {
+        new RegExp(value);
+        return true;
+      } catch (_err) {
+        return "Invalid Regex";
+      }
     },
-    placeholder: {
-      type: "string"
-    }
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createInputTypeProp() {
+  return {
+    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
+  };
+}
+function createInputModeProp() {
+  return {
+    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
+  };
+}
+function createAutoCompleteProp() {
+  return {
+    type: "choice",
+    advanced: true,
+    multiSelect: true,
+    hidden: hasParent,
+    description: "Guidance as to the type of data expected in the field",
+    helpText: "Learn more about the available options on the [MDN guide](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"
+    ]
+  };
+}
+function createValidationBehaviorProp() {
+  return {
+    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
+  };
+}
+function createOnChangeProp(argType = "string") {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "value", type: argType }],
+    hidden: hasParent
+  };
+}
+function createOnFocusProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "focusEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnBlurProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "focusEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnFocusChangeProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "isFocused", type: "boolean" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnKeyDownProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "keyboardEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnKeyUpProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "keyboardEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnCopyProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "clipbordEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnCutProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "clipbordEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnPasteProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "clipbordEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnCompositionStartProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "compositionEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnCompositionEndProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "compositionEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnCompositionUpdateProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "compositionEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnSelectProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "selectionEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnBeforeInputProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "inputEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createOnInputProp() {
+  return {
+    type: "eventHandler",
+    argTypes: [{ name: "inputEvent", type: "object" }],
+    advanced: true,
+    hidden: hasParent
+  };
+}
+function createPlaceholderProp() {
+  return {
+    type: "string"
   };
-  const filteredProps = {};
-  propNames.forEach((propName) => {
-    if (Object.prototype.hasOwnProperty.call(commonProps, propName)) {
-      filteredProps[propName] = commonProps[propName];
-    }
-  });
-  return filteredProps;
 }
 function createPlacementProp(componentName, overrides) {
-  return __spreadValues$r({
+  return __spreadValues$s({
     type: "choice",
     description: `Default placement of the ${componentName} relative to the trigger, if there is enough space`,
     options: [
@@ -520,7 +547,7 @@ function createPlacementProp(componentName, overrides) {
   }, overrides != null ? overrides : {});
 }
 function createOffsetProp(componentName, overrides) {
-  return __spreadValues$r({
+  return __spreadValues$s({
     type: "number",
     displayName: "Offset",
     description: `Additional offset applied along the main axis between the ${componentName} and its trigger`,
@@ -528,14 +555,14 @@ function createOffsetProp(componentName, overrides) {
   }, overrides != null ? overrides : {});
 }
 function createContainerPaddingProp(componentName, overrides) {
-  return __spreadValues$r({
+  return __spreadValues$s({
     type: "number",
     description: `The padding that should be applied between the ${componentName} and its surrounding container. This affects the positioning breakpoints that determine when it will attempt to flip.`,
     advanced: true
   }, overrides != null ? overrides : {});
 }
 function createCrossOffsetProp(componentName, overrides) {
-  return __spreadValues$r({
+  return __spreadValues$s({
     type: "number",
     description: `The additional offset applied along the cross axis between the ${componentName} and its anchor element.`,
     advanced: true
@@ -575,6 +602,25 @@ const arrowDown = {
   }
 };
 const COMMON_STYLES = { boxSizing: "border-box" };
+function commonInputEventHandlerProps() {
+  return {
+    // Events supported uniformly by all three
+    onChange: createOnChangeProp("string"),
+    onFocus: createOnFocusProp(),
+    onBlur: createOnBlurProp(),
+    onKeyDown: createOnKeyDownProp(),
+    onKeyUp: createOnKeyUpProp(),
+    onCopy: createOnCopyProp(),
+    onCut: createOnCutProp(),
+    onPaste: createOnPasteProp(),
+    onCompositionStart: createOnCompositionStartProp(),
+    onCompositionEnd: createOnCompositionEndProp(),
+    onCompositionUpdate: createOnCompositionUpdateProp(),
+    onSelect: createOnSelectProp(),
+    onBeforeInput: createOnBeforeInputProp(),
+    onInput: createOnInputProp()
+  };
+}
 
 const ARIA_COMPONENTS_VARIANTS = {
   hovered: {
@@ -660,33 +706,33 @@ function pickAriaComponentVariants(keys) {
   };
 }
 
-var __defProp$q = Object.defineProperty;
+var __defProp$r = Object.defineProperty;
 var __defProps$m = Object.defineProperties;
 var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
-var __hasOwnProp$q = Object.prototype.hasOwnProperty;
-var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$q = (a, b) => {
+var __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$q.call(b, prop))
-      __defNormalProp$q(a, prop, b[prop]);
-  if (__getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(b)) {
-      if (__propIsEnum$q.call(b, prop))
-        __defNormalProp$q(a, prop, b[prop]);
+    if (__hasOwnProp$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$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
-var __objRest$n = (source, exclude) => {
+var __objRest$o = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$r.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
+  if (source != null && __getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$r.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -710,14 +756,14 @@ const BaseButton = React.forwardRef(function BaseButtonInner(props, ref) {
       }
     );
   } else {
-    const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$n(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
+    const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$o(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
     const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
     const buttonProps = mergeProps(rest, {
       type,
       style: COMMON_STYLES,
       ref
     });
-    return /* @__PURE__ */ React.createElement(Button, __spreadValues$q({}, buttonProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$c(
+    return /* @__PURE__ */ React.createElement(Button, __spreadValues$r({}, buttonProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$c(
       children,
       {
         hovered: isHovered,
@@ -734,7 +780,7 @@ function LinkButton({
   props,
   ref
 }) {
-  const _a = props, { href, children, plasmicUpdateVariant } = _a, rest = __objRest$n(_a, ["href", "children", "plasmicUpdateVariant"]);
+  const _a = props, { href, children, plasmicUpdateVariant } = _a, rest = __objRest$o(_a, ["href", "children", "plasmicUpdateVariant"]);
   const PlasmicLink = usePlasmicLink();
   const { linkProps, isPressed } = useLink(props, ref);
   const { hoverProps, isHovered } = useHover(props);
@@ -743,11 +789,13 @@ function LinkButton({
     href,
     className: props.className,
     style: COMMON_STYLES,
+    id: props.id,
+    "aria-label": props["aria-label"],
     ref
   });
   return /* @__PURE__ */ React.createElement(
     PlasmicLink,
-    __spreadProps$m(__spreadValues$q({}, combinedLinkProps), {
+    __spreadProps$m(__spreadValues$r({}, combinedLinkProps), {
       "data-focused": isFocused || void 0,
       "data-hovered": isHovered || void 0,
       "data-pressed": isPressed || void 0,
@@ -792,11 +840,11 @@ function registerButton(loader, overrides) {
         padding: "2px 10px",
         textDecorationLine: "none"
       },
-      props: __spreadProps$m(__spreadValues$q({}, getCommonProps("button", [
-        "autoFocus",
-        "isDisabled",
-        "aria-label"
-      ])), {
+      props: {
+        id: createIdProp("Button"),
+        autoFocus: createAutoFocusProp("Button"),
+        isDisabled: createDisabledProp("Button"),
+        "aria-label": createAriaLabelProp("Button"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -840,7 +888,7 @@ function registerButton(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "event", type: "object" }]
         }
-      }),
+      },
       trapsFocus: true
     },
     overrides
@@ -959,33 +1007,33 @@ function useIdManager(callback, existing) {
   return idManager;
 }
 
-var __defProp$p = Object.defineProperty;
+var __defProp$q = Object.defineProperty;
 var __defProps$l = Object.defineProperties;
 var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
-var __hasOwnProp$p = Object.prototype.hasOwnProperty;
-var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$p = (a, b) => {
+var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
+var __hasOwnProp$q = Object.prototype.hasOwnProperty;
+var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$q = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$p.call(b, prop))
-      __defNormalProp$p(a, prop, b[prop]);
-  if (__getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(b)) {
-      if (__propIsEnum$p.call(b, prop))
-        __defNormalProp$p(a, prop, b[prop]);
+    if (__hasOwnProp$q.call(b, prop))
+      __defNormalProp$q(a, prop, b[prop]);
+  if (__getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(b)) {
+      if (__propIsEnum$q.call(b, prop))
+        __defNormalProp$q(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
-var __objRest$m = (source, exclude) => {
+var __objRest$n = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
+  if (source != null && __getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1007,7 +1055,7 @@ function BaseCheckbox(props) {
     plasmicUpdateVariant,
     setControlContextData,
     value
-  } = _a, rest = __objRest$m(_a, [
+  } = _a, rest = __objRest$n(_a, [
     "children",
     "plasmicUpdateVariant",
     "setControlContextData",
@@ -1024,7 +1072,7 @@ function BaseCheckbox(props) {
   });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     Checkbox,
-    __spreadProps$l(__spreadValues$p({}, rest), {
+    __spreadProps$l(__spreadValues$q({}, rest), {
       value: registeredId,
       key: registeredId,
       style: COMMON_STYLES
@@ -1111,14 +1159,14 @@ function registerCheckbox(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
       variants: variants$e,
-      props: __spreadProps$l(__spreadValues$p({}, getCommonProps("checkbox", [
-        "name",
-        "isDisabled",
-        "isReadOnly",
-        "aria-label",
-        "isRequired",
-        "autoFocus"
-      ])), {
+      props: {
+        id: createIdProp("Checkbox"),
+        name: createNameProp(),
+        isDisabled: createDisabledProp("Checkbox"),
+        isReadOnly: createReadOnlyProp("Checkbox"),
+        isRequired: createRequiredProp("Checkbox"),
+        autoFocus: createAutoFocusProp("Checkbox"),
+        "aria-label": createAriaLabelProp("Checkbox"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -1170,7 +1218,7 @@ function registerCheckbox(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "isSelected", type: "boolean" }]
         }
-      }),
+      },
       states: {
         isSelected: {
           type: "writable",
@@ -1186,42 +1234,43 @@ function registerCheckbox(loader, overrides) {
   );
 }
 
-var __defProp$o = Object.defineProperty;
+var __defProp$p = Object.defineProperty;
 var __defProps$k = Object.defineProperties;
 var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
-var __hasOwnProp$o = Object.prototype.hasOwnProperty;
-var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$o = (a, b) => {
+var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
+var __hasOwnProp$p = Object.prototype.hasOwnProperty;
+var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$p = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$o.call(b, prop))
-      __defNormalProp$o(a, prop, b[prop]);
-  if (__getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(b)) {
-      if (__propIsEnum$o.call(b, prop))
-        __defNormalProp$o(a, prop, b[prop]);
+    if (__hasOwnProp$p.call(b, prop))
+      __defNormalProp$p(a, prop, b[prop]);
+  if (__getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(b)) {
+      if (__propIsEnum$p.call(b, prop))
+        __defNormalProp$p(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
-var __objRest$l = (source, exclude) => {
+var __objRest$m = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
+  if (source != null && __getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BaseText(_a) {
-  var _b = _a, { children, slot, className } = _b, rest = __objRest$l(_b, ["children", "slot", "className"]);
+  var _b = _a, { children, slot, className } = _b, rest = __objRest$m(_b, ["children", "slot", "className"]);
+  const dataProps = extractPlasmicDataProps(rest);
   return /* @__PURE__ */ React.createElement(
     Text,
-    __spreadProps$k(__spreadValues$o({}, extractPlasmicDataProps(rest)), {
+    __spreadProps$k(__spreadValues$p(__spreadValues$p({}, rest), dataProps), {
       slot,
       className,
       style: COMMON_STYLES
@@ -1240,6 +1289,7 @@ function registerText(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerText",
       importName: "BaseText",
       props: {
+        id: createIdProp("Text"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -1261,28 +1311,28 @@ function registerText(loader, overrides) {
   );
 }
 
-var __defProp$n = Object.defineProperty;
+var __defProp$o = Object.defineProperty;
 var __defProps$j = Object.defineProperties;
 var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
-var __hasOwnProp$n = Object.prototype.hasOwnProperty;
-var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$n = (a, b) => {
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$o = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$n.call(b, prop))
-      __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$n(a, prop, b[prop]);
+    if (__hasOwnProp$o.call(b, prop))
+      __defNormalProp$o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$o(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
 const DESCRIPTION_COMPONENT_NAME = makeComponentName("description");
 function registerDescription(loader, overrides) {
-  return registerText(loader, __spreadProps$j(__spreadValues$n({}, overrides), {
+  return registerText(loader, __spreadProps$j(__spreadValues$o({}, overrides), {
     name: DESCRIPTION_COMPONENT_NAME,
     displayName: "Aria Description",
     props: {
@@ -1295,44 +1345,47 @@ function registerDescription(loader, overrides) {
   }));
 }
 
-var __defProp$m = Object.defineProperty;
+var __defProp$n = Object.defineProperty;
 var __defProps$i = Object.defineProperties;
 var __getOwnPropDescs$i = 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$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$m.call(b, prop))
-      __defNormalProp$m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
-        __defNormalProp$m(a, prop, b[prop]);
+    if (__hasOwnProp$n.call(b, prop))
+      __defNormalProp$n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
+        __defNormalProp$n(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
-var __objRest$k = (source, exclude) => {
+var __objRest$l = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$n.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.call(source, prop))
+  if (source != null && __getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$n.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BaseLabel(_a) {
-  var _b = _a, { children, className } = _b, rest = __objRest$k(_b, ["children", "className"]);
+  var _b = _a, { children, className, id, "aria-label": ariaLabel } = _b, rest = __objRest$l(_b, ["children", "className", "id", "aria-label"]);
+  const dataProps = extractPlasmicDataProps(rest);
   return /* @__PURE__ */ React.createElement(
     Label,
-    __spreadProps$i(__spreadValues$m({}, extractPlasmicDataProps(rest)), {
+    __spreadProps$i(__spreadValues$n({}, dataProps), {
+      id,
       className,
-      style: COMMON_STYLES
+      style: COMMON_STYLES,
+      "aria-label": ariaLabel
     }),
     children
   );
@@ -1351,6 +1404,8 @@ function registerLabel(loader, overrides) {
         cursor: "pointer"
       },
       props: {
+        id: createIdProp("Label"),
+        "aria-label": createAriaLabelProp("Label"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -1366,33 +1421,33 @@ function registerLabel(loader, overrides) {
   );
 }
 
-var __defProp$l = Object.defineProperty;
+var __defProp$m = Object.defineProperty;
 var __defProps$h = Object.defineProperties;
 var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$l = (a, b) => {
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$m = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$l.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
+    if (__hasOwnProp$m.call(b, prop))
+      __defNormalProp$m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
+        __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
-var __objRest$j = (source, exclude) => {
+var __objRest$k = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$l.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$l)
-    for (var prop of __getOwnPropSymbols$l(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.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;
@@ -1402,7 +1457,7 @@ const { variants: variants$d, withObservedValues: withObservedValues$a } = pickA
   CHECKBOX_GROUP_VARIANTS
 );
 function BaseCheckboxGroup(props) {
-  const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$j(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
+  const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$k(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
   const updateIds = useCallback(
     (ids) => {
       setControlContextData == null ? void 0 : setControlContextData({
@@ -1414,7 +1469,7 @@ function BaseCheckboxGroup(props) {
   const idManager = useIdManager(updateIds);
   return (
     // PlasmicCheckboxGroupContext is used by BaseCheckbox
-    /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$h(__spreadValues$l({}, rest), { idManager }) }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadProps$h(__spreadValues$l({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$a(
+    /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$h(__spreadValues$m({}, rest), { idManager }) }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadProps$h(__spreadValues$m({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$a(
       children,
       {
         disabled: isDisabled,
@@ -1435,13 +1490,13 @@ function registerCheckboxGroup(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
       variants: variants$d,
-      props: __spreadProps$h(__spreadValues$l({}, getCommonProps("checkbox group", [
-        "name",
-        "isDisabled",
-        "isReadOnly",
-        "aria-label",
-        "isRequired"
-      ])), {
+      props: {
+        id: createIdProp("Checkbox Group"),
+        name: createNameProp(),
+        isDisabled: createDisabledProp("Checkbox Group"),
+        isReadOnly: createReadOnlyProp("Checkbox Group"),
+        isRequired: createRequiredProp("Checkbox Group"),
+        "aria-label": createAriaLabelProp("Checkbox Group"),
         children: {
           type: "slot",
           defaultValue: [
@@ -1535,7 +1590,7 @@ function registerCheckboxGroup(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "value", type: "object" }]
         }
-      }),
+      },
       states: {
         value: {
           type: "writable",
@@ -1550,33 +1605,33 @@ function registerCheckboxGroup(loader, overrides) {
   );
 }
 
-var __defProp$k = Object.defineProperty;
+var __defProp$l = Object.defineProperty;
 var __defProps$g = Object.defineProperties;
 var __getOwnPropDescs$g = 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$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$l = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$k.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
+    if (__hasOwnProp$l.call(b, prop))
+      __defNormalProp$l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$l(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
-var __objRest$i = (source, exclude) => {
+var __objRest$j = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
+  if (source != null && __getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1604,7 +1659,7 @@ function BaseInput_(props, ref) {
     autoComplete,
     value,
     className
-  } = _a, restProps = __objRest$i(_a, [
+  } = _a, restProps = __objRest$j(_a, [
     "plasmicUpdateVariant",
     "setControlContextData",
     "autoComplete",
@@ -1651,7 +1706,7 @@ function BaseInput_(props, ref) {
   }, [isFocused, isFocusVisible, isHovered, isDisabled, plasmicUpdateVariant]);
   return /* @__PURE__ */ React.createElement(
     "input",
-    __spreadProps$g(__spreadValues$k({}, mergedProps), {
+    __spreadProps$g(__spreadValues$l({}, mergedProps), {
       ref: inputRef,
       "data-focused": isFocused || void 0,
       "data-disabled": isDisabled || void 0,
@@ -1680,38 +1735,28 @@ function registerInput(loader, overrides) {
         borderColor: "black",
         padding: "4px 10px"
       },
-      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"
-      ])),
+      props: __spreadValues$l({
+        // Keep id first in the editor
+        id: createIdProp("Input"),
+        // Non-event props (explicit to preserve ordering)
+        name: createNameProp(),
+        placeholder: createPlaceholderProp(),
+        value: createInitialValueProp("Input"),
+        type: createInputTypeProp(),
+        autoFocus: createAutoFocusProp("Input"),
+        disabled: createDisabledProp("Input"),
+        readOnly: createReadOnlyProp("Input"),
+        required: createRequiredProp("Input"),
+        pattern: createPatternProp(),
+        inputMode: createInputModeProp(),
+        autoComplete: createAutoCompleteProp(),
+        maxLength: createMaxLengthProp(),
+        minLength: createMinLengthProp(),
+        // Accessibility
+        "aria-label": createAriaLabelProp("Input")
+      }, commonInputEventHandlerProps()),
       states: {
-        value: __spreadValues$k({
+        value: __spreadValues$l({
           type: "writable",
           valueProp: "value",
           onChangeProp: "onChange",
@@ -1728,33 +1773,33 @@ function registerInput(loader, overrides) {
   );
 }
 
-var __defProp$j = Object.defineProperty;
+var __defProp$k = Object.defineProperty;
 var __defProps$f = Object.defineProperties;
 var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$j = (a, b) => {
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$j.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$j(a, prop, b[prop]);
+    if (__hasOwnProp$k.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
+        __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
-var __objRest$h = (source, exclude) => {
+var __objRest$i = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$j.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$j)
-    for (var prop of __getOwnPropSymbols$j(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.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;
@@ -1771,19 +1816,16 @@ const { variants: variants$b, withObservedValues: withObservedValues$9 } = pickA
   LIST_BOX_ITEM_VARIANTS
 );
 function BaseListBoxItem(props) {
-  const _a = props, { children, setControlContextData, plasmicUpdateVariant, id } = _a, rest = __objRest$h(_a, ["children", "setControlContextData", "plasmicUpdateVariant", "id"]);
+  const _a = props, { children, setControlContextData, plasmicUpdateVariant, id } = _a, rest = __objRest$i(_a, ["children", "setControlContextData", "plasmicUpdateVariant", "id"]);
   const listboxContext = React.useContext(PlasmicListBoxContext);
   const isStandalone = !listboxContext;
-  const { registeredId, idError } = useOptionsItemId(
-    id,
-    listboxContext == null ? void 0 : listboxContext.idManager
-  );
+  const { registeredId, idError } = useOptionsItemId(id, listboxContext == null ? void 0 : listboxContext.idManager);
   setControlContextData == null ? void 0 : setControlContextData({
     idError
   });
   const listboxItem = /* @__PURE__ */ React.createElement(
     ListBoxItem,
-    __spreadProps$f(__spreadValues$j({
+    __spreadProps$f(__spreadValues$k({
       key: registeredId,
       id: registeredId
     }, rest), {
@@ -1891,42 +1933,42 @@ function registerListBoxItem(loader, overrides) {
   );
 }
 
-var __defProp$i = Object.defineProperty;
+var __defProp$j = Object.defineProperty;
 var __defProps$e = Object.defineProperties;
 var __getOwnPropDescs$e = 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$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$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$j.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
-var __objRest$g = (source, exclude) => {
+var __objRest$h = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
+  if (source != null && __getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BaseSection(props) {
-  const _a = props, { header, items } = _a, rest = __objRest$g(_a, ["header", "items"]);
+  const _a = props, { header, items } = _a, rest = __objRest$h(_a, ["header", "items"]);
   const contextProps = React.useContext(PlasmicListBoxContext);
   const isStandalone = !contextProps;
-  const section = /* @__PURE__ */ React.createElement(Section, __spreadProps$e(__spreadValues$i({}, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React.createElement(Header, null, header), items);
+  const section = /* @__PURE__ */ React.createElement(Section, __spreadProps$e(__spreadValues$j({}, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React.createElement(Header, null, header), items);
   if (isStandalone) {
     return (
       // BaseListbox should give section a listbox context (that it can't be used without)
@@ -1951,6 +1993,7 @@ function registerSection(loader, overrides) {
         padding: "10px"
       },
       props: {
+        "aria-label": createAriaLabelProp("Section"),
         header: {
           type: "slot",
           mergeWithParent: true,
@@ -1972,30 +2015,30 @@ function registerSection(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$i = Object.defineProperty;
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$i = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$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$i.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$f = (source, exclude) => {
+var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$i.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$i)
+    for (var prop of __getOwnPropSymbols$i(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2022,7 +2065,7 @@ function BaseListBox(props) {
     selectedKeys,
     defaultSelectedKeys,
     plasmicUpdateVariant
-  } = _a, rest = __objRest$f(_a, [
+  } = _a, rest = __objRest$g(_a, [
     "setControlContextData",
     "children",
     "className",
@@ -2053,7 +2096,7 @@ function BaseListBox(props) {
   );
   const listbox = /* @__PURE__ */ React.createElement(
     ListBox,
-    __spreadValues$h(__spreadValues$h({
+    __spreadValues$i(__spreadValues$i({
       selectedKeys: normalizeSelectedKeys(selectedKeys),
       defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys),
       className: classNameProp,
@@ -2147,6 +2190,8 @@ function registerListBox(loader, overrides) {
         borderColor: "black"
       },
       props: {
+        id: createIdProp("List Box"),
+        "aria-label": createAriaLabelProp("List Box"),
         children: {
           type: "slot",
           displayName: "List Items",
@@ -2224,7 +2269,7 @@ function registerListBox(loader, overrides) {
         }
       },
       states: {
-        selectedValue: __spreadValues$h({
+        selectedValue: __spreadValues$i({
           type: "writable",
           valueProp: "selectedKeys",
           hidden: (props, ctx) => !(ctx == null ? void 0 : ctx.isStandalone) || props.selectionMode === "none",
@@ -2243,30 +2288,30 @@ function registerListBox(loader, 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) => {
+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$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$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$e = (source, exclude) => {
+var __objRest$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$h.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))
+  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;
@@ -2276,7 +2321,7 @@ function BasePopover(props) {
     resetClassName,
     setControlContextData,
     matchTriggerWidth
-  } = _a, restProps = __objRest$e(_a, [
+  } = _a, restProps = __objRest$f(_a, [
     "resetClassName",
     "setControlContextData",
     "matchTriggerWidth"
@@ -2302,7 +2347,7 @@ function BasePopover(props) {
       // In component view, we never want to start with an empty artboard, so isOpen has to be true
       isOpen: true
     } : null
-  ), { children } = _b, mergedProps = __objRest$e(_b, ["children"]);
+  ), { children } = _b, mergedProps = __objRest$f(_b, ["children"]);
   useEffect(() => {
     setControlContextData == null ? void 0 : setControlContextData({
       canMatchTriggerWidth: hasTrigger
@@ -2310,8 +2355,8 @@ function BasePopover(props) {
   }, [hasTrigger, setControlContextData]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(
     Popover,
-    __spreadValues$g({
-      style: __spreadValues$g(__spreadValues$g({}, matchTriggerWidthProp ? { width: `var(--trigger-width)` } : {}), COMMON_STYLES)
+    __spreadValues$h({
+      style: __spreadValues$h(__spreadValues$h({}, matchTriggerWidthProp ? { width: `var(--trigger-width)` } : {}), COMMON_STYLES)
     }, mergedProps),
     children
   ));
@@ -2333,7 +2378,8 @@ function registerPopover(loader, overrides) {
         width: "300px",
         backgroundColor: "#FDE3C3"
       },
-      props: __spreadValues$g({
+      props: __spreadValues$h({
+        id: createIdProp("Popover"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -2378,7 +2424,7 @@ function registerPopover(loader, overrides) {
           defaultValue: true,
           hidden: (_props, ctx) => !(ctx == null ? void 0 : ctx.canMatchTriggerWidth)
         }
-      }, getCommonOverlayProps("popover", {
+      }, getCommonOverlayProps("Popover", {
         placement: { defaultValueHint: "bottom" },
         offset: { defaultValueHint: 8 },
         containerPadding: { defaultValueHint: 12 },
@@ -2392,33 +2438,33 @@ function registerPopover(loader, overrides) {
   );
 }
 
-var __defProp$f = Object.defineProperty;
+var __defProp$g = Object.defineProperty;
 var __defProps$d = Object.defineProperties;
 var __getOwnPropDescs$d = 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$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$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$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 __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-var __objRest$d = (source, exclude) => {
+var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(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;
@@ -2441,7 +2487,7 @@ function BaseComboBox(props) {
     plasmicNotifyAutoOpenedContent,
     className,
     isOpen: _isOpen
-  } = _a, rest = __objRest$d(_a, [
+  } = _a, rest = __objRest$e(_a, [
     "children",
     "setControlContextData",
     "plasmicUpdateVariant",
@@ -2468,7 +2514,7 @@ function BaseComboBox(props) {
     [setControlContextData]
   );
   const idManager = useIdManager(updateIds);
-  return /* @__PURE__ */ React.createElement(ComboBox, __spreadProps$d(__spreadValues$f({ className: classNameProp }, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(ComboBox, __spreadProps$d(__spreadValues$g({ className: classNameProp }, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
     PlasmicListBoxContext.Provider,
     {
       value: {
@@ -2491,11 +2537,11 @@ function registerComboBox(loader) {
     importPath: "@plasmicpkgs/react-aria/skinny/registerComboBox",
     importName: "BaseComboBox",
     variants: COMBOBOX_VARIANTS_DATA,
-    props: __spreadProps$d(__spreadValues$f({}, getCommonProps("ComboBox", [
-      "name",
-      "aria-label",
-      "isDisabled"
-    ])), {
+    props: {
+      id: createIdProp("ComboBox"),
+      name: createNameProp(),
+      isDisabled: createDisabledProp("ComboBox"),
+      "aria-label": createAriaLabelProp("ComboBox"),
       selectedKey: {
         type: "choice",
         editOnly: true,
@@ -2602,7 +2648,7 @@ function registerComboBox(loader) {
           }
         ]
       }
-    }),
+    },
     states: {
       selectedValue: {
         type: "writable",
@@ -2621,12 +2667,44 @@ function registerComboBox(loader) {
   });
 }
 
-function BaseDialog({ children, className }) {
+var __defProp$f = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = 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) => {
+  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]);
+    }
+  return a;
+};
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __objRest$d = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = 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;
+};
+function BaseDialog(_a) {
+  var _b = _a, { children, className } = _b, rest = __objRest$d(_b, ["children", "className"]);
   const canvasContext = usePlasmicCanvasContext();
   if (canvasContext) {
-    return /* @__PURE__ */ React.createElement("div", { className, style: COMMON_STYLES }, children);
+    return /* @__PURE__ */ React.createElement("div", { id: rest.id, className, style: COMMON_STYLES }, children);
   } else {
-    return /* @__PURE__ */ React.createElement(Dialog, { className, style: COMMON_STYLES }, children);
+    return /* @__PURE__ */ React.createElement(Dialog, __spreadProps$c(__spreadValues$f({}, rest), { className, style: COMMON_STYLES }), children);
   }
 }
 const DIALOG_COMPONENT_NAME = makeComponentName("dialog");
@@ -2640,6 +2718,8 @@ function registerDialog(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerDialog",
       importName: "BaseDialog",
       props: {
+        id: createIdProp("Dialog"),
+        "aria-label": createAriaLabelProp("Dialog"),
         children: {
           type: "slot",
           mergeWithParent: true
@@ -2652,8 +2732,8 @@ function registerDialog(loader, overrides) {
 }
 
 var __defProp$e = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
 var __hasOwnProp$e = Object.prototype.hasOwnProperty;
 var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
@@ -2669,7 +2749,7 @@ var __spreadValues$e = (a, b) => {
     }
   return a;
 };
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
 var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2692,7 +2772,8 @@ const BaseModal = forwardRef(
       resetClassName,
       setControlContextData,
       isDismissable,
-      defaultOpen
+      defaultOpen,
+      id
     } = _a, rest = __objRest$c(_a, [
       "children",
       "modalOverlayClass",
@@ -2701,7 +2782,8 @@ const BaseModal = forwardRef(
       "resetClassName",
       "setControlContextData",
       "isDismissable",
-      "defaultOpen"
+      "defaultOpen",
+      "id"
     ]);
     const canvasCtx = usePlasmicCanvasContext();
     const isEditMode = canvasCtx && canvasCtx.interactive === false;
@@ -2734,10 +2816,17 @@ const BaseModal = forwardRef(
     }));
     return /* @__PURE__ */ React.createElement(
       ModalOverlay,
-      __spreadProps$c(__spreadValues$e({}, mergedProps), {
+      __spreadProps$b(__spreadValues$e({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
-      /* @__PURE__ */ React.createElement(Modal, { className }, children)
+      /* @__PURE__ */ React.createElement(
+        Modal,
+        {
+          className,
+          id
+        },
+        children
+      )
     );
   }
 );
@@ -2809,6 +2898,7 @@ function registerModal(loader, overrides) {
         }
       },
       props: {
+        id: createIdProp("Modal"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -2859,8 +2949,8 @@ function registerModal(loader, overrides) {
 }
 
 var __defProp$d = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
 var __hasOwnProp$d = Object.prototype.hasOwnProperty;
 var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
@@ -2876,7 +2966,7 @@ var __spreadValues$d = (a, b) => {
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -2889,13 +2979,14 @@ var __objRest$b = (source, exclude) => {
     }
   return target;
 };
-function TriggerWrapper$1({ children, className }) {
+function TriggerWrapper$1({ children, className, id }) {
   const ref = React.useRef(null);
   const { buttonProps } = useButton({}, ref);
   const mergedProps = mergeProps(buttonProps, {
     ref,
     // We expose className to allow user control over the wrapper div's styling.
     className,
+    id,
     style: COMMON_STYLES
   });
   return /* @__PURE__ */ React.createElement("div", __spreadValues$d({}, mergedProps), children);
@@ -2907,12 +2998,12 @@ function BaseDialogTrigger(props) {
     isOpen,
     props
   });
-  const mergedProps = __spreadProps$b(__spreadValues$d({}, rest), {
+  const mergedProps = __spreadProps$a(__spreadValues$d({}, rest), {
     isOpen: canvasAwareIsOpen
   });
   return (
     // PlasmicDialogTriggerContext is used by BaseModal
-    /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$d({}, mergedProps), trigger && /* @__PURE__ */ React.createElement(TriggerWrapper$1, { className }, trigger), dialog))
+    /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$d({}, mergedProps), trigger && /* @__PURE__ */ React.createElement(TriggerWrapper$1, { className, id: props.id }, trigger), dialog))
   );
 }
 function registerDialogTrigger(loader, overrides) {
@@ -2925,6 +3016,7 @@ function registerDialogTrigger(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerDialogTrigger",
       importName: "BaseDialogTrigger",
       props: {
+        id: createIdProp("Dialog Trigger"),
         trigger: {
           type: "slot",
           mergeWithParent: true,
@@ -2984,8 +3076,8 @@ function registerDialogTrigger(loader, overrides) {
 }
 
 var __defProp$c = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
 var __hasOwnProp$c = Object.prototype.hasOwnProperty;
 var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
@@ -3001,7 +3093,7 @@ var __spreadValues$c = (a, b) => {
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3016,7 +3108,7 @@ var __objRest$a = (source, exclude) => {
 };
 function BaseHeading(_a) {
   var _b = _a, { children } = _b, rest = __objRest$a(_b, ["children"]);
-  return /* @__PURE__ */ React.createElement(Heading, __spreadProps$a(__spreadValues$c({}, rest), { style: COMMON_STYLES }), children);
+  return /* @__PURE__ */ React.createElement(Heading, __spreadProps$9(__spreadValues$c({}, rest), { style: COMMON_STYLES }), children);
 }
 const HEADING_COMPONENT_NAME = makeComponentName("heading");
 function registerHeading(loader, overrides) {
@@ -3034,6 +3126,7 @@ function registerHeading(loader, overrides) {
         marginBottom: "10px"
       },
       props: {
+        id: createIdProp("Heading"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -3082,7 +3175,8 @@ const { variants: variants$9, withObservedValues: withObservedValues$8 } = pickA
 function BaseOverlayArrow({
   children,
   plasmicUpdateVariant,
-  className
+  className,
+  id
 }) {
   const popoverContext = React.useContext(PopoverContext);
   const tooltipContext = React.useContext(TooltipTriggerStateContext);
@@ -3091,6 +3185,7 @@ function BaseOverlayArrow({
     OverlayArrow,
     {
       className,
+      id,
       style: __spreadValues$b({ lineHeight: "0" }, COMMON_STYLES)
     },
     ({ placement }) => withObservedValues$8(
@@ -3121,6 +3216,7 @@ function registerOverlayArrow(loader, overrides) {
       styleSections: ["visibility"],
       variants: variants$9,
       props: {
+        id: createIdProp("Overlay Arrow"),
         children: {
           type: "slot",
           defaultValue: arrowDown
@@ -3132,8 +3228,8 @@ function registerOverlayArrow(loader, overrides) {
 }
 
 var __defProp$a = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
 var __hasOwnProp$a = Object.prototype.hasOwnProperty;
 var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
@@ -3149,7 +3245,7 @@ var __spreadValues$a = (a, b) => {
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3197,7 +3293,7 @@ function BaseRadio(props) {
   });
   const radio = /* @__PURE__ */ React.createElement(
     Radio,
-    __spreadProps$9(__spreadValues$a({}, rest), {
+    __spreadProps$8(__spreadValues$a({}, rest), {
       value: registeredId != null ? registeredId : "",
       key: registeredId,
       style: COMMON_STYLES
@@ -3271,11 +3367,11 @@ function registerRadio(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadio",
       importName: "BaseRadio",
       variants: variants$8,
-      props: __spreadProps$9(__spreadValues$a({}, getCommonProps("radio", [
-        "isDisabled",
-        "autoFocus",
-        "aria-label"
-      ])), {
+      props: {
+        id: createIdProp("Radio"),
+        isDisabled: createDisabledProp("Radio"),
+        autoFocus: createAutoFocusProp("Radio"),
+        "aria-label": createAriaLabelProp("Radio"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -3291,7 +3387,7 @@ function registerRadio(loader, overrides) {
             return true;
           }
         }
-      }),
+      },
       trapsFocus: true
     },
     overrides
@@ -3299,8 +3395,8 @@ function registerRadio(loader, overrides) {
 }
 
 var __defProp$9 = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
 var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
 var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
@@ -3316,7 +3412,7 @@ var __spreadValues$9 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -3344,7 +3440,7 @@ function BaseRadioGroup(props) {
   const idManager = useIdManager(updateIds);
   return (
     // PlasmicRadioGroupContext is used by BaseRadio
-    /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$8(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadProps$8(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$6(
+    /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$7(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadProps$7(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$6(
       children,
       {
         disabled: isDisabled,
@@ -3370,13 +3466,13 @@ function registerRadioGroup(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadioGroup",
       importName: "BaseRadioGroup",
       variants: variants$7,
-      props: __spreadProps$8(__spreadValues$9({}, getCommonProps("radio group", [
-        "name",
-        "isDisabled",
-        "isReadOnly",
-        "aria-label",
-        "isRequired"
-      ])), {
+      props: {
+        id: createIdProp("Radio Group"),
+        name: createNameProp(),
+        isDisabled: createDisabledProp("Radio Group"),
+        isReadOnly: createReadOnlyProp("Radio Group"),
+        isRequired: createRequiredProp("Radio Group"),
+        "aria-label": createAriaLabelProp("Radio Group"),
         children: {
           type: "slot",
           defaultValue: [
@@ -3462,7 +3558,7 @@ function registerRadioGroup(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "value", type: "string" }]
         }
-      }),
+      },
       states: {
         value: {
           type: "writable",
@@ -3478,8 +3574,6 @@ function registerRadioGroup(loader, overrides) {
 }
 
 var __defProp$8 = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
 var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
 var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
@@ -3495,7 +3589,6 @@ var __spreadValues$8 = (a, b) => {
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 function SelectAutoOpen(props) {
   var _a;
   const { open, close } = (_a = React.useContext(SelectStateContext)) != null ? _a : {};
@@ -3566,7 +3659,8 @@ function BaseSelect(props) {
       style: COMMON_STYLES,
       name,
       disabledKeys,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      id: props.id
     }, extractPlasmicDataProps(props)),
     /* @__PURE__ */ React.createElement(
       SelectAutoOpen,
@@ -3622,12 +3716,12 @@ function registerSelect(loader) {
     importPath: "@plasmicpkgs/react-aria/skinny/registerSelect",
     importName: "BaseSelect",
     variants: SELECT_VARIANTS_DATA,
-    props: __spreadProps$7(__spreadValues$8({}, getCommonProps("Select", [
-      "name",
-      "aria-label",
-      "isDisabled",
-      "autoFocus"
-    ])), {
+    props: {
+      id: createIdProp("Select"),
+      name: createNameProp(),
+      isDisabled: createDisabledProp("Select"),
+      autoFocus: createAutoFocusProp("Select"),
+      "aria-label": createAriaLabelProp("Select"),
       selectedKey: {
         type: "choice",
         editOnly: true,
@@ -3738,7 +3832,7 @@ function registerSelect(loader) {
           }
         ]
       }
-    }),
+    },
     states: {
       selectedValue: {
         type: "writable",
@@ -3819,6 +3913,7 @@ function registerSliderOutput(loader, overrides) {
       importName: "BaseSliderOutput",
       variants: variants$6,
       props: {
+        id: createIdProp("Slider Output"),
         children: {
           mergeWithParent: true,
           type: "slot"
@@ -3882,17 +3977,23 @@ function BaseSliderThumb(_a) {
     "plasmicUpdateVariant"
   ]);
   const isStandalone = !React.useContext(SliderTrackContext);
-  const thumb = /* @__PURE__ */ React.createElement(SliderThumb, __spreadProps$5(__spreadValues$6({}, rest), { style: COMMON_STYLES }), ({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) => withObservedValues$4(
-    /* @__PURE__ */ React.createElement(React.Fragment, null, advanced ? children : void 0),
-    {
-      dragging: isDragging,
-      hovered: isHovered,
-      focused: isFocused,
-      focusVisible: isFocusVisible,
-      disabled: isDisabled
-    },
-    plasmicUpdateVariant
-  ));
+  const thumb = /* @__PURE__ */ React.createElement(
+    SliderThumb,
+    __spreadProps$5(__spreadValues$6({}, rest), {
+      style: COMMON_STYLES
+    }),
+    ({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) => withObservedValues$4(
+      /* @__PURE__ */ React.createElement(React.Fragment, null, advanced ? children : void 0),
+      {
+        dragging: isDragging,
+        hovered: isHovered,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: isDisabled
+      },
+      plasmicUpdateVariant
+    )
+  );
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, /* @__PURE__ */ React.createElement(SliderTrack, null, thumb));
   }
@@ -3918,11 +4019,10 @@ function registerSliderThumb(loader, overrides) {
         cursor: "pointer"
       },
       variants: variants$5,
-      props: __spreadProps$5(__spreadValues$6({}, getCommonProps("slider thumb", [
-        "name",
-        "isDisabled",
-        "autoFocus"
-      ])), {
+      props: {
+        name: createNameProp(),
+        isDisabled: createDisabledProp("Slider Thumb"),
+        autoFocus: createAutoFocusProp("Slider Thumb"),
         advanced: {
           type: "boolean",
           displayName: "Advanced",
@@ -3933,7 +4033,7 @@ function registerSliderThumb(loader, overrides) {
           mergeWithParent: true,
           hidden: (props) => !props.advanced
         }
-      }),
+      },
       trapsFocus: true
     },
     overrides
@@ -4056,6 +4156,7 @@ function registerSliderTrack(sliderThumbMeta, loader, overrides) {
         padding: 0
       },
       props: {
+        id: createIdProp("Slider Track"),
         children: {
           type: "slot",
           /**
@@ -4213,10 +4314,11 @@ function registerSlider(loader, overrides) {
       defaultStyles: {
         width: "300px"
       },
-      props: __spreadProps$4(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
-        "isDisabled",
-        "aria-label"
-      ])), getCommonSliderProps()), {
+      props: __spreadProps$4(__spreadValues$4({
+        id: createIdProp("Slider"),
+        isDisabled: createDisabledProp("Slider"),
+        "aria-label": createAriaLabelProp("Slider")
+      }, getCommonSliderProps()), {
         value: {
           type: "array",
           editOnly: true,
@@ -4325,10 +4427,11 @@ function registerSlider(loader, overrides) {
       defaultStyles: {
         width: "300px"
       },
-      props: __spreadProps$4(__spreadValues$4(__spreadValues$4({}, getCommonProps("slider", [
-        "isDisabled",
-        "aria-label"
-      ])), getCommonSliderProps()), {
+      props: __spreadProps$4(__spreadValues$4({
+        id: createIdProp("Slider"),
+        isDisabled: createDisabledProp("Slider"),
+        "aria-label": createAriaLabelProp("Slider")
+      }, getCommonSliderProps()), {
         children: {
           type: "slot",
           defaultValue: [
@@ -4482,13 +4585,13 @@ function registerSwitch(loader, overrides) {
         justifyContent: "flex-start",
         padding: 0
       },
-      props: __spreadProps$3(__spreadValues$3({}, getCommonProps("switch", [
-        "name",
-        "isDisabled",
-        "isReadOnly",
-        "autoFocus",
-        "aria-label"
-      ])), {
+      props: {
+        id: createIdProp("Switch"),
+        name: createNameProp(),
+        isDisabled: createDisabledProp("Switch"),
+        isReadOnly: createReadOnlyProp("Switch"),
+        autoFocus: createAutoFocusProp("Switch"),
+        "aria-label": createAriaLabelProp("Switch"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -4577,7 +4680,7 @@ function registerSwitch(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "isSelected", type: "boolean" }]
         }
-      }),
+      },
       states: {
         isSelected: {
           type: "writable",
@@ -4721,33 +4824,20 @@ function registerTextArea(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerTextArea",
       importName: "BaseTextArea",
       variants: variants$1,
-      props: __spreadProps$2(__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"
-      ])), {
+      props: __spreadValues$2({
+        // Keep id first in the editor
+        id: createIdProp("Text Area"),
+        // Non-event props (explicit to preserve ordering)
+        name: createNameProp(),
+        placeholder: createPlaceholderProp(),
+        value: createInitialValueProp("Text Area"),
+        autoFocus: createAutoFocusProp("Text Area"),
+        disabled: createDisabledProp("Text Area"),
+        readOnly: createReadOnlyProp("Text Area"),
+        required: createRequiredProp("Text Area"),
+        maxLength: createMaxLengthProp(),
+        minLength: createMinLengthProp(),
+        inputMode: createInputModeProp(),
         autoResize: {
           type: "boolean",
           displayName: "Auto resize",
@@ -4768,8 +4858,10 @@ function registerTextArea(loader, overrides) {
           defaultValueHint: "both",
           hidden: (props) => Boolean(props.autoResize),
           advanced: true
-        }
-      }),
+        },
+        // Accessibility
+        "aria-label": createAriaLabelProp("Text Area")
+      }, commonInputEventHandlerProps()),
       states: {
         value: __spreadValues$2({
           type: "writable",
@@ -4862,38 +4954,28 @@ function registerTextField(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerTextField",
       importName: "BaseTextField",
       variants,
-      // TODO: Support for validate prop
-      props: __spreadProps$1(__spreadValues$1({}, getCommonProps("Text Field", [
-        "name",
-        "isDisabled",
-        "isReadOnly",
-        "autoFocus",
-        "aria-label",
-        "isRequired",
-        "value",
-        "maxLength",
-        "minLength",
-        "pattern",
-        "type",
-        "inputMode",
-        "validationBehavior",
-        "autoComplete",
-        "onChange",
-        "onFocus",
-        "onBlur",
-        "onFocusChange",
-        "onKeyDown",
-        "onKeyUp",
-        "onCopy",
-        "onCut",
-        "onPaste",
-        "onCompositionStart",
-        "onCompositionEnd",
-        "onCompositionUpdate",
-        "onSelect",
-        "onBeforeInput",
-        "onInput"
-      ])), {
+      props: __spreadProps$1(__spreadValues$1({
+        // Keep id first in the editor
+        id: createIdProp("Text Field"),
+        // Non-event props (explicit to preserve ordering)
+        name: createNameProp(),
+        value: createInitialValueProp("Text Field"),
+        type: createInputTypeProp(),
+        autoFocus: createAutoFocusProp("Text Field"),
+        isDisabled: createDisabledProp("Text Field"),
+        isReadOnly: createReadOnlyProp("Text Field"),
+        isRequired: createRequiredProp("Text Field"),
+        maxLength: createMaxLengthProp(),
+        minLength: createMinLengthProp(),
+        inputMode: createInputModeProp(),
+        autoComplete: createAutoCompleteProp(),
+        pattern: createPatternProp(),
+        validationBehavior: createValidationBehaviorProp(),
+        // Accessibility
+        "aria-label": createAriaLabelProp("Text Field"),
+        // Non-common event handler in Text Field only
+        onFocusChange: createOnFocusChangeProp()
+      }, commonInputEventHandlerProps()), {
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -5045,7 +5127,7 @@ function ControlledBaseTooltip(props) {
     props
   });
   const ref = useRef(null);
-  const tooltipId = useId();
+  const tooltipId = useId(props.id);
   const state = useTooltipTriggerState(__spreadProps(__spreadValues({}, props), {
     isOpen: isCanvasAwareOpen,
     trigger: trigger === "focus" ? trigger : void 0
@@ -5114,6 +5196,7 @@ function registerTooltip(loader, overrides) {
       importName: "BaseTooltip",
       isAttachment: true,
       props: __spreadProps(__spreadValues({
+        id: createIdProp("Tooltip"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -5167,7 +5250,7 @@ function registerTooltip(loader, overrides) {
           options: ["focus", "focus and hover"],
           defaultValueHint: "focus and hover"
         }
-      }, getCommonOverlayProps("popover", {
+      }, getCommonOverlayProps("Tooltip", {
         placement: { defaultValueHint: "top" },
         offset: { defaultValueHint: 0 },
         containerPadding: { defaultValueHint: 12 },