@cambly/syntax-core 9.7.0 → 9.8.0-beta.2

package/dist/__chunks/R3JL4P3Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"names":[],"mappings":";;;;;AAAA,OAAO,gBAAgB;;;ACA4E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,WAAU,oBAAmB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,WAAU,qBAAoB,UAAS,oBAAmB,aAAY,uBAAsB,cAAa,wBAAuB,SAAQ,mBAAkB,OAAM,iBAAgB,QAAO,kBAAiB,WAAU,qBAAoB,eAAc,yBAAwB,YAAW,sBAAqB,SAAQ,mBAAkB,aAAY,uBAAsB,UAAS,oBAAmB,aAAY,uBAAsB,aAAY,sBAAqB;;;ADsH5wB;AAhHJ,SAAS,UAAU,OAAuC;AACxD,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB,KAAK;AACH,aAAO,sBAAY;AAAA,IACrB;AACE,aAAO,sBAAY;AAAA,EACvB;AACF;AAKA,IAAM,aAAa,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX,MA2EoB;AAClB,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,0BAAO;AAAA,QACP,0BAAO,KAAK;AAAA,QACZ,0BAAO,MAAM;AAAA,QACb,UAAU,KAAK;AAAA,QACf,UAAU,0BAAO;AAAA,QACjB,0BAAO,OAAO,MAAM;AAAA,QACpB,cAAc,eAAe,0BAAO;AAAA,QACpC,aAAa,0BAAO;AAAA,QACpB,aAAa,QAAQ,0BAAO;AAAA,MAC9B;AAAA,MACA,eAAa;AAAA,MACb,OAAO;AAAA,QACL,iBAAiB;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { type Color } from \"../constants\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nfunction textColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"gray700\":\n      return colorStyles.gray700Color;\n    case \"white\":\n      return colorStyles.whiteColor;\n    case \"inherit\":\n      return colorStyles.inheritColor;\n    case \"primary\":\n      return colorStyles.primary700Color;\n    case \"destructive-primary\":\n      return colorStyles.destructive700Color;\n    default:\n      return colorStyles.gray900Color;\n  }\n}\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = ({\n  align = \"start\",\n  as = \"div\",\n  children,\n  color = \"gray900\",\n  \"data-testid\": dataTestId,\n  inline = false,\n  lineClamp = undefined,\n  size = 200,\n  tooltip,\n  transform = \"none\",\n  underline = false,\n  weight = \"regular\",\n}: {\n  /**\n   * Aligns the text to the left, right, or center of the container.\n   * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n   * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n   *\n   * @defaultValue \"start\"\n   */\n  align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n  /**\n   * DOM element to render as.\n   *\n   * @defaultValue \"div\"\n   */\n  as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /**\n   * The text to be rendered\n   */\n  children?: ReactNode;\n  /**\n   * The color of the text.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the text\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether the text should flow inline with other elements.\n   *\n   * @defaultValue false\n   */\n  inline?: boolean;\n  /**\n   * The number of lines we should truncate the text at\n   */\n  lineClamp?: number | undefined;\n  /**\n   * Size of the text.\n   *\n   * * `100`: 12px\n   * * `200`: 14px\n   * * `300`: 16px\n   * * `500`: 20px\n   * * `600`: 28px\n   * * `700`: 40px\n   * * `800`: 64px\n   *\n   * @defaultValue 200\n   */\n  size?: 100 | 200 | 300 | 500 | 600 | 700 | 800;\n  /**\n   * The tooltip to be displayed when the user hovers the text\n   */\n  tooltip?: string;\n  /**\n   * Whether the text should be transformed to uppercase.\n   *\n   * @defaultValue \"none\"\n   */\n  transform?: \"none\" | \"uppercase\";\n  /**\n   * Whether the text has an underline.\n   *\n   * @defaultValue false\n   */\n  underline?: boolean;\n  /**\n   * Indicates the boldness of the text.\n   *\n   * @defaultValue \"regular\"\n   */\n  weight?: \"regular\" | \"interactive\" | \"semiBold\" | \"bold\" | \"heavy\";\n}): ReactElement => {\n  const Tag = as;\n\n  return (\n    <Tag\n      className={classNames(\n        styles.typography,\n        styles[align],\n        styles[weight],\n        textColor(color),\n        inline && styles.inline,\n        styles[`size${size}`],\n        transform === \"uppercase\" && styles.uppercase,\n        underline && styles.underline,\n        lineClamp != null && styles.lineClamp,\n      )}\n      data-testid={dataTestId}\n      style={{\n        WebkitLineClamp: lineClamp,\n      }}\n      title={tooltip}\n    >\n      {children}\n    </Tag>\n  );\n};\n\nexport default Typography;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_1vnry_1\",\"size100\":\"_size100_1vnry_8\",\"size200\":\"_size200_1vnry_12\",\"size300\":\"_size300_1vnry_16\",\"size500\":\"_size500_1vnry_20\",\"size600\":\"_size600_1vnry_24\",\"size700\":\"_size700_1vnry_28\",\"size800\":\"_size800_1vnry_32\",\"center\":\"_center_1vnry_37\",\"forceLeft\":\"_forceLeft_1vnry_41\",\"forceRight\":\"_forceRight_1vnry_45\",\"start\":\"_start_1vnry_49\",\"end\":\"_end_1vnry_53\",\"bold\":\"_bold_1vnry_58\",\"regular\":\"_regular_1vnry_62\",\"interactive\":\"_interactive_1vnry_66\",\"semiBold\":\"_semiBold_1vnry_70\",\"heavy\":\"_heavy_1vnry_74\",\"underline\":\"_underline_1vnry_78\",\"inline\":\"_inline_1vnry_82\",\"uppercase\":\"_uppercase_1vnry_86\",\"lineClamp\":\"_lineClamp_1vnry_90\"}"]}

