@cambly/syntax-core 10.2.2 → 10.4.0

package/dist/__chunks/D3WPZHGM.cjs

@@ -0,0 +1,137 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _AZYT2N4Kcjs = require('./AZYT2N4K.cjs');
+
+
+var _NGO7IQETcjs = require('./NGO7IQET.cjs');
+
+
+var _VLUKODJDcjs = require('./VLUKODJD.cjs');
+
+
+var _4EXO6IHDcjs = require('./4EXO6IHD.cjs');
+
+
+var _6YHDE4TNcjs = require('./6YHDE4TN.cjs');
+
+
+var _RFHPSEBFcjs = require('./RFHPSEBF.cjs');
+
+
+
+
+var _I64JGYX7cjs = require('./I64JGYX7.cjs');
+
+// src/Popover/Popover.tsx
+var _react = require('react');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _reactaria = require('react-aria');
+
+
+
+
+var _reactariacomponents = require('react-aria-components');
+
+// css-module:./Popover.module.css#css-module
+var Popover_module_default = { "popover": "_popover_158cf_1" };
+
+// src/Popover/Popover.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var AriaPopover = _react.forwardRef.call(void 0, 
+  function AriaPopover2(_a, ref) {
+    var _b = _a, { children: childrenProp, onChangeContentVisibility } = _b, otherProps = _I64JGYX7cjs.__objRest.call(void 0, _b, ["children", "onChangeContentVisibility"]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactariacomponents.Popover,
+      _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+        ref
+      }, _reactaria.mergeProps.call(void 0, 
+        {
+          offset: 8,
+          containerPadding: 16,
+          className: _classnames2.default.call(void 0, [
+            _VLUKODJDcjs.Box_module_default.box,
+            _VLUKODJDcjs.Box_module_default.flex,
+            _VLUKODJDcjs.Box_module_default.column,
+            Popover_module_default.popover
+          ])
+        },
+        otherProps
+      )), {
+        children: _reactariacomponents.composeRenderProps.call(void 0, 
+          childrenProp,
+          (children, { isEntering, isExiting }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _RFHPSEBFcjs.OverlayVisibility,
+              {
+                isEntering,
+                isExiting,
+                onChange: onChangeContentVisibility
+              }
+            ),
+            children
+          ] })
+        )
+      })
+    );
+  }
+);
+var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
+  const {
+    "data-testid": dataTestId,
+    accessibilityLabel,
+    accessibilityCloseLabel,
+    children,
+    content,
+    initialOpen,
+    modal: modalProp,
+    onOpenChange,
+    onChangeContentVisibility,
+    open,
+    placement = "bottom"
+  } = props;
+  const modal = !children || modalProp;
+  const modalNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _AZYT2N4Kcjs.ModalDialog_default,
+    {
+      ref,
+      accessibilityLabel,
+      accessibilityCloseLabel,
+      "data-testid": dataTestId,
+      initialOpen,
+      onChangeContentVisibility,
+      onOpenChange,
+      open,
+      children: content
+    }
+  );
+  const popoverNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    AriaPopover,
+    {
+      ref,
+      placement: _4EXO6IHDcjs.syntaxToReactAriaPlacement.call(void 0, placement),
+      onChangeContentVisibility,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _NGO7IQETcjs.Dialog_default, { accessibilityLabel, "data-testid": dataTestId, children: content })
+    }
+  );
+  if (!children)
+    return modalNode;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _reactariacomponents.DialogTrigger,
+    {
+      defaultOpen: initialOpen,
+      isOpen: open,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _6YHDE4TNcjs.Triggerable_default, { children }),
+        modal ? modalNode : popoverNode
+      ]
+    }
+  );
+});
+var Popover_default = Popover;
+
+
+
+
+exports.AriaPopover = AriaPopover; exports.Popover_default = Popover_default;
+//# sourceMappingURL=D3WPZHGM.cjs.map

