@cambly/syntax-core 9.7.0 → 9.8.0

package/dist/__chunks/YHHO5POQ.js

@@ -0,0 +1,61 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _Z3JCDZYSjs = require('./Z3JCDZYS.js');
+
+
+var _PYNS67IVjs = require('./PYNS67IV.js');
+
+// src/AvatarGroup/AvatarGroupAvatar.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var sizeToMargin = {
+  sm: -16,
+  md: -28,
+  lg: -48,
+  xl: -96
+};
+function AvatarGroupAvatar({
+  accessibilityLabel,
+  icon,
+  orientation = "standard",
+  size = "md",
+  src,
+  zIndex
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _PYNS67IVjs.Box_default,
+    {
+      position: "relative",
+      dangerouslySetInlineStyle: {
+        __style: {
+          zIndex,
+          marginInlineEnd: orientation === "standard" ? sizeToMargin[size] : 0,
+          marginInlineStart: orientation === "reverse" ? sizeToMargin[size] : 0
+        }
+      },
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _PYNS67IVjs.Box_default,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "white",
+          rounding: "full",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _Z3JCDZYSjs.Avatar_default,
+            {
+              src,
+              accessibilityLabel,
+              size,
+              icon
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.AvatarGroupAvatar = AvatarGroupAvatar;
+//# sourceMappingURL=YHHO5POQ.js.map

package/dist/__chunks/YHHO5POQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/AvatarGroup/AvatarGroupAvatar.tsx"],"names":[],"mappings":";;;;;;;;AAsEQ;AAlER,IAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEe,SAAR,kBAAmC;AAAA,EACxC;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAiCiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP;AAAA,UACA,iBAAiB,gBAAgB,aAAa,aAAa,IAAI,IAAI;AAAA,UACnE,mBAAmB,gBAAgB,YAAY,aAAa,IAAI,IAAI;AAAA,QACtE;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,iBAAgB;AAAA,UAChB,UAAS;AAAA,UAET;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ","sourcesContent":["import { type ReactElement } from \"react\";\nimport Box from \"../Box/Box\";\nimport Avatar from \"../Avatar/Avatar\";\n\nconst sizeToMargin = {\n  sm: -16,\n  md: -28,\n  lg: -48,\n  xl: -96,\n} as const;\n\nexport default function AvatarGroupAvatar({\n  accessibilityLabel,\n  icon,\n  orientation = \"standard\",\n  size = \"md\",\n  src,\n  zIndex,\n}: {\n  /**\n   * Alt text to use for the image.\n   * This should describe the image to people using screen readers.\n   */\n  accessibilityLabel: string;\n  /**\n   * optional icon that appears on the bottom corner of the avatar\n   */\n  icon?: React.ReactElement;\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\n  /**\n   * Influences which direction we apply the negative margin between avatars\n   */\n  orientation?: \"standard\" | \"reverse\";\n  /**\n   * Position of the avatar in the stack\n   */\n  zIndex: number;\n  /**\n   * Size of the avatar.\n   *\n   * * `sm`: 24px\n   * * `md`: 40px\n   * * `lg`: 72px\n   * * `xl`: 128px\n   *\n   * @defaultValue `md`\n   */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): ReactElement {\n  return (\n    <Box\n      position=\"relative\"\n      dangerouslySetInlineStyle={{\n        __style: {\n          zIndex,\n          marginInlineEnd: orientation === \"standard\" ? sizeToMargin[size] : 0,\n          marginInlineStart: orientation === \"reverse\" ? sizeToMargin[size] : 0,\n        },\n      }}\n    >\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        backgroundColor=\"white\"\n        rounding=\"full\"\n      >\n        <Avatar\n          src={src}\n          accessibilityLabel={accessibilityLabel}\n          size={size}\n          icon={icon}\n        />\n      </Box>\n    </Box>\n  );\n}\n"]}

package/dist/__chunks/Z3JCDZYS.js

@@ -0,0 +1,58 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _PYNS67IVjs = require('./PYNS67IV.js');
+
+
+var _LULBCTQRjs = require('./LULBCTQR.js');
+
+// src/Avatar/Avatar.tsx
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+
+// css-module:./Avatar.module.css#css-module
+var Avatar_module_default = { "avatar": "_avatar_1anoj_5", "sm": "_sm_1anoj_13", "md": "_md_1anoj_18", "lg": "_lg_1anoj_23", "xl": "_xl_1anoj_28" };
+
+// src/Avatar/Avatar.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var sizeToIconStyles = {
+  sm: { bottom: 8, marginInlineEnd: 0, height: 4, width: 4 },
+  md: { bottom: 8, marginInlineEnd: 0, height: 8, width: 8 },
+  lg: { bottom: 8, marginInlineEnd: 4, height: 12, width: 12 },
+  xl: { bottom: 12, marginInlineEnd: 12, height: 16, width: 16 }
+};
+var Avatar = ({
+  accessibilityLabel,
+  icon,
+  size = "md",
+  src
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Avatar_module_default[size], children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "img",
+      {
+        alt: accessibilityLabel,
+        src,
+        className: _classnames2.default.call(void 0, Avatar_module_default.avatar, Avatar_module_default[size])
+      }
+    ),
+    icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PYNS67IVjs.Box_default, { display: "flex", position: "relative", justifyContent: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _PYNS67IVjs.Box_default,
+      {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "absolute",
+        dangerouslySetInlineStyle: {
+          __style: _LULBCTQRjs.__spreadValues.call(void 0, { border: "1px solid white" }, sizeToIconStyles[size])
+        },
+        rounding: "full",
+        children: icon
+      }
+    ) })
+  ] });
+};
+var Avatar_default = Avatar;
+
+
+
+exports.Avatar_default = Avatar_default;
+//# sourceMappingURL=Z3JCDZYS.js.map

