@cambly/syntax-core 10.15.0 → 10.17.0

package/dist/__chunks/{YLJDLIHH.cjs → 364LH7BQ.cjs}

@@ -1,28 +1,31 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _XYAY2TL4cjs = require('./XYAY2TL4.cjs');
+var _ULHGK75Rcjs = require('./ULHGK75R.cjs');
 
 
 var _HUIHS6RNcjs = require('./HUIHS6RN.cjs');
 
 
-var _UYZYKU2Wcjs = require('./UYZYKU2W.cjs');
+var _5V4GT2NJcjs = require('./5V4GT2NJ.cjs');
 
 
 var _BA4JPX36cjs = require('./BA4JPX36.cjs');
 
 
-var _27K33DEMcjs = require('./27K33DEM.cjs');
+var _OG4RH3QZcjs = require('./OG4RH3QZ.cjs');
 
 
-var _6W5WRS53cjs = require('./6W5WRS53.cjs');
+var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
+
+
+var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
 
 // src/Modal/Modal.tsx
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./Modal.module.css#css-module
-var Modal_module_default = { "backdrop": "_backdrop_tqzb0_1", "backdropClassic": "_backdropClassic_tqzb0_11", "backdropCambio": "_backdropCambio_tqzb0_15", "closeButton": "_closeButton_tqzb0_19", "closeButtonClassic": "_closeButtonClassic_tqzb0_34", "closeButtonCambio": "_closeButtonCambio_tqzb0_41", "closeButtonWithImage": "_closeButtonWithImage_tqzb0_53" };
+var Modal_module_default = { "backdrop": "_backdrop_1w5vm_1", "backdropClassic": "_backdropClassic_1w5vm_11", "backdropCambio": "_backdropCambio_1w5vm_15", "closeButton": "_closeButton_1w5vm_19", "closeButtonClassic": "_closeButtonClassic_1w5vm_34", "closeButtonWithImage": "_closeButtonWithImage_1w5vm_46", "closeButtonWithImageCambio": "_closeButtonWithImageCambio_1w5vm_50" };
 
 // src/Modal/Modal.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -35,6 +38,19 @@ function XIcon({ color = "#000" }) {
     }
   ) });
 }
+function XIconCambio({ className }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      className,
+      fill: "currentColor",
+      focusable: "false",
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" })
+    }
+  );
+}
 var sizeWidth = {
   sm: 400,
   lg: 600
@@ -50,8 +66,8 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _UYZYKU2Wcjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HUIHS6RNcjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _BA4JPX36cjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  const { themeName } = _TBQR2FPScjs.useTheme.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5V4GT2NJcjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HUIHS6RNcjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _BA4JPX36cjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
       className: _classnames2.default.call(void 0, 
@@ -62,64 +78,80 @@ function Modal({
       onClick: (e) => e.target === e.currentTarget && onDismiss(),
       onKeyDown: (e) => e.key === "Escape" && onDismiss(),
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _27K33DEMcjs.Box_default,
+        _SNYEHXDAcjs.Box_default,
         {
           "data-testid": dataTestId,
           backgroundColor: "white",
-          rounding: "xl",
+          rounding: themeName === "classic" ? "xl" : "md",
           display: "flex",
           direction: "column",
+          marginStart: 4,
+          marginEnd: 4,
           minWidth: 240,
-          maxWidth: sizeWidth[size],
+          maxWidth: sizeWidth[themeName === "classic" ? size : "lg"],
           width: "100%",
           dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
           children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _27K33DEMcjs.Box_default, { position: "relative", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { position: "relative", children: themeName === "classic" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
                 "aria-label": accessibilityCloseLabel,
                 type: "button",
                 className: _classnames2.default.call(void 0, 
                   Modal_module_default.closeButton,
-                  themeName === "classic" ? Modal_module_default.closeButtonClassic : Modal_module_default.closeButtonCambio,
+                  Modal_module_default.closeButtonClassic,
                   {
-                    [Modal_module_default.closeButtonWithImage]: !!image && themeName === "classic"
+                    [Modal_module_default.closeButtonWithImage]: !!image
                   }
                 ),
                 onClick: onDismiss,
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, XIcon, { color: image ? "#fff" : "#000" })
+              }
+            ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _SNYEHXDAcjs.Box_default,
+              {
+                position: "absolute",
+                dangerouslySetInlineStyle: {
+                  __style: { top: 4, right: 4 }
+                },
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  XIcon,
+                  _OG4RH3QZcjs.IconButton_default,
                   {
-                    color: image && themeName === "classic" ? "#fff" : "#000"
+                    accessibilityLabel: accessibilityCloseLabel,
+                    color: image ? "primary" : "tertiary",
+                    on: image ? "darkBackground" : "lightBackground",
+                    size: "sm",
+                    icon: XIconCambio
                   }
                 )
               }
             ) }),
-            image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _27K33DEMcjs.Box_default, { maxHeight: 200, children: image }),
+            image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { maxHeight: 200, children: image }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              _27K33DEMcjs.Box_default,
+              _SNYEHXDAcjs.Box_default,
               {
                 display: "flex",
-                gap: 3,
+                gap: themeName === "classic" ? 3 : 4,
                 direction: "column",
-                padding: themeName === "classic" ? 9 : 3,
+                padding: themeName === "classic" ? 9 : 6,
                 children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _XYAY2TL4cjs.Heading_default,
+                    _ULHGK75Rcjs.Heading_default,
                     {
                       as: "h1",
-                      size: themeName === "classic" ? 500 : 400,
+                      size: themeName === "classic" ? 500 : 600,
                       fontStyle: themeName === "classic" ? "sans-serif" : "serif",
                       children: header
                     }
                   ),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _27K33DEMcjs.Box_default, { marginBottom: themeName === "classic" ? 4 : 0, children }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { marginBottom: themeName === "classic" ? 4 : 0, children }),
                   footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _27K33DEMcjs.Box_default,
