@cambly/syntax-core 4.8.1 → 4.8.2

package/dist/index.js

@@ -401,6 +401,9 @@ function foregroundColor(color) {
   }
 }
 
+// src/Button/Button.tsx
+var import_react2 = require("react");
+
 // css-module:./Button.module.css#css-module
 var Button_module_default = { "button": "_button_13egy_1", "buttonGap": "_buttonGap_13egy_9", "fullWidth": "_fullWidth_13egy_50", "sm": "_sm_13egy_54", "md": "_md_13egy_61", "lg": "_lg_13egy_68", "icon": "_icon_13egy_75", "smIcon": "_smIcon_13egy_79", "mdIcon": "_mdIcon_13egy_86", "lgIcon": "_lgIcon_13egy_93", "textContainer": "_textContainer_13egy_100", "secondaryBorder": "_secondaryBorder_13egy_105", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_13egy_109", "loading": "_loading_13egy_123", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_13egy_1", "loadingCircle": "_loadingCircle_13egy_127", "buttonText": "_buttonText_13egy_135", "buttonTextSmall": "_buttonTextSmall_13egy_142", "buttonTextMedium": "_buttonTextMedium_13egy_146", "buttonTextLarge": "_buttonTextLarge_13egy_150" };
 
@@ -422,68 +425,72 @@ var iconSize = {
   ["md"]: Button_module_default.mdIcon,
   ["lg"]: Button_module_default.lgIcon
 };
