@cambly/syntax-core 10.3.0 → 10.5.0

package/dist/__chunks/ZG64UIHG.cjs

@@ -0,0 +1,164 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _5WNFAQGYcjs = require('./5WNFAQGY.cjs');
+
+
+var _VMARHE5Bcjs = require('./VMARHE5B.cjs');
+
+
+var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
+
+
+var _ZX5KONS2cjs = require('./ZX5KONS2.cjs');
+
+
+var _NGUJFGACcjs = require('./NGUJFGAC.cjs');
+
+
+var _4EXO6IHDcjs = require('./4EXO6IHD.cjs');
+
+
+var _QJI4G5FPcjs = require('./QJI4G5FP.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, [
+          _VMARHE5Bcjs.Box_module_default.block,
+          Tooltip_module_default[`arrowPlacement${placement}`]
+        ]),
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "svg",
+          {
+            className: _classnames2.default.call(void 0, [_VMARHE5Bcjs.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, [
+    _VMARHE5Bcjs.Box_module_default.box,
+    _NGUJFGACcjs.colors_module_default.gray900Color,
+    _NGUJFGACcjs.colors_module_default.gray900BackgroundColor,
+    _5WNFAQGYcjs.padding_module_default.paddingY2,
+    _5WNFAQGYcjs.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, _ZX5KONS2cjs.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, _QJI4G5FPcjs.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=ZG64UIHG.cjs.map

package/dist/__chunks/ZG64UIHG.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/{ARYAYAXH.cjs → ZX5KONS2.cjs}

@@ -4,6 +4,7 @@ var _NGUJFGACcjs = require('./NGUJFGAC.cjs');
 
 // src/Typography/Typography.tsx
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _react = require('react');
 
 // css-module:./Typography.module.css#css-module
 var Typography_module_default = { "typography": "_typography_1vnry_1", "size100": "_size100_1vnry_8", "size200": "_size200_1vnry_12", "size300": "_size300_1vnry_16", "size500": "_size500_1vnry_20", "size600": "_size600_1vnry_24", "size700": "_size700_1vnry_28", "size800": "_size800_1vnry_32", "center": "_center_1vnry_37", "forceLeft": "_forceLeft_1vnry_41", "forceRight": "_forceRight_1vnry_45", "start": "_start_1vnry_49", "end": "_end_1vnry_53", "bold": "_bold_1vnry_58", "regular": "_regular_1vnry_62", "interactive": "_interactive_1vnry_66", "semiBold": "_semiBold_1vnry_70", "heavy": "_heavy_1vnry_74", "underline": "_underline_1vnry_78", "inline": "_inline_1vnry_82", "uppercase": "_uppercase_1vnry_86", "lineClamp": "_lineClamp_1vnry_90" };
@@ -28,12 +29,13 @@ function textColor(color) {
       return _NGUJFGACcjs.colors_module_default.gray900Color;
   }
 }
-var Typography = ({
+var Typography = _react.forwardRef.call(void 0, function Typography2({
   align = "start",
   as = "div",
   children,
   color = "gray900",
   "data-testid": dataTestId,
+  id,
   inline = false,
   lineClamp = void 0,
   size = 200,
@@ -41,11 +43,12 @@ var Typography = ({
   transform = "none",
   underline = false,
   weight = "regular"
-}) => {
+}, ref) {
   const Tag = as;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     Tag,
     {
+      id,
       className: _classnames2.default.call(void 0, 
         Typography_module_default.typography,
         Typography_module_default[align],
@@ -62,13 +65,14 @@ var Typography = ({
         WebkitLineClamp: lineClamp
       },
       title: tooltip,
+      ref,
       children
     }
   );
-};
+});
 var Typography_default = Typography;
 
 
 
 exports.Typography_default = Typography_default;
-//# sourceMappingURL=ARYAYAXH.cjs.map
+//# sourceMappingURL=ZX5KONS2.cjs.map

package/dist/__chunks/ZX5KONS2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"names":["Typography"],"mappings":";;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,kBAAqD;;;ACDsC,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,UAAS,oBAAmB,aAAY,uBAAsB,cAAa,wBAAuB,SAAQ,mBAAkB,OAAM,iBAAgB,QAAO,kBAAiB,WAAU,qBAAoB,eAAc,yBAAwB,YAAW,sBAAqB,SAAQ,mBAAkB,aAAY,uBAAsB,UAAS,oBAAmB,aAAY,uBAAsB,aAAY,sBAAqB;;;ADmI7wB;AA7HJ,SAAS,UAAU,OAAuC;AACxD,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF;AAKA,IAAM,aAAa,WAkFjB,SAASA,YACT;AAAA,EACE,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX,GACA,KACc;AACd,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,0BAAO;AAAA,QACP,0BAAO,KAAK;AAAA,QACZ,0BAAO,MAAM;AAAA,QACb,UAAU,KAAK;AAAA,QACf,UAAU,0BAAO;AAAA,QACjB,0BAAO,OAAO,MAAM;AAAA,QACpB,cAAc,eAAe,0BAAO;AAAA,QACpC,aAAa,0BAAO;AAAA,QACpB,aAAa,QAAQ,0BAAO;AAAA,MAC9B;AAAA,MACA,eAAa;AAAA,MACb,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport { type Color } from \"../constants\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nfunction textColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.gray700Color;\n    case \"white\":\n      return colorStyles.whiteColor;\n    case \"inherit\":\n      return colorStyles.inheritColor;\n    case \"primary\":\n      return colorStyles.primary700Color;\n    case \"destructive-primary\":\n      return colorStyles.destructive700Color;\n    case \"success\":\n      return colorStyles.success700Color;\n    default:\n      return colorStyles.gray900Color;\n  }\n}\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = forwardRef<\n  HTMLDivElement,\n  {\n    /**\n     * Aligns the text to the left, right, or center of the container.\n     * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n     * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n     *\n     * @defaultValue \"start\"\n     */\n    align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n    /**\n     * DOM element to render as.\n     *\n     * @defaultValue \"div\"\n     */\n    as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n    /**\n     * The text to be rendered\n     */\n    children?: ReactNode;\n    /**\n     * The color of the text.\n     *\n     * @defaultValue \"gray900\"\n     */\n    color?: (typeof Color)[number];\n    /**\n     * Test id for the text\n     */\n    \"data-testid\"?: string;\n    /**\n     * The id for the element\n     */\n    id?: string;\n    /**\n     * Whether the text should flow inline with other elements.\n     *\n     * @defaultValue false\n     */\n    inline?: boolean;\n    /**\n     * The number of lines we should truncate the text at\n     */\n    lineClamp?: number | undefined;\n    /**\n     * Size of the text.\n     *\n     * * `100`: 12px\n     * * `200`: 14px\n     * * `300`: 16px\n     * * `500`: 20px\n     * * `600`: 28px\n     * * `700`: 40px\n     * * `800`: 64px\n     *\n     * @defaultValue 200\n     */\n    size?: 100 | 200 | 300 | 500 | 600 | 700 | 800;\n    /**\n     * The tooltip to be displayed when the user hovers the text\n     */\n    tooltip?: string;\n    /**\n     * Whether the text should be transformed to uppercase.\n     *\n     * @defaultValue \"none\"\n     */\n    transform?: \"none\" | \"uppercase\";\n    /**\n     * Whether the text has an underline.\n     *\n     * @defaultValue false\n     */\n    underline?: boolean;\n    /**\n     * Indicates the boldness of the text.\n     *\n     * @defaultValue \"regular\"\n     */\n    weight?: \"regular\" | \"interactive\" | \"semiBold\" | \"bold\" | \"heavy\";\n  }\n>(function Typography(\n  {\n    align = \"start\",\n    as = \"div\",\n    children,\n    color = \"gray900\",\n    \"data-testid\": dataTestId,\n    id,\n    inline = false,\n    lineClamp = undefined,\n    size = 200,\n    tooltip,\n    transform = \"none\",\n    underline = false,\n    weight = \"regular\",\n  },\n  ref,\n): ReactElement {\n  const Tag = as;\n\n  return (\n    <Tag\n      id={id}\n      className={classNames(\n        styles.typography,\n        styles[align],\n        styles[weight],\n        textColor(color),\n        inline && styles.inline,\n        styles[`size${size}`],\n        transform === \"uppercase\" && styles.uppercase,\n        underline && styles.underline,\n        lineClamp != null && styles.lineClamp,\n      )}\n      data-testid={dataTestId}\n      style={{\n        WebkitLineClamp: lineClamp,\n      }}\n      title={tooltip}\n      ref={ref}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nexport default Typography;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_1vnry_1\",\"size100\":\"_size100_1vnry_8\",\"size200\":\"_size200_1vnry_12\",\"size300\":\"_size300_1vnry_16\",\"size500\":\"_size500_1vnry_20\",\"size600\":\"_size600_1vnry_24\",\"size700\":\"_size700_1vnry_28\",\"size800\":\"_size800_1vnry_32\",\"center\":\"_center_1vnry_37\",\"forceLeft\":\"_forceLeft_1vnry_41\",\"forceRight\":\"_forceRight_1vnry_45\",\"start\":\"_start_1vnry_49\",\"end\":\"_end_1vnry_53\",\"bold\":\"_bold_1vnry_58\",\"regular\":\"_regular_1vnry_62\",\"interactive\":\"_interactive_1vnry_66\",\"semiBold\":\"_semiBold_1vnry_70\",\"heavy\":\"_heavy_1vnry_74\",\"underline\":\"_underline_1vnry_78\",\"inline\":\"_inline_1vnry_82\",\"uppercase\":\"_uppercase_1vnry_86\",\"lineClamp\":\"_lineClamp_1vnry_90\"}"]}

package/dist/index.cjs

@@ -1,81 +1,107 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _GBJX7OPKcjs = require('./__chunks/GBJX7OPK.cjs');
+var _EWCLQBKVcjs = require('./__chunks/EWCLQBKV.cjs');
 
 
-var _PF7Q2EGNcjs = require('./__chunks/PF7Q2EGN.cjs');
+var _JYDZTZIKcjs = require('./__chunks/JYDZTZIK.cjs');
 
 
-var _JMKXHLVZcjs = require('./__chunks/JMKXHLVZ.cjs');
+var _W7CSNF2Mcjs = require('./__chunks/W7CSNF2M.cjs');
 
 
-var _XLVKNLN7cjs = require('./__chunks/XLVKNLN7.cjs');
+var _GOSWBV5Dcjs = require('./__chunks/GOSWBV5D.cjs');
 
 
-var _IFJ2YOEGcjs = require('./__chunks/IFJ2YOEG.cjs');
+var _K77KFPIVcjs = require('./__chunks/K77KFPIV.cjs');
+
+
+var _HR5QOB3Ucjs = require('./__chunks/HR5QOB3U.cjs');
+
+
+var _FZ5HWA3Scjs = require('./__chunks/FZ5HWA3S.cjs');
+require('./__chunks/PBWG2BB5.cjs');
+require('./__chunks/YBP5BNDH.cjs');
+require('./__chunks/SJFWRAOP.cjs');
+
+
+var _FMHIHCQScjs = require('./__chunks/FMHIHCQS.cjs');
+
+
+var _DMCLLEN5cjs = require('./__chunks/DMCLLEN5.cjs');
+require('./__chunks/GKECCWR3.cjs');
+
+
+var _M7BTHQDKcjs = require('./__chunks/M7BTHQDK.cjs');
+require('./__chunks/5TKLFG5Y.cjs');
 
 
 var _PBOQIXCBcjs = require('./__chunks/PBOQIXCB.cjs');
 
 
-var _THEUR2KPcjs = require('./__chunks/THEUR2KP.cjs');
+var _RAVU4WEOcjs = require('./__chunks/RAVU4WEO.cjs');
 require('./__chunks/TBAJ7VLZ.cjs');
 
 
-var _NHSTGALHcjs = require('./__chunks/NHSTGALH.cjs');
-require('./__chunks/3F5U7W73.cjs');
-require('./__chunks/SJFWRAOP.cjs');
+var _3TXXNWWAcjs = require('./__chunks/3TXXNWWA.cjs');
 
 
-var _XBWCYGQ2cjs = require('./__chunks/XBWCYGQ2.cjs');
+var _QNBZ64IEcjs = require('./__chunks/QNBZ64IE.cjs');
+require('./__chunks/TPP3XWDC.cjs');
+
+
+var _LDFTT3OIcjs = require('./__chunks/LDFTT3OI.cjs');
+require('./__chunks/IJVFSOXU.cjs');
 require('./__chunks/36B62A3Z.cjs');
 require('./__chunks/3HVG5AGO.cjs');
 
 
-var _N3EZP6VGcjs = require('./__chunks/N3EZP6VG.cjs');
+var _PZYWUTMWcjs = require('./__chunks/PZYWUTMW.cjs');
+require('./__chunks/SXTAJU6N.cjs');
+require('./__chunks/FMSI35YS.cjs');
+require('./__chunks/ZDMSFZS3.cjs');
+require('./__chunks/2RCQTGOZ.cjs');
 
 
-var _CEWOAFV2cjs = require('./__chunks/CEWOAFV2.cjs');
+var _LMCK5YO5cjs = require('./__chunks/LMCK5YO5.cjs');
+require('./__chunks/LTM57QMY.cjs');
+require('./__chunks/NDJRETMM.cjs');
 
 
-var _3TXXNWWAcjs = require('./__chunks/3TXXNWWA.cjs');
+var _QQWCNTE4cjs = require('./__chunks/QQWCNTE4.cjs');
+require('./__chunks/GYI2PBXY.cjs');
+require('./__chunks/TEJLBWXV.cjs');
+require('./__chunks/PQIPUPQ2.cjs');
+require('./__chunks/4ICD552D.cjs');
+require('./__chunks/RLYKYCEU.cjs');
 
 
-var _CWNH5WDGcjs = require('./__chunks/CWNH5WDG.cjs');
+var _ZG64UIHGcjs = require('./__chunks/ZG64UIHG.cjs');
+require('./__chunks/5WNFAQGY.cjs');
+require('./__chunks/VMARHE5B.cjs');
 
 
-var _YGVUSAB6cjs = require('./__chunks/YGVUSAB6.cjs');
+var _KCYZNZBOcjs = require('./__chunks/KCYZNZBO.cjs');
 
 
-var _C5IESDXEcjs = require('./__chunks/C5IESDXE.cjs');
+var _FMSBGH2Icjs = require('./__chunks/FMSBGH2I.cjs');
 require('./__chunks/VUANIQYP.cjs');
 
 
-var _CY6YL5T4cjs = require('./__chunks/CY6YL5T4.cjs');
+var _5SMR5MWYcjs = require('./__chunks/5SMR5MWY.cjs');
 
-
-var _CGUZFFJ2cjs = require('./__chunks/CGUZFFJ2.cjs');
 require('./__chunks/7GJ2SD7O.cjs');
 
 
-var _RZPCI2UUcjs = require('./__chunks/RZPCI2UU.cjs');
-require('./__chunks/GKECCWR3.cjs');
-
-
-var _EXYF6BLVcjs = require('./__chunks/EXYF6BLV.cjs');
-require('./__chunks/LTM57QMY.cjs');
 
-
-var _ARYAYAXHcjs = require('./__chunks/ARYAYAXH.cjs');
+var _ZX5KONS2cjs = require('./__chunks/ZX5KONS2.cjs');
 require('./__chunks/NGUJFGAC.cjs');
-require('./__chunks/PBWG2BB5.cjs');
+
 require('./__chunks/FZRIE7EX.cjs');
 require('./__chunks/GVEA7SLQ.cjs');
-require('./__chunks/TEJLBWXV.cjs');
-require('./__chunks/PQIPUPQ2.cjs');
-require('./__chunks/4ICD552D.cjs');
-require('./__chunks/RLYKYCEU.cjs');
-
+require('./__chunks/4EXO6IHD.cjs');
+require('./__chunks/QJI4G5FP.cjs');
+require('./__chunks/4PLE46VU.cjs');
+require('./__chunks/RFHPSEBF.cjs');
 require('./__chunks/I64JGYX7.cjs');
 
 
@@ -98,5 +124,8 @@ require('./__chunks/I64JGYX7.cjs');
 
 
 
-exports.Avatar = _PF7Q2EGNcjs.Avatar_default; exports.AvatarGroup = _JMKXHLVZcjs.AvatarGroup; exports.Badge = _GBJX7OPKcjs.Badge_default; exports.Box = _CY6YL5T4cjs.Box_default; exports.Button = _THEUR2KPcjs.Button_default; exports.ButtonGroup = _PBOQIXCBcjs.ButtonGroup_default; exports.Card = _IFJ2YOEGcjs.Card; exports.Checkbox = _XLVKNLN7cjs.Checkbox_default; exports.Chip = _CWNH5WDGcjs.Chip_default; exports.Divider = _3TXXNWWAcjs.Divider; exports.Heading = _CEWOAFV2cjs.Heading_default; exports.IconButton = _N3EZP6VGcjs.IconButton_default; exports.LinkButton = _XBWCYGQ2cjs.LinkButton_default; exports.Modal = _NHSTGALHcjs.Modal; exports.RadioButton = _EXYF6BLVcjs.RadioButton_default; exports.SelectList = _RZPCI2UUcjs.SelectList; exports.TapArea = _CGUZFFJ2cjs.TapArea_default; exports.TextArea = _C5IESDXEcjs.TextArea_default; exports.TextField = _YGVUSAB6cjs.TextField; exports.Typography = _ARYAYAXHcjs.Typography_default;
+
+
+
+exports.Avatar = _EWCLQBKVcjs.Avatar_default; exports.AvatarGroup = _W7CSNF2Mcjs.AvatarGroup; exports.Badge = _JYDZTZIKcjs.Badge_default; exports.Box = _5SMR5MWYcjs.Box_default; exports.Button = _RAVU4WEOcjs.Button_default; exports.ButtonGroup = _PBOQIXCBcjs.ButtonGroup_default; exports.Card = _K77KFPIVcjs.Card; exports.Checkbox = _GOSWBV5Dcjs.Checkbox_default; exports.Chip = _QQWCNTE4cjs.Chip_default; exports.Divider = _3TXXNWWAcjs.Divider; exports.Heading = _FZ5HWA3Scjs.Heading_default; exports.IconButton = _LDFTT3OIcjs.IconButton_default; exports.LinkButton = _FMHIHCQScjs.LinkButton_default; exports.Modal = _HR5QOB3Ucjs.Modal; exports.Popover = _QNBZ64IEcjs.Popover_default; exports.RadioButton = _LMCK5YO5cjs.RadioButton_default; exports.RichSelectList = _M7BTHQDKcjs.RichSelectList_default; exports.SelectList = _DMCLLEN5cjs.SelectList; exports.TapArea = _PZYWUTMWcjs.TapArea_default; exports.TextArea = _FMSBGH2Icjs.TextArea_default; exports.TextField = _KCYZNZBOcjs.TextField; exports.Tooltip = _ZG64UIHGcjs.Tooltip_default; exports.Typography = _ZX5KONS2cjs.Typography_default;
 //# sourceMappingURL=index.cjs.map

package/dist/index.css

@@ -2075,7 +2075,7 @@
 }
 
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css/#css-module-data */
-._chip_nvvgx_1 {
+._chip_kwro3_1 {
   background-color: var(--color-base-gray-200);
   border: 1px solid var(--color-base-gray-300);
   display: flex;
@@ -2084,33 +2084,40 @@
   justify-content: center;
   text-align: center;
   cursor: pointer;
+  box-sizing: border-box;
 }
-._disabled_nvvgx_12 {
+._disabled_kwro3_13 {
   filter: opacity(50%);
   cursor: auto;
 }
-._selectedChip_nvvgx_17 {
+._selectedChip_kwro3_18 {
   background-color: var(--color-base-primary-800);
   border: 1px solid var(--color-base-primary-800);
 }
-._icon_nvvgx_22 {
+._icon_kwro3_23 {
   height: 24px !important;
   width: 24px !important;
   color: var(--color-base-grey-900);
 }
-._selectedIcon_nvvgx_30 {
+._selectedIcon_kwro3_31 {
   color: #fff;
 }
-._sm_nvvgx_34 {
+._sm_kwro3_35 {
   height: 32px;
   min-width: 40px;
   padding: 8px 12px;
 }
-._lg_nvvgx_40 {
+._lg_kwro3_41 {
   height: 48px;
   min-width: 56px;
   padding: 8px 16px;
 }
+._chip_kwro3_1:focus-visible,
+._forceFocus_kwro3_48 {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+  box-shadow: 0 0 0 4px #000;
+  outline: solid 2px #fff;
+}
 
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css/#css-module-data */
 ._divider_ra8vz_1 {
@@ -2229,6 +2236,56 @@
   background-color: rgba(0, 0, 0, 0.3);
 }
 
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/react-aria-utils/Triggerable.module.css/#css-module-data */
+._trigger_1efnf_1:focus-visible {
+  border-radius: 4px;
+  outline: none;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
+}
+
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css/#css-module-data */
+._elevation400BoxShadow_vw6sp_1 {
+  box-shadow: var(--elevation-400);
+}
+
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/layout.module.css/#css-module-data */
+._fullWidth_1ey57_1 {
+  width: 100%;
+}
+._fullMaxWidth_1ey57_5 {
+  max-width: 100%;
+}
+._fullMaxHeight_1ey57_9 {
+  max-height: 100%;
+}
+._visibilityVisible_1ey57_13 {
+  visibility: visible;
+}
+
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css/#css-module-data */
+._dialog_1bme6_1 {
+  min-width: var(--trigger-width);
+}
+._dialog_1bme6_1:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px #fff,
+    0 0 0 4px #000,
+    var(--elevation-400);
+}
+
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/ModalDialog.module.css/#css-module-data */
+._modalOverlay_1fy5w_1,
+._modal_1fy5w_1 {
+  visibility: visible;
+}
+._modalOverlay_1fy5w_1 {
+  inset: 0;
+}
+._modal_1fy5w_1 {
+  max-height: 100%;
+}
+
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css/#css-module-data */
 ._radioBaseContainer_6h2zg_1 {
   display: flex;
@@ -2376,6 +2433,12 @@
   background-color: var(--color-base-destructive-100);
 }
 
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/RichSelect/RichSelect.module.css/#css-module-data */
+._richSelectItem_8ycz0_1:focus-visible,
+._richSelectBox_8ycz0_2:focus-visible {
+  outline: none;
+}
+
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/TapArea/TapArea.module.css/#css-module-data */
 ._tapArea_g6gkz_1 {
   box-sizing: border-box;
@@ -2491,4 +2554,16 @@
 ._inputError_bmndn_57::placeholder {
   color: var(--color-base-destructive-700);
 }
+
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Tooltip/Tooltip.module.css/#css-module-data */
+._tooltip_11pyp_1 {
+  max-width: 240px;
+}
+._arrowPlacementtop_11pyp_5 {
+  transform: rotate(180deg) translate(-100%, -100%);
+  transform-origin: top left;
+}
+._arrowPlacementbottom_11pyp_10 {
+  transform: rotate(0deg) translate(0, 0);
+}
 /*# sourceMappingURL=index.css.map */