@cambly/syntax-core 21.14.1 → 21.16.0

package/dist/__chunks/{OO4VSDFL.js → AZ5EYAWP.js}

@@ -11,6 +11,9 @@ import {
 import {
   FocusTrap
 } from "./HVA7R2EL.js";
+import {
+  Divider
+} from "./3WKVZ2UU.js";
 import {
   IconButton_default
 } from "./KEJPRZJ5.js";
@@ -71,7 +74,7 @@ function Modal({
           position: "relative",
           width: "100%",
           children: [
-            /* @__PURE__ */ jsx(
+            image && /* @__PURE__ */ jsx(
               Box_default,
               {
                 position: "absolute",
@@ -82,10 +85,10 @@ function Modal({
                   IconButton_default,
                   {
                     accessibilityLabel: accessibilityCloseLabel,
-                    color: image ? "primary" : "tertiary",
-                    on: image ? "darkBackground" : "lightBackground",
+                    color: "primary",
+                    on: "darkBackground",
                     onClick: onDismiss,
-                    size: "md",
+                    size: "sm",
                     icon: XIcon
                   }
                 )
@@ -93,14 +96,49 @@ function Modal({
             ),
             /* @__PURE__ */ jsxs(Box_default, { display: "flex", direction: "column", width: "100%", children: [
               image && /* @__PURE__ */ jsx(Box_default, { children: image }),
-              /* @__PURE__ */ jsx(Box_default, { padding: 6, children: /* @__PURE__ */ jsx(Heading_default, { as: "h1", size: 500, fontStyle: "serif", children: header }) }),
+              /* @__PURE__ */ jsxs(
+                Box_default,
+                {
+                  padding: 4,
+                  width: "100%",
+                  direction: "row",
+                  display: "flex",
+                  gap: 1,
+                  justifyContent: "between",
+                  children: [
+                    /* @__PURE__ */ jsx(Heading_default, { as: "h1", size: 400, children: header }),
+                    !image && /* @__PURE__ */ jsx(
+                      IconButton_default,
+                      {
+                        accessibilityLabel: accessibilityCloseLabel,
+                        color: "tertiary",
+                        on: "lightBackground",
+                        onClick: onDismiss,
+                        size: "sm",
+                        icon: XIcon
+                      }
+                    )
+                  ]
+                }
+              ),
+              !image && /* @__PURE__ */ jsx(
+                Box_default,
+                {
+                  display: "flex",
+                  direction: "column",
+                  width: "100%",
+                  paddingX: 4,
+                  children: /* @__PURE__ */ jsx(Divider, {})
+                }
+              ),
               /* @__PURE__ */ jsx(
                 Box_default,
                 {
                   height: "100%",
                   overflowY: "auto",
-                  paddingX: 6,
-                  marginBottom: footer ? 0 : 6,
+                  paddingX: 4,
+                  paddingY: image ? 0 : 4,
+                  marginBottom: image ? 4 : 0,
                   children
                 }
               ),
@@ -114,7 +152,7 @@ function Modal({
                   smJustifyContent: "end",
                   lgDirection: "row",
                   lgJustifyContent: "end",
-                  padding: 6,
+                  padding: 4,
                   children: footer
                 }
               )
@@ -130,4 +168,4 @@ Modal.displayName = "Modal";
 export {
   Modal
 };
-//# sourceMappingURL=OO4VSDFL.js.map
+//# sourceMappingURL=AZ5EYAWP.js.map

package/dist/__chunks/AZ5EYAWP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_17lbk_1\",\"closeButton\":\"_closeButton_17lbk_10\"}","import { type ReactElement } from \"react\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\nimport Divider from \"../Divider/Divider\";\n\nfunction XIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"currentColor\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n    </svg>\n  );\n}\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n  const [showModal, setShowModal] = useState(false)\n\n  return (\n    <>\n      {showModal && <Modal\n        header=\"header text\"\n        onDismiss={() => setShowModal(false)}\n        footer={\n          <>\n            <Button\n              text=\"Cancel\"\n              color=\"secondary\"\n              onClick={() => {}}\n            />\n            <Button\n              text=\"Confirm\"\n              onClick={() => {}}\n            />\n          </>\n        }\n      >\n        <Typography>\n          Body text goes here!\n        </Typography>\n      </Modal> }\n    </>\n  )\n  ```\n */\nexport default function Modal({\n  header,\n  children,\n  image,\n  onDismiss,\n  footer,\n  accessibilityCloseLabel = \"close modal\",\n  zIndex = 1,\n  \"data-testid\": dataTestId,\n}: {\n  /**\n   * The modal's main content. Should typically take in `Typography`'d text.\n   */\n  children: JSX.Element;\n  /**\n   * The header inside a modal as a string.\n   */\n  header: string;\n  /**\n   * What the X button (or clicking out of the modal area) does.\n   * Typically used for closing the Modal\n   */\n  onDismiss: () => void;\n  /**\n   * The optional image rendered above the Modal.\n   * Image\n   *  * Size should be 600w x 200h\n   *  * Be sure to set width=\"100%\" on the image\n   * If images aren't that sized, should ask design to give another image.\n   */\n  image?: JSX.Element;\n  /**\n   * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n   * * Use Syntax `Button` and pass it into footer.\n   * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n   * * If two(2) buttons, put primary button _second_.\n   *\n      <>\n        <Button\n          text=\"Cancel\"\n          color=\"secondary\"\n          onClick={() => {}}\n        />\n        <Button\n          text=\"Confirm\"\n          onClick={() => {}}\n        />\n      </>\n   */\n  footer?: JSX.Element;\n  /**\n   * The accessibilty text on the close button.\n   * (Sets the aria-label of the button)\n   *\n   *\n   * @defaultValue close modal\n   */\n  accessibilityCloseLabel?: string;\n  /**\n   * The z-index for the modal.\n   * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n   *\n   * @defaultValue 0\n   */\n  zIndex?: number;\n  /**\n   * Test id for the modal\n   */\n  \"data-testid\"?: string;\n}): ReactElement {\n  return (\n    <Layer zIndex={zIndex}>\n      <StopScroll>\n        <FocusTrap>\n          <div\n            className={styles.backdrop}\n            role=\"presentation\"\n            onMouseDown={(e) => e.target === e.currentTarget && onDismiss()}\n            onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n          >\n            <Box\n              data-testid={dataTestId}\n              backgroundColor=\"gray100\"\n              rounding=\"md\"\n              display=\"flex\"\n              marginStart={4}\n              marginEnd={4}\n              marginTop={8}\n              marginBottom={8}\n              minWidth={240}\n              maxHeight=\"calc(100vh - 64px)\"\n              maxWidth={600}\n              overflow=\"hidden\"\n              position=\"relative\"\n              width=\"100%\"\n            >\n              {image && (\n                <Box\n                  position=\"absolute\"\n                  dangerouslySetInlineStyle={{\n                    __style: { top: 4, right: 4 },\n                  }}\n                >\n                  <IconButton\n                    accessibilityLabel={accessibilityCloseLabel}\n                    color=\"primary\"\n                    on=\"darkBackground\"\n                    onClick={onDismiss}\n                    size=\"sm\"\n                    icon={XIcon}\n                  />\n                </Box>\n              )}\n\n              <Box display=\"flex\" direction=\"column\" width=\"100%\">\n                {image && <Box>{image}</Box>}\n                <Box\n                  padding={4}\n                  width=\"100%\"\n                  direction=\"row\"\n                  display=\"flex\"\n                  gap={1}\n                  justifyContent=\"between\"\n                >\n                  <Heading as=\"h1\" size={400}>\n                    {header}\n                  </Heading>\n                  {!image && (\n                    <IconButton\n                      accessibilityLabel={accessibilityCloseLabel}\n                      color=\"tertiary\"\n                      on=\"lightBackground\"\n                      onClick={onDismiss}\n                      size=\"sm\"\n                      icon={XIcon}\n                    />\n                  )}\n                </Box>\n                {!image && (\n                  <Box\n                    display=\"flex\"\n                    direction=\"column\"\n                    width=\"100%\"\n                    paddingX={4}\n                  >\n                    <Divider />\n                  </Box>\n                )}\n                <Box\n                  height=\"100%\"\n                  overflowY=\"auto\"\n                  paddingX={4}\n                  paddingY={image ? 0 : 4}\n                  marginBottom={image ? 4 : 0}\n                >\n                  {children}\n                </Box>\n                {footer && (\n                  <Box\n                    display=\"flex\"\n                    direction=\"column\"\n                    gap={3}\n                    smDirection=\"row\"\n                    smJustifyContent=\"end\"\n                    lgDirection=\"row\"\n                    lgJustifyContent=\"end\"\n                    padding={4}\n                  >\n                    {footer}\n                  </Box>\n                )}\n              </Box>\n            </Box>\n          </div>\n        </FocusTrap>\n      </StopScroll>\n    </Layer>\n  );\n}\n\nModal.displayName = \"Modal\";\n"],"mappings":"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","names":[]}

package/dist/__chunks/{5FZZ7J4T.js → EBR6W2V2.js}

@@ -1,4 +1,11 @@
 "use client"
+import {
+  textVariant_default
+} from "./Z5ZUAP2B.js";
+import {
+  internalIconSize,
+  materialIconSize
+} from "./6TM2ES2T.js";
 import {
   Box_default
 } from "./X552U42S.js";
@@ -14,7 +21,7 @@ import { forwardRef, useMemo } from "react";
 import classnames from "classnames";
 
 // css-module:./Chip.module.css#css-module
-var Chip_module_default = { "chip": "_chip_b9vyr_1", "disabled": "_disabled_b9vyr_12", "deselectedChip": "_deselectedChip_b9vyr_17", "deselectedChipOnDarkBackground": "_deselectedChipOnDarkBackground_b9vyr_21", "selectedChip": "_selectedChip_b9vyr_25", "selectedChipOnDarkBackground": "_selectedChipOnDarkBackground_b9vyr_29", "icon": "_icon_b9vyr_33", "selectedIcon": "_selectedIcon_b9vyr_41", "sm": "_sm_b9vyr_45", "forceFocus": "_forceFocus_b9vyr_52" };
+var Chip_module_default = { "chip": "_chip_1lns9_1", "disabled": "_disabled_1lns9_12", "deselectedChip": "_deselectedChip_1lns9_17", "deselectedChipOnDarkBackground": "_deselectedChipOnDarkBackground_1lns9_21", "selectedChip": "_selectedChip_1lns9_25", "selectedChipOnDarkBackground": "_selectedChipOnDarkBackground_1lns9_29", "icon": "_icon_1lns9_33", "selectedIcon": "_selectedIcon_1lns9_40", "sm": "_sm_1lns9_44", "md": "_md_1lns9_50", "forceFocus": "_forceFocus_1lns9_57" };
 
 // src/Chip/Chip.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -40,6 +47,7 @@ var Chip = forwardRef(
   ({
     disabled: disabledProp = false,
     selected = false,
+    size = "sm",
     "data-testid": dataTestId,
     text,
     on = "lightBackground",
@@ -67,7 +75,7 @@ var Chip = forwardRef(
     return /* @__PURE__ */ jsxs(
       "button",
       {
-        className: chipStyles,
+        className: classnames(chipStyles, Chip_module_default[size]),
         disabled,
         "data-testid": dataTestId,
         ref,
@@ -75,8 +83,15 @@ var Chip = forwardRef(
         "aria-pressed": selected,
         onClick: onChange,
         children: [
-          Icon && /* @__PURE__ */ jsx(Icon, { className: iconStyles, size: 100 }),
-          /* @__PURE__ */ jsx(Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color, weight: "medium", children: text }) })
+          Icon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              className: classnames(iconStyles, materialIconSize[size]),
+              color,
+              size: internalIconSize[size]
+            }
+          ),
+          /* @__PURE__ */ jsx(Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ jsx(Typography_default, { size: textVariant_default[size], color, weight: "medium", children: text }) })
         ]
       }
     );
@@ -88,4 +103,4 @@ var Chip_default = Chip;
 export {
   Chip_default
 };
-//# sourceMappingURL=5FZZ7J4T.js.map
+//# sourceMappingURL=EBR6W2V2.js.map

package/dist/__chunks/EBR6W2V2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Chip/Chip.tsx","css-module:./Chip.module.css#css-module"],"sourcesContent":["import React, { forwardRef, useMemo, type ComponentProps } from \"react\";\nimport classnames from \"classnames\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Chip.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport type InternalIcon from \"../Icon/Icon\";\nimport { type Size } from \"../constants\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport {\n  internalIconSize,\n  materialIconSize,\n} from \"../Button/constants/iconSize\";\n\nfunction typographyColor({\n  selected,\n  on,\n}: {\n  selected: boolean;\n  on: \"lightBackground\" | \"darkBackground\";\n}): \"white\" | \"gray900\" {\n  if (on === \"darkBackground\") {\n    if (selected) {\n      return \"gray900\";\n    } else {\n      return \"white\";\n    }\n  } else {\n    if (selected) {\n      return \"white\";\n    } else {\n      return \"gray900\";\n    }\n  }\n}\n\ntype ChipProps = {\n  /**\n   * If true, the chip will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Sets the initial status of this chip component.\n   * * `true` will display a grey chip.\n   * * `false` will display a premium800 color chip.\n   *\n   * @defaultValue \"false\"\n   */\n  selected?: boolean;\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The size of the chip\n   *\n   * * `sm`: 32px height\n   * * `md`: 48px height\n   *\n   * @defaultValue \"sm\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The text to be displayed on the chip\n   */\n  text: string;\n  /**\n   * Indicate whether the badge renders on a light or dark background. Changes the color of the chip\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n  /**\n   * The callback to be called when the chip is clicked\n   */\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The icon to be displayed.\n   */\n  icon?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n};\n/**\n * [Chip](https://cambly-syntax.vercel.app/?path=/docs/components-chip--docs) is used to show status (selected/not selected) like a toggle button.\n */\nconst Chip = forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      disabled: disabledProp = false,\n      selected = false,\n      size = \"sm\",\n      \"data-testid\": dataTestId,\n      text,\n      on = \"lightBackground\",\n      onChange,\n      icon: Icon,\n      dangerouslyForceFocusStyles,\n    }: ChipProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n\n    const selectedChipStyle =\n      on === \"lightBackground\"\n        ? styles.selectedChip\n        : styles.selectedChipOnDarkBackground;\n\n    const deselectedChipStyle =\n      on === \"lightBackground\"\n        ? styles.deselectedChip\n        : styles.deselectedChipOnDarkBackground;\n\n    const chipStyles = classnames(styles.chip, styles.sm, {\n      [selectedChipStyle]: selected,\n      [deselectedChipStyle]: !selected,\n      [styles.disabled]: disabled,\n      [styles.forceFocus]: dangerouslyForceFocusStyles,\n    });\n    const iconStyles = classnames(styles.icon, {\n      [styles.selectedIcon]: selected,\n    });\n\n    const color = useMemo(\n      () => typographyColor({ selected, on }),\n      [selected, on],\n    );\n\n    return (\n      <button\n        className={classnames(chipStyles, styles[size])}\n        disabled={disabled}\n        data-testid={dataTestId}\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onChange}\n      >\n        {Icon && (\n          <Icon\n            className={classnames(iconStyles, materialIconSize[size])}\n            color={color}\n            size={internalIconSize[size]}\n          />\n        )}\n        <Box paddingX={Icon ? 1 : 0}>\n          <Typography size={textVariant[size]} color={color} weight=\"medium\">\n            {text}\n          </Typography>\n        </Box>\n      </button>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n\nexport default Chip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css\"; export default {\"chip\":\"_chip_1lns9_1\",\"disabled\":\"_disabled_1lns9_12\",\"deselectedChip\":\"_deselectedChip_1lns9_17\",\"deselectedChipOnDarkBackground\":\"_deselectedChipOnDarkBackground_1lns9_21\",\"selectedChip\":\"_selectedChip_1lns9_25\",\"selectedChipOnDarkBackground\":\"_selectedChipOnDarkBackground_1lns9_29\",\"icon\":\"_icon_1lns9_33\",\"selectedIcon\":\"_selectedIcon_1lns9_40\",\"sm\":\"_sm_1lns9_44\",\"md\":\"_md_1lns9_50\",\"forceFocus\":\"_forceFocus_1lns9_57\"}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,SAAgB,YAAY,eAAoC;AAChE,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,YAAW,sBAAqB,kBAAiB,4BAA2B,kCAAiC,4CAA2C,gBAAe,0BAAyB,gCAA+B,0CAAyC,QAAO,kBAAiB,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,gBAAe,cAAa,uBAAsB;;;ADoI5gB,SAUI,KAVJ;AAtHN,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AACF,GAGwB;AACtB,MAAI,OAAO,kBAAkB;AAC3B,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,OAAO;AACL,QAAI,UAAU;AACZ,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAsDA,IAAM,OAAO;AAAA,EACX,CACE;AAAA,IACE,UAAU,eAAe;AAAA,IACzB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,CAAC,cAAc;AAEhC,UAAM,oBACJ,OAAO,oBACH,oBAAO,eACP,oBAAO;AAEb,UAAM,sBACJ,OAAO,oBACH,oBAAO,iBACP,oBAAO;AAEb,UAAM,aAAa,WAAW,oBAAO,MAAM,oBAAO,IAAI;AAAA,MACpD,CAAC,iBAAiB,GAAG;AAAA,MACrB,CAAC,mBAAmB,GAAG,CAAC;AAAA,MACxB,CAAC,oBAAO,QAAQ,GAAG;AAAA,MACnB,CAAC,oBAAO,UAAU,GAAG;AAAA,IACvB,CAAC;AACD,UAAM,aAAa,WAAW,oBAAO,MAAM;AAAA,MACzC,CAAC,oBAAO,YAAY,GAAG;AAAA,IACzB,CAAC;AAED,UAAM,QAAQ;AAAA,MACZ,MAAM,gBAAgB,EAAE,UAAU,GAAG,CAAC;AAAA,MACtC,CAAC,UAAU,EAAE;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW,YAAY,oBAAO,IAAI,CAAC;AAAA,QAC9C;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS;AAAA,QAER;AAAA,kBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,YAAY,iBAAiB,IAAI,CAAC;AAAA,cACxD;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UAEF,oBAAC,eAAI,UAAU,OAAO,IAAI,GACxB,8BAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,OAAc,QAAO,UACvD,gBACH,GACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;","names":[]}

package/dist/__chunks/{5KJ4WGBE.js → KGT647C4.js}

@@ -6,7 +6,7 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./GGGVSGXA.js";
+} from "./YKFF7HLY.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -140,4 +140,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=5KJ4WGBE.js.map
+//# sourceMappingURL=KGT647C4.js.map

package/dist/__chunks/{MRC3GNGT.js → TH3OGGTK.js}

@@ -2,12 +2,12 @@
 import {
   Button_module_default
 } from "./YLWWTB4I.js";
-import {
-  textVariant_default
-} from "./Z5ZUAP2B.js";
 import {
   loadingIconSize_default
 } from "./QSC7CAQA.js";
+import {
+  textVariant_default
+} from "./Z5ZUAP2B.js";
 import {
   internalIconSize,
   materialIconSize
@@ -138,4 +138,4 @@ var LinkButton_default = LinkButton;
 export {
   LinkButton_default
 };
-//# sourceMappingURL=MRC3GNGT.js.map
+//# sourceMappingURL=TH3OGGTK.js.map

package/dist/__chunks/{64HKLVJ4.js → WJ4QY73I.js}

@@ -1,10 +1,10 @@
 "use client"
-import {
-  textVariant_default
-} from "./Z5ZUAP2B.js";
 import {
   loadingIconSize_default
 } from "./QSC7CAQA.js";
+import {
+  textVariant_default
+} from "./Z5ZUAP2B.js";
 import {
   internalIconSize,
   materialIconSize
@@ -146,4 +146,4 @@ var Button_default = Button;
 export {
   Button_default
 };
-//# sourceMappingURL=64HKLVJ4.js.map
+//# sourceMappingURL=WJ4QY73I.js.map

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

@@ -4,7 +4,7 @@ import {
 } from "./36DG472B.js";
 import {
   Button_default
-} from "./64HKLVJ4.js";
+} from "./WJ4QY73I.js";
 import {
   Divider
 } from "./3WKVZ2UU.js";
@@ -16,7 +16,7 @@ import {
 } from "./N7G37EKF.js";
 import {
   RichSelectChip_default
-} from "./M3AY6RXG.js";
+} from "./XTV66LZO.js";
 import {
   RichSelectItemContext,
   RichSelect_module_default
@@ -208,4 +208,4 @@ export {
   RichSelectBoxContext,
   RichSelectBox_default
 };
-//# sourceMappingURL=HKZ2TXUM.js.map
+//# sourceMappingURL=X42H56XS.js.map

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

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

package/dist/__chunks/{GGGVSGXA.js → YKFF7HLY.js}

@@ -10,4 +10,4 @@ export {
   ColorBaseGray700,
   ColorCambioWhite100
 };
-//# sourceMappingURL=GGGVSGXA.js.map
+//# sourceMappingURL=YKFF7HLY.js.map

package/dist/__chunks/{GGGVSGXA.js.map → YKFF7HLY.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Mon, 11 Nov 2024 19:36:43 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 ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB;","names":[]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 11 Feb 2025 18:11:51 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 ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB;","names":[]}

package/dist/index.css

@@ -2660,7 +2660,7 @@
 }
 
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Chip/Chip.module.css/#css-module-data */
-._chip_b9vyr_1 {
+._chip_1lns9_1 {
   border: none;
   border-radius: 8px;
   display: flex;
@@ -2670,37 +2670,41 @@
   cursor: pointer;
   box-sizing: border-box;
 }
-._disabled_b9vyr_12 {
+._disabled_1lns9_12 {
   filter: opacity(50%);
   cursor: auto;
 }
-._deselectedChip_b9vyr_17 {
+._deselectedChip_1lns9_17 {
   background-color: var(--color-cambio-gray-370);
 }
-._deselectedChipOnDarkBackground_b9vyr_21 {
+._deselectedChipOnDarkBackground_1lns9_21 {
   background-color: var(--color-cambio-gray-870);
 }
-._selectedChip_b9vyr_25 {
+._selectedChip_1lns9_25 {
   background-color: var(--color-cambio-gray-800);
 }
-._selectedChipOnDarkBackground_b9vyr_29 {
+._selectedChipOnDarkBackground_1lns9_29 {
   background-color: var(--color-cambio-gray-200);
 }
-._icon_b9vyr_33 {
+._icon_1lns9_33 {
   height: 24px !important;
   width: 24px !important;
-  color: var(--color-base-grey-900);
 }
-._selectedIcon_b9vyr_41 {
+._selectedIcon_1lns9_40 {
   color: #fff;
 }
-._sm_b9vyr_45 {
+._sm_1lns9_44 {
   height: 32px;
   min-width: 40px;
   padding: 8px 12px;
 }
-._chip_b9vyr_1:focus-visible,
-._forceFocus_b9vyr_52 {
+._md_1lns9_50 {
+  height: 48px;
+  min-width: 56px;
+  padding: 8px 16px;
+}
+._chip_1lns9_1:focus-visible,
+._forceFocus_1lns9_57 {
   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;