@plasmicpkgs/react-aria 0.0.13 → 0.0.15

package/dist/react-aria.esm.js

@@ -1,9 +1,9 @@
-import React, { useEffect } from 'react';
-import { Button, Checkbox, Text, FieldError, Label, CheckboxGroup, ComboBox, ComboBoxStateContext, Form, Input, ListBoxItem, ListBox, PopoverContext, Popover, Radio, RadioGroup, Header, Section, Collection, SelectValue, Select, Switch } from 'react-aria-components';
+import React, { useEffect, Component } from 'react';
+import { Button, Checkbox, Text, FieldError, Label, CheckboxGroup, ComboBox, ComboBoxStateContext, Form, Input, ListBoxItem, ListBox, PopoverContext, Popover, Radio, RadioGroup, Header, Section, Collection, SelectValue, Select, Switch, TextArea, TextField } from 'react-aria-components';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import { useFilter } from '@react-aria/i18n';
 import { mergeProps } from '@react-aria/utils';
-import { usePlasmicCanvasContext, DataProvider } from '@plasmicapp/host';
+import { usePlasmicCanvasContext } from '@plasmicapp/host';
 
 function getCommonInputProps(fieldName, fields) {
   const commonInputProps = {
@@ -55,25 +55,25 @@ function getCommonInputProps(fieldName, fields) {
   return filteredProps;
 }
 
-var __defProp$i = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
+var __defProp$k = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (a, b) => {
   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$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$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
 function ValueObserver({ value, onChange }) {
   useEffect(() => {
     onChange(value);
@@ -82,8 +82,8 @@ function ValueObserver({ value, onChange }) {
 }
 function registerComponentHelper(loader, component, meta, overrides) {
   if (overrides) {
-    meta = __spreadProps$a(__spreadValues$i(__spreadValues$i({}, meta), overrides), {
-      props: __spreadValues$i(__spreadValues$i({}, meta.props), overrides.props)
+    meta = __spreadProps$b(__spreadValues$k(__spreadValues$k({}, meta), overrides), {
+      props: __spreadValues$k(__spreadValues$k({}, meta.props), overrides.props)
     });
     if (overrides.parentComponentName) {
       meta.name = makeChildComponentName(
@@ -121,41 +121,41 @@ function withoutNils(array) {
   return array.filter((x) => x != null);
 }
 
-var __defProp$h = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-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$j = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = 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) => {
   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$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$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-var __objRest$9 = (source, exclude) => {
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$h.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$h)
-    for (var prop of __getOwnPropSymbols$h(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.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 BaseButton(props) {
-  const _a = props, { submitsForm, onFocusVisibleChange, resetsForm, children } = _a, rest = __objRest$9(_a, ["submitsForm", "onFocusVisibleChange", "resetsForm", "children"]);
+  const _a = props, { submitsForm, onFocusVisibleChange, resetsForm, children } = _a, rest = __objRest$a(_a, ["submitsForm", "onFocusVisibleChange", "resetsForm", "children"]);
   const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-  return /* @__PURE__ */ React.createElement(Button, __spreadValues$h({ type }, rest), ({ isFocusVisible }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Button, __spreadValues$j({ type }, rest), ({ isFocusVisible }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     ValueObserver,
     {
       value: isFocusVisible,
@@ -169,10 +169,10 @@ function registerButton(loader, overrides) {
     BaseButton,
     {
       name: makeComponentName("button"),
-      displayName: "BaseButton",
-      importPath: "@plasmicpkgs/react-aria/registerButton",
+      displayName: "Aria Button",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
-      props: __spreadProps$9(__spreadValues$h({}, getCommonInputProps("button", [
+      props: __spreadProps$a(__spreadValues$j({}, getCommonInputProps("button", [
         "isDisabled",
         "aria-label",
         "children"
@@ -242,46 +242,56 @@ function registerButton(loader, overrides) {
   );
 }
 
-var __defProp$g = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$g = (a, b) => {
+var __defProp$i = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = 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) => {
   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$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 __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$8 = (source, exclude) => {
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$g.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$g)
-    for (var prop of __getOwnPropSymbols$g(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.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;
 };
 function BaseCheckbox(props) {
-  const _a = props, { children, onPressChange, onFocusVisibleChange } = _a, rest = __objRest$8(_a, ["children", "onPressChange", "onFocusVisibleChange"]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadValues$g({}, rest), ({ isFocusVisible, isPressed }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  const _a = props, {
+    children,
+    onPressChange,
+    onFocusVisibleChange,
+    onInvalidChange
+  } = _a, rest = __objRest$9(_a, [
+    "children",
+    "onPressChange",
+    "onFocusVisibleChange",
+    "onInvalidChange"
+  ]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadValues$i({}, rest), ({ isFocusVisible, isPressed, isInvalid }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     ValueObserver,
     {
       value: isFocusVisible,
       onChange: onFocusVisibleChange
     }
-  ), /* @__PURE__ */ React.createElement(ValueObserver, { value: isPressed, onChange: onPressChange }), children)));
+  ), /* @__PURE__ */ React.createElement(ValueObserver, { value: isPressed, onChange: onPressChange }), /* @__PURE__ */ React.createElement(ValueObserver, { value: isInvalid, onChange: onInvalidChange }), children)));
 }
 function registerCheckbox(loader, overrides) {
   registerComponentHelper(
@@ -289,10 +299,10 @@ function registerCheckbox(loader, overrides) {
     BaseCheckbox,
     {
       name: makeComponentName("checkbox"),
-      displayName: "BaseCheckbox",
-      importPath: "@plasmicpkgs/react-aria/registerCheckbox",
+      displayName: "Aria Checkbox",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
-      props: __spreadProps$8(__spreadValues$g({}, getCommonInputProps("checkbox", [
+      props: __spreadProps$9(__spreadValues$i({}, getCommonInputProps("checkbox", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -349,6 +359,10 @@ function registerCheckbox(loader, overrides) {
         onFocusVisibleChange: {
           type: "eventHandler",
           argTypes: [{ name: "isFocusVisible", type: "boolean" }]
+        },
+        onInvalidChange: {
+          type: "eventHandler",
+          argTypes: [{ name: "isInvalid", type: "boolean" }]
         }
       }),
       states: {
@@ -373,6 +387,11 @@ function registerCheckbox(loader, overrides) {
           onChangeProp: "onFocusChange",
           variableType: "boolean"
         },
+        isInvalid: {
+          type: "readonly",
+          onChangeProp: "onInvalidChange",
+          variableType: "boolean"
+        },
         isFocusVisible: {
           type: "readonly",
           onChangeProp: "onFocusVisibleChange",
@@ -385,37 +404,37 @@ function registerCheckbox(loader, overrides) {
   );
 }
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
+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$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$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$7 = (source, exclude) => {
+var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$f.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$f)
-    for (var prop of __getOwnPropSymbols$f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
+  if (source != null && __getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BaseText(_a) {
-  var _b = _a, { children } = _b, rest = __objRest$7(_b, ["children"]);
-  return /* @__PURE__ */ React.createElement(Text, __spreadValues$f({}, rest), children);
+  var _b = _a, { children } = _b, rest = __objRest$8(_b, ["children"]);
+  return /* @__PURE__ */ React.createElement(Text, __spreadValues$h({}, rest), children);
 }
 function registerText(loader, overrides) {
   registerComponentHelper(
@@ -423,8 +442,8 @@ function registerText(loader, overrides) {
     BaseText,
     {
       name: makeComponentName("text"),
-      displayName: "BaseText",
-      importPath: "@plasmicpkgs/react-aria/registerText",
+      displayName: "Aria Text",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerText",
       importName: "BaseText",
       props: {
         children: {
@@ -440,58 +459,58 @@ function registerText(loader, overrides) {
   );
 }
 
-var __defProp$e = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
+var __defProp$g = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$g = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
+    if (__hasOwnProp$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$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 function registerDescription(loader, overrides) {
-  registerText(loader, __spreadProps$7(__spreadValues$e({}, overrides), {
-    displayName: "BaseDescription",
+  registerText(loader, __spreadProps$8(__spreadValues$g({}, overrides), {
+    displayName: "Aria Description",
     props: {
       slot: { type: "string", hidden: () => true, defaultValue: "description" }
     }
   }));
 }
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
+var __defProp$f = Object.defineProperty;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$f = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$f.call(b, prop))
+      __defNormalProp$f(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$f(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$6 = (source, exclude) => {
+var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
+  if (source != null && __getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -508,7 +527,7 @@ function BaseFieldError(_a) {
     tooShort,
     typeMismatch,
     valueMissing
-  } = _b, rest = __objRest$6(_b, [
+  } = _b, rest = __objRest$7(_b, [
     "badInput",
     "customError",
     "patternMismatch",
@@ -520,7 +539,7 @@ function BaseFieldError(_a) {
     "typeMismatch",
     "valueMissing"
   ]);
-  return /* @__PURE__ */ React.createElement(FieldError, __spreadValues$d({}, rest), ({ validationDetails, validationErrors }) => {
+  return /* @__PURE__ */ React.createElement(FieldError, __spreadValues$f({}, rest), ({ validationDetails, validationErrors }) => {
     if (validationDetails.badInput && badInput)
       return badInput;
     if (validationDetails.customError && customError)
@@ -560,8 +579,8 @@ function registerFieldError(loader, overrides) {
     BaseFieldError,
     {
       name: makeComponentName("fielderror"),
-      displayName: "BaseFieldError",
-      importPath: "@plasmicpkgs/react-aria/registerFieldError",
+      displayName: "Aria Field Error",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerFieldError",
       importName: "BaseFieldError",
       actions: [
         {
@@ -624,8 +643,8 @@ function registerLabel(loader, overrides) {
     BaseLabel,
     {
       name: makeComponentName("label"),
-      displayName: "BaseLabel",
-      importPath: "@plasmicpkgs/react-aria/registerLabel",
+      displayName: "Aria Label",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerLabel",
       importName: "BaseLabel",
       props: {
         children: {
@@ -638,37 +657,37 @@ function registerLabel(loader, overrides) {
   );
 }
 
-var __defProp$c = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$e = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$e.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 const BaseCheckboxGroup = CheckboxGroup;
-const componentName$1 = makeComponentName("checkboxGroup");
+const componentName$2 = makeComponentName("checkboxGroup");
 function registerCheckboxGroup(loader, overrides) {
   registerComponentHelper(
     loader,
     BaseCheckboxGroup,
     {
-      name: componentName$1,
-      displayName: "BaseCheckboxGroup",
-      importPath: "@plasmicpkgs/react-aria/registerCheckboxGroup",
+      name: componentName$2,
+      displayName: "Aria Checkbox Group",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
-      props: __spreadProps$6(__spreadValues$c({}, getCommonInputProps("checkbox group", [
+      props: __spreadProps$7(__spreadValues$e({}, getCommonInputProps("checkbox group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -682,18 +701,6 @@ function registerCheckboxGroup(loader, overrides) {
           uncontrolledProp: "defaultValue",
           description: "The current value"
         },
-        options: {
-          type: "array",
-          description: "The options in the radio group",
-          itemType: {
-            type: "object",
-            nameFunc: (item) => item.label,
-            fields: {
-              label: "string",
-              value: "string"
-            }
-          }
-        },
         isInvalid: {
           displayName: "Invalid",
           type: "boolean",
@@ -725,7 +732,7 @@ function registerCheckboxGroup(loader, overrides) {
   );
   const thisName = makeChildComponentName(
     overrides == null ? void 0 : overrides.parentComponentName,
-    componentName$1
+    componentName$2
   );
   registerFieldError(loader, { parentComponentName: thisName });
   registerCheckbox(loader, { parentComponentName: thisName });
@@ -892,25 +899,25 @@ function makeValuePropType() {
   return type;
 }
 
-var __defProp$b = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 function BaseComboBox(props) {
   const {
     value,
@@ -939,11 +946,11 @@ function BaseComboBox(props) {
     if (!options) {
       return options;
     }
-    const filterOptions = (options2) => {
+    const filterOptions = (opts) => {
       return withoutNils(
-        options2.map((op) => {
+        opts.map((op) => {
           if (op.type === "section") {
-            return __spreadProps$5(__spreadValues$b({}, op), {
+            return __spreadProps$6(__spreadValues$d({}, op), {
               items: op.items ? filterOptions(op.items) : void 0
             });
           } else {
@@ -1027,7 +1034,7 @@ function BaseComboBox(props) {
   ]);
   return /* @__PURE__ */ React.createElement(
     ComboBox,
-    __spreadValues$b({
+    __spreadValues$d({
       selectedKey: value,
       onSelectionChange,
       isDisabled,
@@ -1092,8 +1099,8 @@ function registerComboBox(loader) {
   const rootName = makeComponentName("combobox");
   registerComponentHelper(loader, BaseComboBox, {
     name: rootName,
-    displayName: "BaseComboBox",
-    importPath: "@plasmicpkgs/react-aria/registerComboBox",
+    displayName: "Aria ComboBox",
+    importPath: "@plasmicpkgs/react-aria/skinny/registerComboBox",
     importName: "BaseComboBox",
     props: {
       options: makeOptionsPropType(),
@@ -1166,39 +1173,39 @@ function registerComboBox(loader) {
   });
 }
 
-var __defProp$a = Object.defineProperty;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+var __defProp$c = Object.defineProperty;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$5 = (source, exclude) => {
+var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
+  if (source != null && __getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BaseForm(props) {
-  const _a = props, { onSubmit, children } = _a, rest = __objRest$5(_a, ["onSubmit", "children"]);
+  const _a = props, { onSubmit, children } = _a, rest = __objRest$6(_a, ["onSubmit", "children"]);
   return /* @__PURE__ */ React.createElement(
     Form,
-    __spreadValues$a({
+    __spreadValues$c({
       onSubmit: (e) => {
         e.preventDefault();
         const formData = new FormData(e.currentTarget);
@@ -1226,8 +1233,8 @@ function registerForm(loader, overrides) {
     BaseForm,
     {
       name: makeComponentName("form"),
-      displayName: "BaseForm",
-      importPath: "@plasmicpkgs/react-aria/registerForm",
+      displayName: "Aria Form",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerForm",
       importName: "BaseForm",
       props: {
         children: {
@@ -1248,25 +1255,24 @@ function registerForm(loader, overrides) {
   );
 }
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+var __defProp$b = Object.defineProperty;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
 function BaseInput(props) {
-  const contextProps = React.useContext(PlasmicInputContext);
-  return /* @__PURE__ */ React.createElement(Input, __spreadValues$9({}, mergeProps(contextProps, props)));
+  return /* @__PURE__ */ React.createElement(Input, __spreadValues$b({}, props));
 }
 function registerInput(loader, overrides) {
   registerComponentHelper(
@@ -1274,55 +1280,33 @@ function registerInput(loader, overrides) {
     BaseInput,
     {
       name: makeComponentName("input"),
-      displayName: "BaseInput",
-      importPath: "@plasmicpkgs/react-aria/registerInput",
+      displayName: "Aria Input",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
       importName: "BaseInput",
       props: {
-        className: {
-          type: "class",
-          displayName: "Additional states",
-          selectors: [
-            {
-              selector: ":self[data-hovered]",
-              label: "Hovered"
-            },
-            {
-              selector: ":self[data-focused]",
-              label: "Focused"
-            },
-            {
-              selector: ":self[data-focus-visible]",
-              label: "Focused by keyboard"
-            },
-            {
-              selector: ":self[data-disabled]",
-              label: "Disabled"
-            },
-            {
-              selector: ":self::placeholder",
-              label: "Placeholder"
-            }
-          ]
+        placeholder: {
+          type: "string"
         }
-      }
+      },
+      trapsFocus: true
     },
     overrides
   );
 }
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$a = Object.defineProperty;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
@@ -1330,7 +1314,7 @@ function BaseListBoxItem(props) {
   var _a;
   const contextProps = React.useContext(PlasmicItemContext);
   const mergedProps = mergeProps(contextProps, props);
-  return /* @__PURE__ */ React.createElement(ListBoxItem, __spreadValues$8({ id: (_a = mergedProps.key) != null ? _a : void 0 }, mergedProps));
+  return /* @__PURE__ */ React.createElement(ListBoxItem, __spreadValues$a({ id: (_a = mergedProps.key) != null ? _a : void 0 }, mergedProps));
 }
 function registerListBoxItem(loader, overrides) {
   registerComponentHelper(
@@ -1338,8 +1322,8 @@ function registerListBoxItem(loader, overrides) {
     BaseListBoxItem,
     {
       name: makeComponentName("item"),
-      displayName: "BaseListBoxItem",
-      importPath: "@plasmicpkgs/react-aria/registerListBoxItem",
+      displayName: "Aria ListBoxItem",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerListBoxItem",
       importName: "BaseListBoxItem",
       props: {
         className: {
@@ -1366,33 +1350,33 @@ function registerListBoxItem(loader, overrides) {
   );
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-var __objRest$4 = (source, exclude) => {
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
+  if (source != null && __getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1441,21 +1425,21 @@ function BaseListBox(props) {
     renderItem,
     renderSection,
     getItemType
-  } = _a, rest = __objRest$4(_a, [
+  } = _a, rest = __objRest$5(_a, [
     "makeItemProps",
     "makeSectionProps",
     "renderItem",
     "renderSection",
     "getItemType"
   ]);
-  return /* @__PURE__ */ React.createElement(ListBox, __spreadValues$7({}, mergeProps(contextProps, rest)), (item) => {
+  return /* @__PURE__ */ React.createElement(ListBox, __spreadValues$9({}, mergeProps(contextProps, rest)), (item) => {
     if ((getItemType == null ? void 0 : getItemType(item)) === "section") {
       const sectionProps = makeSectionProps == null ? void 0 : makeSectionProps(item);
       return /* @__PURE__ */ React.createElement(
         PlasmicSectionContext.Provider,
         {
           key: sectionProps == null ? void 0 : sectionProps.key,
-          value: __spreadProps$4(__spreadValues$7({}, sectionProps), { makeItemProps, renderItem })
+          value: __spreadProps$5(__spreadValues$9({}, sectionProps), { makeItemProps, renderItem })
         },
         renderSection == null ? void 0 : renderSection(item)
       );
@@ -1471,8 +1455,8 @@ function registerListBox(loader, overrides) {
     BaseListBox,
     {
       name: makeComponentName("listbox"),
-      displayName: "BaseListBox",
-      importPath: "@plasmicpkgs/react-aria/registerListBox",
+      displayName: "Aria ListBox",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerListBox",
       importName: "BaseListBox",
       props: {
         renderItem: {
@@ -1508,57 +1492,57 @@ function registerListBox(loader, overrides) {
   });
 }
 
-var __defProp$6 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-var __objRest$3 = (source, exclude) => {
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
+  if (source != null && __getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BasePopover(props) {
-  const _a = props, restProps = __objRest$3(_a, ["resetClassName"]);
+  const _a = props, { resetClassName } = _a, restProps = __objRest$4(_a, ["resetClassName"]);
   const isStandalone = !React.useContext(PopoverContext);
   const contextProps = React.useContext(PlasmicPopoverContext);
   const canvas = usePlasmicCanvasContext();
   const mergedProps = mergeProps(contextProps, restProps, {
-    className: `${props.resetClassName}`
+    className: `${resetClassName}`
   });
   if (isStandalone) {
     const triggerRef = React.useRef(null);
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(
       Popover,
-      __spreadProps$3(__spreadValues$6({}, mergedProps), {
+      __spreadProps$4(__spreadValues$8({}, mergedProps), {
         triggerRef,
         isNonModal: true,
         isOpen: true
       })
     ));
   } else {
-    return /* @__PURE__ */ React.createElement(Popover, __spreadProps$3(__spreadValues$6({}, mergedProps), { isNonModal: !!canvas }));
+    return /* @__PURE__ */ React.createElement(Popover, __spreadProps$4(__spreadValues$8({}, mergedProps), { isNonModal: !!canvas }));
   }
 }
 function registerPopover(loader, overrides) {
@@ -1567,8 +1551,8 @@ function registerPopover(loader, overrides) {
     BasePopover,
     {
       name: "plasmic-react-aria-popover",
-      displayName: "BasePopover",
-      importPath: "@plasmicpkgs/react-aria/registerPopover",
+      displayName: "Aria Popover",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerPopover",
       importName: "BasePopover",
       props: {
         children: {
@@ -1616,33 +1600,49 @@ function registerPopover(loader, overrides) {
   );
 }
 
-var __defProp$5 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(_) {
+    return { hasError: true };
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+}
+
+var __defProp$7 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-var __objRest$2 = (source, exclude) => {
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+  if (source != null && __getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1652,33 +1652,23 @@ function BaseRadio(props) {
     children,
     onPressChange,
     onFocusVisibleChange,
-    onHoverChange
-  } = _a, rest = __objRest$2(_a, [
+    onHoverChange,
+    onSelectionChange
+  } = _a, rest = __objRest$3(_a, [
     "children",
     "onPressChange",
     "onFocusVisibleChange",
-    "onHoverChange"
+    "onHoverChange",
+    "onSelectionChange"
   ]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Radio, __spreadValues$5({}, rest), ({ isFocusVisible, isPressed, isHovered }) => (
-    // TODO: Remove DataProvider once Interaction variants are implemented for Code components
-    /* @__PURE__ */ React.createElement(
-      DataProvider,
-      {
-        name: "states",
-        data: { isFocusVisible, isPressed, isHovered }
-      },
-      /* @__PURE__ */ React.createElement(
-        ValueObserver,
-        {
-          value: isFocusVisible,
-          onChange: onFocusVisibleChange
-        }
-      ),
-      /* @__PURE__ */ React.createElement(ValueObserver, { value: isPressed, onChange: onPressChange }),
-      /* @__PURE__ */ React.createElement(ValueObserver, { value: isHovered, onChange: onHoverChange }),
-      children
-    )
-  )));
+  const radio = /* @__PURE__ */ React.createElement(Radio, __spreadValues$7({}, rest), ({ isFocusVisible, isPressed, isHovered, isSelected }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    ValueObserver,
+    {
+      value: isFocusVisible,
+      onChange: onFocusVisibleChange
+    }
+  ), /* @__PURE__ */ React.createElement(ValueObserver, { value: isSelected, onChange: onSelectionChange }), /* @__PURE__ */ React.createElement(ValueObserver, { value: isPressed, onChange: onPressChange }), /* @__PURE__ */ React.createElement(ValueObserver, { value: isHovered, onChange: onHoverChange }), children));
+  return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React.createElement(RadioGroup, null, radio) }, radio);
 }
 function registerRadio(loader, overrides) {
   registerComponentHelper(
@@ -1686,12 +1676,10 @@ function registerRadio(loader, overrides) {
     BaseRadio,
     {
       name: makeComponentName("radio"),
-      displayName: "BaseRadio",
-      importPath: "@plasmicpkgs/react-aria/registerRadio",
-      // TODO: Remove DataProvider once Interaction variants are implemented for Code components
-      providesData: true,
+      displayName: "Aria Radio",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerRadio",
       importName: "BaseRadio",
-      props: __spreadProps$2(__spreadValues$5({}, getCommonInputProps("radio", [
+      props: __spreadProps$3(__spreadValues$7({}, getCommonInputProps("radio", [
         "isDisabled",
         "autoFocus",
         "aria-label",
@@ -1716,6 +1704,10 @@ function registerRadio(loader, overrides) {
         onFocusVisibleChange: {
           type: "eventHandler",
           argTypes: [{ name: "isFocusVisible", type: "boolean" }]
+        },
+        onSelectionChange: {
+          type: "eventHandler",
+          argTypes: [{ name: "isSelected", type: "boolean" }]
         }
       }),
       states: {
@@ -1738,6 +1730,11 @@ function registerRadio(loader, overrides) {
           type: "readonly",
           onChangeProp: "onFocusVisibleChange",
           variableType: "boolean"
+        },
+        isSelected: {
+          type: "readonly",
+          onChangeProp: "onSelectionChange",
+          variableType: "boolean"
         }
       },
       trapsFocus: true
@@ -1746,52 +1743,52 @@ function registerRadio(loader, overrides) {
   );
 }
 
-var __defProp$4 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$6 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-var __objRest$1 = (source, exclude) => {
-  var target = {};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __objRest$2 = (source, exclude) => {
+  var target = {};
   for (var prop in source)
-    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
+  if (source != null && __getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BaseRadioGroup(props) {
-  const _a = props, { children } = _a, rest = __objRest$1(_a, ["children"]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RadioGroup, __spreadValues$4({}, rest), children));
+  const _a = props, { children } = _a, rest = __objRest$2(_a, ["children"]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RadioGroup, __spreadValues$6({}, rest), children));
 }
-const componentName = makeComponentName("radioGroup");
+const componentName$1 = makeComponentName("radioGroup");
 function registerRadioGroup(loader, overrides) {
   registerComponentHelper(
     loader,
     BaseRadioGroup,
     {
-      name: componentName,
-      displayName: "BaseRadioGroup",
-      importPath: "@plasmicpkgs/react-aria/registerRadioGroup",
+      name: componentName$1,
+      displayName: "Aria RadioGroup",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerRadioGroup",
       importName: "BaseRadioGroup",
-      props: __spreadProps$1(__spreadValues$4({}, getCommonInputProps("radio group", [
+      props: __spreadProps$2(__spreadValues$6({}, getCommonInputProps("radio group", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -1805,18 +1802,6 @@ function registerRadioGroup(loader, overrides) {
           uncontrolledProp: "defaultValue",
           description: "The current value"
         },
-        options: {
-          type: "array",
-          description: "The options in the radio group",
-          itemType: {
-            type: "object",
-            nameFunc: (item) => item.label,
-            fields: {
-              label: "string",
-              value: "string"
-            }
-          }
-        },
         isInvalid: {
           displayName: "Invalid",
           type: "boolean",
@@ -1857,7 +1842,7 @@ function registerRadioGroup(loader, overrides) {
   );
   const thisName = makeChildComponentName(
     overrides == null ? void 0 : overrides.parentComponentName,
-    componentName
+    componentName$1
   );
   registerFieldError(loader, { parentComponentName: thisName });
   registerRadio(loader, { parentComponentName: thisName });
@@ -1867,25 +1852,25 @@ function registerRadioGroup(loader, overrides) {
   });
 }
 
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
 function BaseHeader(props) {
   const contextProps = React.useContext(PlasmicHeaderContext);
-  return /* @__PURE__ */ React.createElement(Header, __spreadValues$3({}, mergeProps(contextProps, props)));
+  return /* @__PURE__ */ React.createElement(Header, __spreadValues$5({}, mergeProps(contextProps, props)));
 }
 function registerHeader(loader, overrides) {
   registerComponentHelper(
@@ -1893,8 +1878,8 @@ function registerHeader(loader, overrides) {
     BaseHeader,
     {
       name: makeComponentName("header"),
-      displayName: "BaseHeader",
-      importPath: "@plasmicpkgs/react-aria/registerHeader",
+      displayName: "Aria Header",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerHeader",
       importName: "BaseHeader",
       props: {}
     },
@@ -1902,30 +1887,30 @@ function registerHeader(loader, overrides) {
   );
 }
 
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest = (source, exclude) => {
+var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
+  if (source != null && __getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1933,8 +1918,8 @@ var __objRest = (source, exclude) => {
 function BaseSection(props) {
   const contextProps = React.useContext(PlasmicSectionContext);
   const mergedProps = mergeProps(contextProps, props);
-  const _a = mergedProps, { section, renderHeader, key, makeItemProps, renderItem } = _a, rest = __objRest(_a, ["section", "renderHeader", "key", "makeItemProps", "renderItem"]);
-  return /* @__PURE__ */ React.createElement(Section, __spreadValues$2({ id: key != null ? key : void 0 }, rest), /* @__PURE__ */ React.createElement(PlasmicHeaderContext.Provider, { value: { children: section == null ? void 0 : section.label } }, renderHeader == null ? void 0 : renderHeader(section)), /* @__PURE__ */ React.createElement(Collection, { items: section == null ? void 0 : section.items }, (item) => {
+  const _a = mergedProps, { section, renderHeader, key, makeItemProps, renderItem } = _a, rest = __objRest$1(_a, ["section", "renderHeader", "key", "makeItemProps", "renderItem"]);
+  return /* @__PURE__ */ React.createElement(Section, __spreadValues$4({ id: key != null ? key : void 0 }, rest), /* @__PURE__ */ React.createElement(PlasmicHeaderContext.Provider, { value: { children: section == null ? void 0 : section.label } }, renderHeader == null ? void 0 : renderHeader(section)), /* @__PURE__ */ React.createElement(Collection, { items: section == null ? void 0 : section.items }, (item) => {
     const itemProps = makeItemProps == null ? void 0 : makeItemProps(item);
     return /* @__PURE__ */ React.createElement(PlasmicItemContext.Provider, { key: itemProps == null ? void 0 : itemProps.key, value: itemProps }, renderItem == null ? void 0 : renderItem(item));
   }));
@@ -1945,8 +1930,8 @@ function registerSection(loader, overrides) {
     BaseSection,
     {
       name: makeComponentName("section"),
-      displayName: "BaseSection",
-      importPath: "@plasmicpkgs/react-aria/registerSection",
+      displayName: "Aria Section",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerSection",
       importName: "BaseSection",
       props: {
         renderHeader: {
@@ -1967,19 +1952,19 @@ function registerSection(loader, overrides) {
   });
 }
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
@@ -2004,7 +1989,7 @@ function BaseSelect(props) {
   const disabledKeys = flattenOptions(options).filter((op) => op.isDisabled).map((op) => op.value);
   return /* @__PURE__ */ React.createElement(
     Select,
-    __spreadValues$1(__spreadValues$1({
+    __spreadValues$3(__spreadValues$3({
       placeholder,
       selectedKey: value,
       onSelectionChange: onChange,
@@ -2040,8 +2025,8 @@ function BaseSelect(props) {
 function registerSelect(loader) {
   registerComponentHelper(loader, BaseSelect, {
     name: SELECT_NAME,
-    displayName: "BaseSelect",
-    importPath: "@plasmicpkgs/react-aria/registerSelect",
+    displayName: "Aria Select",
+    importPath: "@plasmicpkgs/react-aria/skinny/registerSelect",
     importName: "BaseSelect",
     props: {
       options: makeOptionsPropType(),
@@ -2137,7 +2122,7 @@ function registerSelect(loader) {
   });
   registerComponentHelper(loader, SelectValue, {
     name: makeComponentName("select-value"),
-    displayName: "Base Selected Value",
+    displayName: "Aria Selected Value",
     importPath: "@plasmicpkgs/react-aria/registerSelect",
     importName: "SelectValue",
     parentComponentName: SELECT_NAME,
@@ -2155,25 +2140,25 @@ function registerSelect(loader) {
   });
 }
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __defProp$2 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 const BaseSwitch = Switch;
 function registerSwitch(loader, overrides) {
   registerComponentHelper(
@@ -2181,10 +2166,10 @@ function registerSwitch(loader, overrides) {
     BaseSwitch,
     {
       name: makeComponentName("switch"),
-      displayName: "BaseSwitch",
-      importPath: "@plasmicpkgs/react-aria/registerSwitch",
+      displayName: "Aria Switch",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerSwitch",
       importName: "BaseSwitch",
-      props: __spreadProps(__spreadValues({}, getCommonInputProps("switch", [
+      props: __spreadProps$1(__spreadValues$2({}, getCommonInputProps("switch", [
         "name",
         "isDisabled",
         "isReadOnly",
@@ -2227,6 +2212,302 @@ function registerSwitch(loader, overrides) {
   );
 }
 
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+function BaseTextArea(props) {
+  return /* @__PURE__ */ React.createElement(TextArea, __spreadValues$1({}, props));
+}
+function registerTextArea(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseTextArea,
+    {
+      name: makeComponentName("textarea"),
+      displayName: "Aria TextArea",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerTextArea",
+      importName: "BaseTextArea",
+      props: {
+        placeholder: {
+          type: "string"
+        }
+      },
+      trapsFocus: true
+    },
+    overrides
+  );
+}
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function BaseTextField(props) {
+  const _a = props, {
+    enableAutoComplete,
+    autoComplete,
+    children,
+    onInvalidChange
+  } = _a, rest = __objRest(_a, [
+    "enableAutoComplete",
+    "autoComplete",
+    "children",
+    "onInvalidChange"
+  ]);
+  return /* @__PURE__ */ React.createElement(
+    TextField,
+    __spreadValues({
+      autoComplete: enableAutoComplete ? autoComplete : void 0
+    }, rest),
+    ({ isInvalid }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ValueObserver, { value: isInvalid, onChange: onInvalidChange }), children)
+  );
+}
+const componentName = makeComponentName("textField");
+function registerTextField(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseTextField,
+    {
+      name: componentName,
+      displayName: "Aria TextField",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerTextField",
+      importName: "BaseTextField",
+      // TODO: Support for validate prop
+      props: __spreadProps(__spreadValues({}, getCommonInputProps("input", [
+        "name",
+        "isDisabled",
+        "isReadOnly",
+        "autoFocus",
+        "aria-label",
+        "children",
+        "isRequired"
+      ])), {
+        value: {
+          type: "string",
+          editOnly: true,
+          uncontrolledProp: "defaultValue",
+          description: "The current value"
+        },
+        isInvalid: {
+          // TODO: Not sure if needed
+          displayName: "Invalid",
+          type: "boolean",
+          description: "Whether the input value is invalid",
+          defaultValueHint: false
+        },
+        customValidationErrors: {
+          // TODO: Not sure if needed
+          type: "array",
+          description: "Errors for custom validation"
+        },
+        // validate: {
+        //   type: "function" as const,
+        //   argNames: ["value"],
+        //   argValues: (_ps: any, ctx: any) => [ctx.data[0]],
+        // },
+        enableAutoComplete: {
+          type: "boolean",
+          description: "Whether the browser is allowed to automatically complete the input",
+          defaultValueHint: false
+        },
+        autoComplete: {
+          type: "choice",
+          hidden: ({ enableAutoComplete }) => !enableAutoComplete,
+          description: "Guidance as to the type of data expected in the field",
+          helpText: "For explanations on what each of the values mean, check https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values",
+          options: [
+            "name",
+            "honorific-prefix",
+            "given-name",
+            "additional-name",
+            "family-name",
+            "honorific-suffix",
+            "nickname",
+            "email",
+            "username",
+            "new-password",
+            "current-password",
+            "one-time-code",
+            "organization-title",
+            "organization",
+            "street-address",
+            "shipping",
+            "billing",
+            "address-line1",
+            "address-line2",
+            "address-line3",
+            "address-level4",
+            "address-level3",
+            "address-level2",
+            "address-level1",
+            "country",
+            "country-name",
+            "postal-code",
+            "cc-name",
+            "cc-given-name",
+            "cc-additional-name",
+            "cc-family-name",
+            "cc-number",
+            "cc-exp",
+            "cc-exp-month",
+            "cc-exp-year",
+            "cc-csc",
+            "cc-type",
+            "transaction-currency",
+            "transaction-amount",
+            "language",
+            "bday",
+            "bday-day",
+            "bday-month",
+            "bday-year",
+            "sex",
+            "tel",
+            "tel-country-code",
+            "tel-national",
+            "tel-area-code",
+            "tel-local",
+            "tel-local-suffix",
+            "tel-local-prefix",
+            "tel-extension",
+            "impp",
+            "url",
+            "photo",
+            "webauthn"
+          ]
+        },
+        maxLength: {
+          type: "number",
+          description: "The maximum number of characters supported by the input"
+        },
+        minLength: {
+          type: "number",
+          description: "The minimum number of characters supported by the input"
+        },
+        pattern: {
+          type: "string",
+          description: "Regex pattern that the value of the input must match to be valid",
+          helpText: "For more information about writing Regular Expressions (regex), check out https://regexr.com/",
+          validator: (value) => {
+            try {
+              new RegExp(value);
+              return true;
+            } catch (error) {
+              return "Invalid Regex";
+            }
+          }
+        },
+        type: {
+          type: "choice",
+          defaultValueHint: "text",
+          options: ["text", "search", "url", "tel", "email", "password"]
+        },
+        inputMode: {
+          type: "choice",
+          description: "hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.",
+          options: [
+            "none",
+            "text",
+            "tel",
+            "url",
+            "email",
+            "numeric",
+            "decimal",
+            "search"
+          ]
+        },
+        validationBehavior: {
+          type: "choice",
+          options: ["native", "aria"],
+          description: "Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.",
+          defaultValueHint: "native"
+        },
+        onChange: {
+          type: "eventHandler",
+          argTypes: [{ name: "value", type: "string" }]
+        },
+        onFocusChange: {
+          type: "eventHandler",
+          argTypes: [{ name: "isFocused", type: "boolean" }]
+        },
+        onInvalidChange: {
+          type: "eventHandler",
+          argTypes: [{ name: "isInvalid", type: "boolean" }]
+        }
+      }),
+      // NOTE: React-Aria does not support render props for <Input> and <Textarea>, so focusVisible and inputHovered states are not implemented
+      states: {
+        value: {
+          type: "writable",
+          valueProp: "value",
+          onChangeProp: "onChange",
+          variableType: "text"
+        },
+        isFocused: {
+          type: "readonly",
+          onChangeProp: "onFocusChange",
+          variableType: "boolean"
+        },
+        isInvalid: {
+          type: "readonly",
+          onChangeProp: "onInvalidChange",
+          variableType: "boolean"
+        }
+      },
+      trapsFocus: true
+    },
+    overrides
+  );
+  const thisName = makeChildComponentName(
+    overrides == null ? void 0 : overrides.parentComponentName,
+    componentName
+  );
+  registerFieldError(loader, { parentComponentName: thisName });
+  registerInput(loader, { parentComponentName: thisName });
+  registerLabel(loader, { parentComponentName: thisName });
+  registerDescription(loader, { parentComponentName: thisName });
+  registerTextArea(loader, { parentComponentName: thisName });
+}
+
 function registerAll(loader) {
   registerSelect(loader);
   registerComboBox(loader);
@@ -2241,6 +2522,7 @@ function registerAll(loader) {
   registerCheckbox(loader);
   registerCheckboxGroup(loader);
   registerRadioGroup(loader);
+  registerTextField(loader);
 }
 
 export { registerAll };