package/dist/__chunks/D3WPZHGM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Popover/Popover.tsx","css-module:./Popover.module.css#css-module"],"names":["AriaPopover","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgC,kBAAqC;AACrE,OAAO,gBAAgB;AACvB,SAAS,kBAAkB;AAC3B;AAAA,EACE,WAAW;AAAA,EAEX,iBAAiB;AAAA,EACjB;AAAA,OACK;;;ACRuF,IAAO,yBAAQ,EAAC,WAAU,mBAAkB;;;ADoF9H,mBACE,KADF;AAzBL,IAAM,cAAc;AAAA,EACzB,SAASA,aACP,IACA,KACc;AAFd,iBAAE,YAAU,cAAc,0BA7D9B,IA6DI,IAAwD,uBAAxD,IAAwD,CAAtD,YAAwB;AAG1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,SACI;AAAA,QACF;AAAA,UACE,QAAQ;AAAA,UACR,kBAAkB;AAAA,UAClB,WAAW,WAAW;AAAA,YACpB,mBAAU;AAAA,YACV,mBAAU;AAAA,YACV,mBAAU;AAAA,YACV,uBAAO;AAAA,UACT,CAAC;AAAA,QACH;AAAA,QACA;AAAA,MACF,IAdD;AAAA,QAgBE;AAAA,UACC;AAAA,UACA,CAAC,UAAU,EAAE,YAAY,UAAU,MACjC,iCACE;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,UAAU;AAAA;AAAA,YACZ;AAAA,YACC;AAAA,aACH;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAuBA,IAAM,UAAU,WAAyC,SAASC,SAChE,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,QAAQ,CAAC,YAAY;AAE3B,QAAM,YACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAGF,QAAM,cACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,2BAA2B,SAAS;AAAA,MAC/C;AAAA,MAEA,8BAAC,kBAAO,oBAAwC,eAAa,YAC1D,mBACH;AAAA;AAAA,EACF;AAGF,MAAI,CAAC;AAAU,WAAO;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA,4BAAC,uBAAa,UAAS;AAAA,QACvB,QAAQ,YAAY;AAAA;AAAA;AAAA,EACvB;AAEJ,CAAC;AAED,IAAO,kBAAQ","sourcesContent":["import React, { type ReactNode, forwardRef, type ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { mergeProps } from \"react-aria\";\nimport {\n  Popover as ReactAriaPopover,\n  type PopoverProps as ReactAriaPopoverProps,\n  DialogTrigger as ReactAriaDialogTrigger,\n  composeRenderProps,\n} from \"react-aria-components\";\nimport Triggerable from \"../react-aria-utils/Triggerable\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport Dialog from \"../Dialog/Dialog\";\nimport ModalDialog from \"../Dialog/ModalDialog\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Popover.module.css\";\nimport {\n  type Placement,\n  syntaxToReactAriaPlacement,\n} from \"../react-aria-utils/placement\";\n\ntype PopoverProps = {\n  /** Test id for the floating dialog */\n  \"data-testid\"?: string;\n  /** Optional aria-label for the popover (content element) */\n  accessibilityLabel?: string;\n  /** Optional aria-label for the close button (trigger element) when displayed as ModalDialog */\n  accessibilityCloseLabel?: string;\n  /** Optional trigger element */\n  children?: ReactElement;\n  /** Content to be shown inside the popover. */\n  content: ReactNode;\n  /** If set to true the popover be open after mount / the first time it renders */\n  initialOpen?: boolean;\n  /** Optional boolean to control whether popover content is rendered as a modal */\n  modal?: boolean;\n  /** Optional handler for change of visibility for popover content, for control */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional handler for change of visibility for popover content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n  /** Optional boolean to control open state of popover externally */\n  open?: boolean;\n  /**\n   * Location of the popover content relative to anchor element\n   * @defaultValue \"bottom\"\n   */\n  placement?: Placement;\n};\n\ntype AriaPopoverProps = {\n  \"data-testid\"?: string;\n  /** Optional handler for change of visibility for overlaid content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n} & ReactAriaPopoverProps;\n/**\n * AriaPopover: This component extends Popover from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - data-testid\n *  - onContentChangeVisibility\n */\nexport const AriaPopover = forwardRef<HTMLElement, AriaPopoverProps>(\n  function AriaPopover(\n    { children: childrenProp, onChangeContentVisibility, ...otherProps },\n    ref,\n  ): ReactElement {\n    return (\n      <ReactAriaPopover\n        ref={ref}\n        {...mergeProps(\n          {\n            offset: 8,\n            containerPadding: 16,\n            className: classNames([\n              boxStyles.box,\n              boxStyles.flex,\n              boxStyles.column,\n              styles.popover,\n            ]),\n          },\n          otherProps,\n        )}\n      >\n        {composeRenderProps(\n          childrenProp,\n          (children, { isEntering, isExiting }) => (\n            <>\n              <OverlayVisibility\n                isEntering={isEntering}\n                isExiting={isExiting}\n                onChange={onChangeContentVisibility}\n              />\n              {children}\n            </>\n          ),\n        )}\n      </ReactAriaPopover>\n    );\n  },\n);\n\n/**\n * [Popover](https://cambly-syntax.vercel.app/?path=/docs/components-popover--docs) displays contextual information on hover or focus.\n *\n * Popover content is hidden by default and shown on click or focus.\n * The content is hidden again when the user mouses out of the trigger element or blurs the trigger element or presses Escape\n *\n * Example Usage:\n ```\n  <Popover\n    placement=\"bottom-start\"\n    initialOpen\n    content={(\n      <Box padding={2} maxWidth={400}>\n        ... some content goes here\n      </Box>\n    )}\n  >\n      <Button text=\"Trigger me\" />\n  </Popover>\n ```\n */\nconst Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(\n  props,\n  ref,\n): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    accessibilityLabel,\n    accessibilityCloseLabel,\n    children,\n    content,\n    initialOpen,\n    modal: modalProp,\n    onOpenChange,\n    onChangeContentVisibility,\n    open,\n    placement = \"bottom\",\n  } = props;\n\n  const modal = !children || modalProp;\n\n  const modalNode = (\n    <ModalDialog\n      ref={ref}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityCloseLabel={accessibilityCloseLabel}\n      data-testid={dataTestId}\n      initialOpen={initialOpen}\n      onChangeContentVisibility={onChangeContentVisibility}\n      onOpenChange={onOpenChange}\n      open={open}\n    >\n      {content}\n    </ModalDialog>\n  );\n\n  const popoverNode = (\n    <AriaPopover\n      ref={ref}\n      placement={syntaxToReactAriaPlacement(placement)}\n      onChangeContentVisibility={onChangeContentVisibility}\n    >\n      <Dialog accessibilityLabel={accessibilityLabel} data-testid={dataTestId}>\n        {content}\n      </Dialog>\n    </AriaPopover>\n  );\n\n  if (!children) return modalNode;\n  return (\n    <ReactAriaDialogTrigger\n      defaultOpen={initialOpen}\n      isOpen={open}\n      onOpenChange={onOpenChange}\n    >\n      {<Triggerable>{children}</Triggerable>}\n      {modal ? modalNode : popoverNode}\n    </ReactAriaDialogTrigger>\n  );\n});\n\nexport default Popover;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Popover/Popover.module.css\"; export default {\"popover\":\"_popover_158cf_1\"}"]}

package/dist/__chunks/{2JWMSFS7.js → E4BJX2H5.js}

@@ -1,6 +1,6 @@
 import {
   Box_default
-} from "./PYNS67IV.js";
+} from "./TJHCYMPV.js";
 
 // src/Modal/Layer.tsx
 import { createPortal } from "react-dom";