package/dist/__chunks/{WCEOAOUO.mjs → RBVOI6NO.mjs}

@@ -3,10 +3,10 @@ import {
 } from "./GVNDZZAU.mjs";
 import {
   Focus_module_default
-} from "./WJDAVT5R.mjs";
+} from "./MQPPALTP.mjs";
 import {
   Typography_default
-} from "./BCWLWS7W.mjs";
+} from "./3HUELEGR.mjs";
 import {
   useIsHydrated
 } from "./XFKGXL73.mjs";
@@ -124,4 +124,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=WCEOAOUO.mjs.map
+//# sourceMappingURL=RBVOI6NO.mjs.map

package/dist/__chunks/{WCEOAOUO.mjs.map → RBVOI6NO.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SelectList/SelectList.tsx","../../../syntax-design-tokens/dist/js/index.js","css-module:./SelectList.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n  size = \"md\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLSelectElement>;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Size of the select box\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n      })}\n    >\n      {label && (\n        <label htmlFor={selectId} className={styles.outerTextContainer}>\n          <Typography size={100} color=\"gray700\">\n            {label}\n          </Typography>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(styles.selectBox, styles[size], {\n            [styles.unselected]: !selectedValue && !errorText,\n            [styles.selected]: selectedValue && !errorText,\n            [styles.selectError]: errorText,\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible, // for focus keyboard\n            [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n          })}\n          onChange={onChange}\n          onClick={onClick}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={iconSize[size]}\n          >\n            <path\n              fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n              d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <div className={styles.outerTextContainer}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </div>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","/**\n * Do not edit directly\n * Generated on Tue, 12 Dec 2023 23:54:26 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_3ifov_1\",\"opacityOverlay\":\"_opacityOverlay_3ifov_7\",\"outerTextContainer\":\"_outerTextContainer_3ifov_11\",\"selectWrapper\":\"_selectWrapper_3ifov_16\",\"selectBox\":\"_selectBox_3ifov_21\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_3ifov_37\",\"unselected\":\"_unselected_3ifov_42\",\"selected\":\"_selected_3ifov_46\",\"arrowIcon\":\"_arrowIcon_3ifov_50\",\"sm\":\"_sm_3ifov_64\",\"md\":\"_md_3ifov_70\",\"lg\":\"_lg_3ifov_76\",\"selectError\":\"_selectError_3ifov_82\"}"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACGhB,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;;;ACpBoE,IAAO,4BAAQ,EAAC,mBAAkB,4BAA2B,kBAAiB,2BAA0B,sBAAqB,gCAA+B,iBAAgB,2BAA0B,aAAY,uBAAsB,2BAA0B,qCAAoC,cAAa,wBAAuB,YAAW,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,eAAc,wBAAuB;;;AFgHvkB,cAMF,YANE;AA9FV,IAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKe,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,OAAO;AACT,GAwDiB;AACf,QAAM,UAAU,MAAM;AACtB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,WAAW,kBAAM;AACvB,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,0BAAO,iBAAiB;AAAA,QAC5C,CAAC,0BAAO,cAAc,GAAG;AAAA,MAC3B,CAAC;AAAA,MAEA;AAAA,iBACC,oBAAC,WAAM,SAAS,UAAU,WAAW,0BAAO,oBAC1C,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF;AAAA,QAEF,qBAAC,SAAI,WAAW,0BAAO,eACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa;AAAA,cACb;AAAA,cACA,WAAW,WAAW,0BAAO,WAAW,0BAAO,IAAI,GAAG;AAAA,gBACpD,CAAC,0BAAO,UAAU,GAAG,CAAC,iBAAiB,CAAC;AAAA,gBACxC,CAAC,0BAAO,QAAQ,GAAG,iBAAiB,CAAC;AAAA,gBACrC,CAAC,0BAAO,WAAW,GAAG;AAAA,gBACtB,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA;AAAA,gBACf,CAAC,0BAAO,uBAAuB,GAAG,aAAa,CAAC;AAAA;AAAA,cAClD,CAAC;AAAA,cACD;AAAA,cACA;AAAA,cACA,OACE,mBAAmB,CAAC,gBAAgB,kBAAkB;AAAA,cAExD,SAAS,MAAM,aAAa,IAAI;AAAA,cAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,cAE/B;AAAA,mCACC,oBAAC,YAAO,UAAQ,MAAC,OAAO,iBACrB,2BACH;AAAA,gBAED;AAAA;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,SAAI,WAAW,0BAAO,WACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,SAAQ;AAAA,cACR,OAAO,SAAS,IAAI;AAAA,cAEpB;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,YAAY,0BAA0B;AAAA,kBAC5C,GAAE;AAAA;AAAA,cACJ;AAAA;AAAA,UACF,GACF;AAAA,WACF;AAAA,SACE,cAAc,cACd,oBAAC,SAAI,WAAW,0BAAO,oBACrB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,sBAAY,YAAY;AAAA;AAAA,QAC3B,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,SAAS;","names":[]}
+{"version":3,"sources":["../../src/SelectList/SelectList.tsx","../../../syntax-design-tokens/dist/js/index.js","css-module:./SelectList.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n  size = \"md\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLSelectElement>;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Size of the select box\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n      })}\n    >\n      {label && (\n        <label htmlFor={selectId} className={styles.outerTextContainer}>\n          <Typography size={100} color=\"gray700\">\n            {label}\n          </Typography>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(styles.selectBox, styles[size], {\n            [styles.unselected]: !selectedValue && !errorText,\n            [styles.selected]: selectedValue && !errorText,\n            [styles.selectError]: errorText,\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible, // for focus keyboard\n            [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n          })}\n          onChange={onChange}\n          onClick={onClick}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={iconSize[size]}\n          >\n            <path\n              fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n              d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n            />\n          </svg>\n        </div>\n      </div>\n      {(helperText || errorText) && (\n        <div className={styles.outerTextContainer}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </div>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","/**\n * Do not edit directly\n * Generated on Tue, 09 Jan 2024 10:59:42 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffe14c\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_3ifov_1\",\"opacityOverlay\":\"_opacityOverlay_3ifov_7\",\"outerTextContainer\":\"_outerTextContainer_3ifov_11\",\"selectWrapper\":\"_selectWrapper_3ifov_16\",\"selectBox\":\"_selectBox_3ifov_21\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_3ifov_37\",\"unselected\":\"_unselected_3ifov_42\",\"selected\":\"_selected_3ifov_46\",\"arrowIcon\":\"_arrowIcon_3ifov_50\",\"sm\":\"_sm_3ifov_64\",\"md\":\"_md_3ifov_70\",\"lg\":\"_lg_3ifov_76\",\"selectError\":\"_selectError_3ifov_82\"}"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACGhB,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;;;ACpBmE,IAAO,4BAAQ,EAAC,mBAAkB,4BAA2B,kBAAiB,2BAA0B,sBAAqB,gCAA+B,iBAAgB,2BAA0B,aAAY,uBAAsB,2BAA0B,qCAAoC,cAAa,wBAAuB,YAAW,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,eAAc,wBAAuB;;;AFgHtkB,cAMF,YANE;AA9FV,IAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKe,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,OAAO;AACT,GAwDiB;AACf,QAAM,UAAU,MAAM;AACtB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,WAAW,kBAAM;AACvB,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,0BAAO,iBAAiB;AAAA,QAC5C,CAAC,0BAAO,cAAc,GAAG;AAAA,MAC3B,CAAC;AAAA,MAEA;AAAA,iBACC,oBAAC,WAAM,SAAS,UAAU,WAAW,0BAAO,oBAC1C,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF;AAAA,QAEF,qBAAC,SAAI,WAAW,0BAAO,eACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa;AAAA,cACb;AAAA,cACA,WAAW,WAAW,0BAAO,WAAW,0BAAO,IAAI,GAAG;AAAA,gBACpD,CAAC,0BAAO,UAAU,GAAG,CAAC,iBAAiB,CAAC;AAAA,gBACxC,CAAC,0BAAO,QAAQ,GAAG,iBAAiB,CAAC;AAAA,gBACrC,CAAC,0BAAO,WAAW,GAAG;AAAA,gBACtB,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA;AAAA,gBACf,CAAC,0BAAO,uBAAuB,GAAG,aAAa,CAAC;AAAA;AAAA,cAClD,CAAC;AAAA,cACD;AAAA,cACA;AAAA,cACA,OACE,mBAAmB,CAAC,gBAAgB,kBAAkB;AAAA,cAExD,SAAS,MAAM,aAAa,IAAI;AAAA,cAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,cAE/B;AAAA,mCACC,oBAAC,YAAO,UAAQ,MAAC,OAAO,iBACrB,2BACH;AAAA,gBAED;AAAA;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,SAAI,WAAW,0BAAO,WACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,SAAQ;AAAA,cACR,OAAO,SAAS,IAAI;AAAA,cAEpB;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,YAAY,0BAA0B;AAAA,kBAC5C,GAAE;AAAA;AAAA,cACJ;AAAA;AAAA,UACF,GACF;AAAA,WACF;AAAA,SACE,cAAc,cACd,oBAAC,SAAI,WAAW,0BAAO,oBACrB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,sBAAY,YAAY;AAAA;AAAA,QAC3B,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,SAAS;","names":[]}

package/dist/__chunks/{A7UVLRKG.mjs → RCT3DP22.mjs}

@@ -12,4 +12,4 @@ var iconSize_default = iconSize;
 export {
   iconSize_default
 };
-//# sourceMappingURL=A7UVLRKG.mjs.map
+//# sourceMappingURL=RCT3DP22.mjs.map

package/dist/__chunks/RCT3DP22.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"sourcesContent":["import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_1iunh_1\",\"buttonGap\":\"_buttonGap_1iunh_9\",\"fullWidth\":\"_fullWidth_1iunh_50\",\"sm\":\"_sm_1iunh_54\",\"md\":\"_md_1iunh_61\",\"lg\":\"_lg_1iunh_68\",\"icon\":\"_icon_1iunh_75\",\"smIcon\":\"_smIcon_1iunh_79\",\"mdIcon\":\"_mdIcon_1iunh_86\",\"lgIcon\":\"_lgIcon_1iunh_93\",\"secondaryBorder\":\"_secondaryBorder_1iunh_100\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_1iunh_104\",\"loading\":\"_loading_1iunh_118\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_1iunh_1\",\"loadingCircle\":\"_loadingCircle_1iunh_122\"}","import styles from \"../Button.module.css\";\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\nexport default iconSize;\n"],"mappings":";AAA2F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACE/mB,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AAAA,EACf,CAAC,IAAI,GAAG,sBAAO;AACjB;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/__chunks/{MZEIZAZH.mjs → S2O3PM7G.mjs}

@@ -1,6 +1,6 @@
 import {
   Box_default
-} from "./LKQ7PJ4S.mjs";
+} from "./HJYCSDLB.mjs";
 
 // src/Card/Card.tsx
 import { jsx } from "react/jsx-runtime";
@@ -32,4 +32,4 @@ function Card({
 export {
   Card
 };
-//# sourceMappingURL=MZEIZAZH.mjs.map
+//# sourceMappingURL=S2O3PM7G.mjs.map

package/dist/__chunks/{TPMQI44L.js → S2OLRDIA.js}

@@ -4,4 +4,4 @@ var rounding_module_default = { "roundingsm": "_roundingsm_1bo6p_2", "roundingmd
 
 
 exports.rounding_module_default = rounding_module_default;
-//# sourceMappingURL=TPMQI44L.js.map
+//# sourceMappingURL=S2OLRDIA.js.map

package/dist/__chunks/S2OLRDIA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../rounding.module.css#css-module"],"names":[],"mappings":";AAAsF,IAAO,0BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB,cAAa,wBAAuB,cAAa,wBAAuB,gBAAe,yBAAwB","sourcesContent":["import \"/Users/christian/cambly/syntax/packages/syntax-core/src/rounding.module.css\"; export default {\"roundingsm\":\"_roundingsm_1bo6p_2\",\"roundingmd\":\"_roundingmd_1bo6p_6\",\"roundinglg\":\"_roundinglg_1bo6p_10\",\"roundingxl\":\"_roundingxl_1bo6p_14\",\"roundingfull\":\"_roundingfull_1bo6p_18\"}"]}

package/dist/__chunks/{XN5AALLC.mjs → SFLBYQCV.mjs}

@@ -7,6 +7,7 @@ function foregroundTypographyColor(color) {
     case "destructive-secondary":
     case "destructive-tertiary":
       return "destructive-primary";
+    case "primary":
     case "branded":
       return "gray900";
     case "inverse":
@@ -19,4 +20,4 @@ function foregroundTypographyColor(color) {
 export {
   foregroundTypographyColor
 };
-//# sourceMappingURL=XN5AALLC.mjs.map
+//# sourceMappingURL=SFLBYQCV.mjs.map

package/dist/__chunks/SFLBYQCV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/foregroundTypographyColor.ts"],"sourcesContent":["import { type Color } from \"../constants\";\n\nexport default function foregroundTypographyColor(\n  color: (typeof Color)[number],\n): (typeof Color)[number] {\n  switch (color) {\n    case \"secondary\":\n    case \"tertiary\":\n      return \"primary\";\n    case \"destructive-secondary\":\n    case \"destructive-tertiary\":\n      return \"destructive-primary\";\n    case \"primary\":\n    case \"branded\":\n      return \"gray900\";\n    case \"inverse\":\n      return \"white\";\n    default:\n      return \"white\";\n  }\n}\n"],"mappings":";AAEe,SAAR,0BACL,OACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;","names":[]}

package/dist/__chunks/{Q2TIB7ZC.mjs → SSU3B5AR.mjs}

@@ -1,6 +1,6 @@
 import {
   colors_module_default
-} from "./JSEHOGL7.mjs";
+} from "./FLKYHNRX.mjs";
 
 // src/colors/foregroundColor.ts
 function foregroundColor(color) {
@@ -11,6 +11,7 @@ function foregroundColor(color) {
     case "destructive-secondary":
     case "destructive-tertiary":
       return colors_module_default.destructive700Color;
+    case "primary":
     case "branded":
       return colors_module_default.gray900Color;
     case "inverse":
@@ -23,4 +24,4 @@ function foregroundColor(color) {
 export {
   foregroundColor
 };
-//# sourceMappingURL=Q2TIB7ZC.mjs.map
+//# sourceMappingURL=SSU3B5AR.mjs.map

package/dist/__chunks/SSU3B5AR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/foregroundColor.ts"],"sourcesContent":["import { type Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"secondary\":\n    case \"tertiary\":\n      return styles.primary700Color;\n    case \"destructive-secondary\":\n    case \"destructive-tertiary\":\n      return styles.destructive700Color;\n    case \"primary\":\n    case \"branded\":\n      return styles.gray900Color;\n    case \"inverse\":\n      return styles.whiteColor;\n    default:\n      return styles.whiteColor;\n  }\n}\n"],"mappings":";;;;;AAGe,SAAR,gBAAiC,OAAuC;AAC7E,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB;AACE,aAAO,sBAAO;AAAA,EAClB;AACF;","names":[]}

package/dist/__chunks/{M6YFAP6P.mjs → SWA6IQLD.mjs}

@@ -25,4 +25,4 @@ var Avatar_default = Avatar;
 export {
   Avatar_default
 };
-//# sourceMappingURL=M6YFAP6P.mjs.map
+//# sourceMappingURL=SWA6IQLD.mjs.map

package/dist/__chunks/{M6YFAP6P.mjs.map → SWA6IQLD.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\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  src,\n  accessibilityLabel,\n  size = \"md\",\n}: {\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\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   * 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}): JSX.Element => {\n  return (\n    <img\n      alt={accessibilityLabel}\n      src={src}\n      className={classNames(styles.avatar, styles[size])}\n    />\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\"}"],"mappings":";AAAA,OAAO,gBAAgB;;;ACAqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;ADiClN;AA3BJ,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AACT,MAqBmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC;AAAA;AAAA,EACnD;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}
+{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\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  src,\n  accessibilityLabel,\n  size = \"md\",\n}: {\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\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   * 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}): JSX.Element => {\n  return (\n    <img\n      alt={accessibilityLabel}\n      src={src}\n      className={classNames(styles.avatar, styles[size])}\n    />\n  );\n};\n\nexport default Avatar;\n","import \"/Users/christian/cambly/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\"}"],"mappings":";AAAA,OAAO,gBAAgB;;;ACAoE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;ADiCjN;AA3BJ,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AACT,MAqBmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC;AAAA;AAAA,EACnD;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/__chunks/TC3MWLLE.js

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// 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";
+  }
+}
+
+
+
+exports.foregroundTypographyColor = foregroundTypographyColor;
+//# sourceMappingURL=TC3MWLLE.js.map

package/dist/__chunks/TC3MWLLE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/foregroundTypographyColor.ts"],"names":[],"mappings":";AAEe,SAAR,0BACL,OACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF","sourcesContent":["import { type Color } from \"../constants\";\n\nexport default function foregroundTypographyColor(\n  color: (typeof Color)[number],\n): (typeof Color)[number] {\n  switch (color) {\n    case \"secondary\":\n    case \"tertiary\":\n      return \"primary\";\n    case \"destructive-secondary\":\n    case \"destructive-tertiary\":\n      return \"destructive-primary\";\n    case \"branded\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n}\n"]}

package/dist/__chunks/{ERJ5XXDH.js → TCDLLMZO.js}

@@ -3,19 +3,19 @@
 var _5DBWL6IKjs = require('./5DBWL6IK.js');
 
 
-var _4PWSK5GIjs = require('./4PWSK5GI.js');
+var _37REMIOMjs = require('./37REMIOM.js');
 
 
-var _F3ZST4RLjs = require('./F3ZST4RL.js');
+var _TC3MWLLEjs = require('./TC3MWLLE.js');
 
 
-var _HQVZUEWOjs = require('./HQVZUEWO.js');
+var _EDT4HTWEjs = require('./EDT4HTWE.js');
 
 
-var _CATJI2RJjs = require('./CATJI2RJ.js');
+var _6LPXMM72js = require('./6LPXMM72.js');
 
 
-var _G4DDTGDIjs = require('./G4DDTGDI.js');
+var _R3JL4P3Qjs = require('./R3JL4P3Q.js');
 
 // src/LinkButton/LinkButton.tsx
 var _react = require('react');
@@ -54,8 +54,8 @@ var LinkButton = _react.forwardRef.call(void 0,
         className: _classnames2.default.call(void 0, 
           LinkButton_module_default.linkButton,
           Button_module_default.button,
-          _CATJI2RJjs.foregroundColor.call(void 0, color),
-          _G4DDTGDIjs.backgroundColor.call(void 0, color),
+          _EDT4HTWEjs.foregroundColor.call(void 0, color),
+          _6LPXMM72js.backgroundColor.call(void 0, color),
           Button_module_default[size],
           {
             [Button_module_default.fullWidth]: fullWidth,
@@ -70,18 +70,18 @@ var LinkButton = _react.forwardRef.call(void 0,
           StartIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             StartIcon,
             {
-              className: _classnames2.default.call(void 0, Button_module_default.icon, _4PWSK5GIjs.iconSize_default[size])
+              className: _classnames2.default.call(void 0, Button_module_default.icon, _37REMIOMjs.iconSize_default[size])
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _F3ZST4RLjs.Typography_default,
+            _R3JL4P3Qjs.Typography_default,
             {
-              color: _HQVZUEWOjs.foregroundTypographyColor.call(void 0, color),
+              color: _TC3MWLLEjs.foregroundTypographyColor.call(void 0, color),
               size: _5DBWL6IKjs.textVariant_default[size],
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: 500 }, children: text })
             }
           ),
-          EndIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EndIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _4PWSK5GIjs.iconSize_default[size]) })
+          EndIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EndIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _37REMIOMjs.iconSize_default[size]) })
         ]
       }
     );