+                    _SNYEHXDAcjs.Box_default,
                     {
                       display: "flex",
                       direction: "column",
                       gap: 3,
+                      marginTop: themeName === "classic" ? 0 : 2,
                       smDirection: "row",
                       smJustifyContent: "end",
                       lgDirection: "row",
@@ -141,4 +173,4 @@ Modal.displayName = "Modal";
 
 
 exports.Modal = Modal;
-//# sourceMappingURL=YLJDLIHH.cjs.map
+//# sourceMappingURL=364LH7BQ.cjs.map

package/dist/__chunks/364LH7BQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modal/Modal.tsx","css-module:./Modal.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import { type ReactElement } from \"react\";\nimport classnames from \"classnames\";\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 { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string }) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n      <path\n        fill=\"inherit\"\n        d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n      />\n    </svg>\n  );\n}\n\nfunction XIconCambio({ 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// Note: Only sm + lg size currently. design thinks there should only be two sizes.\n// If there IS a md size at some point, we should use the \"size\" const.\nconst sizeWidth = {\n  sm: 400,\n  lg: 600,\n} as const;\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  size = \"sm\",\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 size should be 400w x 200h.\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 size of the card\n   *\n   * Classic:\n   * * `sm`: 400px (Classic only)\n   * * `lg`: 600px\n   *\n   * Cambio:\n   * * `lg`: 600px\n   *\n   *\n   * @defaultValue sm\n   */\n  size?: keyof typeof sizeWidth;\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  const { themeName } = useTheme();\n  return (\n    <Layer zIndex={zIndex}>\n      <StopScroll>\n        <FocusTrap>\n          <div\n            className={classnames(\n              styles.backdrop,\n              themeName === \"classic\"\n                ? styles.backdropClassic\n                : styles.backdropCambio,\n            )}\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={themeName === \"classic\" ? \"xl\" : \"md\"}\n              display=\"flex\"\n              direction=\"column\"\n              marginStart={4}\n              marginEnd={4}\n              minWidth={240}\n              maxWidth={sizeWidth[themeName === \"classic\" ? size : \"lg\"]}\n              width=\"100%\"\n              dangerouslySetInlineStyle={{ __style: { overflow: \"hidden\" } }}\n            >\n              <Box position=\"relative\">\n                {themeName === \"classic\" ? (\n                  <button\n                    aria-label={accessibilityCloseLabel}\n                    type=\"button\"\n                    className={classnames(\n                      styles.closeButton,\n                      styles.closeButtonClassic,\n                      {\n                        [styles.closeButtonWithImage]: !!image,\n                      },\n                    )}\n                    onClick={onDismiss}\n                  >\n                    <XIcon color={image ? \"#fff\" : \"#000\"} />\n                  </button>\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                      size=\"sm\"\n                      icon={XIconCambio}\n                    />\n                  </Box>\n                )}\n              </Box>\n              {image && <Box maxHeight={200}>{image}</Box>}\n              <Box\n                display=\"flex\"\n                gap={themeName === \"classic\" ? 3 : 4}\n                direction=\"column\"\n                padding={themeName === \"classic\" ? 9 : 6}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={themeName === \"classic\" ? 500 : 600}\n                  fontStyle={themeName === \"classic\" ? \"sans-serif\" : \"serif\"}\n                >\n                  {header}\n                </Heading>\n                <Box marginBottom={themeName === \"classic\" ? 4 : 0}>\n                  {children}\n                </Box>\n                {footer && (\n                  <Box\n                    display=\"flex\"\n                    direction=\"column\"\n                    gap={3}\n                    marginTop={themeName === \"classic\" ? 0 : 2}\n                    smDirection=\"row\"\n                    smJustifyContent=\"end\"\n                    lgDirection=\"row\"\n                    lgJustifyContent=\"end\"\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","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_1w5vm_1\",\"backdropClassic\":\"_backdropClassic_1w5vm_11\",\"backdropCambio\":\"_backdropCambio_1w5vm_15\",\"closeButton\":\"_closeButton_1w5vm_19\",\"closeButtonClassic\":\"_closeButtonClassic_1w5vm_34\",\"closeButtonWithImage\":\"_closeButtonWithImage_1w5vm_46\",\"closeButtonWithImageCambio\":\"_closeButtonWithImageCambio_1w5vm_50\"}"]}

package/dist/__chunks/{53RQSOUJ.js → 4K4SF7RI.js}

@@ -22,10 +22,10 @@ import {
 } from "./OFW6A65B.js";
 import {
   Typography_default
-} from "./2A52YKFW.js";
+} from "./2RIIE7CU.js";
 import {
   useTheme
-} from "./FY4WHNNR.js";
+} from "./ZSHAHV4F.js";
 
 // src/LinkButton/LinkButton.tsx
 import { forwardRef } from "react";
@@ -123,4 +123,4 @@ var LinkButton_default = LinkButton;
 export {
   LinkButton_default
 };
