@cambly/syntax-core 10.30.0 → 10.31.0

package/dist/__chunks/{BQOD4WU7.js → GR5G6EJO.js}

@@ -7,28 +7,22 @@ import {
 } from "./Z5ZUAP2B.js";
 import {
   iconSize_default
-} from "./JAC64LLA.js";
+} from "./YV4ASN4Z.js";
 import {
-  cambioColor,
-  classicColor
+  cambioColor
 } from "./GFKDPMFK.js";
 import {
-  cambioForegroundColor,
-  classicForegroundColor
-} from "./FPHP3T7U.js";
+  cambioForegroundColor
+} from "./P6K7GG3H.js";
 import {
-  cambioBackgroundColor,
-  classicBackgroundColor
-} from "./IB3FQANU.js";
+  backgroundColor
+} from "./MWCEKFF2.js";
 import {
   Box_default
-} from "./HCHFPFNX.js";
+} from "./ZPY7QEBH.js";
 import {
   Typography_default
-} from "./UVROGDYB.js";
-import {
-  useTheme
-} from "./4GTNQPPD.js";
+} from "./3GNWH6C7.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -38,7 +32,7 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 
 // css-module:./Button.module.css#css-module
-var Button_module_default = { "button": "_button_9efd1_1", "buttonGap": "_buttonGap_9efd1_9", "disabledCambioPrimary": "_disabledCambioPrimary_9efd1_50", "fullWidth": "_fullWidth_9efd1_54", "sm": "_sm_9efd1_58", "md": "_md_9efd1_65", "lg": "_lg_9efd1_72", "smCambio": "_smCambio_9efd1_79", "mdCambio": "_mdCambio_9efd1_86", "lgCambio": "_lgCambio_9efd1_93", "icon": "_icon_9efd1_100", "smIcon": "_smIcon_9efd1_104", "mdIcon": "_mdIcon_9efd1_111", "lgIcon": "_lgIcon_9efd1_118", "secondaryBorder": "_secondaryBorder_9efd1_125", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_9efd1_129", "loading": "_loading_9efd1_143", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_9efd1_1", "loadingCircle": "_loadingCircle_9efd1_147" };
+var Button_module_default = { "button": "_button_hiifq_1", "buttonGap": "_buttonGap_hiifq_9", "disabledPrimary": "_disabledPrimary_hiifq_50", "fullWidth": "_fullWidth_hiifq_54", "sm": "_sm_hiifq_58", "md": "_md_hiifq_65", "lg": "_lg_hiifq_72", "icon": "_icon_hiifq_79", "smIcon": "_smIcon_hiifq_83", "mdIcon": "_mdIcon_hiifq_90", "lgIcon": "_lgIcon_hiifq_97", "loading": "_loading_hiifq_114", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_hiifq_1", "loadingCircle": "_loadingCircle_hiifq_118" };
 
 // src/Button/Button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -61,10 +55,9 @@ var Button = forwardRef(
     type = "button"
   }, ref) => {
     const isHydrated = useIsHydrated();
-    const { themeName } = useTheme();
-    const foregroundColorClass = themeName === "classic" ? classicForegroundColor(classicColor(color)) : cambioForegroundColor(cambioColor(color), on);
-    const backgroundColorClass = themeName === "classic" ? classicBackgroundColor(classicColor(color)) : cambioBackgroundColor(cambioColor(color), on);
-    const disabledCambioPrimary = themeName === "cambio" && color === "primary" && disabled;
+    const foregroundColorClass = cambioForegroundColor(cambioColor(color), on);
+    const backgroundColorClass = backgroundColor(cambioColor(color), on);
+    const disabledPrimary = color === "primary" && disabled;
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -79,12 +72,10 @@ var Button = forwardRef(
           Button_module_default.button,
           foregroundColorClass,
           backgroundColorClass,
-          themeName === "classic" ? Button_module_default[size] : Button_module_default[`${size}Cambio`],
+          Button_module_default[size],
           {
             [Button_module_default.fullWidth]: fullWidth,
-            [Button_module_default.buttonGap]: size === "lg" || size === "md",
-            [Button_module_default.secondaryBorder]: themeName === "classic" && color === "secondary",
-            [Button_module_default.secondaryDestructiveBorder]: themeName === "classic" && color === "destructive-secondary"
+            [Button_module_default.buttonGap]: size === "lg" || size === "md"
           }
         ),
         children: [
@@ -94,35 +85,29 @@ var Button = forwardRef(
               className: classNames(
                 Button_module_default.icon,
                 iconSize_default[size],
-                disabledCambioPrimary && Button_module_default.disabledCambioPrimary
+                disabledPrimary && Button_module_default.disabledPrimary
               )
             }
           ),
-          (loading && loadingText || !loading && text) && /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(
-            Typography_default,
+          (loading && loadingText || !loading && text) && /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: textVariant_default[size], children: /* @__PURE__ */ jsx(
+            "span",
             {
-              size: themeName === "classic" ? textVariant_default[size] : textVariant_default[size],
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: classNames(
-                    // Temporary - until we have cambio colors on Typography
-                    foregroundColorClass,
-                    disabledCambioPrimary && Button_module_default.disabledCambioPrimary
-                  ),
-                  style: { fontWeight: 500 },
-                  children: loading ? loadingText : text
-                }
-              )
+              className: classNames(
+                // Temporary - until we have cambio colors on Typography
+                foregroundColorClass,
+                disabledPrimary && Button_module_default.disabledPrimary
+              ),
+              style: { fontWeight: 500 },
+              children: loading ? loadingText : text
             }
-          ) }),
+          ) }) }),
           !loading && EndIcon && /* @__PURE__ */ jsx(
             EndIcon,
             {
               className: classNames(
                 Button_module_default.icon,
                 iconSize_default[size],
-                disabledCambioPrimary && Button_module_default.disabledCambioPrimary
+                disabledPrimary && Button_module_default.disabledPrimary
               )
             }
           ),
