@cambly/syntax-core 10.2.2 → 10.4.0

package/dist/__chunks/6YHDE4TN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react-aria-utils/Triggerable.tsx","css-module:./Triggerable.module.css#css-module"],"names":["Triggerable"],"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","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\"}"]}

package/dist/__chunks/{BSWWGQAS.js → 7FFKVJMD.js}

@@ -3,7 +3,7 @@ import {
 } from "./2O6FDRTF.js";
 import {
   Typography_default
-} from "./F3ZST4RL.js";
+} from "./4G4SS7O3.js";
 import {
   useIsHydrated
 } from "./YJ7YDIGB.js";
@@ -108,4 +108,4 @@ var Checkbox_default = Checkbox;
 export {
   Checkbox_default
 };
-//# sourceMappingURL=BSWWGQAS.js.map
+//# sourceMappingURL=7FFKVJMD.js.map

package/dist/__chunks/{X7UNBJA5.js → AGEHF4UW.js}

@@ -1,9 +1,9 @@
 import {
   useAvatarGroup
-} from "./G6TO2NCY.js";
+} from "./HEJ3LVZG.js";
 import {
   Box_default
-} from "./PYNS67IV.js";
+} from "./TJHCYMPV.js";
 import {
   __spreadValues
 } from "./LULBCTQR.js";