-var Button = ({
-  text,
-  loadingText,
-  color = "primary",
-  size = "md",
-  accessibilityLabel,
-  disabled = false,
-  loading = false,
-  fullWidth = false,
-  startIcon: StartIcon,
-  endIcon: EndIcon,
-  onClick,
-  tooltip
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "button",
-    {
-      "aria-label": accessibilityLabel,
-      type: "button",
-      title: tooltip,
-      disabled: disabled || loading,
-      onClick,
-      className: (0, import_classnames3.default)(
-        Button_module_default.button,
-        foregroundColor(color),
-        backgroundColor(color),
-        Button_module_default[size],
-        {
-          [Button_module_default.fullWidth]: fullWidth,
-          [Button_module_default.buttonGap]: size === "lg" || size === "md",
-          [Button_module_default.secondaryBorder]: color === "secondary",
-          [Button_module_default.secondaryDestructiveBorder]: color === "destructive-secondary"
-        }
-      ),
-      children: [
-        !loading && StartIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StartIcon, { className: (0, import_classnames3.default)(Button_module_default.icon, iconSize[size]) }),
-        (loading && loadingText || !loading && text) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: Button_module_default.textContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames3.default)(Button_module_default.buttonText, textVariant[size]), children: loading ? loadingText : text }) }),
-        !loading && EndIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EndIcon, { className: (0, import_classnames3.default)(Button_module_default.icon, iconSize[size]) }),
-        loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "svg",
+var Button = (0, import_react2.forwardRef)(
+  ({
+    text,
+    loadingText,
+    color = "primary",
+    size = "md",
+    accessibilityLabel,
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    startIcon: StartIcon,
+    endIcon: EndIcon,
+    onClick,
+    tooltip
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        ref,
+        "aria-label": accessibilityLabel,
+        type: "button",
+        title: tooltip,
+        disabled: disabled || loading,
+        onClick,
+        className: (0, import_classnames3.default)(
+          Button_module_default.button,
+          foregroundColor(color),
+          backgroundColor(color),
+          Button_module_default[size],
           {
-            className: (0, import_classnames3.default)(Button_module_default.loading, foregroundColor(color)),
-            viewBox: "22 22 44 44",
-            width: loadingIconSize[size],
-            height: loadingIconSize[size],
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "circle",
-              {
-                className: Button_module_default.loadingCircle,
-                cx: "44",
-                cy: "44",
-                r: "20.2",
-                fill: "none",
-                strokeWidth: "3.6"
-              }
-            )
+            [Button_module_default.fullWidth]: fullWidth,
+            [Button_module_default.buttonGap]: size === "lg" || size === "md",
+            [Button_module_default.secondaryBorder]: color === "secondary",
+            [Button_module_default.secondaryDestructiveBorder]: color === "destructive-secondary"
           }
-        )
-      ]
-    }
-  );
-};
+        ),
+        children: [
+          !loading && StartIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StartIcon, { className: (0, import_classnames3.default)(Button_module_default.icon, iconSize[size]) }),
+          (loading && loadingText || !loading && text) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: Button_module_default.textContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames3.default)(Button_module_default.buttonText, textVariant[size]), children: loading ? loadingText : text }) }),
+          !loading && EndIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EndIcon, { className: (0, import_classnames3.default)(Button_module_default.icon, iconSize[size]) }),
+          loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "svg",
+            {
+              className: (0, import_classnames3.default)(Button_module_default.loading, foregroundColor(color)),
+              viewBox: "22 22 44 44",
+              width: loadingIconSize[size],
+              height: loadingIconSize[size],
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "circle",
+                {
+                  className: Button_module_default.loadingCircle,
+                  cx: "44",
+                  cy: "44",
+                  r: "20.2",
+                  fill: "none",
+                  strokeWidth: "3.6"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 var Button_default = Button;
 
 // css-module:./ButtonGroup.module.css#css-module
@@ -605,6 +612,7 @@ var Heading_default = Heading;
 
 // src/IconButton/IconButton.tsx
 var import_classnames6 = __toESM(require_classnames());
+var import_react3 = require("react");
 
 // css-module:./IconButton.module.css#css-module
 var IconButton_module_default = { "iconButton": "_iconButton_dzhn0_1", "sm": "_sm_dzhn0_46", "md": "_md_dzhn0_51", "lg": "_lg_dzhn0_56", "smIcon": "_smIcon_dzhn0_61", "mdIcon": "_mdIcon_dzhn0_68", "lgIcon": "_lgIcon_dzhn0_75" };
@@ -616,41 +624,45 @@ var iconSize2 = {
   ["md"]: IconButton_module_default.mdIcon,
   ["lg"]: IconButton_module_default.lgIcon
 };
-var IconButton = ({
-  accessibilityLabel,
-  color = "primary",
-  disabled = false,
-  icon: Icon,
-  size = "md",
-  tooltip,
-  onClick
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "button",
-    {
-      "aria-label": accessibilityLabel,
-      type: "button",
-      title: tooltip,
-      disabled,
-      onClick,
-      className: (0, import_classnames6.default)(
-        IconButton_module_default.iconButton,
-        foregroundColor(color),
-        backgroundColor(color),
-        IconButton_module_default[size]
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: iconSize2[size] })
-    }
-  );
-};
+var IconButton = (0, import_react3.forwardRef)(
+  ({
+    accessibilityLabel,
+    color = "primary",
+    disabled = false,
+    icon: Icon,
+    size = "md",
+    tooltip,
+    onClick
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        "aria-label": accessibilityLabel,
+        type: "button",
+        title: tooltip,
+        disabled,
+        onClick,
+        className: (0, import_classnames6.default)(
+          IconButton_module_default.iconButton,
+          foregroundColor(color),
+          backgroundColor(color),
+          IconButton_module_default[size]
+        ),
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: iconSize2[size] })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
 var IconButton_default = IconButton;
 
 // src/Checkbox/Checkbox.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 var import_classnames7 = __toESM(require_classnames());
 
 // src/useFocusVisible.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 var hasSetupGlobalListeners = false;
 var currentModality = null;
 var changeHandlers = /* @__PURE__ */ new Set();
@@ -726,8 +738,8 @@ function setupGlobalFocusEvents() {
 }
 function useFocusVisible() {
   setupGlobalFocusEvents();
-  const [isFocusVisibleState, setFocusVisible] = (0, import_react2.useState)(isFocusVisible());
-  (0, import_react2.useEffect)(() => {
+  const [isFocusVisibleState, setFocusVisible] = (0, import_react4.useState)(isFocusVisible());
+  (0, import_react4.useEffect)(() => {
     const handler = () => {
       setFocusVisible(isFocusVisible());
     };
@@ -763,7 +775,7 @@ var Checkbox = ({
   error = false,
   onChange
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const checkboxStyling = (0, import_classnames7.default)(Checkbox_module_default.checkbox, Checkbox_module_default[size]);
   const uncheckedStyling = (0, import_classnames7.default)(checkboxStyling, Checkbox_module_default.uncheckedBox, {
@@ -825,11 +837,11 @@ var MiniActionCard = ({
 var MiniActionCard_default = MiniActionCard;
 
 // src/RadioButton/RadioButton.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 var import_classnames8 = __toESM(require_classnames());
 
 // css-module:./RadioButton.module.css#css-module
-var RadioButton_module_default = { "radioBaseContainer": "_radioBaseContainer_144ms_1", "smBase": "_smBase_144ms_8", "mdBase": "_mdBase_144ms_13", "radioStyleOverride": "_radioStyleOverride_144ms_18", "smOverride": "_smOverride_144ms_23", "mdOverride": "_mdOverride_144ms_28", "background": "_background_144ms_33", "sm": "_sm_144ms_8", "md": "_md_144ms_13", "neutralBorder": "_neutralBorder_144ms_50", "smCheckedBorder": "_smCheckedBorder_144ms_54", "mdCheckedBorder": "_mdCheckedBorder_144ms_58", "errorBorderColor": "_errorBorderColor_144ms_62", "borderColor": "_borderColor_144ms_66" };
+var RadioButton_module_default = { "radioBaseContainer": "_radioBaseContainer_ne98c_1", "smBase": "_smBase_ne98c_9", "mdBase": "_mdBase_ne98c_14", "radioStyleOverride": "_radioStyleOverride_ne98c_19", "smOverride": "_smOverride_ne98c_24", "mdOverride": "_mdOverride_ne98c_29", "background": "_background_ne98c_34", "sm": "_sm_ne98c_9", "md": "_md_ne98c_14", "neutralBorder": "_neutralBorder_ne98c_51", "smCheckedBorder": "_smCheckedBorder_ne98c_55", "mdCheckedBorder": "_mdCheckedBorder_ne98c_59", "errorBorderColor": "_errorBorderColor_ne98c_63", "borderColor": "_borderColor_ne98c_67" };
 
 // src/RadioButton/RadioButton.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -843,7 +855,7 @@ var RadioButton = ({
   size = "md",
   value
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const sharedStyles = (0, import_classnames8.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
@@ -903,7 +915,7 @@ var RadioButton = ({
 var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_classnames9 = __toESM(require_classnames());
 
 // ../syntax-design-tokens/dist/js/index.js
@@ -948,9 +960,9 @@ var SelectList = ({
   selectedValue = "",
   size = "md"
 }) => {
-  const id = (0, import_react5.useId)();
+  const id = (0, import_react7.useId)();
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
-  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {