@cambly/syntax-core 15.2.0 → 15.4.0

package/dist/__chunks/GZXNR3JK.js

@@ -0,0 +1,53 @@
+"use client"
+import {
+  TabLink_default
+} from "./LMZJHS5E.js";
+import {
+  TabButton
+} from "./VC5WSVCY.js";
+import {
+  Tabs_module_default
+} from "./5JQ6C2XV.js";
+import {
+  Box_default
+} from "./65PMWIHY.js";
+
+// src/Tabs/Tabs.tsx
+import classnames from "classnames";
+import { jsx } from "react/jsx-runtime";
+function Tabs({
+  children,
+  accessibilityLabel,
+  on = "lightBackground"
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": accessibilityLabel,
+      className: classnames({
+        [Tabs_module_default.tabContainerlightBackground]: on === "lightBackground",
+        [Tabs_module_default.tabContainerDarkBackground]: on === "darkBackground"
+      }),
+      children: /* @__PURE__ */ jsx(
+        Box_default,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "start",
+          width: "100%",
+          gap: 8,
+          height: 56,
+          children
+        }
+      )
+    }
+  );
+}
+Tabs.Button = TabButton;
+Tabs.Link = TabLink_default;
+
+export {
+  Tabs
+};
+//# sourceMappingURL=GZXNR3JK.js.map

package/dist/__chunks/GZXNR3JK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport classnames from \"classnames\";\nimport TabButton from \"./TabButton\";\nimport TabLink from \"./TabLink\";\nimport styles from \"./Tabs.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [Tabs](https://cambly-syntax.vercel.app/?path=/docs/components-tabs--docs) are used to organize content into different sections.\n */\nexport default function Tabs({\n  children,\n  accessibilityLabel,\n  on = \"lightBackground\",\n}: {\n  /**\n   * The Tabs to display. Each Tab should be a `Tabs.Button` or a `Tabs.Link`.\n   * Only use `Tabs.Link` for clicking tab that update the URL upon selection. Otherwise, use `Tabs.Button`.\n   */\n  children: ReactNode;\n  /**\n   * Accessibility label for the Tabs container.\n   */\n  accessibilityLabel: string;\n  /**\n   * Indicate whether the Tabs render on a light or dark background.\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n}): JSX.Element {\n  return (\n    <div\n      role=\"tablist\"\n      aria-label={accessibilityLabel}\n      className={classnames({\n        [styles.tabContainerlightBackground]: on === \"lightBackground\",\n        [styles.tabContainerDarkBackground]: on === \"darkBackground\",\n      })}\n    >\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"start\"\n        width=\"100%\"\n        gap={8}\n        height={56}\n      >\n        {children}\n      </Box>\n    </div>\n  );\n}\n\nTabs.Button = TabButton;\nTabs.Link = TabLink;\n"],"mappings":";;;;;;;;;;;;;;;AACA,OAAO,gBAAgB;AAuCjB;AA9BS,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,KAAK;AACP,GAgBgB;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,CAAC,oBAAO,2BAA2B,GAAG,OAAO;AAAA,QAC7C,CAAC,oBAAO,0BAA0B,GAAG,OAAO;AAAA,MAC9C,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,OAAM;AAAA,UACN,KAAK;AAAA,UACL,QAAQ;AAAA,UAEP;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,KAAK,SAAS;AACd,KAAK,OAAO;","names":[]}

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

@@ -1,22 +1,22 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _THM3NAFOcjs = require('./THM3NAFO.cjs');
+var _ZJS5MEKEcjs = require('./ZJS5MEKE.cjs');
 
 
-var _47PGLBOScjs = require('./47PGLBOS.cjs');
+var _HUIHS6RNcjs = require('./HUIHS6RN.cjs');
 
 
-var _HUIHS6RNcjs = require('./HUIHS6RN.cjs');
+var _G3SXARBLcjs = require('./G3SXARBL.cjs');
 
 
-var _EZUXET6Vcjs = require('./EZUXET6V.cjs');
+var _THM3NAFOcjs = require('./THM3NAFO.cjs');
 
 
-var _63XQSPT7cjs = require('./63XQSPT7.cjs');
+var _PIQO2LH2cjs = require('./PIQO2LH2.cjs');
 
 
-var _FESAFV44cjs = require('./FESAFV44.cjs');
+var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 // css-module:./Modal.module.css#css-module
 var Modal_module_default = { "backdrop": "_backdrop_17lbk_1", "closeButton": "_closeButton_17lbk_10" };
