@plasmicpkgs/react-aria 0.0.151 → 0.0.153

package/dist/react-aria.js

@@ -15,33 +15,33 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var registerComponent__default = /*#__PURE__*/_interopDefault(registerComponent);
 var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);
 
-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;
@@ -96,8 +96,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(
@@ -134,7 +134,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"
@@ -142,19 +142,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;
 };
@@ -184,6 +184,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",
@@ -242,263 +249,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: [
@@ -528,7 +555,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`,
@@ -536,14 +563,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
@@ -583,6 +610,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: {
@@ -668,33 +714,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;
@@ -718,14 +764,14 @@ const BaseButton = React__default.default.forwardRef(function BaseButtonInner(pr
       }
     );
   } 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 = reactAria.mergeProps(rest, {
       type,
       style: COMMON_STYLES,
       ref
     });
-    return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$q({}, buttonProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$c(
+    return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$r({}, buttonProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$c(
       children,
       {
         hovered: isHovered,
@@ -742,7 +788,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 = host.usePlasmicLink();
   const { linkProps, isPressed } = reactAria.useLink(props, ref);
   const { hoverProps, isHovered } = reactAria.useHover(props);
@@ -751,11 +797,13 @@ function LinkButton({
     href,
     className: props.className,
     style: COMMON_STYLES,
+    id: props.id,
+    "aria-label": props["aria-label"],
     ref
   });
   return /* @__PURE__ */ React__default.default.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,
@@ -800,11 +848,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,
@@ -848,7 +896,7 @@ function registerButton(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "event", type: "object" }]
         }
-      }),
+      },
       trapsFocus: true
     },
     overrides
@@ -967,33 +1015,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;
@@ -1015,7 +1063,7 @@ function BaseCheckbox(props) {
     plasmicUpdateVariant,
     setControlContextData,
     value
-  } = _a, rest = __objRest$m(_a, [
+  } = _a, rest = __objRest$n(_a, [
     "children",
     "plasmicUpdateVariant",
     "setControlContextData",
@@ -1032,7 +1080,7 @@ function BaseCheckbox(props) {
   });
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.Checkbox,
-    __spreadProps$l(__spreadValues$p({}, rest), {
+    __spreadProps$l(__spreadValues$q({}, rest), {
       value: registeredId,
       key: registeredId,
       style: COMMON_STYLES
@@ -1119,14 +1167,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,
@@ -1178,7 +1226,7 @@ function registerCheckbox(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "isSelected", type: "boolean" }]
         }
-      }),
+      },
       states: {
         isSelected: {
           type: "writable",
@@ -1194,42 +1242,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__default.default.createElement(
     reactAriaComponents.Text,
-    __spreadProps$k(__spreadValues$o({}, extractPlasmicDataProps(rest)), {
+    __spreadProps$k(__spreadValues$p(__spreadValues$p({}, rest), dataProps), {
       slot,
       className,
       style: COMMON_STYLES
@@ -1248,6 +1297,7 @@ function registerText(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerText",
       importName: "BaseText",
       props: {
+        id: createIdProp("Text"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -1269,28 +1319,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: {
@@ -1303,44 +1353,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__default.default.createElement(
     reactAriaComponents.Label,
-    __spreadProps$i(__spreadValues$m({}, extractPlasmicDataProps(rest)), {
+    __spreadProps$i(__spreadValues$n({}, dataProps), {
+      id,
       className,
-      style: COMMON_STYLES
+      style: COMMON_STYLES,
+      "aria-label": ariaLabel
     }),
     children
   );
@@ -1359,6 +1412,8 @@ function registerLabel(loader, overrides) {
         cursor: "pointer"
       },
       props: {
+        id: createIdProp("Label"),
+        "aria-label": createAriaLabelProp("Label"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -1374,33 +1429,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;
@@ -1410,7 +1465,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 = React.useCallback(
     (ids) => {
       setControlContextData == null ? void 0 : setControlContextData({
@@ -1422,7 +1477,7 @@ function BaseCheckboxGroup(props) {
   const idManager = useIdManager(updateIds);
   return (
     // PlasmicCheckboxGroupContext is used by BaseCheckbox
-    /* @__PURE__ */ React__default.default.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$h(__spreadValues$l({}, rest), { idManager }) }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadProps$h(__spreadValues$l({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$a(
+    /* @__PURE__ */ React__default.default.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$h(__spreadValues$m({}, rest), { idManager }) }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadProps$h(__spreadValues$m({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$a(
       children,
       {
         disabled: isDisabled,
@@ -1443,13 +1498,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: [
@@ -1543,7 +1598,7 @@ function registerCheckboxGroup(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "value", type: "object" }]
         }
-      }),
+      },
       states: {
         value: {
           type: "writable",
@@ -1558,33 +1613,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;
@@ -1612,7 +1667,7 @@ function BaseInput_(props, ref) {
     autoComplete,
     value,
     className
-  } = _a, restProps = __objRest$i(_a, [
+  } = _a, restProps = __objRest$j(_a, [
     "plasmicUpdateVariant",
     "setControlContextData",
     "autoComplete",
@@ -1659,7 +1714,7 @@ function BaseInput_(props, ref) {
   }, [isFocused, isFocusVisible, isHovered, isDisabled, plasmicUpdateVariant]);
   return /* @__PURE__ */ React__default.default.createElement(
     "input",
-    __spreadProps$g(__spreadValues$k({}, mergedProps), {
+    __spreadProps$g(__spreadValues$l({}, mergedProps), {
       ref: inputRef,
       "data-focused": isFocused || void 0,
       "data-disabled": isDisabled || void 0,
@@ -1688,38 +1743,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",
@@ -1736,33 +1781,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;
@@ -1779,19 +1824,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__default.default.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__default.default.createElement(
     reactAriaComponents.ListBoxItem,
-    __spreadProps$f(__spreadValues$j({
+    __spreadProps$f(__spreadValues$k({
       key: registeredId,
       id: registeredId
     }, rest), {
@@ -1899,42 +1941,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__default.default.useContext(PlasmicListBoxContext);
   const isStandalone = !contextProps;
-  const section = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Section, __spreadProps$e(__spreadValues$i({}, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Header, null, header), items);
+  const section = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Section, __spreadProps$e(__spreadValues$j({}, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Header, null, header), items);
   if (isStandalone) {
     return (
       // BaseListbox should give section a listbox context (that it can't be used without)
@@ -1959,6 +2001,7 @@ function registerSection(loader, overrides) {
         padding: "10px"
       },
       props: {
+        "aria-label": createAriaLabelProp("Section"),
         header: {
           type: "slot",
           mergeWithParent: true,
@@ -1980,30 +2023,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;
@@ -2030,7 +2073,7 @@ function BaseListBox(props) {
     selectedKeys,
     defaultSelectedKeys,
     plasmicUpdateVariant
-  } = _a, rest = __objRest$f(_a, [
+  } = _a, rest = __objRest$g(_a, [
     "setControlContextData",
     "children",
     "className",
@@ -2061,7 +2104,7 @@ function BaseListBox(props) {
   );
   const listbox = /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.ListBox,
-    __spreadValues$h(__spreadValues$h({
+    __spreadValues$i(__spreadValues$i({
       selectedKeys: normalizeSelectedKeys(selectedKeys),
       defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys),
       className: classNameProp,
@@ -2155,6 +2198,8 @@ function registerListBox(loader, overrides) {
         borderColor: "black"
       },
       props: {
+        id: createIdProp("List Box"),
+        "aria-label": createAriaLabelProp("List Box"),
         children: {
           type: "slot",
           displayName: "List Items",
@@ -2232,7 +2277,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",
@@ -2251,30 +2296,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;
@@ -2284,7 +2329,7 @@ function BasePopover(props) {
     resetClassName,
     setControlContextData,
     matchTriggerWidth
-  } = _a, restProps = __objRest$e(_a, [
+  } = _a, restProps = __objRest$f(_a, [
     "resetClassName",
     "setControlContextData",
     "matchTriggerWidth"
@@ -2310,7 +2355,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"]);
   React.useEffect(() => {
     setControlContextData == null ? void 0 : setControlContextData({
       canMatchTriggerWidth: hasTrigger
@@ -2318,8 +2363,8 @@ function BasePopover(props) {
   }, [hasTrigger, setControlContextData]);
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, isStandalone && /* @__PURE__ */ React__default.default.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.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
   ));
@@ -2341,7 +2386,8 @@ function registerPopover(loader, overrides) {
         width: "300px",
         backgroundColor: "#FDE3C3"
       },
-      props: __spreadValues$g({
+      props: __spreadValues$h({
+        id: createIdProp("Popover"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -2386,7 +2432,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 },
@@ -2400,33 +2446,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;
@@ -2449,7 +2495,7 @@ function BaseComboBox(props) {
     plasmicNotifyAutoOpenedContent,
     className,
     isOpen: _isOpen
-  } = _a, rest = __objRest$d(_a, [
+  } = _a, rest = __objRest$e(_a, [
     "children",
     "setControlContextData",
     "plasmicUpdateVariant",
@@ -2476,7 +2522,7 @@ function BaseComboBox(props) {
     [setControlContextData]
   );
   const idManager = useIdManager(updateIds);
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadProps$d(__spreadValues$f({ className: classNameProp }, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadProps$d(__spreadValues$g({ className: classNameProp }, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React__default.default.createElement(
     PlasmicListBoxContext.Provider,
     {
       value: {
@@ -2499,11 +2545,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,
@@ -2610,7 +2656,7 @@ function registerComboBox(loader) {
           }
         ]
       }
-    }),
+    },
     states: {
       selectedValue: {
         type: "writable",
@@ -2629,12 +2675,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 = host.usePlasmicCanvasContext();
   if (canvasContext) {
-    return /* @__PURE__ */ React__default.default.createElement("div", { className, style: COMMON_STYLES }, children);
+    return /* @__PURE__ */ React__default.default.createElement("div", { id: rest.id, className, style: COMMON_STYLES }, children);
   } else {
-    return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Dialog, { className, style: COMMON_STYLES }, children);
+    return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Dialog, __spreadProps$c(__spreadValues$f({}, rest), { className, style: COMMON_STYLES }), children);
   }
 }
 const DIALOG_COMPONENT_NAME = makeComponentName("dialog");
@@ -2648,6 +2726,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
@@ -2660,8 +2740,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;
@@ -2677,7 +2757,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)
@@ -2700,7 +2780,8 @@ const BaseModal = React.forwardRef(
       resetClassName,
       setControlContextData,
       isDismissable,
-      defaultOpen
+      defaultOpen,
+      id
     } = _a, rest = __objRest$c(_a, [
       "children",
       "modalOverlayClass",
@@ -2709,7 +2790,8 @@ const BaseModal = React.forwardRef(
       "resetClassName",
       "setControlContextData",
       "isDismissable",
-      "defaultOpen"
+      "defaultOpen",
+      "id"
     ]);
     const canvasCtx = host.usePlasmicCanvasContext();
     const isEditMode = canvasCtx && canvasCtx.interactive === false;
@@ -2742,10 +2824,17 @@ const BaseModal = React.forwardRef(
     }));
     return /* @__PURE__ */ React__default.default.createElement(
       reactAriaComponents.ModalOverlay,
-      __spreadProps$c(__spreadValues$e({}, mergedProps), {
+      __spreadProps$b(__spreadValues$e({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
-      /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Modal, { className }, children)
+      /* @__PURE__ */ React__default.default.createElement(
+        reactAriaComponents.Modal,
+        {
+          className,
+          id
+        },
+        children
+      )
     );
   }
 );
@@ -2817,6 +2906,7 @@ function registerModal(loader, overrides) {
         }
       },
       props: {
+        id: createIdProp("Modal"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -2867,8 +2957,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;
@@ -2884,7 +2974,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)
@@ -2897,13 +2987,14 @@ var __objRest$b = (source, exclude) => {
     }
   return target;
 };
-function TriggerWrapper$1({ children, className }) {
+function TriggerWrapper$1({ children, className, id }) {
   const ref = React__default.default.useRef(null);
   const { buttonProps } = reactAria.useButton({}, ref);
   const mergedProps = reactAria.mergeProps(buttonProps, {
     ref,
     // We expose className to allow user control over the wrapper div's styling.
     className,
+    id,
     style: COMMON_STYLES
   });
   return /* @__PURE__ */ React__default.default.createElement("div", __spreadValues$d({}, mergedProps), children);
@@ -2915,12 +3006,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__default.default.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.DialogTrigger, __spreadValues$d({}, mergedProps), trigger && /* @__PURE__ */ React__default.default.createElement(TriggerWrapper$1, { className }, trigger), dialog))
+    /* @__PURE__ */ React__default.default.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.DialogTrigger, __spreadValues$d({}, mergedProps), trigger && /* @__PURE__ */ React__default.default.createElement(TriggerWrapper$1, { className, id: props.id }, trigger), dialog))
   );
 }
 function registerDialogTrigger(loader, overrides) {
@@ -2933,6 +3024,7 @@ function registerDialogTrigger(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerDialogTrigger",
       importName: "BaseDialogTrigger",
       props: {
+        id: createIdProp("Dialog Trigger"),
         trigger: {
           type: "slot",
           mergeWithParent: true,
@@ -2992,8 +3084,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;
@@ -3009,7 +3101,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)
@@ -3024,7 +3116,7 @@ var __objRest$a = (source, exclude) => {
 };
 function BaseHeading(_a) {
   var _b = _a, { children } = _b, rest = __objRest$a(_b, ["children"]);
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Heading, __spreadProps$a(__spreadValues$c({}, rest), { style: COMMON_STYLES }), children);
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Heading, __spreadProps$9(__spreadValues$c({}, rest), { style: COMMON_STYLES }), children);
 }
 const HEADING_COMPONENT_NAME = makeComponentName("heading");
 function registerHeading(loader, overrides) {
@@ -3042,6 +3134,7 @@ function registerHeading(loader, overrides) {
         marginBottom: "10px"
       },
       props: {
+        id: createIdProp("Heading"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -3090,7 +3183,8 @@ const { variants: variants$9, withObservedValues: withObservedValues$8 } = pickA
 function BaseOverlayArrow({
   children,
   plasmicUpdateVariant,
-  className
+  className,
+  id
 }) {
   const popoverContext = React__default.default.useContext(reactAriaComponents.PopoverContext);
   const tooltipContext = React__default.default.useContext(reactAriaComponents.TooltipTriggerStateContext);
@@ -3099,6 +3193,7 @@ function BaseOverlayArrow({
     reactAriaComponents.OverlayArrow,
     {
       className,
+      id,
       style: __spreadValues$b({ lineHeight: "0" }, COMMON_STYLES)
     },
     ({ placement }) => withObservedValues$8(
@@ -3129,6 +3224,7 @@ function registerOverlayArrow(loader, overrides) {
       styleSections: ["visibility"],
       variants: variants$9,
       props: {
+        id: createIdProp("Overlay Arrow"),
         children: {
           type: "slot",
           defaultValue: arrowDown
@@ -3140,8 +3236,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;
@@ -3157,7 +3253,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)
@@ -3205,7 +3301,7 @@ function BaseRadio(props) {
   });
   const radio = /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.Radio,
-    __spreadProps$9(__spreadValues$a({}, rest), {
+    __spreadProps$8(__spreadValues$a({}, rest), {
       value: registeredId != null ? registeredId : "",
       key: registeredId,
       style: COMMON_STYLES
@@ -3279,11 +3375,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,
@@ -3299,7 +3395,7 @@ function registerRadio(loader, overrides) {
             return true;
           }
         }
-      }),
+      },
       trapsFocus: true
     },
     overrides
@@ -3307,8 +3403,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;
@@ -3324,7 +3420,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)
@@ -3352,7 +3448,7 @@ function BaseRadioGroup(props) {
   const idManager = useIdManager(updateIds);
   return (
     // PlasmicRadioGroupContext is used by BaseRadio
-    /* @__PURE__ */ React__default.default.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$8(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, __spreadProps$8(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$6(
+    /* @__PURE__ */ React__default.default.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$7(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, __spreadProps$7(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$6(
       children,
       {
         disabled: isDisabled,
@@ -3378,13 +3474,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: [
@@ -3470,7 +3566,7 @@ function registerRadioGroup(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "value", type: "string" }]
         }
-      }),
+      },
       states: {
         value: {
           type: "writable",
@@ -3486,8 +3582,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;
@@ -3503,7 +3597,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__default.default.useContext(reactAriaComponents.SelectStateContext)) != null ? _a : {};
@@ -3574,7 +3667,8 @@ function BaseSelect(props) {
       style: COMMON_STYLES,
       name,
       disabledKeys,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      id: props.id
     }, extractPlasmicDataProps(props)),
     /* @__PURE__ */ React__default.default.createElement(
       SelectAutoOpen,
@@ -3630,12 +3724,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,
@@ -3746,7 +3840,7 @@ function registerSelect(loader) {
           }
         ]
       }
-    }),
+    },
     states: {
       selectedValue: {
         type: "writable",
@@ -3827,6 +3921,7 @@ function registerSliderOutput(loader, overrides) {
       importName: "BaseSliderOutput",
       variants: variants$6,
       props: {
+        id: createIdProp("Slider Output"),
         children: {
           mergeWithParent: true,
           type: "slot"
@@ -3890,17 +3985,23 @@ function BaseSliderThumb(_a) {
     "plasmicUpdateVariant"
   ]);
   const isStandalone = !React__default.default.useContext(reactAriaComponents.SliderTrackContext);
-  const thumb = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderThumb, __spreadProps$5(__spreadValues$6({}, rest), { style: COMMON_STYLES }), ({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) => withObservedValues$4(
-    /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, advanced ? children : void 0),
-    {
-      dragging: isDragging,
-      hovered: isHovered,
-      focused: isFocused,
-      focusVisible: isFocusVisible,
-      disabled: isDisabled
-    },
-    plasmicUpdateVariant
-  ));
+  const thumb = /* @__PURE__ */ React__default.default.createElement(
+    reactAriaComponents.SliderThumb,
+    __spreadProps$5(__spreadValues$6({}, rest), {
+      style: COMMON_STYLES
+    }),
+    ({ isDragging, isHovered, isFocused, isFocusVisible, isDisabled }) => withObservedValues$4(
+      /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, advanced ? children : void 0),
+      {
+        dragging: isDragging,
+        hovered: isHovered,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: isDisabled
+      },
+      plasmicUpdateVariant
+    )
+  );
   if (isStandalone) {
     return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Slider, { style: { height: "100%", width: "100%" } }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SliderTrack, null, thumb));
   }
@@ -3926,11 +4027,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",
@@ -3941,7 +4041,7 @@ function registerSliderThumb(loader, overrides) {
           mergeWithParent: true,
           hidden: (props) => !props.advanced
         }
-      }),
+      },
       trapsFocus: true
     },
     overrides
@@ -4064,6 +4164,7 @@ function registerSliderTrack(sliderThumbMeta, loader, overrides) {
         padding: 0
       },
       props: {
+        id: createIdProp("Slider Track"),
         children: {
           type: "slot",
           /**
@@ -4221,10 +4322,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,
@@ -4333,10 +4435,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: [
@@ -4490,13 +4593,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,
@@ -4585,7 +4688,7 @@ function registerSwitch(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "isSelected", type: "boolean" }]
         }
-      }),
+      },
       states: {
         isSelected: {
           type: "writable",
@@ -4729,33 +4832,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",
@@ -4776,8 +4866,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",
@@ -4870,38 +4962,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,
@@ -5053,7 +5135,7 @@ function ControlledBaseTooltip(props) {
     props
   });
   const ref = React.useRef(null);
-  const tooltipId = reactAria.useId();
+  const tooltipId = reactAria.useId(props.id);
   const state = reactStately.useTooltipTriggerState(__spreadProps(__spreadValues({}, props), {
     isOpen: isCanvasAwareOpen,
     trigger: trigger === "focus" ? trigger : void 0
@@ -5122,6 +5204,7 @@ function registerTooltip(loader, overrides) {
       importName: "BaseTooltip",
       isAttachment: true,
       props: __spreadProps(__spreadValues({
+        id: createIdProp("Tooltip"),
         children: {
           type: "slot",
           mergeWithParent: true,
@@ -5175,7 +5258,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 },