@cambly/syntax-core 21.8.0 → 21.10.0

package/dist/LinkTapArea/LinkTapArea.css

@@ -0,0 +1,60 @@
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/TapArea/TapArea.module.css/#css-module-data */
+._tapArea_1gbc8_1 {
+  box-sizing: border-box;
+}
+._fullHeight_1gbc8_5 {
+  height: 100%;
+}
+._fullWidth_1gbc8_9 {
+  width: 100%;
+}
+._disabled_1gbc8_13 {
+  filter: opacity(50%);
+  background-image: none;
+  transform: none;
+  cursor: auto;
+}
+._enabled_1gbc8_20 {
+  cursor: pointer;
+}
+._enabled_1gbc8_20:hover {
+  cursor: pointer;
+}
+._enabled_1gbc8_20:focus-visible {
+  box-shadow: 0 0 0 4px #000;
+  outline: solid 2px #fff;
+}
+._overlay_1gbc8_33 {
+  background-color: rgba(0, 0, 0, 0.1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+._hoveredOrFocussed_1gbc8_43 {
+  position: relative;
+}
+
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/rounding.module.css/#css-module-data */
+._roundingsm_1j4mo_2 {
+  border-radius: 4px;
+}
+._roundingmd_1j4mo_6 {
+  border-radius: 8px;
+}
+._roundingfull_1j4mo_10 {
+  border-radius: 999px;
+}
+
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkTapArea/LinkTapArea.module.css/#css-module-data */
+._linkTapArea_1nzmd_1 {
+  box-sizing: border-box;
+  text-decoration: none;
+}
+._linkTapArea_1nzmd_1:focus,
+._linkTapArea_1nzmd_1:hover {
+  text-decoration: none;
+}
+/*# sourceMappingURL=LinkTapArea.css.map */

package/dist/LinkTapArea/LinkTapArea.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/TapArea/TapArea.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/rounding.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkTapArea/LinkTapArea.module.css/#css-module-data"],"sourcesContent":["._tapArea_1gbc8_1 {\n  box-sizing: border-box;\n}\n\n._fullHeight_1gbc8_5 {\n  height: 100%;\n}\n\n._fullWidth_1gbc8_9 {\n  width: 100%;\n}\n\n._disabled_1gbc8_13 {\n  filter: opacity(50%);\n  background-image: none;\n  transform: none;\n  cursor: auto;\n}\n\n._enabled_1gbc8_20 {\n  cursor: pointer;\n}\n\n._enabled_1gbc8_20:hover {\n  cursor: pointer;\n}\n\n._enabled_1gbc8_20:focus-visible {\n  box-shadow: 0 0 0 4px #000;\n  outline: solid 2px #fff;\n}\n\n._overlay_1gbc8_33 {\n  background-color: rgba(0, 0, 0, 0.1);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n._hoveredOrFocussed_1gbc8_43 {\n  position: relative;\n}\n","/* Border Radius */\n._roundingsm_1j4mo_2 {\n  border-radius: 4px;\n}\n\n._roundingmd_1j4mo_6 {\n  border-radius: 8px;\n}\n\n._roundingfull_1j4mo_10 {\n  border-radius: 999px;\n}\n","._linkTapArea_1nzmd_1 {\n  box-sizing: border-box;\n  text-decoration: none;\n}\n\n._linkTapArea_1nzmd_1:focus,\n._linkTapArea_1nzmd_1:hover {\n  text-decoration: none;\n}\n"],"mappings":";AAAA;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC1CF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACVF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;","names":[]}

package/dist/LinkTapArea/LinkTapArea.d.ts

@@ -0,0 +1,74 @@
+import React__default, { ReactNode, HtmlHTMLAttributes } from 'react';
+
+declare const LinkTapArea: React__default.ForwardRefExoticComponent<React__default.AriaAttributes & {
+    /**
+     * The children to be rendered inside the tap area.
+     */
+    children?: ReactNode;
+    /**
+     * The link that the LinkTapArea should route to.
+     *
+     */
+    href?: string | undefined;
+    /**
+     * The target attribute specifies where to open the linked document.
+     *
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+    /**
+     * The rel attribute specifies the relationship between the document and the link.
+     *
+     */
+    rel?: HtmlHTMLAttributes<HTMLAnchorElement>["rel"];
+    /**
+     * The label to be used for accessibility
+     */
+    accessibilityLabel?: string | undefined;
+    /**
+     * Test id for the tap area
+     */
+    "data-testid"?: string | undefined;
+    /**
+     * If `true`, the tap area will be disabled
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If `true`, the tap area will be full height
+     */
+    fullHeight?: boolean | undefined;
+    /**
+     * If `true`, the tap area will be full width
+     */
+    fullWidth?: boolean | undefined;
+    /**
+     * The callback to be called when the tap area is clicked
+     */
+    onClick: (event: React__default.SyntheticEvent<HTMLAnchorElement>) => void;
+    /**
+     * The callback to be called when the tap area is hovered
+     */
+    onMouseEnter?: ((event: React__default.SyntheticEvent<HTMLAnchorElement>) => void) | undefined;
+    /**
+     * The callback to be called when the tap area is no longer hovered
+     */
+    onMouseLeave?: ((event: React__default.SyntheticEvent<HTMLAnchorElement>) => void) | undefined;
+    /**
+     * Border radius of the tap area.
+     *
+     * * `none`: 0px
+     * * `sm`: 8px
+     * * `md`: 12px
+     * * `full`: 999px
+     *
+     * @defaultValue "none"
+     */
+    rounding?: "none" | "md" | "sm" | "full" | undefined;
+    /**
+     * The tab index of the tap area
+     */
+    tabIndex?: 0 | -1 | undefined;
+} & React__default.RefAttributes<HTMLAnchorElement>>;
+
+export { LinkTapArea as default };

package/dist/LinkTapArea/LinkTapArea.js

@@ -0,0 +1,12 @@
+"use client"
+import {
+  LinkTapArea_default
+} from "../__chunks/LD67LLZE.js";
+import "../__chunks/4U4UW4AK.js";
+import "../__chunks/KBIW5XV4.js";
+import "../__chunks/JB65NEXK.js";
+import "../__chunks/UWGNJENA.js";
+export {
+  LinkTapArea_default as default
+};
+//# sourceMappingURL=LinkTapArea.js.map

package/dist/LinkTapArea/LinkTapArea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/RichSelect/RichSelectList.d.ts

@@ -39,6 +39,10 @@ type RichSelectListProps = RichSelectBoxProps & {
      * @defaultValue white
      */
     color?: "white" | "clear";
+    /**
+     * Z-index of the popover
+     */
+    zIndex?: number;
 };
 /**
  * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.

package/dist/RichSelect/RichSelectList.js

@@ -1,13 +1,13 @@
 "use client"
 import {
   RichSelectList_default
-} from "../__chunks/KRD2PINC.js";
+} from "../__chunks/A4YV2G5E.js";
 import "../__chunks/STXMQR3I.js";
 import "../__chunks/TALOD4CL.js";
 import "../__chunks/576PJXFR.js";
 import "../__chunks/KEJPRZJ5.js";
 import "../__chunks/4U4UW4AK.js";
-import "../__chunks/4UNKXRQE.js";
+import "../__chunks/YSRQYMMU.js";
 import "../__chunks/3CVV6PAD.js";
 import "../__chunks/36DG472B.js";
 import "../__chunks/2BHS5CFG.js";
@@ -23,7 +23,8 @@ import "../__chunks/KKADUD65.js";
 import "../__chunks/WAGE57PF.js";
 import "../__chunks/JVYDT3KG.js";
 import "../__chunks/ODMJANSX.js";
-import "../__chunks/S3C44SBB.js";
+import "../__chunks/OXEXFQAN.js";
+import "../__chunks/4U4UW4AK.js";
 import "../__chunks/AXNRGUDZ.js";
 import "../__chunks/YCN52LF4.js";
 import "../__chunks/RSS2H4EE.js";

package/dist/SelectList/SelectList.js

@@ -1,9 +1,9 @@
 "use client"
 import {
   SelectList
-} from "../__chunks/FXYXYYWE.js";
+} from "../__chunks/5QR4GKVY.js";
 import "../__chunks/SPQ7DQHG.js";
-import "../__chunks/4UNKXRQE.js";
+import "../__chunks/YSRQYMMU.js";
 import "../__chunks/KKADUD65.js";
 import "../__chunks/X552U42S.js";
 import "../__chunks/4U4UW4AK.js";

package/dist/TabButton/TabButton.js

@@ -1,8 +1,9 @@
 "use client"
 import {
   TabButton
-} from "../__chunks/HAV7ESKO.js";
-import "../__chunks/S3C44SBB.js";
+} from "../__chunks/OYZNL37T.js";
+import "../__chunks/OXEXFQAN.js";
+import "../__chunks/4U4UW4AK.js";
 import "../__chunks/VV2NJABK.js";
 import "../__chunks/4U4UW4AK.js";
 import "../__chunks/TKDQXKWS.js";

package/dist/TapArea/TapArea.js

@@ -1,7 +1,8 @@
 "use client"
 import {
   TapArea_default
-} from "../__chunks/S3C44SBB.js";
+} from "../__chunks/OXEXFQAN.js";
+import "../__chunks/4U4UW4AK.js";
 import "../__chunks/KBIW5XV4.js";
 import "../__chunks/JB65NEXK.js";
 import "../__chunks/UWGNJENA.js";

package/dist/__chunks/{FXYXYYWE.js → 5QR4GKVY.js}

@@ -6,7 +6,7 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./4UNKXRQE.js";
+} from "./YSRQYMMU.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -140,4 +140,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=FXYXYYWE.js.map
+//# sourceMappingURL=5QR4GKVY.js.map

package/dist/__chunks/{KRD2PINC.js → A4YV2G5E.js}

@@ -9,7 +9,7 @@ import {
   ColorBaseDestructive700,
   ColorBaseGray700,
   ColorCambioWhite100
-} from "./4UNKXRQE.js";
+} from "./YSRQYMMU.js";
 import {
   RichSelectBoxContext,
   RichSelectBox_default,
@@ -26,7 +26,7 @@ import {
 } from "./WAGE57PF.js";
 import {
   TapArea_default
-} from "./S3C44SBB.js";
+} from "./OXEXFQAN.js";
 import {
   Box_default
 } from "./X552U42S.js";
@@ -79,7 +79,8 @@ function RichSelectList(props) {
     selectTextValue,
     selectedValues: selectedValuesProp,
     defaultSelectedValues: defaultSelectedValuesProp,
-    color = "white"
+    color = "white",
+    zIndex
   } = _a, richSelectBoxProps = __objRest(_a, [
     "autosave",
     "children",
@@ -95,7 +96,8 @@ function RichSelectList(props) {
     "selectTextValue",
     "selectedValues",
     "defaultSelectedValues",
-    "color"
+    "color",
+    "zIndex"
   ]);
   const reactId = useId();
   const inputId = id != null ? id : reactId;
@@ -192,6 +194,7 @@ function RichSelectList(props) {
               {
                 ref: overlayHandlerRef,
                 disabled,
+                zIndex,
                 content: (
                   // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided
                   /* @__PURE__ */ jsx(
@@ -286,4 +289,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=KRD2PINC.js.map
+//# sourceMappingURL=A4YV2G5E.js.map

package/dist/__chunks/A4YV2G5E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  useMemo,\n  type SyntheticEvent,\n  useRef,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray700,\n  ColorCambioWhite100,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport Popover from \"../Popover/Popover\";\nimport {\n  Label as ReactAriaLabel,\n  Provider as ReactAriaProvider,\n} from \"react-aria-components\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { setInteractionModality } from \"@react-aria/interactions\";\nimport { DialogContext } from \"../Dialog/Dialog\";\nimport styles from \"../SelectList/SelectList.module.css\";\nimport RichSelectBox, {\n  RichSelectBoxContext,\n  convertSelection,\n  type RichSelectBoxProps,\n} from \"./RichSelectBox\";\nimport TapArea from \"../TapArea/TapArea\";\nimport { type OverlayHandlerRef } from \"../react-aria-utils/Triggerable\";\nimport Box from \"../Box/Box\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\nimport { useField } from \"react-aria\";\n\nconst NOOP = () => undefined;\n\nexport type RichSelectListProps = RichSelectBoxProps & {\n  /** Test id for the select element */\n  \"data-testid\"?: string;\n  /**\n   * Disables the select dropdown entirely\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** Callback to be called when select is clicked */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /** Text shown below select box if there is an input error. */\n  errorText?: string;\n  /** Text shown below select box */\n  helperText?: string;\n  /**\n   * RichSelectList id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /** Text shown above select box */\n  label: string;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * There should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /** Use to render (override) text shown in the select box */\n  selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n  /**\n   * Color of the select box\n   * @defaultValue white\n   */\n  color?: \"white\" | \"clear\";\n  /**\n   * Z-index of the popover\n   */\n  zIndex?: number;\n};\n\n/**\n * [RichSelectList](https://cambly-syntax.vercel.app/?path=/docs/components-richselectlist--docs) is a dropdown menu that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectList\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectList.Section label=\"Cities\">\n      <RichSelectList.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectList.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectList.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectList.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectList.Section>\n  </RichSelectList>\n ```\n */\nfunction RichSelectList(props: RichSelectListProps): ReactElement {\n  const {\n    autosave,\n    children,\n    \"data-testid\": dataTestId,\n    disabled: disabledProp = false,\n    errorText,\n    helperText,\n    label,\n    id,\n    onChange,\n    onClick = NOOP,\n    placeholderText,\n    selectTextValue,\n    selectedValues: selectedValuesProp,\n    defaultSelectedValues: defaultSelectedValuesProp,\n    color = \"white\",\n    zIndex,\n    ...richSelectBoxProps\n  } = props;\n\n  const reactId = useId();\n  const inputId = id ?? reactId;\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n\n  // passed to popover, which attached open/close methods\n  const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n  const selectedKeysProp = useMemo(\n    () => convertSelection(selectedValuesProp),\n    [selectedValuesProp],\n  );\n  const defaultSelectedKeys = useMemo(\n    () => convertSelection(defaultSelectedValuesProp, new Set()),\n    [defaultSelectedValuesProp],\n  );\n  const [selectedKeys, setSelectedKeys] = useControlledState(\n    selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately.  Internally they rely on value (first arg) able to be undefined\n    defaultSelectedKeys,\n    (value) => {\n      const _value = value === \"all\" ? \"all\" : [...value].map(String);\n      onChange(_value);\n      if (!autosave) overlayHandlerRef.current.close?.();\n    },\n  );\n\n  const selectedTextValue = useMemo(() => {\n    if (selectTextValue)\n      return (\n        selectTextValue(\n          selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n        ) ?? placeholderText\n      );\n    if (selectedKeys === \"all\") return \"All selected\";\n    if (selectedKeys.size) return `${selectedKeys.size} selected`;\n    return placeholderText;\n  }, [selectTextValue, selectedKeys, placeholderText]);\n\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField({\n      label, // this is the label for the select box\n      description: helperText,\n      errorMessage: errorText,\n    });\n\n  const textColor = {\n    white: \"gray700\",\n    clear: \"white\",\n  } as const;\n\n  const getArrowIconColor = () => {\n    if (errorText) {\n      return ColorBaseDestructive700;\n    } else {\n      if (color === \"clear\") {\n        return ColorCambioWhite100;\n      } else {\n        return ColorBaseGray700;\n      }\n    }\n  };\n\n  return (\n    <ReactAriaProvider\n      values={[\n        [RichSelectBoxContext, { autoFocus: true }],\n        [DialogContext, { padding: autosave ? undefined : 0 }], // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided\n      ]}\n    >\n      <div\n        className={classNames(styles.selectContainer, {\n          [styles.opacityOverlay]: disabled,\n        })}\n        onClick={onClick}\n      >\n        {label && (\n          <>\n            <ReactAriaLabel\n              data-testid={[dataTestId, \"label\"].filter(Boolean).join(\"-\")}\n              {...labelProps}\n              onClick={() => {\n                if (disabled) return;\n                fieldRef.current?.focus();\n                setInteractionModality(\"keyboard\"); // Show the focus ring so the user knows where focus went\n              }}\n            >\n              <Box paddingX={1}>\n                <Typography size={100} color={textColor[color]}>\n                  {label}\n                </Typography>\n              </Box>\n            </ReactAriaLabel>\n          </>\n        )}\n        <Popover\n          ref={overlayHandlerRef}\n          disabled={disabled}\n          zIndex={zIndex}\n          content={\n            // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided\n            <Box\n              padding={autosave ? undefined : 5}\n              dangerouslySetInlineStyle={\n                autosave ? undefined : { __style: { paddingBottom: 0 } }\n              }\n              role=\"menu\"\n            >\n              <RichSelectBox\n                autosave={autosave}\n                selectedValues={selectedKeys}\n                defaultSelectedValues={defaultSelectedKeys}\n                onChange={(selected) => setSelectedKeys(new Set(selected))}\n                {...richSelectBoxProps}\n                accessibilityLabel={inputId}\n              >\n                {children}\n              </RichSelectBox>\n            </Box>\n          }\n        >\n          <TapArea\n            data-testid={dataTestId}\n            disabled={disabled}\n            onClick={onClick}\n            rounding=\"md\"\n            {...fieldProps}\n            ref={fieldRef}\n          >\n            <div className={styles.selectWrapper}>\n              <div\n                className={classNames(\n                  styles.selectBox,\n                  styles.selectBoxCambio,\n                  {\n                    [styles.unselected]:\n                      !errorText &&\n                      selectedKeys !== \"all\" &&\n                      !selectedKeys.size,\n                    [styles.selected]:\n                      !errorText &&\n                      (selectedKeys === \"all\" || selectedKeys.size),\n                    [styles.selectErrorCambio]: errorText,\n                    [styles[`selectColor${color}`]]: color,\n                  },\n                )}\n              >\n                {selectedTextValue}\n              </div>\n              <div className={styles.arrowIcon}>\n                <svg\n                  focusable=\"false\"\n                  aria-hidden=\"true\"\n                  viewBox=\"0 0 24 24\"\n                  width={24}\n                >\n                  <path\n                    fill={getArrowIconColor()}\n                    d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </TapArea>\n        </Popover>\n        {(helperText || errorText) && (\n          <Box paddingX={1}>\n            <Typography\n              size={100}\n              color={errorText ? \"destructive-primary\" : textColor[color]}\n              {...(errorText ? errorMessageProps : descriptionProps)}\n            >\n              {errorText ? errorText : helperText}\n            </Typography>\n          </Box>\n        )}\n      </div>\n    </ReactAriaProvider>\n  );\n}\n\nexport default Object.assign(RichSelectList, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_p5tv4_1\",\"opacityOverlay\":\"_opacityOverlay_p5tv4_7\",\"selectWrapper\":\"_selectWrapper_p5tv4_11\",\"selectBox\":\"_selectBox_p5tv4_16\",\"selectBoxCambio\":\"_selectBoxCambio_p5tv4_30\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_p5tv4_38\",\"unselected\":\"_unselected_p5tv4_43\",\"selected\":\"_selected_p5tv4_47\",\"darkBackground\":\"_darkBackground_p5tv4_51\",\"arrowIcon\":\"_arrowIcon_p5tv4_63\",\"selectErrorCambio\":\"_selectErrorCambio_p5tv4_77\",\"selectColorwhite\":\"_selectColorwhite_p5tv4_83\",\"transparentInputError\":\"_transparentInputError_p5tv4_89\",\"transparenInputError\":\"_transparenInputError_p5tv4_94\"}"],"mappings":"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","names":["_a"]}

package/dist/__chunks/LD67LLZE.js

@@ -0,0 +1,154 @@
+"use client"
+import {
+  rounding_module_default
+} from "./KBIW5XV4.js";
+import {
+  useIsHydrated
+} from "./JB65NEXK.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./UWGNJENA.js";
+
+// src/LinkTapArea/LinkTapArea.tsx
+import {
+  forwardRef,
+  useReducer
+} from "react";
+
+// css-module:../TapArea/TapArea.module.css#css-module
+var TapArea_module_default = { "tapArea": "_tapArea_1gbc8_1", "fullHeight": "_fullHeight_1gbc8_5", "fullWidth": "_fullWidth_1gbc8_9", "disabled": "_disabled_1gbc8_13", "enabled": "_enabled_1gbc8_20", "overlay": "_overlay_1gbc8_33", "hoveredOrFocussed": "_hoveredOrFocussed_1gbc8_43" };
+
+// src/LinkTapArea/LinkTapArea.tsx
+import classNames from "classnames";
+
+// css-module:./LinkTapArea.module.css#css-module
+var LinkTapArea_module_default = { "linkTapArea": "_linkTapArea_1nzmd_1" };
+
+// src/LinkTapArea/LinkTapArea.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function reducer(state, action) {
+  switch (action.type) {
+    case "BLUR":
+      return __spreadProps(__spreadValues({}, state), { focussed: false });
+    case "FOCUS":
+      return __spreadProps(__spreadValues({}, state), { focussed: true });
+    case "MOUSE_ENTER":
+      return __spreadProps(__spreadValues({}, state), { hovered: true });
+    case "MOUSE_LEAVE":
+      return __spreadProps(__spreadValues({}, state), { hovered: false });
+    default:
+      return state;
+  }
+}
+var LinkTapArea = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children,
+      href,
+      target,
+      rel,
+      accessibilityLabel,
+      "data-testid": dataTestId,
+      disabled: disabledProp = false,
+      fullHeight = false,
+      fullWidth = true,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      rounding = "none",
+      tabIndex = 0
+    } = _b, accessibilityProps = __objRest(_b, [
+      "children",
+      "href",
+      "target",
+      "rel",
+      "accessibilityLabel",
+      "data-testid",
+      "disabled",
+      "fullHeight",
+      "fullWidth",
+      "onClick",
+      "onMouseEnter",
+      "onMouseLeave",
+      "rounding",
+      "tabIndex"
+    ]);
+    const isHydrated = useIsHydrated();
+    const disabled = !isHydrated || disabledProp;
+    const [{ hovered, focussed }, dispatch] = useReducer(reducer, {
+      hovered: false,
+      focussed: false
+    });
+    const handleClick = (event) => {
+      if (disabled) {
+      } else {
+        event.currentTarget.blur();
+        onClick(event);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled)
+        return;
+      if (event.key === "Enter" || event.key === " " || event.key === "Space") {
+        event.preventDefault();
+        onClick(event);
+      }
+    };
+    const handleOnMouseEnter = (event) => {
+      if (disabled)
+        return;
+      dispatch({ type: "MOUSE_ENTER" });
+      onMouseEnter == null ? void 0 : onMouseEnter(event);
+    };
+    const handleOnMouseLeave = (event) => {
+      if (disabled)
+        return;
+      dispatch({ type: "MOUSE_LEAVE" });
+      onMouseLeave == null ? void 0 : onMouseLeave(event);
+    };
+    const isHoveredOrFocussed = !disabled && (hovered || focussed);
+    const roundingClasses = rounding !== "none" && rounding_module_default[`rounding${rounding}`];
+    return /* @__PURE__ */ jsxs(
+      "a",
+      __spreadProps(__spreadValues({}, accessibilityProps), {
+        "aria-disabled": disabled || accessibilityProps["aria-disabled"],
+        "aria-label": accessibilityLabel != null ? accessibilityLabel : accessibilityProps["aria-label"],
+        className: classNames(
+          LinkTapArea_module_default.linkTapArea,
+          TapArea_module_default.tapArea,
+          TapArea_module_default[`${disabled ? "disabled" : "enabled"}`],
+          fullHeight && TapArea_module_default.fullHeight,
+          fullWidth && TapArea_module_default.fullWidth,
+          isHoveredOrFocussed && TapArea_module_default.hoveredOrFocussed,
+          roundingClasses
+        ),
+        "data-testid": dataTestId,
+        href,
+        target,
+        rel,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onMouseEnter: handleOnMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        onFocus: () => dispatch({ type: "FOCUS" }),
+        onBlur: () => dispatch({ type: "BLUR" }),
+        ref,
+        role: "button",
+        tabIndex: disabled ? void 0 : tabIndex,
+        children: [
+          !disabled && (hovered || focussed) && /* @__PURE__ */ jsx("div", { className: classNames(TapArea_module_default.overlay, roundingClasses) }),
+          children
+        ]
+      })
+    );
+  }
+);
+LinkTapArea.displayName = "LinkTapArea";
+var LinkTapArea_default = LinkTapArea;
+
+export {
+  LinkTapArea_default
+};
+//# sourceMappingURL=LD67LLZE.js.map