-//# sourceMappingURL=53RQSOUJ.js.map
+//# sourceMappingURL=4K4SF7RI.js.map

package/dist/__chunks/{E7G4CMBM.js → 4LCJJZPI.js}

@@ -1,10 +1,10 @@
 "use client"
 import {
   ModalDialog_default
-} from "./GHPZTFQK.js";
+} from "./ZWTXIPP3.js";
 import {
   Dialog_default
-} from "./A7AAGKC2.js";
+} from "./E5L5ZBOW.js";
 import {
   layout_module_default
 } from "./DDUJFFG7.js";
@@ -141,4 +141,4 @@ export {
   AriaPopover,
   Popover_default
 };
-//# sourceMappingURL=E7G4CMBM.js.map
+//# sourceMappingURL=4LCJJZPI.js.map

package/dist/__chunks/{5T5R6ZMD.cjs → 4U2YGWTW.cjs}

@@ -22,13 +22,13 @@ var _HCM63U3Jcjs = require('./HCM63U3J.cjs');
 var _QWMAWIWIcjs = require('./QWMAWIWI.cjs');
 
 
-var _27K33DEMcjs = require('./27K33DEM.cjs');
+var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
 
 
-var _WGRHH5TFcjs = require('./WGRHH5TF.cjs');
+var _OWLMHTW5cjs = require('./OWLMHTW5.cjs');
 
 
-var _6W5WRS53cjs = require('./6W5WRS53.cjs');
+var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -61,7 +61,7 @@ var Button = _react.forwardRef.call(void 0,
     type = "button"
   }, ref) => {
     const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
-    const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
+    const { themeName } = _TBQR2FPScjs.useTheme.call(void 0, );
     const foregroundColorClass = themeName === "classic" ? _HCM63U3Jcjs.classicForegroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _HCM63U3Jcjs.cambioForegroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
     const backgroundColorClass = themeName === "classic" ? _QWMAWIWIcjs.classicBackgroundColor.call(void 0, _HWQUS53Mcjs.classicColor.call(void 0, color)) : _QWMAWIWIcjs.cambioBackgroundColor.call(void 0, _HWQUS53Mcjs.cambioColor.call(void 0, color), on);
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -87,9 +87,9 @@ var Button = _react.forwardRef.call(void 0,
           }
         ),
         children: [
-          !loading && StartIcon && themeName === "classic" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StartIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _54PSDUCDcjs.iconSize_default[size]) }),
-          (loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _27K33DEMcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _WGRHH5TFcjs.Typography_default,
+          !loading && StartIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StartIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _54PSDUCDcjs.iconSize_default[size]) }),
+          (loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _OWLMHTW5cjs.Typography_default,
             {
               size: themeName === "classic" ? _5JUNB754cjs.textVariant_default[size] : _5JUNB754cjs.textVariant_default[size],
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -102,7 +102,7 @@ var Button = _react.forwardRef.call(void 0,
               )
             }
           ) }),
