@cambly/syntax-core 10.11.0 → 10.13.0

package/dist/__chunks/ARCUBQR4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextArea/TextArea.tsx","css-module:./TextArea.module.css#css-module","css-module:../TextField/TextField.module.css#css-module"],"sourcesContent":["import Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport React, { type ReactElement, useId, forwardRef } from \"react\";\nimport styles from \"./TextArea.module.css\";\nimport textFieldStyles from \"../TextField/TextField.module.css\";\nimport classNames from \"classnames\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\ntype TextAreaProps = {\n  /**\n   * A data-testid to make querying for the TextArea easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextArea will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextArea if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextArea\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextArea visible label\n   */\n  label: string;\n  /**\n   * Maximum number of characters allowed in the TextArea\n   */\n  maxLength?: number;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Placeholder text to display when TextArea is empty\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextArea. Defines the font size and padding.\n   *\n   * Cambio only supports `md`\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Number of rows to display\n   */\n  rows?: number;\n  /**\n   * Value of the TextArea\n   */\n  value: string;\n};\n\n/**\n * [TextArea](https://cambly-syntax.vercel.app/?path=/docs/components-textarea--docs) allows users to enter multiple lines of text.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      errorText = \"\",\n      helperText = \"\",\n      id,\n      label,\n      maxLength = 1024,\n      placeholder = \"\",\n      rows = 3,\n      size = \"md\",\n      value = \"\",\n      onChange,\n    }: TextAreaProps,\n    forwardedRef,\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        position={themeName === \"cambio\" ? \"relative\" : undefined}\n      >\n        <label\n          className={classNames(\n            themeName === \"classic\"\n              ? textFieldStyles.label\n              : textFieldStyles.labelCambio,\n            themeName === \"cambio\" && styles.labelCambio,\n          )}\n          htmlFor={inputId}\n        >\n          <Box paddingX={themeName === \"classic\" ? 1 : 3} width=\"100%\">\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n        <Typography size={themeName === \"cambio\" ? 100 : 200}>\n          <div\n            className={classNames(\n              themeName === \"cambio\" && styles.fixTextareaHeight,\n            )}\n          >\n            <textarea\n              data-testid={dataTestId}\n              ref={forwardedRef}\n              className={classNames(\n                textFieldStyles.textfield,\n                themeName === \"classic\"\n                  ? textFieldStyles.textfieldClassic\n                  : textFieldStyles.textfieldCambio,\n                themeName === \"classic\" && textFieldStyles[size],\n                themeName === \"classic\" && styles[size],\n                themeName === \"classic\"\n                  ? styles.textarea\n                  : styles.textareaCambio,\n                {\n                  [themeName === \"classic\"\n                    ? textFieldStyles.inputError\n                    : textFieldStyles.inputErrorCambio]: errorText,\n                },\n              )}\n              id={inputId}\n              placeholder={placeholder}\n              maxLength={maxLength}\n              onChange={onChange}\n              rows={rows}\n              value={value}\n              disabled={disabled}\n            />\n          </div>\n        </Typography>\n        {(helperText || errorText) && (\n          <Box paddingX={themeName === \"classic\" ? 1 : 0}>\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);\n\nexport default TextArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextArea/TextArea.module.css\"; export default {\"textarea\":\"_textarea_1w1b8_1\",\"sm\":\"_sm_1w1b8_5\",\"md\":\"_md_1w1b8_10\",\"lg\":\"_lg_1w1b8_15\",\"textareaCambio\":\"_textareaCambio_1w1b8_20\",\"fixTextareaHeight\":\"_fixTextareaHeight_1w1b8_24\",\"labelCambio\":\"_labelCambio_1w1b8_28\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export 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\"}"],"mappings":"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","names":["TextArea"]}

package/dist/__chunks/AVREYFSM.js