@@ -157,4 +142,4 @@ var Button_default = Button;
 export {
   Button_default
 };
-//# sourceMappingURL=BQOD4WU7.js.map
+//# sourceMappingURL=GR5G6EJO.js.map

package/dist/__chunks/GR5G6EJO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport iconSize from \"./constants/iconSize\";\nimport textVariant from \"./constants/textVariant\";\nimport loadingIconSize from \"./constants/loadingIconSize\";\nimport styles from \"./Button.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { cambioColor } from \"./constants/color\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { cambioForegroundColor } from \"../colors/foregroundColor\";\n\ntype ButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * `inverse` and `success` are deprecated\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button (Cambio only)\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n  /**\n   * The type you want to set for the primitive `<button/>`\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n};\n\n/**\n * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      \"data-testid\": dataTestId,\n      text,\n      loadingText,\n      color = \"primary\",\n      size = \"md\",\n      accessibilityLabel,\n      disabled = false,\n      loading = false,\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      on = \"lightBackground\",\n      onClick,\n      tooltip,\n      type = \"button\",\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n\n    const foregroundColorClass = cambioForegroundColor(cambioColor(color), on);\n    const backgroundColorClass = backgroundColor(cambioColor(color), on);\n    const disabledPrimary = color === \"primary\" && disabled;\n\n    return (\n      <button\n        data-testid={dataTestId}\n        ref={ref}\n        aria-label={accessibilityLabel}\n        type={type}\n        title={tooltip}\n        disabled={!isHydrated || disabled || loading}\n        onClick={onClick}\n        className={classNames(\n          styles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          styles[size],\n          {\n            [styles.fullWidth]: fullWidth,\n            [styles.buttonGap]: size === \"lg\" || size === \"md\",\n          },\n        )}\n      >\n        {!loading && StartIcon && (\n          <StartIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledPrimary && styles.disabledPrimary,\n            )}\n          />\n        )}\n        {((loading && loadingText) || (!loading && text)) && (\n          <Box paddingX={1}>\n            <Typography size={textVariant[size]}>\n              <span\n                className={classNames(\n                  // Temporary - until we have cambio colors on Typography\n                  foregroundColorClass,\n                  disabledPrimary && styles.disabledPrimary,\n                )}\n                style={{ fontWeight: 500 }}\n              >\n                {loading ? loadingText : text}\n              </span>\n            </Typography>\n          </Box>\n        )}\n        {!loading && EndIcon && (\n          <EndIcon\n            className={classNames(\n              styles.icon,\n              iconSize[size],\n              disabledPrimary && styles.disabledPrimary,\n            )}\n          />\n        )}\n        {loading && (\n          <svg\n            className={classNames(styles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[size]}\n            height={loadingIconSize[size]}\n          >\n            <circle\n              className={styles.loadingCircle}\n              cx=\"44\"\n              cy=\"44\"\n              r=\"20.2\"\n              fill=\"none\"\n              strokeWidth=\"3.6\"\n            />\n          </svg>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_hiifq_1\",\"buttonGap\":\"_buttonGap_hiifq_9\",\"disabledPrimary\":\"_disabledPrimary_hiifq_50\",\"fullWidth\":\"_fullWidth_hiifq_54\",\"sm\":\"_sm_hiifq_58\",\"md\":\"_md_hiifq_65\",\"lg\":\"_lg_hiifq_72\",\"icon\":\"_icon_hiifq_79\",\"smIcon\":\"_smIcon_hiifq_83\",\"mdIcon\":\"_mdIcon_hiifq_90\",\"lgIcon\":\"_lgIcon_hiifq_97\",\"loading\":\"_loading_hiifq_114\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_hiifq_1\",\"loadingCircle\":\"_loadingCircle_hiifq_118\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAClC,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ADgJpiB,SAoBI,KApBJ;AA5BN,IAAM,SAAS;AAAA,EACb,CACE;AAAA,IACE,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,UAAM,uBAAuB,sBAAsB,YAAY,KAAK,GAAG,EAAE;AACzE,UAAM,uBAAuB,gBAAgB,YAAY,KAAK,GAAG,EAAE;AACnE,UAAM,kBAAkB,UAAU,aAAa;AAE/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb;AAAA,QACA,cAAY;AAAA,QACZ;AAAA,QACA,OAAO;AAAA,QACP,UAAU,CAAC,cAAc,YAAY;AAAA,QACrC;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,sBAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,sBAAO,SAAS,GAAG;AAAA,YACpB,CAAC,sBAAO,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,UAChD;AAAA,QACF;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAS,IAAI;AAAA,gBACb,mBAAmB,sBAAO;AAAA,cAC5B;AAAA;AAAA,UACF;AAAA,WAEC,WAAW,eAAiB,CAAC,WAAW,SACzC,oBAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,oBAAY,IAAI,GAChC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA;AAAA,gBAET;AAAA,gBACA,mBAAmB,sBAAO;AAAA,cAC5B;AAAA,cACA,OAAO,EAAE,YAAY,IAAI;AAAA,cAExB,oBAAU,cAAc;AAAA;AAAA,UAC3B,GACF,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAO;AAAA,gBACP,iBAAS,IAAI;AAAA,gBACb,mBAAmB,sBAAO;AAAA,cAC5B;AAAA;AAAA,UACF;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAO,SAAS,oBAAoB;AAAA,cAC1D,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAO;AAAA,kBAClB,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,MAAK;AAAA,kBACL,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AAErB,IAAO,iBAAQ;","names":[]}