@@ -28,4 +28,4 @@ function Layer({
 export {
   Layer
 };
-//# sourceMappingURL=2JWMSFS7.js.map
+//# sourceMappingURL=E4BJX2H5.js.map

package/dist/__chunks/{XBWCYGQ2.cjs → EBNDJEOG.cjs}

@@ -6,9 +6,6 @@ var _36B62A3Zcjs = require('./36B62A3Z.cjs');
 var _3HVG5AGOcjs = require('./3HVG5AGO.cjs');
 
 
-var _ARYAYAXHcjs = require('./ARYAYAXH.cjs');
-
-
 var _TEJLBWXVcjs = require('./TEJLBWXV.cjs');
 
 
@@ -17,6 +14,9 @@ var _PQIPUPQ2cjs = require('./PQIPUPQ2.cjs');
 
 var _4ICD552Dcjs = require('./4ICD552D.cjs');
 
+
+var _UNZBENAEcjs = require('./UNZBENAE.cjs');
+
 // src/LinkButton/LinkButton.tsx
 var _react = require('react');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
@@ -74,7 +74,7 @@ var LinkButton = _react.forwardRef.call(void 0,
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _ARYAYAXHcjs.Typography_default,
+            _UNZBENAEcjs.Typography_default,
             {
               color: _TEJLBWXVcjs.foregroundTypographyColor.call(void 0, color),
               size: _36B62A3Zcjs.textVariant_default[size],
@@ -93,4 +93,4 @@ var LinkButton_default = LinkButton;
 
 
 exports.LinkButton_default = LinkButton_default;
-//# sourceMappingURL=XBWCYGQ2.cjs.map
+//# sourceMappingURL=EBNDJEOG.cjs.map

package/dist/__chunks/{MUHQ73PC.cjs → EWCLQBKV.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _JMKXHLVZcjs = require('./JMKXHLVZ.cjs');
+var _W7CSNF2Mcjs = require('./W7CSNF2M.cjs');
 
 
-var _CY6YL5T4cjs = require('./CY6YL5T4.cjs');
+var _5SMR5MWYcjs = require('./5SMR5MWY.cjs');
 
 
 var _I64JGYX7cjs = require('./I64JGYX7.cjs');
@@ -43,13 +43,14 @@ function AvatarInternal({
         className: _classnames2.default.call(void 0, Avatar_module_default.avatarImage, Avatar_module_default[size])
       }
     ),
-    icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CY6YL5T4cjs.Box_default, { display: "flex", position: "relative", justifyContent: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _CY6YL5T4cjs.Box_default,
+    icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5SMR5MWYcjs.Box_default, { display: "flex", position: "relative", justifyContent: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _5SMR5MWYcjs.Box_default,
       {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         position: "absolute",
+        backgroundColor: "white",
         dangerouslySetInlineStyle: {
           __style: _I64JGYX7cjs.__spreadValues.call(void 0, {
             border: "1px solid white"
@@ -67,10 +68,10 @@ var Avatar = ({
   size = "md",
   src
 }) => {
-  const avatarGroupContext = _JMKXHLVZcjs.useAvatarGroup.call(void 0, );
+  const avatarGroupContext = _W7CSNF2Mcjs.useAvatarGroup.call(void 0, );
   if (avatarGroupContext !== null) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _CY6YL5T4cjs.Box_default,
+      _5SMR5MWYcjs.Box_default,
       {
         position: "relative",
         dangerouslySetInlineStyle: {
@@ -79,7 +80,7 @@ var Avatar = ({
           }
         },
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _CY6YL5T4cjs.Box_default,
+          _5SMR5MWYcjs.Box_default,
           {
             display: "flex",
             alignItems: "center",
@@ -115,4 +116,4 @@ var Avatar_default = Avatar;
 
 
 exports.Avatar_default = Avatar_default;
-//# sourceMappingURL=MUHQ73PC.cjs.map
+//# sourceMappingURL=EWCLQBKV.cjs.map

package/dist/__chunks/EWCLQBKV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,eAAc,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;ADgCvP,SACE,KADF;AA1BJ,IAAM,mBAAmB;AAAA,EACvB,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,IAAI,iBAAiB,IAAI,QAAQ,IAAI,OAAO,GAAG;AAC/D;AAEA,IAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAKiB;AACf,SACE,qBAAC,SAAI,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC,GACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW,WAAW,sBAAO,aAAa,sBAAO,IAAI,CAAC;AAAA;AAAA,IACxD;AAAA,IACC,QACC,oBAAC,eAAI,SAAQ,QAAO,UAAS,YAAW,gBAAe,OACrD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,UAAS;AAAA,QACT,iBAAgB;AAAA,QAChB,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,QAAQ;AAAA,aACL,iBAAiB,IAAI;AAAA,QAE5B;AAAA,QACA,UAAS;AAAA,QAER;AAAA;AAAA,IACH,GACF;AAAA,KAEJ;AAEJ;AAKA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAyBmB;AACjB,QAAM,qBAAqB,eAAe;AAE1C,MAAI,uBAAuB,MAAM;AAC/B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,iBAAiB,aAAa,mBAAmB,IAAI;AAAA,UACvD;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,iBAAgB;AAAA,YAChB,UAAS;AAAA,YAET;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,MAAM,mBAAmB;AAAA,gBACzB;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ","sourcesContent":["import { type ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\nimport Box from \"../Box/Box\";\nimport { useAvatarGroup } from \"../AvatarGroup/AvatarGroup\";\n\nconst sizeToIconStyles = {\n  sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n  md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },\n  lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },\n  xl: { bottom: 12, marginInlineEnd: 12, height: 16, width: 16 },\n} as const;\n\nconst sizeToMargin = {\n  sm: -16,\n  md: -28,\n  lg: -48,\n  xl: -88,\n} as const;\n\nfunction AvatarInternal({\n  accessibilityLabel,\n  icon,\n  size = \"md\",\n  src,\n}: {\n  accessibilityLabel: string;\n  icon?: React.ReactElement;\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n  src: string;\n}): ReactElement {\n  return (\n    <div className={classNames(styles.avatar, styles[size])}>\n      <img\n        alt={accessibilityLabel}\n        src={src}\n        className={classNames(styles.avatarImage, styles[size])}\n      />\n      {icon && (\n        <Box display=\"flex\" position=\"relative\" justifyContent=\"end\">\n          <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            position=\"absolute\"\n            backgroundColor=\"white\"\n            dangerouslySetInlineStyle={{\n              __style: {\n                border: \"1px solid white\",\n                ...sizeToIconStyles[size],\n              },\n            }}\n            rounding=\"full\"\n          >\n            {icon}\n          </Box>\n        </Box>\n      )}\n    </div>\n  );\n}\n\n/**\n * [Avatar](https://cambly-syntax.vercel.app/?path=/docs/components-avatar--docs) is a circular image that represents a user.\n */\nconst Avatar = ({\n  accessibilityLabel,\n  icon,\n  size = \"md\",\n  src,\n}: {\n  /**\n   * Alt text to use for the image.\n   * This should describe the image to people using screen readers.\n   */\n  accessibilityLabel: string;\n  /**\n   * optional icon that appears on the bottom corner of the avatar\n   */\n  icon?: React.ReactElement;\n  /**\n   * Size of the avatar.\n   *\n   * * `sm`: 24px\n   * * `md`: 40px\n   * * `lg`: 72px\n   * * `xl`: 128px\n   *\n   * @defaultValue `md`\n   */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\n}): JSX.Element => {\n  const avatarGroupContext = useAvatarGroup();\n\n  if (avatarGroupContext !== null) {\n    return (\n      <Box\n        position=\"relative\"\n        dangerouslySetInlineStyle={{\n          __style: {\n            marginInlineEnd: sizeToMargin[avatarGroupContext.size],\n          },\n        }}\n      >\n        <Box\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          backgroundColor=\"white\"\n          rounding=\"full\"\n        >\n          <AvatarInternal\n            accessibilityLabel={accessibilityLabel}\n            icon={icon}\n            size={avatarGroupContext.size}\n            src={src}\n          />\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <AvatarInternal\n      accessibilityLabel={accessibilityLabel}\n      icon={icon}\n      size={size}\n      src={src}\n    />\n  );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_vflu6_1\",\"avatarImage\":\"_avatarImage_vflu6_5\",\"sm\":\"_sm_vflu6_14\",\"md\":\"_md_vflu6_19\",\"lg\":\"_lg_vflu6_24\",\"xl\":\"_xl_vflu6_29\"}"]}

package/dist/__chunks/{GBJX7OPK.cjs → FLFY7QSS.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _CY6YL5T4cjs = require('./CY6YL5T4.cjs');
+var _5SMR5MWYcjs = require('./5SMR5MWY.cjs');
 
 
-var _ARYAYAXHcjs = require('./ARYAYAXH.cjs');
+var _UNZBENAEcjs = require('./UNZBENAE.cjs');
 
 // css-module:./Badge.module.css#css-module
 var Badge_module_default = { "icon": "_icon_1g9xb_1" };
@@ -24,17 +24,17 @@ var Badge = ({
   text,
   color = "primary700"
 }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  _CY6YL5T4cjs.Box_default,
+  _5SMR5MWYcjs.Box_default,
   {
     display: "inlineBlock",
     paddingX: 2,
     paddingY: 1,
     rounding: "full",
     backgroundColor: color,
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ARYAYAXHcjs.Typography_default, { color: textColorForBackgroundColor(color), size: 100, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CY6YL5T4cjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _UNZBENAEcjs.Typography_default, { color: textColorForBackgroundColor(color), size: 100, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _5SMR5MWYcjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
       Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: Badge_module_default.icon }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _ARYAYAXHcjs.Typography_default,
+        _UNZBENAEcjs.Typography_default,
         {
           color: textColorForBackgroundColor(color),
           size: 100,
@@ -50,4 +50,4 @@ var Badge_default = Badge;
 
 
 exports.Badge_default = Badge_default;
-//# sourceMappingURL=GBJX7OPK.cjs.map
+//# sourceMappingURL=FLFY7QSS.cjs.map

package/dist/__chunks/{G6TO2NCY.js → HEJ3LVZG.js}

@@ -1,6 +1,6 @@
 import {
   Box_default
-} from "./PYNS67IV.js";
+} from "./TJHCYMPV.js";
 
 // src/AvatarGroup/AvatarGroup.tsx
 import {
@@ -38,4 +38,4 @@ export {
   useAvatarGroup,
   AvatarGroup
 };
-//# sourceMappingURL=G6TO2NCY.js.map
+//# sourceMappingURL=HEJ3LVZG.js.map

package/dist/__chunks/{3VUMTAUX.js → HOGVXDTO.js}

@@ -1,12 +1,12 @@
-import {
-  useIsHydrated
-} from "./YJ7YDIGB.js";
 import {
   foregroundColor
 } from "./CATJI2RJ.js";
 import {
   backgroundColor
 } from "./G4DDTGDI.js";
+import {
+  useIsHydrated
+} from "./YJ7YDIGB.js";
 
 // src/IconButton/IconButton.tsx
 import classNames from "classnames";
@@ -65,4 +65,4 @@ var IconButton_default = IconButton;
 export {
   IconButton_default
 };
-//# sourceMappingURL=3VUMTAUX.js.map
+//# sourceMappingURL=HOGVXDTO.js.map

package/dist/__chunks/ILJV2LMS.js

@@ -0,0 +1,162 @@
+import {
+  Box_module_default,
+  padding_module_default
+} from "./J7CMFWIU.js";
+import {
+  rounding_module_default
+} from "./TPMQI44L.js";
+import {
+  Typography_default
+} from "./4G4SS7O3.js";
+import {
+  colors_module_default
+} from "./ERXGNP37.js";
+import {
+  syntaxToReactAriaPlacement
+} from "./ARBLKS7D.js";
+import {
+  Triggerable_default
+} from "./IRL2C3B2.js";
+import {
+  OverlayVisibility
+} from "./XKDASN7N.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./LULBCTQR.js";
+
+// src/Tooltip/Tooltip.tsx
+import { forwardRef } from "react";
+import { mergeProps } from "react-aria";
+import {
+  composeRenderProps,
+  OverlayArrow as ReactAriaOverlayArrow,
+  Tooltip as ReactAriaTooltip,
+  TooltipTrigger as ReactAriaTooltipTrigger
+} from "react-aria-components";
+import classNames from "classnames";
+
+// css-module:./Tooltip.module.css#css-module
+var Tooltip_module_default = { "tooltip": "_tooltip_11pyp_1", "arrowPlacementtop": "_arrowPlacementtop_11pyp_5", "arrowPlacementbottom": "_arrowPlacementbottom_11pyp_10" };
+
+// src/Tooltip/Tooltip.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function TooltipArrow(props) {
+  return /* @__PURE__ */ jsx(ReactAriaOverlayArrow, __spreadProps(__spreadValues({}, props), { children: ({ placement }) => {
+    if (placement === "center")
+      return null;
+    if (placement === "left")
+      return null;
+    if (placement === "right")
+      return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames([
+          Box_module_default.block,
+          Tooltip_module_default[`arrowPlacement${placement}`]
+        ]),
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: classNames([Box_module_default.block]),
+            width: 40,
+            height: 5,
+            viewBox: "0 0 40 5",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx("path", { d: "M17 0L22 5H12L17 0Z", fill: "currentColor" })
+          }
+        )
+      }
+    );
+  } }));
+}
+var AriaTooltip = forwardRef(function AriaTooltip2(_a, ref) {
+  var _b = _a, { children: childrenProp, onChangeContentVisibility } = _b, otherProps = __objRest(_b, ["children", "onChangeContentVisibility"]);
+  const className = classNames([
+    Box_module_default.box,
+    colors_module_default.gray900Color,
+    colors_module_default.gray900BackgroundColor,
+    padding_module_default.paddingY2,
+    padding_module_default.paddingX3,
+    rounding_module_default.roundingsm,
+    Tooltip_module_default.tooltip
+  ]);
+  return /* @__PURE__ */ jsx(
+    ReactAriaTooltip,
+    __spreadProps(__spreadValues({
+      ref
+    }, mergeProps(
+      {
+        className,
+        offset: 8,
+        crossOffset: 0
+      },
+      otherProps
+    )), {
+      children: composeRenderProps(
+        childrenProp,
+        (children, { isEntering, isExiting }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TooltipArrow, {}),
+          /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "white", children }),
+          /* @__PURE__ */ jsx(
+            OverlayVisibility,
+            {
+              isEntering,
+              isExiting,
+              onChange: onChangeContentVisibility
+            }
+          )
+        ] })
+      )
+    })
+  );
+});
+var Tooltip = forwardRef(function Tooltip2(props, ref) {
+  const {
+    accessibilityLabel,
+    "data-testid": dataTestId,
+    delay = 0,
+    disabled = false,
+    children,
+    content,
+    initialOpen,
+    onChangeContentVisibility,
+    onOpenChange,
+    open,
+    placement = "top"
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    ReactAriaTooltipTrigger,
+    {
+      defaultOpen: initialOpen,
+      delay,
+      closeDelay: 500,
+      isDisabled: disabled,
+      isOpen: open,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(Triggerable_default, { children }),
+        /* @__PURE__ */ jsx(
+          AriaTooltip,
+          {
+            ref,
+            placement: syntaxToReactAriaPlacement(placement),
+            "aria-label": accessibilityLabel,
+            "data-testid": dataTestId,
+            onChangeContentVisibility,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+});
+var Tooltip_default = Tooltip;
+
+export {
+  AriaTooltip,
+  Tooltip_default
+};
+//# sourceMappingURL=ILJV2LMS.js.map

package/dist/__chunks/ILJV2LMS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","css-module:./Tooltip.module.css#css-module"],"sourcesContent":["import React, { forwardRef, type ReactNode, type ReactElement } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n  composeRenderProps,\n  OverlayArrow as ReactAriaOverlayArrow,\n  type OverlayArrowProps as ReactAriaOverlayArrowProps,\n  Tooltip as ReactAriaTooltip,\n  TooltipTrigger as ReactAriaTooltipTrigger,\n  type TooltipProps as ReactAriaTooltipProps,\n} from \"react-aria-components\";\n\nimport Triggerable from \"../react-aria-utils/Triggerable\";\nimport Typography from \"../Typography/Typography\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n  type Placement,\n  syntaxToReactAriaPlacement,\n} from \"../react-aria-utils/placement\";\n\nfunction TooltipArrow(props: ReactAriaOverlayArrowProps): ReactElement {\n  return (\n    <ReactAriaOverlayArrow {...props}>\n      {({ placement }) => {\n        if (placement === \"center\") return null;\n        if (placement === \"left\") return null;\n        if (placement === \"right\") return null;\n        return (\n          <div\n            className={classNames([\n              boxStyles.block,\n              styles[`arrowPlacement${placement}`],\n            ])}\n          >\n            <svg\n              className={classNames([boxStyles.block])}\n              width={40}\n              height={5}\n              viewBox=\"0 0 40 5\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M17 0L22 5H12L17 0Z\" fill=\"currentColor\" />\n            </svg>\n          </div>\n        );\n      }}\n    </ReactAriaOverlayArrow>\n  );\n}\n\n/**\n * AriaTooltip: This component extends Tooltip from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - onContentChangeVisibility\n */\nexport const AriaTooltip = forwardRef<\n  HTMLDivElement,\n  ReactAriaTooltipProps & {\n    /** Optional handler for change of visibility for overlaid content, for analytics timing */\n    onChangeContentVisibility?: (visible: boolean) => void;\n  }\n>(function AriaTooltip(\n  { children: childrenProp, onChangeContentVisibility, ...otherProps },\n  ref,\n): ReactElement {\n  const className = classNames([\n    boxStyles.box,\n    colorStyles.gray900Color,\n    colorStyles.gray900BackgroundColor,\n    paddingStyles.paddingY2,\n    paddingStyles.paddingX3,\n    roundingStyles.roundingsm,\n    styles.tooltip,\n  ]);\n  return (\n    <ReactAriaTooltip\n      ref={ref}\n      {...mergeProps(\n        {\n          className,\n          offset: 8,\n          crossOffset: 0,\n        },\n        otherProps,\n      )}\n    >\n      {composeRenderProps(\n        childrenProp,\n        (children, { isEntering, isExiting }) => (\n          <>\n            <TooltipArrow />\n            <Typography size={100} color=\"white\">\n              {children}\n            </Typography>\n            <OverlayVisibility\n              isEntering={isEntering}\n              isExiting={isExiting}\n              onChange={onChangeContentVisibility}\n            />\n          </>\n        ),\n      )}\n    </ReactAriaTooltip>\n  );\n});\n\ntype TooltipProps = {\n  /**\n   * Test id for the floating tooltip\n   */\n  \"data-testid\"?: string;\n  /**\n   * How long a user hovers before tooltip shows (in ms)\n   * @defaultValue 0\n   */\n  delay?: number;\n  /** Optional boolean to disable tooltip trigger behavior */\n  disabled?: boolean;\n  /** Optional aria-label for the tooltip (content element) */\n  accessibilityLabel?: string;\n  /** Required trigger element */\n  children: ReactElement;\n  /** Content to be shown inside the tooltip. */\n  content: ReactNode;\n  /** If set to true the tooltip will render initially open */\n  initialOpen?: boolean;\n  /** Optional handler for change of visibility for popover content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n  /** Optional handler for change of visibility for popover content, for control */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional boolean to control open state of tooltip externally */\n  open?: boolean;\n  /**\n   * Location of the tooltip content relative to anchor element\n   * @defaultValue \"top-end\"\n   */\n  placement?: Placement;\n};\n/**\n * [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/components-tooltip--docs) displays contextual information on hover or focus.\n *\n * Tooltip content is hidden by default and shown on hover or focus.\n * The content is hidden again when the user mouses out of the trigger element or blurs the trigger element or presses Escape\n *\n * Example Usage:\n ```\n  <Tooltip\n    delay={200}\n    placement=\"bottom-start\"\n    initialOpen\n    content={(\n      <Box padding={2}>\n        ... some content goes here\n      </Box>\n    )}\n  >\n      <Button text=\"Trigger me\" />\n  </Tooltip>\n ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  props,\n  ref,\n): ReactElement {\n  const {\n    accessibilityLabel,\n    \"data-testid\": dataTestId,\n    delay = 0,\n    disabled = false,\n    children,\n    content,\n    initialOpen,\n    onChangeContentVisibility,\n    onOpenChange,\n    open,\n    placement = \"top\",\n  } = props;\n\n  return (\n    <ReactAriaTooltipTrigger\n      defaultOpen={initialOpen}\n      delay={delay}\n      closeDelay={500}\n      isDisabled={disabled}\n      isOpen={open}\n      onOpenChange={onOpenChange}\n    >\n      {/* transfer focus handlers to child element if it is focusable */}\n      <Triggerable>{children}</Triggerable>\n      <AriaTooltip\n        ref={ref}\n        placement={syntaxToReactAriaPlacement(placement)}\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        onChangeContentVisibility={onChangeContentVisibility}\n      >\n        {content}\n      </AriaTooltip>\n    </ReactAriaTooltipTrigger>\n  );\n});\n\nexport default Tooltip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tooltip/Tooltip.module.css\"; export default {\"tooltip\":\"_tooltip_11pyp_1\",\"arrowPlacementtop\":\"_arrowPlacementtop_11pyp_5\",\"arrowPlacementbottom\":\"_arrowPlacementbottom_11pyp_10\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAqD;AACrE,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA,gBAAgB;AAAA,EAEhB,WAAW;AAAA,EACX,kBAAkB;AAAA,OAEb;AAKP,OAAO,gBAAgB;;;ACduE,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,qBAAoB,8BAA6B,wBAAuB,iCAAgC;;;AD8CrO,SAgDJ,UAhDI,KAgDJ,YAhDI;AArBd,SAAS,aAAa,OAAiD;AACrE,SACE,oBAAC,wDAA0B,QAA1B,EACE,WAAC,EAAE,UAAU,MAAM;AAClB,QAAI,cAAc;AAAU,aAAO;AACnC,QAAI,cAAc;AAAQ,aAAO;AACjC,QAAI,cAAc;AAAS,aAAO;AAClC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW;AAAA,UACpB,mBAAU;AAAA,UACV,uBAAO,iBAAiB,WAAW;AAAA,QACrC,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,WAAW,CAAC,mBAAU,KAAK,CAAC;AAAA,YACvC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR,OAAM;AAAA,YAEN,8BAAC,UAAK,GAAE,uBAAsB,MAAK,gBAAe;AAAA;AAAA,QACpD;AAAA;AAAA,IACF;AAAA,EAEJ,IACF;AAEJ;AAOO,IAAM,cAAc,WAMzB,SAASA,aACT,IACA,KACc;AAFd,eAAE,YAAU,cAAc,0BAnE5B,IAmEE,IAAwD,uBAAxD,IAAwD,CAAtD,YAAwB;AAG1B,QAAM,YAAY,WAAW;AAAA,IAC3B,mBAAU;AAAA,IACV,sBAAY;AAAA,IACZ,sBAAY;AAAA,IACZ,uBAAc;AAAA,IACd,uBAAc;AAAA,IACd,wBAAe;AAAA,IACf,uBAAO;AAAA,EACT,CAAC;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,OACI;AAAA,MACF;AAAA,QACE;AAAA,QACA,QAAQ;AAAA,QACR,aAAa;AAAA,MACf;AAAA,MACA;AAAA,IACF,IATD;AAAA,MAWE;AAAA,QACC;AAAA,QACA,CAAC,UAAU,EAAE,YAAY,UAAU,MACjC,iCACE;AAAA,8BAAC,gBAAa;AAAA,UACd,oBAAC,sBAAW,MAAM,KAAK,OAAM,SAC1B,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA;AAAA,UACZ;AAAA,WACF;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ,CAAC;AAwDD,IAAM,UAAU,WAAyC,SAASC,SAChE,OACA,KACc;AACd,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR;AAAA,MAGA;AAAA,4BAAC,uBAAa,UAAS;AAAA,QACvB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,2BAA2B,SAAS;AAAA,YAC/C,cAAY;AAAA,YACZ,eAAa;AAAA,YACb;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,kBAAQ;","names":["AriaTooltip","Tooltip"]}

package/dist/__chunks/IRL2C3B2.js

@@ -0,0 +1,70 @@
+import {
+  useDomRefSyntheticEventBridge
+} from "./5ZDZZL2P.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./LULBCTQR.js";
+
+// src/react-aria-utils/Triggerable.tsx
+import React, {
+  forwardRef
+} from "react";
+import { mergeProps, useButton, useFocusable, useHover } from "react-aria";
+import { useObjectRef, mergeRefs } from "@react-aria/utils";
+import { useHasTabbableChild } from "@react-aria/focus";
+
+// css-module:./Triggerable.module.css#css-module
+var Triggerable_module_default = { "trigger": "_trigger_1efnf_1" };
+
+// src/react-aria-utils/Triggerable.tsx
+import { jsx } from "react/jsx-runtime";
+function cloneWithRef(children, parentRef) {
+  return React.cloneElement(children, {
+    ref: children.ref ? mergeRefs(parentRef, children.ref) : parentRef
+  });
+}
+var Triggerable = forwardRef(function Triggerable2(props, forwardedRef) {
+  const { children } = props;
+  const wrapperDomRef = useObjectRef(forwardedRef);
+  const childRef = useObjectRef(null);
+  const hasTabbableChild = useHasTabbableChild(wrapperDomRef);
+  const focusableRef = hasTabbableChild ? childRef : wrapperDomRef;
+  const { focusableProps } = useFocusable({}, focusableRef);
+  const { buttonProps } = useButton({ elementType: "span" }, focusableRef);
+  const { hoverProps } = useHover({});
+  const _a = focusableProps, { onFocus, onBlur, onKeyDown, onKeyUp } = _a, otherFocusableProps = __objRest(_a, ["onFocus", "onBlur", "onKeyDown", "onKeyUp"]);
+  const focusableHandlerProps = { onFocus, onBlur, onKeyDown, onKeyUp };
+  const child = children ? cloneWithRef(children, childRef) : children;
+  useDomRefSyntheticEventBridge(focusableHandlerProps, childRef, {
+    enabled: hasTabbableChild
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    __spreadProps(__spreadValues({
+      ref: wrapperDomRef
+    }, mergeProps(
+      buttonProps,
+      hasTabbableChild ? {} : focusableHandlerProps,
+      otherFocusableProps,
+      hoverProps,
+      {
+        className: Triggerable_module_default.trigger,
+        style: {
+          display: "inline-block",
+          verticalAlign: "text-top"
+        }
+      }
+    )), {
+      tabIndex: hasTabbableChild ? void 0 : 0,
+      children: child
+    })
+  );
+});
+var Triggerable_default = Triggerable;
+
+export {
+  Triggerable_default
+};
+//# sourceMappingURL=IRL2C3B2.js.map

package/dist/__chunks/IRL2C3B2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react-aria-utils/Triggerable.tsx","css-module:./Triggerable.module.css#css-module"],"sourcesContent":["import React, {\n  forwardRef,\n  type ReactElement,\n  type Ref,\n  type RefAttributes,\n} from \"react\";\nimport { mergeProps, useButton, useFocusable, useHover } from \"react-aria\";\nimport { useObjectRef, mergeRefs } from \"@react-aria/utils\";\nimport { useHasTabbableChild } from \"@react-aria/focus\";\nimport { useDomRefSyntheticEventBridge } from \"./useDomRefSyntheticEventBridge\";\nimport styles from \"./Triggerable.module.css\";\n\ntype ReactElementWithRef<T = unknown> = ReactElement & RefAttributes<T>;\nfunction cloneWithRef<T>(children: ReactElementWithRef<T>, parentRef: Ref<T>) {\n  // No need for the isValidElement check since children is already typed as a ReactElement\n  return React.cloneElement(children, {\n    ref: children.ref ? mergeRefs<T>(parentRef, children.ref) : parentRef,\n  });\n}\n\nconst Triggerable = forwardRef<\n  HTMLSpanElement,\n  { children?: ReactElement | (ReactElement & { ref?: Ref<Element> }) }\n>(function Triggerable(props, forwardedRef) {\n  const { children } = props;\n  const wrapperDomRef = useObjectRef(forwardedRef);\n  const childRef = useObjectRef<HTMLElement>(null);\n  const hasTabbableChild = useHasTabbableChild(wrapperDomRef);\n  const focusableRef = hasTabbableChild ? childRef : wrapperDomRef;\n  const { focusableProps } = useFocusable({}, focusableRef);\n  const { buttonProps } = useButton({ elementType: \"span\" }, focusableRef);\n  const { hoverProps } = useHover({});\n  // focus handlers are attached to tabbable child if present\n  const { onFocus, onBlur, onKeyDown, onKeyUp, ...otherFocusableProps } =\n    focusableProps;\n  const focusableHandlerProps = { onFocus, onBlur, onKeyDown, onKeyUp };\n  // attach focus handlers to tabbable child if present\n  const child = children ? cloneWithRef(children, childRef) : children;\n  useDomRefSyntheticEventBridge(focusableHandlerProps, childRef, {\n    enabled: hasTabbableChild,\n  });\n\n  return (\n    <span\n      ref={wrapperDomRef}\n      {...mergeProps(\n        buttonProps,\n        hasTabbableChild ? {} : focusableHandlerProps,\n        otherFocusableProps,\n        hoverProps,\n        {\n          className: styles.trigger,\n          style: {\n            display: \"inline-block\",\n            verticalAlign: \"text-top\",\n          },\n        },\n      )}\n      tabIndex={hasTabbableChild ? undefined : 0}\n    >\n      {child}\n    </span>\n  );\n});\n\nexport default Triggerable;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/react-aria-utils/Triggerable.module.css\"; export default {\"trigger\":\"_trigger_1efnf_1\"}"],"mappings":";;;;;;;;;;AAAA,OAAO;AAAA,EACL;AAAA,OAIK;AACP,SAAS,YAAY,WAAW,cAAc,gBAAgB;AAC9D,SAAS,cAAc,iBAAiB;AACxC,SAAS,2BAA2B;;;ACRuE,IAAO,6BAAQ,EAAC,WAAU,mBAAkB;;;AD2CnJ;AA9BJ,SAAS,aAAgB,UAAkC,WAAmB;AAE5E,SAAO,MAAM,aAAa,UAAU;AAAA,IAClC,KAAK,SAAS,MAAM,UAAa,WAAW,SAAS,GAAG,IAAI;AAAA,EAC9D,CAAC;AACH;AAEA,IAAM,cAAc,WAGlB,SAASA,aAAY,OAAO,cAAc;AAC1C,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,gBAAgB,aAAa,YAAY;AAC/C,QAAM,WAAW,aAA0B,IAAI;AAC/C,QAAM,mBAAmB,oBAAoB,aAAa;AAC1D,QAAM,eAAe,mBAAmB,WAAW;AACnD,QAAM,EAAE,eAAe,IAAI,aAAa,CAAC,GAAG,YAAY;AACxD,QAAM,EAAE,YAAY,IAAI,UAAU,EAAE,aAAa,OAAO,GAAG,YAAY;AACvE,QAAM,EAAE,WAAW,IAAI,SAAS,CAAC,CAAC;AAElC,QACE,qBADM,WAAS,QAAQ,WAAW,QAjCtC,IAkCI,IAD8C,gCAC9C,IAD8C,CAAxC,WAAS,UAAQ,aAAW;AAEpC,QAAM,wBAAwB,EAAE,SAAS,QAAQ,WAAW,QAAQ;AAEpE,QAAM,QAAQ,WAAW,aAAa,UAAU,QAAQ,IAAI;AAC5D,gCAA8B,uBAAuB,UAAU;AAAA,IAC7D,SAAS;AAAA,EACX,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,OACD;AAAA,MACF;AAAA,MACA,mBAAmB,CAAC,IAAI;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,QACE,WAAW,2BAAO;AAAA,QAClB,OAAO;AAAA,UACL,SAAS;AAAA,UACT,eAAe;AAAA,QACjB;AAAA,MACF;AAAA,IACF,IAdD;AAAA,MAeC,UAAU,mBAAmB,SAAY;AAAA,MAExC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,sBAAQ;","names":["Triggerable"]}

package/dist/__chunks/J7CMFWIU.js

@@ -0,0 +1,11 @@
+// css-module:../Box/padding.module.css#css-module
+var padding_module_default = { "paddingX0": "_paddingX0_1aqye_2", "paddingX1": "_paddingX1_1aqye_7", "paddingX2": "_paddingX2_1aqye_12", "paddingX3": "_paddingX3_1aqye_17", "paddingX4": "_paddingX4_1aqye_22", "paddingX5": "_paddingX5_1aqye_27", "paddingX6": "_paddingX6_1aqye_32", "paddingX7": "_paddingX7_1aqye_37", "paddingX8": "_paddingX8_1aqye_42", "paddingX9": "_paddingX9_1aqye_47", "paddingX10": "_paddingX10_1aqye_52", "paddingX11": "_paddingX11_1aqye_57", "paddingX12": "_paddingX12_1aqye_62", "paddingY0": "_paddingY0_1aqye_67", "paddingY1": "_paddingY1_1aqye_72", "paddingY2": "_paddingY2_1aqye_77", "paddingY3": "_paddingY3_1aqye_82", "paddingY4": "_paddingY4_1aqye_87", "paddingY5": "_paddingY5_1aqye_92", "paddingY6": "_paddingY6_1aqye_97", "paddingY7": "_paddingY7_1aqye_102", "paddingY8": "_paddingY8_1aqye_107", "paddingY9": "_paddingY9_1aqye_112", "paddingY10": "_paddingY10_1aqye_117", "paddingY11": "_paddingY11_1aqye_122", "paddingY12": "_paddingY12_1aqye_127", "paddingX0Small": "_paddingX0Small_1aqye_134", "paddingX1Small": "_paddingX1Small_1aqye_139", "paddingX2Small": "_paddingX2Small_1aqye_144", "paddingX3Small": "_paddingX3Small_1aqye_149", "paddingX4Small": "_paddingX4Small_1aqye_154", "paddingX5Small": "_paddingX5Small_1aqye_159", "paddingX6Small": "_paddingX6Small_1aqye_164", "paddingX7Small": "_paddingX7Small_1aqye_169", "paddingX8Small": "_paddingX8Small_1aqye_174", "paddingX9Small": "_paddingX9Small_1aqye_179", "paddingX10Small": "_paddingX10Small_1aqye_184", "paddingX11Small": "_paddingX11Small_1aqye_189", "paddingX12Small": "_paddingX12Small_1aqye_194", "paddingY0Small": "_paddingY0Small_1aqye_199", "paddingY1Small": "_paddingY1Small_1aqye_204", "paddingY2Small": "_paddingY2Small_1aqye_209", "paddingY3Small": "_paddingY3Small_1aqye_214", "paddingY4Small": "_paddingY4Small_1aqye_219", "paddingY5Small": "_paddingY5Small_1aqye_224", "paddingY6Small": "_paddingY6Small_1aqye_229", "paddingY7Small": "_paddingY7Small_1aqye_234", "paddingY8Small": "_paddingY8Small_1aqye_239", "paddingY9Small": "_paddingY9Small_1aqye_244", "paddingY10Small": "_paddingY10Small_1aqye_249", "paddingY11Small": "_paddingY11Small_1aqye_254", "paddingY12Small": "_paddingY12Small_1aqye_259", "paddingX0Large": "_paddingX0Large_1aqye_267", "paddingX1Large": "_paddingX1Large_1aqye_272", "paddingX2Large": "_paddingX2Large_1aqye_277", "paddingX3Large": "_paddingX3Large_1aqye_282", "paddingX4Large": "_paddingX4Large_1aqye_287", "paddingX5Large": "_paddingX5Large_1aqye_292", "paddingX6Large": "_paddingX6Large_1aqye_297", "paddingX7Large": "_paddingX7Large_1aqye_302", "paddingX8Large": "_paddingX8Large_1aqye_307", "paddingX9Large": "_paddingX9Large_1aqye_312", "paddingX10Large": "_paddingX10Large_1aqye_317", "paddingX11Large": "_paddingX11Large_1aqye_322", "paddingX12Large": "_paddingX12Large_1aqye_327", "paddingY0Large": "_paddingY0Large_1aqye_332", "paddingY1Large": "_paddingY1Large_1aqye_337", "paddingY2Large": "_paddingY2Large_1aqye_342", "paddingY3Large": "_paddingY3Large_1aqye_347", "paddingY4Large": "_paddingY4Large_1aqye_352", "paddingY5Large": "_paddingY5Large_1aqye_357", "paddingY6Large": "_paddingY6Large_1aqye_362", "paddingY7Large": "_paddingY7Large_1aqye_367", "paddingY8Large": "_paddingY8Large_1aqye_372", "paddingY9Large": "_paddingY9Large_1aqye_377", "paddingY10Large": "_paddingY10Large_1aqye_382", "paddingY11Large": "_paddingY11Large_1aqye_387", "paddingY12Large": "_paddingY12Large_1aqye_392" };
+
+// css-module:../Box/Box.module.css#css-module
+var Box_module_default = { "box": "_box_bg9pe_1", "flexnone": "_flexnone_bg9pe_5", "flexgrow": "_flexgrow_bg9pe_9", "flexWrap": "_flexWrap_bg9pe_13", "alignItemscenter": "_alignItemscenter_bg9pe_18", "alignItemsstart": "_alignItemsstart_bg9pe_22", "alignItemsend": "_alignItemsend_bg9pe_26", "alignItemsstretch": "_alignItemsstretch_bg9pe_30", "alignItemsbaseline": "_alignItemsbaseline_bg9pe_34", "alignItemscenterSmall": "_alignItemscenterSmall_bg9pe_40", "alignItemsstartSmall": "_alignItemsstartSmall_bg9pe_44", "alignItemsendSmall": "_alignItemsendSmall_bg9pe_48", "alignItemsstretchSmall": "_alignItemsstretchSmall_bg9pe_52", "alignItemsbaselineSmall": "_alignItemsbaselineSmall_bg9pe_56", "alignItemscenterLarge": "_alignItemscenterLarge_bg9pe_63", "alignItemsstartLarge": "_alignItemsstartLarge_bg9pe_67", "alignItemsendLarge": "_alignItemsendLarge_bg9pe_71", "alignItemsstretchLarge": "_alignItemsstretchLarge_bg9pe_75", "alignItemsbaselineLarge": "_alignItemsbaselineLarge_bg9pe_79", "alignSelfcenter": "_alignSelfcenter_bg9pe_85", "alignSelfstart": "_alignSelfstart_bg9pe_89", "alignSelfend": "_alignSelfend_bg9pe_93", "alignSelfstretch": "_alignSelfstretch_bg9pe_97", "alignSelfbaseline": "_alignSelfbaseline_bg9pe_101", "alignSelfauto": "_alignSelfauto_bg9pe_105", "block": "_block_bg9pe_110", "flex": "_flex_bg9pe_5", "inlineBlock": "_inlineBlock_bg9pe_118", "none": "_none_bg9pe_122", "visuallyHidden": "_visuallyHidden_bg9pe_126", "blockSmall": "_blockSmall_bg9pe_140", "flexSmall": "_flexSmall_bg9pe_144", "inlineBlockSmall": "_inlineBlockSmall_bg9pe_148", "noneSmall": "_noneSmall_bg9pe_152", "visuallyHiddenSmall": "_visuallyHiddenSmall_bg9pe_156", "blockLarge": "_blockLarge_bg9pe_171", "flexLarge": "_flexLarge_bg9pe_175", "inlineBlockLarge": "_inlineBlockLarge_bg9pe_179", "noneLarge": "_noneLarge_bg9pe_183", "visuallyHiddenLarge": "_visuallyHiddenLarge_bg9pe_187", "column": "_column_bg9pe_201", "row": "_row_bg9pe_205", "columnSmall": "_columnSmall_bg9pe_211", "rowSmall": "_rowSmall_bg9pe_215", "columnLarge": "_columnLarge_bg9pe_222", "rowLarge": "_rowLarge_bg9pe_226", "gap0": "_gap0_bg9pe_232", "gap1": "_gap1_bg9pe_236", "gap2": "_gap2_bg9pe_240", "gap3": "_gap3_bg9pe_244", "gap4": "_gap4_bg9pe_248", "gap5": "_gap5_bg9pe_252", "gap6": "_gap6_bg9pe_256", "gap7": "_gap7_bg9pe_260", "gap8": "_gap8_bg9pe_264", "gap9": "_gap9_bg9pe_268", "gap10": "_gap10_bg9pe_272", "gap11": "_gap11_bg9pe_276", "gap12": "_gap12_bg9pe_280", "justifyContentcenter": "_justifyContentcenter_bg9pe_285", "justifyContentstart": "_justifyContentstart_bg9pe_289", "justifyContentend": "_justifyContentend_bg9pe_293", "justifyContentbetween": "_justifyContentbetween_bg9pe_297", "justifyContentaround": "_justifyContentaround_bg9pe_301", "justifyContentevenly": "_justifyContentevenly_bg9pe_305", "justifyContentcenterSmall": "_justifyContentcenterSmall_bg9pe_311", "justifyContentstartSmall": "_justifyContentstartSmall_bg9pe_315", "justifyContentendSmall": "_justifyContentendSmall_bg9pe_319", "justifyContentbetweenSmall": "_justifyContentbetweenSmall_bg9pe_323", "justifyContentaroundSmall": "_justifyContentaroundSmall_bg9pe_327", "justifyContentevenlySmall": "_justifyContentevenlySmall_bg9pe_331", "justifyContentcenterLarge": "_justifyContentcenterLarge_bg9pe_338", "justifyContentstartLarge": "_justifyContentstartLarge_bg9pe_342", "justifyContentendLarge": "_justifyContentendLarge_bg9pe_346", "justifyContentbetweenLarge": "_justifyContentbetweenLarge_bg9pe_350", "justifyContentaroundLarge": "_justifyContentaroundLarge_bg9pe_354", "justifyContentevenlyLarge": "_justifyContentevenlyLarge_bg9pe_358", "overflowvisible": "_overflowvisible_bg9pe_364", "overflowhidden": "_overflowhidden_bg9pe_368", "overflowscroll": "_overflowscroll_bg9pe_372", "overflowauto": "_overflowauto_bg9pe_376", "overflowinherit": "_overflowinherit_bg9pe_380", "overflowinitial": "_overflowinitial_bg9pe_384", "overflowXvisible": "_overflowXvisible_bg9pe_388", "overflowXhidden": "_overflowXhidden_bg9pe_392", "overflowXscroll": "_overflowXscroll_bg9pe_396", "overflowXauto": "_overflowXauto_bg9pe_400", "overflowXinherit": "_overflowXinherit_bg9pe_404", "overflowXinitial": "_overflowXinitial_bg9pe_408", "overflowYvisible": "_overflowYvisible_bg9pe_412", "overflowYhidden": "_overflowYhidden_bg9pe_416", "overflowYscroll": "_overflowYscroll_bg9pe_420", "overflowYauto": "_overflowYauto_bg9pe_424", "overflowYinherit": "_overflowYinherit_bg9pe_428", "overflowYinitial": "_overflowYinitial_bg9pe_432", "absolute": "_absolute_bg9pe_437", "fixed": "_fixed_bg9pe_441", "relative": "_relative_bg9pe_445", "sticky": "_sticky_bg9pe_449" };
+
+export {
+  padding_module_default,
+  Box_module_default
+};
+//# sourceMappingURL=J7CMFWIU.js.map