@cambly/syntax-core 4.8.1 → 4.9.0

package/dist/index.js

@@ -114,6 +114,7 @@ var require_classnames = __commonJS({
 var src_exports = {};
 __export(src_exports, {
   Avatar: () => Avatar_default,
+  Badge: () => Badge_default,
   Box: () => Box_default,
   Button: () => Button_default,
   ButtonGroup: () => ButtonGroup_default,
@@ -153,9 +154,74 @@ var Avatar = ({
 };
 var Avatar_default = Avatar;
 
-// src/Box/Box.tsx
+// src/Typography/Typography.tsx
 var import_classnames2 = __toESM(require_classnames());
 
+// css-module:./Typography.module.css#css-module
+var Typography_module_default = { "typography": "_typography_1hx29_1", "size100": "_size100_1hx29_8", "size200": "_size200_1hx29_12", "size300": "_size300_1hx29_16", "size500": "_size500_1hx29_20", "size600": "_size600_1hx29_24", "size700": "_size700_1hx29_28", "size800": "_size800_1hx29_32", "center": "_center_1hx29_37", "forceLeft": "_forceLeft_1hx29_41", "forceRight": "_forceRight_1hx29_45", "start": "_start_1hx29_49", "end": "_end_1hx29_53", "bold": "_bold_1hx29_58", "regular": "_regular_1hx29_62", "semiBold": "_semiBold_1hx29_66", "heavy": "_heavy_1hx29_70", "underline": "_underline_1hx29_74", "inline": "_inline_1hx29_78", "uppercase": "_uppercase_1hx29_82", "lineClamp": "_lineClamp_1hx29_86" };
+
+// css-module:../colors/colors.module.css#css-module
+var colors_module_default = { "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" };
+
+// src/Typography/Typography.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function textColor(color) {
+  switch (color) {
+    case "gray700":
+      return colors_module_default.gray700Color;
+    case "white":
+      return colors_module_default.whiteColor;
+    case "inherit":
+      return colors_module_default.inheritColor;
+    case "primary":
+      return colors_module_default.primary700Color;
+    case "destructive-primary":
+      return colors_module_default.destructive700Color;
+    default:
+      return colors_module_default.gray900Color;
+  }
+}
+var Typography = ({
+  align = "start",
+  as = "div",
+  children,
+  color = "gray900",
+  inline = false,
+  lineClamp = void 0,
+  size = 200,
+  tooltip,
+  transform = "none",
+  underline = false,
+  weight = "regular"
+}) => {
+  const Tag = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Tag,
+    {
+      className: (0, import_classnames2.default)(
+        Typography_module_default.typography,
+        Typography_module_default[align],
+        Typography_module_default[weight],
+        textColor(color),
+        inline && Typography_module_default.inline,
+        Typography_module_default[`size${size}`],
+        transform === "uppercase" && Typography_module_default.uppercase,
+        underline && Typography_module_default.underline,
+        lineClamp != null && Typography_module_default.lineClamp
+      ),
+      style: {
+        WebkitLineClamp: lineClamp
+      },
+      title: tooltip,
+      children
+    }
+  );
+};
+var Typography_default = Typography;
+
+// src/Box/Box.tsx
+var import_classnames3 = __toESM(require_classnames());
+
 // css-module:./Box.module.css#css-module
 var Box_module_default = { "box": "_box_7x1a7_1", "flexWrap": "_flexWrap_7x1a7_5", "alignItemscenter": "_alignItemscenter_7x1a7_10", "alignItemsstart": "_alignItemsstart_7x1a7_14", "alignItemsend": "_alignItemsend_7x1a7_18", "alignItemsstretch": "_alignItemsstretch_7x1a7_22", "alignItemsbaseline": "_alignItemsbaseline_7x1a7_26", "alignItemscenterSmall": "_alignItemscenterSmall_7x1a7_32", "alignItemsstartSmall": "_alignItemsstartSmall_7x1a7_36", "alignItemsendSmall": "_alignItemsendSmall_7x1a7_40", "alignItemsstretchSmall": "_alignItemsstretchSmall_7x1a7_44", "alignItemsbaselineSmall": "_alignItemsbaselineSmall_7x1a7_48", "alignItemscenterLarge": "_alignItemscenterLarge_7x1a7_55", "alignItemsstartLarge": "_alignItemsstartLarge_7x1a7_59", "alignItemsendLarge": "_alignItemsendLarge_7x1a7_63", "alignItemsstretchLarge": "_alignItemsstretchLarge_7x1a7_67", "alignItemsbaselineLarge": "_alignItemsbaselineLarge_7x1a7_71", "alignSelfcenter": "_alignSelfcenter_7x1a7_77", "alignSelfstart": "_alignSelfstart_7x1a7_81", "alignSelfend": "_alignSelfend_7x1a7_85", "alignSelfstretch": "_alignSelfstretch_7x1a7_89", "alignSelfbaseline": "_alignSelfbaseline_7x1a7_93", "alignSelfauto": "_alignSelfauto_7x1a7_97", "roundingsm": "_roundingsm_7x1a7_102", "roundingmd": "_roundingmd_7x1a7_106", "roundinglg": "_roundinglg_7x1a7_110", "roundingxl": "_roundingxl_7x1a7_114", "roundingfull": "_roundingfull_7x1a7_118", "block": "_block_7x1a7_123", "flex": "_flex_7x1a7_5", "inlineBlock": "_inlineBlock_7x1a7_131", "none": "_none_7x1a7_135", "visuallyHidden": "_visuallyHidden_7x1a7_139", "blockSmall": "_blockSmall_7x1a7_153", "flexSmall": "_flexSmall_7x1a7_157", "inlineBlockSmall": "_inlineBlockSmall_7x1a7_161", "noneSmall": "_noneSmall_7x1a7_165", "visuallyHiddenSmall": "_visuallyHiddenSmall_7x1a7_169", "blockLarge": "_blockLarge_7x1a7_184", "flexLarge": "_flexLarge_7x1a7_188", "inlineBlockLarge": "_inlineBlockLarge_7x1a7_192", "noneLarge": "_noneLarge_7x1a7_196", "visuallyHiddenLarge": "_visuallyHiddenLarge_7x1a7_200", "column": "_column_7x1a7_214", "row": "_row_7x1a7_218", "columnSmall": "_columnSmall_7x1a7_224", "rowSmall": "_rowSmall_7x1a7_228", "columnLarge": "_columnLarge_7x1a7_235", "rowLarge": "_rowLarge_7x1a7_239", "gap0": "_gap0_7x1a7_245", "gap1": "_gap1_7x1a7_249", "gap2": "_gap2_7x1a7_253", "gap3": "_gap3_7x1a7_257", "gap4": "_gap4_7x1a7_261", "gap5": "_gap5_7x1a7_265", "gap6": "_gap6_7x1a7_269", "gap7": "_gap7_7x1a7_273", "gap8": "_gap8_7x1a7_277", "gap9": "_gap9_7x1a7_281", "gap10": "_gap10_7x1a7_285", "gap11": "_gap11_7x1a7_289", "gap12": "_gap12_7x1a7_293", "justifyContentcenter": "_justifyContentcenter_7x1a7_298", "justifyContentstart": "_justifyContentstart_7x1a7_302", "justifyContentend": "_justifyContentend_7x1a7_306", "justifyContentbetween": "_justifyContentbetween_7x1a7_310", "justifyContentaround": "_justifyContentaround_7x1a7_314", "justifyContentevenly": "_justifyContentevenly_7x1a7_318", "justifyContentcenterSmall": "_justifyContentcenterSmall_7x1a7_324", "justifyContentstartSmall": "_justifyContentstartSmall_7x1a7_328", "justifyContentendSmall": "_justifyContentendSmall_7x1a7_332", "justifyContentbetweenSmall": "_justifyContentbetweenSmall_7x1a7_336", "justifyContentaroundSmall": "_justifyContentaroundSmall_7x1a7_340", "justifyContentevenlySmall": "_justifyContentevenlySmall_7x1a7_344", "justifyContentcenterLarge": "_justifyContentcenterLarge_7x1a7_351", "justifyContentstartLarge": "_justifyContentstartLarge_7x1a7_355", "justifyContentendLarge": "_justifyContentendLarge_7x1a7_359", "justifyContentbetweenLarge": "_justifyContentbetweenLarge_7x1a7_363", "justifyContentaroundLarge": "_justifyContentaroundLarge_7x1a7_367", "justifyContentevenlyLarge": "_justifyContentevenlyLarge_7x1a7_371", "absolute": "_absolute_7x1a7_377", "fixed": "_fixed_7x1a7_381", "relative": "_relative_7x1a7_385", "sticky": "_sticky_7x1a7_389" };
 
@@ -165,12 +231,9 @@ var margin_module_default = { "marginBottom-12": "_marginBottom-12_1whn1_2", "ma
 // css-module:./padding.module.css#css-module
 var padding_module_default = { "paddingX0": "_paddingX0_1aqye_2", "paddingX1": "_paddingX1_1aqye_7", "paddingX2": "_paddingX2_1aqye_12", "paddingX3": "_paddingX3_1aqye_17", "paddingX4": "_paddingX4_1aqye_22", "paddingX5": "_paddingX5_1aqye_27", "paddingX6": "_paddingX6_1aqye_32", "paddingX7": "_paddingX7_1aqye_37", "paddingX8": "_paddingX8_1aqye_42", "paddingX9": "_paddingX9_1aqye_47", "paddingX10": "_paddingX10_1aqye_52", "paddingX11": "_paddingX11_1aqye_57", "paddingX12": "_paddingX12_1aqye_62", "paddingY0": "_paddingY0_1aqye_67", "paddingY1": "_paddingY1_1aqye_72", "paddingY2": "_paddingY2_1aqye_77", "paddingY3": "_paddingY3_1aqye_82", "paddingY4": "_paddingY4_1aqye_87", "paddingY5": "_paddingY5_1aqye_92", "paddingY6": "_paddingY6_1aqye_97", "paddingY7": "_paddingY7_1aqye_102", "paddingY8": "_paddingY8_1aqye_107", "paddingY9": "_paddingY9_1aqye_112", "paddingY10": "_paddingY10_1aqye_117", "paddingY11": "_paddingY11_1aqye_122", "paddingY12": "_paddingY12_1aqye_127", "paddingX0Small": "_paddingX0Small_1aqye_134", "paddingX1Small": "_paddingX1Small_1aqye_139", "paddingX2Small": "_paddingX2Small_1aqye_144", "paddingX3Small": "_paddingX3Small_1aqye_149", "paddingX4Small": "_paddingX4Small_1aqye_154", "paddingX5Small": "_paddingX5Small_1aqye_159", "paddingX6Small": "_paddingX6Small_1aqye_164", "paddingX7Small": "_paddingX7Small_1aqye_169", "paddingX8Small": "_paddingX8Small_1aqye_174", "paddingX9Small": "_paddingX9Small_1aqye_179", "paddingX10Small": "_paddingX10Small_1aqye_184", "paddingX11Small": "_paddingX11Small_1aqye_189", "paddingX12Small": "_paddingX12Small_1aqye_194", "paddingY0Small": "_paddingY0Small_1aqye_199", "paddingY1Small": "_paddingY1Small_1aqye_204", "paddingY2Small": "_paddingY2Small_1aqye_209", "paddingY3Small": "_paddingY3Small_1aqye_214", "paddingY4Small": "_paddingY4Small_1aqye_219", "paddingY5Small": "_paddingY5Small_1aqye_224", "paddingY6Small": "_paddingY6Small_1aqye_229", "paddingY7Small": "_paddingY7Small_1aqye_234", "paddingY8Small": "_paddingY8Small_1aqye_239", "paddingY9Small": "_paddingY9Small_1aqye_244", "paddingY10Small": "_paddingY10Small_1aqye_249", "paddingY11Small": "_paddingY11Small_1aqye_254", "paddingY12Small": "_paddingY12Small_1aqye_259", "paddingX0Large": "_paddingX0Large_1aqye_267", "paddingX1Large": "_paddingX1Large_1aqye_272", "paddingX2Large": "_paddingX2Large_1aqye_277", "paddingX3Large": "_paddingX3Large_1aqye_282", "paddingX4Large": "_paddingX4Large_1aqye_287", "paddingX5Large": "_paddingX5Large_1aqye_292", "paddingX6Large": "_paddingX6Large_1aqye_297", "paddingX7Large": "_paddingX7Large_1aqye_302", "paddingX8Large": "_paddingX8Large_1aqye_307", "paddingX9Large": "_paddingX9Large_1aqye_312", "paddingX10Large": "_paddingX10Large_1aqye_317", "paddingX11Large": "_paddingX11Large_1aqye_322", "paddingX12Large": "_paddingX12Large_1aqye_327", "paddingY0Large": "_paddingY0Large_1aqye_332", "paddingY1Large": "_paddingY1Large_1aqye_337", "paddingY2Large": "_paddingY2Large_1aqye_342", "paddingY3Large": "_paddingY3Large_1aqye_347", "paddingY4Large": "_paddingY4Large_1aqye_352", "paddingY5Large": "_paddingY5Large_1aqye_357", "paddingY6Large": "_paddingY6Large_1aqye_362", "paddingY7Large": "_paddingY7Large_1aqye_367", "paddingY8Large": "_paddingY8Large_1aqye_372", "paddingY9Large": "_paddingY9Large_1aqye_377", "paddingY10Large": "_paddingY10Large_1aqye_382", "paddingY11Large": "_paddingY11Large_1aqye_387", "paddingY12Large": "_paddingY12Large_1aqye_392" };
 
-// css-module:../colors/colors.module.css#css-module
-var colors_module_default = { "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" };
-
 // src/Box/Box.tsx
 var import_react = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Box_default = (0, import_react.forwardRef)(function Box(props, ref) {
   var _c;
   const _a = props, { as: BoxElement = "div", children } = _a, boxProps = __objRest(_a, ["as", "children"]);
@@ -282,7 +345,7 @@ var Box_default = (0, import_react.forwardRef)(function Box(props, ref) {
     "width"
   ]);
   const parsedProps = {
-    className: (0, import_classnames2.default)(
+    className: (0, import_classnames3.default)(
       Box_module_default.box,
       alignItems && Box_module_default[`alignItems${alignItems}`],
       smAlignItems && Box_module_default[`alignItems${smAlignItems}Small`],
@@ -355,11 +418,37 @@ var Box_default = (0, import_react.forwardRef)(function Box(props, ref) {
     }
     return acc;
   }, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BoxElement, __spreadProps(__spreadValues(__spreadValues({}, parsedProps), passthroughProps), { ref, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BoxElement, __spreadProps(__spreadValues(__spreadValues({}, parsedProps), passthroughProps), { ref, children }));
 });
 
+// src/Badge/Badge.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Badge = ({
+  text,
+  color = "primary700"
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  Box_default,
+  {
+    display: "inlineBlock",
+    paddingX: 2,
+    paddingY: 1,
+    rounding: "full",
+    backgroundColor: color,
+    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Typography_default,
+      {
+        color: color === "yellow700" ? "gray900" : "white",
+        size: 100,
+        weight: "bold",
+        children: text
+      }
+    )
+  }
+);
+var Badge_default = Badge;
+
 // src/Button/Button.tsx
-var import_classnames3 = __toESM(require_classnames());
+var import_classnames4 = __toESM(require_classnames());
 
 // 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" };
@@ -401,11 +490,14 @@ function foregroundColor(color) {
   }
 }
 
+// src/Button/Button.tsx
+var import_react2 = require("react");
+
 // css-module:./Button.module.css#css-module
 var Button_module_default = { "button": "_button_13egy_1", "buttonGap": "_buttonGap_13egy_9", "fullWidth": "_fullWidth_13egy_50", "sm": "_sm_13egy_54", "md": "_md_13egy_61", "lg": "_lg_13egy_68", "icon": "_icon_13egy_75", "smIcon": "_smIcon_13egy_79", "mdIcon": "_mdIcon_13egy_86", "lgIcon": "_lgIcon_13egy_93", "textContainer": "_textContainer_13egy_100", "secondaryBorder": "_secondaryBorder_13egy_105", "secondaryDestructiveBorder": "_secondaryDestructiveBorder_13egy_109", "loading": "_loading_13egy_123", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_13egy_1", "loadingCircle": "_loadingCircle_13egy_127", "buttonText": "_buttonText_13egy_135", "buttonTextSmall": "_buttonTextSmall_13egy_142", "buttonTextMedium": "_buttonTextMedium_13egy_146", "buttonTextLarge": "_buttonTextLarge_13egy_150" };
 
 // src/Button/Button.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var textVariant = {
   // Replace with `Typography` once it lands in `syntax-core`
   ["sm"]: Button_module_default.buttonTextSmall,
@@ -422,76 +514,80 @@ var iconSize = {
   ["md"]: Button_module_default.mdIcon,
   ["lg"]: Button_module_default.lgIcon
 };
-var Button = ({
-  text,
-  loadingText,
-  color = "primary",
-  size = "md",
-  accessibilityLabel,
-  disabled = false,
-  loading = false,
-  fullWidth = false,
-  startIcon: StartIcon,
-  endIcon: EndIcon,
-  onClick,
-  tooltip
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "button",
-    {
-      "aria-label": accessibilityLabel,
-      type: "button",
-      title: tooltip,
-      disabled: disabled || loading,
-      onClick,
-      className: (0, import_classnames3.default)(
-        Button_module_default.button,
-        foregroundColor(color),
-        backgroundColor(color),
-        Button_module_default[size],
-        {
-          [Button_module_default.fullWidth]: fullWidth,
-          [Button_module_default.buttonGap]: size === "lg" || size === "md",
-          [Button_module_default.secondaryBorder]: color === "secondary",
-          [Button_module_default.secondaryDestructiveBorder]: color === "destructive-secondary"
-        }
-      ),
-      children: [
-        !loading && StartIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StartIcon, { className: (0, import_classnames3.default)(Button_module_default.icon, iconSize[size]) }),
-        (loading && loadingText || !loading && text) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: Button_module_default.textContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames3.default)(Button_module_default.buttonText, textVariant[size]), children: loading ? loadingText : text }) }),
-        !loading && EndIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EndIcon, { className: (0, import_classnames3.default)(Button_module_default.icon, iconSize[size]) }),
-        loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "svg",
+var Button = (0, import_react2.forwardRef)(
+  ({
+    text,
+    loadingText,
+    color = "primary",
+    size = "md",
+    accessibilityLabel,
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    startIcon: StartIcon,
+    endIcon: EndIcon,
+    onClick,
+    tooltip
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        ref,
+        "aria-label": accessibilityLabel,
+        type: "button",
+        title: tooltip,
+        disabled: disabled || loading,
+        onClick,
+        className: (0, import_classnames4.default)(
+          Button_module_default.button,
+          foregroundColor(color),
+          backgroundColor(color),
+          Button_module_default[size],
           {
-            className: (0, import_classnames3.default)(Button_module_default.loading, foregroundColor(color)),
-            viewBox: "22 22 44 44",
-            width: loadingIconSize[size],
-            height: loadingIconSize[size],
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "circle",
-              {
-                className: Button_module_default.loadingCircle,
-                cx: "44",
-                cy: "44",
-                r: "20.2",
-                fill: "none",
-                strokeWidth: "3.6"
-              }
-            )
+            [Button_module_default.fullWidth]: fullWidth,
+            [Button_module_default.buttonGap]: size === "lg" || size === "md",
+            [Button_module_default.secondaryBorder]: color === "secondary",
+            [Button_module_default.secondaryDestructiveBorder]: color === "destructive-secondary"
           }
-        )
-      ]
-    }
-  );
-};
+        ),
+        children: [
+          !loading && StartIcon && /* @__PURE__ */ (0, import_jsx_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 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "svg",
+            {
+              className: (0, import_classnames4.default)(Button_module_default.loading, foregroundColor(color)),
+              viewBox: "22 22 44 44",
+              width: loadingIconSize[size],
+              height: loadingIconSize[size],
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "circle",
+                {
+                  className: Button_module_default.loadingCircle,
+                  cx: "44",
+                  cy: "44",
+                  r: "20.2",
+                  fill: "none",
+                  strokeWidth: "3.6"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 var Button_default = Button;
 
 // css-module:./ButtonGroup.module.css#css-module
 var ButtonGroup_module_default = { "buttonGroup": "_buttonGroup_1f9x9_1", "horizontal": "_horizontal_1f9x9_5", "vertical": "_vertical_1f9x9_9", "smallGap": "_smallGap_1f9x9_13", "mediumGap": "_mediumGap_1f9x9_17", "largeGap": "_largeGap_1f9x9_21" };
 
 // src/ButtonGroup/ButtonGroup.tsx
-var import_classnames4 = __toESM(require_classnames());
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_classnames5 = __toESM(require_classnames());
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var gap = {
   ["sm"]: ButtonGroup_module_default.smallGap,
   ["md"]: ButtonGroup_module_default.mediumGap,
@@ -502,95 +598,33 @@ var ButtonGroup = ({
   size = "md",
   children
 }) => {
-  const classnames2 = (0, import_classnames4.default)(ButtonGroup_module_default.buttonGroup, gap[size], {
+  const classnames2 = (0, import_classnames5.default)(ButtonGroup_module_default.buttonGroup, gap[size], {
     [ButtonGroup_module_default.horizontal]: orientation === "horizontal",
     [ButtonGroup_module_default.vertical]: orientation === "vertical"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: classnames2, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: classnames2, children });
 };
 var ButtonGroup_default = ButtonGroup;
 
 // src/Card/Card.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Card = ({
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box_default, { rounding: "xl", padding: 7, smPadding: 9, backgroundColor: "white", children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box_default, { rounding: "xl", padding: 7, smPadding: 9, backgroundColor: "white", children });
 var Card_default = Card;
 
 // css-module:./Divider.module.css#css-module
 var Divider_module_default = { "divider": "_divider_1ddgq_1" };
 
 // src/Divider/Divider.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Divider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("hr", { className: Divider_module_default.divider });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: Divider_module_default.divider });
 }
 Divider.displayName = "Divider";
 
-// src/Typography/Typography.tsx
-var import_classnames5 = __toESM(require_classnames());
-
-// css-module:./Typography.module.css#css-module
-var Typography_module_default = { "typography": "_typography_1hx29_1", "size100": "_size100_1hx29_8", "size200": "_size200_1hx29_12", "size300": "_size300_1hx29_16", "size500": "_size500_1hx29_20", "size600": "_size600_1hx29_24", "size700": "_size700_1hx29_28", "size800": "_size800_1hx29_32", "center": "_center_1hx29_37", "forceLeft": "_forceLeft_1hx29_41", "forceRight": "_forceRight_1hx29_45", "start": "_start_1hx29_49", "end": "_end_1hx29_53", "bold": "_bold_1hx29_58", "regular": "_regular_1hx29_62", "semiBold": "_semiBold_1hx29_66", "heavy": "_heavy_1hx29_70", "underline": "_underline_1hx29_74", "inline": "_inline_1hx29_78", "uppercase": "_uppercase_1hx29_82", "lineClamp": "_lineClamp_1hx29_86" };
-
-// src/Typography/Typography.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function textColor(color) {
-  switch (color) {
-    case "gray700":
-      return colors_module_default.gray700Color;
-    case "white":
-      return colors_module_default.whiteColor;
-    case "inherit":
-      return colors_module_default.inheritColor;
-    case "primary":
-      return colors_module_default.primary700Color;
-    case "destructive-primary":
-      return colors_module_default.destructive700Color;
-    default:
-      return colors_module_default.gray900Color;
-  }
-}
-var Typography = ({
-  align = "start",
-  as = "div",
-  children,
-  color = "gray900",
-  inline = false,
-  lineClamp = void 0,
-  size = 200,
-  tooltip,
-  transform = "none",
-  underline = false,
-  weight = "regular"
-}) => {
-  const Tag = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    Tag,
-    {
-      className: (0, import_classnames5.default)(
-        Typography_module_default.typography,
-        Typography_module_default[align],
-        Typography_module_default[weight],
-        textColor(color),
-        inline && Typography_module_default.inline,
-        Typography_module_default[`size${size}`],
-        transform === "uppercase" && Typography_module_default.uppercase,
-        underline && Typography_module_default.underline,
-        lineClamp != null && Typography_module_default.lineClamp
-      ),
-      style: {
-        WebkitLineClamp: lineClamp
-      },
-      title: tooltip,
-      children
-    }
-  );
-};
-var Typography_default = Typography;
-
 // src/Heading/Heading.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Heading = ({
   align = "start",
   as = "h1",
@@ -599,58 +633,63 @@ var Heading = ({
   size = 500
 }) => {
   const weight = [700, 800].includes(size) ? "heavy" : "bold";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Typography_default, { align, as, color, size, weight, children });
+  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_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" };
 
 // src/IconButton/IconButton.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+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 = ({
-  accessibilityLabel,
-  color = "primary",
-  disabled = false,
-  icon: Icon,
-  size = "md",
-  tooltip,
-  onClick
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "button",
-    {
-      "aria-label": accessibilityLabel,
-      type: "button",
-      title: tooltip,
-      disabled,
-      onClick,
-      className: (0, import_classnames6.default)(
-        IconButton_module_default.iconButton,
-        foregroundColor(color),
-        backgroundColor(color),
-        IconButton_module_default[size]
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: iconSize2[size] })
-    }
-  );
-};
+var IconButton = (0, import_react3.forwardRef)(
+  ({
+    accessibilityLabel,
+    color = "primary",
+    disabled = false,
+    icon: Icon,
+    size = "md",
+    tooltip,
+    onClick
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        "aria-label": accessibilityLabel,
+        type: "button",
+        title: tooltip,
+        disabled,
+        onClick,
+        className: (0, import_classnames6.default)(
+          IconButton_module_default.iconButton,
+          foregroundColor(color),
+          backgroundColor(color),
+          IconButton_module_default[size]
+        ),
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { className: iconSize2[size] })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
 var IconButton_default = IconButton;
 
 // src/Checkbox/Checkbox.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 var import_classnames7 = __toESM(require_classnames());
 
 // src/useFocusVisible.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 var hasSetupGlobalListeners = false;
 var currentModality = null;
 var changeHandlers = /* @__PURE__ */ new Set();
@@ -726,8 +765,8 @@ function setupGlobalFocusEvents() {
 }
 function useFocusVisible() {
   setupGlobalFocusEvents();
-  const [isFocusVisibleState, setFocusVisible] = (0, import_react2.useState)(isFocusVisible());
-  (0, import_react2.useEffect)(() => {
+  const [isFocusVisibleState, setFocusVisible] = (0, import_react4.useState)(isFocusVisible());
+  (0, import_react4.useEffect)(() => {
     const handler = () => {
       setFocusVisible(isFocusVisible());
     };
@@ -746,7 +785,7 @@ var Checkbox_module_default = { "mainContainer": "_mainContainer_1jq7b_1", "chec
 var Focus_module_default = { "accessibilityOutlineFocus": "_accessibilityOutlineFocus_1h8bq_1" };
 
 // src/Checkbox/Checkbox.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var typographySize = {
   sm: 100,
   md: 200
@@ -763,7 +802,7 @@ var Checkbox = ({
   error = false,
   onChange
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const checkboxStyling = (0, import_classnames7.default)(Checkbox_module_default.checkbox, Checkbox_module_default[size]);
   const uncheckedStyling = (0, import_classnames7.default)(checkboxStyling, Checkbox_module_default.uncheckedBox, {
@@ -776,9 +815,9 @@ var Checkbox = ({
     [Checkbox_module_default.checkedError]: error,
     [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: (0, import_classnames7.default)(Checkbox_module_default.mainContainer), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: Checkbox_module_default.checkboxContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: (0, import_classnames7.default)(Checkbox_module_default.mainContainer), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: Checkbox_module_default.checkboxContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "input",
         {
           type: "checkbox",
@@ -794,7 +833,7 @@ var Checkbox = ({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: checked ? checkedStyling : uncheckedStyling, children: checked && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__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)(
         "path",
         {
           fill: "#fff",
@@ -802,7 +841,7 @@ var Checkbox = ({
         }
       ) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Typography_default,
       {
         size: typographySize[size],
@@ -818,21 +857,21 @@ var Checkbox_default = Checkbox;
 var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
 
 // src/MiniActionCard/MiniActionCard.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var MiniActionCard = ({
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: MiniActionCard_module_default.miniActionCard, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: MiniActionCard_module_default.miniActionCard, children });
 var MiniActionCard_default = MiniActionCard;
 
 // src/RadioButton/RadioButton.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 var import_classnames8 = __toESM(require_classnames());
 
 // css-module:./RadioButton.module.css#css-module
-var RadioButton_module_default = { "radioBaseContainer": "_radioBaseContainer_144ms_1", "smBase": "_smBase_144ms_8", "mdBase": "_mdBase_144ms_13", "radioStyleOverride": "_radioStyleOverride_144ms_18", "smOverride": "_smOverride_144ms_23", "mdOverride": "_mdOverride_144ms_28", "background": "_background_144ms_33", "sm": "_sm_144ms_8", "md": "_md_144ms_13", "neutralBorder": "_neutralBorder_144ms_50", "smCheckedBorder": "_smCheckedBorder_144ms_54", "mdCheckedBorder": "_mdCheckedBorder_144ms_58", "errorBorderColor": "_errorBorderColor_144ms_62", "borderColor": "_borderColor_144ms_66" };
+var RadioButton_module_default = { "radioBaseContainer": "_radioBaseContainer_ne98c_1", "smBase": "_smBase_ne98c_9", "mdBase": "_mdBase_ne98c_14", "radioStyleOverride": "_radioStyleOverride_ne98c_19", "smOverride": "_smOverride_ne98c_24", "mdOverride": "_mdOverride_ne98c_29", "background": "_background_ne98c_34", "sm": "_sm_ne98c_9", "md": "_md_ne98c_14", "neutralBorder": "_neutralBorder_ne98c_51", "smCheckedBorder": "_smCheckedBorder_ne98c_55", "mdCheckedBorder": "_mdCheckedBorder_ne98c_59", "errorBorderColor": "_errorBorderColor_ne98c_63", "borderColor": "_borderColor_ne98c_67" };
 
 // src/RadioButton/RadioButton.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var RadioButton = ({
   checked = false,
   disabled = false,
@@ -843,14 +882,14 @@ var RadioButton = ({
   size = "md",
   value
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const sharedStyles = (0, import_classnames8.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
     [RadioButton_module_default.borderColor]: !error,
     [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "label",
     {
       className: (0, import_classnames8.default)(RadioButton_module_default.radioBaseContainer, {
@@ -858,7 +897,7 @@ var RadioButton = ({
         [RadioButton_module_default.mdBase]: size === "md"
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "input",
           {
             type: "radio",
@@ -879,7 +918,7 @@ var RadioButton = ({
             }
           }
         ),
-        checked ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        checked ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "div",
           {
             className: (0, import_classnames8.default)(sharedStyles, {
@@ -887,8 +926,8 @@ var RadioButton = ({
               [RadioButton_module_default.smCheckedBorder]: size === "sm"
             })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames8.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames8.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Typography_default,
           {
             size: size === "md" ? 200 : 100,
@@ -903,7 +942,7 @@ var RadioButton = ({
 var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_classnames9 = __toESM(require_classnames());
 
 // ../syntax-design-tokens/dist/js/index.js
@@ -914,12 +953,12 @@ var ColorBaseGray800 = "#353535";
 var SelectList_module_default = { "selectContainer": "_selectContainer_1e7f9_1", "opacityOverlay": "_opacityOverlay_1e7f9_7", "outerTextContainer": "_outerTextContainer_1e7f9_11", "selectWrapper": "_selectWrapper_1e7f9_16", "selectBox": "_selectBox_1e7f9_21", "seletBoxMouseFocusStyling": "_seletBoxMouseFocusStyling_1e7f9_35", "unselected": "_unselected_1e7f9_40", "selected": "_selected_1e7f9_44", "arrowIcon": "_arrowIcon_1e7f9_48", "sm": "_sm_1e7f9_62", "md": "_md_1e7f9_67", "lg": "_lg_1e7f9_72", "selectError": "_selectError_1e7f9_77" };
 
 // src/SelectList/SelectOption.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var SelectOption = ({
   value,
   label,
   disabled = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "option",
   {
     "data-testid": `syntax-select-${value}`,
@@ -931,7 +970,7 @@ var SelectOption = ({
 var SelectOption_default = SelectOption;
 
 // src/SelectList/SelectList.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var iconSize3 = {
   sm: 20,
   md: 24,
@@ -948,19 +987,19 @@ var SelectList = ({
   selectedValue = "",
   size = "md"
 }) => {
-  const id = (0, import_react5.useId)();
+  const id = (0, import_react7.useId)();
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
-  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: (0, import_classnames9.default)(SelectList_module_default.selectContainer, {
         [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: SelectList_module_default.selectWrapper, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: SelectList_module_default.selectWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "select",
             {
               id,
@@ -980,19 +1019,19 @@ var SelectList = ({
               onFocus: () => setIsFocused(true),
               onBlur: () => setIsFocused(false),
               children: [
-                placeholderText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { disabled: true, value: placeholderText, children: placeholderText }),
+                placeholderText && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { disabled: true, value: placeholderText, children: placeholderText }),
                 children
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "svg",
             {
               focusable: "false",
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
               width: iconSize3[size],
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "path",
                 {
                   fill: errorText ? ColorBaseDestructive700 : ColorBaseGray800,
@@ -1002,7 +1041,7 @@ var SelectList = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           Typography_default,
           {
             size: 100,
@@ -1019,6 +1058,7 @@ SelectList.Option = SelectOption_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
+  Badge,
   Box,
   Button,
   ButtonGroup,