@cambly/syntax-core 15.6.0 → 16.1.0

package/dist/__chunks/{RD4EXZDZ.cjs → U2VVHVZ7.cjs}

@@ -1,28 +1,28 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _LNLOBEMHcjs = require('./LNLOBEMH.cjs');
+var _32CNLC3Ocjs = require('./32CNLC3O.cjs');
 
 
 var _J27AGJQBcjs = require('./J27AGJQB.cjs');
 
 
 
-var _RU5JUMYCcjs = require('./RU5JUMYC.cjs');
+var _5I2FYEA2cjs = require('./5I2FYEA2.cjs');
 
 
 
 
-var _5CSS7BNEcjs = require('./5CSS7BNE.cjs');
+var _5IOCCDL6cjs = require('./5IOCCDL6.cjs');
 
 
-var _J5NZ55OTcjs = require('./J5NZ55OT.cjs');
+var _7AVZDFCScjs = require('./7AVZDFCS.cjs');
 
 
-var _P3W4SW6Rcjs = require('./P3W4SW6R.cjs');
+var _6ZBLF7S2cjs = require('./6ZBLF7S2.cjs');
 
 
-var _ZPV4YBFXcjs = require('./ZPV4YBFX.cjs');
+var _KA6GROBDcjs = require('./KA6GROBD.cjs');
 
 
 var _3UEOKPM2cjs = require('./3UEOKPM2.cjs');
@@ -31,7 +31,7 @@ var _3UEOKPM2cjs = require('./3UEOKPM2.cjs');
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 
-var _3BGIBVCRcjs = require('./3BGIBVCR.cjs');
+var _42SXZKBGcjs = require('./42SXZKBG.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -100,11 +100,11 @@ function RichSelectList(props) {
   const disabled = !isHydrated || disabledProp;
   const overlayHandlerRef = _react.useRef.call(void 0, {});
   const selectedKeysProp = _react.useMemo.call(void 0, 
-    () => _5CSS7BNEcjs.convertSelection.call(void 0, selectedValuesProp),
+    () => _5IOCCDL6cjs.convertSelection.call(void 0, selectedValuesProp),
     [selectedValuesProp]
   );
   const defaultSelectedKeys = _react.useMemo.call(void 0, 
-    () => _5CSS7BNEcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
+    () => _5IOCCDL6cjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
     [defaultSelectedValuesProp]
   );
   const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0, 
@@ -142,7 +142,7 @@ function RichSelectList(props) {
     _reactariacomponents.Provider,
     {
       values: [
-        [_5CSS7BNEcjs.RichSelectBoxContext, { autoFocus: true }],
+        [_5IOCCDL6cjs.RichSelectBoxContext, { autoFocus: true }],
         [_J27AGJQBcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
         // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
       ],
@@ -166,11 +166,11 @@ function RichSelectList(props) {
                   (_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
                   _interactions.setInteractionModality.call(void 0, "keyboard");
                 },
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3BGIBVCRcjs.Typography_default, { size: 100, color: "gray700", children: label }) })
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _42SXZKBGcjs.Typography_default, { size: 100, color: "gray700", children: label }) })
               })
             ) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _LNLOBEMHcjs.Popover_default,
+              _32CNLC3Ocjs.Popover_default,
               {
                 ref: overlayHandlerRef,
                 disabled,
@@ -183,7 +183,7 @@ function RichSelectList(props) {
                       dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
                       role: "menu",
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _5CSS7BNEcjs.RichSelectBox_default,
+                        _5IOCCDL6cjs.RichSelectBox_default,
                         _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                           autosave,
                           selectedValues: selectedKeys,
@@ -232,7 +232,7 @@ function RichSelectList(props) {
                           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             "path",
                             {
-                              fill: errorText ? _RU5JUMYCcjs.ColorBaseDestructive700 : _RU5JUMYCcjs.ColorBaseGray800,
+                              fill: errorText ? _5I2FYEA2cjs.ColorBaseDestructive700 : _5I2FYEA2cjs.ColorBaseGray800,
                               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"
                             }
                           )
@@ -244,7 +244,7 @@ function RichSelectList(props) {
               }
             ),
             (helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _3BGIBVCRcjs.Typography_default,
+              _42SXZKBGcjs.Typography_default,
               _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                 size: 100,
                 color: errorText ? "destructive-primary" : "gray700"
@@ -259,12 +259,12 @@ function RichSelectList(props) {
   );
 }
 var RichSelectList_default = Object.assign(RichSelectList, {
-  Section: _J5NZ55OTcjs.RichSelectSection_default,
-  Chip: _ZPV4YBFXcjs.RichSelectChip_default,
-  RadioButton: _P3W4SW6Rcjs.RichSelectRadioButton_default
+  Section: _7AVZDFCScjs.RichSelectSection_default,
+  Chip: _KA6GROBDcjs.RichSelectChip_default,
+  RadioButton: _6ZBLF7S2cjs.RichSelectRadioButton_default
 });
 
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=RD4EXZDZ.cjs.map
+//# sourceMappingURL=U2VVHVZ7.cjs.map

package/dist/__chunks/{FAOJSMYY.js → UCJSVVK6.js}

@@ -7,7 +7,7 @@ import {
 } from "./65PMWIHY.js";
 import {
   Typography_default
-} from "./UXDF6ZIG.js";
+} from "./RCVW5CTF.js";
 import {
   colors_module_default
 } from "./XVUEUKXA.js";