@@ -0,0 +1,9 @@
+"use client"
+
+// css-module:../Box/Box.module.css#css-module
+var Box_module_default = { "box": "_box_xcjsm_1", "flexnone": "_flexnone_xcjsm_5", "flexgrow": "_flexgrow_xcjsm_9", "flexWrap": "_flexWrap_xcjsm_13", "alignItemscenter": "_alignItemscenter_xcjsm_18", "alignItemsstart": "_alignItemsstart_xcjsm_22", "alignItemsend": "_alignItemsend_xcjsm_26", "alignItemsstretch": "_alignItemsstretch_xcjsm_30", "alignItemsbaseline": "_alignItemsbaseline_xcjsm_34", "alignItemscenterSmall": "_alignItemscenterSmall_xcjsm_40", "alignItemsstartSmall": "_alignItemsstartSmall_xcjsm_44", "alignItemsendSmall": "_alignItemsendSmall_xcjsm_48", "alignItemsstretchSmall": "_alignItemsstretchSmall_xcjsm_52", "alignItemsbaselineSmall": "_alignItemsbaselineSmall_xcjsm_56", "alignItemscenterLarge": "_alignItemscenterLarge_xcjsm_63", "alignItemsstartLarge": "_alignItemsstartLarge_xcjsm_67", "alignItemsendLarge": "_alignItemsendLarge_xcjsm_71", "alignItemsstretchLarge": "_alignItemsstretchLarge_xcjsm_75", "alignItemsbaselineLarge": "_alignItemsbaselineLarge_xcjsm_79", "alignSelfcenter": "_alignSelfcenter_xcjsm_85", "alignSelfstart": "_alignSelfstart_xcjsm_89", "alignSelfend": "_alignSelfend_xcjsm_93", "alignSelfstretch": "_alignSelfstretch_xcjsm_97", "alignSelfbaseline": "_alignSelfbaseline_xcjsm_101", "alignSelfauto": "_alignSelfauto_xcjsm_105", "block": "_block_xcjsm_110", "flex": "_flex_xcjsm_5", "inlineBlock": "_inlineBlock_xcjsm_118", "inlineFlex": "_inlineFlex_xcjsm_122", "none": "_none_xcjsm_126", "visuallyHidden": "_visuallyHidden_xcjsm_130", "blockSmall": "_blockSmall_xcjsm_144", "flexSmall": "_flexSmall_xcjsm_148", "inlineBlockSmall": "_inlineBlockSmall_xcjsm_152", "inlineFlexSmall": "_inlineFlexSmall_xcjsm_156", "noneSmall": "_noneSmall_xcjsm_160", "visuallyHiddenSmall": "_visuallyHiddenSmall_xcjsm_164", "blockLarge": "_blockLarge_xcjsm_179", "flexLarge": "_flexLarge_xcjsm_183", "inlineBlockLarge": "_inlineBlockLarge_xcjsm_187", "inlineFlexLarge": "_inlineFlexLarge_xcjsm_191", "noneLarge": "_noneLarge_xcjsm_195", "visuallyHiddenLarge": "_visuallyHiddenLarge_xcjsm_199", "column": "_column_xcjsm_213", "row": "_row_xcjsm_217", "columnSmall": "_columnSmall_xcjsm_223", "rowSmall": "_rowSmall_xcjsm_227", "columnLarge": "_columnLarge_xcjsm_234", "rowLarge": "_rowLarge_xcjsm_238", "gap0": "_gap0_xcjsm_244", "gap1": "_gap1_xcjsm_248", "gap2": "_gap2_xcjsm_252", "gap3": "_gap3_xcjsm_256", "gap4": "_gap4_xcjsm_260", "gap5": "_gap5_xcjsm_264", "gap6": "_gap6_xcjsm_268", "gap7": "_gap7_xcjsm_272", "gap8": "_gap8_xcjsm_276", "gap9": "_gap9_xcjsm_280", "gap10": "_gap10_xcjsm_284", "gap11": "_gap11_xcjsm_288", "gap12": "_gap12_xcjsm_292", "justifyContentcenter": "_justifyContentcenter_xcjsm_297", "justifyContentstart": "_justifyContentstart_xcjsm_301", "justifyContentend": "_justifyContentend_xcjsm_305", "justifyContentbetween": "_justifyContentbetween_xcjsm_309", "justifyContentaround": "_justifyContentaround_xcjsm_313", "justifyContentevenly": "_justifyContentevenly_xcjsm_317", "justifyContentcenterSmall": "_justifyContentcenterSmall_xcjsm_323", "justifyContentstartSmall": "_justifyContentstartSmall_xcjsm_327", "justifyContentendSmall": "_justifyContentendSmall_xcjsm_331", "justifyContentbetweenSmall": "_justifyContentbetweenSmall_xcjsm_335", "justifyContentaroundSmall": "_justifyContentaroundSmall_xcjsm_339", "justifyContentevenlySmall": "_justifyContentevenlySmall_xcjsm_343", "justifyContentcenterLarge": "_justifyContentcenterLarge_xcjsm_350", "justifyContentstartLarge": "_justifyContentstartLarge_xcjsm_354", "justifyContentendLarge": "_justifyContentendLarge_xcjsm_358", "justifyContentbetweenLarge": "_justifyContentbetweenLarge_xcjsm_362", "justifyContentaroundLarge": "_justifyContentaroundLarge_xcjsm_366", "justifyContentevenlyLarge": "_justifyContentevenlyLarge_xcjsm_370", "overflowvisible": "_overflowvisible_xcjsm_376", "overflowhidden": "_overflowhidden_xcjsm_380", "overflowscroll": "_overflowscroll_xcjsm_384", "overflowauto": "_overflowauto_xcjsm_388", "overflowinherit": "_overflowinherit_xcjsm_392", "overflowinitial": "_overflowinitial_xcjsm_396", "overflowXvisible": "_overflowXvisible_xcjsm_400", "overflowXhidden": "_overflowXhidden_xcjsm_404", "overflowXscroll": "_overflowXscroll_xcjsm_408", "overflowXauto": "_overflowXauto_xcjsm_412", "overflowXinherit": "_overflowXinherit_xcjsm_416", "overflowXinitial": "_overflowXinitial_xcjsm_420", "overflowYvisible": "_overflowYvisible_xcjsm_424", "overflowYhidden": "_overflowYhidden_xcjsm_428", "overflowYscroll": "_overflowYscroll_xcjsm_432", "overflowYauto": "_overflowYauto_xcjsm_436", "overflowYinherit": "_overflowYinherit_xcjsm_440", "overflowYinitial": "_overflowYinitial_xcjsm_444", "absolute": "_absolute_xcjsm_449", "fixed": "_fixed_xcjsm_453", "relative": "_relative_xcjsm_457", "sticky": "_sticky_xcjsm_461" };
+
+export {
+  Box_module_default
+};
+//# sourceMappingURL=AVREYFSM.js.map