@@ -46,7 +46,7 @@ function Modal({
   zIndex = 1,
   "data-testid": dataTestId
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _EZUXET6Vcjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HUIHS6RNcjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _THM3NAFOcjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _G3SXARBLcjs.Layer, { zIndex, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HUIHS6RNcjs.StopScroll, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _THM3NAFOcjs.FocusTrap, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
       className: Modal_module_default.backdrop,
@@ -54,7 +54,7 @@ function Modal({
       onClick: (e) => e.target === e.currentTarget && onDismiss(),
       onKeyDown: (e) => e.key === "Escape" && onDismiss(),
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _FESAFV44cjs.Box_default,
+        _KJLBDAZHcjs.Box_default,
         {
           "data-testid": dataTestId,
           backgroundColor: "white",
@@ -72,14 +72,14 @@ function Modal({
           width: "100%",
           children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _FESAFV44cjs.Box_default,
+              _KJLBDAZHcjs.Box_default,
               {
                 position: "absolute",
                 dangerouslySetInlineStyle: {
                   __style: { top: 4, right: 4 }
                 },
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _63XQSPT7cjs.IconButton_default,
+                  _PIQO2LH2cjs.IconButton_default,
                   {
                     accessibilityLabel: accessibilityCloseLabel,
                     color: image ? "primary" : "tertiary",
@@ -91,11 +91,11 @@ function Modal({
                 )
               }
             ),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _FESAFV44cjs.Box_default, { display: "flex", direction: "column", width: "100%", children: [
-              image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { children: image }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { padding: 6, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _47PGLBOScjs.Heading_default, { as: "h1", size: 700, fontStyle: "serif", children: header }) }),
+            /* @__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, 
-                _FESAFV44cjs.Box_default,
+                _KJLBDAZHcjs.Box_default,
                 {
                   height: "100%",
                   overflowY: "auto",
@@ -105,7 +105,7 @@ function Modal({
                 }
               ),
               footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _FESAFV44cjs.Box_default,
+                _KJLBDAZHcjs.Box_default,
                 {
                   display: "flex",
                   direction: "column",
@@ -130,4 +130,4 @@ Modal.displayName = "Modal";
 
 
 exports.Modal = Modal;
-//# sourceMappingURL=TJQKHHNH.cjs.map
+//# sourceMappingURL=HM6JHSTR.cjs.map

package/dist/__chunks/{SM7OH7FG.js → HUN4OGO5.js}

@@ -4,10 +4,10 @@ import {
 } from "./KKADUD65.js";
 import {
   Typography_default
-} from "./JRDHZ3QL.js";
+} from "./UXDF6ZIG.js";
 import {
   colors_module_default
-} from "./S6TNP7G5.js";
+} from "./XVUEUKXA.js";
 import {
   useIsHydrated
 } from "./JB65NEXK.js";
@@ -116,4 +116,4 @@ var Checkbox_default = Checkbox;
 export {
   Checkbox_default
 };
-//# sourceMappingURL=SM7OH7FG.js.map
+//# sourceMappingURL=HUN4OGO5.js.map

package/dist/__chunks/{76LTWV2Q.cjs → J27AGJQB.cjs}

@@ -13,7 +13,7 @@ var _IL22HCBFcjs = require('./IL22HCBF.cjs');
 var _CHDS4D44cjs = require('./CHDS4D44.cjs');
 
 
-var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
+var _SVA2ABQQcjs = require('./SVA2ABQQ.cjs');
 
 // src/Dialog/Dialog.tsx
 
@@ -58,7 +58,7 @@ var Dialog = _react.forwardRef.call(void 0, function Dialog2(props, ref) {
         _IL22HCBFcjs.Box_module_default.gap4,
         _IL22HCBFcjs.Box_module_default.relative,
         _IL22HCBFcjs.Box_module_default.overflowauto,
-        _QT6IRCGWcjs.colors_module_default.whiteBackgroundColor,
+        _SVA2ABQQcjs.colors_module_default.whiteBackgroundColor,
         _PLUVW6AMcjs.padding_module_default[`paddingX${padding != null ? padding : sizeToPadding[size]}`],
         _PLUVW6AMcjs.padding_module_default[`paddingY${padding != null ? padding : sizeToPadding[size]}`],
         _CHDS4D44cjs.rounding_module_default.roundingmd,
@@ -77,4 +77,4 @@ var Dialog_default = Dialog;
 
 
 exports.DialogContext = DialogContext; exports.Dialog_default = Dialog_default;
-//# sourceMappingURL=76LTWV2Q.cjs.map
+//# sourceMappingURL=J27AGJQB.cjs.map

package/dist/__chunks/{7BZZUMJM.cjs → J5NZ55OT.cjs}

@@ -7,7 +7,7 @@ var _MF7LLV7Vcjs = require('./MF7LLV7V.cjs');
 var _IL22HCBFcjs = require('./IL22HCBF.cjs');
 
 
-var _PJLDYIB6cjs = require('./PJLDYIB6.cjs');
+var _3BGIBVCRcjs = require('./3BGIBVCR.cjs');
 
 // src/RichSelect/RichSelectSection.tsx
 var _react = require('react');
@@ -39,7 +39,7 @@ var RichSelectSection_default = _react.forwardRef.call(void 0,
           }
         ),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Header, { className: _classnames2.default.call(void 0, _MF7LLV7Vcjs.layout_module_default.fullWidth), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PJLDYIB6cjs.Typography_default, { children: label }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Header, { className: _classnames2.default.call(void 0, _MF7LLV7Vcjs.layout_module_default.fullWidth), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3BGIBVCRcjs.Typography_default, { children: label }) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Collection, { children })
         ]
       }
@@ -50,4 +50,4 @@ var RichSelectSection_default = _react.forwardRef.call(void 0,
 
 
 exports.RichSelectSection_default = RichSelectSection_default;
-//# sourceMappingURL=7BZZUMJM.cjs.map
+//# sourceMappingURL=J5NZ55OT.cjs.map

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

@@ -4,13 +4,13 @@
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
 
 
-var _FESAFV44cjs = require('./FESAFV44.cjs');
+var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
 
 
-var _PJLDYIB6cjs = require('./PJLDYIB6.cjs');
+var _3BGIBVCRcjs = require('./3BGIBVCR.cjs');
 
 
-var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
+var _SVA2ABQQcjs = require('./SVA2ABQQ.cjs');
 
 
 var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
@@ -61,7 +61,7 @@ var RadioButton = ({
           {
             className: _classnames2.default.call(void 0, 
               RadioButton_module_default.background,
-              error ? _QT6IRCGWcjs.colors_module_default.cambioDestructive370BackgroundColor : _QT6IRCGWcjs.colors_module_default.cambioGray370BackgroundColor,
+              error ? _SVA2ABQQcjs.colors_module_default.cambioDestructive370BackgroundColor : _SVA2ABQQcjs.colors_module_default.cambioGray370BackgroundColor,
               RadioButton_module_default[size],
               {
                 [_XLUVINJWcjs.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible || dangerouslyForceFocusStyles
@@ -70,7 +70,7 @@ var RadioButton = ({
           }
         ),
         checked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _FESAFV44cjs.Box_default,
+          _KJLBDAZHcjs.Box_default,
           {
             backgroundColor: error ? "destructive900" : "gray900",
             width: size === "md" ? 12 : 8,
@@ -113,7 +113,7 @@ var RadioButton = ({
           }
         ),
         label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _PJLDYIB6cjs.Typography_default,
+          _3BGIBVCRcjs.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=N5W44DQ5.cjs.map
+//# sourceMappingURL=JAW252M7.cjs.map

package/dist/__chunks/{GWRAEUKW.js → JBFY4F7V.js}

@@ -10,10 +10,10 @@ import {
 } from "./KBIW5XV4.js";
 import {
   Typography_default
-} from "./JRDHZ3QL.js";
+} from "./UXDF6ZIG.js";
 import {
   colors_module_default
-} from "./S6TNP7G5.js";
+} from "./XVUEUKXA.js";
 import {
   syntaxToReactAriaPlacement
 } from "./SVZOETLJ.js";
@@ -46,6 +46,7 @@ var Tooltip_module_default = { "tooltip": "_tooltip_11pyp_1", "arrowPlacementtop
 // src/Tooltip/Tooltip.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function TooltipArrow(props) {
+  const { on } = props;
   return /* @__PURE__ */ jsx(ReactAriaOverlayArrow, __spreadProps(__spreadValues({}, props), { children: ({ placement }) => {
     if (placement === "center")
       return null;
@@ -58,7 +59,8 @@ function TooltipArrow(props) {
       {
         className: classNames([
           Box_module_default.block,
-          Tooltip_module_default[`arrowPlacement${placement}`]
+          Tooltip_module_default[`arrowPlacement${placement}`],
+          on === "lightBackground" ? colors_module_default.cambioBlackColor : colors_module_default.cambioWhiteColor
         ]),
         children: /* @__PURE__ */ jsx(
           "svg",
@@ -76,11 +78,11 @@ function TooltipArrow(props) {
   } }));
 }
 var AriaTooltip = forwardRef(function AriaTooltip2(_a, ref) {
-  var _b = _a, { children: childrenProp, onChangeContentVisibility } = _b, otherProps = __objRest(_b, ["children", "onChangeContentVisibility"]);
+  var _b = _a, { children: childrenProp, onChangeContentVisibility, on } = _b, otherProps = __objRest(_b, ["children", "onChangeContentVisibility", "on"]);
   const className = classNames([
     Box_module_default.box,
     colors_module_default.gray900Color,
-    colors_module_default.cambioBlackBackgroundColor,
+    on === "lightBackground" ? colors_module_default.cambioBlackBackgroundColor : colors_module_default.cambioWhiteBackgroundColor,
     padding_module_default.paddingX2,
     padding_module_default.paddingY2,
     rounding_module_default.roundingsm,
@@ -101,7 +103,7 @@ var AriaTooltip = forwardRef(function AriaTooltip2(_a, ref) {
       children: composeRenderProps(
         childrenProp,
         (children, { isEntering, isExiting }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(TooltipArrow, {}),
+          /* @__PURE__ */ jsx(TooltipArrow, { on }),
           /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "white", children }),
           /* @__PURE__ */ jsx(
             OverlayVisibility,
@@ -128,7 +130,8 @@ var Tooltip = forwardRef(function Tooltip2(props, ref) {
     onChangeContentVisibility,
     onOpenChange,
     open,
-    placement = "top"
+    placement = "top",
+    on = "lightBackground"
   } = props;
   return /* @__PURE__ */ jsxs(
     ReactAriaTooltipTrigger,
@@ -149,6 +152,7 @@ var Tooltip = forwardRef(function Tooltip2(props, ref) {
             "aria-label": accessibilityLabel,
             "data-testid": dataTestId,
             onChangeContentVisibility,
+            on,
             children: content
           }
         )
@@ -162,4 +166,4 @@ export {
   AriaTooltip,
   Tooltip_default
 };
-//# sourceMappingURL=GWRAEUKW.js.map
+//# sourceMappingURL=JBFY4F7V.js.map

package/dist/__chunks/JBFY4F7V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","css-module:./Tooltip.module.css#css-module"],"sourcesContent":["import React, { forwardRef, type ReactNode, type ReactElement } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n  composeRenderProps,\n  OverlayArrow as ReactAriaOverlayArrow,\n  type OverlayArrowProps as ReactAriaOverlayArrowProps,\n  Tooltip as ReactAriaTooltip,\n  TooltipTrigger as ReactAriaTooltipTrigger,\n  type TooltipProps as ReactAriaTooltipProps,\n} from \"react-aria-components\";\n\nimport Triggerable from \"../react-aria-utils/Triggerable\";\nimport Typography from \"../Typography/Typography\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n  type Placement,\n  syntaxToReactAriaPlacement,\n} from \"../react-aria-utils/placement\";\n\nfunction TooltipArrow(\n  props: ReactAriaOverlayArrowProps & {\n    on?: \"lightBackground\" | \"darkBackground\";\n  },\n): ReactElement {\n  const { on } = props;\n\n  return (\n    <ReactAriaOverlayArrow {...props}>\n      {({ placement }) => {\n        if (placement === \"center\") return null;\n        if (placement === \"left\") return null;\n        if (placement === \"right\") return null;\n        return (\n          <div\n            className={classNames([\n              boxStyles.block,\n              styles[`arrowPlacement${placement}`],\n              on === \"lightBackground\"\n                ? colorStyles.cambioBlackColor\n                : colorStyles.cambioWhiteColor,\n            ])}\n          >\n            <svg\n              className={classNames([boxStyles.block])}\n              width={40}\n              height={5}\n              viewBox=\"0 0 40 5\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M17 0L22 5H12L17 0Z\" fill=\"currentColor\" />\n            </svg>\n          </div>\n        );\n      }}\n    </ReactAriaOverlayArrow>\n  );\n}\n\n/**\n * AriaTooltip: This component extends Tooltip from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - onContentChangeVisibility\n */\nexport const AriaTooltip = forwardRef<\n  HTMLDivElement,\n  ReactAriaTooltipProps & {\n    /** Optional handler for change of visibility for overlaid content, for analytics timing */\n    onChangeContentVisibility?: (visible: boolean) => void;\n    on?: \"lightBackground\" | \"darkBackground\";\n  }\n>(function AriaTooltip(\n  { children: childrenProp, onChangeContentVisibility, on, ...otherProps },\n  ref,\n): ReactElement {\n  const className = classNames([\n    boxStyles.box,\n    colorStyles.gray900Color,\n    on === \"lightBackground\"\n      ? colorStyles.cambioBlackBackgroundColor\n      : colorStyles.cambioWhiteBackgroundColor,\n    paddingStyles.paddingX2,\n    paddingStyles.paddingY2,\n    roundingStyles.roundingsm,\n    styles.tooltip,\n  ]);\n\n  return (\n    <ReactAriaTooltip\n      ref={ref}\n      {...mergeProps(\n        {\n          className,\n          offset: 8,\n          crossOffset: 0,\n        },\n        otherProps,\n      )}\n    >\n      {composeRenderProps(\n        childrenProp,\n        (children, { isEntering, isExiting }) => (\n          <>\n            <TooltipArrow on={on} />\n            <Typography size={100} color=\"white\">\n              {children}\n            </Typography>\n            <OverlayVisibility\n              isEntering={isEntering}\n              isExiting={isExiting}\n              onChange={onChangeContentVisibility}\n            />\n          </>\n        ),\n      )}\n    </ReactAriaTooltip>\n  );\n});\n\ntype TooltipProps = {\n  /**\n   * Test id for the floating tooltip\n   */\n  \"data-testid\"?: string;\n  /**\n   * How long a user hovers before tooltip shows (in ms)\n   * @defaultValue 0\n   */\n  delay?: number;\n  /** Optional boolean to disable tooltip trigger behavior */\n  disabled?: boolean;\n  /** Optional aria-label for the tooltip (content element) */\n  accessibilityLabel?: string;\n  /** Required trigger element */\n  children: ReactElement;\n  /** Content to be shown inside the tooltip. */\n  content: ReactNode;\n  /** If set to true the tooltip will render initially open */\n  initialOpen?: boolean;\n  /** Optional handler for change of visibility for popover content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n  /** Optional handler for change of visibility for popover content, for control */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional boolean to control open state of tooltip externally */\n  open?: boolean;\n  /**\n   * Location of the tooltip content relative to anchor element\n   * @defaultValue \"top-end\"\n   */\n  placement?: Placement;\n\n  /**\n   * Indicate whether the tooltip renders on a light or dark background. Changes the color of the tooltip\n   *\n   * @defaultValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n};\n/**\n * [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/components-tooltip--docs) displays contextual information on hover or focus.\n *\n * Tooltip content is hidden by default and shown on hover or focus.\n * The content is hidden again when the user mouses out of the trigger element or blurs the trigger element or presses Escape\n *\n * Example Usage:\n ```\n  <Tooltip\n    delay={200}\n    placement=\"bottom-start\"\n    initialOpen\n    content={(\n      <Box padding={2}>\n        ... some content goes here\n      </Box>\n    )}\n  >\n      <Button text=\"Trigger me\" />\n  </Tooltip>\n ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  props,\n  ref,\n): ReactElement {\n  const {\n    accessibilityLabel,\n    \"data-testid\": dataTestId,\n    delay = 0,\n    disabled = false,\n    children,\n    content,\n    initialOpen,\n    onChangeContentVisibility,\n    onOpenChange,\n    open,\n    placement = \"top\",\n    on = \"lightBackground\",\n  } = props;\n\n  return (\n    <ReactAriaTooltipTrigger\n      defaultOpen={initialOpen}\n      delay={delay}\n      closeDelay={500}\n      isDisabled={disabled}\n      isOpen={open}\n      onOpenChange={onOpenChange}\n    >\n      {/* transfer focus handlers to child element if it is focusable */}\n      <Triggerable>{children}</Triggerable>\n      <AriaTooltip\n        ref={ref}\n        placement={syntaxToReactAriaPlacement(placement)}\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        onChangeContentVisibility={onChangeContentVisibility}\n        on={on}\n      >\n        {content}\n      </AriaTooltip>\n    </ReactAriaTooltipTrigger>\n  );\n});\n\nexport default Tooltip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tooltip/Tooltip.module.css\"; export default {\"tooltip\":\"_tooltip_11pyp_1\",\"arrowPlacementtop\":\"_arrowPlacementtop_11pyp_5\",\"arrowPlacementbottom\":\"_arrowPlacementbottom_11pyp_10\"}"],"mappings":"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","names":["AriaTooltip","Tooltip"]}

package/dist/__chunks/{YG47EHYS.cjs → JEP2SN7W.cjs}

@@ -10,10 +10,10 @@ var _IL22HCBFcjs = require('./IL22HCBF.cjs');
 var _CHDS4D44cjs = require('./CHDS4D44.cjs');
 
 
-var _PJLDYIB6cjs = require('./PJLDYIB6.cjs');
+var _3BGIBVCRcjs = require('./3BGIBVCR.cjs');
 
 
-var _QT6IRCGWcjs = require('./QT6IRCGW.cjs');
+var _SVA2ABQQcjs = require('./SVA2ABQQ.cjs');
 
 
 var _LLFHCGRAcjs = require('./LLFHCGRA.cjs');
@@ -46,6 +46,7 @@ var Tooltip_module_default = { "tooltip": "_tooltip_11pyp_1", "arrowPlacementtop
 // src/Tooltip/Tooltip.tsx
 var _jsxruntime = require('react/jsx-runtime');
 function TooltipArrow(props) {
+  const { on } = props;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.OverlayArrow, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, props), { children: ({ placement }) => {
     if (placement === "center")
       return null;
@@ -58,7 +59,8 @@ function TooltipArrow(props) {
       {
         className: _classnames2.default.call(void 0, [
           _IL22HCBFcjs.Box_module_default.block,
-          Tooltip_module_default[`arrowPlacement${placement}`]
+          Tooltip_module_default[`arrowPlacement${placement}`],
+          on === "lightBackground" ? _SVA2ABQQcjs.colors_module_default.cambioBlackColor : _SVA2ABQQcjs.colors_module_default.cambioWhiteColor
         ]),
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "svg",
@@ -76,11 +78,11 @@ function TooltipArrow(props) {
   } }));
 }
 var AriaTooltip = _react.forwardRef.call(void 0, function AriaTooltip2(_a, ref) {
-  var _b = _a, { children: childrenProp, onChangeContentVisibility } = _b, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _b, ["children", "onChangeContentVisibility"]);
+  var _b = _a, { children: childrenProp, onChangeContentVisibility, on } = _b, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _b, ["children", "onChangeContentVisibility", "on"]);
   const className = _classnames2.default.call(void 0, [
     _IL22HCBFcjs.Box_module_default.box,
-    _QT6IRCGWcjs.colors_module_default.gray900Color,
-    _QT6IRCGWcjs.colors_module_default.cambioBlackBackgroundColor,
+    _SVA2ABQQcjs.colors_module_default.gray900Color,
+    on === "lightBackground" ? _SVA2ABQQcjs.colors_module_default.cambioBlackBackgroundColor : _SVA2ABQQcjs.colors_module_default.cambioWhiteBackgroundColor,
     _PLUVW6AMcjs.padding_module_default.paddingX2,
     _PLUVW6AMcjs.padding_module_default.paddingY2,
     _CHDS4D44cjs.rounding_module_default.roundingsm,
@@ -101,8 +103,8 @@ var AriaTooltip = _react.forwardRef.call(void 0, function AriaTooltip2(_a, ref)
       children: _reactariacomponents.composeRenderProps.call(void 0, 
         childrenProp,
         (children, { isEntering, isExiting }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipArrow, {}),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PJLDYIB6cjs.Typography_default, { size: 100, color: "white", children }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipArrow, { on }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3BGIBVCRcjs.Typography_default, { size: 100, color: "white", children }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _E5P6WRJDcjs.OverlayVisibility,
             {
@@ -128,7 +130,8 @@ var Tooltip = _react.forwardRef.call(void 0, function Tooltip2(props, ref) {
     onChangeContentVisibility,
     onOpenChange,
     open,
-    placement = "top"
+    placement = "top",
+    on = "lightBackground"
   } = props;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     _reactariacomponents.TooltipTrigger,
@@ -149,6 +152,7 @@ var Tooltip = _react.forwardRef.call(void 0, function Tooltip2(props, ref) {
             "aria-label": accessibilityLabel,
             "data-testid": dataTestId,
             onChangeContentVisibility,
+            on,
             children: content
           }
         )
@@ -162,4 +166,4 @@ var Tooltip_default = Tooltip;
 
 
 exports.AriaTooltip = AriaTooltip; exports.Tooltip_default = Tooltip_default;
-//# sourceMappingURL=YG47EHYS.cjs.map
+//# sourceMappingURL=JEP2SN7W.cjs.map

package/dist/__chunks/JEP2SN7W.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip/Tooltip.tsx","css-module:./Tooltip.module.css#css-module"],"names":["AriaTooltip","Tooltip"],"mappings":"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","sourcesContent":["import React, { forwardRef, type ReactNode, type ReactElement } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n  composeRenderProps,\n  OverlayArrow as ReactAriaOverlayArrow,\n  type OverlayArrowProps as ReactAriaOverlayArrowProps,\n  Tooltip as ReactAriaTooltip,\n  TooltipTrigger as ReactAriaTooltipTrigger,\n  type TooltipProps as ReactAriaTooltipProps,\n} from \"react-aria-components\";\n\nimport Triggerable from \"../react-aria-utils/Triggerable\";\nimport Typography from \"../Typography/Typography\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n  type Placement,\n  syntaxToReactAriaPlacement,\n} from \"../react-aria-utils/placement\";\n\nfunction TooltipArrow(\n  props: ReactAriaOverlayArrowProps & {\n    on?: \"lightBackground\" | \"darkBackground\";\n  },\n): ReactElement {\n  const { on } = props;\n\n  return (\n    <ReactAriaOverlayArrow {...props}>\n      {({ placement }) => {\n        if (placement === \"center\") return null;\n        if (placement === \"left\") return null;\n        if (placement === \"right\") return null;\n        return (\n          <div\n            className={classNames([\n              boxStyles.block,\n              styles[`arrowPlacement${placement}`],\n              on === \"lightBackground\"\n                ? colorStyles.cambioBlackColor\n                : colorStyles.cambioWhiteColor,\n            ])}\n          >\n            <svg\n              className={classNames([boxStyles.block])}\n              width={40}\n              height={5}\n              viewBox=\"0 0 40 5\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M17 0L22 5H12L17 0Z\" fill=\"currentColor\" />\n            </svg>\n          </div>\n        );\n      }}\n    </ReactAriaOverlayArrow>\n  );\n}\n\n/**\n * AriaTooltip: This component extends Tooltip from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - onContentChangeVisibility\n */\nexport const AriaTooltip = forwardRef<\n  HTMLDivElement,\n  ReactAriaTooltipProps & {\n    /** Optional handler for change of visibility for overlaid content, for analytics timing */\n    onChangeContentVisibility?: (visible: boolean) => void;\n    on?: \"lightBackground\" | \"darkBackground\";\n  }\n>(function AriaTooltip(\n  { children: childrenProp, onChangeContentVisibility, on, ...otherProps },\n  ref,\n): ReactElement {\n  const className = classNames([\n    boxStyles.box,\n    colorStyles.gray900Color,\n    on === \"lightBackground\"\n      ? colorStyles.cambioBlackBackgroundColor\n      : colorStyles.cambioWhiteBackgroundColor,\n    paddingStyles.paddingX2,\n    paddingStyles.paddingY2,\n    roundingStyles.roundingsm,\n    styles.tooltip,\n  ]);\n\n  return (\n    <ReactAriaTooltip\n      ref={ref}\n      {...mergeProps(\n        {\n          className,\n          offset: 8,\n          crossOffset: 0,\n        },\n        otherProps,\n      )}\n    >\n      {composeRenderProps(\n        childrenProp,\n        (children, { isEntering, isExiting }) => (\n          <>\n            <TooltipArrow on={on} />\n            <Typography size={100} color=\"white\">\n              {children}\n            </Typography>\n            <OverlayVisibility\n              isEntering={isEntering}\n              isExiting={isExiting}\n              onChange={onChangeContentVisibility}\n            />\n          </>\n        ),\n      )}\n    </ReactAriaTooltip>\n  );\n});\n\ntype TooltipProps = {\n  /**\n   * Test id for the floating tooltip\n   */\n  \"data-testid\"?: string;\n  /**\n   * How long a user hovers before tooltip shows (in ms)\n   * @defaultValue 0\n   */\n  delay?: number;\n  /** Optional boolean to disable tooltip trigger behavior */\n  disabled?: boolean;\n  /** Optional aria-label for the tooltip (content element) */\n  accessibilityLabel?: string;\n  /** Required trigger element */\n  children: ReactElement;\n  /** Content to be shown inside the tooltip. */\n  content: ReactNode;\n  /** If set to true the tooltip will render initially open */\n  initialOpen?: boolean;\n  /** Optional handler for change of visibility for popover content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n  /** Optional handler for change of visibility for popover content, for control */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional boolean to control open state of tooltip externally */\n  open?: boolean;\n  /**\n   * Location of the tooltip content relative to anchor element\n   * @defaultValue \"top-end\"\n   */\n  placement?: Placement;\n\n  /**\n   * Indicate whether the tooltip renders on a light or dark background. Changes the color of the tooltip\n   *\n   * @defaultValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n};\n/**\n * [Tooltip](https://cambly-syntax.vercel.app/?path=/docs/components-tooltip--docs) displays contextual information on hover or focus.\n *\n * Tooltip content is hidden by default and shown on hover or focus.\n * The content is hidden again when the user mouses out of the trigger element or blurs the trigger element or presses Escape\n *\n * Example Usage:\n ```\n  <Tooltip\n    delay={200}\n    placement=\"bottom-start\"\n    initialOpen\n    content={(\n      <Box padding={2}>\n        ... some content goes here\n      </Box>\n    )}\n  >\n      <Button text=\"Trigger me\" />\n  </Tooltip>\n ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  props,\n  ref,\n): ReactElement {\n  const {\n    accessibilityLabel,\n    \"data-testid\": dataTestId,\n    delay = 0,\n    disabled = false,\n    children,\n    content,\n    initialOpen,\n    onChangeContentVisibility,\n    onOpenChange,\n    open,\n    placement = \"top\",\n    on = \"lightBackground\",\n  } = props;\n\n  return (\n    <ReactAriaTooltipTrigger\n      defaultOpen={initialOpen}\n      delay={delay}\n      closeDelay={500}\n      isDisabled={disabled}\n      isOpen={open}\n      onOpenChange={onOpenChange}\n    >\n      {/* transfer focus handlers to child element if it is focusable */}\n      <Triggerable>{children}</Triggerable>\n      <AriaTooltip\n        ref={ref}\n        placement={syntaxToReactAriaPlacement(placement)}\n        aria-label={accessibilityLabel}\n        data-testid={dataTestId}\n        onChangeContentVisibility={onChangeContentVisibility}\n        on={on}\n      >\n        {content}\n      </AriaTooltip>\n    </ReactAriaTooltipTrigger>\n  );\n});\n\nexport default Tooltip;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Tooltip/Tooltip.module.css\"; export default {\"tooltip\":\"_tooltip_11pyp_1\",\"arrowPlacementtop\":\"_arrowPlacementtop_11pyp_5\",\"arrowPlacementbottom\":\"_arrowPlacementbottom_11pyp_10\"}"]}

package/dist/__chunks/{LT6ELZIN.js → JJNZLCKX.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   Box_default
-} from "./M36V23WR.js";
+} from "./65PMWIHY.js";
 
 // src/AvatarGroup/AvatarGroup.tsx
 import {
@@ -39,4 +39,4 @@ export {
   useAvatarGroup,
   AvatarGroup
 };
-//# sourceMappingURL=LT6ELZIN.js.map
+//# sourceMappingURL=JJNZLCKX.js.map

package/dist/__chunks/{54ZAQVGC.js → JL2NIWMQ.js}

@@ -1,22 +1,22 @@
 "use client"
-import {
-  FocusTrap
-} from "./HVA7R2EL.js";
 import {
   Heading_default
-} from "./LMERC43E.js";
+} from "./VMY3X6VX.js";
 import {
   StopScroll
 } from "./QQT35OLE.js";
 import {
   Layer
-} from "./NMX5UDLV.js";
+} from "./BQYW6G4G.js";
+import {
+  FocusTrap
+} from "./HVA7R2EL.js";
 import {
   IconButton_default
-} from "./4JFE4NWI.js";
+} from "./T6T5FJWJ.js";
 import {
   Box_default
-} from "./M36V23WR.js";
+} from "./65PMWIHY.js";
 
 // css-module:./Modal.module.css#css-module
 var Modal_module_default = { "backdrop": "_backdrop_17lbk_1", "closeButton": "_closeButton_17lbk_10" };
@@ -130,4 +130,4 @@ Modal.displayName = "Modal";
 export {
   Modal
 };
-//# sourceMappingURL=54ZAQVGC.js.map
+//# sourceMappingURL=JL2NIWMQ.js.map

package/dist/__chunks/JQ6MLSET.cjs

@@ -0,0 +1,53 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
+
+
+var _VFJQUEUDcjs = require('./VFJQUEUD.cjs');
+
+
+var _AOBL3JUXcjs = require('./AOBL3JUX.cjs');
+
+
+var _JVGBP6LOcjs = require('./JVGBP6LO.cjs');
+
+
+var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
+
+// src/Tabs/Tabs.tsx
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
+var _jsxruntime = require('react/jsx-runtime');
+function Tabs({
+  children,
+  accessibilityLabel,
+  on = "lightBackground"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      role: "tablist",
+      "aria-label": accessibilityLabel,
+      className: _classnames2.default.call(void 0, {
+        [_JVGBP6LOcjs.Tabs_module_default.tabContainerlightBackground]: on === "lightBackground",
+        [_JVGBP6LOcjs.Tabs_module_default.tabContainerDarkBackground]: on === "darkBackground"
+      }),
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _KJLBDAZHcjs.Box_default,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "start",
+          width: "100%",
+          gap: 8,
+          height: 56,
+          children
+        }
+      )
+    }
+  );
+}
+Tabs.Button = _AOBL3JUXcjs.TabButton;
+Tabs.Link = _VFJQUEUDcjs.TabLink_default;
+
+
+
+exports.Tabs = Tabs;
+//# sourceMappingURL=JQ6MLSET.cjs.map

package/dist/__chunks/JQ6MLSET.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,OAAO,gBAAgB;AAuCjB;AA9BS,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,KAAK;AACP,GAgBgB;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,CAAC,oBAAO,2BAA2B,GAAG,OAAO;AAAA,QAC7C,CAAC,oBAAO,0BAA0B,GAAG,OAAO;AAAA,MAC9C,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,OAAM;AAAA,UACN,KAAK;AAAA,UACL,QAAQ;AAAA,UAEP;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,KAAK,SAAS;AACd,KAAK,OAAO","sourcesContent":["import { type ReactNode } from \"react\";\nimport classnames from \"classnames\";\nimport TabButton from \"./TabButton\";\nimport TabLink from \"./TabLink\";\nimport styles from \"./Tabs.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [Tabs](https://cambly-syntax.vercel.app/?path=/docs/components-tabs--docs) are used to organize content into different sections.\n */\nexport default function Tabs({\n  children,\n  accessibilityLabel,\n  on = \"lightBackground\",\n}: {\n  /**\n   * The Tabs to display. Each Tab should be a `Tabs.Button` or a `Tabs.Link`.\n   * Only use `Tabs.Link` for clicking tab that update the URL upon selection. Otherwise, use `Tabs.Button`.\n   */\n  children: ReactNode;\n  /**\n   * Accessibility label for the Tabs container.\n   */\n  accessibilityLabel: string;\n  /**\n   * Indicate whether the Tabs render on a light or dark background.\n   *\n   * @defaulValue `lightBackground`\n   */\n  on?: \"lightBackground\" | \"darkBackground\";\n}): JSX.Element {\n  return (\n    <div\n      role=\"tablist\"\n      aria-label={accessibilityLabel}\n      className={classnames({\n        [styles.tabContainerlightBackground]: on === \"lightBackground\",\n        [styles.tabContainerDarkBackground]: on === \"darkBackground\",\n      })}\n    >\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"start\"\n        width=\"100%\"\n        gap={8}\n        height={56}\n      >\n        {children}\n      </Box>\n    </div>\n  );\n}\n\nTabs.Button = TabButton;\nTabs.Link = TabLink;\n"]}

package/dist/__chunks/JTTZCAPP.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// css-module:./colors.module.css#css-module
+var colors_module_default = { "inheritColor": "_inheritColor_m0uph_2", "destructive700Color": "_destructive700Color_m0uph_6", "gray700Color": "_gray700Color_m0uph_10", "gray900Color": "_gray900Color_m0uph_14", "primary700Color": "_primary700Color_m0uph_18", "success700Color": "_success700Color_m0uph_22", "whiteColor": "_whiteColor_m0uph_26", "noBorder": "_noBorder_m0uph_31", "blackBorderColor": "_blackBorderColor_m0uph_35", "whiteBorderColor": "_whiteBorderColor_m0uph_39", "success770BorderColor": "_success770BorderColor_m0uph_43", "destructive770BorderColor": "_destructive770BorderColor_m0uph_47", "gray370BorderColor": "_gray370BorderColor_m0uph_51", "success370BorderColor": "_success370BorderColor_m0uph_55", "destructive370BorderColor": "_destructive370BorderColor_m0uph_59", "blackBackgroundColor": "_blackBackgroundColor_m0uph_65", "destructive100BackgroundColor": "_destructive100BackgroundColor_m0uph_69", "destructive200BackgroundColor": "_destructive200BackgroundColor_m0uph_73", "destructive300BackgroundColor": "_destructive300BackgroundColor_m0uph_77", "destructive700BackgroundColor": "_destructive700BackgroundColor_m0uph_81", "destructive800BackgroundColor": "_destructive800BackgroundColor_m0uph_85", "destructive900BackgroundColor": "_destructive900BackgroundColor_m0uph_89", "gray10BackgroundColor": "_gray10BackgroundColor_m0uph_93", "gray30BackgroundColor": "_gray30BackgroundColor_m0uph_97", "gray60BackgroundColor": "_gray60BackgroundColor_m0uph_101", "gray80BackgroundColor": "_gray80BackgroundColor_m0uph_105", "gray100BackgroundColor": "_gray100BackgroundColor_m0uph_109", "gray200BackgroundColor": "_gray200BackgroundColor_m0uph_113", "gray300BackgroundColor": "_gray300BackgroundColor_m0uph_117", "gray700BackgroundColor": "_gray700BackgroundColor_m0uph_121", "gray800BackgroundColor": "_gray800BackgroundColor_m0uph_125", "gray900BackgroundColor": "_gray900BackgroundColor_m0uph_129", "orange100BackgroundColor": "_orange100BackgroundColor_m0uph_133", "orange200BackgroundColor": "_orange200BackgroundColor_m0uph_137", "orange300BackgroundColor": "_orange300BackgroundColor_m0uph_141", "orange700BackgroundColor": "_orange700BackgroundColor_m0uph_145", "orange800BackgroundColor": "_orange800BackgroundColor_m0uph_149", "orange900BackgroundColor": "_orange900BackgroundColor_m0uph_153", "primary100BackgroundColor": "_primary100BackgroundColor_m0uph_157", "primary200BackgroundColor": "_primary200BackgroundColor_m0uph_161", "primary300BackgroundColor": "_primary300BackgroundColor_m0uph_165", "primary700BackgroundColor": "_primary700BackgroundColor_m0uph_169", "primary800BackgroundColor": "_primary800BackgroundColor_m0uph_173", "primary900BackgroundColor": "_primary900BackgroundColor_m0uph_177", "success100BackgroundColor": "_success100BackgroundColor_m0uph_181", "success200BackgroundColor": "_success200BackgroundColor_m0uph_185", "success300BackgroundColor": "_success300BackgroundColor_m0uph_189", "success700BackgroundColor": "_success700BackgroundColor_m0uph_193", "success800BackgroundColor": "_success800BackgroundColor_m0uph_197", "success900BackgroundColor": "_success900BackgroundColor_m0uph_201", "purple100BackgroundColor": "_purple100BackgroundColor_m0uph_205", "purple200BackgroundColor": "_purple200BackgroundColor_m0uph_209", "purple300BackgroundColor": "_purple300BackgroundColor_m0uph_213", "purple700BackgroundColor": "_purple700BackgroundColor_m0uph_217", "purple800BackgroundColor": "_purple800BackgroundColor_m0uph_221", "purple900BackgroundColor": "_purple900BackgroundColor_m0uph_225", "whiteBackgroundColor": "_whiteBackgroundColor_m0uph_229", "yellow100BackgroundColor": "_yellow100BackgroundColor_m0uph_233", "yellow200BackgroundColor": "_yellow200BackgroundColor_m0uph_237", "yellow300BackgroundColor": "_yellow300BackgroundColor_m0uph_241", "yellow700BackgroundColor": "_yellow700BackgroundColor_m0uph_245", "yellow800BackgroundColor": "_yellow800BackgroundColor_m0uph_249", "yellow900BackgroundColor": "_yellow900BackgroundColor_m0uph_253", "cambioBlackColor": "_cambioBlackColor_m0uph_258", "cambioWhiteColor": "_cambioWhiteColor_m0uph_262", "cambioWhite40Color": "_cambioWhite40Color_m0uph_266", "cambioWhite70Color": "_cambioWhite70Color_m0uph_270", "cambioGray100Color": "_cambioGray100Color_m0uph_274", "cambioGray200Color": "_cambioGray200Color_m0uph_278", "cambioGray300Color": "_cambioGray300Color_m0uph_282", "cambioGray370Color": "_cambioGray370Color_m0uph_286", "cambioGray700Color": "_cambioGray700Color_m0uph_290", "cambioGray800Color": "_cambioGray800Color_m0uph_294", "cambioGray870Color": "_cambioGray870Color_m0uph_298", "cambioGray900Color": "_cambioGray900Color_m0uph_302", "cambioDestructive100Color": "_cambioDestructive100Color_m0uph_306", "cambioDestructive300Color": "_cambioDestructive300Color_m0uph_310", "cambioDestructive370Color": "_cambioDestructive370Color_m0uph_314", "cambioDestructive700Color": "_cambioDestructive700Color_m0uph_318", "cambioDestructive770Color": "_cambioDestructive770Color_m0uph_322", "cambioDestructive900Color": "_cambioDestructive900Color_m0uph_326", "cambioSuccess100Color": "_cambioSuccess100Color_m0uph_330", "cambioSuccess300Color": "_cambioSuccess300Color_m0uph_334", "cambioSuccess370Color": "_cambioSuccess370Color_m0uph_338", "cambioSuccess700Color": "_cambioSuccess700Color_m0uph_342", "cambioSuccess770Color": "_cambioSuccess770Color_m0uph_346", "cambioSuccess900Color": "_cambioSuccess900Color_m0uph_350", "cambioRedColor": "_cambioRedColor_m0uph_354", "cambioOrangeColor": "_cambioOrangeColor_m0uph_358", "cambioTanColor": "_cambioTanColor_m0uph_362", "cambioCreamColor": "_cambioCreamColor_m0uph_366", "cambioPurpleColor": "_cambioPurpleColor_m0uph_370", "cambioLilacColor": "_cambioLilacColor_m0uph_374", "cambioThistleColor": "_cambioThistleColor_m0uph_378", "cambioPinkColor": "_cambioPinkColor_m0uph_382", "cambioNavyColor": "_cambioNavyColor_m0uph_386", "cambioTealColor": "_cambioTealColor_m0uph_390", "cambioSlateColor": "_cambioSlateColor_m0uph_394", "cambioSkyColor": "_cambioSkyColor_m0uph_398", "cambioYellow700Color": "_cambioYellow700Color_m0uph_402", "cambioTransparentFullBackgroundColor": "_cambioTransparentFullBackgroundColor_m0uph_406", "cambioBlackBackgroundColor": "_cambioBlackBackgroundColor_m0uph_410", "cambioWhiteBackgroundColor": "_cambioWhiteBackgroundColor_m0uph_414", "cambioWhite40BackgroundColor": "_cambioWhite40BackgroundColor_m0uph_418", "cambioWhite70BackgroundColor": "_cambioWhite70BackgroundColor_m0uph_422", "cambioGray100BackgroundColor": "_cambioGray100BackgroundColor_m0uph_426", "cambioGray200BackgroundColor": "_cambioGray200BackgroundColor_m0uph_430", "cambioGray300BackgroundColor": "_cambioGray300BackgroundColor_m0uph_434", "gray370BackgroundColor": "_gray370BackgroundColor_m0uph_438", "cambioGray370BackgroundColor": "_cambioGray370BackgroundColor_m0uph_442", "cambioGray700BackgroundColor": "_cambioGray700BackgroundColor_m0uph_446", "cambioGray800BackgroundColor": "_cambioGray800BackgroundColor_m0uph_450", "gray870BackgroundColor": "_gray870BackgroundColor_m0uph_454", "cambioGray870BackgroundColor": "_cambioGray870BackgroundColor_m0uph_458", "cambioGray900BackgroundColor": "_cambioGray900BackgroundColor_m0uph_462", "cambioDestructive100BackgroundColor": "_cambioDestructive100BackgroundColor_m0uph_466", "cambioDestructive300BackgroundColor": "_cambioDestructive300BackgroundColor_m0uph_470", "cambioDestructive370BackgroundColor": "_cambioDestructive370BackgroundColor_m0uph_474", "cambioDestructive700BackgroundColor": "_cambioDestructive700BackgroundColor_m0uph_478", "cambioDestructive770BackgroundColor": "_cambioDestructive770BackgroundColor_m0uph_482", "cambioDestructive900BackgroundColor": "_cambioDestructive900BackgroundColor_m0uph_486", "cambioSuccess100BackgroundColor": "_cambioSuccess100BackgroundColor_m0uph_490", "cambioSuccess300BackgroundColor": "_cambioSuccess300BackgroundColor_m0uph_494", "cambioSuccess370BackgroundColor": "_cambioSuccess370BackgroundColor_m0uph_498", "cambioSuccess700BackgroundColor": "_cambioSuccess700BackgroundColor_m0uph_502", "cambioSuccess770BackgroundColor": "_cambioSuccess770BackgroundColor_m0uph_506", "cambioSuccess900BackgroundColor": "_cambioSuccess900BackgroundColor_m0uph_510", "redBackgroundColor": "_redBackgroundColor_m0uph_514", "cambioRedBackgroundColor": "_cambioRedBackgroundColor_m0uph_518", "orangeBackgroundColor": "_orangeBackgroundColor_m0uph_522", "cambioOrangeBackgroundColor": "_cambioOrangeBackgroundColor_m0uph_526", "tanBackgroundColor": "_tanBackgroundColor_m0uph_530", "cambioTanBackgroundColor": "_cambioTanBackgroundColor_m0uph_534", "creamBackgroundColor": "_creamBackgroundColor_m0uph_538", "cambioCreamBackgroundColor": "_cambioCreamBackgroundColor_m0uph_542", "purpleBackgroundColor": "_purpleBackgroundColor_m0uph_546", "cambioPurpleBackgroundColor": "_cambioPurpleBackgroundColor_m0uph_550", "lilacBackgroundColor": "_lilacBackgroundColor_m0uph_554", "cambioLilacBackgroundColor": "_cambioLilacBackgroundColor_m0uph_558", "thistleBackgroundColor": "_thistleBackgroundColor_m0uph_562", "cambioThistleBackgroundColor": "_cambioThistleBackgroundColor_m0uph_566", "pinkBackgroundColor": "_pinkBackgroundColor_m0uph_570", "cambioPinkBackgroundColor": "_cambioPinkBackgroundColor_m0uph_574", "navyBackgroundColor": "_navyBackgroundColor_m0uph_578", "cambioNavyBackgroundColor": "_cambioNavyBackgroundColor_m0uph_582", "tealBackgroundColor": "_tealBackgroundColor_m0uph_586", "cambioTealBackgroundColor": "_cambioTealBackgroundColor_m0uph_590", "slateBackgroundColor": "_slateBackgroundColor_m0uph_594", "cambioSlateBackgroundColor": "_cambioSlateBackgroundColor_m0uph_598", "skyBackgroundColor": "_skyBackgroundColor_m0uph_602", "cambioSkyBackgroundColor": "_cambioSkyBackgroundColor_m0uph_606", "cambioYellow700BackgroundColor": "_cambioYellow700BackgroundColor_m0uph_610" };
+
+
+
+exports.colors_module_default = colors_module_default;
+//# sourceMappingURL=JTTZCAPP.cjs.map