@cambly/syntax-core 6.3.0 → 6.5.0

package/dist/index.mjs

@@ -60,7 +60,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];
@@ -71,7 +71,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);
               }
@@ -91,14 +91,14 @@ var require_classnames = __commonJS({
         return classes.join(" ");
       }
       if (typeof module !== "undefined" && module.exports) {
-        classNames10.default = classNames10;
-        module.exports = classNames10;
+        classNames11.default = classNames11;
+        module.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;
       }
     })();
   }
@@ -398,6 +398,15 @@ var Box_default = Box;
 
 // src/Badge/Badge.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
+var textColorForBackgroundColor = (color) => {
+  switch (color) {
+    case "gray200":
+    case "yellow700":
+      return "gray900";
+    default:
+      return "white";
+  }
+};
 var Badge = ({
   text,
   color = "primary700"
@@ -412,7 +421,7 @@ var Badge = ({
     children: /* @__PURE__ */ jsx4(
       Typography_default,
       {
-        color: color === "yellow700" ? "gray900" : "white",
+        color: textColorForBackgroundColor(color),
         size: 100,
         weight: "bold",
         children: text
@@ -424,6 +433,7 @@ var Badge_default = Badge;
 
 // src/Button/Button.tsx
 var import_classnames4 = __toESM(require_classnames());
+import { forwardRef as forwardRef2 } from "react";
 
 // css-module:./colors.module.css#css-module
 var colors_module_default2 = { "inheritColor": "_inheritColor_11wj3_2", "destructive700Color": "_destructive700Color_11wj3_6", "gray700Color": "_gray700Color_11wj3_10", "gray900Color": "_gray900Color_11wj3_14", "primary700Color": "_primary700Color_11wj3_18", "whiteColor": "_whiteColor_11wj3_22", "blackBackgroundColor": "_blackBackgroundColor_11wj3_27", "destructive100BackgroundColor": "_destructive100BackgroundColor_11wj3_31", "destructive200BackgroundColor": "_destructive200BackgroundColor_11wj3_35", "destructive300BackgroundColor": "_destructive300BackgroundColor_11wj3_39", "destructive700BackgroundColor": "_destructive700BackgroundColor_11wj3_43", "destructive800BackgroundColor": "_destructive800BackgroundColor_11wj3_47", "destructive900BackgroundColor": "_destructive900BackgroundColor_11wj3_51", "gray10BackgroundColor": "_gray10BackgroundColor_11wj3_55", "gray30BackgroundColor": "_gray30BackgroundColor_11wj3_59", "gray60BackgroundColor": "_gray60BackgroundColor_11wj3_63", "gray80BackgroundColor": "_gray80BackgroundColor_11wj3_67", "gray100BackgroundColor": "_gray100BackgroundColor_11wj3_71", "gray200BackgroundColor": "_gray200BackgroundColor_11wj3_75", "gray300BackgroundColor": "_gray300BackgroundColor_11wj3_79", "gray700BackgroundColor": "_gray700BackgroundColor_11wj3_83", "gray800BackgroundColor": "_gray800BackgroundColor_11wj3_87", "gray900BackgroundColor": "_gray900BackgroundColor_11wj3_91", "orange100BackgroundColor": "_orange100BackgroundColor_11wj3_95", "orange200BackgroundColor": "_orange200BackgroundColor_11wj3_99", "orange300BackgroundColor": "_orange300BackgroundColor_11wj3_103", "orange700BackgroundColor": "_orange700BackgroundColor_11wj3_107", "orange800BackgroundColor": "_orange800BackgroundColor_11wj3_111", "orange900BackgroundColor": "_orange900BackgroundColor_11wj3_115", "primary100BackgroundColor": "_primary100BackgroundColor_11wj3_119", "primary200BackgroundColor": "_primary200BackgroundColor_11wj3_123", "primary300BackgroundColor": "_primary300BackgroundColor_11wj3_127", "primary700BackgroundColor": "_primary700BackgroundColor_11wj3_131", "primary800BackgroundColor": "_primary800BackgroundColor_11wj3_135", "primary900BackgroundColor": "_primary900BackgroundColor_11wj3_139", "success100BackgroundColor": "_success100BackgroundColor_11wj3_143", "success200BackgroundColor": "_success200BackgroundColor_11wj3_147", "success300BackgroundColor": "_success300BackgroundColor_11wj3_151", "success700BackgroundColor": "_success700BackgroundColor_11wj3_155", "success800BackgroundColor": "_success800BackgroundColor_11wj3_159", "success900BackgroundColor": "_success900BackgroundColor_11wj3_163", "purple100BackgroundColor": "_purple100BackgroundColor_11wj3_167", "purple200BackgroundColor": "_purple200BackgroundColor_11wj3_171", "purple300BackgroundColor": "_purple300BackgroundColor_11wj3_175", "purple700BackgroundColor": "_purple700BackgroundColor_11wj3_179", "purple800BackgroundColor": "_purple800BackgroundColor_11wj3_183", "purple900BackgroundColor": "_purple900BackgroundColor_11wj3_187", "whiteBackgroundColor": "_whiteBackgroundColor_11wj3_191", "yellow100BackgroundColor": "_yellow100BackgroundColor_11wj3_195", "yellow200BackgroundColor": "_yellow200BackgroundColor_11wj3_199", "yellow300BackgroundColor": "_yellow300BackgroundColor_11wj3_203", "yellow700BackgroundColor": "_yellow700BackgroundColor_11wj3_207", "yellow800BackgroundColor": "_yellow800BackgroundColor_11wj3_211", "yellow900BackgroundColor": "_yellow900BackgroundColor_11wj3_215" };
@@ -465,30 +475,54 @@ function foregroundColor(color) {
   }
 }
 
-// src/Button/Button.tsx
-import { forwardRef as forwardRef2 } from "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
-import { jsx as jsx5, jsxs } from "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
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 var Button = forwardRef2(
   ({
     "data-testid": dataTestId,
@@ -517,32 +551,39 @@ var Button = forwardRef2(
         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__ */ jsx5(StartIcon, { className: (0, import_classnames4.default)(Button_module_default.icon, iconSize[size]) }),
-          (loading && loadingText || !loading && text) && /* @__PURE__ */ jsx5("div", { className: Button_module_default.textContainer, children: /* @__PURE__ */ jsx5("div", { className: (0, import_classnames4.default)(Button_module_default.buttonText, textVariant[size]), children: loading ? loadingText : text }) }),
-          !loading && EndIcon && /* @__PURE__ */ jsx5(EndIcon, { className: (0, import_classnames4.default)(Button_module_default.icon, iconSize[size]) }),
+          !loading && StartIcon && /* @__PURE__ */ jsx5(StartIcon, { className: (0, import_classnames4.default)(Button_module_default2.icon, iconSize_default[size]) }),
+          (loading && loadingText || !loading && text) && /* @__PURE__ */ jsx5(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx5(
+            Typography_default,
+            {
+              size: textVariant_default[size],
+              color: foregroundTypographyColor(color),
+              children: /* @__PURE__ */ jsx5("span", { style: { fontWeight: 500 }, children: loading ? loadingText : text })
+            }
+          ) }),
+          !loading && EndIcon && /* @__PURE__ */ jsx5(EndIcon, { className: (0, import_classnames4.default)(Button_module_default2.icon, iconSize_default[size]) }),
           loading && /* @__PURE__ */ jsx5(
             "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__ */ jsx5(
                 "circle",
                 {
-                  className: Button_module_default.loadingCircle,
+                  className: Button_module_default2.loadingCircle,
                   cx: "44",
                   cy: "44",
                   r: "20.2",
@@ -610,81 +651,8 @@ function Card({
   );
 }
 
-// css-module:./Divider.module.css#css-module
-var Divider_module_default = { "divider": "_divider_1ddgq_1" };
-
-// src/Divider/Divider.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-function Divider() {
-  return /* @__PURE__ */ jsx8("hr", { className: Divider_module_default.divider });
-}
-Divider.displayName = "Divider";
-
-// src/Heading/Heading.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Heading = ({
-  align = "start",
-  as = "h1",
-  children,
-  color = "gray900",
-  size = 500
-}) => {
-  const weight = [700, 800].includes(size) ? "heavy" : "bold";
-  return /* @__PURE__ */ jsx9(Typography_default, { align, as, color, size, weight, children });
-};
-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_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
-import { jsx as jsx10 } from "react/jsx-runtime";
-var iconSize2 = {
-  ["sm"]: IconButton_module_default.smIcon,
-  ["md"]: IconButton_module_default.mdIcon,
-  ["lg"]: IconButton_module_default.lgIcon
-};
-var IconButton = forwardRef3(
-  ({
-    accessibilityLabel,
-    color = "primary",
-    "data-testid": dataTestId,
-    disabled = false,
-    icon: Icon,
-    size = "md",
-    tooltip,
-    onClick
-  }, ref) => {
-    return /* @__PURE__ */ jsx10(
-      "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__ */ jsx10(Icon, { className: iconSize2[size] })
-      }
-    );
-  }
-);
-IconButton.displayName = "IconButton";
-var IconButton_default = IconButton;
-
 // src/Checkbox/Checkbox.tsx
-var import_classnames7 = __toESM(require_classnames());
+var import_classnames6 = __toESM(require_classnames());
 import { useState as useState2 } from "react";
 
 // src/useFocusVisible.tsx
@@ -784,7 +752,7 @@ var Checkbox_module_default = { "mainContainer": "_mainContainer_1omm6_1", "inpu
 var Focus_module_default = { "accessibilityOutlineFocus": "_accessibilityOutlineFocus_1h8bq_1" };
 
 // src/Checkbox/Checkbox.tsx
-import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
 var typographySize = {
   sm: 100,
   md: 200
@@ -804,13 +772,13 @@ var Checkbox = ({
 }) => {
   const [isFocused, setIsFocused] = useState2(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
@@ -818,7 +786,7 @@ var Checkbox = ({
   return /* @__PURE__ */ jsxs2(
     "label",
     {
-      className: (0, import_classnames7.default)(
+      className: (0, import_classnames6.default)(
         Checkbox_module_default.mainContainer,
         Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
         {
@@ -826,19 +794,19 @@ var Checkbox = ({
         }
       ),
       children: [
-        /* @__PURE__ */ jsx11("div", { className: checked ? checkedStyling : uncheckedStyling, children: checked && /* @__PURE__ */ jsx11("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx8("div", { className: checked ? checkedStyling : uncheckedStyling, children: checked && /* @__PURE__ */ jsx8("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ jsx8(
           "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__ */ jsx11(
+        /* @__PURE__ */ jsx8(
           "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"}`]
@@ -854,7 +822,7 @@ var Checkbox = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx8(
           Typography_default,
           {
             size: typographySize[size],
@@ -868,22 +836,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
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Divider() {
+  return /* @__PURE__ */ jsx9("hr", { className: Divider_module_default.divider });
+}
+Divider.displayName = "Divider";
+
+// src/Heading/Heading.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Heading = ({
+  align = "start",
+  as = "h1",
+  children,
+  color = "gray900",
+  size = 500
+}) => {
+  const weight = [700, 800].includes(size) ? "heavy" : "bold";
+  return /* @__PURE__ */ jsx10(Typography_default, { align, as, color, size, weight, children });
+};
+var Heading_default = Heading;
+
+// src/IconButton/IconButton.tsx
+var import_classnames7 = __toESM(require_classnames());
+import { forwardRef as forwardRef3 } from "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
+import { jsx as jsx11 } from "react/jsx-runtime";
+var iconSize2 = {
+  ["sm"]: IconButton_module_default.smIcon,
+  ["md"]: IconButton_module_default.mdIcon,
+  ["lg"]: IconButton_module_default.lgIcon
+};
+var IconButton = forwardRef3(
+  ({
+    accessibilityLabel,
+    color = "primary",
+    "data-testid": dataTestId,
+    disabled = false,
+    icon: Icon,
+    size = "md",
+    tooltip,
+    onClick
+  }, ref) => {
+    return /* @__PURE__ */ jsx11(
+      "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__ */ jsx11(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
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+function LinkButton({
+  text,
+  href,
+  target,
+  "data-testid": dataTestId,
+  color = "primary",
+  size = "md",
+  fullWidth = false,
+  startIcon: StartIcon,
+  endIcon: EndIcon,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "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__ */ jsx12(StartIcon, { className: (0, import_classnames8.default)(Button_module_default3.icon, iconSize_default[size]) }),
+        /* @__PURE__ */ jsx12(
+          Typography_default,
+          {
+            color: foregroundTypographyColor(color),
+            size: textVariant_default[size],
+            children: /* @__PURE__ */ jsx12("span", { style: { fontWeight: 500 }, children: text })
+          }
+        ),
+        EndIcon && /* @__PURE__ */ jsx12(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
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var MiniActionCard = ({
   children
-}) => /* @__PURE__ */ jsx12("div", { className: MiniActionCard_module_default.miniActionCard, children });
+}) => /* @__PURE__ */ jsx13("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
 import { useEffect as useEffect2, useRef } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function queryFocusableAll(el) {
   const selector = [
     "a[href]",
@@ -944,7 +1045,7 @@ function FocusTrap({
       }
     };
   }, [elRef, previouslyFocusedElRef]);
-  return /* @__PURE__ */ jsx13("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
+  return /* @__PURE__ */ jsx14("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
 }
 
 // src/Modal/StopScroll.tsx
@@ -962,13 +1063,13 @@ function StopScroll(props) {
 
 // src/Modal/Layer.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Layer({
   children,
   zIndex = 1
 }) {
   return createPortal(
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       Box_default,
       {
         "data-testid": "syntax-layer",
@@ -987,9 +1088,9 @@ function Layer({
 var Modal_module_default = { "backdrop": "_backdrop_30t3h_1", "closeButton": "_closeButton_30t3h_12", "closeButtonWithImage": "_closeButtonWithImage_30t3h_32" };
 
 // src/Modal/Modal.tsx
-import { jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 function XIcon({ color = "#000" }) {
-  return /* @__PURE__ */ jsx15("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ jsx16(
     "path",
     {
       fill: "inherit",
@@ -1012,14 +1113,14 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  return /* @__PURE__ */ jsx15(Layer, { zIndex, children: /* @__PURE__ */ jsx15(StopScroll, { children: /* @__PURE__ */ jsx15(FocusTrap, { children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(Layer, { zIndex, children: /* @__PURE__ */ jsx16(StopScroll, { children: /* @__PURE__ */ jsx16(FocusTrap, { children: /* @__PURE__ */ jsx16(
     "div",
     {
       className: Modal_module_default.backdrop,
       role: "presentation",
       onClick: (e) => e.target === e.currentTarget && onDismiss(),
       onKeyDown: (e) => e.key === "Escape" && onDismiss(),
-      children: /* @__PURE__ */ jsxs3(
+      children: /* @__PURE__ */ jsxs4(
         Box_default,
         {
           "data-testid": dataTestId,
@@ -1032,23 +1133,23 @@ function Modal({
           width: "100%",
           dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
           children: [
-            /* @__PURE__ */ jsx15(Box_default, { position: "relative", children: /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx16(Box_default, { position: "relative", children: /* @__PURE__ */ jsx16(
               "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__ */ jsx15(XIcon, { color: image ? "#fff" : "#000" })
+                children: /* @__PURE__ */ jsx16(XIcon, { color: image ? "#fff" : "#000" })
               }
             ) }),
-            image && /* @__PURE__ */ jsx15(Box_default, { maxHeight: 200, children: image }),
-            /* @__PURE__ */ jsxs3(Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
-              /* @__PURE__ */ jsx15(Heading_default, { as: "h1", size: 500, children: header }),
-              /* @__PURE__ */ jsx15(Box_default, { marginBottom: 4, children }),
-              footer && /* @__PURE__ */ jsx15(
+            image && /* @__PURE__ */ jsx16(Box_default, { maxHeight: 200, children: image }),
+            /* @__PURE__ */ jsxs4(Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
+              /* @__PURE__ */ jsx16(Heading_default, { as: "h1", size: 500, children: header }),
+              /* @__PURE__ */ jsx16(Box_default, { marginBottom: 4, children }),
+              footer && /* @__PURE__ */ jsx16(
                 Box_default,
                 {
                   display: "flex",
@@ -1071,14 +1172,14 @@ function Modal({
 Modal.displayName = "Modal";
 
 // src/RadioButton/RadioButton.tsx
-var import_classnames9 = __toESM(require_classnames());
+var import_classnames10 = __toESM(require_classnames());
 import { useState as useState3 } from "react";
 
 // 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
-import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
 var RadioButton = ({
   checked = false,
   "data-testid": dataTestId,
@@ -1093,15 +1194,15 @@ var RadioButton = ({
 }) => {
   const [isFocused, setIsFocused] = useState3(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__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "label",
     {
-      className: (0, import_classnames9.default)(
+      className: (0, import_classnames10.default)(
         RadioButton_module_default.radioBaseContainer,
         RadioButton_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
         {
@@ -1111,23 +1212,23 @@ var RadioButton = ({
         }
       ),
       children: [
-        checked ? /* @__PURE__ */ jsx16(
+        checked ? /* @__PURE__ */ jsx17(
           "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__ */ jsx16("div", { className: (0, import_classnames9.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
-        /* @__PURE__ */ jsx16(
+        ) : /* @__PURE__ */ jsx17("div", { className: (0, import_classnames10.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
+        /* @__PURE__ */ jsx17(
           "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"}`],
               {
@@ -1147,7 +1248,7 @@ var RadioButton = ({
             }
           }
         ),
-        label && /* @__PURE__ */ jsx16(
+        label && /* @__PURE__ */ jsx17(
           Typography_default,
           {
             size: size === "md" ? 200 : 100,
@@ -1162,7 +1263,7 @@ var RadioButton = ({
 var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
-var import_classnames10 = __toESM(require_classnames());
+var import_classnames11 = __toESM(require_classnames());
 import {
   useId,
   useState as useState4
@@ -1176,17 +1277,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
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var SelectOption = ({
   "data-testid": dataTestId,
   value,
   label,
   disabled = false
-}) => /* @__PURE__ */ jsx17("option", { "data-testid": dataTestId, value, disabled, children: label });
+}) => /* @__PURE__ */ jsx18("option", { "data-testid": dataTestId, value, disabled, children: label });
 var SelectOption_default = SelectOption;
 
 // src/SelectList/SelectList.tsx
-import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
 var iconSize3 = {
   sm: 20,
   md: 24,
@@ -1208,22 +1309,22 @@ function SelectList({
   const id = useId();
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const [isFocused, setIsFocused] = useState4(false);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "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__ */ jsx18("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx18(Typography_default, { size: 100, color: "gray700", children: label }) }),
-        /* @__PURE__ */ jsxs5("div", { className: SelectList_module_default.selectWrapper, children: [
-          /* @__PURE__ */ jsxs5(
+        label && /* @__PURE__ */ jsx19("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx19(Typography_default, { size: 100, color: "gray700", children: label }) }),
+        /* @__PURE__ */ jsxs6("div", { className: SelectList_module_default.selectWrapper, children: [
+          /* @__PURE__ */ jsxs6(
             "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,
@@ -1238,19 +1339,19 @@ function SelectList({
               onFocus: () => setIsFocused(true),
               onBlur: () => setIsFocused(false),
               children: [
-                placeholderText && /* @__PURE__ */ jsx18("option", { disabled: true, value: placeholderText, children: placeholderText }),
+                placeholderText && /* @__PURE__ */ jsx19("option", { disabled: true, value: placeholderText, children: placeholderText }),
                 children
               ]
             }
           ),
-          /* @__PURE__ */ jsx18("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ jsx19(
             "svg",
             {
               focusable: "false",
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
               width: iconSize3[size],
-              children: /* @__PURE__ */ jsx18(
+              children: /* @__PURE__ */ jsx19(
                 "path",
                 {
                   fill: errorText ? ColorBaseDestructive700 : ColorBaseGray800,
@@ -1260,7 +1361,7 @@ function SelectList({
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ jsx18("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx18(
+        (helperText || errorText) && /* @__PURE__ */ jsx19("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx19(
           Typography_default,
           {
             size: 100,
@@ -1275,7 +1376,7 @@ function SelectList({
 SelectList.Option = SelectOption_default;
 
 // src/TextField/TextField.tsx
-var import_classnames11 = __toESM(require_classnames());
+var import_classnames12 = __toESM(require_classnames());
 import {
   useId as useId2
 } from "react";
@@ -1284,7 +1385,7 @@ import {
 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
-import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
 function TextField({
   autoComplete,
   "data-testid": dataTestId,
@@ -1301,7 +1402,7 @@ function TextField({
 }) {
   const reactId = useId2();
   const inputId = id != null ? id : reactId;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     Box_default,
     {
       display: "flex",
@@ -1314,12 +1415,12 @@ function TextField({
         }
       },
       children: [
-        label && /* @__PURE__ */ jsx19("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx19(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx19(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
-        /* @__PURE__ */ jsx19(
+        label && /* @__PURE__ */ jsx20("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx20(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx20(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        /* @__PURE__ */ jsx20(
           "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,
@@ -1331,7 +1432,7 @@ function TextField({
             value
           }
         ),
-        (helperText || errorText) && /* @__PURE__ */ jsx19(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx19(
+        (helperText || errorText) && /* @__PURE__ */ jsx20(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx20(
           Typography_default,
           {
             size: 100,
@@ -1354,6 +1455,7 @@ export {
   Divider,
   Heading_default as Heading,
   IconButton_default as IconButton,
+  LinkButton,
   MiniActionCard_default as MiniActionCard,
   Modal,
   RadioButton_default as RadioButton,