@plasmicpkgs/react-aria 0.0.114 → 0.0.116

package/skinny/registerPopover.stories.esm.js

@@ -1,15 +1,44 @@
 import { fn, within, waitFor, expect, userEvent } from '@storybook/test';
 import React from 'react';
+import { BaseOverlayArrow } from './registerOverlayArrow.esm.js';
 import { BasePopover } from './registerPopover.esm.js';
-import '@plasmicapp/host';
-import '@react-aria/utils';
 import 'react-aria-components';
-import './common-10d1b069.esm.js';
-import './utils-59f72eb9.esm.js';
+import './common-616eb178.esm.js';
+import './utils-fd88ad47.esm.js';
+import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
-import './contexts-5cb81c2f.esm.js';
 import './variant-utils-4405ebb0.esm.js';
+import '@react-aria/utils';
+import './contexts-5cb81c2f.esm.js';
 
+var __defProp = Object.defineProperty;
+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 __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;
+};
 const meta = {
   title: "Components/BasePopover",
   component: BasePopover,
@@ -28,6 +57,36 @@ const Standalone = {
     expect(args.onOpenChange).not.toHaveBeenCalled();
   }
 };
+const WithArrow = {
+  render: (_a) => {
+    var _b = _a, { children } = _b, args = __objRest(_b, ["children"]);
+    return /* @__PURE__ */ React.createElement(BasePopover, __spreadValues({}, args), /* @__PURE__ */ React.createElement(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `
+       .triangle-up {
+          width: 1px;
+          height: 1px;
+          border-left: 10px solid transparent;
+          border-right: 10px solid transparent;
+          border-bottom: 10px solid black;
+        }
+     `
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(BaseOverlayArrow, { className: "triangle-up" }), children);
+  },
+  play: async ({ args }) => {
+    const doc = within(document.body);
+    await waitFor(() => {
+      expect(doc.getByTestId("popover-content")).toBeInTheDocument();
+      expect(document.querySelector(".triangle-up")).toBeInTheDocument();
+    });
+    await userEvent.click(document.body);
+    expect(args.onOpenChange).not.toHaveBeenCalled();
+  }
+};
 
-export { Standalone, meta as default };
+export { Standalone, WithArrow, meta as default };
 //# sourceMappingURL=registerPopover.stories.esm.js.map

package/skinny/registerPopover.stories.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerPopover.stories.esm.js","sources":["../src/registerPopover.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, waitFor, within } from \"@storybook/test\";\nimport React from \"react\";\nimport { BasePopover } from \"./registerPopover\";\n\nconst meta: Meta<typeof BasePopover> = {\n  title: \"Components/BasePopover\",\n  component: BasePopover,\n  args: {\n    onOpenChange: fn(),\n    children: (\n      <div data-testid=\"popover-content\">\n        <h2>Standalone Popover</h2>\n        <p>This popover is rendered without a trigger</p>\n      </div>\n    ),\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BasePopover>;\n\n// Standalone popover should always remain open, because we assume that popover is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc, and its only really standalone in component view\nexport const Standalone: Story = {\n  play: async ({ args }) => {\n    const doc = within(document.body);\n\n    // Verify popover is visible\n    await waitFor(() => {\n      expect(doc.getByTestId(\"popover-content\")).toBeInTheDocument();\n    });\n    // Click outside should not dismiss popover\n    await userEvent.click(document.body);\n    expect(args.onOpenChange).not.toHaveBeenCalled();\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAKA,MAAM,IAAiC,GAAA;AAAA,EACrC,KAAO,EAAA,wBAAA;AAAA,EACP,SAAW,EAAA,WAAA;AAAA,EACX,IAAM,EAAA;AAAA,IACJ,cAAc,EAAG,EAAA;AAAA,IACjB,QACE,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,aAAA,EAAY,iBACf,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAG,EAAA,IAAA,EAAA,oBAAkB,CACtB,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAE,EAAA,IAAA,EAAA,4CAA0C,CAC/C,CAAA;AAAA,GAEJ;AACF,EAAA;AAMO,MAAM,UAAoB,GAAA;AAAA,EAC/B,IAAM,EAAA,OAAO,EAAE,IAAA,EAAW,KAAA;AACxB,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAGhC,IAAA,MAAM,QAAQ,MAAM;AAClB,MAAA,MAAA,CAAO,GAAI,CAAA,WAAA,CAAY,iBAAiB,CAAC,EAAE,iBAAkB,EAAA,CAAA;AAAA,KAC9D,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,CAAU,KAAM,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AACnC,IAAA,MAAA,CAAO,IAAK,CAAA,YAAY,CAAE,CAAA,GAAA,CAAI,gBAAiB,EAAA,CAAA;AAAA,GACjD;AACF;;;;"}
+{"version":3,"file":"registerPopover.stories.esm.js","sources":["../src/registerPopover.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, waitFor, within } from \"@storybook/test\";\nimport React from \"react\";\nimport { BaseOverlayArrow } from \"./registerOverlayArrow\";\nimport { BasePopover } from \"./registerPopover\";\n\nconst meta: Meta<typeof BasePopover> = {\n  title: \"Components/BasePopover\",\n  component: BasePopover,\n  args: {\n    onOpenChange: fn(),\n    children: (\n      <div data-testid=\"popover-content\">\n        <h2>Standalone Popover</h2>\n        <p>This popover is rendered without a trigger</p>\n      </div>\n    ),\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof BasePopover>;\n\n// Standalone popover should always remain open, because we assume that popover is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc, and its only really standalone in component view\nexport const Standalone: Story = {\n  play: async ({ args }) => {\n    const doc = within(document.body);\n\n    // Verify popover is visible\n    await waitFor(() => {\n      expect(doc.getByTestId(\"popover-content\")).toBeInTheDocument();\n    });\n    // Click outside should not dismiss popover\n    await userEvent.click(document.body);\n    expect(args.onOpenChange).not.toHaveBeenCalled();\n  },\n};\n\nexport const WithArrow: Story = {\n  render: ({ children, ...args }) => (\n    <BasePopover {...args}>\n      <style\n        dangerouslySetInnerHTML={{\n          __html: `\n       .triangle-up {\n          width: 1px;\n          height: 1px;\n          border-left: 10px solid transparent;\n          border-right: 10px solid transparent;\n          border-bottom: 10px solid black;\n        }\n     `,\n        }}\n      />\n      <BaseOverlayArrow className={\"triangle-up\"} />\n      {children}\n    </BasePopover>\n  ),\n  play: async ({ args }) => {\n    const doc = within(document.body);\n\n    // Verify popover is visible\n    await waitFor(() => {\n      expect(doc.getByTestId(\"popover-content\")).toBeInTheDocument();\n      expect(document.querySelector(\".triangle-up\")).toBeInTheDocument();\n    });\n    // Click outside should not dismiss popover\n    await userEvent.click(document.body);\n    expect(args.onOpenChange).not.toHaveBeenCalled();\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,IAAiC,GAAA;AAAA,EACrC,KAAO,EAAA,wBAAA;AAAA,EACP,SAAW,EAAA,WAAA;AAAA,EACX,IAAM,EAAA;AAAA,IACJ,cAAc,EAAG,EAAA;AAAA,IACjB,QACE,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,aAAA,EAAY,iBACf,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAG,EAAA,IAAA,EAAA,oBAAkB,CACtB,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAE,EAAA,IAAA,EAAA,4CAA0C,CAC/C,CAAA;AAAA,GAEJ;AACF,EAAA;AAMO,MAAM,UAAoB,GAAA;AAAA,EAC/B,IAAM,EAAA,OAAO,EAAE,IAAA,EAAW,KAAA;AACxB,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAGhC,IAAA,MAAM,QAAQ,MAAM;AAClB,MAAA,MAAA,CAAO,GAAI,CAAA,WAAA,CAAY,iBAAiB,CAAC,EAAE,iBAAkB,EAAA,CAAA;AAAA,KAC9D,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,CAAU,KAAM,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AACnC,IAAA,MAAA,CAAO,IAAK,CAAA,YAAY,CAAE,CAAA,GAAA,CAAI,gBAAiB,EAAA,CAAA;AAAA,GACjD;AACF,EAAA;AAEO,MAAM,SAAmB,GAAA;AAAA,EAC9B,MAAA,EAAQ,CAAC,EAAuB,KAAA;AAAvB,IAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAvCb,QAAA,EAAA,GAuCW,EAAe,EAAA,IAAA,GAAA,SAAA,CAAf,IAAe,CAAb,UAAA,CAAA,CAAA,CAAA;AACT,IAAA,uBAAA,KAAA,CAAA,aAAA,CAAC,gCAAgB,IACf,CAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,uBAAyB,EAAA;AAAA,UACvB,MAAQ,EAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAA,CAAA;AAAA,SASV;AAAA,OAAA;AAAA,uBAED,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,SAAW,EAAA,aAAA,EAAe,GAC3C,QACH,CAAA,CAAA;AAAA,GAAA;AAAA,EAEF,IAAM,EAAA,OAAO,EAAE,IAAA,EAAW,KAAA;AACxB,IAAM,MAAA,GAAA,GAAM,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAGhC,IAAA,MAAM,QAAQ,MAAM;AAClB,MAAA,MAAA,CAAO,GAAI,CAAA,WAAA,CAAY,iBAAiB,CAAC,EAAE,iBAAkB,EAAA,CAAA;AAC7D,MAAA,MAAA,CAAO,QAAS,CAAA,aAAA,CAAc,cAAc,CAAC,EAAE,iBAAkB,EAAA,CAAA;AAAA,KAClE,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,CAAU,KAAM,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AACnC,IAAA,MAAA,CAAO,IAAK,CAAA,YAAY,CAAE,CAAA,GAAA,CAAI,gBAAiB,EAAA,CAAA;AAAA,GACjD;AACF;;;;"}

package/skinny/registerRadio.cjs.js

@@ -2,10 +2,10 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-c8beb360.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
-var utils = require('./utils-91eee672.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');

package/skinny/registerRadio.esm.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { Radio, RadioGroup } from 'react-aria-components';
-import { g as getCommonProps, C as COMMON_STYLES } from './common-10d1b069.esm.js';
+import { g as getCommonProps, C as COMMON_STYLES } from './common-616eb178.esm.js';
 import { e as PlasmicRadioGroupContext } from './contexts-5cb81c2f.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
-import { r as registerComponentHelper, m as makeComponentName } from './utils-59f72eb9.esm.js';
+import { r as registerComponentHelper, m as makeComponentName } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';

package/skinny/registerRadioGroup.cjs.js

@@ -2,13 +2,13 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-c8beb360.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var OptionsItemIdManager = require('./OptionsItemIdManager-a89a28b9.cjs.js');
 var registerDescription = require('./registerDescription.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
 var registerRadio = require('./registerRadio.cjs.js');
-var utils = require('./utils-91eee672.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('./registerText.cjs.js');
 require('@plasmicapp/host');

package/skinny/registerRadioGroup.esm.js

@@ -1,12 +1,12 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { RadioGroup } from 'react-aria-components';
-import { g as getCommonProps, C as COMMON_STYLES } from './common-10d1b069.esm.js';
+import { g as getCommonProps, C as COMMON_STYLES } from './common-616eb178.esm.js';
 import { e as PlasmicRadioGroupContext } from './contexts-5cb81c2f.esm.js';
 import { O as OptionsItemIdManager } from './OptionsItemIdManager-832b8cfe.esm.js';
 import { DESCRIPTION_COMPONENT_NAME } from './registerDescription.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
 import { registerRadio, makeDefaultRadioChildren } from './registerRadio.esm.js';
-import { b as makeChildComponentName, r as registerComponentHelper, m as makeComponentName } from './utils-59f72eb9.esm.js';
+import { b as makeChildComponentName, r as registerComponentHelper, m as makeComponentName } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import './registerText.esm.js';
 import '@plasmicapp/host';

package/skinny/registerRadioGroup.stories.cjs.js

@@ -7,8 +7,8 @@ var React = require('react');
 var registerRadio = require('./registerRadio.cjs.js');
 var registerRadioGroup = require('./registerRadioGroup.cjs.js');
 require('react-aria-components');
-require('./common-c8beb360.cjs.js');
-require('./utils-91eee672.cjs.js');
+require('./common-45acb83c.cjs.js');
+require('./utils-fc1ddd7c.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
 require('./contexts-6d0cb2b1.cjs.js');

package/skinny/registerRadioGroup.stories.esm.js

@@ -3,8 +3,8 @@ import React from 'react';
 import { BaseRadio } from './registerRadio.esm.js';
 import { BaseRadioGroup } from './registerRadioGroup.esm.js';
 import 'react-aria-components';
-import './common-10d1b069.esm.js';
-import './utils-59f72eb9.esm.js';
+import './common-616eb178.esm.js';
+import './utils-fd88ad47.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
 import './contexts-5cb81c2f.esm.js';

package/skinny/registerSection.cjs.js

@@ -2,10 +2,10 @@
 
 require('react');
 require('react-aria-components');
-require('./common-c8beb360.cjs.js');
+require('./common-45acb83c.cjs.js');
 require('./contexts-6d0cb2b1.cjs.js');
-var registerSection = require('./registerListBox-87d0e61a.cjs.js');
-require('./utils-91eee672.cjs.js');
+var registerSection = require('./registerListBox-040b0374.cjs.js');
+require('./utils-fc1ddd7c.cjs.js');
 require('./OptionsItemIdManager-a89a28b9.cjs.js');
 require('./registerListBoxItem.cjs.js');
 require('./registerDescription.cjs.js');

package/skinny/registerSection.esm.js

@@ -1,9 +1,9 @@
 import 'react';
 import 'react-aria-components';
-import './common-10d1b069.esm.js';
+import './common-616eb178.esm.js';
 import './contexts-5cb81c2f.esm.js';
-export { a as BaseSection, r as registerSection } from './registerListBox-a5fd72be.esm.js';
-import './utils-59f72eb9.esm.js';
+export { a as BaseSection, r as registerSection } from './registerListBox-21dc99fa.esm.js';
+import './utils-fd88ad47.esm.js';
 import './OptionsItemIdManager-832b8cfe.esm.js';
 import './registerListBoxItem.esm.js';
 import './registerDescription.esm.js';

package/skinny/registerSelect.cjs.js

@@ -2,14 +2,14 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-c8beb360.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var OptionsItemIdManager = require('./OptionsItemIdManager-a89a28b9.cjs.js');
 var registerButton = require('./registerButton.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
-var registerSection = require('./registerListBox-87d0e61a.cjs.js');
+var registerSection = require('./registerListBox-040b0374.cjs.js');
 var registerPopover = require('./registerPopover.cjs.js');
-var utils = require('./utils-91eee672.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('react-aria');

package/skinny/registerSelect.esm.js

@@ -1,13 +1,13 @@
 import React, { useMemo, useEffect, useCallback } from 'react';
 import { SelectValue, Select, SelectStateContext } from 'react-aria-components';
-import { C as COMMON_STYLES, a as arrowDown, g as getCommonProps } from './common-10d1b069.esm.js';
+import { C as COMMON_STYLES, a as arrowDown, g as getCommonProps } from './common-616eb178.esm.js';
 import { a as PlasmicPopoverTriggerContext, b as PlasmicListBoxContext } from './contexts-5cb81c2f.esm.js';
 import { O as OptionsItemIdManager } from './OptionsItemIdManager-832b8cfe.esm.js';
 import { BUTTON_COMPONENT_NAME } from './registerButton.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
-import { L as LIST_BOX_COMPONENT_NAME } from './registerListBox-a5fd72be.esm.js';
+import { L as LIST_BOX_COMPONENT_NAME } from './registerListBox-21dc99fa.esm.js';
 import { POPOVER_COMPONENT_NAME } from './registerPopover.esm.js';
-import { e as extractPlasmicDataProps, r as registerComponentHelper, u as useAutoOpen, m as makeComponentName } from './utils-59f72eb9.esm.js';
+import { e as extractPlasmicDataProps, r as registerComponentHelper, u as useAutoOpen, m as makeComponentName } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import 'react-aria';

package/skinny/registerSelect.stories.cjs.js

@@ -6,14 +6,14 @@ var host = require('@plasmicapp/host');
 var test = require('@storybook/test');
 var React = require('react');
 var registerButton = require('./registerButton.cjs.js');
-var registerSection = require('./registerListBox-87d0e61a.cjs.js');
+var registerSection = require('./registerListBox-040b0374.cjs.js');
 var registerListBoxItem = require('./registerListBoxItem.cjs.js');
 var registerPopover = require('./registerPopover.cjs.js');
 var registerSelect = require('./registerSelect.cjs.js');
 require('react-aria');
 require('react-aria-components');
-require('./common-c8beb360.cjs.js');
-require('./utils-91eee672.cjs.js');
+require('./common-45acb83c.cjs.js');
+require('./utils-fc1ddd7c.cjs.js');
 require('@plasmicapp/host/registerComponent');
 require('./variant-utils-0ad70db8.cjs.js');
 require('./contexts-6d0cb2b1.cjs.js');

package/skinny/registerSelect.stories.esm.js

@@ -2,14 +2,14 @@ import { PlasmicCanvasContext } from '@plasmicapp/host';
 import { fn, within, expect, userEvent, waitFor } from '@storybook/test';
 import React, { useState, useEffect } from 'react';
 import { BaseButton } from './registerButton.esm.js';
-import { B as BaseListBox } from './registerListBox-a5fd72be.esm.js';
+import { B as BaseListBox } from './registerListBox-21dc99fa.esm.js';
 import { BaseListBoxItem } from './registerListBoxItem.esm.js';
 import { BasePopover } from './registerPopover.esm.js';
 import { BaseSelect, BaseSelectValue } from './registerSelect.esm.js';
 import 'react-aria';
 import 'react-aria-components';
-import './common-10d1b069.esm.js';
-import './utils-59f72eb9.esm.js';
+import './common-616eb178.esm.js';
+import './utils-fd88ad47.esm.js';
 import '@plasmicapp/host/registerComponent';
 import './variant-utils-4405ebb0.esm.js';
 import './contexts-5cb81c2f.esm.js';

package/skinny/registerSlider.cjs.js

@@ -2,13 +2,13 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-c8beb360.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
 var registerSliderOutput = require('./registerSliderOutput.cjs.js');
 var registerSliderThumb = require('./registerSliderThumb.cjs.js');
 var registerSliderTrack = require('./registerSliderTrack.cjs.js');
-var utils = require('./utils-91eee672.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('react-keyed-flatten-children');
 require('@plasmicapp/host');

package/skinny/registerSlider.esm.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Slider } from 'react-aria-components';
-import { g as getCommonProps, C as COMMON_STYLES } from './common-10d1b069.esm.js';
+import { g as getCommonProps, C as COMMON_STYLES } from './common-616eb178.esm.js';
 import { f as PlasmicSliderContext } from './contexts-5cb81c2f.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
 import { registerSliderOutput } from './registerSliderOutput.esm.js';
 import { registerSliderThumb } from './registerSliderThumb.esm.js';
 import { registerSliderTrack } from './registerSliderTrack.esm.js';
-import { r as registerComponentHelper, m as makeComponentName } from './utils-59f72eb9.esm.js';
+import { r as registerComponentHelper, m as makeComponentName } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import 'react-keyed-flatten-children';
 import '@plasmicapp/host';

package/skinny/registerSlider.stories.cjs.js

@@ -10,8 +10,8 @@ var registerSliderOutput = require('./registerSliderOutput.cjs.js');
 var registerSliderThumb = require('./registerSliderThumb.cjs.js');
 var registerSliderTrack = require('./registerSliderTrack.cjs.js');
 require('react-aria-components');
-require('./common-c8beb360.cjs.js');
-require('./utils-91eee672.cjs.js');
+require('./common-45acb83c.cjs.js');
+require('./utils-fc1ddd7c.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
 require('./contexts-6d0cb2b1.cjs.js');

package/skinny/registerSlider.stories.esm.js

@@ -6,8 +6,8 @@ import { BaseSliderOutput } from './registerSliderOutput.esm.js';
 import { BaseSliderThumb } from './registerSliderThumb.esm.js';
 import { BaseSliderTrack } from './registerSliderTrack.esm.js';
 import 'react-aria-components';
-import './common-10d1b069.esm.js';
-import './utils-59f72eb9.esm.js';
+import './common-616eb178.esm.js';
+import './utils-fd88ad47.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
 import './contexts-5cb81c2f.esm.js';

package/skinny/registerSliderOutput.cjs.js

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-c8beb360.cjs.js');
-var utils = require('./utils-91eee672.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');

package/skinny/registerSliderOutput.esm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SliderOutput } from 'react-aria-components';
-import { C as COMMON_STYLES } from './common-10d1b069.esm.js';
-import { m as makeComponentName, r as registerComponentHelper } from './utils-59f72eb9.esm.js';
+import { C as COMMON_STYLES } from './common-616eb178.esm.js';
+import { m as makeComponentName, r as registerComponentHelper } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';

package/skinny/registerSliderThumb.cjs.js

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-c8beb360.cjs.js');
-var utils = require('./utils-91eee672.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');

package/skinny/registerSliderThumb.esm.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { SliderThumb, Slider, SliderTrack } from 'react-aria-components';
-import { g as getCommonProps, C as COMMON_STYLES } from './common-10d1b069.esm.js';
-import { m as makeComponentName, r as registerComponentHelper } from './utils-59f72eb9.esm.js';
+import { g as getCommonProps, C as COMMON_STYLES } from './common-616eb178.esm.js';
+import { m as makeComponentName, r as registerComponentHelper } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';

package/skinny/registerSliderTrack.cjs.js

@@ -3,9 +3,9 @@
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var flattenChildren = require('react-keyed-flatten-children');
-var common = require('./common-c8beb360.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
-var utils = require('./utils-91eee672.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');

package/skinny/registerSliderTrack.esm.js

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import { SliderTrack, Slider } from 'react-aria-components';
 import flattenChildren from 'react-keyed-flatten-children';
-import { C as COMMON_STYLES } from './common-10d1b069.esm.js';
+import { C as COMMON_STYLES } from './common-616eb178.esm.js';
 import { f as PlasmicSliderContext } from './contexts-5cb81c2f.esm.js';
-import { m as makeComponentName, r as registerComponentHelper, i as isDefined } from './utils-59f72eb9.esm.js';
+import { m as makeComponentName, r as registerComponentHelper, i as isDefined } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';

package/skinny/registerSwitch.cjs.js

@@ -2,10 +2,10 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-c8beb360.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
 var registerDescription = require('./registerDescription.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
-var utils = require('./utils-91eee672.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('./registerText.cjs.js');
 require('@plasmicapp/host');

package/skinny/registerSwitch.esm.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Switch } from 'react-aria-components';
-import { g as getCommonProps, C as COMMON_STYLES } from './common-10d1b069.esm.js';
+import { g as getCommonProps, C as COMMON_STYLES } from './common-616eb178.esm.js';
 import { DESCRIPTION_COMPONENT_NAME } from './registerDescription.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
-import { r as registerComponentHelper, m as makeComponentName } from './utils-59f72eb9.esm.js';
+import { r as registerComponentHelper, m as makeComponentName } from './utils-fd88ad47.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import './registerText.esm.js';
 import '@plasmicapp/host';

package/skinny/registerSwitch.stories.cjs.js

@@ -6,8 +6,8 @@ var test = require('@storybook/test');
 var React = require('react');
 var registerSwitch = require('./registerSwitch.cjs.js');
 require('react-aria-components');
-require('./common-c8beb360.cjs.js');
-require('./utils-91eee672.cjs.js');
+require('./common-45acb83c.cjs.js');
+require('./utils-fc1ddd7c.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
 require('./registerDescription.cjs.js');

package/skinny/registerSwitch.stories.esm.js

@@ -2,8 +2,8 @@ import { fn, within, expect, userEvent, waitFor } from '@storybook/test';
 import React, { useState } from 'react';
 import { BaseSwitch } from './registerSwitch.esm.js';
 import 'react-aria-components';
-import './common-10d1b069.esm.js';
-import './utils-59f72eb9.esm.js';
+import './common-616eb178.esm.js';
+import './utils-fd88ad47.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
 import './registerDescription.esm.js';

package/skinny/registerText.cjs.js

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-c8beb360.cjs.js');
-var utils = require('./utils-91eee672.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
 

package/skinny/registerText.esm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from 'react-aria-components';
-import { C as COMMON_STYLES } from './common-10d1b069.esm.js';
-import { e as extractPlasmicDataProps, m as makeComponentName, r as registerComponentHelper } from './utils-59f72eb9.esm.js';
+import { C as COMMON_STYLES } from './common-616eb178.esm.js';
+import { e as extractPlasmicDataProps, m as makeComponentName, r as registerComponentHelper } from './utils-fd88ad47.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
 

package/skinny/registerTextArea.cjs.js

@@ -3,9 +3,9 @@
 var React = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-c8beb360.cjs.js');
+var common = require('./common-45acb83c.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
-var utils = require('./utils-91eee672.cjs.js');
+var utils = require('./utils-fc1ddd7c.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
@@ -61,34 +61,64 @@ const inputHelpers = {
     }
   }
 };
-function BaseTextArea(props) {
-  const _a = props, { className, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest(_a, ["className", "plasmicUpdateVariant", "setControlContextData"]);
+function BaseTextArea_(props, ref) {
+  const _a = props, {
+    className,
+    plasmicUpdateVariant,
+    setControlContextData
+  } = _a, restProps = __objRest(_a, [
+    "className",
+    "plasmicUpdateVariant",
+    "setControlContextData"
+  ]);
   const textFieldContext = React__default.default.useContext(contexts.PlasmicTextFieldContext);
+  const [textAreaContextProps, textAreaRef] = reactAriaComponents.useContextProps(
+    restProps,
+    ref,
+    reactAriaComponents.TextAreaContext
+  );
+  const { hoverProps, isHovered } = reactAria.useHover(textAreaContextProps);
+  const { isFocused, isFocusVisible, focusProps } = reactAria.useFocusRing({
+    isTextInput: true,
+    autoFocus: textAreaContextProps.autoFocus
+  });
+  const mergedProps = reactAria.mergeProps(
+    utils.filterHoverProps(textAreaContextProps),
+    focusProps,
+    hoverProps,
+    {
+      style: common.COMMON_STYLES,
+      className
+    }
+  );
+  const isDisabled = mergedProps.disabled || false;
+  const isInvalid = !!mergedProps["aria-invalid"] && mergedProps["aria-invalid"] !== "false";
   setControlContextData == null ? void 0 : setControlContextData({
     parent: textFieldContext
   });
-  const classNameProp = React.useCallback(
-    ({
-      isDisabled,
-      isFocusVisible,
-      isFocused,
-      isHovered
-    }) => {
-      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+  React.useEffect(() => {
+    if (plasmicUpdateVariant) {
+      plasmicUpdateVariant({
         disabled: isDisabled,
         focused: isFocused,
         focusVisible: isFocusVisible,
         hovered: isHovered
       });
-      return className != null ? className : "";
-    },
-    [className, plasmicUpdateVariant]
+    }
+  }, [isFocused, isFocusVisible, isHovered, isDisabled, plasmicUpdateVariant]);
+  return /* @__PURE__ */ React__default.default.createElement(
+    "textarea",
+    __spreadProps(__spreadValues({}, mergedProps), {
+      ref: textAreaRef,
+      "data-focused": isFocused || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-hovered": isHovered || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
+      "data-invalid": isInvalid || void 0
+    })
   );
-  const mergedProps = reactAria.mergeProps(rest, {
-    className: classNameProp
-  });
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.TextArea, __spreadProps(__spreadValues({}, mergedProps), { style: common.COMMON_STYLES }));
 }
+const BaseTextArea = React__default.default.forwardRef(BaseTextArea_);
 function registerTextArea(loader, overrides) {
   utils.registerComponentHelper(
     loader,