@cambly/syntax-core 6.3.0 → 6.5.0

package/dist/index.js

@@ -66,7 +66,7 @@ var require_classnames = __commonJS({
       "use strict";
       var hasOwn = {}.hasOwnProperty;
       var nativeCodeString = "[native code]";
-      function classNames10() {
+      function classNames11() {
         var classes = [];
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -77,7 +77,7 @@ var require_classnames = __commonJS({
             classes.push(arg);
           } else if (Array.isArray(arg)) {
             if (arg.length) {
-              var inner = classNames10.apply(null, arg);
+              var inner = classNames11.apply(null, arg);
               if (inner) {
                 classes.push(inner);
               }
@@ -97,14 +97,14 @@ var require_classnames = __commonJS({
         return classes.join(" ");
       }
       if (typeof module2 !== "undefined" && module2.exports) {
-        classNames10.default = classNames10;
-        module2.exports = classNames10;
+        classNames11.default = classNames11;
+        module2.exports = classNames11;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames10;
+          return classNames11;
         });
       } else {
-        window.classNames = classNames10;
+        window.classNames = classNames11;
       }
     })();
   }
@@ -123,6 +123,7 @@ __export(src_exports, {
   Divider: () => Divider,
   Heading: () => Heading_default,
   IconButton: () => IconButton_default,
+  LinkButton: () => LinkButton,
   MiniActionCard: () => MiniActionCard_default,
   Modal: () => Modal,
   RadioButton: () => RadioButton_default,
@@ -426,6 +427,15 @@ var Box_default = Box;
 
 // src/Badge/Badge.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var textColorForBackgroundColor = (color) => {
+  switch (color) {
+    case "gray200":
+    case "yellow700":
+      return "gray900";
+    default:
+      return "white";
+  }
+};
 var Badge = ({
   text,
   color = "primary700"
@@ -440,7 +450,7 @@ var Badge = ({
     children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Typography_default,
       {
-        color: color === "yellow700" ? "gray900" : "white",
+        color: textColorForBackgroundColor(color),
         size: 100,
         weight: "bold",
         children: text
@@ -451,6 +461,7 @@ var Badge = ({
 var Badge_default = Badge;
 
 // src/Button/Button.tsx
+var import_react2 = require("react");
 var import_classnames4 = __toESM(require_classnames());
 
 // css-module:./colors.module.css#css-module
@@ -493,30 +504,54 @@ function foregroundColor(color) {
   }
 }
 
-// src/Button/Button.tsx
-var import_react2 = require("react");
+// src/colors/foregroundTypographyColor.ts
+function foregroundTypographyColor(color) {
+  switch (color) {
+    case "secondary":
+    case "tertiary":
+      return "primary";
+    case "destructive-secondary":
+    case "destructive-tertiary":
+      return "destructive-primary";
+    case "branded":
+      return "gray900";
+    default:
+      return "white";
+  }
+}
 
-// css-module:./Button.module.css#css-module
-var Button_module_default = { "button": "_button_1ixx9_1", "buttonGap": "_buttonGap_1ixx9_9", "fullWidth": "_fullWidth_1ixx9_50", "sm": "_sm_1ixx9_54", "md": "_md_1ixx9_61", "lg": "_lg_1ixx9_68", "icon": "_icon_1ixx9_75", "smIcon": "_smIcon_1ixx9_79", "mdIcon": "_mdIcon_1ixx9_86", "lgIcon": "_lgIcon_1ixx9_93", "textContainer": "_textContainer_1ixx9_100", "secondaryBorder": "_secondaryBorder_1ixx9_105", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_1ixx9_109", "loading": "_loading_1ixx9_123", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_1ixx9_1", "loadingCircle": "_loadingCircle_1ixx9_127", "buttonText": "_buttonText_1ixx9_135", "buttonTextSmall": "_buttonTextSmall_1ixx9_142", "buttonTextMedium": "_buttonTextMedium_1ixx9_146", "buttonTextLarge": "_buttonTextLarge_1ixx9_150" };
+// css-module:../Button.module.css#css-module
+var Button_module_default = { "button": "_button_1fo30_1", "buttonGap": "_buttonGap_1fo30_9", "fullWidth": "_fullWidth_1fo30_50", "sm": "_sm_1fo30_54", "md": "_md_1fo30_61", "lg": "_lg_1fo30_68", "icon": "_icon_1fo30_75", "smIcon": "_smIcon_1fo30_79", "mdIcon": "_mdIcon_1fo30_86", "lgIcon": "_lgIcon_1fo30_93", "secondaryBorder": "_secondaryBorder_1fo30_100", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_1fo30_104", "loading": "_loading_1fo30_118", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_1fo30_1", "loadingCircle": "_loadingCircle_1fo30_122" };
 
-// src/Button/Button.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+// src/Button/constants/iconSize.ts
+var iconSize = {
+  ["sm"]: Button_module_default.smIcon,
+  ["md"]: Button_module_default.mdIcon,
+  ["lg"]: Button_module_default.lgIcon
+};
+var iconSize_default = iconSize;
+
+// src/Button/constants/textVariant.ts
 var textVariant = {
-  // Replace with `Typography` once it lands in `syntax-core`
-  ["sm"]: Button_module_default.buttonTextSmall,
-  ["md"]: Button_module_default.buttonTextMedium,
-  ["lg"]: Button_module_default.buttonTextLarge
+  ["sm"]: 100,
+  ["md"]: 200,
+  ["lg"]: 300
 };
+var textVariant_default = textVariant;
+
+// src/Button/constants/loadingIconSize.ts
 var loadingIconSize = {
   ["sm"]: 16,
   ["md"]: 20,
   ["lg"]: 24
 };
-var iconSize = {
-  ["sm"]: Button_module_default.smIcon,
-  ["md"]: Button_module_default.mdIcon,
-  ["lg"]: Button_module_default.lgIcon
-};
+var loadingIconSize_default = loadingIconSize;
+
+// css-module:./Button.module.css#css-module
+var Button_module_default2 = { "button": "_button_1fo30_1", "buttonGap": "_buttonGap_1fo30_9", "fullWidth": "_fullWidth_1fo30_50", "sm": "_sm_1fo30_54", "md": "_md_1fo30_61", "lg": "_lg_1fo30_68", "icon": "_icon_1fo30_75", "smIcon": "_smIcon_1fo30_79", "mdIcon": "_mdIcon_1fo30_86", "lgIcon": "_lgIcon_1fo30_93", "secondaryBorder": "_secondaryBorder_1fo30_100", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_1fo30_104", "loading": "_loading_1fo30_118", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_1fo30_1", "loadingCircle": "_loadingCircle_1fo30_122" };
+
+// src/Button/Button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Button = (0, import_react2.forwardRef)(
   ({
     "data-testid": dataTestId,
@@ -545,32 +580,39 @@ var Button = (0, import_react2.forwardRef)(
         disabled: disabled || loading,
         onClick,
         className: (0, import_classnames4.default)(
-          Button_module_default.button,
+          Button_module_default2.button,
           foregroundColor(color),
           backgroundColor(color),
-          Button_module_default[size],
+          Button_module_default2[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"
+            [Button_module_default2.fullWidth]: fullWidth,
+            [Button_module_default2.buttonGap]: size === "lg" || size === "md",
+            [Button_module_default2.secondaryBorder]: color === "secondary",
+            [Button_module_default2.secondaryDestructiveBorder]: color === "destructive-secondary"
           }
         ),
         children: [
-          !loading && StartIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StartIcon, { className: (0, import_classnames4.default)(Button_module_default.icon, iconSize[size]) }),
-          (loading && loadingText || !loading && text) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: Button_module_default.textContainer, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_classnames4.default)(Button_module_default.buttonText, textVariant[size]), children: loading ? loadingText : text }) }),
-          !loading && EndIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EndIcon, { className: (0, import_classnames4.default)(Button_module_default.icon, iconSize[size]) }),
+          !loading && StartIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StartIcon, { className: (0, import_classnames4.default)(Button_module_default2.icon, iconSize_default[size]) }),
+          (loading && loadingText || !loading && text) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Typography_default,
+            {
+              size: textVariant_default[size],
+              color: foregroundTypographyColor(color),
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontWeight: 500 }, children: loading ? loadingText : text })
+            }
+          ) }),
+          !loading && EndIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EndIcon, { className: (0, import_classnames4.default)(Button_module_default2.icon, iconSize_default[size]) }),
           loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "svg",
             {
-              className: (0, import_classnames4.default)(Button_module_default.loading, foregroundColor(color)),
+              className: (0, import_classnames4.default)(Button_module_default2.loading, foregroundColor(color)),
               viewBox: "22 22 44 44",
-              width: loadingIconSize[size],
-              height: loadingIconSize[size],
+              width: loadingIconSize_default[size],
+              height: loadingIconSize_default[size],
               children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "circle",
                 {
-                  className: Button_module_default.loadingCircle,
+                  className: Button_module_default2.loadingCircle,
                   cx: "44",
                   cy: "44",
                   r: "20.2",
@@ -638,85 +680,12 @@ function Card({
   );
 }
 
-// css-module:./Divider.module.css#css-module
-var Divider_module_default = { "divider": "_divider_1ddgq_1" };
-
-// src/Divider/Divider.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function Divider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: Divider_module_default.divider });
-}
-Divider.displayName = "Divider";
-
-// src/Heading/Heading.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Heading = ({
-  align = "start",
-  as = "h1",
-  children,
-  color = "gray900",
-  size = 500
-}) => {
-  const weight = [700, 800].includes(size) ? "heavy" : "bold";
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Typography_default, { align, as, color, size, weight, children });
-};
-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_13wmh_1", "sm": "_sm_13wmh_46", "md": "_md_13wmh_51", "lg": "_lg_13wmh_56", "smIcon": "_smIcon_13wmh_61", "mdIcon": "_mdIcon_13wmh_68", "lgIcon": "_lgIcon_13wmh_75" };
-
-// src/IconButton/IconButton.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var iconSize2 = {
-  ["sm"]: IconButton_module_default.smIcon,
-  ["md"]: IconButton_module_default.mdIcon,
-  ["lg"]: IconButton_module_default.lgIcon
-};
-var IconButton = (0, import_react3.forwardRef)(
-  ({
-    accessibilityLabel,
-    color = "primary",
-    "data-testid": dataTestId,
-    disabled = false,
-    icon: Icon,
-    size = "md",
-    tooltip,
-    onClick
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      "button",
-      {
-        "aria-label": accessibilityLabel,
-        "data-testid": dataTestId,
-        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_runtime10.jsx)(Icon, { className: iconSize2[size] })
-      }
-    );
-  }
-);
-IconButton.displayName = "IconButton";
-var IconButton_default = IconButton;
-
 // src/Checkbox/Checkbox.tsx