package/dist/__chunks/AVREYFSM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:../Box/Box.module.css#css-module"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Box/Box.module.css\"; export default {\"box\":\"_box_xcjsm_1\",\"flexnone\":\"_flexnone_xcjsm_5\",\"flexgrow\":\"_flexgrow_xcjsm_9\",\"flexWrap\":\"_flexWrap_xcjsm_13\",\"alignItemscenter\":\"_alignItemscenter_xcjsm_18\",\"alignItemsstart\":\"_alignItemsstart_xcjsm_22\",\"alignItemsend\":\"_alignItemsend_xcjsm_26\",\"alignItemsstretch\":\"_alignItemsstretch_xcjsm_30\",\"alignItemsbaseline\":\"_alignItemsbaseline_xcjsm_34\",\"alignItemscenterSmall\":\"_alignItemscenterSmall_xcjsm_40\",\"alignItemsstartSmall\":\"_alignItemsstartSmall_xcjsm_44\",\"alignItemsendSmall\":\"_alignItemsendSmall_xcjsm_48\",\"alignItemsstretchSmall\":\"_alignItemsstretchSmall_xcjsm_52\",\"alignItemsbaselineSmall\":\"_alignItemsbaselineSmall_xcjsm_56\",\"alignItemscenterLarge\":\"_alignItemscenterLarge_xcjsm_63\",\"alignItemsstartLarge\":\"_alignItemsstartLarge_xcjsm_67\",\"alignItemsendLarge\":\"_alignItemsendLarge_xcjsm_71\",\"alignItemsstretchLarge\":\"_alignItemsstretchLarge_xcjsm_75\",\"alignItemsbaselineLarge\":\"_alignItemsbaselineLarge_xcjsm_79\",\"alignSelfcenter\":\"_alignSelfcenter_xcjsm_85\",\"alignSelfstart\":\"_alignSelfstart_xcjsm_89\",\"alignSelfend\":\"_alignSelfend_xcjsm_93\",\"alignSelfstretch\":\"_alignSelfstretch_xcjsm_97\",\"alignSelfbaseline\":\"_alignSelfbaseline_xcjsm_101\",\"alignSelfauto\":\"_alignSelfauto_xcjsm_105\",\"block\":\"_block_xcjsm_110\",\"flex\":\"_flex_xcjsm_5\",\"inlineBlock\":\"_inlineBlock_xcjsm_118\",\"inlineFlex\":\"_inlineFlex_xcjsm_122\",\"none\":\"_none_xcjsm_126\",\"visuallyHidden\":\"_visuallyHidden_xcjsm_130\",\"blockSmall\":\"_blockSmall_xcjsm_144\",\"flexSmall\":\"_flexSmall_xcjsm_148\",\"inlineBlockSmall\":\"_inlineBlockSmall_xcjsm_152\",\"inlineFlexSmall\":\"_inlineFlexSmall_xcjsm_156\",\"noneSmall\":\"_noneSmall_xcjsm_160\",\"visuallyHiddenSmall\":\"_visuallyHiddenSmall_xcjsm_164\",\"blockLarge\":\"_blockLarge_xcjsm_179\",\"flexLarge\":\"_flexLarge_xcjsm_183\",\"inlineBlockLarge\":\"_inlineBlockLarge_xcjsm_187\",\"inlineFlexLarge\":\"_inlineFlexLarge_xcjsm_191\",\"noneLarge\":\"_noneLarge_xcjsm_195\",\"visuallyHiddenLarge\":\"_visuallyHiddenLarge_xcjsm_199\",\"column\":\"_column_xcjsm_213\",\"row\":\"_row_xcjsm_217\",\"columnSmall\":\"_columnSmall_xcjsm_223\",\"rowSmall\":\"_rowSmall_xcjsm_227\",\"columnLarge\":\"_columnLarge_xcjsm_234\",\"rowLarge\":\"_rowLarge_xcjsm_238\",\"gap0\":\"_gap0_xcjsm_244\",\"gap1\":\"_gap1_xcjsm_248\",\"gap2\":\"_gap2_xcjsm_252\",\"gap3\":\"_gap3_xcjsm_256\",\"gap4\":\"_gap4_xcjsm_260\",\"gap5\":\"_gap5_xcjsm_264\",\"gap6\":\"_gap6_xcjsm_268\",\"gap7\":\"_gap7_xcjsm_272\",\"gap8\":\"_gap8_xcjsm_276\",\"gap9\":\"_gap9_xcjsm_280\",\"gap10\":\"_gap10_xcjsm_284\",\"gap11\":\"_gap11_xcjsm_288\",\"gap12\":\"_gap12_xcjsm_292\",\"justifyContentcenter\":\"_justifyContentcenter_xcjsm_297\",\"justifyContentstart\":\"_justifyContentstart_xcjsm_301\",\"justifyContentend\":\"_justifyContentend_xcjsm_305\",\"justifyContentbetween\":\"_justifyContentbetween_xcjsm_309\",\"justifyContentaround\":\"_justifyContentaround_xcjsm_313\",\"justifyContentevenly\":\"_justifyContentevenly_xcjsm_317\",\"justifyContentcenterSmall\":\"_justifyContentcenterSmall_xcjsm_323\",\"justifyContentstartSmall\":\"_justifyContentstartSmall_xcjsm_327\",\"justifyContentendSmall\":\"_justifyContentendSmall_xcjsm_331\",\"justifyContentbetweenSmall\":\"_justifyContentbetweenSmall_xcjsm_335\",\"justifyContentaroundSmall\":\"_justifyContentaroundSmall_xcjsm_339\",\"justifyContentevenlySmall\":\"_justifyContentevenlySmall_xcjsm_343\",\"justifyContentcenterLarge\":\"_justifyContentcenterLarge_xcjsm_350\",\"justifyContentstartLarge\":\"_justifyContentstartLarge_xcjsm_354\",\"justifyContentendLarge\":\"_justifyContentendLarge_xcjsm_358\",\"justifyContentbetweenLarge\":\"_justifyContentbetweenLarge_xcjsm_362\",\"justifyContentaroundLarge\":\"_justifyContentaroundLarge_xcjsm_366\",\"justifyContentevenlyLarge\":\"_justifyContentevenlyLarge_xcjsm_370\",\"overflowvisible\":\"_overflowvisible_xcjsm_376\",\"overflowhidden\":\"_overflowhidden_xcjsm_380\",\"overflowscroll\":\"_overflowscroll_xcjsm_384\",\"overflowauto\":\"_overflowauto_xcjsm_388\",\"overflowinherit\":\"_overflowinherit_xcjsm_392\",\"overflowinitial\":\"_overflowinitial_xcjsm_396\",\"overflowXvisible\":\"_overflowXvisible_xcjsm_400\",\"overflowXhidden\":\"_overflowXhidden_xcjsm_404\",\"overflowXscroll\":\"_overflowXscroll_xcjsm_408\",\"overflowXauto\":\"_overflowXauto_xcjsm_412\",\"overflowXinherit\":\"_overflowXinherit_xcjsm_416\",\"overflowXinitial\":\"_overflowXinitial_xcjsm_420\",\"overflowYvisible\":\"_overflowYvisible_xcjsm_424\",\"overflowYhidden\":\"_overflowYhidden_xcjsm_428\",\"overflowYscroll\":\"_overflowYscroll_xcjsm_432\",\"overflowYauto\":\"_overflowYauto_xcjsm_436\",\"overflowYinherit\":\"_overflowYinherit_xcjsm_440\",\"overflowYinitial\":\"_overflowYinitial_xcjsm_444\",\"absolute\":\"_absolute_xcjsm_449\",\"fixed\":\"_fixed_xcjsm_453\",\"relative\":\"_relative_xcjsm_457\",\"sticky\":\"_sticky_xcjsm_461\"}"],"mappings":";;;AAAsF,IAAO,qBAAQ,EAAC,OAAM,gBAAe,YAAW,qBAAoB,YAAW,qBAAoB,YAAW,sBAAqB,oBAAmB,8BAA6B,mBAAkB,6BAA4B,iBAAgB,2BAA0B,qBAAoB,+BAA8B,sBAAqB,gCAA+B,yBAAwB,mCAAkC,wBAAuB,kCAAiC,sBAAqB,gCAA+B,0BAAyB,oCAAmC,2BAA0B,qCAAoC,yBAAwB,mCAAkC,wBAAuB,kCAAiC,sBAAqB,gCAA+B,0BAAyB,oCAAmC,2BAA0B,qCAAoC,mBAAkB,6BAA4B,kBAAiB,4BAA2B,gBAAe,0BAAyB,oBAAmB,8BAA6B,qBAAoB,gCAA+B,iBAAgB,4BAA2B,SAAQ,oBAAmB,QAAO,iBAAgB,eAAc,0BAAyB,cAAa,yBAAwB,QAAO,mBAAkB,kBAAiB,6BAA4B,cAAa,yBAAwB,aAAY,wBAAuB,oBAAmB,+BAA8B,mBAAkB,8BAA6B,aAAY,wBAAuB,uBAAsB,kCAAiC,cAAa,yBAAwB,aAAY,wBAAuB,oBAAmB,+BAA8B,mBAAkB,8BAA6B,aAAY,wBAAuB,uBAAsB,kCAAiC,UAAS,qBAAoB,OAAM,kBAAiB,eAAc,0BAAyB,YAAW,uBAAsB,eAAc,0BAAyB,YAAW,uBAAsB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,SAAQ,oBAAmB,SAAQ,oBAAmB,SAAQ,oBAAmB,wBAAuB,mCAAkC,uBAAsB,kCAAiC,qBAAoB,gCAA+B,yBAAwB,oCAAmC,wBAAuB,mCAAkC,wBAAuB,mCAAkC,6BAA4B,wCAAuC,4BAA2B,uCAAsC,0BAAyB,qCAAoC,8BAA6B,yCAAwC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,4BAA2B,uCAAsC,0BAAyB,qCAAoC,8BAA6B,yCAAwC,6BAA4B,wCAAuC,6BAA4B,wCAAuC,mBAAkB,8BAA6B,kBAAiB,6BAA4B,kBAAiB,6BAA4B,gBAAe,2BAA0B,mBAAkB,8BAA6B,mBAAkB,8BAA6B,oBAAmB,+BAA8B,mBAAkB,8BAA6B,mBAAkB,8BAA6B,iBAAgB,4BAA2B,oBAAmB,+BAA8B,oBAAmB,+BAA8B,oBAAmB,+BAA8B,mBAAkB,8BAA6B,mBAAkB,8BAA6B,iBAAgB,4BAA2B,oBAAmB,+BAA8B,oBAAmB,+BAA8B,YAAW,uBAAsB,SAAQ,oBAAmB,YAAW,uBAAsB,UAAS,oBAAmB;","names":[]}

