@cambly/syntax-core 10.7.0-beta.1 → 10.8.0

package/dist/__chunks/LTYTYJEN.mjs

@@ -1,20 +0,0 @@
-// src/colors/foregroundTypographyColor.ts
-function foregroundTypographyColor(color) {
-  switch (color) {
-    case "secondary":
-    case "tertiary":
-      return "primary";
-    case "destructive-secondary":
-    case "destructive-tertiary":
-      return "destructive-primary";
-    case "branded":
-      return "gray900";
-    default:
-      return "white";
-  }
-}
-
-export {
-  foregroundTypographyColor
-};
-//# sourceMappingURL=LTYTYJEN.mjs.map

package/dist/__chunks/LTYTYJEN.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/colors/foregroundTypographyColor.ts"],"sourcesContent":["import { type Color } from \"../constants\";\n\nexport default function foregroundTypographyColor(\n  color: (typeof Color)[number],\n): (typeof Color)[number] {\n  switch (color) {\n    case \"secondary\":\n    case \"tertiary\":\n      return \"primary\";\n    case \"destructive-secondary\":\n    case \"destructive-tertiary\":\n      return \"destructive-primary\";\n    case \"branded\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n}\n"],"mappings":";AAEe,SAAR,0BACL,OACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;","names":[]}

package/dist/__chunks/M4H2OQDF.cjs

@@ -1,39 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-var _U34J7J3Tcjs = require('./U34J7J3T.cjs');
-
-
-var _P2M6MLAWcjs = require('./P2M6MLAW.cjs');
-
-
-
-
-var _I64JGYX7cjs = require('./I64JGYX7.cjs');
-
-// src/RichSelect/RichSelectRadioButton.tsx
-var _react = require('react');
-var _jsxruntime = require('react/jsx-runtime');
-var NOOP = () => void 0;
-var RichSelectRadioButton_default = _react.forwardRef.call(void 0, 
-  function RichSelectRadioButton(props, ref) {
-    const _a = props, { size, name } = _a, otherProps = _I64JGYX7cjs.__objRest.call(void 0, _a, ["size", "name"]);
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _P2M6MLAWcjs.RichSelectItem_default, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, otherProps), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _U34J7J3Tcjs.RadioButton_default,
-      {
-        checked: isSelected,
-        disabled: isDisabled,
-        name,
-        label: otherProps.label,
-        value: otherProps.value,
-        dangerouslyForceFocusStyles: isFocusVisible,
-        size,
-        onChange: NOOP
-      }
-    ) }));
-  }
-);
-
-
-
-exports.RichSelectRadioButton_default = RichSelectRadioButton_default;
-//# sourceMappingURL=M4H2OQDF.cjs.map

package/dist/__chunks/M4H2OQDF.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/RichSelect/RichSelectRadioButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,kBAAqC;AAiB3C;AAbV,IAAM,OAAO,MAAM;AAOnB,IAAO,gCAAQ;AAAA,EACb,SAAS,sBAAsB,OAAO,KAAmB;AACvD,UAAsC,YAA9B,QAAM,KAblB,IAa0C,IAAf,uBAAe,IAAf,CAAf,QAAM;AACd,WACE,oBAAC,yDAAmB,aAAnB,EAA+B,KAC7B,WAAC,EAAE,YAAY,gBAAgB,WAAW,MACzC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,UAAU;AAAA,QACV;AAAA,QACA,OAAO,WAAW;AAAA,QAClB,OAAO,WAAW;AAAA,QAClB,6BAA6B;AAAA,QAC7B;AAAA,QACA,UAAU;AAAA;AAAA,IACZ,IAEJ;AAAA,EAEJ;AACF","sourcesContent":["import React, { forwardRef, type ReactElement } from \"react\";\nimport RichSelectItem, { type RichSelectItemProps } from \"./RichSelectItem\";\nimport RadioButton from \"../RadioButton/RadioButton\";\n\nconst NOOP = () => undefined;\n\ntype RichSelectRadioButtonProps = RichSelectItemProps & {\n  name: string;\n  size?: \"sm\" | \"md\";\n};\n\nexport default forwardRef<HTMLDivElement, RichSelectRadioButtonProps>(\n  function RichSelectRadioButton(props, ref): ReactElement {\n    const { size, name, ...otherProps } = props;\n    return (\n      <RichSelectItem {...otherProps} ref={ref}>\n        {({ isSelected, isFocusVisible, isDisabled }) => (\n          <RadioButton\n            checked={isSelected}\n            disabled={isDisabled}\n            name={name}\n            label={otherProps.label}\n            value={otherProps.value}\n            dangerouslyForceFocusStyles={isFocusVisible}\n            size={size}\n            onChange={NOOP}\n          />\n        )}\n      </RichSelectItem>\n    );\n  },\n);\n"]}

