@cambly/syntax-core 21.16.0 → 22.0.0

package/dist/__chunks/{XTV66LZO.js → LUK43ZOB.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Chip_default
-} from "./EBR6W2V2.js";
+} from "./B5PWI2NT.js";
 import {
   RichSelectItem_default
 } from "./ODMJANSX.js";
@@ -31,4 +31,4 @@ var RichSelectChip_default = forwardRef(
 export {
   RichSelectChip_default
 };
-//# sourceMappingURL=XTV66LZO.js.map
+//# sourceMappingURL=LUK43ZOB.js.map

package/dist/__chunks/{3YNFOT4M.js → NAKEUWBD.js}

@@ -3,7 +3,7 @@ import {
   RichSelectBoxContext,
   RichSelectBox_default,
   convertSelection
-} from "./X42H56XS.js";
+} from "./R6OBV53M.js";
 import {
   Popover_default
 } from "./STXMQR3I.js";
@@ -14,7 +14,7 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./YKFF7HLY.js";
+} from "./LEHKWTCB.js";
 import {
   RichSelectSection_default
 } from "./Y53Z25OG.js";
@@ -23,7 +23,7 @@ import {
 } from "./N7G37EKF.js";
 import {
   RichSelectChip_default
-} from "./XTV66LZO.js";
+} from "./LUK43ZOB.js";
 import {
   TapArea_default
 } from "./OXEXFQAN.js";
@@ -289,4 +289,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=3YNFOT4M.js.map
+//# sourceMappingURL=NAKEUWBD.js.map

package/dist/__chunks/{X42H56XS.js → R6OBV53M.js}

@@ -16,7 +16,7 @@ import {
 } from "./N7G37EKF.js";
 import {
   RichSelectChip_default
-} from "./XTV66LZO.js";
+} from "./LUK43ZOB.js";
 import {
   RichSelectItemContext,
   RichSelect_module_default
@@ -208,4 +208,4 @@ export {
   RichSelectBoxContext,
   RichSelectBox_default
 };
-//# sourceMappingURL=X42H56XS.js.map
+//# sourceMappingURL=R6OBV53M.js.map

package/dist/__chunks/{IRAGZBOB.js → SW7VXIHS.js}

@@ -23,12 +23,32 @@ var textColorForBackgroundColor = (color) => {
     case "pink":
     case "lilac":
     case "cream":
+    case "silver":
     case "yellow700":
       return "gray900";
     default:
       return "white";
   }
 };