@@ -50,6 +50,7 @@ function AvatarInternal({
         alignItems: "center",
         justifyContent: "center",
         position: "absolute",
+        backgroundColor: "white",
         dangerouslySetInlineStyle: {
           __style: __spreadValues({
             border: "1px solid white"
@@ -115,4 +116,4 @@ var Avatar_default = Avatar;
 export {
   Avatar_default
 };
-//# sourceMappingURL=X7UNBJA5.js.map
+//# sourceMappingURL=AGEHF4UW.js.map

package/dist/__chunks/AGEHF4UW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"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\"}"],"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;","names":[]}

package/dist/__chunks/ARBLKS7D.js

@@ -0,0 +1,17 @@
+// src/react-aria-utils/placement.ts
+var SYNTAX_TO_REACT_ARIA_PLACEMENT = {
+  top: "top start",
+  end: "top end",
+  bottom: "bottom end",
+  start: "bottom start"
+};
+function syntaxToReactAriaPlacement(placement) {
+  if (!placement)
+    return void 0;
+  return SYNTAX_TO_REACT_ARIA_PLACEMENT[placement];
+}
+
+export {
+  syntaxToReactAriaPlacement
+};
+//# sourceMappingURL=ARBLKS7D.js.map

package/dist/__chunks/ARBLKS7D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react-aria-utils/placement.ts"],"sourcesContent":["import { type Placement as ReactAriaPlacement } from \"@react-aria/overlays\";\n\nexport type Placement = \"top\" | \"end\" | \"bottom\" | \"start\";\n\nconst SYNTAX_TO_REACT_ARIA_PLACEMENT: Record<Placement, ReactAriaPlacement> = {\n  top: \"top start\",\n  end: \"top end\",\n  bottom: \"bottom end\",\n  start: \"bottom start\",\n} as const;\n\nexport function syntaxToReactAriaPlacement(\n  placement?: Placement,\n): ReactAriaPlacement | undefined {\n  if (!placement) return undefined;\n  return SYNTAX_TO_REACT_ARIA_PLACEMENT[placement];\n}\n"],"mappings":";AAIA,IAAM,iCAAwE;AAAA,EAC5E,KAAK;AAAA,EACL,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,SAAS,2BACd,WACgC;AAChC,MAAI,CAAC;AAAW,WAAO;AACvB,SAAO,+BAA+B,SAAS;AACjD;","names":[]}

package/dist/__chunks/AS6O55Z6.cjs

@@ -0,0 +1,162 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _VLUKODJDcjs = require('./VLUKODJD.cjs');
+
+
+var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
+
+
+var _UNZBENAEcjs = require('./UNZBENAE.cjs');
+
+
+var _NGUJFGACcjs = require('./NGUJFGAC.cjs');
+
+
+var _4EXO6IHDcjs = require('./4EXO6IHD.cjs');
+
+
+var _6YHDE4TNcjs = require('./6YHDE4TN.cjs');
+
+
+var _RFHPSEBFcjs = require('./RFHPSEBF.cjs');
+
+
+
+
+var _I64JGYX7cjs = require('./I64JGYX7.cjs');
+
+// src/Tooltip/Tooltip.tsx
+var _react = require('react');
+var _reactaria = require('react-aria');
+
+
+
+
+
+var _reactariacomponents = require('react-aria-components');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_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
+var _jsxruntime = require('react/jsx-runtime');
+function TooltipArrow(props) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.OverlayArrow, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, props), { children: ({ placement }) => {
+    if (placement === "center")
+      return null;
+    if (placement === "left")
+      return null;
+    if (placement === "right")
+      return null;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: _classnames2.default.call(void 0, [
+          _VLUKODJDcjs.Box_module_default.block,
+          Tooltip_module_default[`arrowPlacement${placement}`]
+        ]),
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "svg",
+          {
+            className: _classnames2.default.call(void 0, [_VLUKODJDcjs.Box_module_default.block]),
+            width: 40,
+            height: 5,
+            viewBox: "0 0 40 5",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M17 0L22 5H12L17 0Z", fill: "currentColor" })
+          }
+        )
+      }
+    );
+  } }));
+}
+var AriaTooltip = _react.forwardRef.call(void 0, function AriaTooltip2(_a, ref) {
+  var _b = _a, { children: childrenProp, onChangeContentVisibility } = _b, otherProps = _I64JGYX7cjs.__objRest.call(void 0, _b, ["children", "onChangeContentVisibility"]);
+  const className = _classnames2.default.call(void 0, [
+    _VLUKODJDcjs.Box_module_default.box,
+    _NGUJFGACcjs.colors_module_default.gray900Color,
+    _NGUJFGACcjs.colors_module_default.gray900BackgroundColor,
+    _VLUKODJDcjs.padding_module_default.paddingY2,
+    _VLUKODJDcjs.padding_module_default.paddingX3,
+    _7GJ2SD7Ocjs.rounding_module_default.roundingsm,
+    Tooltip_module_default.tooltip
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactariacomponents.Tooltip,
+    _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {
+      ref
+    }, _reactaria.mergeProps.call(void 0, 
+      {
+        className,
+        offset: 8,
+        crossOffset: 0
+      },
+      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, TooltipArrow, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _UNZBENAEcjs.Typography_default, { size: 100, color: "white", children }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _RFHPSEBFcjs.OverlayVisibility,
+            {
+              isEntering,
+              isExiting,
+              onChange: onChangeContentVisibility
+            }
+          )
+        ] })
+      )
+    })
+  );
+});
+var Tooltip = _react.forwardRef.call(void 0, function Tooltip2(props, ref) {
+  const {
+    accessibilityLabel,
+    "data-testid": dataTestId,
+    delay = 0,
+    disabled = false,
+    children,
+    content,
+    initialOpen,
+    onChangeContentVisibility,
+    onOpenChange,
+    open,
+    placement = "top"
+  } = props;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _reactariacomponents.TooltipTrigger,
+    {
+      defaultOpen: initialOpen,
+      delay,
+      closeDelay: 500,
+      isDisabled: disabled,
+      isOpen: open,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _6YHDE4TNcjs.Triggerable_default, { children }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          AriaTooltip,
+          {
+            ref,
+            placement: _4EXO6IHDcjs.syntaxToReactAriaPlacement.call(void 0, placement),
+            "aria-label": accessibilityLabel,
+            "data-testid": dataTestId,
+            onChangeContentVisibility,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+});
+var Tooltip_default = Tooltip;
+
+
+
+
+exports.AriaTooltip = AriaTooltip; exports.Tooltip_default = Tooltip_default;
+//# sourceMappingURL=AS6O55Z6.cjs.map

package/dist/__chunks/AS6O55Z6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","css-module:./Tooltip.module.css#css-module"],"names":["AriaTooltip","Tooltip"],"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","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\"}"]}

package/dist/__chunks/AZYT2N4K.cjs

@@ -0,0 +1,157 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _LDFTT3OIcjs = require('./LDFTT3OI.cjs');
+
+
+var _NGO7IQETcjs = require('./NGO7IQET.cjs');
+
+
+
+var _VLUKODJDcjs = require('./VLUKODJD.cjs');
+
+
+var _5SMR5MWYcjs = require('./5SMR5MWY.cjs');
+
+
+var _RFHPSEBFcjs = require('./RFHPSEBF.cjs');
+
+
+
+
+var _I64JGYX7cjs = require('./I64JGYX7.cjs');
+
+// src/Dialog/ModalDialog.tsx
+
+
+var _react = require('react');
+
+
+
+
+var _reactariacomponents = require('react-aria-components');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _reactaria = require('react-aria');
+
+// css-module:./ModalDialog.module.css#css-module
+var ModalDialog_module_default = { "modalOverlay": "_modalOverlay_1fy5w_1", "modal": "_modal_1fy5w_1" };
+
+// src/Dialog/ModalDialog.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function XIcon({ color = "#000" }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "path",
+    {
+      fill: "inherit",
+      d: "M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z"
+    }
+  ) });
+}
+var AriaModalOverlay = _react.forwardRef.call(void 0, function AriaModalOverlay2(_a, ref) {
+  var _b = _a, { children } = _b, otherProps = _I64JGYX7cjs.__objRest.call(void 0, _b, ["children"]);
+  const className = _classnames2.default.call(void 0, [
+    _VLUKODJDcjs.Box_module_default.box,
+    _VLUKODJDcjs.Box_module_default.fixed,
+    _VLUKODJDcjs.Box_module_default.box,
+    _VLUKODJDcjs.Box_module_default.flex,
+    _VLUKODJDcjs.Box_module_default.column,
+    _VLUKODJDcjs.Box_module_default.alignItemscenter,
+    _VLUKODJDcjs.Box_module_default.justifyContentcenter,
+    _VLUKODJDcjs.padding_module_default.paddingX4,
+    _VLUKODJDcjs.padding_module_default.paddingY4,
+    ModalDialog_module_default.modalOverlay
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.ModalOverlay, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, { ref }, _reactaria.mergeProps.call(void 0, { className }, otherProps)), { children }));
+});
+var AriaModal = _react.forwardRef.call(void 0, 
+  function AriaModal2(_a, ref) {
+    var _b = _a, { children: childrenProp, onChangeContentVisibility } = _b, otherProps = _I64JGYX7cjs.__objRest.call(void 0, _b, ["children", "onChangeContentVisibility"]);
+    const className = _classnames2.default.call(void 0, [_VLUKODJDcjs.Box_module_default.box, ModalDialog_module_default.modal]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Modal, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, { ref }, _reactaria.mergeProps.call(void 0, { className }, 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 ModalDialog = _react.forwardRef.call(void 0, 
+  function ModalDialog2(props, ref) {
+    const {
+      "data-testid": dataTestId,
+      accessibilityLabel,
+      children,
+      dismissable = true,
+      accessibilityCloseLabel = "Dismiss",
+      initialOpen,
+      onChangeContentVisibility,
+      onOpenChange,
+      open
+    } = props;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      AriaModalOverlay,
+      {
+        isDismissable: dismissable,
+        isKeyboardDismissDisabled: !dismissable,
+        defaultOpen: initialOpen,
+        isOpen: open,
+        onOpenChange,
+        children: ({ state }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          AriaModal,
+          {
+            ref,
+            "aria-label": accessibilityLabel,
+            onChangeContentVisibility,
+            children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              _NGO7IQETcjs.Dialog_default,
+              {
+                accessibilityLabel,
+                "data-testid": dataTestId,
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _5SMR5MWYcjs.Box_default,
+                    {
+                      position: "absolute",
+                      padding: 2,
+                      dangerouslySetInlineStyle: {
+                        __style: {
+                          top: "0",
+                          right: "0"
+                        }
+                      },
+                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        _LDFTT3OIcjs.IconButton_default,
+                        {
+                          onClick: () => state.close(),
+                          color: "tertiary",
+                          accessibilityLabel: accessibilityCloseLabel,
+                          icon: XIcon
+                        }
+                      )
+                    }
+                  ),
+                  children
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+var ModalDialog_default = ModalDialog;
+
+
+
+
+
+exports.AriaModalOverlay = AriaModalOverlay; exports.AriaModal = AriaModal; exports.ModalDialog_default = ModalDialog_default;
+//# sourceMappingURL=AZYT2N4K.cjs.map

package/dist/__chunks/AZYT2N4K.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Dialog/ModalDialog.tsx","css-module:./ModalDialog.module.css#css-module"],"names":["AriaModalOverlay","AriaModal","ModalDialog"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAEE;AAAA,OAEK;AACP;AAAA,EACE,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB;AAAA,OAEK;AACP,OAAO,gBAAgB;AACvB,SAAS,kBAAkB;;;ACZsE,IAAO,6BAAQ,EAAC,gBAAe,yBAAwB,SAAQ,iBAAgB;;;ADwB1K,SA6DM,UA7DN,KA6DM,YA7DN;AAHN,SAAS,MAAM,EAAE,QAAQ,OAAO,GAA2C;AACzE,SACE,oBAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,MAAM,OACnE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,GACF;AAEJ;AAUO,IAAM,mBAAmB,WAG9B,SAASA,kBAAiB,IAA6B,KAAmB;AAAhD,eAAE,WA3C9B,IA2C4B,IAAe,uBAAf,IAAe,CAAb;AAC5B,QAAM,YAAY,WAAW;AAAA,IAC3B,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,mBAAU;AAAA,IACV,uBAAc;AAAA,IACd,uBAAc;AAAA,IACd,2BAAO;AAAA,EACT,CAAC;AACD,SACE,oBAAC,sDAAsB,OAAc,WAAW,EAAE,UAAU,GAAG,UAAU,IAAxE,EACE,WACH;AAEJ,CAAC;AAaM,IAAM,YAAY;AAAA,EACvB,SAASC,WACP,IACA,KACc;AAFd,iBAAE,YAAU,cAAc,0BA5E9B,IA4EI,IAAwD,uBAAxD,IAAwD,CAAtD,YAAwB;AAG1B,UAAM,YAAY,WAAW,CAAC,mBAAU,KAAK,2BAAO,KAAK,CAAC;AAC1D,WACE,oBAAC,+CAAe,OAAc,WAAW,EAAE,UAAU,GAAG,UAAU,IAAjE,EACE;AAAA,MACC;AAAA,MACA,CAAC,UAAU,EAAE,YAAY,UAAU,MACjC,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU;AAAA;AAAA,QACZ;AAAA,QACC;AAAA,SACH;AAAA,IAEJ,IACF;AAAA,EAEJ;AACF;AAkCA,IAAM,cAAc;AAAA,EAClB,SAASC,aAAY,OAAO,KAAmB;AAC7C,UAAM;AAAA,MACJ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,0BAA0B;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAe;AAAA,QACf,2BAA2B,CAAC;AAAA,QAC5B,aAAa;AAAA,QACb,QAAQ;AAAA,QACR;AAAA,QAEC,WAAC,EAAE,MAAM,MACR;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,eAAa;AAAA,gBAEb;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAS;AAAA,sBACT,SAAS;AAAA,sBACT,2BAA2B;AAAA,wBACzB,SAAS;AAAA,0BACP,KAAK;AAAA,0BACL,OAAO;AAAA,wBACT;AAAA,sBACF;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,SAAS,MAAM,MAAM,MAAM;AAAA,0BAC3B,OAAM;AAAA,0BACN,oBAAoB;AAAA,0BACpB,MAAM;AAAA;AAAA,sBACR;AAAA;AAAA,kBACF;AAAA,kBACC;AAAA;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,IAAO,sBAAQ","sourcesContent":["import React, {\n  type ReactElement,\n  forwardRef,\n  type ComponentProps,\n} from \"react\";\nimport {\n  Modal as ReactAriaModal,\n  ModalOverlay as ReactAriaModalOverlay,\n  composeRenderProps,\n  type ModalOverlayProps as ReactAriaModalOverlayProps,\n} from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport { mergeProps } from \"react-aria\";\nimport Dialog, { type DialogProps } from \"./Dialog\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./ModalDialog.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Box from \"../Box/Box\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string; className?: string }) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n      <path\n        fill=\"inherit\"\n        d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n      />\n    </svg>\n  );\n}\n\ntype AriaModalOverlayProps = {\n  \"data-testid\"?: string;\n} & ReactAriaModalOverlayProps;\n/**\n * AriaModalOverlay: This component extends ModalOverlay from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - data-testid\n */\nexport const AriaModalOverlay = forwardRef<\n  HTMLDivElement,\n  AriaModalOverlayProps\n>(function AriaModalOverlay({ children, ...otherProps }, ref): ReactElement {\n  const className = classNames([\n    boxStyles.box,\n    boxStyles.fixed,\n    boxStyles.box,\n    boxStyles.flex,\n    boxStyles.column,\n    boxStyles.alignItemscenter,\n    boxStyles.justifyContentcenter,\n    paddingStyles.paddingX4,\n    paddingStyles.paddingY4,\n    styles.modalOverlay,\n  ]);\n  return (\n    <ReactAriaModalOverlay ref={ref} {...mergeProps({ className }, otherProps)}>\n      {children}\n    </ReactAriaModalOverlay>\n  );\n});\n\ntype AriaModalProps = {\n  \"data-testid\"?: string;\n  /** Optional handler for change of visibility for overlaid content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n} & ComponentProps<typeof ReactAriaModal>;\n/**\n * AriaModal: This component extends Modal from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - data-testid\n *  - onContentChangeVisibility\n */\nexport const AriaModal = forwardRef<HTMLDivElement, AriaModalProps>(\n  function AriaModal(\n    { children: childrenProp, onChangeContentVisibility, ...otherProps },\n    ref,\n  ): ReactElement {\n    const className = classNames([boxStyles.box, styles.modal]);\n    return (\n      <ReactAriaModal ref={ref} {...mergeProps({ className }, otherProps)}>\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      </ReactAriaModal>\n    );\n  },\n);\n\ntype ModalDialogProps = DialogProps & {\n  /** Whether dialog can be dismissed with click outside / Escape key  */\n  dismissable?: boolean;\n  /** render visible initially. */\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 modal dialog externally */\n  open?: boolean;\n  /** Optional override for default dismiss button accessibility label */\n  accessibilityCloseLabel?: string;\n};\n\n/**\n * ModalDialog is a controlled component -- visibility is managed with the `open` prop.\n *\n * Example Usage:\n ```\n  <ModalDialog\n    open={open}\n    initialOpen\n    content={<Box>I am some content</Box>}\n    onChangeContentVisibility={(visible) => ...}\n  >\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </ModalDialog>\n ```\n */\nconst ModalDialog = forwardRef<HTMLDivElement, ModalDialogProps>(\n  function ModalDialog(props, ref): ReactElement {\n    const {\n      \"data-testid\": dataTestId,\n      accessibilityLabel,\n      children,\n      dismissable = true,\n      accessibilityCloseLabel = \"Dismiss\",\n      initialOpen,\n      onChangeContentVisibility,\n      onOpenChange,\n      open,\n    } = props;\n\n    return (\n      <AriaModalOverlay\n        isDismissable={dismissable}\n        isKeyboardDismissDisabled={!dismissable}\n        defaultOpen={initialOpen}\n        isOpen={open}\n        onOpenChange={onOpenChange}\n      >\n        {({ state }) => (\n          <AriaModal\n            ref={ref}\n            aria-label={accessibilityLabel}\n            onChangeContentVisibility={onChangeContentVisibility}\n          >\n            <Dialog\n              accessibilityLabel={accessibilityLabel}\n              data-testid={dataTestId}\n            >\n              <Box\n                position=\"absolute\"\n                padding={2}\n                dangerouslySetInlineStyle={{\n                  __style: {\n                    top: \"0\",\n                    right: \"0\",\n                  },\n                }}\n              >\n                <IconButton\n                  onClick={() => state.close()}\n                  color=\"tertiary\"\n                  accessibilityLabel={accessibilityCloseLabel}\n                  icon={XIcon}\n                />\n              </Box>\n              {children}\n            </Dialog>\n          </AriaModal>\n        )}\n      </AriaModalOverlay>\n    );\n  },\n);\n\nexport default ModalDialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/ModalDialog.module.css\"; export default {\"modalOverlay\":\"_modalOverlay_1fy5w_1\",\"modal\":\"_modal_1fy5w_1\"}"]}

package/dist/__chunks/{THEUR2KP.cjs → CL5AJWO2.cjs}

@@ -9,22 +9,22 @@ var _36B62A3Zcjs = require('./36B62A3Z.cjs');
 var _3HVG5AGOcjs = require('./3HVG5AGO.cjs');
 
 
-var _CY6YL5T4cjs = require('./CY6YL5T4.cjs');
+var _TEJLBWXVcjs = require('./TEJLBWXV.cjs');
 
 
-var _ARYAYAXHcjs = require('./ARYAYAXH.cjs');
+var _PQIPUPQ2cjs = require('./PQIPUPQ2.cjs');
 
 
-var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
+var _4ICD552Dcjs = require('./4ICD552D.cjs');
 
 
-var _TEJLBWXVcjs = require('./TEJLBWXV.cjs');
+var _5SMR5MWYcjs = require('./5SMR5MWY.cjs');
 
 
-var _PQIPUPQ2cjs = require('./PQIPUPQ2.cjs');
+var _UNZBENAEcjs = require('./UNZBENAE.cjs');
 
 
-var _4ICD552Dcjs = require('./4ICD552D.cjs');
+var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
 
 // src/Button/Button.tsx
 var _react = require('react');
@@ -77,8 +77,8 @@ var Button = _react.forwardRef.call(void 0,
         ),
         children: [
           !loading && StartIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StartIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _3HVG5AGOcjs.iconSize_default[size]) }),
-          (loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CY6YL5T4cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _ARYAYAXHcjs.Typography_default,
+          (loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5SMR5MWYcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _UNZBENAEcjs.Typography_default,
             {
               size: _36B62A3Zcjs.textVariant_default[size],
               color: _TEJLBWXVcjs.foregroundTypographyColor.call(void 0, color),
@@ -117,4 +117,4 @@ var Button_default = Button;
 
 
 exports.Button_default = Button_default;
-//# sourceMappingURL=THEUR2KP.cjs.map
+//# sourceMappingURL=CL5AJWO2.cjs.map

package/dist/__chunks/CPAXWLGZ.js

@@ -0,0 +1,72 @@
+import {
+  Box_module_default,
+  padding_module_default
+} from "./J7CMFWIU.js";
+import {
+  rounding_module_default
+} from "./TPMQI44L.js";
+import {
+  colors_module_default
+} from "./ERXGNP37.js";
+
+// src/Dialog/Dialog.tsx
+import { forwardRef } from "react";
+
+// css-module:../elevation/elevation.module.css#css-module
+var elevation_module_default = { "elevation400BoxShadow": "_elevation400BoxShadow_vw6sp_1" };
+
+// css-module:./Dialog.module.css#css-module
+var Dialog_module_default = { "dialog": "_dialog_vyzu3_1" };
+
+// src/Dialog/Dialog.tsx
+import { Dialog as ReactAriaDialog } from "react-aria-components";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+var sizeToRounding = {
+  sm: "lg",
+  md: "lg",
+  lg: "xl"
+};
+var sizeToPadding = {
+  sm: 4,
+  md: 5,
+  lg: 6
+};
+var Dialog = forwardRef(function Dialog2(props, ref) {
+  const {
+    "data-testid": dataTestId,
+    accessibilityLabel,
+    children,
+    size = "md"
+  } = props;
+  return /* @__PURE__ */ jsx(
+    ReactAriaDialog,
+    {
+      ref,
+      "data-testid": dataTestId,
+      "aria-label": accessibilityLabel,
+      className: classNames([
+        Box_module_default.box,
+        Box_module_default.flex,
+        Box_module_default.column,
+        Box_module_default.gap4,
+        Box_module_default.relative,
+        Box_module_default.overflowauto,
+        colors_module_default.whiteBackgroundColor,
+        padding_module_default[`paddingX${sizeToPadding[size]}`],
+        padding_module_default[`paddingY${sizeToPadding[size]}`],
+        rounding_module_default[`rounding${sizeToRounding[size]}`],
+        elevation_module_default.elevation400BoxShadow,
+        Dialog_module_default.dialog
+      ]),
+      style: { maxWidth: "100%", maxHeight: "100%" },
+      children
+    }
+  );
+});
+var Dialog_default = Dialog;
+
+export {
+  Dialog_default
+};
+//# sourceMappingURL=CPAXWLGZ.js.map

package/dist/__chunks/CPAXWLGZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"sourcesContent":["import React, { type ReactNode, forwardRef, type ReactElement } from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\ntype DialogRounding = \"lg\" | \"xl\";\nexport type DialogProps = {\n  /** Test id for the floating dialog */\n  \"data-testid\"?: string;\n  /** aria-label for the dialog */\n  accessibilityLabel?: string;\n  /** Content to be shown inside the dialog. */\n  children?: ReactNode;\n  /** Optional size of the dialog box */\n  size?: DialogSize;\n};\n\nconst sizeToRounding: Record<DialogSize, DialogRounding> = {\n  sm: \"lg\",\n  md: \"lg\",\n  lg: \"xl\",\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n  sm: 4,\n  md: 5,\n  lg: 6,\n};\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n  <Dialog accessibilityLabel=\"Select some options\">\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref,\n): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    accessibilityLabel,\n    children,\n    size = \"md\",\n  } = props;\n\n  return (\n    <ReactAriaDialog\n      ref={ref}\n      data-testid={dataTestId}\n      // first thing screen reader reads\n      // e.g. \"<this was the label prop>, dialog, 4 items...\"\n      aria-label={accessibilityLabel}\n      className={classNames([\n        boxStyles.box,\n        boxStyles.flex,\n        boxStyles.column,\n        boxStyles.gap4,\n        boxStyles.relative,\n        boxStyles.overflowauto,\n        colorStyles.whiteBackgroundColor,\n        paddingStyles[`paddingX${sizeToPadding[size]}`],\n        paddingStyles[`paddingY${sizeToPadding[size]}`],\n        roundingStyles[`rounding${sizeToRounding[size]}`],\n        elevationStyles.elevation400BoxShadow,\n        styles.dialog,\n      ])}\n      style={{ maxWidth: \"100%\", maxHeight: \"100%\" }}\n    >\n      {children}\n    </ReactAriaDialog>\n  );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_vyzu3_1\"}"],"mappings":";;;;;;;;;;;;AAAA,SAAgC,kBAAqC;;;ACA6B,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFOtI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAmDnB;AApCJ,IAAM,iBAAqD;AAAA,EACzD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAcA,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,cAAc,IAAI,GAAG;AAAA,QAC9C,uBAAc,WAAW,cAAc,IAAI,GAAG;AAAA,QAC9C,wBAAe,WAAW,eAAe,IAAI,GAAG;AAAA,QAChD,yBAAgB;AAAA,QAChB,sBAAO;AAAA,MACT,CAAC;AAAA,MACD,OAAO,EAAE,UAAU,QAAQ,WAAW,OAAO;AAAA,MAE5C;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ;","names":["Dialog"]}