package/dist/__chunks/MCBAAUFK.cjs

@@ -1,31 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-var _P4BVQ554cjs = require('./P4BVQ554.cjs');
-
-// src/Modal/Layer.tsx
-var _reactdom = require('react-dom');
-var _jsxruntime = require('react/jsx-runtime');
-function Layer({
-  children,
-  zIndex = 1
-}) {
-  return typeof document !== "undefined" ? _reactdom.createPortal.call(void 0, 
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _P4BVQ554cjs.Box_default,
-      {
-        "data-testid": "syntax-layer",
-        position: "fixed",
-        dangerouslySetInlineStyle: {
-          __style: { zIndex, inset: 0 }
-        },
-        children
-      }
-    ),
-    document.body
-  ) : null;
-}
-
-
-
-exports.Layer = Layer;
-//# sourceMappingURL=MCBAAUFK.cjs.map

package/dist/__chunks/MCBAAUFK.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Modal/Layer.tsx"],"names":[],"mappings":";;;;;AACA,SAAS,oBAAoB;AAYrB;AATO,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,SAAS;AACX,GAGuB;AACrB,SAAO,OAAO,aAAa,cACvB;AAAA,IACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS,EAAE,QAAQ,OAAO,EAAE;AAAA,QAC9B;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,SAAS;AAAA,EACX,IACA;AACN","sourcesContent":["import { type ReactElement, type ReactPortal } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Box from \"../Box/Box\";\n\nexport default function Layer({\n  children,\n  zIndex = 1,\n}: {\n  children: ReactElement;\n  zIndex?: number;\n}): ReactPortal | null {\n  return typeof document !== \"undefined\"\n    ? createPortal(\n        <Box\n          data-testid=\"syntax-layer\"\n          position=\"fixed\"\n          dangerouslySetInlineStyle={{\n            __style: { zIndex, inset: 0 },\n          }}\n        >\n          {children}\n        </Box>,\n        document.body,\n      )\n    : null;\n}\n"]}

package/dist/__chunks/MCDSO2BG.mjs