package/dist/__chunks/Z3JCDZYS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"names":[],"mappings":";;;;;;;;AAAA,OAAO,gBAAgB;;;ACAqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;AD8ClN,SACE,KADF;AA1CJ,IAAM,mBAAmB;AAAA,EACvB,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,IAAI,iBAAiB,IAAI,QAAQ,IAAI,OAAO,GAAG;AAC/D;AAKA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAyBmB;AACjB,SACE,qBAAC,SAAI,WAAW,sBAAO,IAAI,GACzB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC;AAAA;AAAA,IACnD;AAAA,IACC,QACC,oBAAC,eAAI,SAAQ,QAAO,UAAS,YAAW,gBAAe,OACrD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS,iBAAE,QAAQ,qBAAsB,iBAAiB,IAAI;AAAA,QAChE;AAAA,QACA,UAAS;AAAA,QAER;AAAA;AAAA,IACH,GACF;AAAA,KAEJ;AAEJ;AAEA,IAAO,iBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\nimport Box from \"../Box/Box\";\n\nconst sizeToIconStyles = {\n  sm: { bottom: 8, marginInlineEnd: 0, height: 4, width: 4 },\n  md: { bottom: 8, marginInlineEnd: 0, height: 8, width: 8 },\n  lg: { bottom: 8, marginInlineEnd: 4, height: 12, width: 12 },\n  xl: { bottom: 12, marginInlineEnd: 12, height: 16, width: 16 },\n} as const;\n\n/**\n * [Avatar](https://cambly-syntax.vercel.app/?path=/docs/components-avatar--docs) is a circular image that represents a user.\n */\nconst Avatar = ({\n  accessibilityLabel,\n  icon,\n  size = \"md\",\n  src,\n}: {\n  /**\n   * Alt text to use for the image.\n   * This should describe the image to people using screen readers.\n   */\n  accessibilityLabel: string;\n  /**\n   * optional icon that appears on the bottom corner of the avatar\n   */\n  icon?: React.ReactElement;\n  /**\n   * Size of the avatar.\n   *\n   * * `sm`: 24px\n   * * `md`: 40px\n   * * `lg`: 72px\n   * * `xl`: 128px\n   *\n   * @defaultValue `md`\n   */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\n}): JSX.Element => {\n  return (\n    <div className={styles[size]}>\n      <img\n        alt={accessibilityLabel}\n        src={src}\n        className={classNames(styles.avatar, styles[size])}\n      />\n      {icon && (\n        <Box display=\"flex\" position=\"relative\" justifyContent=\"end\">\n          <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            position=\"absolute\"\n            dangerouslySetInlineStyle={{\n              __style: { border: \"1px solid white\", ...sizeToIconStyles[size] },\n            }}\n            rounding=\"full\"\n          >\n            {icon}\n          </Box>\n        </Box>\n      )}\n    </div>\n  );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_1anoj_5\",\"sm\":\"_sm_1anoj_13\",\"md\":\"_md_1anoj_18\",\"lg\":\"_lg_1anoj_23\",\"xl\":\"_xl_1anoj_28\"}"]}