@@ -93,4 +93,4 @@ var LinkButton_default = LinkButton;
 
 
 exports.LinkButton_default = LinkButton_default;
-//# sourceMappingURL=ERJ5XXDH.js.map
+//# sourceMappingURL=TCDLLMZO.js.map

package/dist/__chunks/{ERJ5XXDH.js.map → TCDLLMZO.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:../Button/Button.module.css#css-module","css-module:./LinkButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACA5gB,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;AFwGpL,SAwBI,KAxBJ;AAlBN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,EACF,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb,gBAAgB,KAAK;AAAA,UACrB,gBAAgB,KAAK;AAAA,UACrB,sBAAa,IAAI;AAAA,UACjB;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YACpD,CAAC,sBAAa,eAAe,GAAG,UAAU;AAAA,YAC1C,CAAC,sBAAa,0BAA0B,GACtC,UAAU;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAa,MAAM,iBAAS,IAAI,CAAC;AAAA;AAAA,UACzD;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,0BAA0B,KAAK;AAAA,cACtC,MAAM,oBAAY,IAAI;AAAA,cAEtB,8BAAC,UAAK,OAAO,EAAE,YAAY,IAAI,GAAI,gBAAK;AAAA;AAAA,UAC1C;AAAA,UACC,WACC,oBAAC,WAAQ,WAAW,WAAW,sBAAa,MAAM,iBAAS,IAAI,CAAC,GAAG;AAAA;AAAA;AAAA,IAEvE;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport backgroundColor from \"../colors/backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport foregroundTypographyColor from \"../colors/foregroundTypographyColor\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\n\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\n\nimport styles from \"./LinkButton.module.css\";\n\ntype LinkButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The link that the LinkButton should route to.\n   *\n   */\n  href?: string;\n  /**\n   * The target attribute specifies where to open the linked document.\n   *\n   */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  /**\n   * The rel attribute specifies the relationship between the document and the link.\n   *\n   */\n  rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\";\n  /**\n   * The size of the button\n   *\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n   */\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      text,\n      href,\n      target,\n      rel,\n      \"data-testid\": dataTestId,\n      color = \"primary\",\n      size = \"md\",\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      onClick,\n    }: LinkButtonProps,\n    ref,\n  ) => {\n    return (\n      <a\n        href={href}\n        data-testid={dataTestId}\n        target={target}\n        ref={ref}\n        rel={rel}\n        className={classNames(\n          styles.linkButton,\n          buttonStyles.button,\n          foregroundColor(color),\n          backgroundColor(color),\n          buttonStyles[size],\n          {\n            [buttonStyles.fullWidth]: fullWidth,\n            [styles.fitContent]: !fullWidth,\n            [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n            [buttonStyles.secondaryBorder]: color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              color === \"destructive-secondary\",\n          },\n        )}\n        onClick={onClick}\n      >\n        {StartIcon && (\n          <StartIcon\n            className={classNames(buttonStyles.icon, iconSize[size])}\n          />\n        )}\n        <Typography\n          color={foregroundTypographyColor(color)}\n          size={textVariant[size]}\n        >\n          <span style={{ fontWeight: 500 }}>{text}</span>\n        </Typography>\n        {EndIcon && (\n          <EndIcon className={classNames(buttonStyles.icon, iconSize[size])} />\n        )}\n      </a>\n    );\n  },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_1iunh_1\",\"buttonGap\":\"_buttonGap_1iunh_9\",\"fullWidth\":\"_fullWidth_1iunh_50\",\"sm\":\"_sm_1iunh_54\",\"md\":\"_md_1iunh_61\",\"lg\":\"_lg_1iunh_68\",\"icon\":\"_icon_1iunh_75\",\"smIcon\":\"_smIcon_1iunh_79\",\"mdIcon\":\"_mdIcon_1iunh_86\",\"lgIcon\":\"_lgIcon_1iunh_93\",\"secondaryBorder\":\"_secondaryBorder_1iunh_100\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_1iunh_104\",\"loading\":\"_loading_1iunh_118\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_1iunh_1\",\"loadingCircle\":\"_loadingCircle_1iunh_122\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"]}
+{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:../Button/Button.module.css#css-module","css-module:./LinkButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAA2C;AACpD,OAAO,gBAAgB;;;ACDoE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,8BAA6B,8BAA6B,yCAAwC,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACA5gB,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;AFwGnL,SAwBI,KAxBJ;AAlBN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,EACF,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb,gBAAgB,KAAK;AAAA,UACrB,gBAAgB,KAAK;AAAA,UACrB,sBAAa,IAAI;AAAA,UACjB;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YACpD,CAAC,sBAAa,eAAe,GAAG,UAAU;AAAA,YAC1C,CAAC,sBAAa,0BAA0B,GACtC,UAAU;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAa,MAAM,iBAAS,IAAI,CAAC;AAAA;AAAA,UACzD;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,0BAA0B,KAAK;AAAA,cACtC,MAAM,oBAAY,IAAI;AAAA,cAEtB,8BAAC,UAAK,OAAO,EAAE,YAAY,IAAI,GAAI,gBAAK;AAAA;AAAA,UAC1C;AAAA,UACC,WACC,oBAAC,WAAQ,WAAW,WAAW,sBAAa,MAAM,iBAAS,IAAI,CAAC,GAAG;AAAA;AAAA;AAAA,IAEvE;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import { forwardRef, type HtmlHTMLAttributes } from \"react\";\nimport classNames from \"classnames\";\nimport backgroundColor from \"../colors/backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport foregroundTypographyColor from \"../colors/foregroundTypographyColor\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\n\nimport buttonStyles from \"../Button/Button.module.css\";\nimport iconSize from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\n\nimport styles from \"./LinkButton.module.css\";\n\ntype LinkButtonProps = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The link that the LinkButton should route to.\n   *\n   */\n  href?: string;\n  /**\n   * The target attribute specifies where to open the linked document.\n   *\n   */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  /**\n   * The rel attribute specifies the relationship between the document and the link.\n   *\n   */\n  rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\";\n  /**\n   * The size of the button\n   *\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  startIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n   */\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      text,\n      href,\n      target,\n      rel,\n      \"data-testid\": dataTestId,\n      color = \"primary\",\n      size = \"md\",\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      onClick,\n    }: LinkButtonProps,\n    ref,\n  ) => {\n    return (\n      <a\n        href={href}\n        data-testid={dataTestId}\n        target={target}\n        ref={ref}\n        rel={rel}\n        className={classNames(\n          styles.linkButton,\n          buttonStyles.button,\n          foregroundColor(color),\n          backgroundColor(color),\n          buttonStyles[size],\n          {\n            [buttonStyles.fullWidth]: fullWidth,\n            [styles.fitContent]: !fullWidth,\n            [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n            [buttonStyles.secondaryBorder]: color === \"secondary\",\n            [buttonStyles.secondaryDestructiveBorder]:\n              color === \"destructive-secondary\",\n          },\n        )}\n        onClick={onClick}\n      >\n        {StartIcon && (\n          <StartIcon\n            className={classNames(buttonStyles.icon, iconSize[size])}\n          />\n        )}\n        <Typography\n          color={foregroundTypographyColor(color)}\n          size={textVariant[size]}\n        >\n          <span style={{ fontWeight: 500 }}>{text}</span>\n        </Typography>\n        {EndIcon && (\n          <EndIcon className={classNames(buttonStyles.icon, iconSize[size])} />\n        )}\n      </a>\n    );\n  },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_1iunh_1\",\"buttonGap\":\"_buttonGap_1iunh_9\",\"fullWidth\":\"_fullWidth_1iunh_50\",\"sm\":\"_sm_1iunh_54\",\"md\":\"_md_1iunh_61\",\"lg\":\"_lg_1iunh_68\",\"icon\":\"_icon_1iunh_75\",\"smIcon\":\"_smIcon_1iunh_79\",\"mdIcon\":\"_mdIcon_1iunh_86\",\"lgIcon\":\"_lgIcon_1iunh_93\",\"secondaryBorder\":\"_secondaryBorder_1iunh_100\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_1iunh_104\",\"loading\":\"_loading_1iunh_118\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_1iunh_1\",\"loadingCircle\":\"_loadingCircle_1iunh_122\"}","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"]}

package/dist/__chunks/TCXV6BXC.js

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _R3JL4P3Qjs = require('./R3JL4P3Q.js');
+
+// src/Heading/Heading.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Heading = ({
+  align = "start",
+  as = "h1",
+  children,
+  color = "gray900",
+  "data-testid": dataTestId,
+  size = 500
+}) => {
+  const weight = [700, 800].includes(size) ? "heavy" : "bold";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _R3JL4P3Qjs.Typography_default,
+    {
+      align,
+      as,
+      color,
+      "data-testid": dataTestId,
+      size,
+      weight,
+      children
+    }
+  );
+};
+var Heading_default = Heading;
+
+
+
+exports.Heading_default = Heading_default;
+//# sourceMappingURL=TCXV6BXC.js.map