@@ -129,4 +129,4 @@ var RadioButton_default = RadioButton;
 export {
   RadioButton_default
 };
-//# sourceMappingURL=FAOJSMYY.js.map
+//# sourceMappingURL=UCJSVVK6.js.map

package/dist/__chunks/{HM6JHSTR.cjs → UHOT5ZOH.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _ZJS5MEKEcjs = require('./ZJS5MEKE.cjs');
+var _3TF4GQNLcjs = require('./3TF4GQNL.cjs');
 
 
 var _HUIHS6RNcjs = require('./HUIHS6RN.cjs');
@@ -13,7 +13,7 @@ var _G3SXARBLcjs = require('./G3SXARBL.cjs');
 var _THM3NAFOcjs = require('./THM3NAFO.cjs');
 
 
-var _PIQO2LH2cjs = require('./PIQO2LH2.cjs');
+var _ZGOHDWOBcjs = require('./ZGOHDWOB.cjs');
 
 
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
@@ -57,7 +57,7 @@ function Modal({
         _KJLBDAZHcjs.Box_default,
         {
           "data-testid": dataTestId,
-          backgroundColor: "white",
+          backgroundColor: "gray100",
           rounding: "md",
           display: "flex",
           marginStart: 4,
@@ -79,7 +79,7 @@ function Modal({
                   __style: { top: 4, right: 4 }
                 },
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _PIQO2LH2cjs.IconButton_default,
+                  _ZGOHDWOBcjs.IconButton_default,
                   {
                     accessibilityLabel: accessibilityCloseLabel,
                     color: image ? "primary" : "tertiary",
@@ -93,7 +93,7 @@ function Modal({
             ),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _KJLBDAZHcjs.Box_default, { display: "flex", direction: "column", width: "100%", children: [
               image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { children: image }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { padding: 6, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ZJS5MEKEcjs.Heading_default, { as: "h1", size: 700, fontStyle: "serif", children: header }) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _KJLBDAZHcjs.Box_default, { padding: 6, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3TF4GQNLcjs.Heading_default, { as: "h1", size: 700, fontStyle: "serif", children: header }) }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 _KJLBDAZHcjs.Box_default,
                 {
@@ -130,4 +130,4 @@ Modal.displayName = "Modal";
 
 
 exports.Modal = Modal;
-//# sourceMappingURL=HM6JHSTR.cjs.map
+//# sourceMappingURL=UHOT5ZOH.cjs.map

package/dist/__chunks/{HM6JHSTR.cjs.map → UHOT5ZOH.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,wBAAuB;;;ACoBxK,cAsJQ,YAtJR;AATN,SAAS,MAAM,EAAE,UAAU,GAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAQ;AAAA,MAER,8BAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA,EAClH;AAEJ;AAmCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AACjB,GA4DiB;AACf,SACE,oBAAC,SAAM,QACL,8BAAC,cACC,8BAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAO;AAAA,MAClB,MAAK;AAAA,MACL,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,UAAU;AAAA,MAC1D,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,UAAU;AAAA,MAElD;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,WAAW;AAAA,UACX,WAAW;AAAA,UACX,cAAc;AAAA,UACd,UAAU;AAAA,UACV,WAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAM;AAAA,UAEN;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAS;AAAA,gBACT,2BAA2B;AAAA,kBACzB,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,gBAC9B;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,oBAAoB;AAAA,oBACpB,OAAO,QAAQ,YAAY;AAAA,oBAC3B,IAAI,QAAQ,mBAAmB;AAAA,oBAC/B,SAAS;AAAA,oBACT,MAAK;AAAA,oBACL,MAAM;AAAA;AAAA,gBACR;AAAA;AAAA,YACF;AAAA,YAEA,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,OAAM,QAC1C;AAAA,uBAAS,oBAAC,eAAK,iBAAM;AAAA,cACtB,oBAAC,eAAI,SAAS,GACZ,8BAAC,mBAAQ,IAAG,MAAK,MAAM,KAAK,WAAU,SACnC,kBACH,GACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA,kBACV,UAAU;AAAA,kBACV,cAAc,SAAS,IAAI;AAAA,kBAE1B;AAAA;AAAA,cACH;AAAA,cACC,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,KAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,SAAS;AAAA,kBAER;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,cAAc","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\";\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            onClick={(e) => e.target === e.currentTarget && onDismiss()}\n            onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n          >\n            <Box\n              data-testid={dataTestId}\n              backgroundColor=\"white\"\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              <Box\n                position=\"absolute\"\n                dangerouslySetInlineStyle={{\n                  __style: { top: 4, right: 4 },\n                }}\n              >\n                <IconButton\n                  accessibilityLabel={accessibilityCloseLabel}\n                  color={image ? \"primary\" : \"tertiary\"}\n                  on={image ? \"darkBackground\" : \"lightBackground\"}\n                  onClick={onDismiss}\n                  size=\"md\"\n                  icon={XIcon}\n                />\n              </Box>\n\n              <Box display=\"flex\" direction=\"column\" width=\"100%\">\n                {image && <Box>{image}</Box>}\n                <Box padding={6}>\n                  <Heading as=\"h1\" size={700} fontStyle=\"serif\">\n                    {header}\n                  </Heading>\n                </Box>\n                <Box\n                  height=\"100%\"\n                  overflowY=\"auto\"\n                  paddingX={6}\n                  marginBottom={footer ? 0 : 6}\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={6}\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"]}
+{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,wBAAuB;;;ACoBxK,cAsJQ,YAtJR;AATN,SAAS,MAAM,EAAE,UAAU,GAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAQ;AAAA,MAER,8BAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA,EAClH;AAEJ;AAmCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AACjB,GA4DiB;AACf,SACE,oBAAC,SAAM,QACL,8BAAC,cACC,8BAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAO;AAAA,MAClB,MAAK;AAAA,MACL,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,UAAU;AAAA,MAC1D,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,UAAU;AAAA,MAElD;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,WAAW;AAAA,UACX,WAAW;AAAA,UACX,cAAc;AAAA,UACd,UAAU;AAAA,UACV,WAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAM;AAAA,UAEN;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAS;AAAA,gBACT,2BAA2B;AAAA,kBACzB,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,gBAC9B;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,oBAAoB;AAAA,oBACpB,OAAO,QAAQ,YAAY;AAAA,oBAC3B,IAAI,QAAQ,mBAAmB;AAAA,oBAC/B,SAAS;AAAA,oBACT,MAAK;AAAA,oBACL,MAAM;AAAA;AAAA,gBACR;AAAA;AAAA,YACF;AAAA,YAEA,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,OAAM,QAC1C;AAAA,uBAAS,oBAAC,eAAK,iBAAM;AAAA,cACtB,oBAAC,eAAI,SAAS,GACZ,8BAAC,mBAAQ,IAAG,MAAK,MAAM,KAAK,WAAU,SACnC,kBACH,GACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA,kBACV,UAAU;AAAA,kBACV,cAAc,SAAS,IAAI;AAAA,kBAE1B;AAAA;AAAA,cACH;AAAA,cACC,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,KAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,SAAS;AAAA,kBAER;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,cAAc","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\";\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            onClick={(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              <Box\n                position=\"absolute\"\n                dangerouslySetInlineStyle={{\n                  __style: { top: 4, right: 4 },\n                }}\n              >\n                <IconButton\n                  accessibilityLabel={accessibilityCloseLabel}\n                  color={image ? \"primary\" : \"tertiary\"}\n                  on={image ? \"darkBackground\" : \"lightBackground\"}\n                  onClick={onDismiss}\n                  size=\"md\"\n                  icon={XIcon}\n                />\n              </Box>\n\n              <Box display=\"flex\" direction=\"column\" width=\"100%\">\n                {image && <Box>{image}</Box>}\n                <Box padding={6}>\n                  <Heading as=\"h1\" size={700} fontStyle=\"serif\">\n                    {header}\n                  </Heading>\n                </Box>\n                <Box\n                  height=\"100%\"\n                  overflowY=\"auto\"\n                  paddingX={6}\n                  marginBottom={footer ? 0 : 6}\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={6}\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"]}

package/dist/__chunks/{SSGQWZJG.cjs → WEOENL5J.cjs}

@@ -4,7 +4,7 @@
 var _J27AGJQBcjs = require('./J27AGJQB.cjs');
 
 
-var _PIQO2LH2cjs = require('./PIQO2LH2.cjs');
+var _ZGOHDWOBcjs = require('./ZGOHDWOB.cjs');
 
 
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
@@ -130,7 +130,7 @@ var ModalDialog = _react.forwardRef.call(void 0,
                         }
                       },
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _PIQO2LH2cjs.IconButton_default,
+                        _ZGOHDWOBcjs.IconButton_default,
                         {
                           onClick: () => state.close(),
                           color: "tertiary",
@@ -157,4 +157,4 @@ var ModalDialog_default = ModalDialog;
 
 
 exports.AriaModalOverlay = AriaModalOverlay; exports.AriaModal = AriaModal; exports.ModalDialog_default = ModalDialog_default;
-//# sourceMappingURL=SSGQWZJG.cjs.map
+//# sourceMappingURL=WEOENL5J.cjs.map

package/dist/__chunks/{YPL2E6XO.js → WFWY3AOV.js}

@@ -2,7 +2,7 @@
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./CUUBDICM.js";
+} from "./ATZKJ5M2.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -14,7 +14,7 @@ import {
 } from "./SPQ7DQHG.js";
 import {
   Typography_default
-} from "./UXDF6ZIG.js";
+} from "./RCVW5CTF.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -122,4 +122,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=YPL2E6XO.js.map
+//# sourceMappingURL=WFWY3AOV.js.map

package/dist/__chunks/{QAH73IJZ.js → WJMQX7BT.js}

@@ -4,7 +4,7 @@ import {
 } from "./5HEC7ASW.js";
 import {
   IconButton_default
-} from "./T6T5FJWJ.js";
+} from "./DJ6I4764.js";
 import {
   Box_default
 } from "./65PMWIHY.js";
@@ -157,4 +157,4 @@ export {
   AriaModal,
   ModalDialog_default
 };
-//# sourceMappingURL=QAH73IJZ.js.map
+//# sourceMappingURL=WJMQX7BT.js.map

package/dist/__chunks/{JAW252M7.cjs → Z66NM3NK.cjs}

@@ -7,7 +7,7 @@ var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 
-var _3BGIBVCRcjs = require('./3BGIBVCR.cjs');
+var _42SXZKBGcjs = require('./42SXZKBG.cjs');
 
 
 var _SVA2ABQQcjs = require('./SVA2ABQQ.cjs');
@@ -113,7 +113,7 @@ var RadioButton = ({
           }
         ),
         label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _3BGIBVCRcjs.Typography_default,
+          _42SXZKBGcjs.Typography_default,
           {
             size: size === "md" ? 200 : 100,
             color: error ? "destructive-primary" : "gray900",
@@ -129,4 +129,4 @@ var RadioButton_default = RadioButton;
 
 
 exports.RadioButton_default = RadioButton_default;
-//# sourceMappingURL=JAW252M7.cjs.map
+//# sourceMappingURL=Z66NM3NK.cjs.map

package/dist/__chunks/{PIQO2LH2.cjs → ZGOHDWOB.cjs}

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
+
+var _4Y7TNMFLcjs = require('./4Y7TNMFL.cjs');
+
+
 var _LZYX5BWDcjs = require('./LZYX5BWD.cjs');
 
 
@@ -17,15 +21,10 @@ var _classnames = require('classnames'); var _classnames2 = _interopRequireDefau
 var _react = require('react');
 
 // css-module:./IconButton.module.css#css-module
-var IconButton_module_default = { "iconButton": "_iconButton_1h8zl_1", "sm": "_sm_1h8zl_45", "md": "_md_1h8zl_50", "lg": "_lg_1h8zl_55", "smIcon": "_smIcon_1h8zl_60", "mdIcon": "_mdIcon_1h8zl_67", "lgIcon": "_lgIcon_1h8zl_74" };
+var IconButton_module_default = { "iconButton": "_iconButton_txjkh_1", "sm": "_sm_txjkh_46", "md": "_md_txjkh_51", "lg": "_lg_txjkh_56", "smIcon": "_smIcon_txjkh_61", "mdIcon": "_mdIcon_txjkh_68", "lgIcon": "_lgIcon_txjkh_75" };
 
 // src/IconButton/IconButton.tsx
 var _jsxruntime = require('react/jsx-runtime');
-var iconSize = {
-  sm: IconButton_module_default.smIcon,
-  md: IconButton_module_default.mdIcon,
-  lg: IconButton_module_default.lgIcon
-};
 var IconButton = _react.forwardRef.call(void 0, 
   ({
     accessibilityLabel,
@@ -58,7 +57,13 @@ var IconButton = _react.forwardRef.call(void 0,
           IconButton_module_default[size]
         ),
         ref,
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconSize[size], size })
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Icon,
+          {
+            className: _4Y7TNMFLcjs.materialIconSize[size],
+            size: _4Y7TNMFLcjs.internalIconSize[size]
+          }
+        )
       }
     );
   }
@@ -69,4 +74,4 @@ var IconButton_default = IconButton;
 
 
 exports.IconButton_default = IconButton_default;
-//# sourceMappingURL=PIQO2LH2.cjs.map
+//# sourceMappingURL=ZGOHDWOB.cjs.map

package/dist/__chunks/ZGOHDWOB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAEvB,SAAqC,kBAAkB;;;ACF6C,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;ADuH9R;AApCR,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,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,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;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,0BAAO,IAAI;AAAA,QACb;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,iBAAiB,IAAI;AAAA,YAChC,MAAM,iBAAiB,IAAI;AAAA;AAAA,QAC7B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport React, { type ComponentProps, forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\nimport {\n  materialIconSize,\n  internalIconSize,\n} from \"../Button/constants/iconSize\";\n\ntype IconButtonProps = {\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-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\";\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`: 48px\n   * * `lg`: 64px\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.\n   *\n   * Deprecated: [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   * Preferred: Syntax icon\n   */\n  icon:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\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      on = \"lightBackground\",\n      onClick,\n    }: IconButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const foregroundColorClass = foregroundColor(color, on);\n    const backgroundColorClass = backgroundColor(color, on);\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          foregroundColorClass,\n          backgroundColorClass,\n          border(color, on),\n          styles[size],\n        )}\n        ref={ref}\n      >\n        <Icon\n          className={materialIconSize[size]}\n          size={internalIconSize[size]}\n        />\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_txjkh_1\",\"sm\":\"_sm_txjkh_46\",\"md\":\"_md_txjkh_51\",\"lg\":\"_lg_txjkh_56\",\"smIcon\":\"_smIcon_txjkh_61\",\"mdIcon\":\"_mdIcon_txjkh_68\",\"lgIcon\":\"_lgIcon_txjkh_75\"}"]}