-          !loading && EndIcon && themeName === "classic" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EndIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _54PSDUCDcjs.iconSize_default[size]) }),
+          !loading && EndIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EndIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _54PSDUCDcjs.iconSize_default[size]) }),
           loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "svg",
             {
@@ -134,4 +134,4 @@ var Button_default = Button;
 
 
 exports.Button_default = Button_default;
-//# sourceMappingURL=5T5R6ZMD.cjs.map
+//# sourceMappingURL=4U2YGWTW.cjs.map

package/dist/__chunks/4U2YGWTW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/Button.tsx","css-module:./Button.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport iconSize from \"./constants/iconSize\";\nimport textVariant from \"./constants/textVariant\";\nimport loadingIconSize from \"./constants/loadingIconSize\";\nimport styles from \"./Button.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport { classicColor, cambioColor } from \"./constants/color\";\nimport {\n  classicBackgroundColor,\n  cambioBackgroundColor,\n} from \"../colors/backgroundColor\";\nimport {\n  classicForegroundColor,\n  cambioForegroundColor,\n} from \"../colors/foregroundColor\";\n\ntype ButtonProps = {\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 text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * Classic only:\n   * * `inverse`\n   * * `success`\n   *\n   * Cambio only:\n   * * `success-primary`\n   * * `success-secondary`\n   * * `success-tertiary`\n   *\n   * @defaultValue \"primary\"\n   */\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"destructive-primary\"\n    | \"destructive-secondary\"\n    | \"destructive-tertiary\"\n    | \"branded\"\n    | \"success\"\n    | \"success-primary\"\n    | \"success-secondary\"\n    | \"success-tertiary\"\n    | \"inverse\";\n  /**\n   * The size of the button\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\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   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\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?: React.ComponentType<{ className?: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className?: string }>;\n  /**\n   * Indicate whether the button renders on a light or dark background. Changes the color of the button (Cambio only)\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   * The type you want to set for the primitive `<button/>`\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n};\n\n/**\n * [Button](https://cambly-syntax.vercel.app/?path=/docs/components-button--docs) is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      \"data-testid\": dataTestId,\n      text,\n      loadingText,\n      color = \"primary\",\n      size = \"md\",\n      accessibilityLabel,\n      disabled = false,\n      loading = false,\n      fullWidth = false,\n      startIcon: StartIcon,\n      endIcon: EndIcon,\n      on = \"lightBackground\",\n      onClick,\n      tooltip,\n      type = \"button\",\n    }: ButtonProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const { themeName } = useTheme();\n\n    const foregroundColorClass =\n      themeName === \"classic\"\n        ? classicForegroundColor(classicColor(color))\n        : cambioForegroundColor(cambioColor(color), on);\n\n    const backgroundColorClass =\n      themeName === \"classic\"\n        ? classicBackgroundColor(classicColor(color))\n        : cambioBackgroundColor(cambioColor(color), on);\n\n    return (\n      <button\n        data-testid={dataTestId}\n        ref={ref}\n        aria-label={accessibilityLabel}\n        type={type}\n        title={tooltip}\n        disabled={!isHydrated || disabled || loading}\n        onClick={onClick}\n        className={classNames(\n          styles.button,\n          foregroundColorClass,\n          backgroundColorClass,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n          {\n            [styles.fullWidth]: fullWidth,\n            [styles.buttonGap]:\n              themeName === \"classic\" && (size === \"lg\" || size === \"md\"),\n            [styles.secondaryBorder]:\n              themeName === \"classic\" && color === \"secondary\",\n            [styles.secondaryDestructiveBorder]:\n              themeName === \"classic\" && color === \"destructive-secondary\",\n          },\n        )}\n      >\n        {!loading && StartIcon && (\n          <StartIcon className={classNames(styles.icon, iconSize[size])} />\n        )}\n        {((loading && loadingText) || (!loading && text)) && (\n          <Box paddingX={1}>\n            <Typography\n              size={\n                themeName === \"classic\" ? textVariant[size] : textVariant[size]\n              }\n            >\n              <span\n                // Temporary - until we have cambio colors on Typogrphay\n                className={foregroundColorClass}\n                style={{ fontWeight: 500 }}\n              >\n                {loading ? loadingText : text}\n              </span>\n            </Typography>\n          </Box>\n        )}\n        {!loading && EndIcon && (\n          <EndIcon className={classNames(styles.icon, iconSize[size])} />\n        )}\n        {loading && (\n          <svg\n            className={classNames(styles.loading, foregroundColorClass)}\n            viewBox=\"22 22 44 44\"\n            width={loadingIconSize[size]}\n            height={loadingIconSize[size]}\n          >\n            <circle\n              className={styles.loadingCircle}\n              cx=\"44\"\n              cy=\"44\"\n              r=\"20.2\"\n              fill=\"none\"\n              strokeWidth=\"3.6\"\n            />\n          </svg>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n\nexport default Button;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_ddq3j_1\",\"buttonGap\":\"_buttonGap_ddq3j_9\",\"fullWidth\":\"_fullWidth_ddq3j_50\",\"sm\":\"_sm_ddq3j_54\",\"md\":\"_md_ddq3j_61\",\"lg\":\"_lg_ddq3j_68\",\"smCambio\":\"_smCambio_ddq3j_75\",\"mdCambio\":\"_mdCambio_ddq3j_82\",\"lgCambio\":\"_lgCambio_ddq3j_89\",\"icon\":\"_icon_ddq3j_96\",\"smIcon\":\"_smIcon_ddq3j_100\",\"mdIcon\":\"_mdIcon_ddq3j_107\",\"lgIcon\":\"_lgIcon_ddq3j_114\",\"secondaryBorder\":\"_secondaryBorder_ddq3j_121\",\"secondaryDestructiveBorder\":\"_secondaryDestructiveBorder_ddq3j_125\",\"loading\":\"_loading_ddq3j_139\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_ddq3j_1\",\"loadingCircle\":\"_loadingCircle_ddq3j_143\"}"]}

package/dist/__chunks/{VL5ONCQD.cjs → 577X7X3J.cjs}

@@ -15,6 +15,9 @@ var _S5QHTHSTcjs = require('./S5QHTHST.cjs');
 
 var _X2LNODY7cjs = require('./X2LNODY7.cjs');
 
+
+var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
+
 // src/Dialog/Dialog.tsx
 
 