@@ -1,127 +0,0 @@
-import {
-  SelectOption_default
-} from "./GVNDZZAU.mjs";
-import {
-  Focus_module_default
-} from "./MQPPALTP.mjs";
-import {
-  Typography_default
-} from "./BQUP6OTG.mjs";
-import {
-  useIsHydrated
-} from "./XFKGXL73.mjs";
-import {
-  useFocusVisible
-} from "./FCX7QDZS.mjs";
-
-// src/SelectList/SelectList.tsx
-import {
-  useId,
-  useState
-} from "react";
-import classNames from "classnames";
-
-// ../syntax-design-tokens/dist/js/index.js
-var ColorBaseDestructive700 = "#bd2a13";
-var ColorBaseGray800 = "#353535";
-
-// css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_efdzx_1", "opacityOverlay": "_opacityOverlay_efdzx_7", "outerTextContainer": "_outerTextContainer_efdzx_11", "selectWrapper": "_selectWrapper_efdzx_16", "selectBox": "_selectBox_efdzx_21", "selectMouseFocusStyling": "_selectMouseFocusStyling_efdzx_38", "unselected": "_unselected_efdzx_42", "selected": "_selected_efdzx_46", "arrowIcon": "_arrowIcon_efdzx_50", "sm": "_sm_efdzx_64", "md": "_md_efdzx_69", "lg": "_lg_efdzx_74", "selectError": "_selectError_efdzx_79" };
-
-// src/SelectList/SelectList.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var iconSize = {
-  sm: 20,
-  md: 24,
-  lg: 24
-};
-function SelectList({
-  children,
-  "data-testid": dataTestId,
-  disabled: disabledProp = false,
-  errorText,
-  helperText,
-  id,
-  label,
-  onChange,
-  onClick,
-  placeholderText,
-  selectedValue = "",
-  size = "md"
-}) {
-  const reactId = useId();
-  const isHydrated = useIsHydrated();
-  const disabled = !isHydrated || disabledProp;
-  const selectId = id != null ? id : reactId;
-  const { isFocusVisible } = useFocusVisible();
-  const [isFocused, setIsFocused] = useState(false);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames(SelectList_module_default.selectContainer, {
-        [SelectList_module_default.opacityOverlay]: disabled
-      }),
-      children: [
-        label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) }),
-        /* @__PURE__ */ jsxs("div", { className: SelectList_module_default.selectWrapper, children: [
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              id: selectId,
-              "data-testid": dataTestId,
-              disabled,
-              className: classNames(SelectList_module_default.selectBox, SelectList_module_default[size], {
-                [SelectList_module_default.unselected]: !selectedValue && !errorText,
-                [SelectList_module_default.selected]: selectedValue && !errorText,
-                [SelectList_module_default.selectError]: errorText,
-                [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible,
-                // for focus keyboard
-                [SelectList_module_default.selectMouseFocusStyling]: isFocused && !isFocusVisible
-                // for focus mouse
-              }),
-              onChange,
-              onClick,
-              value: placeholderText && !selectedValue ? placeholderText : selectedValue,
-              onFocus: () => setIsFocused(true),
-              onBlur: () => setIsFocused(false),
-              children: [
-                placeholderText && /* @__PURE__ */ jsx("option", { disabled: true, value: placeholderText, children: placeholderText }),
-                children
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ jsx(
-            "svg",
-            {
-              focusable: "false",
-              "aria-hidden": "true",
-              viewBox: "0 0 24 24",
-              width: iconSize[size],
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  fill: errorText ? ColorBaseDestructive700 : ColorBaseGray800,
-                  d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
-                }
-              )
-            }
-          ) })
-        ] }),
-        (helperText || errorText) && /* @__PURE__ */ jsx("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx(
-          Typography_default,
-          {
-            size: 100,
-            color: errorText ? "destructive-primary" : "gray700",
-            children: errorText ? errorText : helperText
-          }
-        ) })
-      ]
-    }
-  );
-}
-SelectList.Option = SelectOption_default;
-
-export {
-  SelectList
-};
-//# sourceMappingURL=MCDSO2BG.mjs.map