-var import_react5 = require("react");
-var import_classnames7 = __toESM(require_classnames());
+var import_react4 = require("react");
+var import_classnames6 = __toESM(require_classnames());
 
 // src/useFocusVisible.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 var hasSetupGlobalListeners = false;
 var currentModality = null;
 var changeHandlers = /* @__PURE__ */ new Set();
@@ -792,8 +761,8 @@ function setupGlobalFocusEvents() {
 }
 function useFocusVisible() {
   setupGlobalFocusEvents();
-  const [isFocusVisibleState, setFocusVisible] = (0, import_react4.useState)(isFocusVisible());
-  (0, import_react4.useEffect)(() => {
+  const [isFocusVisibleState, setFocusVisible] = (0, import_react3.useState)(isFocusVisible());
+  (0, import_react3.useEffect)(() => {
     const handler = () => {
       setFocusVisible(isFocusVisible());
     };
@@ -812,7 +781,7 @@ var Checkbox_module_default = { "mainContainer": "_mainContainer_1omm6_1", "inpu
 var Focus_module_default = { "accessibilityOutlineFocus": "_accessibilityOutlineFocus_1h8bq_1" };
 
 // src/Checkbox/Checkbox.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var typographySize = {
   sm: 100,
   md: 200
@@ -830,23 +799,23 @@ var Checkbox = ({
   error = false,
   onChange
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react4.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, {
+  const checkboxStyling = (0, import_classnames6.default)(Checkbox_module_default.checkbox, Checkbox_module_default[size]);
+  const uncheckedStyling = (0, import_classnames6.default)(checkboxStyling, Checkbox_module_default.uncheckedBox, {
     [Checkbox_module_default.uncheckedBorder]: !error,
     [Checkbox_module_default.uncheckedErrorBorder]: error,
     [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
-  const checkedStyling = (0, import_classnames7.default)(checkboxStyling, Checkbox_module_default.checkedBox, {
+  const checkedStyling = (0, import_classnames6.default)(checkboxStyling, Checkbox_module_default.checkedBox, {
     [Checkbox_module_default.checkedNonError]: !error,
     [Checkbox_module_default.checkedError]: error,
     [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "label",
     {
-      className: (0, import_classnames7.default)(
+      className: (0, import_classnames6.default)(
         Checkbox_module_default.mainContainer,
         Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
         {
@@ -854,19 +823,19 @@ var Checkbox = ({
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: checked ? checkedStyling : uncheckedStyling, children: checked && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: checked ? checkedStyling : uncheckedStyling, children: checked && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "path",
           {
             fill: "#fff",
             d: "m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z"
           }
         ) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "input",
           {
             "data-testid": dataTestId,
             type: "checkbox",
-            className: (0, import_classnames7.default)(
+            className: (0, import_classnames6.default)(
               Checkbox_module_default.inputOverlay,
               Checkbox_module_default[size],
               Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`]
@@ -882,7 +851,7 @@ var Checkbox = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Typography_default,
           {
             size: typographySize[size],
@@ -896,22 +865,155 @@ var Checkbox = ({
 };
 var Checkbox_default = Checkbox;
 
+// css-module:./Divider.module.css#css-module
+var Divider_module_default = { "divider": "_divider_1ddgq_1" };
+
+// src/Divider/Divider.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Divider() {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("hr", { className: Divider_module_default.divider });
+}
+Divider.displayName = "Divider";
+
+// src/Heading/Heading.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Heading = ({
+  align = "start",
+  as = "h1",
+  children,
+  color = "gray900",
+  size = 500
+}) => {
+  const weight = [700, 800].includes(size) ? "heavy" : "bold";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Typography_default, { align, as, color, size, weight, children });
+};
+var Heading_default = Heading;
+
+// src/IconButton/IconButton.tsx
+var import_classnames7 = __toESM(require_classnames());
+var import_react5 = require("react");
+
+// css-module:./IconButton.module.css#css-module
+var IconButton_module_default = { "iconButton": "_iconButton_13wmh_1", "sm": "_sm_13wmh_46", "md": "_md_13wmh_51", "lg": "_lg_13wmh_56", "smIcon": "_smIcon_13wmh_61", "mdIcon": "_mdIcon_13wmh_68", "lgIcon": "_lgIcon_13wmh_75" };
+
+// src/IconButton/IconButton.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var iconSize2 = {
+  ["sm"]: IconButton_module_default.smIcon,
+  ["md"]: IconButton_module_default.mdIcon,
+  ["lg"]: IconButton_module_default.lgIcon
+};
+var IconButton = (0, import_react5.forwardRef)(
+  ({
+    accessibilityLabel,
+    color = "primary",
+    "data-testid": dataTestId,
+    disabled = false,
+    icon: Icon,
+    size = "md",
+    tooltip,
+    onClick
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "button",
+      {
+        "aria-label": accessibilityLabel,
+        "data-testid": dataTestId,
+        type: "button",
+        title: tooltip,
+        disabled,
+        onClick,
+        className: (0, import_classnames7.default)(
+          IconButton_module_default.iconButton,
+          foregroundColor(color),
+          backgroundColor(color),
+          IconButton_module_default[size]
+        ),
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: iconSize2[size] })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+var IconButton_default = IconButton;
+
+// src/LinkButton/LinkButton.tsx
+var import_classnames8 = __toESM(require_classnames());
+
+// css-module:../Button/Button.module.css#css-module
+var Button_module_default3 = { "button": "_button_1fo30_1", "buttonGap": "_buttonGap_1fo30_9", "fullWidth": "_fullWidth_1fo30_50", "sm": "_sm_1fo30_54", "md": "_md_1fo30_61", "lg": "_lg_1fo30_68", "icon": "_icon_1fo30_75", "smIcon": "_smIcon_1fo30_79", "mdIcon": "_mdIcon_1fo30_86", "lgIcon": "_lgIcon_1fo30_93", "secondaryBorder": "_secondaryBorder_1fo30_100", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_1fo30_104", "loading": "_loading_1fo30_118", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_1fo30_1", "loadingCircle": "_loadingCircle_1fo30_122" };
+
+// css-module:./LinkButton.module.css#css-module
+var LinkButton_module_default = { "linkButton": "_linkButton_1r7tz_1", "fitContent": "_fitContent_1r7tz_5" };
+
+// src/LinkButton/LinkButton.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function LinkButton({
+  text,
+  href,
+  target,
+  "data-testid": dataTestId,
+  color = "primary",
+  size = "md",
+  fullWidth = false,
+  startIcon: StartIcon,
+  endIcon: EndIcon,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "a",
+    {
+      href,
+      "data-testid": dataTestId,
+      target,
+      className: (0, import_classnames8.default)(
+        LinkButton_module_default.linkButton,
+        Button_module_default3.button,
+        foregroundColor(color),
+        backgroundColor(color),
+        Button_module_default3[size],
+        {
+          [Button_module_default3.fullWidth]: fullWidth,
+          [LinkButton_module_default.fitContent]: !fullWidth,
+          [Button_module_default3.buttonGap]: size === "lg" || size === "md",
+          [Button_module_default3.secondaryBorder]: color === "secondary",
+          [Button_module_default3.secondaryDestructiveBorder]: color === "destructive-secondary"
+        }
+      ),
+      onClick,
+      children: [
+        StartIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StartIcon, { className: (0, import_classnames8.default)(Button_module_default3.icon, iconSize_default[size]) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          Typography_default,
+          {
+            color: foregroundTypographyColor(color),
+            size: textVariant_default[size],
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontWeight: 500 }, children: text })
+          }
+        ),
+        EndIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EndIcon, { className: (0, import_classnames8.default)(Button_module_default3.icon, iconSize_default[size]) })
+      ]
+    }
+  );
+}
+
 // css-module:./MiniActionCard.module.css#css-module
 var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
 
 // src/MiniActionCard/MiniActionCard.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var MiniActionCard = ({
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: MiniActionCard_module_default.miniActionCard, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: MiniActionCard_module_default.miniActionCard, children });
 var MiniActionCard_default = MiniActionCard;
 
 // src/Modal/Modal.tsx
-var import_classnames8 = __toESM(require_classnames());
+var import_classnames9 = __toESM(require_classnames());
 
 // src/Modal/FocusTrap.tsx
 var import_react6 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function queryFocusableAll(el) {
   const selector = [
     "a[href]",
@@ -972,7 +1074,7 @@ function FocusTrap({
       }
     };
   }, [elRef, previouslyFocusedElRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
 }
 
 // src/Modal/StopScroll.tsx
@@ -990,13 +1092,13 @@ function StopScroll(props) {
 
 // src/Modal/Layer.tsx
 var import_react_dom = require("react-dom");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Layer({
   children,
   zIndex = 1
 }) {
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Box_default,
       {
         "data-testid": "syntax-layer",
@@ -1015,9 +1117,9 @@ function Layer({
 var Modal_module_default = { "backdrop": "_backdrop_30t3h_1", "closeButton": "_closeButton_30t3h_12", "closeButtonWithImage": "_closeButtonWithImage_30t3h_32" };
 
 // src/Modal/Modal.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function XIcon({ color = "#000" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "path",
     {
       fill: "inherit",
@@ -1040,14 +1142,14 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Layer, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StopScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FocusTrap, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Layer, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StopScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FocusTrap, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       className: Modal_module_default.backdrop,
       role: "presentation",
       onClick: (e) => e.target === e.currentTarget && onDismiss(),
       onKeyDown: (e) => e.key === "Escape" && onDismiss(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         Box_default,
         {
           "data-testid": dataTestId,
@@ -1060,23 +1162,23 @@ function Modal({
           width: "100%",
           dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box_default, { position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box_default, { position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "button",
               {
                 "aria-label": accessibilityCloseLabel,
                 type: "button",
-                className: (0, import_classnames8.default)(Modal_module_default.closeButton, {
+                className: (0, import_classnames9.default)(Modal_module_default.closeButton, {
                   [Modal_module_default.closeButtonWithImage]: !!image
                 }),
                 onClick: onDismiss,
-                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(XIcon, { color: image ? "#fff" : "#000" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(XIcon, { color: image ? "#fff" : "#000" })
               }
             ) }),
-            image && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box_default, { maxHeight: 200, children: image }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading_default, { as: "h1", size: 500, children: header }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box_default, { marginBottom: 4, children }),
-              footer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            image && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box_default, { maxHeight: 200, children: image }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Heading_default, { as: "h1", size: 500, children: header }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box_default, { marginBottom: 4, children }),
+              footer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 Box_default,
                 {
                   display: "flex",
@@ -1100,13 +1202,13 @@ Modal.displayName = "Modal";
 
 // src/RadioButton/RadioButton.tsx
 var import_react8 = require("react");
-var import_classnames9 = __toESM(require_classnames());
+var import_classnames10 = __toESM(require_classnames());
 
 // css-module:./RadioButton.module.css#css-module
 var RadioButton_module_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" };
 
 // src/RadioButton/RadioButton.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var RadioButton = ({
   checked = false,
   "data-testid": dataTestId,
@@ -1121,15 +1223,15 @@ var RadioButton = ({
 }) => {
   const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
-  const sharedStyles = (0, import_classnames9.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
+  const sharedStyles = (0, import_classnames10.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
     [RadioButton_module_default.borderColor]: !error,
     [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "label",
     {
-      className: (0, import_classnames9.default)(
+      className: (0, import_classnames10.default)(
         RadioButton_module_default.radioBaseContainer,
         RadioButton_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
         {
@@ -1139,23 +1241,23 @@ var RadioButton = ({
         }
       ),
       children: [
-        checked ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        checked ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           {
-            className: (0, import_classnames9.default)(sharedStyles, {
+            className: (0, import_classnames10.default)(sharedStyles, {
               [RadioButton_module_default.mdCheckedBorder]: size === "md",
               [RadioButton_module_default.smCheckedBorder]: size === "sm"
             })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames9.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_classnames10.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "input",
           {
             "data-testid": dataTestId,
             type: "radio",
             id,
             name,
-            className: (0, import_classnames9.default)(
+            className: (0, import_classnames10.default)(
               RadioButton_module_default.radioStyleOverride,
               RadioButton_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
               {
@@ -1175,7 +1277,7 @@ var RadioButton = ({
             }
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Typography_default,
           {
             size: size === "md" ? 200 : 100,
@@ -1191,7 +1293,7 @@ var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
 var import_react9 = require("react");
-var import_classnames10 = __toESM(require_classnames());
+var import_classnames11 = __toESM(require_classnames());
 
 // ../syntax-design-tokens/dist/js/index.js
 var ColorBaseDestructive700 = "#d32a4b";
@@ -1201,17 +1303,17 @@ var ColorBaseGray800 = "#353535";
 var SelectList_module_default = { "selectContainer": "_selectContainer_1cdwo_1", "opacityOverlay": "_opacityOverlay_1cdwo_7", "outerTextContainer": "_outerTextContainer_1cdwo_11", "selectWrapper": "_selectWrapper_1cdwo_16", "selectBox": "_selectBox_1cdwo_21", "selectMouseFocusStyling": "_selectMouseFocusStyling_1cdwo_37", "unselected": "_unselected_1cdwo_42", "selected": "_selected_1cdwo_46", "arrowIcon": "_arrowIcon_1cdwo_50", "sm": "_sm_1cdwo_64", "md": "_md_1cdwo_70", "lg": "_lg_1cdwo_76", "selectError": "_selectError_1cdwo_82" };
 
 // src/SelectList/SelectOption.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SelectOption = ({
   "data-testid": dataTestId,
   value,
   label,
   disabled = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { "data-testid": dataTestId, value, disabled, children: label });
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { "data-testid": dataTestId, value, disabled, children: label });
 var SelectOption_default = SelectOption;
 
 // src/SelectList/SelectList.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var iconSize3 = {
   sm: 20,
   md: 24,
@@ -1233,22 +1335,22 @@ function SelectList({
   const id = (0, import_react9.useId)();
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const [isFocused, setIsFocused] = (0, import_react9.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
-      className: (0, import_classnames10.default)(SelectList_module_default.selectContainer, {
+      className: (0, import_classnames11.default)(SelectList_module_default.selectContainer, {
         [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: SelectList_module_default.selectWrapper, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: SelectList_module_default.selectWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
             "select",
             {
               id,
               "data-testid": dataTestId,
               disabled,
-              className: (0, import_classnames10.default)(SelectList_module_default.selectBox, SelectList_module_default[size], {
+              className: (0, import_classnames11.default)(SelectList_module_default.selectBox, SelectList_module_default[size], {
                 [SelectList_module_default.unselected]: !selectedValue && !errorText,
                 [SelectList_module_default.selected]: selectedValue && !errorText,
                 [SelectList_module_default.selectError]: errorText,
@@ -1263,19 +1365,19 @@ function SelectList({
               onFocus: () => setIsFocused(true),
               onBlur: () => setIsFocused(false),
               children: [
-                placeholderText && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { disabled: true, value: placeholderText, children: placeholderText }),
+                placeholderText && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { disabled: true, value: placeholderText, children: placeholderText }),
                 children
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "svg",
             {
               focusable: "false",
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
               width: iconSize3[size],
-              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "path",
                 {
                   fill: errorText ? ColorBaseDestructive700 : ColorBaseGray800,
@@ -1285,7 +1387,7 @@ function SelectList({
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Typography_default,
           {
             size: 100,
@@ -1301,13 +1403,13 @@ SelectList.Option = SelectOption_default;
 
 // src/TextField/TextField.tsx
 var import_react10 = require("react");
-var import_classnames11 = __toESM(require_classnames());
+var import_classnames12 = __toESM(require_classnames());
 
 // css-module:./TextField.module.css#css-module
 var TextField_module_default = { "textfield": "_textfield_cltsv_1", "label": "_label_cltsv_21", "sm": "_sm_cltsv_25", "md": "_md_cltsv_30", "lg": "_lg_cltsv_35", "inputError": "_inputError_cltsv_40" };
 
 // src/TextField/TextField.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function TextField({
   autoComplete,
   "data-testid": dataTestId,
@@ -1324,7 +1426,7 @@ function TextField({
 }) {
   const reactId = (0, import_react10.useId)();
   const inputId = id != null ? id : reactId;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -1337,12 +1439,12 @@ function TextField({
         }
       },
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "input",
           {
             autoComplete,
-            className: (0, import_classnames11.default)(TextField_module_default.textfield, TextField_module_default[size], {
+            className: (0, import_classnames12.default)(TextField_module_default.textfield, TextField_module_default[size], {
               [TextField_module_default.inputError]: errorText
             }),
             "data-testid": dataTestId,
@@ -1354,7 +1456,7 @@ function TextField({
             value
           }
         ),
-        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Box_default, { paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           Typography_default,
           {
             size: 100,
@@ -1378,6 +1480,7 @@ function TextField({
   Divider,
   Heading,
   IconButton,
+  LinkButton,
   MiniActionCard,
   Modal,
   RadioButton,