+var backgroundColorForColor = (color) => {
+  switch (color) {
+    case "silver":
+      return void 0;
+    default:
+      return color;
+  }
+};
+var inlineStylesForColor = (color) => {
+  switch (color) {
+    case "silver":
+      return {
+        background: "linear-gradient(85deg, #CECECE -8.89%, #EEECEC 38.35%, #FFF 49.64%, #E9E8E8 66.22%) padding-box,           linear-gradient(83.45deg, #A9A9A9 2.57%, #E5E2E2 61.77%, #6E6E6E 100.3%) border-box",
+        border: "1px solid transparent"
+      };
+    default:
+      return {};
+  }
+};
 var Badge = ({
   icon: Icon,
   text,
@@ -41,14 +61,17 @@ var Badge = ({
       paddingX: 2,
       paddingY: 1,
       rounding: "sm",
-      backgroundColor: color,
+      backgroundColor: backgroundColorForColor(color),
       alignItems: "center",
       justifyContent: "center",
       minHeight: 24,
+      dangerouslySetInlineStyle: {
+        __style: inlineStylesForColor(color)
+      },
       children: /* @__PURE__ */ jsx(
         Typography_default,
         {
-          size: 100,
+          size: 0,
           weight: "medium",
           color: textColorForBackgroundColor(color),
           children: /* @__PURE__ */ jsxs(Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
@@ -57,7 +80,7 @@ var Badge = ({
               Typography_default,
               {
                 color: textColorForBackgroundColor(color),
-                size: 100,
+                size: 0,
                 weight: "medium",
                 transform: "uppercase",
                 children: text
@@ -74,4 +97,4 @@ var Badge_default = Badge;
 export {
   Badge_default
 };
-//# sourceMappingURL=IRAGZBOB.js.map
+//# sourceMappingURL=SW7VXIHS.js.map

package/dist/__chunks/SW7VXIHS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import { type ComponentProps } from \"react\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\nimport type InternalIcon from \"../Icon/Icon\";\n\nconst badgeColor = [\n  \"sky\",\n  \"success300\",\n  \"destructive300\",\n  \"orange\",\n  \"tan\",\n  \"gray370\",\n  \"gray870\",\n  \"lilac\",\n  \"thistle\",\n  \"pink\",\n  \"cream\",\n  \"yellow700\",\n  \"silver\",\n] as const;\n\ntype BadgeColor = (typeof badgeColor)[number];\n\nconst textColorForBackgroundColor = (\n  color: BadgeColor,\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray370\":\n    case \"destructive300\":\n    case \"orange\":\n    case \"tan\":\n    case \"success300\":\n    case \"sky\":\n    case \"thistle\":\n    case \"pink\":\n    case \"lilac\":\n    case \"cream\":\n    case \"silver\":\n    case \"yellow700\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n};\n\nconst backgroundColorForColor = (\n  color: BadgeColor,\n): Exclude<BadgeColor, \"silver\"> | undefined => {\n  switch (color) {\n    case \"silver\":\n      return undefined;\n    default:\n      return color;\n  }\n};\n\nconst inlineStylesForColor = (\n  color: BadgeColor,\n): Record<string, string | number | null> => {\n  switch (color) {\n    case \"silver\":\n      return {\n        background:\n          \"linear-gradient(85deg, #CECECE -8.89%, #EEECEC 38.35%, #FFF 49.64%, #E9E8E8 66.22%) padding-box, \\\n          linear-gradient(83.45deg, #A9A9A9 2.57%, #E5E2E2 61.77%, #6E6E6E 100.3%) border-box\",\n        border: \"1px solid transparent\",\n      };\n    default:\n      return {};\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 = \"sky\",\n}: {\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /**\n   * The text to display inside the badge\n   */\n  text: string;\n  /**\n   * The color of the badge\n   *\n   * @defaultValue \"sky\"\n   */\n  color?: (typeof badgeColor)[number];\n}): JSX.Element => {\n  return (\n    <Box\n      display=\"inlineFlex\"\n      paddingX={2}\n      paddingY={1}\n      rounding={\"sm\"}\n      backgroundColor={backgroundColorForColor(color)}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      minHeight={24}\n      dangerouslySetInlineStyle={{\n        __style: inlineStylesForColor(color),\n      }}\n    >\n      <Typography\n        size={0}\n        weight=\"medium\"\n        color={textColorForBackgroundColor(color)}\n      >\n        <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n          {Icon && <Icon className={styles.icon} size={100} />}\n          <Typography\n            color={textColorForBackgroundColor(color)}\n            size={0}\n            weight=\"medium\"\n            transform=\"uppercase\"\n          >\n            {text}\n          </Typography>\n        </Box>\n      </Typography>\n    </Box>\n  );\n};\n\nexport default Badge;\n"],"mappings":";;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;ACqHxH,SACW,KADX;AA7FR,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,0BAA0B,CAC9B,UAC8C;AAC9C,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,uBAAuB,CAC3B,UAC2C;AAC3C,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO;AAAA,QACL,YACE;AAAA,QAEF,QAAQ;AAAA,MACV;AAAA,IACF;AACE,aAAO,CAAC;AAAA,EACZ;AACF;AAKA,IAAM,QAAQ,CAAC;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,QAAQ;AACV,MAiBmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB,wBAAwB,KAAK;AAAA,MAC9C,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,WAAW;AAAA,MACX,2BAA2B;AAAA,QACzB,SAAS,qBAAqB,KAAK;AAAA,MACrC;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAO;AAAA,UACP,OAAO,4BAA4B,KAAK;AAAA,UAExC,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,oBAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM,MAAM,KAAK;AAAA,YAClD;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,4BAA4B,KAAK;AAAA,gBACxC,MAAM;AAAA,gBACN,QAAO;AAAA,gBACP,WAAU;AAAA,gBAET;AAAA;AAAA,YACH;AAAA,aACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/__chunks/{I4QZMNNL.js → UUEKFWQM.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Badge_default
-} from "./IRAGZBOB.js";
+} from "./SW7VXIHS.js";
 import {
   Box_default
 } from "./X552U42S.js";
@@ -118,4 +118,4 @@ function TextField({
 export {
   TextField
 };
-//# sourceMappingURL=I4QZMNNL.js.map
+//# sourceMappingURL=UUEKFWQM.js.map

package/dist/index.css

@@ -2660,51 +2660,52 @@
 }
 
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css/#css-module-data */
-._chip_1lns9_1 {
+._chip_ime1m_1 {
   border: none;
   border-radius: 8px;
   display: flex;
+  gap: 4px;
   align-items: center;
   justify-content: center;
   text-align: center;
   cursor: pointer;
   box-sizing: border-box;
 }
-._disabled_1lns9_12 {
+._disabled_ime1m_13 {
   filter: opacity(50%);
   cursor: auto;
 }
-._deselectedChip_1lns9_17 {
+._deselectedChip_ime1m_18 {
   background-color: var(--color-cambio-gray-370);
 }
-._deselectedChipOnDarkBackground_1lns9_21 {
+._deselectedChipOnDarkBackground_ime1m_22 {
   background-color: var(--color-cambio-gray-870);
 }
-._selectedChip_1lns9_25 {
+._selectedChip_ime1m_26 {
   background-color: var(--color-cambio-gray-800);
 }
-._selectedChipOnDarkBackground_1lns9_29 {
+._selectedChipOnDarkBackground_ime1m_30 {
   background-color: var(--color-cambio-gray-200);
 }
-._icon_1lns9_33 {
+._icon_ime1m_34 {
   height: 24px !important;
   width: 24px !important;
 }
-._selectedIcon_1lns9_40 {
+._selectedIcon_ime1m_41 {
   color: #fff;
 }
-._sm_1lns9_44 {
+._sm_ime1m_45 {
   height: 32px;
   min-width: 40px;
   padding: 8px 12px;
 }
-._md_1lns9_50 {
+._md_ime1m_51 {
   height: 48px;
   min-width: 56px;
   padding: 8px 16px;
 }
-._chip_1lns9_1:focus-visible,
-._forceFocus_1lns9_57 {
+._chip_ime1m_1:focus-visible,
+._forceFocus_ime1m_58 {
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
   box-shadow: 0 0 0 4px #000;
   outline: solid 2px #fff;