@@ -50,6 +53,7 @@ var Dialog = _react.forwardRef.call(void 0, function Dialog2(props, ref) {
     size = "md"
   } = props;
   const { padding } = _react.useContext.call(void 0, DialogContext);
+  const { themeName } = _TBQR2FPScjs.useTheme.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _reactariacomponents.Dialog,
     {
@@ -66,7 +70,7 @@ var Dialog = _react.forwardRef.call(void 0, function Dialog2(props, ref) {
         _X2LNODY7cjs.colors_module_default.whiteBackgroundColor,
         _PLUVW6AMcjs.padding_module_default[`paddingX${padding != null ? padding : sizeToPadding[size]}`],
         _PLUVW6AMcjs.padding_module_default[`paddingY${padding != null ? padding : sizeToPadding[size]}`],
-        _S5QHTHSTcjs.rounding_module_default[`rounding${sizeToRounding[size]}`],
+        _S5QHTHSTcjs.rounding_module_default[themeName === "classic" ? `rounding${sizeToRounding[size]}` : "roundingmdCambio"],
         elevation_module_default.elevation400BoxShadow,
         _MF7LLV7Vcjs.layout_module_default.fullMaxHeight,
         _MF7LLV7Vcjs.layout_module_default.visibilityVisible,
@@ -82,4 +86,4 @@ var Dialog_default = Dialog;
 
 
 exports.DialogContext = DialogContext; exports.Dialog_default = Dialog_default;
-//# sourceMappingURL=VL5ONCQD.cjs.map
+//# sourceMappingURL=577X7X3J.cjs.map

package/dist/__chunks/577X7X3J.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"names":["Dialog"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AA8DnB;AA7CJ,IAAM,iBAAqD;AAAA,EACzD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAC5C,QAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBACE,cAAc,YACT,WAAW,eAAe,IAAI,MAC/B,kBACN;AAAA,QACA,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ","sourcesContent":["import React, {\n  type ReactNode,\n  forwardRef,\n  type ReactElement,\n  useContext,\n  type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\ntype DialogRounding = \"lg\" | \"xl\";\nexport type DialogProps = {\n  /** Test id for the floating dialog */\n  \"data-testid\"?: string;\n  /** aria-label for the dialog */\n  accessibilityLabel?: string;\n  /** Content to be shown inside the dialog. */\n  children?: ReactNode;\n  /** Optional size of the dialog box */\n  size?: DialogSize;\n};\n\nconst sizeToRounding: Record<DialogSize, DialogRounding> = {\n  sm: \"lg\",\n  md: \"lg\",\n  lg: \"xl\",\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n  sm: 4,\n  md: 5,\n  lg: 6,\n};\n\ntype DialogContextType = {\n  /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n  padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n  <Dialog accessibilityLabel=\"Select some options\">\n    <Box padding={2} maxWidth={400}>\n      ... some content goes here\n    </Box>\n  </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref,\n): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    accessibilityLabel,\n    children,\n    size = \"md\",\n  } = props;\n\n  const { padding } = useContext(DialogContext);\n  const { themeName } = useTheme();\n\n  return (\n    <ReactAriaDialog\n      ref={ref}\n      data-testid={dataTestId}\n      // first thing screen reader reads\n      // e.g. \"<this was the label prop>, dialog, 4 items...\"\n      aria-label={accessibilityLabel}\n      className={classNames([\n        boxStyles.box,\n        boxStyles.flex,\n        boxStyles.column,\n        boxStyles.gap4,\n        boxStyles.relative,\n        boxStyles.overflowauto,\n        colorStyles.whiteBackgroundColor,\n        paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n        paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n        roundingStyles[\n          themeName === \"classic\"\n            ? (`rounding${sizeToRounding[size]}` as const)\n            : \"roundingmdCambio\"\n        ],\n        elevationStyles.elevation400BoxShadow,\n        layoutStyles.fullMaxHeight,\n        layoutStyles.visibilityVisible,\n        styles.dialog,\n      ])}\n    >\n      {children}\n    </ReactAriaDialog>\n  );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1bme6_1\"}"]}

package/dist/__chunks/{KY6FT2UM.js → 5ODCKBUB.js}

@@ -1,13 +1,13 @@
 "use client"
 import {
   Box_default
-} from "./YGKZCJF5.js";
+} from "./KU5UT5RY.js";
 import {
   Typography_default
-} from "./2A52YKFW.js";
+} from "./2RIIE7CU.js";
 import {
   useTheme
-} from "./FY4WHNNR.js";
+} from "./ZSHAHV4F.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -19,7 +19,7 @@ import {
 import classNames from "classnames";
 
 // css-module:./TextField.module.css#css-module
-var TextField_module_default = { "textfield": "_textfield_15iys_1", "textfieldClassic": "_textfieldClassic_15iys_10", "textfieldCambio": "_textfieldCambio_15iys_14", "label": "_label_15iys_29", "labelCambio": "_labelCambio_15iys_33", "labelCambioTextfield": "_labelCambioTextfield_15iys_42", "sm": "_sm_15iys_46", "smCambio": "_smCambio_15iys_53", "mdCambio": "_mdCambio_15iys_57", "lgCambio": "_lgCambio_15iys_61", "heightCambio": "_heightCambio_15iys_65", "smHeight": "_smHeight_15iys_69", "md": "_md_15iys_57", "mdHeight": "_mdHeight_15iys_80", "lg": "_lg_15iys_61", "lgHeight": "_lgHeight_15iys_91", "inputError": "_inputError_15iys_95", "inputErrorCambio": "_inputErrorCambio_15iys_105" };
+var TextField_module_default = { "textfield": "_textfield_kbdbw_1", "textfieldClassic": "_textfieldClassic_kbdbw_10", "textfieldCambio": "_textfieldCambio_kbdbw_14", "label": "_label_kbdbw_29", "sm": "_sm_kbdbw_33", "mdCambio": "_mdCambio_kbdbw_40", "heightCambio": "_heightCambio_kbdbw_44", "smHeight": "_smHeight_kbdbw_48", "md": "_md_kbdbw_40", "mdHeight": "_mdHeight_kbdbw_59", "lg": "_lg_kbdbw_63", "lgHeight": "_lgHeight_kbdbw_70", "inputError": "_inputError_kbdbw_74", "inputErrorCambio": "_inputErrorCambio_kbdbw_84" };
 
 // src/TextField/TextField.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -54,19 +54,8 @@ function TextField({
           opacity: disabled ? 0.5 : 1
         }
       },