package/dist/__chunks/MCDSO2BG.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/SelectList/SelectList.tsx","../../../syntax-design-tokens/dist/js/index.js","css-module:./SelectList.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  useId,\n  useState,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n  ColorBaseDestructive700,\n  ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nconst iconSize = {\n  sm: 20,\n  md: 24,\n  lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n  children,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText,\n  helperText,\n  id,\n  label,\n  onChange,\n  onClick,\n  placeholderText,\n  selectedValue = \"\",\n  size = \"md\",\n}: {\n  /**\n   * One or more SelectList.Option components.\n   */\n  children: ReactNode;\n  /**\n   * Test id for the select element\n   */\n  \"data-testid\"?: string;\n  /**\n   * true if the select dropdown is disabled\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Callback to be called when select is clicked\n   */\n  onClick?: React.MouseEventHandler<HTMLSelectElement>;\n  /**\n   * Text shown below select box if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Text shown below select box\n   */\n  helperText?: string;\n  /**\n   * Id of the select element\n   */\n  id?: string;\n  /**\n   * Text shown above select box\n   */\n  label: string;\n  /**\n   * The callback to be called when an option is selected\n   */\n  onChange: React.ChangeEventHandler<HTMLSelectElement>;\n  /**\n   * Text showing in select box if no option has been chosen.\n   * We should always have a placeholder unless there is a default option selected\n   */\n  placeholderText?: string;\n  /**\n   * Value of the currently selected option\n   */\n  selectedValue?: string;\n  /**\n   * Size of the select box\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n  const reactId = useId();\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const selectId = id ?? reactId;\n  const { isFocusVisible } = useFocusVisible();\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.selectContainer, {\n        [styles.opacityOverlay]: disabled,\n      })}\n    >\n      {label && (\n        <label htmlFor={selectId} className={styles.outerTextContainer}>\n          <Typography size={100} color=\"gray700\">\n            {label}\n          </Typography>\n        </label>\n      )}\n      <div className={styles.selectWrapper}>\n        <select\n          id={selectId}\n          data-testid={dataTestId}\n          disabled={disabled}\n          className={classNames(styles.selectBox, styles[size], {\n            [styles.unselected]: !selectedValue && !errorText,\n            [styles.selected]: selectedValue && !errorText,\n            [styles.selectError]: errorText,\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible, // for focus keyboard\n            [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n          })}\n          onChange={onChange}\n          onClick={onClick}\n          value={\n            placeholderText && !selectedValue ? placeholderText : selectedValue\n          }\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        >\n          {placeholderText && (\n            <option disabled value={placeholderText}>\n              {placeholderText}\n            </option>\n          )}\n          {children}\n        </select>\n        <div className={styles.arrowIcon}>\n          <svg\n            focusable=\"false\"\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            width={iconSize[size]}\n          >\n            <path\n              fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\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      {(helperText || errorText) && (\n        <div className={styles.outerTextContainer}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText ? errorText : helperText}\n          </Typography>\n        </div>\n      )}\n    </div>\n  );\n}\n\nSelectList.Option = SelectOption;\n","/**\n * Do not edit directly\n * Generated on Tue, 16 Jan 2024 18:44:55 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#ffdcd6\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#bd2a13\";\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 = \"#ffe733\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_efdzx_1\",\"opacityOverlay\":\"_opacityOverlay_efdzx_7\",\"outerTextContainer\":\"_outerTextContainer_efdzx_11\",\"selectWrapper\":\"_selectWrapper_efdzx_16\",\"selectBox\":\"_selectBox_efdzx_21\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_efdzx_38\",\"unselected\":\"_unselected_efdzx_42\",\"selected\":\"_selected_efdzx_46\",\"arrowIcon\":\"_arrowIcon_efdzx_50\",\"sm\":\"_sm_efdzx_64\",\"md\":\"_md_efdzx_69\",\"lg\":\"_lg_efdzx_74\",\"selectError\":\"_selectError_efdzx_79\"}"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACGhB,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;;;ACpBmE,IAAO,4BAAQ,EAAC,mBAAkB,4BAA2B,kBAAiB,2BAA0B,sBAAqB,gCAA+B,iBAAgB,2BAA0B,aAAY,uBAAsB,2BAA0B,qCAAoC,cAAa,wBAAuB,YAAW,sBAAqB,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,eAAc,wBAAuB;;;AFgHtkB,cAMF,YANE;AA9FV,IAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKe,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,OAAO;AACT,GAwDiB;AACf,QAAM,UAAU,MAAM;AACtB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,WAAW,kBAAM;AACvB,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,0BAAO,iBAAiB;AAAA,QAC5C,CAAC,0BAAO,cAAc,GAAG;AAAA,MAC3B,CAAC;AAAA,MAEA;AAAA,iBACC,oBAAC,WAAM,SAAS,UAAU,WAAW,0BAAO,oBAC1C,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF;AAAA,QAEF,qBAAC,SAAI,WAAW,0BAAO,eACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa;AAAA,cACb;AAAA,cACA,WAAW,WAAW,0BAAO,WAAW,0BAAO,IAAI,GAAG;AAAA,gBACpD,CAAC,0BAAO,UAAU,GAAG,CAAC,iBAAiB,CAAC;AAAA,gBACxC,CAAC,0BAAO,QAAQ,GAAG,iBAAiB,CAAC;AAAA,gBACrC,CAAC,0BAAO,WAAW,GAAG;AAAA,gBACtB,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA;AAAA,gBACf,CAAC,0BAAO,uBAAuB,GAAG,aAAa,CAAC;AAAA;AAAA,cAClD,CAAC;AAAA,cACD;AAAA,cACA;AAAA,cACA,OACE,mBAAmB,CAAC,gBAAgB,kBAAkB;AAAA,cAExD,SAAS,MAAM,aAAa,IAAI;AAAA,cAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,cAE/B;AAAA,mCACC,oBAAC,YAAO,UAAQ,MAAC,OAAO,iBACrB,2BACH;AAAA,gBAED;AAAA;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,SAAI,WAAW,0BAAO,WACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,SAAQ;AAAA,cACR,OAAO,SAAS,IAAI;AAAA,cAEpB;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,YAAY,0BAA0B;AAAA,kBAC5C,GAAE;AAAA;AAAA,cACJ;AAAA;AAAA,UACF,GACF;AAAA,WACF;AAAA,SACE,cAAc,cACd,oBAAC,SAAI,WAAW,0BAAO,oBACrB;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,sBAAY,YAAY;AAAA;AAAA,QAC3B,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,SAAS;","names":[]}

package/dist/__chunks/MF2FZIOI.mjs

@@ -1,31 +0,0 @@
-import {
-  Box_default
-} from "./HJYCSDLB.mjs";
-
-// src/Modal/Layer.tsx
-import { createPortal } from "react-dom";
-import { jsx } from "react/jsx-runtime";
-function Layer({
-  children,
-  zIndex = 1
-}) {
-  return typeof document !== "undefined" ? createPortal(
-    /* @__PURE__ */ jsx(
-      Box_default,
-      {
-        "data-testid": "syntax-layer",
-        position: "fixed",
-        dangerouslySetInlineStyle: {
-          __style: { zIndex, inset: 0 }
-        },
-        children
-      }
-    ),
-    document.body
-  ) : null;
-}
-
-export {
-  Layer
-};
-//# sourceMappingURL=MF2FZIOI.mjs.map

package/dist/__chunks/MF2FZIOI.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Modal/Layer.tsx"],"sourcesContent":["import { type ReactElement, type ReactPortal } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Box from \"../Box/Box\";\n\nexport default function Layer({\n  children,\n  zIndex = 1,\n}: {\n  children: ReactElement;\n  zIndex?: number;\n}): ReactPortal | null {\n  return typeof document !== \"undefined\"\n    ? createPortal(\n        <Box\n          data-testid=\"syntax-layer\"\n          position=\"fixed\"\n          dangerouslySetInlineStyle={{\n            __style: { zIndex, inset: 0 },\n          }}\n        >\n          {children}\n        </Box>,\n        document.body,\n      )\n    : null;\n}\n"],"mappings":";;;;;AACA,SAAS,oBAAoB;AAYrB;AATO,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,SAAS;AACX,GAGuB;AACrB,SAAO,OAAO,aAAa,cACvB;AAAA,IACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS,EAAE,QAAQ,OAAO,EAAE;AAAA,QAC9B;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,SAAS;AAAA,EACX,IACA;AACN;","names":[]}