package/dist/__chunks/{NYOKOJQB.cjs → BXUTWPRU.cjs}

@@ -1,16 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _ZX7LO5H4cjs = require('./ZX7LO5H4.cjs');
+var _DSMWIJEYcjs = require('./DSMWIJEY.cjs');
 
 
-var _ULMCQ7EAcjs = require('./ULMCQ7EA.cjs');
+var _VL5ONCQDcjs = require('./VL5ONCQD.cjs');
 
 
 var _MF7LLV7Vcjs = require('./MF7LLV7V.cjs');
 
 
-var _SBCGYV6Ncjs = require('./SBCGYV6N.cjs');
+var _IL22HCBFcjs = require('./IL22HCBF.cjs');
 
 
 var _LLFHCGRAcjs = require('./LLFHCGRA.cjs');
@@ -53,9 +53,9 @@ var AriaPopover = _react.forwardRef.call(void 0,
           offset: 8,
           containerPadding: 16,
           className: _classnames2.default.call(void 0, [
-            _SBCGYV6Ncjs.Box_module_default.box,
-            _SBCGYV6Ncjs.Box_module_default.flex,
-            _SBCGYV6Ncjs.Box_module_default.column,
+            _IL22HCBFcjs.Box_module_default.box,
+            _IL22HCBFcjs.Box_module_default.flex,
+            _IL22HCBFcjs.Box_module_default.column,
             _MF7LLV7Vcjs.layout_module_default.fullMaxWidth,
             _MF7LLV7Vcjs.layout_module_default.fullMaxHeight,
             _MF7LLV7Vcjs.layout_module_default.visibilityVisible,
@@ -100,7 +100,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
   } = props;
   const modal = !children || modalProp;
   const modalNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _ZX7LO5H4cjs.ModalDialog_default,
+    _DSMWIJEYcjs.ModalDialog_default,
     {
       accessibilityLabel,
       accessibilityCloseLabel,
@@ -117,7 +117,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
     {
       placement: _LLFHCGRAcjs.syntaxToReactAriaPlacement.call(void 0, placement),
       onChangeContentVisibility,
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ULMCQ7EAcjs.Dialog_default, { accessibilityLabel, "data-testid": dataTestId, children: content })
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VL5ONCQDcjs.Dialog_default, { accessibilityLabel, "data-testid": dataTestId, children: content })
     }
   );
   if (!children)
@@ -141,4 +141,4 @@ var Popover_default = Popover;
 
 
 exports.AriaPopover = AriaPopover; exports.Popover_default = Popover_default;
-//# sourceMappingURL=NYOKOJQB.cjs.map
+//# sourceMappingURL=BXUTWPRU.cjs.map

package/dist/__chunks/CXD34CNP.cjs

@@ -0,0 +1,147 @@
+"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 _27K33DEMcjs = require('./27K33DEM.cjs');
+
+
+var _6W5WRS53cjs = require('./6W5WRS53.cjs');
+
+
+var _X2SDR4SDcjs = require('./X2SDR4SD.cjs');
+
+// src/Avatar/Avatar.tsx
+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" };
+
+// src/Avatar/Avatar.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var sizeToIconStyles = {
+  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 = {
+  sm: -16,
+  md: -28,
+  lg: -48,
+  xl: -88
+};
+var sizeToMarginCambio = {
+  sm: -12,
+  md: -20,
+  lg: -28,
+  xl: -28
+};
+function AvatarInternal({
+  accessibilityLabel,
+  icon,
+  outline,
+  size = "md",
+  src
+}) {
+  const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _classnames2.default.call(void 0, 
+        Avatar_module_default.avatar,
+        themeName === "classic" ? Avatar_module_default[size] : Avatar_module_default[`${size}Cambio`]
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "img",
+          {
+            alt: accessibilityLabel,
+            src,
+            className: _classnames2.default.call(void 0, 
+              Avatar_module_default.avatarImage,
+              themeName === "classic" && Avatar_module_default.avatarImageClassic,
+              themeName === "cambio" && outline && Avatar_module_default.avatarImageOutlineCambio,
+              themeName === "classic" ? Avatar_module_default[size] : Avatar_module_default[`${size}Cambio`]
+            )
+          }
+        ),
+        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,
+          {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            position: "absolute",
+            backgroundColor: "white",
+            dangerouslySetInlineStyle: {
+              __style: _X2SDR4SDcjs.__spreadValues.call(void 0, {
+                border: "1px solid white"
+              }, sizeToIconStyles[size])
+            },
+            rounding: "full",
+            children: icon
+          }
+        ) })
+      ]
+    }
+  );
+}
+var Avatar = ({
+  accessibilityLabel,
+  icon,
+  size = "md",
+  src
+}) => {
+  const avatarGroupContext = _LLI3KZARcjs.useAvatarGroup.call(void 0, );
+  const { themeName } = _6W5WRS53cjs.useTheme.call(void 0, );
+  if (avatarGroupContext !== null) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _27K33DEMcjs.Box_default,
+      {
+        position: "relative",
+        dangerouslySetInlineStyle: {
+          __style: {
+            marginInlineEnd: themeName === "cambio" ? sizeToMarginCambio[avatarGroupContext.size] : sizeToMarginClassic[avatarGroupContext.size]
+          }
+        },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _27K33DEMcjs.Box_default,
+          {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "white",
+            rounding: "full",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              AvatarInternal,
+              {
+                accessibilityLabel,
+                icon,
+                outline: themeName === "cambio",
+                size: avatarGroupContext.size,
+                src
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    AvatarInternal,
+    {
+      accessibilityLabel,
+      icon,
+      size,
+      src
+    }
+  );
+};
+var Avatar_default = Avatar;
+
+
+
+exports.Avatar_default = Avatar_default;
+//# sourceMappingURL=CXD34CNP.cjs.map

package/dist/__chunks/CXD34CNP.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  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  sm: -16,\n  md: -28,\n  lg: -48,\n  xl: -88,\n} as const;\n\nconst sizeToMarginCambio = {\n  sm: -12,\n  md: -20,\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?: \"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   * * `sm`: 32px\n   * * `md`: 48px\n   * * `lg`: 64px\n   * * `xl`: 64px (deprecated, maps to `lg` in Cambio)\n   *\n   * @defaultValue `md`\n   */\n  size?: \"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_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\"}"]}