-      position: themeName === "cambio" ? "relative" : void 0,
       children: [
-        label && /* @__PURE__ */ jsx(
-          "label",
-          {
-            className: classNames(
-              themeName === "classic" ? TextField_module_default.label : TextField_module_default.labelCambio,
-              themeName === "cambio" && TextField_module_default.labelCambioTextfield
-            ),
-            htmlFor: inputId,
-            children: /* @__PURE__ */ jsx(Box_default, { paddingX: themeName === "classic" ? 1 : 3, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) })
-          }
-        ),
+        label && /* @__PURE__ */ jsx("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -75,7 +64,7 @@ function TextField({
               TextField_module_default.textfield,
               themeName === "classic" ? TextField_module_default.textfieldClassic : TextField_module_default.textfieldCambio,
               themeName === "classic" && TextField_module_default[size],
-              themeName === "cambio" ? TextField_module_default[`${size}Cambio`] : void 0,
+              themeName === "cambio" ? TextField_module_default.mdCambio : void 0,
               themeName === "classic" ? TextField_module_default[`${size}Height`] : TextField_module_default.heightCambio,
               {
                 [themeName === "classic" ? TextField_module_default.inputError : TextField_module_default.inputErrorCambio]: errorText
@@ -90,7 +79,7 @@ function TextField({
             value
           }
         ),
-        (helperText || errorText) && /* @__PURE__ */ jsx(Box_default, { paddingX: themeName === "classic" ? 1 : 0, children: /* @__PURE__ */ jsx(
+        (helperText || errorText) && /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(
           Typography_default,
           {
             size: 100,
@@ -106,4 +95,4 @@ function TextField({
 export {
   TextField
 };
-//# sourceMappingURL=KY6FT2UM.js.map
+//# sourceMappingURL=5ODCKBUB.js.map

package/dist/__chunks/5ODCKBUB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextField/TextField.tsx","css-module:./TextField.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  type HTMLInputTypeAttribute,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TextField.module.css\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\n/**\n * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.\n */\nexport default function TextField({\n  autoComplete,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText = \"\",\n  helperText = \"\",\n  id,\n  label,\n  onChange,\n  placeholder = \"\",\n  size = \"md\",\n  type = \"text\",\n  value = \"\",\n}: {\n  /**\n   * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.\n   *\n   * Feel free to add new values from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) as needed\n   */\n  autoComplete?: \"current-password\" | \"new-password\" | \"off\" | \"on\" | \"email\";\n  /**\n   * A data-testid to make querying for the TextField easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextField will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextField if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextField\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextField visible label\n   */\n  label: string;\n  /**\n   * The callback to be called the input changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Optional TextField placeholder text\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextField\n   *\n   * Classic:\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * Cambio:\n   * * `md`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Input type of the TextField\n   *\n   * See [full list of input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)\n   */\n  type?: HTMLInputTypeAttribute;\n  /**\n   * Value of the TextField\n   */\n  value: string;\n}): ReactElement {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const reactId = useId();\n  const { themeName } = useTheme();\n  const inputId = id ?? reactId;\n\n  return (\n    <Box\n      display=\"flex\"\n      direction=\"column\"\n      gap={2}\n      width=\"100%\"\n      dangerouslySetInlineStyle={{\n        __style: {\n          opacity: disabled ? 0.5 : 1,\n        },\n      }}\n    >\n      {label && (\n        <label className={styles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <input\n        autoComplete={autoComplete}\n        className={classNames(\n          styles.textfield,\n          themeName === \"classic\"\n            ? styles.textfieldClassic\n            : styles.textfieldCambio,\n          themeName === \"classic\" && styles[size],\n          themeName === \"cambio\" ? styles.mdCambio : undefined,\n          themeName === \"classic\"\n            ? styles[`${size}Height`]\n            : styles.heightCambio,\n          {\n            [themeName === \"classic\"\n              ? styles.inputError\n              : styles.inputErrorCambio]: errorText,\n          },\n        )}\n        data-testid={dataTestId}\n        disabled={disabled}\n        id={inputId}\n        type={type}\n        onChange={onChange}\n        placeholder={placeholder}\n        value={value}\n      />\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText || helperText}\n          </Typography>\n        </Box>\n      )}\n    </Box>\n  );\n}\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_kbdbw_1\",\"textfieldClassic\":\"_textfieldClassic_kbdbw_10\",\"textfieldCambio\":\"_textfieldCambio_kbdbw_14\",\"label\":\"_label_kbdbw_29\",\"sm\":\"_sm_kbdbw_33\",\"mdCambio\":\"_mdCambio_kbdbw_40\",\"heightCambio\":\"_heightCambio_kbdbw_44\",\"smHeight\":\"_smHeight_kbdbw_48\",\"md\":\"_md_kbdbw_40\",\"mdHeight\":\"_mdHeight_kbdbw_59\",\"lg\":\"_lg_kbdbw_63\",\"lgHeight\":\"_lgHeight_kbdbw_70\",\"inputError\":\"_inputError_kbdbw_74\",\"inputErrorCambio\":\"_inputErrorCambio_kbdbw_84\"}"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL2E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,oBAAmB,8BAA6B,mBAAkB,6BAA4B,SAAQ,mBAAkB,MAAK,gBAAe,YAAW,sBAAqB,gBAAe,0BAAyB,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,MAAK,gBAAe,YAAW,sBAAqB,cAAa,wBAAuB,oBAAmB,6BAA4B;;;ADqG9jB,SAcQ,KAdR;AAtFW,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV,GAiEiB;AACf,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,UAAU,MAAM;AACtB,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,QAAM,UAAU,kBAAM;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAM;AAAA,MACN,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,WAAW,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,iBACC,oBAAC,WAAM,WAAW,yBAAO,OAAO,SAAS,SACvC,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW;AAAA,cACT,yBAAO;AAAA,cACP,cAAc,YACV,yBAAO,mBACP,yBAAO;AAAA,cACX,cAAc,aAAa,yBAAO,IAAI;AAAA,cACtC,cAAc,WAAW,yBAAO,WAAW;AAAA,cAC3C,cAAc,YACV,yBAAO,GAAG,YAAY,IACtB,yBAAO;AAAA,cACX;AAAA,gBACE,CAAC,cAAc,YACX,yBAAO,aACP,yBAAO,gBAAgB,GAAG;AAAA,cAChC;AAAA,YACF;AAAA,YACA,eAAa;AAAA,YACb;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,uBAAa;AAAA;AAAA,QAChB,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/__chunks/{UYZYKU2W.cjs → 5V4GT2NJ.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _27K33DEMcjs = require('./27K33DEM.cjs');
+var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
 
 // src/Modal/Layer.tsx
 var _reactdom = require('react-dom');
@@ -12,7 +12,7 @@ function Layer({
 }) {
   return typeof document !== "undefined" ? _reactdom.createPortal.call(void 0, 
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _27K33DEMcjs.Box_default,
+      _SNYEHXDAcjs.Box_default,
       {
         "data-testid": "syntax-layer",
         position: "fixed",
@@ -29,4 +29,4 @@ function Layer({
 
 
 exports.Layer = Layer;
-//# sourceMappingURL=UYZYKU2W.cjs.map
+//# sourceMappingURL=5V4GT2NJ.cjs.map

package/dist/__chunks/{CXD34CNP.cjs → 635VMAFB.cjs}

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _LLI3KZARcjs = require('./LLI3KZAR.cjs');
+var _ZIBKOWAKcjs = require('./ZIBKOWAK.cjs');
 
 
-var _27K33DEMcjs = require('./27K33DEM.cjs');
+var _SNYEHXDAcjs = require('./SNYEHXDA.cjs');
 
 
-var _6W5WRS53cjs = require('./6W5WRS53.cjs');
+var _TBQR2FPScjs = require('./TBQR2FPS.cjs');
 
 
 var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
@@ -16,25 +16,28 @@ var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // css-module:./Avatar.module.css#css-module
-var Avatar_module_default = { "avatar": "_avatar_1rbb4_1", "avatarImage": "_avatarImage_1rbb4_5", "avatarImageClassic": "_avatarImageClassic_1rbb4_13", "avatarImageOutlineCambio": "_avatarImageOutlineCambio_1rbb4_17", "sm": "_sm_1rbb4_21", "md": "_md_1rbb4_26", "lg": "_lg_1rbb4_31", "xl": "_xl_1rbb4_36", "smCambio": "_smCambio_1rbb4_41", "mdCambio": "_mdCambio_1rbb4_46", "lgCambio": "_lgCambio_1rbb4_51", "xlCambio": "_xlCambio_1rbb4_56" };
+var Avatar_module_default = { "avatar": "_avatar_1ombg_1", "avatarImage": "_avatarImage_1ombg_5", "avatarImageClassic": "_avatarImageClassic_1ombg_13", "avatarImageOutlineCambio": "_avatarImageOutlineCambio_1ombg_17", "xs": "_xs_1ombg_21", "sm": "_sm_1ombg_26", "md": "_md_1ombg_31", "lg": "_lg_1ombg_36", "xl": "_xl_1ombg_41", "xsCambio": "_xsCambio_1ombg_46", "smCambio": "_smCambio_1ombg_51", "mdCambio": "_mdCambio_1ombg_56", "lgCambio": "_lgCambio_1ombg_61", "xlCambio": "_xlCambio_1ombg_66" };
 
 // src/Avatar/Avatar.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var sizeToIconStyles = {
+  xs: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
   sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
   md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },
   lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },
   xl: { bottom: 12, marginInlineEnd: 12, height: 16, width: 16 }
 };
 var sizeToMarginClassic = {
+  xs: -16,
   sm: -16,
   md: -28,
   lg: -48,
   xl: -88
 };
 var sizeToMarginCambio = {
-  sm: -12,
-  md: -20,
+  xs: -10,
+  sm: -14,
+  md: -22,
   lg: -28,
   xl: -28
 };
@@ -45,7 +48,7 @@ function AvatarInternal({
   size = "md",
   src
 }) {
-  const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
+  const { themeName } = _TBQR2FPScjs.useTheme.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
@@ -67,8 +70,8 @@ function AvatarInternal({
             )
           }
         ),
-        icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _27K33DEMcjs.Box_default, { display: "flex", position: "relative", justifyContent: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _27K33DEMcjs.Box_default,
+        icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SNYEHXDAcjs.Box_default, { display: "flex", position: "relative", justifyContent: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _SNYEHXDAcjs.Box_default,
           {
             display: "flex",
             alignItems: "center",
@@ -94,11 +97,11 @@ var Avatar = ({
   size = "md",
   src
 }) => {
-  const avatarGroupContext = _LLI3KZARcjs.useAvatarGroup.call(void 0, );
-  const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
+  const avatarGroupContext = _ZIBKOWAKcjs.useAvatarGroup.call(void 0, );
+  const { themeName } = _TBQR2FPScjs.useTheme.call(void 0, );
   if (avatarGroupContext !== null) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _27K33DEMcjs.Box_default,
+      _SNYEHXDAcjs.Box_default,
       {
         position: "relative",
         dangerouslySetInlineStyle: {
@@ -107,7 +110,7 @@ var Avatar = ({
           }
         },
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _27K33DEMcjs.Box_default,
+          _SNYEHXDAcjs.Box_default,
           {
             display: "flex",
             alignItems: "center",
@@ -144,4 +147,4 @@ var Avatar_default = Avatar;
 
 
 exports.Avatar_default = Avatar_default;
-//# sourceMappingURL=CXD34CNP.cjs.map
+//# sourceMappingURL=635VMAFB.cjs.map

package/dist/__chunks/635VMAFB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import { type ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\nimport Box from \"../Box/Box\";\nimport { useAvatarGroup } from \"../AvatarGroup/AvatarGroup\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst sizeToIconStyles = {\n  xs: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n  sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n  md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },\n  lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },\n  xl: { bottom: 12, marginInlineEnd: 12, height: 16, width: 16 },\n} as const;\n\nconst sizeToMarginClassic = {\n  xs: -16,\n  sm: -16,\n  md: -28,\n  lg: -48,\n  xl: -88,\n} as const;\n\nconst sizeToMarginCambio = {\n  xs: -10,\n  sm: -14,\n  md: -22,\n  lg: -28,\n  xl: -28,\n} as const;\n\nfunction AvatarInternal({\n  accessibilityLabel,\n  icon,\n  outline,\n  size = \"md\",\n  src,\n}: {\n  accessibilityLabel: string;\n  icon?: React.ReactElement;\n  outline?: boolean;\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  src: string;\n}): ReactElement {\n  const { themeName } = useTheme();\n\n  return (\n    <div\n      className={classNames(\n        styles.avatar,\n        themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n      )}\n    >\n      <img\n        alt={accessibilityLabel}\n        src={src}\n        className={classNames(\n          styles.avatarImage,\n          themeName === \"classic\" && styles.avatarImageClassic,\n          themeName === \"cambio\" && outline && styles.avatarImageOutlineCambio,\n          themeName === \"classic\" ? styles[size] : styles[`${size}Cambio`],\n        )}\n      />\n      {icon && (\n        <Box display=\"flex\" position=\"relative\" justifyContent=\"end\">\n          <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            position=\"absolute\"\n            backgroundColor=\"white\"\n            dangerouslySetInlineStyle={{\n              __style: {\n                border: \"1px solid white\",\n                ...sizeToIconStyles[size],\n              },\n            }}\n            rounding=\"full\"\n          >\n            {icon}\n          </Box>\n        </Box>\n      )}\n    </div>\n  );\n}\n\n/**\n * [Avatar](https://cambly-syntax.vercel.app/?path=/docs/components-avatar--docs) is a circular image that represents a user.\n */\nconst Avatar = ({\n  accessibilityLabel,\n  icon,\n  size = \"md\",\n  src,\n}: {\n  /**\n   * Alt text to use for the image.\n   * This should describe the image to people using screen readers.\n   */\n  accessibilityLabel: string;\n  /**\n   * optional icon that appears on the bottom corner of the avatar\n   */\n  icon?: React.ReactElement;\n  /**\n   * Size of the avatar.\n   *\n   * Classic:\n   * * `sm`: 24px\n   * * `md`: 40px\n   * * `lg`: 72px\n   * * `xl`: 128px\n   *\n   * Cambio:\n   * * `xs`: 24px (Cambio only)\n   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   * * `xl`: 64px (deprecated, maps to `lg` in Cambio)\n   *\n   * @defaultValue `md`\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\n}): JSX.Element => {\n  const avatarGroupContext = useAvatarGroup();\n  const { themeName } = useTheme();\n\n  if (avatarGroupContext !== null) {\n    return (\n      <Box\n        position=\"relative\"\n        dangerouslySetInlineStyle={{\n          __style: {\n            marginInlineEnd:\n              themeName === \"cambio\"\n                ? sizeToMarginCambio[avatarGroupContext.size]\n                : sizeToMarginClassic[avatarGroupContext.size],\n          },\n        }}\n      >\n        <Box\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          backgroundColor=\"white\"\n          rounding=\"full\"\n        >\n          <AvatarInternal\n            accessibilityLabel={accessibilityLabel}\n            icon={icon}\n            outline={themeName === \"cambio\"}\n            size={avatarGroupContext.size}\n            src={src}\n          />\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <AvatarInternal\n      accessibilityLabel={accessibilityLabel}\n      icon={icon}\n      size={size}\n      src={src}\n    />\n  );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_1ombg_1\",\"avatarImage\":\"_avatarImage_1ombg_5\",\"avatarImageClassic\":\"_avatarImageClassic_1ombg_13\",\"avatarImageOutlineCambio\":\"_avatarImageOutlineCambio_1ombg_17\",\"xs\":\"_xs_1ombg_21\",\"sm\":\"_sm_1ombg_26\",\"md\":\"_md_1ombg_31\",\"lg\":\"_lg_1ombg_36\",\"xl\":\"_xl_1ombg_41\",\"xsCambio\":\"_xsCambio_1ombg_46\",\"smCambio\":\"_smCambio_1ombg_51\",\"mdCambio\":\"_mdCambio_1ombg_56\",\"lgCambio\":\"_lgCambio_1ombg_61\",\"xlCambio\":\"_xlCambio_1ombg_66\"}"]}