package/dist/__chunks/{Q4HTXMNF.js → GSSIV3VC.js}

@@ -1,10 +1,7 @@
 "use client"
 import {
   Box_default
-} from "./HCHFPFNX.js";
-import {
-  useTheme
-} from "./4GTNQPPD.js";
+} from "./ZPY7QEBH.js";
 
 // src/AvatarGroup/AvatarGroup.tsx
 import {
@@ -22,8 +19,7 @@ function AvatarGroup({
   orientation = "standard",
   children
 }) {
-  const { themeName } = useTheme();
-  const parsedSize = themeName === "cambio" && size === "xl" ? "lg" : size;
+  const parsedSize = size === "xl" ? "lg" : size;
   return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: { size: parsedSize, orientation }, children: /* @__PURE__ */ jsx(
     Box_default,
     {
@@ -44,4 +40,4 @@ export {
   useAvatarGroup,
   AvatarGroup
 };
-//# sourceMappingURL=Q4HTXMNF.js.map
+//# sourceMappingURL=GSSIV3VC.js.map

package/dist/__chunks/GSSIV3VC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import {\n  type ReactNode,\n  createContext,\n  useContext,\n  type ReactElement,\n} from \"react\";\nimport Box from \"../Box/Box\";\n\ntype Size =\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  /* `xl` is deprecated */\n  | \"xl\";\ntype Orientation = \"standard\" | \"reverse\";\n\ntype AvatarGroupContextType = {\n  size: Size;\n  orientation: Orientation;\n};\n\nconst AvatarGroupContext = createContext<AvatarGroupContextType | null>(null);\n\nexport function useAvatarGroup(): AvatarGroupContextType | null {\n  const context = useContext(AvatarGroupContext);\n  return !context ? null : context;\n}\n\n/**\n * [AvatarGroup](https://cambly-syntax.vercel.app/?path=/docs/components-avatargroup--docs) is a stack of avatars to represent a group of people\n *\n * Pass in Avatar components as children to the AvatarGroup component. The size prop that is passed into the AvatarGroup component will override Avatar's size prop..\n *\n * Usage:\n *\n * <AvatarGroup size=\"xl\" orientation=\"standard\">\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n *   <Avatar accessibilityLabel=\"Joseph Liotta\" src=\"image.png\" />\n * </AvatarGroup>\n *\n */\nexport default function AvatarGroup({\n  size = \"md\",\n  orientation = \"standard\",\n  children,\n}: {\n  /**\n   * Size of the avatars in the AvatarGroup.\n   *\n   * * `xs`: 24px\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   * * `xl`: 64px (deprecated)\n   *\n   * @defaultValue `md`\n   */\n  size?: Size;\n  /**\n   * Orientation of the AvatarGroup.\n   * This describes the order of rendering of the Avatar components.\n   * Standard renders the Avatar components with the right component on top.\n   * Reverse renders the Avatar components with the left component on top.\n   *\n   * @defaultValue `standard`\n   */\n  orientation?: Orientation;\n  /**\n   * Avatars to be rendered within the AvatarGroup.\n   */\n  children: ReactNode;\n}): ReactElement {\n  const parsedSize = size === \"xl\" ? \"lg\" : size;\n\n  return (\n    <AvatarGroupContext.Provider value={{ size: parsedSize, orientation }}>\n      <Box\n        display=\"flex\"\n        justifyContent={orientation === \"standard\" ? \"start\" : \"end\"}\n        dangerouslySetInlineStyle={{\n          __style: {\n            flexDirection: orientation === \"standard\" ? \"row\" : \"row-reverse\",\n          },\n        }}\n      >\n        {children}\n      </Box>\n    </AvatarGroupContext.Provider>\n  );\n}\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"],"mappings":";;;;;;AAAA;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAyED;AAxDN,IAAM,qBAAqB,cAA6C,IAAI;AAErE,SAAS,iBAAgD;AAC9D,QAAM,UAAU,WAAW,kBAAkB;AAC7C,SAAO,CAAC,UAAU,OAAO;AAC3B;AAgBe,SAAR,YAA6B;AAAA,EAClC,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AACF,GA0BiB;AACf,QAAM,aAAa,SAAS,OAAO,OAAO;AAE1C,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAM,YAAY,YAAY,GAClE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAgB,gBAAgB,aAAa,UAAU;AAAA,MACvD,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,eAAe,gBAAgB,aAAa,QAAQ;AAAA,QACtD;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,YAAY,cAAc;","names":[]}

package/dist/__chunks/{KTTIFVGY.js → H2AWA6IQ.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Chip_default
-} from "./5PWYNWVE.js";
+} from "./RTT2WOZS.js";
 import {
   RichSelectItem_default
 } from "./ODMJANSX.js";
@@ -31,4 +31,4 @@ var RichSelectChip_default = forwardRef(
 export {
   RichSelectChip_default
 };
-//# sourceMappingURL=KTTIFVGY.js.map
+//# sourceMappingURL=H2AWA6IQ.js.map

package/dist/__chunks/{2HNPYS3S.cjs → J66QB6E3.cjs}

@@ -3,38 +3,35 @@
 
 
 
-var _GEGGHBSMcjs = require('./GEGGHBSM.cjs');
+var _C2H5JBU2cjs = require('./C2H5JBU2.cjs');
 
 
-var _ZUQC37VBcjs = require('./ZUQC37VB.cjs');
+var _N2V7ZZBMcjs = require('./N2V7ZZBM.cjs');
 
 
-var _LECUYS4Ocjs = require('./LECUYS4O.cjs');
+var _TDPIWHGRcjs = require('./TDPIWHGR.cjs');
 
 
-var _W5MIJIZAcjs = require('./W5MIJIZA.cjs');
+var _2IHACTOYcjs = require('./2IHACTOY.cjs');
 
 
-var _UKLQ64N7cjs = require('./UKLQ64N7.cjs');
+var _753VRQSYcjs = require('./753VRQSY.cjs');
 
 
 
-var _7SCBZPIFcjs = require('./7SCBZPIF.cjs');
+var _N47VDOUPcjs = require('./N47VDOUP.cjs');
 
 
-var _SFOAZYZGcjs = require('./SFOAZYZG.cjs');
+var _35S5FKUCcjs = require('./35S5FKUC.cjs');
 
 
-var _WOIJRASPcjs = require('./WOIJRASP.cjs');
+var _QN33R37Rcjs = require('./QN33R37R.cjs');
 
 
-var _GANR5JVVcjs = require('./GANR5JVV.cjs');
+var _OT2MUGKKcjs = require('./OT2MUGKK.cjs');
 
 
-var _XU3CLITIcjs = require('./XU3CLITI.cjs');
-
-
-var _JXOKXBDZcjs = require('./JXOKXBDZ.cjs');
+var _5VHLZADOcjs = require('./5VHLZADO.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -59,17 +56,12 @@ var _utils = require('@react-stately/utils');
 var _interactions = require('@react-aria/interactions');
 
 // css-module:../SelectList/SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_dwmnw_1", "opacityOverlay": "_opacityOverlay_dwmnw_7", "selectWrapper": "_selectWrapper_dwmnw_11", "selectBox": "_selectBox_dwmnw_16", "selectBoxClassic": "_selectBoxClassic_dwmnw_32", "selectBoxCambio": "_selectBoxCambio_dwmnw_37", "selectMouseFocusStyling": "_selectMouseFocusStyling_dwmnw_46", "unselected": "_unselected_dwmnw_51", "selected": "_selected_dwmnw_55", "arrowIcon": "_arrowIcon_dwmnw_59", "sm": "_sm_dwmnw_73", "md": "_md_dwmnw_79", "lg": "_lg_dwmnw_85", "selectError": "_selectError_dwmnw_91", "selectErrorCambio": "_selectErrorCambio_dwmnw_97" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_1f379_1", "opacityOverlay": "_opacityOverlay_1f379_7", "selectWrapper": "_selectWrapper_1f379_11", "selectBox": "_selectBox_1f379_16", "selectBoxCambio": "_selectBoxCambio_1f379_32", "selectMouseFocusStyling": "_selectMouseFocusStyling_1f379_41", "unselected": "_unselected_1f379_46", "selected": "_selected_1f379_50", "arrowIcon": "_arrowIcon_1f379_54", "selectErrorCambio": "_selectErrorCambio_1f379_68" };
 
 // src/RichSelect/RichSelectList.tsx
 var _reactaria = require('react-aria');
 var _jsxruntime = require('react/jsx-runtime');
 var NOOP = () => void 0;
-var iconSize = {
-  sm: 20,
-  md: 24,
-  lg: 24
-};
 function RichSelectList(props) {
   const _a = props, {
     autosave,
@@ -108,14 +100,13 @@ function RichSelectList(props) {
   const inputId = id != null ? id : reactId;
   const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   const disabled = !isHydrated || disabledProp;
-  const { themeName } = _JXOKXBDZcjs.useTheme.call(void 0, );
   const overlayHandlerRef = _react.useRef.call(void 0, {});
   const selectedKeysProp = _react.useMemo.call(void 0, 
-    () => _GEGGHBSMcjs.convertSelection.call(void 0, selectedValuesProp),
+    () => _C2H5JBU2cjs.convertSelection.call(void 0, selectedValuesProp),
     [selectedValuesProp]
   );
   const defaultSelectedKeys = _react.useMemo.call(void 0, 
-    () => _GEGGHBSMcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
+    () => _C2H5JBU2cjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
     [defaultSelectedValuesProp]
   );
   const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0, 
@@ -153,8 +144,8 @@ function RichSelectList(props) {
     _reactariacomponents.Provider,
     {
       values: [
-        [_GEGGHBSMcjs.RichSelectBoxContext, { autoFocus: true }],
-        [_W5MIJIZAcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
+        [_C2H5JBU2cjs.RichSelectBoxContext, { autoFocus: true }],
+        [_2IHACTOYcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
         // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
       ],
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -177,23 +168,23 @@ function RichSelectList(props) {
                   (_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
                   _interactions.setInteractionModality.call(void 0, "keyboard");
                 },
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GANR5JVVcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XU3CLITIcjs.Typography_default, { size: 100, color: "gray700", children: label }) })
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OT2MUGKKcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5VHLZADOcjs.Typography_default, { size: 100, color: "gray700", children: label }) })
               })
             ) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _LECUYS4Ocjs.Popover_default,
+              _TDPIWHGRcjs.Popover_default,
               {
                 ref: overlayHandlerRef,
                 disabled,
                 content: (
                   // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _GANR5JVVcjs.Box_default,
+                    _OT2MUGKKcjs.Box_default,
                     {
                       padding: autosave ? void 0 : 5,
                       dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _GEGGHBSMcjs.RichSelectBox_default,
+                        _C2H5JBU2cjs.RichSelectBox_default,
                         _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                           autosave,
                           selectedValues: selectedKeys,
@@ -208,26 +199,25 @@ function RichSelectList(props) {
                   )
                 ),
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _UKLQ64N7cjs.TapArea_default,
+                  _753VRQSYcjs.TapArea_default,
                   _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                     "data-testid": dataTestId,
                     disabled,
                     onClick,
-                    rounding: size === "lg" ? "lg" : "md"
+                    rounding: "md"
                   }, fieldProps), {
                     ref: fieldRef,
-                    children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SelectList_module_default.selectWrapper, children: [
+                    children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SelectList_module_default.selectWrapper, "data-size": size, children: [
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                         "div",
                         {
                           className: _classnames2.default.call(void 0, 
                             SelectList_module_default.selectBox,
-                            themeName === "classic" ? SelectList_module_default.selectBoxClassic : SelectList_module_default.selectBoxCambio,
-                            themeName === "classic" && SelectList_module_default[size],
+                            SelectList_module_default.selectBoxCambio,
                             {
                               [SelectList_module_default.unselected]: !errorText && selectedKeys !== "all" && !selectedKeys.size,
                               [SelectList_module_default.selected]: !errorText && (selectedKeys === "all" || selectedKeys.size),
-                              [themeName === "classic" ? SelectList_module_default.selectError : SelectList_module_default.selectErrorCambio]: errorText
+                              [SelectList_module_default.selectErrorCambio]: errorText
                             }
                           ),
                           children: selectedTextValue
@@ -239,11 +229,11 @@ function RichSelectList(props) {
                           focusable: "false",
                           "aria-hidden": "true",
                           viewBox: "0 0 24 24",
-                          width: iconSize[size],
+                          width: 24,
                           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             "path",
                             {
-                              fill: errorText ? _7SCBZPIFcjs.ColorBaseDestructive700 : _7SCBZPIFcjs.ColorBaseGray800,
+                              fill: errorText ? _N47VDOUPcjs.ColorBaseDestructive700 : _N47VDOUPcjs.ColorBaseGray800,
                               d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                             }
                           )
@@ -254,8 +244,8 @@ function RichSelectList(props) {
                 )
               }
             ),
-            (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GANR5JVVcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _XU3CLITIcjs.Typography_default,
+            (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OT2MUGKKcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _5VHLZADOcjs.Typography_default,
               _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                 size: 100,
                 color: errorText ? "destructive-primary" : "gray700"
@@ -270,12 +260,12 @@ function RichSelectList(props) {
   );
 }
 var RichSelectList_default = Object.assign(RichSelectList, {
-  Section: _SFOAZYZGcjs.RichSelectSection_default,
-  Chip: _ZUQC37VBcjs.RichSelectChip_default,
-  RadioButton: _WOIJRASPcjs.RichSelectRadioButton_default
+  Section: _35S5FKUCcjs.RichSelectSection_default,
+  Chip: _N2V7ZZBMcjs.RichSelectChip_default,
+  RadioButton: _QN33R37Rcjs.RichSelectRadioButton_default
 });
 
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=2HNPYS3S.cjs.map
+//# sourceMappingURL=J66QB6E3.cjs.map

package/dist/__chunks/J66QB6E3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"names":["_a"],"mappings":"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","sourcesContent":["import React, {\n  type ReactElement,\n  useMemo,\n  type SyntheticEvent,\n  useRef,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Popover from \"../Popover/Popover\";\nimport {\n  Label as ReactAriaLabel,\n  Provider as ReactAriaProvider,\n} from \"react-aria-components\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { setInteractionModality } from \"@react-aria/interactions\";\nimport { DialogContext } from \"../Dialog/Dialog\";\nimport styles from \"../SelectList/SelectList.module.css\";\nimport RichSelectBox, {\n  RichSelectBoxContext,\n  convertSelection,\n  type RichSelectBoxProps,\n} from \"./RichSelectBox\";\nimport TapArea from \"../TapArea/TapArea\";\nimport { type OverlayHandlerRef } from \"../react-aria-utils/Triggerable\";\nimport Box from \"../Box/Box\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\nimport { useField } from \"react-aria\";\n\nconst NOOP = () => undefined;\n\nexport type RichSelectListProps = RichSelectBoxProps & {\n  /** Test id for the select element */\n  \"data-testid\"?: string;\n  /**\n   * Disables the select dropdown entirely\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** Callback to be called when select is clicked */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /** Text shown below select box if there is an input error. */\n  errorText?: string;\n  /** Text shown below select box */\n  helperText?: string;\n  /**\n   * RichSelectList id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /** Text shown above select box */\n  label: string;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * There should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /** Use to render (override) text shown in the select box */\n  selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n  /**\n   * Size of the select box\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectList\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectList.Section label=\"Cities\">\n      <RichSelectList.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectList.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectList.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectList.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectList.Section>\n  </RichSelectList>\n ```\n */\nfunction RichSelectList(props: RichSelectListProps): ReactElement {\n  const {\n    autosave,\n    children,\n    \"data-testid\": dataTestId,\n    disabled: disabledProp = false,\n    errorText,\n    helperText,\n    label,\n    id,\n    onChange,\n    onClick = NOOP,\n    placeholderText,\n    selectTextValue,\n    selectedValues: selectedValuesProp,\n    defaultSelectedValues: defaultSelectedValuesProp,\n    size = \"md\",\n    ...richSelectBoxProps\n  } = props;\n\n  const reactId = useId();\n  const inputId = id ?? reactId;\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n\n  // passed to popover, which attached open/close methods\n  const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n  const selectedKeysProp = useMemo(\n    () => convertSelection(selectedValuesProp),\n    [selectedValuesProp],\n  );\n  const defaultSelectedKeys = useMemo(\n    () => convertSelection(defaultSelectedValuesProp, new Set()),\n    [defaultSelectedValuesProp],\n  );\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately.  Internally they rely on value (first arg) able to be undefined\n    defaultSelectedKeys,\n    (value) => {\n      const _value = value === \"all\" ? \"all\" : [...value].map(String);\n      onChange(_value);\n      if (!autosave) overlayHandlerRef.current.close?.();\n    },\n  );\n\n  const selectedTextValue = useMemo(() => {\n    if (selectTextValue)\n      return (\n        selectTextValue(\n          selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n        ) ?? placeholderText\n      );\n    if (selectedKeys === \"all\") return \"All selected\";\n    if (selectedKeys.size) return `${selectedKeys.size} selected`;\n    return placeholderText;\n  }, [selectTextValue, selectedKeys, placeholderText]);\n\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField({\n      label, // this is the label for the select box\n      description: helperText,\n      errorMessage: errorText,\n    });\n\n  return (\n    <ReactAriaProvider\n      values={[\n        [RichSelectBoxContext, { autoFocus: true }],\n        [DialogContext, { padding: autosave ? undefined : 0 }], // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided\n      ]}\n    >\n      <div\n        className={classNames(styles.selectContainer, {\n          [styles.opacityOverlay]: disabled,\n        })}\n        onClick={onClick}\n      >\n        {label && (\n          <>\n            <ReactAriaLabel\n              data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n              {...labelProps}\n              onClick={() => {\n                if (disabled) return;\n                fieldRef.current?.focus();\n                setInteractionModality(\"keyboard\"); // Show the focus ring so the user knows where focus went\n              }}\n            >\n              <Box paddingX={1}>\n                <Typography size={100} color=\"gray700\">\n                  {label}\n                </Typography>\n              </Box>\n            </ReactAriaLabel>\n          </>\n        )}\n        <Popover\n          ref={overlayHandlerRef}\n          disabled={disabled}\n          content={\n            // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided\n            <Box\n              padding={autosave ? undefined : 5}\n              dangerouslySetInlineStyle={\n                autosave ? undefined : { __style: { paddingBottom: 0 } }\n              }\n            >\n              <RichSelectBox\n                autosave={autosave}\n                selectedValues={selectedKeys}\n                defaultSelectedValues={defaultSelectedKeys}\n                onChange={(selected) => setSelectedKeys(new Set(selected))}\n                {...richSelectBoxProps}\n                accessibilityLabel={inputId}\n              >\n                {children}\n              </RichSelectBox>\n            </Box>\n          }\n        >\n          <TapArea\n            data-testid={dataTestId}\n            disabled={disabled}\n            onClick={onClick}\n            rounding=\"md\"\n            {...fieldProps}\n            ref={fieldRef}\n          >\n            <div className={styles.selectWrapper} data-size={size}>\n              <div\n                className={classNames(\n                  styles.selectBox,\n                  styles.selectBoxCambio,\n                  {\n                    [styles.unselected]:\n                      !errorText &&\n                      selectedKeys !== \"all\" &&\n                      !selectedKeys.size,\n                    [styles.selected]:\n                      !errorText &&\n                      (selectedKeys === \"all\" || selectedKeys.size),\n                    [styles.selectErrorCambio]: errorText,\n                  },\n                )}\n              >\n                {selectedTextValue}\n              </div>\n              <div className={styles.arrowIcon}>\n                <svg\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                  viewBox=\"0 0 24 24\"\n                  width={24}\n                >\n                  <path\n                    fill={\n                      errorText ? ColorBaseDestructive700 : ColorBaseGray800\n                    }\n                    d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </TapArea>\n        </Popover>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : \"gray700\"}\n              {...(errorText ? errorMessageProps : descriptionProps)}\n            >\n              {errorText ? errorText : helperText}\n            </Typography>\n          </Box>\n        )}\n      </div>\n    </ReactAriaProvider>\n  );\n}\n\nexport default Object.assign(RichSelectList, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_1f379_1\",\"opacityOverlay\":\"_opacityOverlay_1f379_7\",\"selectWrapper\":\"_selectWrapper_1f379_11\",\"selectBox\":\"_selectBox_1f379_16\",\"selectBoxCambio\":\"_selectBoxCambio_1f379_32\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1f379_41\",\"unselected\":\"_unselected_1f379_46\",\"selected\":\"_selected_1f379_50\",\"arrowIcon\":\"_arrowIcon_1f379_54\",\"selectErrorCambio\":\"_selectErrorCambio_1f379_68\"}"]}

package/dist/__chunks/{N5B6KNJR.js → J6JYJXK5.js}

@@ -4,16 +4,13 @@ import {
 } from "./KKADUD65.js";
 import {
   Box_default
-} from "./HCHFPFNX.js";
+} from "./ZPY7QEBH.js";
 import {
   Typography_default
-} from "./UVROGDYB.js";
+} from "./3GNWH6C7.js";
 import {
   colors_module_default
 } from "./B7PDT66P.js";
-import {
-  useTheme
-} from "./4GTNQPPD.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -43,27 +40,10 @@ var RadioButton = ({
   size = "md",
   value
 }) => {
-  const { themeName } = useTheme();
   const isHydrated = useIsHydrated();
   const disabled = !isHydrated || disabledProp;
   const [isFocused, setIsFocused] = useState(false);
   const { isFocusVisible } = useFocusVisible();
-  const classicStyles = classnames(RadioButton_module_default.background, RadioButton_module_default[size], {
-    [RadioButton_module_default.errorBorderColor]: error,
-    [RadioButton_module_default.borderColor]: !error,
-    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles,
-    [RadioButton_module_default.mdCheckedBorder]: checked && size === "md",
-    [RadioButton_module_default.smCheckedBorder]: checked && size === "sm",
-    [RadioButton_module_default.neutralBorder]: !checked && size === "md"
-  });
-  const cambioStyles = classnames(
-    RadioButton_module_default.background,
-    error ? colors_module_default.cambioDestructive370BackgroundColor : colors_module_default.cambioGray370BackgroundColor,
-    RadioButton_module_default[size],
-    {
-      [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles
-    }
-  );
   return /* @__PURE__ */ jsxs(
     "label",
     {
@@ -77,8 +57,20 @@ var RadioButton = ({
         }
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: themeName === "classic" ? classicStyles : cambioStyles }),
-        themeName === "cambio" && checked && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classnames(
+              RadioButton_module_default.background,
+              error ? colors_module_default.cambioDestructive370BackgroundColor : colors_module_default.cambioGray370BackgroundColor,
+              RadioButton_module_default[size],
+              {
+                [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles
+              }
+            )
+          }
+        ),
+        checked && /* @__PURE__ */ jsx(
           Box_default,
           {
             backgroundColor: error ? "destructive900" : "gray900",
@@ -137,4 +129,4 @@ var RadioButton_default = RadioButton;
 export {
   RadioButton_default
 };
-//# sourceMappingURL=N5B6KNJR.js.map
+//# sourceMappingURL=J6JYJXK5.js.map

package/dist/__chunks/J6JYJXK5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  dangerouslyForceFocusStyles = false,\n  disabled: disabledProp = false,\n  error = false,\n  id,\n  label,\n  name,\n  onChange,\n  size = \"md\",\n  value,\n}: {\n  /**\n   * Whether or not the radio button is checked\n   *\n   * @defaultValue false\n   */\n  checked?: boolean;\n  /**\n   * Test id for the radio button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether or not the radio button is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Whether to show error color schema\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n  /**\n   * Id for the the radio button\n   */\n  id?: string;\n  /**\n   * Value to show end user\n   */\n  label: string;\n  /**\n   * The name of the grouping the radio buttons are in\n   */\n  name: string;\n  /**\n   * The callback to be called when the radio button is clicked\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Size of the components\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Value of the selected radio option\n   */\n  value: string | number;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <label\n      className={classnames(\n        styles.radioBaseContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n          [styles.smBase]: size === \"sm\",\n          [styles.mdBase]: size === \"md\",\n        },\n      )}\n    >\n      <div\n        className={classnames(\n          styles.background,\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n          },\n        )}\n      />\n      {checked && (\n        <Box\n          backgroundColor={error ? \"destructive900\" : \"gray900\"}\n          width={size === \"md\" ? 12 : 8}\n          height={size === \"md\" ? 12 : 8}\n          position=\"absolute\"\n          rounding=\"full\"\n          dangerouslySetInlineStyle={{\n            __style: {\n              left: size === \"md\" ? 6 : 4,\n            },\n          }}\n        />\n      )}\n      <input\n        data-testid={dataTestId}\n        type=\"radio\"\n        id={id}\n        name={name}\n        className={classnames(\n          styles.radioStyleOverride,\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n          {\n            [styles.smOverride]: size === \"sm\",\n            [styles.mdOverride]: size === \"md\",\n          },\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      {label && (\n        <Typography\n          size={size === \"md\" ? 200 : 100}\n          color={error ? \"destructive-primary\" : \"gray900\"}\n        >\n          {label}\n        </Typography>\n      )}\n    </label>\n  );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_6h2zg_1\",\"disabled\":\"_disabled_6h2zg_9\",\"cursorDisabled\":\"_cursorDisabled_6h2zg_13\",\"cursorEnabled\":\"_cursorEnabled_6h2zg_17\",\"smBase\":\"_smBase_6h2zg_21\",\"mdBase\":\"_mdBase_6h2zg_25\",\"radioStyleOverride\":\"_radioStyleOverride_6h2zg_29\",\"smOverride\":\"_smOverride_6h2zg_34\",\"mdOverride\":\"_mdOverride_6h2zg_39\",\"background\":\"_background_6h2zg_44\",\"sm\":\"_sm_6h2zg_21\",\"md\":\"_md_6h2zg_25\",\"neutralBorder\":\"_neutralBorder_6h2zg_61\",\"smCheckedBorder\":\"_smCheckedBorder_6h2zg_65\",\"mdCheckedBorder\":\"_mdCheckedBorder_6h2zg_69\",\"errorBorderColor\":\"_errorBorderColor_6h2zg_73\",\"borderColor\":\"_borderColor_6h2zg_77\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACD+E,IAAO,6BAAQ,EAAC,sBAAqB,+BAA8B,YAAW,qBAAoB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,UAAS,oBAAmB,UAAS,oBAAmB,sBAAqB,gCAA+B,cAAa,wBAAuB,cAAa,wBAAuB,cAAa,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,iBAAgB,2BAA0B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,oBAAmB,8BAA6B,eAAc,wBAAuB;;;ADuFrvB,SAWE,KAXF;AAzEJ,IAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,8BAA8B;AAAA,EAC9B,UAAU,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAsDoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,2BAAO;AAAA,QACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,2BAAO,QAAQ,GAAG;AAAA,UACnB,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,UAC1B,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,QAC5B;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,QACI,sBAAY,sCACZ,sBAAY;AAAA,cAChB,2BAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACnC,aAAa,kBAAmB;AAAA,cACrC;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACC,WACC;AAAA,UAAC;AAAA;AAAA,YACC,iBAAiB,QAAQ,mBAAmB;AAAA,YAC5C,OAAO,SAAS,OAAO,KAAK;AAAA,YAC5B,QAAQ,SAAS,OAAO,KAAK;AAAA,YAC7B,UAAS;AAAA,YACT,UAAS;AAAA,YACT,2BAA2B;AAAA,cACzB,SAAS;AAAA,gBACP,MAAM,SAAS,OAAO,IAAI;AAAA,cAC5B;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,cACnD;AAAA,gBACE,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,gBAC9B,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,cAChC;AAAA,YACF;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,OAAO,MAAM;AAAA,YAC5B,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/__chunks/{BVYHALMT.cjs → J7RT6MWY.cjs}

@@ -7,18 +7,15 @@ var _PLUVW6AMcjs = require('./PLUVW6AM.cjs');
 var _IL22HCBFcjs = require('./IL22HCBF.cjs');
 
 
-var _S5QHTHSTcjs = require('./S5QHTHST.cjs');
+var _45TMKSJQcjs = require('./45TMKSJQ.cjs');
 
 
-var _XU3CLITIcjs = require('./XU3CLITI.cjs');
+var _5VHLZADOcjs = require('./5VHLZADO.cjs');
 
 
 var _QAS3KERZcjs = require('./QAS3KERZ.cjs');
 
 
-var _JXOKXBDZcjs = require('./JXOKXBDZ.cjs');
-
-
 var _LLFHCGRAcjs = require('./LLFHCGRA.cjs');
 
 
@@ -80,14 +77,13 @@ function TooltipArrow(props) {
 }
 var AriaTooltip = _react.forwardRef.call(void 0, function AriaTooltip2(_a, ref) {
   var _b = _a, { children: childrenProp, onChangeContentVisibility } = _b, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _b, ["children", "onChangeContentVisibility"]);
-  const { themeName } = _JXOKXBDZcjs.useTheme.call(void 0, );
   const className = _classnames2.default.call(void 0, [
     _IL22HCBFcjs.Box_module_default.box,
     _QAS3KERZcjs.colors_module_default.gray900Color,
-    themeName === "classic" ? _QAS3KERZcjs.colors_module_default.gray900BackgroundColor : _QAS3KERZcjs.colors_module_default.cambioBlackBackgroundColor,
+    _QAS3KERZcjs.colors_module_default.cambioBlackBackgroundColor,
     _PLUVW6AMcjs.padding_module_default.paddingX2,
     _PLUVW6AMcjs.padding_module_default.paddingY2,
-    themeName === "classic" ? _S5QHTHSTcjs.rounding_module_default.roundingsm : _S5QHTHSTcjs.rounding_module_default.roundingsmCambio,
+    _45TMKSJQcjs.rounding_module_default.roundingsm,
     Tooltip_module_default.tooltip
   ]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -106,7 +102,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, _XU3CLITIcjs.Typography_default, { size: 100, color: "white", children }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5VHLZADOcjs.Typography_default, { size: 100, color: "white", children }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _E5P6WRJDcjs.OverlayVisibility,
             {
@@ -166,4 +162,4 @@ var Tooltip_default = Tooltip;
 
 
 exports.AriaTooltip = AriaTooltip; exports.Tooltip_default = Tooltip_default;
-//# sourceMappingURL=BVYHALMT.cjs.map
+//# sourceMappingURL=J7RT6MWY.cjs.map

package/dist/__chunks/J7RT6MWY.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.cambioBlackBackgroundColor,\n    paddingStyles.paddingX2,\n    paddingStyles.paddingY2,\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\"}"]}