@cambly/syntax-core 10.4.0 → 10.5.0

package/dist/__chunks/{CPAXWLGZ.js → XFFSBU7E.js}

@@ -1,7 +1,12 @@
 import {
-  Box_module_default,
+  layout_module_default
+} from "./PTWXXDFF.js";
+import {
   padding_module_default
-} from "./J7CMFWIU.js";
+} from "./652STTPK.js";
+import {
+  Box_module_default
+} from "./KMIZI5PW.js";
 import {
   rounding_module_default
 } from "./TPMQI44L.js";
@@ -10,13 +15,16 @@ import {
 } from "./ERXGNP37.js";
 
 // src/Dialog/Dialog.tsx
-import { forwardRef } from "react";
+import React, {
+  forwardRef,
+  useContext
+} 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" };
+var Dialog_module_default = { "dialog": "_dialog_1bme6_1" };
 
 // src/Dialog/Dialog.tsx
 import { Dialog as ReactAriaDialog } from "react-aria-components";
@@ -32,6 +40,7 @@ var sizeToPadding = {
   md: 5,
   lg: 6
 };
+var DialogContext = React.createContext({});
 var Dialog = forwardRef(function Dialog2(props, ref) {
   const {
     "data-testid": dataTestId,
@@ -39,6 +48,7 @@ var Dialog = forwardRef(function Dialog2(props, ref) {
     children,
     size = "md"
   } = props;
+  const { padding } = useContext(DialogContext);
   return /* @__PURE__ */ jsx(
     ReactAriaDialog,
     {
@@ -53,13 +63,14 @@ var Dialog = forwardRef(function Dialog2(props, ref) {
         Box_module_default.relative,
         Box_module_default.overflowauto,
         colors_module_default.whiteBackgroundColor,
-        padding_module_default[`paddingX${sizeToPadding[size]}`],
-        padding_module_default[`paddingY${sizeToPadding[size]}`],
+        padding_module_default[`paddingX${padding != null ? padding : sizeToPadding[size]}`],
+        padding_module_default[`paddingY${padding != null ? padding : sizeToPadding[size]}`],
         rounding_module_default[`rounding${sizeToRounding[size]}`],
         elevation_module_default.elevation400BoxShadow,
+        layout_module_default.fullMaxHeight,
+        layout_module_default.visibilityVisible,
         Dialog_module_default.dialog
       ]),
-      style: { maxWidth: "100%", maxHeight: "100%" },
       children
     }
   );
@@ -67,6 +78,7 @@ var Dialog = forwardRef(function Dialog2(props, ref) {
 var Dialog_default = Dialog;
 
 export {
+  DialogContext,
   Dialog_default
 };
-//# sourceMappingURL=CPAXWLGZ.js.map
+//# sourceMappingURL=XFFSBU7E.js.map

package/dist/__chunks/XFFSBU7E.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, {\n  type ReactNode,\n  forwardRef,\n  type ReactElement,\n  useContext,\n  type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.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\";\nimport type Box from \"../Box/Box\";\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\ntype DialogContextType = {\n  /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n  padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\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  const { padding } = useContext(DialogContext);\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${padding ?? sizeToPadding[size]}`],\n        paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n        roundingStyles[`rounding${sizeToRounding[size]}`],\n        elevationStyles.elevation400BoxShadow,\n        layoutStyles.fullMaxHeight,\n        layoutStyles.visibilityVisible,\n        styles.dialog,\n      ])}\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_1bme6_1\"}"],"mappings":";;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AA4DnB;AA5CJ,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;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,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,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe,WAAW,eAAe,IAAI,GAAG;AAAA,QAChD,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ;","names":["Dialog"]}

package/dist/__chunks/{LSR5LFQO.js → XT2JUTU3.js}

@@ -1,15 +1,15 @@
-import {
-  FocusTrap
-} from "./42YPEAFS.js";
 import {
   Heading_default
-} from "./N5GVRMI5.js";
+} from "./PEKXH4DM.js";
 import {
   StopScroll
 } from "./AFINOME7.js";
 import {
   Layer
 } from "./E4BJX2H5.js";
+import {
+  FocusTrap
+} from "./42YPEAFS.js";
 import {
   Box_default
 } from "./TJHCYMPV.js";
@@ -107,4 +107,4 @@ Modal.displayName = "Modal";
 export {
   Modal
 };
-//# sourceMappingURL=LSR5LFQO.js.map
+//# sourceMappingURL=XT2JUTU3.js.map

package/dist/__chunks/Y6L6EOCB.js

@@ -0,0 +1,52 @@
+import {
+  useIsHydrated
+} from "./YJ7YDIGB.js";
+
+// src/RichSelect/RichSelectItem.tsx
+import {
+  forwardRef,
+  createContext,
+  useEffect,
+  useContext
+} from "react";
+import {
+  ListBoxItem as ReactAriaListBoxItem
+} from "react-aria-components";
+
+// css-module:./RichSelect.module.css#css-module
+var RichSelect_module_default = { "richSelectItem": "_richSelectItem_8ycz0_1", "richSelectBox": "_richSelectBox_8ycz0_2" };
+
+// src/RichSelect/RichSelectItem.tsx
+import { jsx } from "react/jsx-runtime";
+var RichSelectItemContext = createContext({});
+var RichSelectItem_default = forwardRef(function RichSelectItem(props, ref) {
+  const {
+    "data-testid": dataTestId,
+    value,
+    label,
+    disabled: disabledProp = false,
+    children
+  } = props;
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
+  const { disableKey } = useContext(RichSelectItemContext);
+  useEffect(() => disableKey == null ? void 0 : disableKey(value, disabled), [disableKey, disabled, value]);
+  return /* @__PURE__ */ jsx(
+    ReactAriaListBoxItem,
+    {
+      id: value,
+      textValue: label,
+      className: RichSelect_module_default.richSelectItem,
+      "data-testid": dataTestId,
+      ref,
+      children
+    }
+  );
+});
+
+export {
+  RichSelect_module_default,
+  RichSelectItemContext,
+  RichSelectItem_default
+};
+//# sourceMappingURL=Y6L6EOCB.js.map

package/dist/__chunks/Y6L6EOCB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectItem.tsx","css-module:./RichSelect.module.css#css-module"],"sourcesContent":["import React, {\n  forwardRef,\n  type ReactElement,\n  createContext,\n  useEffect,\n  useContext,\n} from \"react\";\nimport {\n  ListBoxItem as ReactAriaListBoxItem,\n  type ListBoxItemRenderProps,\n} from \"react-aria-components\";\nimport styles from \"./RichSelect.module.css\";\nimport { type Key } from \"react-aria\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nexport type RichSelectItemProps = {\n  \"data-testid\"?: string;\n  value: string;\n  label: string;\n  name?: string;\n  disabled?: boolean;\n};\n\nexport const RichSelectItemContext = createContext<{\n  disableKey?: (key: Key, value: boolean) => void;\n}>({});\n\nexport default forwardRef<\n  HTMLDivElement,\n  RichSelectItemProps & {\n    /** The children of the component. A function may be provided to alter the children based on component state. */\n    children?:\n      | string\n      | ReactElement\n      | ((values: ListBoxItemRenderProps) => ReactElement);\n  }\n>(function RichSelectItem(props, ref): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    value,\n    label,\n    disabled: disabledProp = false,\n    children,\n  } = props;\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n\n  const { disableKey } = useContext(RichSelectItemContext);\n  useEffect(() => disableKey?.(value, disabled), [disableKey, disabled, value]);\n  return (\n    <ReactAriaListBoxItem\n      id={value}\n      textValue={label}\n      className={styles.richSelectItem}\n      data-testid={dataTestId}\n      ref={ref}\n    >\n      {children}\n    </ReactAriaListBoxItem>\n  );\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RichSelect/RichSelect.module.css\"; export default {\"richSelectItem\":\"_richSelectItem_8ycz0_1\",\"richSelectBox\":\"_richSelectBox_8ycz0_2\"}"],"mappings":";;;;;AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE,eAAe;AAAA,OAEV;;;ACV6F,IAAO,4BAAQ,EAAC,kBAAiB,2BAA0B,iBAAgB,yBAAwB;;;ADkDnM;AA3BG,IAAM,wBAAwB,cAElC,CAAC,CAAC;AAEL,IAAO,yBAAQ,WASb,SAAS,eAAe,OAAO,KAAmB;AAClD,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,UAAU,eAAe;AAAA,IACzB;AAAA,EACF,IAAI;AACJ,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAEhC,QAAM,EAAE,WAAW,IAAI,WAAW,qBAAqB;AACvD,YAAU,MAAM,yCAAa,OAAO,WAAW,CAAC,YAAY,UAAU,KAAK,CAAC;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,WAAW,0BAAO;AAAA,MAClB,eAAa;AAAA,MACb;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;","names":[]}

package/dist/__chunks/ZDMSFZS3.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// css-module:../layout.module.css#css-module
+var layout_module_default = { "fullWidth": "_fullWidth_1ey57_1", "fullMaxWidth": "_fullMaxWidth_1ey57_5", "fullMaxHeight": "_fullMaxHeight_1ey57_9", "visibilityVisible": "_visibilityVisible_1ey57_13" };
+
+
+
+exports.layout_module_default = layout_module_default;
+//# sourceMappingURL=ZDMSFZS3.cjs.map

package/dist/__chunks/ZDMSFZS3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../layout.module.css#css-module"],"names":[],"mappings":";AAAqF,IAAO,wBAAQ,EAAC,aAAY,sBAAqB,gBAAe,yBAAwB,iBAAgB,0BAAyB,qBAAoB,8BAA6B","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/layout.module.css\"; export default {\"fullWidth\":\"_fullWidth_1ey57_1\",\"fullMaxWidth\":\"_fullMaxWidth_1ey57_5\",\"fullMaxHeight\":\"_fullMaxHeight_1ey57_9\",\"visibilityVisible\":\"_visibilityVisible_1ey57_13\"}"]}

package/dist/__chunks/{AS6O55Z6.cjs → ZG64UIHG.cjs}

@@ -1,13 +1,15 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var _5WNFAQGYcjs = require('./5WNFAQGY.cjs');
 
-var _VLUKODJDcjs = require('./VLUKODJD.cjs');
+
+var _VMARHE5Bcjs = require('./VMARHE5B.cjs');
 
 
 var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
 
 
-var _UNZBENAEcjs = require('./UNZBENAE.cjs');
+var _ZX5KONS2cjs = require('./ZX5KONS2.cjs');
 
 
 var _NGUJFGACcjs = require('./NGUJFGAC.cjs');
@@ -16,7 +18,7 @@ var _NGUJFGACcjs = require('./NGUJFGAC.cjs');
 var _4EXO6IHDcjs = require('./4EXO6IHD.cjs');
 
 
-var _6YHDE4TNcjs = require('./6YHDE4TN.cjs');
+var _QJI4G5FPcjs = require('./QJI4G5FP.cjs');
 
 
 var _RFHPSEBFcjs = require('./RFHPSEBF.cjs');
@@ -54,13 +56,13 @@ function TooltipArrow(props) {
       "div",
       {
         className: _classnames2.default.call(void 0, [
-          _VLUKODJDcjs.Box_module_default.block,
+          _VMARHE5Bcjs.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]),
+            className: _classnames2.default.call(void 0, [_VMARHE5Bcjs.Box_module_default.block]),
             width: 40,
             height: 5,
             viewBox: "0 0 40 5",
@@ -75,11 +77,11 @@ function TooltipArrow(props) {
 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,
+    _VMARHE5Bcjs.Box_module_default.box,
     _NGUJFGACcjs.colors_module_default.gray900Color,
     _NGUJFGACcjs.colors_module_default.gray900BackgroundColor,
-    _VLUKODJDcjs.padding_module_default.paddingY2,
-    _VLUKODJDcjs.padding_module_default.paddingX3,
+    _5WNFAQGYcjs.padding_module_default.paddingY2,
+    _5WNFAQGYcjs.padding_module_default.paddingX3,
     _7GJ2SD7Ocjs.rounding_module_default.roundingsm,
     Tooltip_module_default.tooltip
   ]);
@@ -99,7 +101,7 @@ var AriaTooltip = _react.forwardRef.call(void 0, function AriaTooltip2(_a, ref)
         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, _ZX5KONS2cjs.Typography_default, { size: 100, color: "white", children }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _RFHPSEBFcjs.OverlayVisibility,
             {
@@ -137,7 +139,7 @@ var Tooltip = _react.forwardRef.call(void 0, function Tooltip2(props, ref) {
       isOpen: open,
       onOpenChange,
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _6YHDE4TNcjs.Triggerable_default, { children }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QJI4G5FPcjs.Triggerable_default, { children }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           AriaTooltip,
           {
@@ -159,4 +161,4 @@ var Tooltip_default = Tooltip;
 
 
 exports.AriaTooltip = AriaTooltip; exports.Tooltip_default = Tooltip_default;
-//# sourceMappingURL=AS6O55Z6.cjs.map
+//# 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/{UNZBENAE.cjs → ZX5KONS2.cjs}

@@ -35,6 +35,7 @@ var Typography = _react.forwardRef.call(void 0, function Typography2({
   children,
   color = "gray900",
   "data-testid": dataTestId,
+  id,
   inline = false,
   lineClamp = void 0,
   size = 200,
@@ -47,6 +48,7 @@ var Typography = _react.forwardRef.call(void 0, function Typography2({
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     Tag,
     {
+      id,
       className: _classnames2.default.call(void 0, 
         Typography_module_default.typography,
         Typography_module_default[align],
@@ -73,4 +75,4 @@ var Typography_default = Typography;
 
 
 exports.Typography_default = Typography_default;
-//# sourceMappingURL=UNZBENAE.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,93 +1,105 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _FLFY7QSScjs = require('./__chunks/FLFY7QSS.cjs');
+var _EWCLQBKVcjs = require('./__chunks/EWCLQBKV.cjs');
 
 
-var _EWCLQBKVcjs = require('./__chunks/EWCLQBKV.cjs');
+var _JYDZTZIKcjs = require('./__chunks/JYDZTZIK.cjs');
 
 
 var _W7CSNF2Mcjs = require('./__chunks/W7CSNF2M.cjs');
 
 
-var _XWGC5OYDcjs = require('./__chunks/XWGC5OYD.cjs');
+var _GOSWBV5Dcjs = require('./__chunks/GOSWBV5D.cjs');
 
 
 var _K77KFPIVcjs = require('./__chunks/K77KFPIV.cjs');
 
 
-var _PBOQIXCBcjs = require('./__chunks/PBOQIXCB.cjs');
+var _HR5QOB3Ucjs = require('./__chunks/HR5QOB3U.cjs');
 
 
-var _CL5AJWO2cjs = require('./__chunks/CL5AJWO2.cjs');
-require('./__chunks/TBAJ7VLZ.cjs');
+var _FZ5HWA3Scjs = require('./__chunks/FZ5HWA3S.cjs');
+require('./__chunks/PBWG2BB5.cjs');
+require('./__chunks/YBP5BNDH.cjs');
+require('./__chunks/SJFWRAOP.cjs');
 
 
-var _EBNDJEOGcjs = require('./__chunks/EBNDJEOG.cjs');
-require('./__chunks/36B62A3Z.cjs');
-require('./__chunks/3HVG5AGO.cjs');
+var _FMHIHCQScjs = require('./__chunks/FMHIHCQS.cjs');
 
 
-var _3TXXNWWAcjs = require('./__chunks/3TXXNWWA.cjs');
+var _DMCLLEN5cjs = require('./__chunks/DMCLLEN5.cjs');
+require('./__chunks/GKECCWR3.cjs');
 
 
-var _NWUWC7UTcjs = require('./__chunks/NWUWC7UT.cjs');
+var _M7BTHQDKcjs = require('./__chunks/M7BTHQDK.cjs');
+require('./__chunks/5TKLFG5Y.cjs');
 
 
-var _CGUZFFJ2cjs = require('./__chunks/CGUZFFJ2.cjs');
+var _PBOQIXCBcjs = require('./__chunks/PBOQIXCB.cjs');
 
 
-var _NGVAEAMLcjs = require('./__chunks/NGVAEAML.cjs');
-require('./__chunks/GKECCWR3.cjs');
+var _RAVU4WEOcjs = require('./__chunks/RAVU4WEO.cjs');
+require('./__chunks/TBAJ7VLZ.cjs');
 
 
-var _37N4BSEFcjs = require('./__chunks/37N4BSEF.cjs');
-require('./__chunks/LTM57QMY.cjs');
+var _3TXXNWWAcjs = require('./__chunks/3TXXNWWA.cjs');
 
 
-var _D3WPZHGMcjs = require('./__chunks/D3WPZHGM.cjs');
-require('./__chunks/AZYT2N4K.cjs');
+var _QNBZ64IEcjs = require('./__chunks/QNBZ64IE.cjs');
+require('./__chunks/TPP3XWDC.cjs');
 
 
 var _LDFTT3OIcjs = require('./__chunks/LDFTT3OI.cjs');
-require('./__chunks/NGO7IQET.cjs');
+require('./__chunks/IJVFSOXU.cjs');
+require('./__chunks/36B62A3Z.cjs');
+require('./__chunks/3HVG5AGO.cjs');
 
 
-var _4DPEJJ42cjs = require('./__chunks/4DPEJJ42.cjs');
-require('./__chunks/SJFWRAOP.cjs');
+var _PZYWUTMWcjs = require('./__chunks/PZYWUTMW.cjs');
+require('./__chunks/SXTAJU6N.cjs');
+require('./__chunks/FMSI35YS.cjs');
+require('./__chunks/ZDMSFZS3.cjs');
+require('./__chunks/2RCQTGOZ.cjs');
 
 
-var _PYX4374Tcjs = require('./__chunks/PYX4374T.cjs');
-require('./__chunks/PBWG2BB5.cjs');
-require('./__chunks/YBP5BNDH.cjs');
+var _LMCK5YO5cjs = require('./__chunks/LMCK5YO5.cjs');
+require('./__chunks/LTM57QMY.cjs');
+require('./__chunks/NDJRETMM.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 _AS6O55Z6cjs = require('./__chunks/AS6O55Z6.cjs');
-require('./__chunks/VLUKODJD.cjs');
+var _ZG64UIHGcjs = require('./__chunks/ZG64UIHG.cjs');
+require('./__chunks/5WNFAQGY.cjs');
+require('./__chunks/VMARHE5B.cjs');
 
 
-var _YH4XW4LDcjs = require('./__chunks/YH4XW4LD.cjs');
+var _KCYZNZBOcjs = require('./__chunks/KCYZNZBO.cjs');
 
 
-var _WI7S7GOJcjs = require('./__chunks/WI7S7GOJ.cjs');
+var _FMSBGH2Icjs = require('./__chunks/FMSBGH2I.cjs');
 require('./__chunks/VUANIQYP.cjs');
 
 
 var _5SMR5MWYcjs = require('./__chunks/5SMR5MWY.cjs');
-require('./__chunks/YCKM5H43.cjs');
+
 require('./__chunks/7GJ2SD7O.cjs');
 
 
-var _UNZBENAEcjs = require('./__chunks/UNZBENAE.cjs');
+
+var _ZX5KONS2cjs = require('./__chunks/ZX5KONS2.cjs');
 require('./__chunks/NGUJFGAC.cjs');
 
 require('./__chunks/FZRIE7EX.cjs');
 require('./__chunks/GVEA7SLQ.cjs');
 require('./__chunks/4EXO6IHD.cjs');
-require('./__chunks/6YHDE4TN.cjs');
+require('./__chunks/QJI4G5FP.cjs');
 require('./__chunks/4PLE46VU.cjs');
 require('./__chunks/RFHPSEBF.cjs');
 require('./__chunks/I64JGYX7.cjs');
@@ -114,5 +126,6 @@ require('./__chunks/I64JGYX7.cjs');
 
 
 
-exports.Avatar = _EWCLQBKVcjs.Avatar_default; exports.AvatarGroup = _W7CSNF2Mcjs.AvatarGroup; exports.Badge = _FLFY7QSScjs.Badge_default; exports.Box = _5SMR5MWYcjs.Box_default; exports.Button = _CL5AJWO2cjs.Button_default; exports.ButtonGroup = _PBOQIXCBcjs.ButtonGroup_default; exports.Card = _K77KFPIVcjs.Card; exports.Checkbox = _XWGC5OYDcjs.Checkbox_default; exports.Chip = _NWUWC7UTcjs.Chip_default; exports.Divider = _3TXXNWWAcjs.Divider; exports.Heading = _PYX4374Tcjs.Heading_default; exports.IconButton = _LDFTT3OIcjs.IconButton_default; exports.LinkButton = _EBNDJEOGcjs.LinkButton_default; exports.Modal = _4DPEJJ42cjs.Modal; exports.Popover = _D3WPZHGMcjs.Popover_default; exports.RadioButton = _37N4BSEFcjs.RadioButton_default; exports.SelectList = _NGVAEAMLcjs.SelectList; exports.TapArea = _CGUZFFJ2cjs.TapArea_default; exports.TextArea = _WI7S7GOJcjs.TextArea_default; exports.TextField = _YH4XW4LDcjs.TextField; exports.Tooltip = _AS6O55Z6cjs.Tooltip_default; exports.Typography = _UNZBENAEcjs.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 {
@@ -2241,14 +2248,25 @@
   box-shadow: var(--elevation-400);
 }
 
-/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css/#css-module-data */
-._dialog_vyzu3_1 {
-  min-width: var(--trigger-width);
+/* 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;
 }
-._dialog_vyzu3_1:focus-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,
@@ -2268,13 +2286,6 @@
   max-height: 100%;
 }
 
-/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Popover/Popover.module.css/#css-module-data */
-._popover_158cf_1 {
-  max-width: 100%;
-  max-height: 100%;
-  visibility: visible;
-}
-
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css/#css-module-data */
 ._radioBaseContainer_6h2zg_1 {
   display: flex;
@@ -2422,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;