package/dist/__chunks/LD67LLZE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LinkTapArea/LinkTapArea.tsx","css-module:../TapArea/TapArea.module.css#css-module","css-module:./LinkTapArea.module.css#css-module"],"sourcesContent":["import React, {\n  forwardRef,\n  type HtmlHTMLAttributes,\n  useReducer,\n  type AriaAttributes,\n  type ReactNode,\n} from \"react\";\nimport tapAreaStyles from \"../TapArea/TapArea.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport classNames from \"classnames\";\nimport styles from \"./LinkTapArea.module.css\";\n\ntype LinkTapAreaProps = AriaAttributes & {\n  /**\n   * The children to be rendered inside the tap area.\n   */\n  children?: ReactNode;\n  /**\n   * The link that the LinkTapArea should route to.\n   *\n   */\n  href?: string;\n  /**\n   * The target attribute specifies where to open the linked document.\n   *\n   */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  /**\n   * The rel attribute specifies the relationship between the document and the link.\n   *\n   */\n  rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * Test id for the tap area\n   */\n  \"data-testid\"?: string;\n  /**\n   * If `true`, the tap area will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the tap area will be full height\n   */\n  fullHeight?: boolean;\n  /**\n   * If `true`, the tap area will be full width\n   */\n  fullWidth?: boolean;\n  /**\n   * The callback to be called when the tap area is clicked\n   */\n  onClick: (event: React.SyntheticEvent<HTMLAnchorElement>) => void;\n  /**\n   * The callback to be called when the tap area is hovered\n   */\n  onMouseEnter?: (event: React.SyntheticEvent<HTMLAnchorElement>) => void;\n  /**\n   * The callback to be called when the tap area is no longer hovered\n   */\n  onMouseLeave?: (event: React.SyntheticEvent<HTMLAnchorElement>) => void;\n  /**\n   * Border radius of the tap area.\n   *\n   * * `none`: 0px\n   * * `sm`: 8px\n   * * `md`: 12px\n   * * `full`: 999px\n   *\n   * @defaultValue \"none\"\n   */\n  rounding?: \"md\" | \"sm\" | \"full\" | \"none\";\n  /**\n   * The tab index of the tap area\n   */\n  tabIndex?: 0 | -1;\n};\n\nfunction reducer(\n  state: {\n    hovered: boolean;\n    focussed: boolean;\n  },\n  action: {\n    type: \"BLUR\" | \"FOCUS\" | \"MOUSE_ENTER\" | \"MOUSE_LEAVE\";\n  },\n) {\n  switch (action.type) {\n    case \"BLUR\":\n      return { ...state, focussed: false };\n    case \"FOCUS\":\n      return { ...state, focussed: true };\n    case \"MOUSE_ENTER\":\n      return { ...state, hovered: true };\n    case \"MOUSE_LEAVE\":\n      return { ...state, hovered: false };\n    default:\n      return state;\n  }\n}\nconst LinkTapArea = forwardRef<HTMLAnchorElement, LinkTapAreaProps>(\n  (\n    {\n      children,\n      href,\n      target,\n      rel,\n      accessibilityLabel,\n      \"data-testid\": dataTestId,\n      disabled: disabledProp = false,\n      fullHeight = false,\n      fullWidth = true,\n      onClick,\n      onMouseEnter,\n      onMouseLeave,\n      rounding = \"none\",\n      tabIndex = 0,\n      ...accessibilityProps\n    }: LinkTapAreaProps,\n    ref,\n  ) => {\n    const isHydrated = useIsHydrated();\n    const disabled = !isHydrated || disabledProp;\n    const [{ hovered, focussed }, dispatch] = useReducer(reducer, {\n      hovered: false,\n      focussed: false,\n    });\n    const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (event) => {\n      if (disabled) {\n        undefined;\n      } else {\n        event.currentTarget.blur();\n        onClick(event);\n      }\n    };\n\n    const handleKeyDown: React.KeyboardEventHandler<HTMLAnchorElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n        event.preventDefault();\n        onClick(event);\n      }\n    };\n\n    const handleOnMouseEnter: React.MouseEventHandler<HTMLAnchorElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      dispatch({ type: \"MOUSE_ENTER\" });\n      onMouseEnter?.(event);\n    };\n\n    const handleOnMouseLeave: React.MouseEventHandler<HTMLAnchorElement> = (\n      event,\n    ) => {\n      if (disabled) return;\n      dispatch({ type: \"MOUSE_LEAVE\" });\n      onMouseLeave?.(event);\n    };\n\n    const isHoveredOrFocussed = !disabled && (hovered || focussed);\n    const roundingClasses =\n      rounding !== \"none\" && roundingStyles[`rounding${rounding}`];\n\n    return (\n      <a\n        {...accessibilityProps}\n        aria-disabled={disabled || accessibilityProps[\"aria-disabled\"]}\n        aria-label={accessibilityLabel ?? accessibilityProps[\"aria-label\"]}\n        className={classNames(\n          styles.linkTapArea,\n          tapAreaStyles.tapArea,\n          tapAreaStyles[`${disabled ? \"disabled\" : \"enabled\"}`],\n          fullHeight && tapAreaStyles.fullHeight,\n          fullWidth && tapAreaStyles.fullWidth,\n          isHoveredOrFocussed && tapAreaStyles.hoveredOrFocussed,\n          roundingClasses,\n        )}\n        data-testid={dataTestId}\n        href={href}\n        target={target}\n        rel={rel}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        onFocus={() => dispatch({ type: \"FOCUS\" })}\n        onBlur={() => dispatch({ type: \"BLUR\" })}\n        ref={ref}\n        role=\"button\"\n        tabIndex={disabled ? undefined : tabIndex}\n      >\n        {!disabled && (hovered || focussed) && (\n          <div className={classNames(tapAreaStyles.overlay, roundingClasses)} />\n        )}\n        {children}\n      </a>\n    );\n  },\n);\n\nLinkTapArea.displayName = \"LinkTapArea\";\n\nexport default LinkTapArea;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/TapArea/TapArea.module.css\"; export default {\"tapArea\":\"_tapArea_1gbc8_1\",\"fullHeight\":\"_fullHeight_1gbc8_5\",\"fullWidth\":\"_fullWidth_1gbc8_9\",\"disabled\":\"_disabled_1gbc8_13\",\"enabled\":\"_enabled_1gbc8_20\",\"overlay\":\"_overlay_1gbc8_33\",\"hoveredOrFocussed\":\"_hoveredOrFocussed_1gbc8_43\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkTapArea/LinkTapArea.module.css\"; export default {\"linkTapArea\":\"_linkTapArea_1nzmd_1\"}"],"mappings":"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","names":[]}

package/dist/__chunks/{S3C44SBB.js → OXEXFQAN.js}

@@ -136,4 +136,4 @@ var TapArea_default = TapArea;
 export {
   TapArea_default
 };
-//# sourceMappingURL=S3C44SBB.js.map
+//# sourceMappingURL=OXEXFQAN.js.map

package/dist/__chunks/{HAV7ESKO.js → OYZNL37T.js}

@@ -1,7 +1,7 @@
 "use client"
 import {
   TapArea_default
-} from "./S3C44SBB.js";
+} from "./OXEXFQAN.js";
 import {
   Tabs_module_default
 } from "./VV2NJABK.js";
@@ -64,4 +64,4 @@ function TabButton({
 export {
   TabButton
 };
-//# sourceMappingURL=HAV7ESKO.js.map
+//# sourceMappingURL=OYZNL37T.js.map

package/dist/__chunks/{4UNKXRQE.js → YSRQYMMU.js}

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

package/dist/__chunks/{4UNKXRQE.js.map → YSRQYMMU.js.map}

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