package/dist/__chunks/TCXV6BXC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":";;;;;AAyDI;AAlDJ,IAAM,UAAU,CAAC;AAAA,EACf,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,OAAO;AACT,MAwCoB;AAClB,QAAM,SAAS,CAAC,KAAK,GAAG,EAAE,SAAS,IAAI,IAAI,UAAU;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ","sourcesContent":["import { type ReactElement, type ReactNode } from \"react\";\nimport { type Color } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\n\n/**\n * [Heading](https://cambly-syntax.vercel.app/?path=/docs/components-heading--docs) enforces a consistent style & accessibility best practices for headings.\n */\nconst Heading = ({\n  align = \"start\",\n  as = \"h1\",\n  children,\n  color = \"gray900\",\n  \"data-testid\": dataTestId,\n  size = 500,\n}: {\n  /**\n   * Aligns the text to the left, right, or center of the container.\n   * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n   * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n   *\n   * @defaultValue \"start\"\n   */\n  align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n  /**\n   * DOM element to render as.\n   *\n   * @defaultValue \"h1\"\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /**\n   * The text to be rendered\n   */\n  children?: ReactNode;\n  /**\n   * The color of the text.\n   *\n   * @defaultValue \"gray900\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the text.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Size of the text.\n   *\n   * * `500`: 20px\n   * * `600`: 28px\n   * * `700`: 40px\n   * * `800`: 64px\n   *\n   * @defaultValue 500\n   */\n  size?: 500 | 600 | 700 | 800;\n}): ReactElement => {\n  const weight = [700, 800].includes(size) ? \"heavy\" : \"bold\";\n  return (\n    <Typography\n      align={align}\n      as={as}\n      color={color}\n      data-testid={dataTestId}\n      size={size}\n      weight={weight}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nexport default Heading;\n"]}