package/dist/__chunks/MQPPALTP.mjs

@@ -1,7 +0,0 @@
-// css-module:../Focus.module.css#css-module
-var Focus_module_default = { "accessibilityOutlineFocus": "_accessibilityOutlineFocus_1h8bq_1" };
-
-export {
-  Focus_module_default
-};
-//# sourceMappingURL=MQPPALTP.mjs.map

package/dist/__chunks/MQPPALTP.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["css-module:../Focus.module.css#css-module"],"sourcesContent":["import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Focus.module.css\"; export default {\"accessibilityOutlineFocus\":\"_accessibilityOutlineFocus_1h8bq_1\"}"],"mappings":";AAAmF,IAAO,uBAAQ,EAAC,6BAA4B,qCAAoC;","names":[]}

package/dist/__chunks/MQYAYRG7.js

@@ -1,106 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _VPGRPGP7js = require('./VPGRPGP7.js');
-
-
-var _OGJDUOWPjs = require('./OGJDUOWP.js');
-
-
-var _R3JL4P3Qjs = require('./R3JL4P3Q.js');
-
-// src/Checkbox/Checkbox.tsx
-var _react = require('react');
-var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
-
-// css-module:./Checkbox.module.css#css-module
-var Checkbox_module_default = { "mainContainer": "_mainContainer_1omm6_1", "inputOverlay": "_inputOverlay_1omm6_8", "checkbox": "_checkbox_1omm6_14", "disabled": "_disabled_1omm6_22", "cursorDisabled": "_cursorDisabled_1omm6_26", "cursorEnabled": "_cursorEnabled_1omm6_30", "uncheckedBox": "_uncheckedBox_1omm6_34", "uncheckedBorder": "_uncheckedBorder_1omm6_38", "uncheckedErrorBorder": "_uncheckedErrorBorder_1omm6_42", "checkedBox": "_checkedBox_1omm6_46", "checkedNonError": "_checkedNonError_1omm6_50", "checkedError": "_checkedError_1omm6_54", "sm": "_sm_1omm6_58", "md": "_md_1omm6_64" };
-
-// src/Checkbox/Checkbox.tsx
-var _jsxruntime = require('react/jsx-runtime');
-var typographySize = {
-  sm: 100,
-  md: 200
-};
-var iconWidth = {
-  sm: 12,
-  md: 20
-};
-var Checkbox = ({
-  checked = false,
-  "data-testid": dataTestId,
-  disabled = false,
-  size = "md",
-  label,
-  error = false,
-  onChange
-}) => {
-  const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
-  const { isFocusVisible } = _OGJDUOWPjs.useFocusVisible.call(void 0, );
-  const checkboxStyling = _classnames2.default.call(void 0, Checkbox_module_default.checkbox, Checkbox_module_default[size]);
-  const uncheckedStyling = _classnames2.default.call(void 0, checkboxStyling, Checkbox_module_default.uncheckedBox, {
-    [Checkbox_module_default.uncheckedBorder]: !error,
-    [Checkbox_module_default.uncheckedErrorBorder]: error,
-    [_VPGRPGP7js.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
-  });
-  const checkedStyling = _classnames2.default.call(void 0, checkboxStyling, Checkbox_module_default.checkedBox, {
-    [Checkbox_module_default.checkedNonError]: !error,
-    [Checkbox_module_default.checkedError]: error,
-    [_VPGRPGP7js.Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible
-  });
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "label",
-    {
-      className: _classnames2.default.call(void 0, 
-        Checkbox_module_default.mainContainer,
-        Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
-        {
-          [Checkbox_module_default.disabled]: disabled
-        }
-      ),
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: checked ? checkedStyling : uncheckedStyling, children: checked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: iconWidth[size], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "path",
-          {
-            fill: "#fff",
-            d: "m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z"
-          }
-        ) }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "input",
-          {
-            "data-testid": dataTestId,
-            type: "checkbox",
-            className: _classnames2.default.call(void 0, 
-              Checkbox_module_default.inputOverlay,
-              Checkbox_module_default[size],
-              Checkbox_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`]
-            ),
-            checked,
-            onChange,
-            disabled,
-            onFocus: () => {
-              setIsFocused(true);
-            },
-            onBlur: () => {
-              setIsFocused(false);
-            }
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _R3JL4P3Qjs.Typography_default,
-          {
-            size: typographySize[size],
-            color: error ? "destructive-primary" : "gray800",
-            children: label
-          }
-        )
-      ]
-    }
-  );
-};
-var Checkbox_default = Checkbox;
-
-
-
-exports.Checkbox_default = Checkbox_default;
-//# sourceMappingURL=MQYAYRG7.js.map

package/dist/__chunks/MQYAYRG7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDwE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,gBAAe,0BAAyB,mBAAkB,6BAA4B,wBAAuB,kCAAiC,cAAa,wBAAuB,mBAAkB,6BAA4B,gBAAe,0BAAyB,MAAK,gBAAe,MAAK,eAAc;;;ADqFhoB,SAYQ,KAZR;AA9EJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,QAAM,kBAAkB,WAAW,wBAAO,UAAU,wBAAO,IAAI,CAAC;AAChE,QAAM,mBAAmB,WAAW,iBAAiB,wBAAO,cAAc;AAAA,IACxE,CAAC,wBAAO,eAAe,GAAG,CAAC;AAAA,IAC3B,CAAC,wBAAO,oBAAoB,GAAG;AAAA,IAC/B,CAAC,qBAAY,yBAAyB,GAAG,aAAa;AAAA,EACxD,CAAC;AACD,QAAM,iBAAiB,WAAW,iBAAiB,wBAAO,YAAY;AAAA,IACpE,CAAC,wBAAO,eAAe,GAAG,CAAC;AAAA,IAC3B,CAAC,wBAAO,YAAY,GAAG;AAAA,IACvB,CAAC,qBAAY,yBAAyB,GAAG,aAAa;AAAA,EACxD,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAW,UAAU,iBAAiB,kBACxC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACH,GACH,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\n\nconst typographySize = {\n  sm: 100,\n  md: 200,\n} as const;\n\nconst iconWidth = {\n  sm: 12,\n  md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  disabled = false,\n  size = \"md\",\n  label,\n  error = false,\n  onChange,\n}: {\n  /**\n   * Whether or not the box has been clicked\n   *\n   * @defaultValue false\n   */\n  checked: boolean;\n  /**\n   * Test id for the checkbox\n   */\n  \"data-testid\"?: string;\n  /**\n   * The callback to be called when the checkbox value changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Whether or not the box is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The size of the checkbox and icon\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * The text accompanying the checkbox\n   */\n  label: string;\n  /**\n   * Whether or not there is an error with the input\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n}): ReactElement => {\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  const checkboxStyling = classNames(styles.checkbox, styles[size]);\n  const uncheckedStyling = classNames(checkboxStyling, styles.uncheckedBox, {\n    [styles.uncheckedBorder]: !error,\n    [styles.uncheckedErrorBorder]: error,\n    [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n  });\n  const checkedStyling = classNames(checkboxStyling, styles.checkedBox, {\n    [styles.checkedNonError]: !error,\n    [styles.checkedError]: error,\n    [focusStyles.accessibilityOutlineFocus]: isFocused && isFocusVisible,\n  });\n\n  return (\n    <label\n      className={classNames(\n        styles.mainContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div className={checked ? checkedStyling : uncheckedStyling}>\n        {checked && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              fill=\"#fff\"\n              d=\"m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z\"\n            ></path>\n          </svg>\n        )}\n      </div>\n      <input\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        className={classNames(\n          styles.inputOverlay,\n          styles[size],\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      <Typography\n        size={typographySize[size]}\n        color={error ? \"destructive-primary\" : \"gray800\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_1omm6_1\",\"inputOverlay\":\"_inputOverlay_1omm6_8\",\"checkbox\":\"_checkbox_1omm6_14\",\"disabled\":\"_disabled_1omm6_22\",\"cursorDisabled\":\"_cursorDisabled_1omm6_26\",\"cursorEnabled\":\"_cursorEnabled_1omm6_30\",\"uncheckedBox\":\"_uncheckedBox_1omm6_34\",\"uncheckedBorder\":\"_uncheckedBorder_1omm6_38\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_1omm6_42\",\"checkedBox\":\"_checkedBox_1omm6_46\",\"checkedNonError\":\"_checkedNonError_1omm6_50\",\"checkedError\":\"_checkedError_1omm6_54\",\"sm\":\"_sm_1omm6_58\",\"md\":\"_md_1omm6_64\"}"]}

package/dist/__chunks/MUJ5ZM2P.mjs

@@ -1,14 +0,0 @@
-// css-module:./MiniActionCard.module.css#css-module
-var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
-
-// src/MiniActionCard/MiniActionCard.tsx
-import { jsx } from "react/jsx-runtime";
-var MiniActionCard = ({
-  children
-}) => /* @__PURE__ */ jsx("div", { className: MiniActionCard_module_default.miniActionCard, children });
-var MiniActionCard_default = MiniActionCard;
-
-export {
-  MiniActionCard_default
-};
-//# sourceMappingURL=MUJ5ZM2P.mjs.map

package/dist/__chunks/MUJ5ZM2P.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["css-module:./MiniActionCard.module.css#css-module","../../src/MiniActionCard/MiniActionCard.tsx"],"sourcesContent":["import \"/Users/christian/cambly/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css\"; export default {\"miniActionCard\":\"_miniActionCard_qebkn_1\",\"card\":\"_card_qebkn_9\"}","import styles from \"./MiniActionCard.module.css\";\n\n/**\n * [MiniActionCard](https://cambly-syntax.vercel.app/?path=/docs/components-miniactioncard--docs) is component that alerts users to a call to action.\n */\nconst MiniActionCard = ({\n  children,\n}: {\n  /**\n   * The child components to render within MiniActionCard.\n   */\n  children: JSX.Element;\n}): JSX.Element => <div className={styles.miniActionCard}>{children}</div>;\n\nexport default MiniActionCard;\n"],"mappings":";AAA2G,IAAO,gCAAQ,EAAC,kBAAiB,2BAA0B,QAAO,gBAAe;;;ACYzK;AAPnB,IAAM,iBAAiB,CAAC;AAAA,EACtB;AACF,MAKmB,oBAAC,SAAI,WAAW,8BAAO,gBAAiB,UAAS;AAEpE,IAAO,yBAAQ;","names":[]}