package/dist/index.css

@@ -26,254 +26,6 @@
   height: calc(128px - var(--syntax-avatar-border-width) * 2);
 }
 
-/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css/#css-module-data */
-._typography_1vnry_1 {
-  font-family:
-    -apple-system,
-    system-ui,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Helvetica,
-    Arial,
-    sans-serif;
-  margin: 0;
-}
-._size100_1vnry_8 {
-  font-size: 12px;
-}
-._size200_1vnry_12 {
-  font-size: 14px;
-}
-._size300_1vnry_16 {
-  font-size: 16px;
-}
-._size500_1vnry_20 {
-  font-size: 20px;
-}
-._size600_1vnry_24 {
-  font-size: 28px;
-}
-._size700_1vnry_28 {
-  font-size: 40px;
-}
-._size800_1vnry_32 {
-  font-size: 64px;
-}
-._center_1vnry_37 {
-  text-align: center;
-}
-._forceLeft_1vnry_41 {
-  text-align: left;
-}
-._forceRight_1vnry_45 {
-  text-align: right;
-}
-._start_1vnry_49 {
-  text-align: start;
-}
-._end_1vnry_53 {
-  text-align: end;
-}
-._bold_1vnry_58 {
-  font-weight: 700;
-}
-._regular_1vnry_62 {
-  font-weight: 400;
-}
-._interactive_1vnry_66 {
-  font-weight: 500;
-}
-._semiBold_1vnry_70 {
-  font-weight: 600;
-}
-._heavy_1vnry_74 {
-  font-weight: 860;
-}
-._underline_1vnry_78 {
-  text-decoration: underline;
-}
-._inline_1vnry_82 {
-  display: inline;
-}
-._uppercase_1vnry_86 {
-  text-transform: uppercase;
-}
-._lineClamp_1vnry_90 {
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-  max-width: 100%;
-  overflow: hidden;
-  word-break: break-word;
-}
-
-/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css/#css-module-data */
-._inheritColor_11l4y_2 {
-  color: inherit;
-}
-._destructive700Color_11l4y_6 {
-  color: var(--color-base-destructive-700);
-}
-._gray700Color_11l4y_10 {
-  color: var(--color-base-gray-700);
-}
-._gray900Color_11l4y_14 {
-  color: var(--color-base-gray-900);
-}
-._primary700Color_11l4y_18 {
-  color: var(--color-base-primary-700);
-}
-._success700Color_11l4y_22 {
-  color: var(--color-base-success-700);
-}
-._whiteColor_11l4y_26 {
-  color: var(--color-base-white);
-}
-._blackBackgroundColor_11l4y_31 {
-  background-color: var(--color-base-black);
-}
-._destructive100BackgroundColor_11l4y_35 {
-  background-color: var(--color-base-destructive-100);
-}
-._destructive200BackgroundColor_11l4y_39 {
-  background-color: var(--color-base-destructive-200);
-}
-._destructive300BackgroundColor_11l4y_43 {
-  background-color: var(--color-base-destructive-300);
-}
-._destructive700BackgroundColor_11l4y_47 {
-  background-color: var(--color-base-destructive-700);
-}
-._destructive800BackgroundColor_11l4y_51 {
-  background-color: var(--color-base-destructive-800);
-}
-._destructive900BackgroundColor_11l4y_55 {
-  background-color: var(--color-base-destructive-900);
-}
-._gray10BackgroundColor_11l4y_59 {
-  background-color: var(--color-base-gray-10);
-}
-._gray30BackgroundColor_11l4y_63 {
-  background-color: var(--color-base-gray-30);
-}
-._gray60BackgroundColor_11l4y_67 {
-  background-color: var(--color-base-gray-60);
-}
-._gray80BackgroundColor_11l4y_71 {
-  background-color: var(--color-base-gray-80);
-}
-._gray100BackgroundColor_11l4y_75 {
-  background-color: var(--color-base-gray-100);
-}
-._gray200BackgroundColor_11l4y_79 {
-  background-color: var(--color-base-gray-200);
-}
-._gray300BackgroundColor_11l4y_83 {
-  background-color: var(--color-base-gray-300);
-}
-._gray700BackgroundColor_11l4y_87 {
-  background-color: var(--color-base-gray-700);
-}
-._gray800BackgroundColor_11l4y_91 {
-  background-color: var(--color-base-gray-800);
-}
-._gray900BackgroundColor_11l4y_95 {
-  background-color: var(--color-base-gray-900);
-}
-._orange100BackgroundColor_11l4y_99 {
-  background-color: var(--color-base-orange-100);
-}
-._orange200BackgroundColor_11l4y_103 {
-  background-color: var(--color-base-orange-200);
-}
-._orange300BackgroundColor_11l4y_107 {
-  background-color: var(--color-base-orange-300);
-}
-._orange700BackgroundColor_11l4y_111 {
-  background-color: var(--color-base-orange-700);
-}
-._orange800BackgroundColor_11l4y_115 {
-  background-color: var(--color-base-orange-800);
-}
-._orange900BackgroundColor_11l4y_119 {
-  background-color: var(--color-base-orange-900);
-}
-._primary100BackgroundColor_11l4y_123 {
-  background-color: var(--color-base-primary-100);
-}
-._primary200BackgroundColor_11l4y_127 {
-  background-color: var(--color-base-primary-200);
-}
-._primary300BackgroundColor_11l4y_131 {
-  background-color: var(--color-base-primary-300);
-}
-._primary700BackgroundColor_11l4y_135 {
-  background-color: var(--color-base-primary-700);
-}
-._primary800BackgroundColor_11l4y_139 {
-  background-color: var(--color-base-primary-800);
-}
-._primary900BackgroundColor_11l4y_143 {
-  background-color: var(--color-base-primary-900);
-}
-._success100BackgroundColor_11l4y_147 {
-  background-color: var(--color-base-success-100);
-}
-._success200BackgroundColor_11l4y_151 {
-  background-color: var(--color-base-success-200);
-}
-._success300BackgroundColor_11l4y_155 {
-  background-color: var(--color-base-success-300);
-}
-._success700BackgroundColor_11l4y_159 {
-  background-color: var(--color-base-success-700);
-}
-._success800BackgroundColor_11l4y_163 {
-  background-color: var(--color-base-success-800);
-}
-._success900BackgroundColor_11l4y_167 {
-  background-color: var(--color-base-success-900);
-}
-._purple100BackgroundColor_11l4y_171 {
-  background-color: var(--color-base-purple-100);
-}
-._purple200BackgroundColor_11l4y_175 {
-  background-color: var(--color-base-purple-200);
-}
-._purple300BackgroundColor_11l4y_179 {
-  background-color: var(--color-base-purple-300);
-}
-._purple700BackgroundColor_11l4y_183 {
-  background-color: var(--color-base-purple-700);
-}
-._purple800BackgroundColor_11l4y_187 {
-  background-color: var(--color-base-purple-800);
-}
-._purple900BackgroundColor_11l4y_191 {
-  background-color: var(--color-base-purple-900);
-}
-._whiteBackgroundColor_11l4y_195 {
-  background-color: var(--color-base-white);
-}
-._yellow100BackgroundColor_11l4y_199 {
-  background-color: var(--color-base-yellow-100);
-}
-._yellow200BackgroundColor_11l4y_203 {
-  background-color: var(--color-base-yellow-200);
-}
-._yellow300BackgroundColor_11l4y_207 {
-  background-color: var(--color-base-yellow-300);
-}
-._yellow700BackgroundColor_11l4y_211 {
-  background-color: var(--color-base-yellow-700);
-}
-._yellow800BackgroundColor_11l4y_215 {
-  background-color: var(--color-base-yellow-800);
-}
-._yellow900BackgroundColor_11l4y_219 {
-  background-color: var(--color-base-yellow-900);
-}
-
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Box/Box.module.css/#css-module-data */
 ._box_bg9pe_1 {
   box-sizing: border-box;
@@ -1873,6 +1625,173 @@
   }
 }
 
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css/#css-module-data */
+._inheritColor_11l4y_2 {
+  color: inherit;
+}
+._destructive700Color_11l4y_6 {
+  color: var(--color-base-destructive-700);
+}
+._gray700Color_11l4y_10 {
+  color: var(--color-base-gray-700);
+}
+._gray900Color_11l4y_14 {
+  color: var(--color-base-gray-900);
+}
+._primary700Color_11l4y_18 {
+  color: var(--color-base-primary-700);
+}
+._success700Color_11l4y_22 {
+  color: var(--color-base-success-700);
+}
+._whiteColor_11l4y_26 {
+  color: var(--color-base-white);
+}
+._blackBackgroundColor_11l4y_31 {
+  background-color: var(--color-base-black);
+}
+._destructive100BackgroundColor_11l4y_35 {
+  background-color: var(--color-base-destructive-100);
+}
+._destructive200BackgroundColor_11l4y_39 {
+  background-color: var(--color-base-destructive-200);
+}
+._destructive300BackgroundColor_11l4y_43 {
+  background-color: var(--color-base-destructive-300);
+}
+._destructive700BackgroundColor_11l4y_47 {
+  background-color: var(--color-base-destructive-700);
+}
+._destructive800BackgroundColor_11l4y_51 {
+  background-color: var(--color-base-destructive-800);
+}
+._destructive900BackgroundColor_11l4y_55 {
+  background-color: var(--color-base-destructive-900);
+}
+._gray10BackgroundColor_11l4y_59 {
+  background-color: var(--color-base-gray-10);
+}
+._gray30BackgroundColor_11l4y_63 {
+  background-color: var(--color-base-gray-30);
+}
+._gray60BackgroundColor_11l4y_67 {
+  background-color: var(--color-base-gray-60);
+}
+._gray80BackgroundColor_11l4y_71 {
+  background-color: var(--color-base-gray-80);
+}
+._gray100BackgroundColor_11l4y_75 {
+  background-color: var(--color-base-gray-100);
+}
+._gray200BackgroundColor_11l4y_79 {
+  background-color: var(--color-base-gray-200);
+}
+._gray300BackgroundColor_11l4y_83 {
+  background-color: var(--color-base-gray-300);
+}
+._gray700BackgroundColor_11l4y_87 {
+  background-color: var(--color-base-gray-700);
+}
+._gray800BackgroundColor_11l4y_91 {
+  background-color: var(--color-base-gray-800);
+}
+._gray900BackgroundColor_11l4y_95 {
+  background-color: var(--color-base-gray-900);
+}
+._orange100BackgroundColor_11l4y_99 {
+  background-color: var(--color-base-orange-100);
+}
+._orange200BackgroundColor_11l4y_103 {
+  background-color: var(--color-base-orange-200);
+}
+._orange300BackgroundColor_11l4y_107 {
+  background-color: var(--color-base-orange-300);
+}
+._orange700BackgroundColor_11l4y_111 {
+  background-color: var(--color-base-orange-700);
+}
+._orange800BackgroundColor_11l4y_115 {
+  background-color: var(--color-base-orange-800);
+}
+._orange900BackgroundColor_11l4y_119 {
+  background-color: var(--color-base-orange-900);
+}
+._primary100BackgroundColor_11l4y_123 {
+  background-color: var(--color-base-primary-100);
+}
+._primary200BackgroundColor_11l4y_127 {
+  background-color: var(--color-base-primary-200);
+}
+._primary300BackgroundColor_11l4y_131 {
+  background-color: var(--color-base-primary-300);
+}
+._primary700BackgroundColor_11l4y_135 {
+  background-color: var(--color-base-primary-700);
+}
+._primary800BackgroundColor_11l4y_139 {
+  background-color: var(--color-base-primary-800);
+}
+._primary900BackgroundColor_11l4y_143 {
+  background-color: var(--color-base-primary-900);
+}
+._success100BackgroundColor_11l4y_147 {
+  background-color: var(--color-base-success-100);
+}
+._success200BackgroundColor_11l4y_151 {
+  background-color: var(--color-base-success-200);
+}
+._success300BackgroundColor_11l4y_155 {
+  background-color: var(--color-base-success-300);
+}
+._success700BackgroundColor_11l4y_159 {
+  background-color: var(--color-base-success-700);
+}
+._success800BackgroundColor_11l4y_163 {
+  background-color: var(--color-base-success-800);
+}
+._success900BackgroundColor_11l4y_167 {
+  background-color: var(--color-base-success-900);
+}
+._purple100BackgroundColor_11l4y_171 {
+  background-color: var(--color-base-purple-100);
+}
+._purple200BackgroundColor_11l4y_175 {
+  background-color: var(--color-base-purple-200);
+}
+._purple300BackgroundColor_11l4y_179 {
+  background-color: var(--color-base-purple-300);
+}
+._purple700BackgroundColor_11l4y_183 {
+  background-color: var(--color-base-purple-700);
+}
+._purple800BackgroundColor_11l4y_187 {
+  background-color: var(--color-base-purple-800);
+}
+._purple900BackgroundColor_11l4y_191 {
+  background-color: var(--color-base-purple-900);
+}
+._whiteBackgroundColor_11l4y_195 {
+  background-color: var(--color-base-white);
+}
+._yellow100BackgroundColor_11l4y_199 {
+  background-color: var(--color-base-yellow-100);
+}
+._yellow200BackgroundColor_11l4y_203 {
+  background-color: var(--color-base-yellow-200);
+}
+._yellow300BackgroundColor_11l4y_207 {
+  background-color: var(--color-base-yellow-300);
+}
+._yellow700BackgroundColor_11l4y_211 {
+  background-color: var(--color-base-yellow-700);
+}
+._yellow800BackgroundColor_11l4y_215 {
+  background-color: var(--color-base-yellow-800);
+}
+._yellow900BackgroundColor_11l4y_219 {
+  background-color: var(--color-base-yellow-900);
+}
+
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/rounding.module.css/#css-module-data */
 ._roundingsm_1bo6p_2 {
   border-radius: 8px;
@@ -1890,6 +1809,87 @@
   border-radius: 999px;
 }
 
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css/#css-module-data */
+._typography_1vnry_1 {
+  font-family:
+    -apple-system,
+    system-ui,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+  margin: 0;
+}
+._size100_1vnry_8 {
+  font-size: 12px;
+}
+._size200_1vnry_12 {
+  font-size: 14px;
+}
+._size300_1vnry_16 {
+  font-size: 16px;
+}
+._size500_1vnry_20 {
+  font-size: 20px;
+}
+._size600_1vnry_24 {
+  font-size: 28px;
+}
+._size700_1vnry_28 {
+  font-size: 40px;
+}
+._size800_1vnry_32 {
+  font-size: 64px;
+}
+._center_1vnry_37 {
+  text-align: center;
+}
+._forceLeft_1vnry_41 {
+  text-align: left;
+}
+._forceRight_1vnry_45 {
+  text-align: right;
+}
+._start_1vnry_49 {
+  text-align: start;
+}
+._end_1vnry_53 {
+  text-align: end;
+}
+._bold_1vnry_58 {
+  font-weight: 700;
+}
+._regular_1vnry_62 {
+  font-weight: 400;
+}
+._interactive_1vnry_66 {
+  font-weight: 500;
+}
+._semiBold_1vnry_70 {
+  font-weight: 600;
+}
+._heavy_1vnry_74 {
+  font-weight: 860;
+}
+._underline_1vnry_78 {
+  text-decoration: underline;
+}
+._inline_1vnry_82 {
+  display: inline;
+}
+._uppercase_1vnry_86 {
+  text-transform: uppercase;
+}
+._lineClamp_1vnry_90 {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  max-width: 100%;
+  overflow: hidden;
+  word-break: break-word;
+}
+
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Badge/Badge.module.css/#css-module-data */
 ._icon_1g9xb_1 {
   height: 12px !important;