package/dist/__chunks/{FOTKCGZZ.js → TQ4QQTSW.js}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _PYNS67IVjs = require('./PYNS67IV.js');
+var _3OXEYQS2js = require('./3OXEYQS2.js');
 
 
-var _F3ZST4RLjs = require('./F3ZST4RL.js');
+var _PTAZUBW6js = require('./PTAZUBW6.js');
 
 // css-module:./Badge.module.css#css-module
 var Badge_module_default = { "icon": "_icon_1g9xb_1" };
@@ -24,17 +24,17 @@ var Badge = ({
   text,
   color = "primary700"
 }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  _PYNS67IVjs.Box_default,
+  _3OXEYQS2js.Box_default,
   {
     display: "inlineBlock",
     paddingX: 2,
     paddingY: 1,
     rounding: "full",
     backgroundColor: color,
-    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _F3ZST4RLjs.Typography_default, { color: textColorForBackgroundColor(color), size: 100, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _PYNS67IVjs.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PTAZUBW6js.Typography_default, { color: textColorForBackgroundColor(color), size: 100, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _3OXEYQS2js.Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
       Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: Badge_module_default.icon }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _F3ZST4RLjs.Typography_default,
+        _PTAZUBW6js.Typography_default,
         {
           color: textColorForBackgroundColor(color),
           size: 100,
@@ -50,4 +50,4 @@ var Badge_default = Badge;
 
 
 exports.Badge_default = Badge_default;
-//# sourceMappingURL=FOTKCGZZ.js.map
+//# sourceMappingURL=TQ4QQTSW.js.map

package/dist/__chunks/TQ4QQTSW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"names":[],"mappings":";;;;;;;;AAAyF,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;AC0DzH,SACW,KADX;AA3CN,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,QAAQ,CAAC;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,QAAQ;AACV,MAgBE;AAAA,EAAC;AAAA;AAAA,IACC,SAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAS;AAAA,IACT,iBAAiB;AAAA,IAEjB,8BAAC,sBAAW,OAAO,4BAA4B,KAAK,GAAG,MAAM,KAC3D,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,cAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM;AAAA,MACvC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,4BAA4B,KAAK;AAAA,UACxC,MAAM;AAAA,UACN,QAAO;AAAA,UAEN;AAAA;AAAA,MACH;AAAA,OACF,GACF;AAAA;AACF;AAGF,IAAO,gBAAQ","sourcesContent":["import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\n\nconst BadgeColor = [\n  \"gray200\",\n  \"gray900\",\n  \"destructive700\",\n  \"orange700\",\n  \"yellow700\",\n  \"success700\",\n  \"primary700\",\n  \"purple700\",\n] as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof BadgeColor)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray200\":\n    case \"yellow700\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n};\n\n/**\n * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.\n */\nconst Badge = ({\n  icon: Icon,\n  text,\n  color = \"primary700\",\n}: {\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The text to display inside the badge\n   */\n  text: string;\n  /**\n   * The color of the badge\n   *\n   * @defaultValue \"primary700\"\n   */\n  color?: (typeof BadgeColor)[number];\n}): JSX.Element => (\n  <Box\n    display=\"inlineBlock\"\n    paddingX={2}\n    paddingY={1}\n    rounding=\"full\"\n    backgroundColor={color}\n  >\n    <Typography color={textColorForBackgroundColor(color)} size={100}>\n      <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n        {Icon && <Icon className={styles.icon} />}\n        <Typography\n          color={textColorForBackgroundColor(color)}\n          size={100}\n          weight=\"bold\"\n        >\n          {text}\n        </Typography>\n      </Box>\n    </Typography>\n  </Box>\n);\n\nexport default Badge;\n"]}

package/dist/__chunks/USJPERI4.js

@@ -0,0 +1,58 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _3OXEYQS2js = require('./3OXEYQS2.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, _3OXEYQS2js.Box_default, { display: "flex", position: "relative", justifyContent: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _3OXEYQS2js.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=USJPERI4.js.map

package/dist/__chunks/USJPERI4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"names":[],"mappings":";;;;;;;;AAAA,OAAO,gBAAgB;;;ACAoE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;AD8CjN,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 \"/Users/christian/cambly/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/__chunks/{5R6HCJP6.mjs → V4YM6NMQ.mjs}

@@ -3,10 +3,10 @@ import {
 } from "./XFKGXL73.mjs";
 import {
   foregroundColor
-} from "./Q2TIB7ZC.mjs";
+} from "./SSU3B5AR.mjs";
 import {
   backgroundColor
-} from "./R6CDK4GP.mjs";
+} from "./5QXUIARJ.mjs";
 
 // src/IconButton/IconButton.tsx
 import classNames from "classnames";
@@ -65,4 +65,4 @@ var IconButton_default = IconButton;
 export {
   IconButton_default
 };
-//# sourceMappingURL=5R6HCJP6.mjs.map
+//# sourceMappingURL=V4YM6NMQ.mjs.map

package/dist/__chunks/{5R6HCJP6.mjs.map → V4YM6NMQ.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Color, type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n   *\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel: string;\n  /**\n   * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  icon: React.ComponentType<{ className?: string }>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      accessibilityLabel,\n      color = \"primary\",\n      \"data-testid\": dataTestId,\n      disabled = false,\n      icon: Icon,\n      size = \"md\",\n      tooltip,\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n\n    return (\n      <button\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        type=\"button\"\n        title={tooltip}\n        disabled={!isHydrated || disabled}\n        onClick={onClick}\n        className={classNames(\n          styles.iconButton,\n          foregroundColor(color),\n          backgroundColor(color),\n          styles[size],\n          {\n            [styles.secondaryBorder]: color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              color === \"destructive-secondary\",\n          },\n        )}\n        ref={ref}\n      >\n        <Icon className={iconSize[size]} />\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_4e8qe_1\",\"sm\":\"_sm_4e8qe_46\",\"md\":\"_md_4e8qe_51\",\"lg\":\"_lg_4e8qe_56\",\"smIcon\":\"_smIcon_4e8qe_61\",\"mdIcon\":\"_mdIcon_4e8qe_68\",\"lgIcon\":\"_lgIcon_4e8qe_75\",\"secondaryBorder\":\"_secondaryBorder_4e8qe_82\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_4e8qe_86\"}"],"mappings":";;;;;;;;;;;AAAA,OAAO,gBAAgB;AAGvB,SAAgB,kBAAkB;;;ACHkE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,6BAA4B,8BAA6B,uCAAsC;;;ADmGhZ;AA3FR,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AACjB;AAkDA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,gBAAgB,KAAK;AAAA,UACrB,gBAAgB,KAAK;AAAA,UACrB,0BAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,0BAAO,eAAe,GAAG,UAAU;AAAA,YACpC,CAAC,0BAAO,0BAA0B,GAChC,UAAU;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG;AAAA;AAAA,IACnC;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { forwardRef } from \"react\";\nimport { type Color, type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\ntype IconButtonProps = {\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the button\n   *\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel: string;\n  /**\n   * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  icon: React.ComponentType<{ className?: string }>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      accessibilityLabel,\n      color = \"primary\",\n      \"data-testid\": dataTestId,\n      disabled = false,\n      icon: Icon,\n      size = \"md\",\n      tooltip,\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n\n    return (\n      <button\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        type=\"button\"\n        title={tooltip}\n        disabled={!isHydrated || disabled}\n        onClick={onClick}\n        className={classNames(\n          styles.iconButton,\n          foregroundColor(color),\n          backgroundColor(color),\n          styles[size],\n          {\n            [styles.secondaryBorder]: color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              color === \"destructive-secondary\",\n          },\n        )}\n        ref={ref}\n      >\n        <Icon className={iconSize[size]} />\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_4e8qe_1\",\"sm\":\"_sm_4e8qe_46\",\"md\":\"_md_4e8qe_51\",\"lg\":\"_lg_4e8qe_56\",\"smIcon\":\"_smIcon_4e8qe_61\",\"mdIcon\":\"_mdIcon_4e8qe_68\",\"lgIcon\":\"_lgIcon_4e8qe_75\",\"secondaryBorder\":\"_secondaryBorder_4e8qe_82\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_4e8qe_86\"}"],"mappings":";;;;;;;;;;;AAAA,OAAO,gBAAgB;AAGvB,SAAgB,kBAAkB;;;ACHiE,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,mBAAkB,6BAA4B,8BAA6B,uCAAsC;;;ADmG/Y;AA3FR,IAAM,WAAW;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AAAA,EACf,CAAC,IAAI,GAAG,0BAAO;AACjB;AAkDA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AAEjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,gBAAgB,KAAK;AAAA,UACrB,gBAAgB,KAAK;AAAA,UACrB,0BAAO,IAAI;AAAA,UACX;AAAA,YACE,CAAC,0BAAO,eAAe,GAAG,UAAU;AAAA,YACpC,CAAC,0BAAO,0BAA0B,GAChC,UAAU;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QAEA,8BAAC,QAAK,WAAW,SAAS,IAAI,GAAG;AAAA;AAAA,IACnC;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}