package/dist/__chunks/{VZWUWOLJ.js → ZH4QTULO.js}

@@ -6,8 +6,9 @@ import {
   loadingIconSize_default
 } from "./QSC7CAQA.js";
 import {
-  iconSize_default
-} from "./C7PW7CPK.js";
+  internalIconSize,
+  materialIconSize
+} from "./EH75XYWO.js";
 import {
   foregroundColor
 } from "./VRJAMHSI.js";
@@ -19,7 +20,7 @@ import {
 } from "./3CYMW6HT.js";
 import {
   Typography_default
-} from "./UXDF6ZIG.js";
+} from "./RCVW5CTF.js";
 
 // src/LinkButton/LinkButton.tsx
 import {
@@ -82,10 +83,10 @@ var LinkButton = forwardRef(
             {
               className: classNames(
                 Button_module_default.icon,
-                iconSize_default[size],
+                materialIconSize[size],
                 foregroundColorClass
               ),
-              size
+              size: internalIconSize[size]
             }
           ),
           !loading && text && /* @__PURE__ */ jsx(Typography_default, { size: textVariant_default[size], weight: "medium", children: /* @__PURE__ */ jsx(
@@ -100,10 +101,10 @@ var LinkButton = forwardRef(
             {
               className: classNames(
                 Button_module_default.icon,
-                iconSize_default[size],
+                materialIconSize[size],
                 foregroundColorClass
               ),
-              size
+              size: internalIconSize[size]
             }
           ),
           loading && /* @__PURE__ */ jsx(
@@ -137,4 +138,4 @@ var LinkButton_default = LinkButton;
 export {
   LinkButton_default
 };
-//# sourceMappingURL=VZWUWOLJ.js.map
+//# sourceMappingURL=ZH4QTULO.js.map

package/dist/__chunks/ZH4QTULO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:../Button/Button.module.css#css-module","css-module:./LinkButton.module.css#css-module"],"sourcesContent":["import {\n  forwardRef,\n  type HtmlHTMLAttributes,\n  type ComponentProps,\n} from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n  materialIconSize,\n  internalIconSize,\n} from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport loadingIconSize from \"../Button/constants/loadingIconSize\";\nimport styles from \"./LinkButton.module.css\";\nimport { backgroundColor } from \"../colors//backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\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-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\";\n  /**\n   * The size of the button\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\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?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\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?:\n    | React.ComponentType<{ className?: string }>\n    | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\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      loading = false,\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      on = \"lightBackground\",\n      onClick,\n    }: LinkButtonProps,\n    ref,\n  ) => {\n    const foregroundColorClass = foregroundColor(color, on);\n    const backgroundColorClass = backgroundColor(color, on);\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          foregroundColorClass,\n          backgroundColorClass,\n          border(color, on),\n          buttonStyles[size],\n          {\n            [buttonStyles.fullWidth]: fullWidth,\n            [styles.fitContent]: !fullWidth,\n            [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n            [buttonStyles.disabled]: loading,\n          },\n        )}\n        onClick={onClick}\n      >\n        {!loading && StartIcon && (\n          <StartIcon\n            className={classNames(\n              buttonStyles.icon,\n              materialIconSize[size],\n              foregroundColorClass,\n            )}\n            size={internalIconSize[size]}\n          />\n        )}\n        {!loading && text && (\n          <Typography size={textVariant[size]} weight=\"medium\">\n            <span\n              // Temporary - until we have cambio colors on Typogrphay\n              className={foregroundColorClass}\n            >\n              {text}\n            </span>\n          </Typography>\n        )}\n        {!loading && EndIcon && (\n          <EndIcon\n            className={classNames(\n              buttonStyles.icon,\n              materialIconSize[size],\n              foregroundColorClass,\n            )}\n            size={internalIconSize[size]}\n          />\n        )}\n        {loading && (\n          <svg\n            className={classNames(buttonStyles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[size]}\n            height={loadingIconSize[size]}\n          >\n            <circle\n              className={buttonStyles.loadingCircle}\n              cx=\"44\"\n              cy=\"44\"\n              r=\"20.2\"\n              fill=\"none\"\n              strokeWidth=\"3.6\"\n            />\n          </svg>\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_hjka3_1\",\"buttonGap\":\"_buttonGap_hjka3_8\",\"disabled\":\"_disabled_hjka3_42\",\"disabledPrimary\":\"_disabledPrimary_hjka3_49\",\"fullWidth\":\"_fullWidth_hjka3_53\",\"sm\":\"_sm_hjka3_57\",\"md\":\"_md_hjka3_64\",\"lg\":\"_lg_hjka3_71\",\"icon\":\"_icon_hjka3_78\",\"smIcon\":\"_smIcon_hjka3_82\",\"mdIcon\":\"_mdIcon_hjka3_89\",\"lgIcon\":\"_lgIcon_hjka3_96\",\"loading\":\"_loading_hjka3_113\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_hjka3_1\",\"loadingCircle\":\"_loadingCircle_hjka3_117\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AACP,OAAO,gBAAgB;;;ACLqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,oBAAmB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACAte,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;AFqIpL,SAuBI,KAvBJ;AAvBN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,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;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,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,QAAQ,GAAG;AAAA,UAC3B;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAiB,IAAI;AAAA,gBACrB;AAAA,cACF;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UAED,CAAC,WAAW,QACX,oBAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,QAAO,UAC1C;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,cAEV;AAAA;AAAA,UACH,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAiB,IAAI;AAAA,gBACrB;AAAA,cACF;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAa,SAAS,oBAAoB;AAAA,cAChE,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAa;AAAA,kBACxB,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,MAAK;AAAA,kBACL,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}

package/dist/colors/textColors.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _SW2JQXU6cjs = require('../__chunks/SW2JQXU6.cjs');
+var _POMJQZKJcjs = require('../__chunks/POMJQZKJ.cjs');
 require('../__chunks/SVA2ABQQ.cjs');
 require('../__chunks/WFVGNGEP.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _SW2JQXU6cjs.textColor;
+exports.default = _POMJQZKJcjs.textColor;
 //# sourceMappingURL=textColors.cjs.map

package/dist/colors/textColors.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   textColor
-} from "../__chunks/JWGD2JGX.js";
+} from "../__chunks/NVTSF5NY.js";
 import "../__chunks/XVUEUKXA.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/UWGNJENA.js";

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _M7KSUTKJcjs = require('./__chunks/M7KSUTKJ.cjs');
+var _3Z5DP4X3cjs = require('./__chunks/3Z5DP4X3.cjs');
 
 
 var _RC7EMZ6Ncjs = require('./__chunks/RC7EMZ6N.cjs');
@@ -10,44 +10,44 @@ var _RC7EMZ6Ncjs = require('./__chunks/RC7EMZ6N.cjs');
 var _5COVOOB3cjs = require('./__chunks/5COVOOB3.cjs');
 
 
-var _CDU5TH7Ycjs = require('./__chunks/CDU5TH7Y.cjs');
+var _BFODXGGOcjs = require('./__chunks/BFODXGGO.cjs');
 
 
-var _G63LXNMKcjs = require('./__chunks/G63LXNMK.cjs');
+var _L32D5WEGcjs = require('./__chunks/L32D5WEG.cjs');
 
 
-var _HM6JHSTRcjs = require('./__chunks/HM6JHSTR.cjs');
+var _UHOT5ZOHcjs = require('./__chunks/UHOT5ZOH.cjs');
 
 
-var _ZJS5MEKEcjs = require('./__chunks/ZJS5MEKE.cjs');
+var _3TF4GQNLcjs = require('./__chunks/3TF4GQNL.cjs');
 require('./__chunks/HUIHS6RN.cjs');
 require('./__chunks/G3SXARBL.cjs');
 require('./__chunks/THM3NAFO.cjs');
 
 
-var _X34FPOWIcjs = require('./__chunks/X34FPOWI.cjs');
+var _O54TUH3Vcjs = require('./__chunks/O54TUH3V.cjs');
 
 
-var _V4M5XFJNcjs = require('./__chunks/V4M5XFJN.cjs');
+var _L5RBAKANcjs = require('./__chunks/L5RBAKAN.cjs');
 
 
-var _I7BXC2FHcjs = require('./__chunks/I7BXC2FH.cjs');
+var _SNIXH2DHcjs = require('./__chunks/SNIXH2DH.cjs');
 
 
-var _RD4EXZDZcjs = require('./__chunks/RD4EXZDZ.cjs');
+var _U2VVHVZ7cjs = require('./__chunks/U2VVHVZ7.cjs');
 
 
-var _LNLOBEMHcjs = require('./__chunks/LNLOBEMH.cjs');
-require('./__chunks/SSGQWZJG.cjs');
+var _32CNLC3Ocjs = require('./__chunks/32CNLC3O.cjs');
+require('./__chunks/WEOENL5J.cjs');
 require('./__chunks/J27AGJQB.cjs');
 
 
-var _PIQO2LH2cjs = require('./__chunks/PIQO2LH2.cjs');
-require('./__chunks/RU5JUMYC.cjs');
-require('./__chunks/5CSS7BNE.cjs');
+var _ZGOHDWOBcjs = require('./__chunks/ZGOHDWOB.cjs');
+require('./__chunks/5I2FYEA2.cjs');
+require('./__chunks/5IOCCDL6.cjs');
 
 
-var _OY5QYJVAcjs = require('./__chunks/OY5QYJVA.cjs');
+var _FIPWIWEOcjs = require('./__chunks/FIPWIWEO.cjs');
 
 
 var _42SRFCQLcjs = require('./__chunks/42SRFCQL.cjs');
@@ -56,36 +56,36 @@ var _42SRFCQLcjs = require('./__chunks/42SRFCQL.cjs');
 var _C5XPZTFOcjs = require('./__chunks/C5XPZTFO.cjs');
 require('./__chunks/5JUNB754.cjs');
 require('./__chunks/3P2PWHOU.cjs');
-require('./__chunks/BHN2OODF.cjs');
-require('./__chunks/J5NZ55OT.cjs');
+require('./__chunks/4Y7TNMFL.cjs');
+require('./__chunks/7AVZDFCS.cjs');
 require('./__chunks/MF7LLV7V.cjs');
-require('./__chunks/P3W4SW6R.cjs');
-require('./__chunks/ZPV4YBFX.cjs');
+require('./__chunks/6ZBLF7S2.cjs');
+require('./__chunks/KA6GROBD.cjs');
 
 
-var _NJ7VV2CHcjs = require('./__chunks/NJ7VV2CH.cjs');
+var _4ENILLBCcjs = require('./__chunks/4ENILLBC.cjs');
 require('./__chunks/RYUXG4AS.cjs');
 
 
-var _JAW252M7cjs = require('./__chunks/JAW252M7.cjs');
+var _Z66NM3NKcjs = require('./__chunks/Z66NM3NK.cjs');
 require('./__chunks/XLUVINJW.cjs');
 
 
-var _NVHCU2COcjs = require('./__chunks/NVHCU2CO.cjs');
+var _B3ZOLJLGcjs = require('./__chunks/B3ZOLJLG.cjs');
 
 
-var _6AOPOPJTcjs = require('./__chunks/6AOPOPJT.cjs');
+var _J2D7XRV7cjs = require('./__chunks/J2D7XRV7.cjs');
 require('./__chunks/WFVGNGEP.cjs');
 
 
-var _ONTB6T6Kcjs = require('./__chunks/ONTB6T6K.cjs');
-require('./__chunks/MDQYGGZO.cjs');
-require('./__chunks/J7224OUT.cjs');
+var _KFQOJ7RGcjs = require('./__chunks/KFQOJ7RG.cjs');
+require('./__chunks/F7FFR34L.cjs');
+require('./__chunks/OJKBVPRV.cjs');
 
 
 var _3UEOKPM2cjs = require('./__chunks/3UEOKPM2.cjs');
 require('./__chunks/JVGBP6LO.cjs');
-require('./__chunks/NFSZQICF.cjs');
+require('./__chunks/B3O42V6X.cjs');
 
 
 var _KJLBDAZHcjs = require('./__chunks/KJLBDAZH.cjs');
@@ -96,7 +96,7 @@ require('./__chunks/65LHF5WD.cjs');
 require('./__chunks/JTTZCAPP.cjs');
 
 
-var _JEP2SN7Wcjs = require('./__chunks/JEP2SN7W.cjs');
+var _2PWZPH3Rcjs = require('./__chunks/2PWZPH3R.cjs');
 require('./__chunks/PLUVW6AM.cjs');
 require('./__chunks/IL22HCBF.cjs');
 
@@ -104,8 +104,8 @@ require('./__chunks/IL22HCBF.cjs');
 require('./__chunks/CHDS4D44.cjs');
 
 
-var _3BGIBVCRcjs = require('./__chunks/3BGIBVCR.cjs');
-require('./__chunks/SW2JQXU6.cjs');
+var _42SXZKBGcjs = require('./__chunks/42SXZKBG.cjs');
+require('./__chunks/POMJQZKJ.cjs');
 require('./__chunks/SVA2ABQQ.cjs');
 
 
@@ -145,5 +145,5 @@ require('./__chunks/X2SDR4SD.cjs');
 
 
 
-exports.Avatar = _RC7EMZ6Ncjs.Avatar_default; exports.AvatarGroup = _5COVOOB3cjs.AvatarGroup; exports.Badge = _M7KSUTKJcjs.Badge_default; exports.Box = _KJLBDAZHcjs.Box_default; exports.Button = _OY5QYJVAcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _G63LXNMKcjs.Card; exports.Checkbox = _CDU5TH7Ycjs.Checkbox_default; exports.Chip = _NJ7VV2CHcjs.Chip_default; exports.Divider = _42SRFCQLcjs.Divider; exports.Heading = _ZJS5MEKEcjs.Heading_default; exports.Icon = _V4M5XFJNcjs.Icon_default; exports.IconButton = _PIQO2LH2cjs.IconButton_default; exports.LinkButton = _X34FPOWIcjs.LinkButton_default; exports.Modal = _HM6JHSTRcjs.Modal; exports.Popover = _LNLOBEMHcjs.Popover_default; exports.RadioButton = _JAW252M7cjs.RadioButton_default; exports.RichSelectList = _RD4EXZDZcjs.RichSelectList_default; exports.SelectList = _I7BXC2FHcjs.SelectList; exports.Tabs = _ONTB6T6Kcjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _6AOPOPJTcjs.TextArea_default; exports.TextField = _NVHCU2COcjs.TextField; exports.ThemeProvider = _7JET5NNKcjs.ThemeProvider; exports.Tooltip = _JEP2SN7Wcjs.Tooltip_default; exports.Typography = _3BGIBVCRcjs.Typography_default;
+exports.Avatar = _RC7EMZ6Ncjs.Avatar_default; exports.AvatarGroup = _5COVOOB3cjs.AvatarGroup; exports.Badge = _3Z5DP4X3cjs.Badge_default; exports.Box = _KJLBDAZHcjs.Box_default; exports.Button = _FIPWIWEOcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _L32D5WEGcjs.Card_default; exports.Checkbox = _BFODXGGOcjs.Checkbox_default; exports.Chip = _4ENILLBCcjs.Chip_default; exports.Divider = _42SRFCQLcjs.Divider; exports.Heading = _3TF4GQNLcjs.Heading_default; exports.Icon = _L5RBAKANcjs.Icon_default; exports.IconButton = _ZGOHDWOBcjs.IconButton_default; exports.LinkButton = _O54TUH3Vcjs.LinkButton_default; exports.Modal = _UHOT5ZOHcjs.Modal; exports.Popover = _32CNLC3Ocjs.Popover_default; exports.RadioButton = _Z66NM3NKcjs.RadioButton_default; exports.RichSelectList = _U2VVHVZ7cjs.RichSelectList_default; exports.SelectList = _SNIXH2DHcjs.SelectList; exports.Tabs = _KFQOJ7RGcjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _J2D7XRV7cjs.TextArea_default; exports.TextField = _B3ZOLJLGcjs.TextField; exports.ThemeProvider = _7JET5NNKcjs.ThemeProvider; exports.Tooltip = _2PWZPH3Rcjs.Tooltip_default; exports.Typography = _42SXZKBGcjs.Typography_default;
 //# sourceMappingURL=index.cjs.map