package/dist/__chunks/D63KNAL7.js

@@ -0,0 +1,63 @@
+"use client"
+import {
+  Box_default
+} from "./YGKZCJF5.js";
+import {
+  Typography_default
+} from "./2A52YKFW.js";
+import {
+  useTheme
+} from "./FY4WHNNR.js";
+
+// css-module:./Badge.module.css#css-module
+var Badge_module_default = { "icon": "_icon_1g9xb_1" };
+
+// src/Badge/Badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var textColorForBackgroundColor = (color) => {
+  switch (color) {
+    case "gray200":
+    case "yellow700":
+      return "gray900";
+    default:
+      return "white";
+  }
+};
+var Badge = ({
+  icon: Icon,
+  text,
+  color = "primary700"
+}) => {
+  const { themeName } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box_default,
+    {
+      display: themeName === "classic" ? "inlineBlock" : "inlineFlex",
+      paddingX: themeName === "classic" ? 2 : 3,
+      paddingY: 1,
+      rounding: themeName === "classic" ? "full" : "sm",
+      backgroundColor: color,
+      alignItems: "center",
+      justifyContent: "center",
+      height: themeName === "cambio" ? 32 : void 0,
+      children: /* @__PURE__ */ jsx(Typography_default, { color: textColorForBackgroundColor(color), children: /* @__PURE__ */ jsxs(Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: Badge_module_default.icon }),
+        /* @__PURE__ */ jsx(
+          Typography_default,
+          {
+            color: textColorForBackgroundColor(color),
+            size: 100,
+            weight: themeName === "classic" ? "bold" : "medium",
+            children: text
+          }
+        )
+      ] }) })
+    }
+  );
+};
+var Badge_default = Badge;
+
+export {
+  Badge_default
+};
+//# sourceMappingURL=D63KNAL7.js.map

package/dist/__chunks/D63KNAL7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst BadgeColor = [\n  \"gray200\",\n  \"gray900\",\n  \"destructive700\",\n  \"orange700\",\n  \"yellow700\",\n  \"success700\",\n  \"primary700\",\n  \"purple700\",\n] as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof BadgeColor)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray200\":\n    case \"yellow700\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n};\n\n/**\n * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.\n */\nconst Badge = ({\n  icon: Icon,\n  text,\n  color = \"primary700\",\n}: {\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The text to display inside the badge\n   */\n  text: string;\n  /**\n   * The color of the badge\n   *\n   * @defaultValue \"primary700\"\n   */\n  color?: (typeof BadgeColor)[number];\n}): JSX.Element => {\n  const { themeName } = useTheme();\n\n  return (\n    <Box\n      display={themeName === \"classic\" ? \"inlineBlock\" : \"inlineFlex\"}\n      paddingX={themeName === \"classic\" ? 2 : 3}\n      paddingY={1}\n      rounding={themeName === \"classic\" ? \"full\" : \"sm\"}\n      backgroundColor={color}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      height={themeName === \"cambio\" ? 32 : undefined}\n    >\n      <Typography color={textColorForBackgroundColor(color)}>\n        <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n          {Icon && <Icon className={styles.icon} />}\n          <Typography\n            color={textColorForBackgroundColor(color)}\n            size={100}\n            weight={themeName === \"classic\" ? \"bold\" : \"medium\"}\n          >\n            {text}\n          </Typography>\n        </Box>\n      </Typography>\n    </Box>\n  );\n};\n\nexport default Badge;\n"],"mappings":";;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;ACiExH,SACW,KADX;AAjDR,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,QAAQ,CAAC;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,QAAQ;AACV,MAemB;AACjB,QAAM,EAAE,UAAU,IAAI,SAAS;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,cAAc,YAAY,gBAAgB;AAAA,MACnD,UAAU,cAAc,YAAY,IAAI;AAAA,MACxC,UAAU;AAAA,MACV,UAAU,cAAc,YAAY,SAAS;AAAA,MAC7C,iBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,QAAQ,cAAc,WAAW,KAAK;AAAA,MAEtC,8BAAC,sBAAW,OAAO,4BAA4B,KAAK,GAClD,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,gBAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM;AAAA,QACvC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,4BAA4B,KAAK;AAAA,YACxC,MAAM;AAAA,YACN,QAAQ,cAAc,YAAY,SAAS;AAAA,YAE1C;AAAA;AAAA,QACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/__chunks/{ZX7LO5H4.cjs → DSMWIJEY.cjs}

@@ -1,19 +1,19 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
 
 
-var _H44LFJ2Lcjs = require('./H44LFJ2L.cjs');
+var _7P7YX4X2cjs = require('./7P7YX4X2.cjs');
 
 
-var _ULMCQ7EAcjs = require('./ULMCQ7EA.cjs');
+var _VL5ONCQDcjs = require('./VL5ONCQD.cjs');
 
 
 var _PLUVW6AMcjs = require('./PLUVW6AM.cjs');
 
 
-var _SBCGYV6Ncjs = require('./SBCGYV6N.cjs');
+var _IL22HCBFcjs = require('./IL22HCBF.cjs');
 
 
-var _WJRIAS4Wcjs = require('./WJRIAS4W.cjs');
+var _27K33DEMcjs = require('./27K33DEM.cjs');
 
 
 var _E5P6WRJDcjs = require('./E5P6WRJD.cjs');
