@cambly/syntax-core 4.8.0 → 4.8.2

package/dist/index.mjs

@@ -376,6 +376,9 @@ function foregroundColor(color) {
   }
 }
 
+// src/Button/Button.tsx
+import { forwardRef as forwardRef2 } from "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" };
 
@@ -397,68 +400,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__ */ 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__ */ jsx3(StartIcon, { className: (0, import_classnames3.default)(Button_module_default.icon, iconSize[size]) }),
-        (loading && loadingText || !loading && text) && /* @__PURE__ */ jsx3("div", { className: Button_module_default.textContainer, children: /* @__PURE__ */ jsx3("div", { className: (0, import_classnames3.default)(Button_module_default.buttonText, textVariant[size]), children: loading ? loadingText : text }) }),
-        !loading && EndIcon && /* @__PURE__ */ jsx3(EndIcon, { className: (0, import_classnames3.default)(Button_module_default.icon, iconSize[size]) }),
-        loading && /* @__PURE__ */ jsx3(
-          "svg",
+var Button = forwardRef2(
+  ({
+    text,
+    loadingText,
+    color = "primary",
+    size = "md",
+    accessibilityLabel,
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    startIcon: StartIcon,
+    endIcon: EndIcon,
+    onClick,
+    tooltip
+  }, ref) => {
+    return /* @__PURE__ */ 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__ */ jsx3(
-              "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__ */ jsx3(StartIcon, { className: (0, import_classnames3.default)(Button_module_default.icon, iconSize[size]) }),
+          (loading && loadingText || !loading && text) && /* @__PURE__ */ jsx3("div", { className: Button_module_default.textContainer, children: /* @__PURE__ */ jsx3("div", { className: (0, import_classnames3.default)(Button_module_default.buttonText, textVariant[size]), children: loading ? loadingText : text }) }),
+          !loading && EndIcon && /* @__PURE__ */ jsx3(EndIcon, { className: (0, import_classnames3.default)(Button_module_default.icon, iconSize[size]) }),
+          loading && /* @__PURE__ */ jsx3(
+            "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__ */ jsx3(
+                "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
@@ -580,6 +587,7 @@ var Heading_default = Heading;
 
 // src/IconButton/IconButton.tsx
 var import_classnames6 = __toESM(require_classnames());
+import { forwardRef as forwardRef3 } from "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" };
@@ -591,33 +599,37 @@ 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__ */ jsx9(
-    "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__ */ jsx9(Icon, { className: iconSize2[size] })
-    }
-  );
-};
+var IconButton = forwardRef3(
+  ({
+    accessibilityLabel,
+    color = "primary",
+    disabled = false,
+    icon: Icon,
+    size = "md",
+    tooltip,
+    onClick
+  }, ref) => {
+    return /* @__PURE__ */ jsx9(
+      "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__ */ jsx9(Icon, { className: iconSize2[size] })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
 var IconButton_default = IconButton;
 
 // src/Checkbox/Checkbox.tsx
@@ -804,7 +816,7 @@ var import_classnames8 = __toESM(require_classnames());
 import { useState as useState3 } from "react";
 
 // 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
 import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -879,7 +891,10 @@ var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
 var import_classnames9 = __toESM(require_classnames());
-import { useId, useState as useState4 } from "react";
+import {
+  useId,
+  useState as useState4
+} from "react";
 
 // ../syntax-design-tokens/dist/js/index.js
 var ColorBaseDestructive700 = "#d32a4b";