@@ -52,13 +52,13 @@ function XIcon({ color = "#000" }) {
 var AriaModalOverlay = _react.forwardRef.call(void 0, function AriaModalOverlay2(_a, ref) {
   var _b = _a, { children } = _b, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _b, ["children"]);
   const className = _classnames2.default.call(void 0, [
-    _SBCGYV6Ncjs.Box_module_default.box,
-    _SBCGYV6Ncjs.Box_module_default.fixed,
-    _SBCGYV6Ncjs.Box_module_default.box,
-    _SBCGYV6Ncjs.Box_module_default.flex,
-    _SBCGYV6Ncjs.Box_module_default.column,
-    _SBCGYV6Ncjs.Box_module_default.alignItemscenter,
-    _SBCGYV6Ncjs.Box_module_default.justifyContentcenter,
+    _IL22HCBFcjs.Box_module_default.box,
+    _IL22HCBFcjs.Box_module_default.fixed,
+    _IL22HCBFcjs.Box_module_default.box,
+    _IL22HCBFcjs.Box_module_default.flex,
+    _IL22HCBFcjs.Box_module_default.column,
+    _IL22HCBFcjs.Box_module_default.alignItemscenter,
+    _IL22HCBFcjs.Box_module_default.justifyContentcenter,
     _PLUVW6AMcjs.padding_module_default.paddingX4,
     _PLUVW6AMcjs.padding_module_default.paddingY4,
     ModalDialog_module_default.modalOverlay
@@ -68,7 +68,7 @@ var AriaModalOverlay = _react.forwardRef.call(void 0, function AriaModalOverlay2
 var AriaModal = _react.forwardRef.call(void 0, 
   function AriaModal2(_a, ref) {
     var _b = _a, { children: childrenProp, onChangeContentVisibility } = _b, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _b, ["children", "onChangeContentVisibility"]);
-    const className = _classnames2.default.call(void 0, [_SBCGYV6Ncjs.Box_module_default.box, ModalDialog_module_default.modal]);
+    const className = _classnames2.default.call(void 0, [_IL22HCBFcjs.Box_module_default.box, ModalDialog_module_default.modal]);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Modal, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, { ref }, _reactaria.mergeProps.call(void 0, { className }, otherProps)), { children: _reactariacomponents.composeRenderProps.call(void 0, 
       childrenProp,
       (children, { isEntering, isExiting }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
@@ -113,13 +113,13 @@ var ModalDialog = _react.forwardRef.call(void 0,
             "aria-label": accessibilityLabel,
             onChangeContentVisibility,
             children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              _ULMCQ7EAcjs.Dialog_default,
+              _VL5ONCQDcjs.Dialog_default,
               {
                 accessibilityLabel,
                 "data-testid": dataTestId,
                 children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _WJRIAS4Wcjs.Box_default,
+                    _27K33DEMcjs.Box_default,
                     {
                       position: "absolute",
                       padding: 2,
@@ -130,7 +130,7 @@ var ModalDialog = _react.forwardRef.call(void 0,
                         }
                       },
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _H44LFJ2Lcjs.IconButton_default,
+                        _7P7YX4X2cjs.IconButton_default,
                         {
                           onClick: () => state.close(),
                           color: "tertiary",
@@ -157,4 +157,4 @@ var ModalDialog_default = ModalDialog;
 
 
 exports.AriaModalOverlay = AriaModalOverlay; exports.AriaModal = AriaModal; exports.ModalDialog_default = ModalDialog_default;
-//# sourceMappingURL=ZX7LO5H4.cjs.map
+//# sourceMappingURL=DSMWIJEY.cjs.map

package/dist/__chunks/{XFP4MBWD.js → EE5VI7K5.js}

@@ -8,4 +8,4 @@ export {
   ColorBaseDestructive700,
   ColorBaseGray800
 };
-//# sourceMappingURL=XFP4MBWD.js.map
+//# sourceMappingURL=EE5VI7K5.js.map

package/dist/__chunks/{XFP4MBWD.js.map → EE5VI7K5.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 08 Mar 2024 15:27:15 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 15 Mar 2024 23:32:01 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}

package/dist/__chunks/FWQWL53Q.js

@@ -0,0 +1,29 @@
+"use client"
+import {
+  colors_module_default
+} from "./JHJZ5COD.js";
+import {
+  useTheme
+} from "./FY4WHNNR.js";
+
+// css-module:./Divider.module.css#css-module
+var Divider_module_default = { "divider": "_divider_1uaon_1", "dividerClassic": "_dividerClassic_1uaon_9" };
+
+// src/Divider/Divider.tsx
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+function Divider() {
+  const { themeName } = useTheme();
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      className: themeName === "classic" ? classNames(Divider_module_default.divider, Divider_module_default.dividerClassic) : classNames(Divider_module_default.divider, colors_module_default.cambioGray370BackgroundColor)
+    }
+  );
+}
+Divider.displayName = "Divider";
+
+export {
+  Divider
+};
+//# sourceMappingURL=FWQWL53Q.js.map

package/dist/__chunks/FWQWL53Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Divider.module.css#css-module","../../src/Divider/Divider.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1uaon_1\",\"dividerClassic\":\"_dividerClassic_1uaon_9\"}","import { useTheme } from \"../ThemeProvider/ThemeProvider\";\nimport styles from \"./Divider.module.css\";\nimport classNames from \"classnames\";\nimport colorStyles from \"../colors/colors.module.css\";\n\n/**\n * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider(): React.ReactElement {\n  const { themeName } = useTheme();\n  return (\n    <hr\n      className={\n        themeName === \"classic\"\n          ? classNames(styles.divider, styles.dividerClassic)\n          : classNames(styles.divider, colorStyles.cambioGray370BackgroundColor)\n      }\n    />\n  );\n}\n\nDivider.displayName = \"Divider\";\n"],"mappings":";;;;;;;;;AAA8F,IAAO,yBAAQ,EAAC,WAAU,oBAAmB,kBAAiB,0BAAyB;;;ACErL,OAAO,gBAAgB;AASnB;AAHW,SAAR,UAA+C;AACpD,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WACE,cAAc,YACV,WAAW,uBAAO,SAAS,uBAAO,cAAc,IAChD,WAAW,uBAAO,SAAS,sBAAY,4BAA4B;AAAA;AAAA,EAE3E;AAEJ;AAEA,QAAQ,cAAc;","names":[]}

package/dist/__chunks/{RN3PLPAG.js → FY4WHNNR.js}

@@ -101,12 +101,10 @@ ThemeContext.displayName = "ThemeContext";
 var classicToCambioKeyLookup = {
   "color-base-black": "color-cambio-black",
   "color-base-destructive-100": "color-cambio-destructive-100",
-  "color-base-destructive-200": void 0,
-  // Deprecated - to be deleted
+  "color-base-destructive-200": "color-cambio-destructive-300",
   "color-base-destructive-300": "color-cambio-destructive-300",
   "color-base-destructive-700": "color-cambio-destructive-700",
-  "color-base-destructive-800": void 0,
-  // Deprecated - to be deleted
+  "color-base-destructive-800": "color-cambio-destructive-900",
   "color-base-destructive-900": "color-cambio-destructive-900",
   "color-base-gray-10": "color-cambio-gray-370",
   "color-base-gray-30": "color-cambio-gray-370",
@@ -136,12 +134,10 @@ var classicToCambioKeyLookup = {
   "color-base-primary-800": "color-cambio-gray-800",
   "color-base-primary-900": "color-cambio-gray-900",
   "color-base-success-100": "color-cambio-success-100",
-  "color-base-success-200": void 0,
-  // Deprecated - to be deleted
+  "color-base-success-200": "color-cambio-success-300",
   "color-base-success-300": "color-cambio-success-300",
   "color-base-success-700": "color-cambio-success-700",
-  "color-base-success-800": void 0,
-  // Deprecated - to be deleted
+  "color-base-success-800": "color-cambio-success-900",
   "color-base-success-900": "color-cambio-success-900",
   "color-base-purple-100": void 0,
   // Deprecated - to be deleted
@@ -216,4 +212,4 @@ export {
   ThemeProvider,
   useTheme
 };
-//# sourceMappingURL=RN3PLPAG.js.map
+//# sourceMappingURL=FY4WHNNR.js.map

package/dist/__chunks/FY4WHNNR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ThemeProvider/ThemeProvider.tsx","../../../syntax-design-tokens/dist/json/variables.json"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport variables from \"@cambly/syntax-design-tokens/dist/json/variables.json\";\n\ntype ThemeName = \"classic\" | \"cambio\";\n\ntype Theme = {\n  themeName: ThemeName;\n};\n\nconst ThemeContext = React.createContext<Theme>({\n  themeName: \"classic\",\n});\nThemeContext.displayName = \"ThemeContext\";\n\nconst classicToCambioKeyLookup = {\n  \"color-base-black\": \"color-cambio-black\",\n  \"color-base-destructive-100\": \"color-cambio-destructive-100\",\n  \"color-base-destructive-200\": \"color-cambio-destructive-300\",\n  \"color-base-destructive-300\": \"color-cambio-destructive-300\",\n  \"color-base-destructive-700\": \"color-cambio-destructive-700\",\n  \"color-base-destructive-800\": \"color-cambio-destructive-900\",\n  \"color-base-destructive-900\": \"color-cambio-destructive-900\",\n  \"color-base-gray-10\": \"color-cambio-gray-370\",\n  \"color-base-gray-30\": \"color-cambio-gray-370\",\n  \"color-base-gray-60\": \"color-cambio-gray-870\",\n  \"color-base-gray-80\": \"color-cambio-gray-870\",\n  \"color-base-gray-100\": \"color-cambio-gray-100\",\n  \"color-base-gray-200\": \"color-cambio-gray-200\",\n  \"color-base-gray-300\": \"color-cambio-gray-300\",\n  \"color-base-gray-700\": \"color-cambio-gray-700\",\n  \"color-base-gray-800\": \"color-cambio-gray-800\",\n  \"color-base-gray-900\": \"color-cambio-gray-900\",\n  \"color-base-orange-100\": undefined, // Deprecated - to be deleted\n  \"color-base-orange-200\": undefined, // Deprecated - to be deleted\n  \"color-base-orange-300\": undefined, // Deprecated - to be deleted\n  \"color-base-orange-700\": \"color-cambio-orange\",\n  \"color-base-orange-800\": undefined, // Deprecated - to be deleted\n  \"color-base-orange-900\": undefined, // Deprecated - to be deleted\n  \"color-base-primary-100\": \"color-cambio-gray-100\",\n  \"color-base-primary-200\": \"color-cambio-gray-200\",\n  \"color-base-primary-300\": \"color-cambio-gray-300\",\n  \"color-base-primary-700\": \"color-cambio-gray-700\",\n  \"color-base-primary-800\": \"color-cambio-gray-800\",\n  \"color-base-primary-900\": \"color-cambio-gray-900\",\n  \"color-base-success-100\": \"color-cambio-success-100\",\n  \"color-base-success-200\": \"color-cambio-success-300\",\n  \"color-base-success-300\": \"color-cambio-success-300\",\n  \"color-base-success-700\": \"color-cambio-success-700\",\n  \"color-base-success-800\": \"color-cambio-success-900\",\n  \"color-base-success-900\": \"color-cambio-success-900\",\n  \"color-base-purple-100\": undefined, // Deprecated - to be deleted\n  \"color-base-purple-200\": undefined, // Deprecated - to be deleted\n  \"color-base-purple-300\": undefined, // Deprecated - to be deleted\n  \"color-base-purple-700\": \"color-cambio-purple\",\n  \"color-base-purple-800\": undefined, // Deprecated - to be deleted\n  \"color-base-purple-900\": undefined, // Deprecated - to be deleted\n  \"color-base-yellow-100\": undefined, // Deprecated - to be deleted\n  \"color-base-yellow-200\": undefined, // Deprecated - to be deleted\n  \"color-base-yellow-300\": undefined, // Deprecated - to be deleted\n  \"color-base-yellow-700\": \"color-cambio-yellow-700\",\n  \"color-base-yellow-800\": undefined, // Deprecated - to be deleted\n  \"color-base-yellow-900\": undefined, // Deprecated - to be deleted\n  \"color-base-white\": \"color-cambio-white\",\n};\n\nfunction stylesForTheme(themeName: ThemeName) {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const tokenVariables: Record<string, string> = variables;\n  return `\n    :root {\n      ${Object.entries(tokenVariables)\n        .filter(([key]) => {\n          return themeName === \"classic\" ? !key.includes(\"cambio\") : true;\n        })\n        .map(([key, value]) => {\n          // Replace classic values with cambio ones if they exist\n          if (\n            themeName === \"cambio\" &&\n            classicToCambioKeyLookup[\n              key as keyof typeof classicToCambioKeyLookup\n            ]\n          ) {\n            return [\n              key,\n              tokenVariables[\n                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n                classicToCambioKeyLookup[\n                  key as keyof typeof classicToCambioKeyLookup\n                ]!\n              ],\n            ];\n          }\n          // `elevation` is a classic only concept\n          if (themeName === \"cambio\" && key.includes(\"elevation\")) {\n            return [null, null];\n          }\n          return [key, value];\n        })\n        .map(([key, value]) => (key && value ? `--${key}: ${value};` : null))\n        .filter(Boolean)\n        .join(\"\\n\")}\n    }\n  `;\n}\n\nexport default function ThemeProvider({\n  themeName = \"classic\",\n  children,\n}: {\n  themeName: ThemeName;\n  children: React.ReactNode;\n}): React.ReactElement {\n  const value = useMemo(() => ({ themeName }), [themeName]);\n\n  const innerStyles = useMemo(() => stylesForTheme(themeName), [themeName]);\n\n  return (\n    <ThemeContext.Provider value={value}>\n      <style\n        dangerouslySetInnerHTML={{ __html: innerStyles }}\n        data-testid=\"themeprovider-style\"\n      ></style>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nexport function useTheme(): Theme {\n  return React.useContext(ThemeContext);\n}\n","{\n  \"color-base-black\": \"#000000\",\n  \"color-base-destructive-100\": \"#fef3f5\",\n  \"color-base-destructive-200\": \"#fad6de\",\n  \"color-base-destructive-300\": \"#f2a2b2\",\n  \"color-base-destructive-700\": \"#d32a4b\",\n  \"color-base-destructive-800\": \"#81162c\",\n  \"color-base-destructive-900\": \"#55101d\",\n  \"color-base-gray-10\": \"rgba(203, 203, 203, 0.5)\",\n  \"color-base-gray-30\": \"rgba(0, 0, 0, 0.3)\",\n  \"color-base-gray-60\": \"rgba(0, 0, 0, 0.6)\",\n  \"color-base-gray-80\": \"rgba(0, 0, 0, 0.8)\",\n  \"color-base-gray-100\": \"#f7f7f7\",\n  \"color-base-gray-200\": \"#f0f0f0\",\n  \"color-base-gray-300\": \"#d0d0d0\",\n  \"color-base-gray-700\": \"#767676\",\n  \"color-base-gray-800\": \"#353535\",\n  \"color-base-gray-900\": \"#191919\",\n  \"color-base-orange-100\": \"#fdf2f0\",\n  \"color-base-orange-200\": \"#f6cdc4\",\n  \"color-base-orange-300\": \"#ec9987\",\n  \"color-base-orange-700\": \"#c34124\",\n  \"color-base-orange-800\": \"#732818\",\n  \"color-base-orange-900\": \"#4d1a10\",\n  \"color-base-primary-100\": \"#eff6fa\",\n  \"color-base-primary-200\": \"#c1dbe7\",\n  \"color-base-primary-300\": \"#84b7d0\",\n  \"color-base-primary-700\": \"#236482\",\n  \"color-base-primary-800\": \"#274858\",\n  \"color-base-primary-900\": \"#1b303b\",\n  \"color-base-success-100\": \"#eff7f1\",\n  \"color-base-success-200\": \"#bddcc6\",\n  \"color-base-success-300\": \"#81ba92\",\n  \"color-base-success-700\": \"#397b4d\",\n  \"color-base-success-800\": \"#2d4936\",\n  \"color-base-success-900\": \"#1e3124\",\n  \"color-base-purple-100\": \"#f9f5fa\",\n  \"color-base-purple-200\": \"#e8dceb\",\n  \"color-base-purple-300\": \"#cdb4d3\",\n  \"color-base-purple-700\": \"#8b5f95\",\n  \"color-base-purple-800\": \"#523b58\",\n  \"color-base-purple-900\": \"#37273b\",\n  \"color-base-yellow-100\": \"#fdf5d9\",\n  \"color-base-yellow-200\": \"#fbe8a3\",\n  \"color-base-yellow-300\": \"#f8d663\",\n  \"color-base-yellow-700\": \"#ffc929\",\n  \"color-base-yellow-800\": \"#765f1c\",\n  \"color-base-yellow-900\": \"#3b3009\",\n  \"color-base-white\": \"#ffffff\",\n  \"color-cambio-black\": \"#050500\",\n  \"color-cambio-white\": \"#ffffff\",\n  \"color-cambio-gray-100\": \"#faf4eb\",\n  \"color-cambio-gray-200\": \"#e4dbd3\",\n  \"color-cambio-gray-300\": \"#beb4ab\",\n  \"color-cambio-gray-370\": \"rgba(190, 180, 171, 0.7)\",\n  \"color-cambio-gray-700\": \"#888077\",\n  \"color-cambio-gray-800\": \"#5c554d\",\n  \"color-cambio-gray-870\": \"rgba(92, 85, 77, 0.7)\",\n  \"color-cambio-gray-900\": \"#312b23\",\n  \"color-cambio-destructive-100\": \"#ffdeda\",\n  \"color-cambio-destructive-300\": \"#ff8071\",\n  \"color-cambio-destructive-370\": \"rgba(255, 128, 113, 0.7)\",\n  \"color-cambio-destructive-700\": \"#c93f32\",\n  \"color-cambio-destructive-770\": \"rgba(201, 63, 50, 0.7)\",\n  \"color-cambio-destructive-900\": \"#6d0002\",\n  \"color-cambio-success-100\": \"#daf2c8\",\n  \"color-cambio-success-300\": \"#84ce64\",\n  \"color-cambio-success-370\": \"rgba(132, 206, 100, 0.7)\",\n  \"color-cambio-success-700\": \"#3c7f20\",\n  \"color-cambio-success-770\": \"rgba(60, 127, 32, 0.7)\",\n  \"color-cambio-success-900\": \"#103e00\",\n  \"color-cambio-red\": \"#f56e56\",\n  \"color-cambio-orange\": \"#ff8f57\",\n  \"color-cambio-tan\": \"#ffb47d\",\n  \"color-cambio-cream\": \"#fffad1\",\n  \"color-cambio-purple\": \"#6840a8\",\n  \"color-cambio-lilac\": \"#b59ef0\",\n  \"color-cambio-thistle\": \"#d69ca4\",\n  \"color-cambio-pink\": \"#ffccea\",\n  \"color-cambio-navy\": \"#191142\",\n  \"color-cambio-teal\": \"#44a6cf\",\n  \"color-cambio-slate\": \"#7c9fc6\",\n  \"color-cambio-sky\": \"#b1e8fc\",\n  \"color-cambio-yellow-700\": \"#ffe733\",\n  \"color-cambio-transparent-full\": \"rgba(0, 0, 0, 0)\",\n  \"elevation-400\": \"0px 16px 32px 0px #00000040\"\n}\n"],"mappings":"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","names":[]}