@cambly/syntax-core 10.8.1 → 10.10.0

package/dist/__chunks/{SSFANAKU.js.map → 7P2G663D.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/RichSelect/RichSelectBox.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  type ReactElement,\n  useContext,\n  useState,\n  useCallback,\n  createContext,\n  useMemo,\n} from \"react\";\nimport { ListBox as ReactAriaListBox } from \"react-aria-components\";\nimport { type Key } from \"react-aria\";\nimport { type Selection } from \"react-stately\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { RichSelectItemContext } from \"./RichSelectItem\";\nimport ButtonGroup from \"../ButtonGroup/ButtonGroup\";\nimport Button from \"../Button/Button\";\nimport styles from \"./RichSelect.module.css\";\nimport Box from \"../Box/Box\";\nimport Divider from \"../Divider/Divider\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\n\ntype RichSelectChild =\n  | ReactElement<typeof RichSelectChip>\n  | ReactElement<typeof RichSelectRadioButton>\n  | ReactElement<typeof RichSelectSection>;\n\nfunction isString(val: unknown): val is string {\n  return typeof val === \"string\";\n}\n\nfunction isEqualSelection(set1?: Selection, set2?: Selection): boolean {\n  if (set1 === set2) return true;\n  if (!set1 && !set2) return true;\n  if (!set1 || !set2) return false;\n  if (isString(set1)) return set1 === set2;\n  if (isString(set2)) return false;\n  if (set1.size !== set2.size) return false;\n  for (const item of set1) {\n    if (!set2.has(item)) return false;\n  }\n  return true;\n}\n\nexport function convertSelection(\n  selection: \"all\" | Iterable<Key> | undefined,\n  defaultValue?: \"all\" | Set<Key>,\n): \"all\" | Set<Key> | undefined {\n  if (!selection) return defaultValue;\n  if (selection === \"all\") return \"all\";\n  return new Set(selection);\n}\n\nexport type RichSelectBoxProps = {\n  /** aria-label for the list box */\n  accessibilityLabel: string;\n  /** Automatically saves changes when true, shows save/clear buttons when not true */\n  autosave?: boolean;\n  /** Test id for the list box element */\n  \"data-testid\"?: string;\n  /** One or more RichSelectList.<Chip|RadioButton|Section|...> components. */\n  children: RichSelectChild | RichSelectChild[];\n  /** Default selected values */\n  defaultSelectedValues?: Set<Key> | string[] | \"all\";\n  /** Enables multiple selection (multiselect) */\n  multiple?: boolean;\n  /** The callback to be called when options are selected / committed */\n  onChange: (selectedValues: string[] | \"all\") => void;\n  /** Text for primary button (Save). Required: string must be translated */\n  primaryButtonText: string;\n  /** accessibilityLabel for primary Button component (Save). Required: string must be translated */\n  primaryButtonAccessibilityLabel: string;\n  /** Text for primary button (Clear). Required: string must be translated */\n  secondaryButtonText: string;\n  /** accessibilityLabel for secondary Button component (Clear). Required: string must be translated */\n  secondaryButtonAccessibilityLabel: string;\n  /** Value of the currently selected options */\n  selectedValues?: Set<Key> | string[] | \"all\";\n};\n\ntype RichSelectBoxContextType = {\n  /** Automatically focuses RichSelectBox on mount when enabled */\n  autoFocus?: boolean;\n};\nexport const RichSelectBoxContext = createContext<RichSelectBoxContextType>({});\n\n/**\n * [RichSelectBox](https://cambly-syntax.vercel.app/?path=/docs/components-richselectbox--docs) is an element that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectBox\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectBox.Section label=\"Cities\">\n      <RichSelectBox.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectBox.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectBox.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectBox.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectBox.Section>\n  </RichSelectBox>\n ```\n */\nconst RichSelectBox = forwardRef<HTMLDivElement, RichSelectBoxProps>(\n  function RichSelectBox(props, ref): ReactElement {\n    const {\n      accessibilityLabel,\n      autosave,\n      children,\n      \"data-testid\": dataTestId,\n      multiple = false,\n      onChange,\n      primaryButtonText,\n      primaryButtonAccessibilityLabel,\n      secondaryButtonText,\n      secondaryButtonAccessibilityLabel,\n      selectedValues: selectedValuesProp,\n      defaultSelectedValues: defaultSelectedValuesProp,\n    } = props;\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        if (isEqualSelection(value, selectedKeys)) return;\n        // Notify parent about the changes\n        if (value === \"all\") return onChange(\"all\");\n        onChange([...value].map(String));\n      },\n    );\n    const [stagedKeys, setStagedKeys] = useState<Set<Key> | \"all\">(\n      selectedKeys,\n    );\n\n    const saveChanges = () => setSelectedKeys(stagedKeys);\n    const clearChanges = () => setStagedKeys(new Set());\n    const stageChanges = (selectedValues: Selection) => {\n      setStagedKeys(selectedValues);\n      if (autosave) setSelectedKeys(selectedValues);\n    };\n\n    // inject method into context so children can disable themselves\n    // by adding `disabled` attribute (through RichSelectItem)\n    const [disabledKeysComposed, setDisabledKeysComposed] = useState<Set<Key>>(\n      new Set(),\n    );\n    const disableKey = useCallback((key: Key, _disabled: boolean) => {\n      setDisabledKeysComposed((keys) => {\n        if (keys.has(key) === _disabled) return keys;\n        _disabled ? keys.add(key) : keys.delete(key);\n        return new Set(keys);\n      });\n    }, []);\n\n    // higher level context for autoFocus behavior (parent sets when rendering RichSelectBox in overlay)\n    const { autoFocus } = useContext(RichSelectBoxContext);\n\n    return (\n      <RichSelectItemContext.Provider value={{ disableKey }}>\n        <Box>\n          <ReactAriaListBox\n            ref={ref}\n            aria-label={accessibilityLabel}\n            autoFocus={autoFocus}\n            selectionMode={multiple ? \"multiple\" : \"single\"}\n            selectionBehavior={multiple ? \"toggle\" : \"replace\"}\n            shouldFocusWrap={true}\n            orientation=\"horizontal\"\n            selectedKeys={stagedKeys}\n            onSelectionChange={stageChanges}\n            disabledKeys={disabledKeysComposed}\n            className={styles.richSelectBox}\n          >\n            {children}\n          </ReactAriaListBox>\n          {!autosave && (\n            <Box\n              backgroundColor=\"white\"\n              display=\"flex\"\n              direction=\"column\"\n              gap={5}\n              marginTop={5}\n              justifyContent=\"end\"\n              position=\"sticky\"\n              dangerouslySetInlineStyle={{\n                __style: {\n                  bottom: 0,\n                },\n              }}\n            >\n              <Box flex=\"grow\">\n                <Divider />\n              </Box>\n              <Box\n                paddingY={5}\n                marginTop={-5}\n                display=\"flex\"\n                justifyContent=\"end\"\n              >\n                <ButtonGroup orientation=\"horizontal\">\n                  <Button\n                    onClick={clearChanges}\n                    color={\"secondary\"}\n                    text={secondaryButtonText}\n                    accessibilityLabel={secondaryButtonAccessibilityLabel}\n                    data-testid={[dataTestId, \"secondary-button\"]\n                      .filter(Boolean)\n                      .join(\"-\")}\n                  />\n                  <Button\n                    onClick={saveChanges}\n                    text={primaryButtonText}\n                    accessibilityLabel={primaryButtonAccessibilityLabel}\n                    color=\"primary\"\n                    data-testid={[dataTestId, \"primary-button\"]\n                      .filter(Boolean)\n                      .join(\"-\")}\n                  />\n                </ButtonGroup>\n              </Box>\n            </Box>\n          )}\n        </Box>\n      </RichSelectItemContext.Provider>\n    );\n  },\n);\n\nexport default Object.assign(RichSelectBox, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n"],"mappings":"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","names":["RichSelectBox"]}
+{"version":3,"sources":["../../src/RichSelect/RichSelectBox.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  type ReactElement,\n  useContext,\n  useState,\n  useCallback,\n  createContext,\n  useMemo,\n} from \"react\";\nimport { ListBox as ReactAriaListBox } from \"react-aria-components\";\nimport { type Key } from \"react-aria\";\nimport { type Selection } from \"react-stately\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport { RichSelectItemContext } from \"./RichSelectItem\";\nimport ButtonGroup from \"../ButtonGroup/ButtonGroup\";\nimport Button from \"../Button/Button\";\nimport styles from \"./RichSelect.module.css\";\nimport Box from \"../Box/Box\";\nimport Divider from \"../Divider/Divider\";\nimport RichSelectSection from \"./RichSelectSection\";\nimport RichSelectChip from \"./RichSelectChip\";\nimport RichSelectRadioButton from \"./RichSelectRadioButton\";\n\ntype RichSelectChild =\n  | ReactElement<typeof RichSelectChip>\n  | ReactElement<typeof RichSelectRadioButton>\n  | ReactElement<typeof RichSelectSection>;\n\nfunction isString(val: unknown): val is string {\n  return typeof val === \"string\";\n}\n\nfunction isEqualSelection(set1?: Selection, set2?: Selection): boolean {\n  if (set1 === set2) return true;\n  if (!set1 && !set2) return true;\n  if (!set1 || !set2) return false;\n  if (isString(set1)) return set1 === set2;\n  if (isString(set2)) return false;\n  if (set1.size !== set2.size) return false;\n  for (const item of set1) {\n    if (!set2.has(item)) return false;\n  }\n  return true;\n}\n\nexport function convertSelection(\n  selection: \"all\" | Iterable<Key> | undefined,\n  defaultValue?: \"all\" | Set<Key>,\n): \"all\" | Set<Key> | undefined {\n  if (!selection) return defaultValue;\n  if (selection === \"all\") return \"all\";\n  return new Set(selection);\n}\n\nexport type RichSelectBoxProps = {\n  /** aria-label for the list box */\n  accessibilityLabel: string;\n  /** Automatically saves changes when true, shows save/clear buttons when not true */\n  autosave?: boolean;\n  /** Test id for the list box element */\n  \"data-testid\"?: string;\n  /** One or more RichSelectList.<Chip|RadioButton|Section|...> components. */\n  children: RichSelectChild | RichSelectChild[];\n  /** Default selected values */\n  defaultSelectedValues?: Set<Key> | string[] | \"all\";\n  /** Enables multiple selection (multiselect) */\n  multiple?: boolean;\n  /** The callback to be called when options are selected / committed */\n  onChange: (selectedValues: string[] | \"all\") => void;\n  /** Text for primary button (Save). Required: string must be translated */\n  primaryButtonText: string;\n  /** accessibilityLabel for primary Button component (Save). Required: string must be translated */\n  primaryButtonAccessibilityLabel: string;\n  /** Text for primary button (Clear). Required: string must be translated */\n  secondaryButtonText: string;\n  /** accessibilityLabel for secondary Button component (Clear). Required: string must be translated */\n  secondaryButtonAccessibilityLabel: string;\n  /** Value of the currently selected options */\n  selectedValues?: Set<Key> | string[] | \"all\";\n};\n\ntype RichSelectBoxContextType = {\n  /** Automatically focuses RichSelectBox on mount when enabled */\n  autoFocus?: boolean;\n};\nexport const RichSelectBoxContext = createContext<RichSelectBoxContextType>({});\n\n/**\n * [RichSelectBox](https://cambly-syntax.vercel.app/?path=/docs/components-richselectbox--docs) is an element that allows users to select one or multiple options from a list.\n *\n * Example Usage:\n ```\n  <RichSelectBox\n    label=\"My Label\"\n    multiple\n    onChange={() => { ... }}\n    primaryButtonText=\"Save\"\n    primaryButtonAccessibilityLabel=\"Save\"\n    secondaryButtonText=\"Clear\"\n    secondaryButtonAccessibilityLabel=\"Clear\"\n  >\n    <RichSelectBox.Section label=\"Cities\">\n      <RichSelectBox.Chip label=\"San Francisco\" value=\"sf\" />\n      <RichSelectBox.Chip label=\"New York\" value=\"ny\" disabled />\n      <RichSelectBox.Chip label=\"Tulsa\" value=\"tulsa\" />\n      <RichSelectBox.Chip label=\"Chicago\" value=\"chicago\" disabled />\n    </RichSelectBox.Section>\n  </RichSelectBox>\n ```\n */\nconst RichSelectBox = forwardRef<HTMLDivElement, RichSelectBoxProps>(\n  function RichSelectBox(props, ref): ReactElement {\n    const {\n      accessibilityLabel,\n      autosave,\n      children,\n      \"data-testid\": dataTestId,\n      multiple = false,\n      onChange,\n      primaryButtonText,\n      primaryButtonAccessibilityLabel,\n      secondaryButtonText,\n      secondaryButtonAccessibilityLabel,\n      selectedValues: selectedValuesProp,\n      defaultSelectedValues: defaultSelectedValuesProp,\n    } = props;\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        if (isEqualSelection(value, selectedKeys)) return;\n        // Notify parent about the changes\n        if (value === \"all\") return onChange(\"all\");\n        onChange([...value].map(String));\n      },\n    );\n    const [stagedKeys, setStagedKeys] = useState<Set<Key> | \"all\">(\n      selectedKeys,\n    );\n\n    const saveChanges = () => setSelectedKeys(stagedKeys);\n    const clearChanges = () => setStagedKeys(new Set());\n    const stageChanges = (selectedValues: Selection) => {\n      setStagedKeys(selectedValues);\n      if (autosave) setSelectedKeys(selectedValues);\n    };\n\n    // inject method into context so children can disable themselves\n    // by adding `disabled` attribute (through RichSelectItem)\n    const [disabledKeysComposed, setDisabledKeysComposed] = useState<Set<Key>>(\n      new Set(),\n    );\n    const disableKey = useCallback((key: Key, _disabled: boolean) => {\n      setDisabledKeysComposed((keys) => {\n        if (keys.has(key) === _disabled) return keys;\n        _disabled ? keys.add(key) : keys.delete(key);\n        return new Set(keys);\n      });\n    }, []);\n\n    // higher level context for autoFocus behavior (parent sets when rendering RichSelectBox in overlay)\n    const { autoFocus } = useContext(RichSelectBoxContext);\n\n    return (\n      <RichSelectItemContext.Provider value={{ disableKey }}>\n        <Box>\n          <ReactAriaListBox\n            ref={ref}\n            aria-label={accessibilityLabel}\n            autoFocus={autoFocus}\n            selectionMode={multiple ? \"multiple\" : \"single\"}\n            selectionBehavior={multiple ? \"toggle\" : \"replace\"}\n            shouldFocusWrap={true}\n            orientation=\"horizontal\"\n            selectedKeys={stagedKeys}\n            onSelectionChange={stageChanges}\n            disabledKeys={disabledKeysComposed}\n            className={styles.richSelectBox}\n          >\n            {children}\n          </ReactAriaListBox>\n          {!autosave && (\n            <Box\n              backgroundColor=\"white\"\n              display=\"flex\"\n              direction=\"column\"\n              gap={5}\n              marginTop={5}\n              justifyContent=\"end\"\n              position=\"sticky\"\n              dangerouslySetInlineStyle={{\n                __style: {\n                  bottom: 0,\n                },\n              }}\n            >\n              <Box flex=\"grow\">\n                <Divider />\n              </Box>\n              <Box\n                paddingY={5}\n                marginTop={-5}\n                display=\"flex\"\n                justifyContent=\"end\"\n              >\n                <ButtonGroup orientation=\"horizontal\">\n                  <Button\n                    onClick={clearChanges}\n                    color={\"secondary\"}\n                    text={secondaryButtonText}\n                    accessibilityLabel={secondaryButtonAccessibilityLabel}\n                    data-testid={[dataTestId, \"secondary-button\"]\n                      .filter(Boolean)\n                      .join(\"-\")}\n                  />\n                  <Button\n                    onClick={saveChanges}\n                    text={primaryButtonText}\n                    accessibilityLabel={primaryButtonAccessibilityLabel}\n                    color=\"primary\"\n                    data-testid={[dataTestId, \"primary-button\"]\n                      .filter(Boolean)\n                      .join(\"-\")}\n                  />\n                </ButtonGroup>\n              </Box>\n            </Box>\n          )}\n        </Box>\n      </RichSelectItemContext.Provider>\n    );\n  },\n);\n\nexport default Object.assign(RichSelectBox, {\n  Section: RichSelectSection,\n  Chip: RichSelectChip,\n  RadioButton: RichSelectRadioButton,\n});\n"],"mappings":"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","names":["RichSelectBox"]}

package/dist/__chunks/A4O4F3KK.cjs

@@ -0,0 +1,57 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+
+var _VKB7KOAHcjs = require('./VKB7KOAH.cjs');
+
+// src/colors/backgroundColor.ts
+function classicBackgroundColor(color) {
+  switch (color) {
+    case "secondary":
+      return _VKB7KOAHcjs.colors_module_default.primary100BackgroundColor;
+    case "destructive-primary":
+      return _VKB7KOAHcjs.colors_module_default.destructive700BackgroundColor;
+    case "destructive-secondary":
+      return _VKB7KOAHcjs.colors_module_default.destructive100BackgroundColor;
+    case "success":
+      return _VKB7KOAHcjs.colors_module_default.success700BackgroundColor;
+    case "tertiary":
+    case "destructive-tertiary":
+      return _VKB7KOAHcjs.colors_module_default.whiteBackgroundColor;
+    case "branded":
+      return _VKB7KOAHcjs.colors_module_default.yellow700BackgroundColor;
+    case "inverse":
+      return _VKB7KOAHcjs.colors_module_default.gray60BackgroundColor;
+    default:
+      return _VKB7KOAHcjs.colors_module_default.primary700BackgroundColor;
+  }
+}
+function cambioBackgroundColor(color) {
+  switch (color) {
+    case "primary":
+      return _VKB7KOAHcjs.colors_module_default.cambioBlackBackgroundColor;
+    case "secondary":
+      return _VKB7KOAHcjs.colors_module_default.cambioGray370BackgroundColor;
+    case "tertiary":
+    case "success-tertiary":
+    case "destructive-tertiary":
+      return _VKB7KOAHcjs.colors_module_default.cambioTransparentFullBackgroundColor;
+    case "success-primary":
+      return _VKB7KOAHcjs.colors_module_default.cambioSuccess700BackgroundColor;
+    case "success-secondary":
+      return _VKB7KOAHcjs.colors_module_default.cambioSuccess370BackgroundColor;
+    case "destructive-primary":
+      return _VKB7KOAHcjs.colors_module_default.cambioDestructive700BackgroundColor;
+    case "destructive-secondary":
+      return _VKB7KOAHcjs.colors_module_default.cambioDestructive370BackgroundColor;
+    case "branded":
+      return _VKB7KOAHcjs.colors_module_default.cambioYellow700BackgroundColor;
+    default:
+      return _VKB7KOAHcjs.colors_module_default.cambioBlackBackgroundColor;
+  }
+}
+
+
+
+
+exports.classicBackgroundColor = classicBackgroundColor; exports.cambioBackgroundColor = cambioBackgroundColor;
+//# sourceMappingURL=A4O4F3KK.cjs.map

package/dist/__chunks/A4O4F3KK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors/backgroundColor.ts"],"names":[],"mappings":";;;;;;AAGO,SAAS,uBAAuB,OAAuC;AAC5E,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB;AACE,aAAO,sBAAO;AAAA,EAClB;AACF;AAEO,SAAS,sBACd,OACQ;AACR,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB,KAAK;AACH,aAAO,sBAAO;AAAA,IAChB;AACE,aAAO,sBAAO;AAAA,EAClB;AACF","sourcesContent":["import { type CambioColor, type Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport function classicBackgroundColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"secondary\":\n      return styles.primary100BackgroundColor;\n    case \"destructive-primary\":\n      return styles.destructive700BackgroundColor;\n    case \"destructive-secondary\":\n      return styles.destructive100BackgroundColor;\n    case \"success\":\n      return styles.success700BackgroundColor;\n    case \"tertiary\":\n    case \"destructive-tertiary\":\n      return styles.whiteBackgroundColor;\n    case \"branded\":\n      return styles.yellow700BackgroundColor;\n    case \"inverse\":\n      return styles.gray60BackgroundColor;\n    default:\n      return styles.primary700BackgroundColor;\n  }\n}\n\nexport function cambioBackgroundColor(\n  color: (typeof CambioColor)[number],\n): string {\n  switch (color) {\n    case \"primary\":\n      return styles.cambioBlackBackgroundColor;\n    case \"secondary\":\n      return styles.cambioGray370BackgroundColor;\n    case \"tertiary\":\n    case \"success-tertiary\":\n    case \"destructive-tertiary\":\n      return styles.cambioTransparentFullBackgroundColor;\n    case \"success-primary\":\n      return styles.cambioSuccess700BackgroundColor;\n    case \"success-secondary\":\n      return styles.cambioSuccess370BackgroundColor;\n    case \"destructive-primary\":\n      return styles.cambioDestructive700BackgroundColor;\n    case \"destructive-secondary\":\n      return styles.cambioDestructive370BackgroundColor;\n    case \"branded\":\n      return styles.cambioYellow700BackgroundColor;\n    default:\n      return styles.cambioBlackBackgroundColor;\n  }\n}\n"]}

package/dist/__chunks/{RMC2RSHW.js → A4QZYP2J.js}

@@ -1,12 +1,13 @@
+"use client"
 import {
   layout_module_default
-} from "./PTWXXDFF.js";
+} from "./DDUJFFG7.js";
 import {
   Box_module_default
-} from "./KMIZI5PW.js";
+} from "./O3CEUWCC.js";
 import {
   Typography_default
-} from "./TGGJZ5GF.js";
+} from "./L7PPCZM5.js";
 
 // src/RichSelect/RichSelectSection.tsx
 import { forwardRef } from "react";
@@ -49,4 +50,4 @@ var RichSelectSection_default = forwardRef(
 export {
   RichSelectSection_default
 };
-//# sourceMappingURL=RMC2RSHW.js.map
+//# sourceMappingURL=A4QZYP2J.js.map

package/dist/__chunks/{RMC2RSHW.js.map → A4QZYP2J.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/RichSelect/RichSelectSection.tsx"],"sourcesContent":["import React, { forwardRef, type ReactElement } from \"react\";\nimport {\n  Section as ReactAriaSection,\n  Header as ReactAriaHeader,\n  Collection as ReactAriaCollection,\n} from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport Typography from \"../Typography/Typography\";\n\ntype RichSelectSectionProps = {\n  \"data-testid\"?: string;\n  label: string;\n  children: ReactElement | ReactElement[];\n  orientation?: \"horizontal\" | \"vertical\";\n};\n\nexport default forwardRef<HTMLDivElement, RichSelectSectionProps>(\n  function RichSelectSection(props, ref): ReactElement {\n    const {\n      \"data-testid\": dataTestId,\n      label,\n      children,\n      orientation = \"horizontal\",\n    } = props;\n\n    return (\n      <ReactAriaSection\n        ref={ref}\n        data-testid={dataTestId}\n        className={classNames(\n          [boxStyles.box, boxStyles.flex, boxStyles.flexWrap, boxStyles.gap3],\n          {\n            [boxStyles.row]: orientation === \"horizontal\",\n            [boxStyles.column]: orientation === \"vertical\",\n          },\n        )}\n      >\n        <ReactAriaHeader className={classNames(layoutStyles.fullWidth)}>\n          <Typography>{label}</Typography>\n        </ReactAriaHeader>\n        <ReactAriaCollection>{children}</ReactAriaCollection>\n      </ReactAriaSection>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAAA,SAAgB,kBAAqC;AACrD;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,OACT;AACP,OAAO,gBAAgB;AAsBjB,SAYI,KAZJ;AAVN,IAAO,4BAAQ;AAAA,EACb,SAAS,kBAAkB,OAAO,KAAmB;AACnD,UAAM;AAAA,MACJ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAChB,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW;AAAA,UACT,CAAC,mBAAU,KAAK,mBAAU,MAAM,mBAAU,UAAU,mBAAU,IAAI;AAAA,UAClE;AAAA,YACE,CAAC,mBAAU,GAAG,GAAG,gBAAgB;AAAA,YACjC,CAAC,mBAAU,MAAM,GAAG,gBAAgB;AAAA,UACtC;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,mBAAgB,WAAW,WAAW,sBAAa,SAAS,GAC3D,8BAAC,sBAAY,iBAAM,GACrB;AAAA,UACA,oBAAC,uBAAqB,UAAS;AAAA;AAAA;AAAA,IACjC;AAAA,EAEJ;AACF;","names":[]}
+{"version":3,"sources":["../../src/RichSelect/RichSelectSection.tsx"],"sourcesContent":["import React, { forwardRef, type ReactElement } from \"react\";\nimport {\n  Section as ReactAriaSection,\n  Header as ReactAriaHeader,\n  Collection as ReactAriaCollection,\n} from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport Typography from \"../Typography/Typography\";\n\ntype RichSelectSectionProps = {\n  \"data-testid\"?: string;\n  label: string;\n  children: ReactElement | ReactElement[];\n  orientation?: \"horizontal\" | \"vertical\";\n};\n\nexport default forwardRef<HTMLDivElement, RichSelectSectionProps>(\n  function RichSelectSection(props, ref): ReactElement {\n    const {\n      \"data-testid\": dataTestId,\n      label,\n      children,\n      orientation = \"horizontal\",\n    } = props;\n\n    return (\n      <ReactAriaSection\n        ref={ref}\n        data-testid={dataTestId}\n        className={classNames(\n          [boxStyles.box, boxStyles.flex, boxStyles.flexWrap, boxStyles.gap3],\n          {\n            [boxStyles.row]: orientation === \"horizontal\",\n            [boxStyles.column]: orientation === \"vertical\",\n          },\n        )}\n      >\n        <ReactAriaHeader className={classNames(layoutStyles.fullWidth)}>\n          <Typography>{label}</Typography>\n        </ReactAriaHeader>\n        <ReactAriaCollection>{children}</ReactAriaCollection>\n      </ReactAriaSection>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;AAAA,SAAgB,kBAAqC;AACrD;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,OACT;AACP,OAAO,gBAAgB;AAsBjB,SAYI,KAZJ;AAVN,IAAO,4BAAQ;AAAA,EACb,SAAS,kBAAkB,OAAO,KAAmB;AACnD,UAAM;AAAA,MACJ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAChB,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW;AAAA,UACT,CAAC,mBAAU,KAAK,mBAAU,MAAM,mBAAU,UAAU,mBAAU,IAAI;AAAA,UAClE;AAAA,YACE,CAAC,mBAAU,GAAG,GAAG,gBAAgB;AAAA,YACjC,CAAC,mBAAU,MAAM,GAAG,gBAAgB;AAAA,UACtC;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,mBAAgB,WAAW,WAAW,sBAAa,SAAS,GAC3D,8BAAC,sBAAY,iBAAM,GACrB;AAAA,UACA,oBAAC,uBAAqB,UAAS;AAAA;AAAA;AAAA,IACjC;AAAA,EAEJ;AACF;","names":[]}

package/dist/__chunks/{53IMFXFX.js → ABAYJGAF.js}

@@ -1,15 +1,16 @@
+"use client"
 import {
   Focus_module_default
-} from "./2O6FDRTF.js";
+} from "./KKADUD65.js";
 import {
   Typography_default
-} from "./TGGJZ5GF.js";
+} from "./L7PPCZM5.js";
 import {
   useIsHydrated
-} from "./YJ7YDIGB.js";
+} from "./JB65NEXK.js";
 import {
   useFocusVisible
-} from "./OGJDUOWP.js";
+} from "./BWPNF6RD.js";
 
 // src/Checkbox/Checkbox.tsx
 import { useState } from "react";
@@ -95,7 +96,7 @@ var Checkbox = ({
           Typography_default,
           {
             size: typographySize[size],
-            color: error ? "destructive-primary" : "gray800",
+            color: error ? "destructive-primary" : "gray900",
             children: label
           }
         )
@@ -108,4 +109,4 @@ var Checkbox_default = Checkbox;
 export {
   Checkbox_default
 };
-//# sourceMappingURL=53IMFXFX.js.map
+//# sourceMappingURL=ABAYJGAF.js.map

package/dist/__chunks/{53IMFXFX.js.map → ABAYJGAF.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"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\";\nimport useIsHydrated from \"../useIsHydrated\";\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: disabledProp = 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 isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\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 \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_an7al_1\",\"inputOverlay\":\"_inputOverlay_an7al_9\",\"checkbox\":\"_checkbox_an7al_17\",\"disabled\":\"_disabled_an7al_25\",\"cursorDisabled\":\"_cursorDisabled_an7al_29\",\"cursorEnabled\":\"_cursorEnabled_an7al_33\",\"uncheckedBox\":\"_uncheckedBox_an7al_37\",\"uncheckedBorder\":\"_uncheckedBorder_an7al_41\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_an7al_45\",\"checkedBox\":\"_checkedBox_an7al_49\",\"checkedNonError\":\"_checkedNonError_an7al_53\",\"checkedError\":\"_checkedError_an7al_57\",\"sm\":\"_sm_an7al_61\",\"md\":\"_md_an7al_67\"}"],"mappings":";;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,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;;;ADwFjoB,SAYQ,KAZR;AAhFJ,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,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,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;","names":[]}
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"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\";\nimport useIsHydrated from \"../useIsHydrated\";\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: disabledProp = 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 isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\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\" : \"gray900\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_an7al_1\",\"inputOverlay\":\"_inputOverlay_an7al_9\",\"checkbox\":\"_checkbox_an7al_17\",\"disabled\":\"_disabled_an7al_25\",\"cursorDisabled\":\"_cursorDisabled_an7al_29\",\"cursorEnabled\":\"_cursorEnabled_an7al_33\",\"uncheckedBox\":\"_uncheckedBox_an7al_37\",\"uncheckedBorder\":\"_uncheckedBorder_an7al_41\",\"uncheckedErrorBorder\":\"_uncheckedErrorBorder_an7al_45\",\"checkedBox\":\"_checkedBox_an7al_49\",\"checkedNonError\":\"_checkedNonError_an7al_53\",\"checkedError\":\"_checkedError_an7al_57\",\"sm\":\"_sm_an7al_61\",\"md\":\"_md_an7al_67\"}"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,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;;;ADwFjoB,SAYQ,KAZR;AAhFJ,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,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,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;","names":[]}

package/dist/__chunks/{U6LLWKED.cjs → AGHYI7QR.cjs}

@@ -1,4 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// ../syntax-design-tokens/dist/js/index.js
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// ../syntax-design-tokens/dist/js/index.js
 var ColorBaseDestructive700 = "#d32a4b";
 var ColorBaseGray800 = "#353535";
 
@@ -6,4 +8,4 @@ var ColorBaseGray800 = "#353535";
 
 
 exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray800 = ColorBaseGray800;
-//# sourceMappingURL=U6LLWKED.cjs.map
+//# sourceMappingURL=AGHYI7QR.cjs.map

package/dist/__chunks/AGHYI7QR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Mon, 04 Mar 2024 22:57: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"]}

package/dist/__chunks/{SJFWRAOP.cjs → BA4JPX36.cjs}

@@ -1,4 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Modal/FocusTrap.tsx
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
+
+// src/Modal/FocusTrap.tsx
 var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
 function queryFocusableAll(el) {
@@ -67,4 +69,4 @@ function FocusTrap({
 
 
 exports.FocusTrap = FocusTrap;
-//# sourceMappingURL=SJFWRAOP.cjs.map
+//# sourceMappingURL=BA4JPX36.cjs.map

package/dist/__chunks/BA4JPX36.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modal/FocusTrap.tsx"],"names":[],"mappings":";;;AAAA,SAAgB,WAAW,cAAiC;AAyFxD;AAvFJ,SAAS,kBAAkB,IAA6C;AAEtE,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,KAAK,GAAG;AACV,SAAO,GAAG,iBAAiB,QAAQ;AACrC;AAEA,IAAM,eAAe,CAAC,OAAoB;AACxC,MAAI,OAAO,GAAG,UAAU,YAAY;AAClC,OAAG,MAAM;AAAA,EACX;AACF;AAKe,SAAR,UAA2B;AAAA,EAChC;AACF,GAEiB;AACf,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,yBAAyB,OAA2B,IAAI;AAE9D,YAAU,MAAM;AACd,UAAM,EAAE,SAAS,QAAQ,IAAI;AAG7B,UAAM,kBAAkB,MAAM;AAC5B,YAAM,eAAe,WAAW,OAAO;AACvC,UAAI,WAAW,CAAC,cAAc;AAC5B,qBAAa,kBAAkB,OAAO,EAAE,CAAC,CAAC;AAAA,MAC5C;AAAA,IACF;AAEA,UAAM,cAA2C,CAAC,UAAsB;AACtE,UACE,CAAC,WACA,MAAM,kBAAkB,QAAQ,QAAQ,SAAS,MAAM,MAAM,GAC9D;AACA;AAAA,MACF;AAGA,UACE,MAAM,kBAAkB,WACxB,MAAM,OAAO,QAAQ,mCAAmC,MAAM,MAC9D;AACA;AAAA,MACF;AAEA,YAAM,gBAAgB;AACtB,YAAM,eAAe;AACrB,sBAAgB;AAAA,IAClB;AAGA,2BAAuB,UAAU,SAAS;AAC1C,oBAAgB;AAChB,aAAS,iBAAiB,SAAS,aAAa,IAAI;AAEpD,WAAO,SAAS,UAAU;AACxB,YAAM,EAAE,SAAS,oBAAoB,IAAI;AACzC,eAAS,oBAAoB,SAAS,aAAa,IAAI;AAEvD,UAAI,qBAAqB;AACvB,qBAAa,mBAAmB;AAAA,MAClC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,sBAAsB,CAAC;AAElC,SACE,oBAAC,SAAI,eAAY,qBAAoB,KAAK,OACvC,UACH;AAEJ","sourcesContent":["import React, { useEffect, useRef, type ReactElement } from \"react\";\n\nfunction queryFocusableAll(el: HTMLDivElement): NodeListOf<HTMLElement> {\n  // Focusable, interactive elements that could possibly be in children\n  const selector = [\n    \"a[href]\",\n    \"area[href]\",\n    \"input:not([disabled])\",\n    \"select:not([disabled])\",\n    \"textarea:not([disabled])\",\n    \"button:not([disabled])\",\n    \"iframe\",\n    \"object\",\n    \"embed\",\n    '[tabindex=\"-1\"]',\n    '[tabindex=\"0\"]',\n    \"[contenteditable]\",\n    \"audio[controls]\",\n    \"video[controls]\",\n    \"summary\",\n  ].join(\",\");\n  return el.querySelectorAll(selector);\n}\n\nconst focusElement = (el: HTMLElement) => {\n  if (typeof el.focus === \"function\") {\n    el.focus();\n  }\n};\n\n/**\n * FocusTrap is used by components like Modal to ensure that only elements within children components can be focused.\n */\nexport default function FocusTrap({\n  children,\n}: {\n  children?: ReactElement | null;\n}): ReactElement {\n  const elRef = useRef<HTMLDivElement | null>(null);\n  const previouslyFocusedElRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    const { current: element } = elRef;\n\n    // Focus the first child element among all the focusable, interactive elements within `children`\n    const focusFirstChild = () => {\n      const withinIframe = window !== window.parent;\n      if (element && !withinIframe) {\n        focusElement(queryFocusableAll(element)[0]);\n      }\n    };\n\n    const handleFocus: (event: FocusEvent) => void = (event: FocusEvent) => {\n      if (\n        !element ||\n        (event.target instanceof Node && element.contains(event.target))\n      ) {\n        return;\n      }\n\n      // This prevents stack overflow when multiple FocusTraps are rendered\n      if (\n        event.target instanceof Element &&\n        event.target.closest('[data-testid=\"syntax-focus-trap\"]') !== null\n      ) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      focusFirstChild();\n    };\n\n    // If an element has focus currently, keep a reference to that element\n    previouslyFocusedElRef.current = document.activeElement as HTMLElement;\n    focusFirstChild();\n    document.addEventListener(\"focus\", handleFocus, true);\n\n    return function cleanup() {\n      const { current: previouslyFocusedEl } = previouslyFocusedElRef;\n      document.removeEventListener(\"focus\", handleFocus, true);\n      // If we previously stored a reference to a focused element, return focus to that element\n      if (previouslyFocusedEl) {\n        focusElement(previouslyFocusedEl);\n      }\n    };\n  }, [elRef, previouslyFocusedElRef]);\n\n  return (\n    <div data-testid=\"syntax-focus-trap\" ref={elRef}>\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/__chunks/{OGJDUOWP.js → BWPNF6RD.js}

@@ -1,3 +1,5 @@
+"use client"
+
 // src/useFocusVisible.tsx
 import { useState, useEffect } from "react";
 var hasSetupGlobalListeners = false;
@@ -91,4 +93,4 @@ function useFocusVisible() {
 export {
   useFocusVisible
 };
-//# sourceMappingURL=OGJDUOWP.js.map
+//# sourceMappingURL=BWPNF6RD.js.map

package/dist/__chunks/{OGJDUOWP.js.map → BWPNF6RD.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useFocusVisible.tsx"],"sourcesContent":["// Portions of the code in this file are based on code from react & react-spectrum:\n// https://github.com/facebook/react/blob/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions/events/src/dom/create-event-handle/Focus.js\n// https://github.com/adobe/react-spectrum/blob/c700898916bbd076bcc63e49d77c16d80623a8e7/packages/@react-aria/interactions/src/useFocusVisible.ts\n\nimport { useState, useEffect } from \"react\";\n\ntype Modality = \"keyboard\" | \"pointer\";\ntype HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent;\ntype Handler = (modality: Modality, e: HandlerEvent) => void;\n\nlet hasSetupGlobalListeners = false;\nlet currentModality: Modality | null = null;\nconst changeHandlers = new Set<Handler>();\nlet hasEventBeforeFocus = false;\n\nconst isMac =\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  typeof window !== \"undefined\" && window.navigator != null\n    ? // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with\n      /^Mac/.test(window.navigator.platform)\n    : false;\n\nfunction isValidKey(e: KeyboardEvent) {\n  return !(e.metaKey || (!isMac && e.altKey) || e.ctrlKey);\n}\n\nfunction triggerChangeHandlers(modality: Modality, e: HandlerEvent) {\n  changeHandlers.forEach((handler) => {\n    handler(modality, e);\n  });\n}\n\nfunction handleKeyboardEvent(e: KeyboardEvent) {\n  hasEventBeforeFocus = true;\n  if (isValidKey(e)) {\n    currentModality = \"keyboard\";\n    triggerChangeHandlers(\"keyboard\", e);\n  }\n}\n\nfunction handlePointerEvent(e: PointerEvent | MouseEvent) {\n  currentModality = \"pointer\";\n  if (e.type === \"mousedown\" || e.type === \"pointerdown\") {\n    hasEventBeforeFocus = true;\n    triggerChangeHandlers(\"pointer\", e);\n  }\n}\n\nfunction handleFocusEvent(e: FocusEvent) {\n  // Firefox fires two extra focus events when the user first clicks into an iframe:\n  // first on the window, then on the document. We ignore these events so they don't\n  // cause keyboard focus rings to appear.\n  if (e.target === window || e.target === document) {\n    return;\n  }\n\n  // If a focus event occurs without a preceding keyboard or pointer event, switch to keyboard modality.\n  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.\n  if (!hasEventBeforeFocus) {\n    currentModality = \"keyboard\";\n    triggerChangeHandlers(\"keyboard\", e);\n  }\n\n  hasEventBeforeFocus = false;\n}\n\nfunction handleWindowBlur() {\n  // When the window is blurred, reset state. This is necessary when tabbing out of the window,\n  // for example, since a subsequent focus event won't be fired.\n  hasEventBeforeFocus = false;\n}\n\nfunction isFocusVisible(): boolean {\n  return currentModality !== \"pointer\";\n}\n\nfunction setupGlobalFocusEvents() {\n  if (typeof window === \"undefined\" || hasSetupGlobalListeners) {\n    return;\n  }\n\n  // Programmatic focus() calls shouldn't affect the current input modality.\n  // However, we need to detect other cases when a focus event occurs without\n  // a preceding user event (e.g. screen reader focus). Overriding the focus\n  // method on HTMLElement.prototype is a bit hacky, but works.\n  // $FlowExpectedError[method-unbinding]\n  // eslint-disable-next-line @typescript-eslint/unbound-method\n  const { focus } = HTMLElement.prototype;\n  // $FlowIssue[cannot-write]\n  HTMLElement.prototype.focus = function focusElement(...args) {\n    hasEventBeforeFocus = true;\n    focus.apply(this, args);\n  };\n\n  document.addEventListener(\"keydown\", handleKeyboardEvent, true);\n  document.addEventListener(\"keyup\", handleKeyboardEvent, true);\n\n  // Register focus events on the window so they are sure to happen\n  // before React's event listeners (registered on the document).\n  window.addEventListener(\"focus\", handleFocusEvent, true);\n  window.addEventListener(\"blur\", handleWindowBlur, false);\n\n  if (typeof PointerEvent !== \"undefined\") {\n    document.addEventListener(\"pointerdown\", handlePointerEvent, true);\n    document.addEventListener(\"pointermove\", handlePointerEvent, true);\n    document.addEventListener(\"pointerup\", handlePointerEvent, true);\n  } else {\n    document.addEventListener(\"mousedown\", handlePointerEvent, true);\n    document.addEventListener(\"mousemove\", handlePointerEvent, true);\n    document.addEventListener(\"mouseup\", handlePointerEvent, true);\n  }\n\n  hasSetupGlobalListeners = true;\n}\n\nexport default function useFocusVisible(): {\n  isFocusVisible: boolean;\n} {\n  setupGlobalFocusEvents();\n  const [isFocusVisibleState, setFocusVisible] = useState(isFocusVisible());\n  useEffect(() => {\n    const handler = () => {\n      setFocusVisible(isFocusVisible());\n    };\n\n    changeHandlers.add(handler);\n    return () => {\n      changeHandlers.delete(handler);\n    };\n  }, []);\n\n  return { isFocusVisible: isFocusVisibleState };\n}\n"],"mappings":";AAIA,SAAS,UAAU,iBAAiB;AAMpC,IAAI,0BAA0B;AAC9B,IAAI,kBAAmC;AACvC,IAAM,iBAAiB,oBAAI,IAAa;AACxC,IAAI,sBAAsB;AAE1B,IAAM;AAAA;AAAA,EAEJ,OAAO,WAAW,eAAe,OAAO,aAAa;AAAA;AAAA,IAEjD,OAAO,KAAK,OAAO,UAAU,QAAQ;AAAA,MACrC;AAAA;AAEN,SAAS,WAAW,GAAkB;AACpC,SAAO,EAAE,EAAE,WAAY,CAAC,SAAS,EAAE,UAAW,EAAE;AAClD;AAEA,SAAS,sBAAsB,UAAoB,GAAiB;AAClE,iBAAe,QAAQ,CAAC,YAAY;AAClC,YAAQ,UAAU,CAAC;AAAA,EACrB,CAAC;AACH;AAEA,SAAS,oBAAoB,GAAkB;AAC7C,wBAAsB;AACtB,MAAI,WAAW,CAAC,GAAG;AACjB,sBAAkB;AAClB,0BAAsB,YAAY,CAAC;AAAA,EACrC;AACF;AAEA,SAAS,mBAAmB,GAA8B;AACxD,oBAAkB;AAClB,MAAI,EAAE,SAAS,eAAe,EAAE,SAAS,eAAe;AACtD,0BAAsB;AACtB,0BAAsB,WAAW,CAAC;AAAA,EACpC;AACF;AAEA,SAAS,iBAAiB,GAAe;AAIvC,MAAI,EAAE,WAAW,UAAU,EAAE,WAAW,UAAU;AAChD;AAAA,EACF;AAIA,MAAI,CAAC,qBAAqB;AACxB,sBAAkB;AAClB,0BAAsB,YAAY,CAAC;AAAA,EACrC;AAEA,wBAAsB;AACxB;AAEA,SAAS,mBAAmB;AAG1B,wBAAsB;AACxB;AAEA,SAAS,iBAA0B;AACjC,SAAO,oBAAoB;AAC7B;AAEA,SAAS,yBAAyB;AAChC,MAAI,OAAO,WAAW,eAAe,yBAAyB;AAC5D;AAAA,EACF;AAQA,QAAM,EAAE,MAAM,IAAI,YAAY;AAE9B,cAAY,UAAU,QAAQ,SAAS,gBAAgB,MAAM;AAC3D,0BAAsB;AACtB,UAAM,MAAM,MAAM,IAAI;AAAA,EACxB;AAEA,WAAS,iBAAiB,WAAW,qBAAqB,IAAI;AAC9D,WAAS,iBAAiB,SAAS,qBAAqB,IAAI;AAI5D,SAAO,iBAAiB,SAAS,kBAAkB,IAAI;AACvD,SAAO,iBAAiB,QAAQ,kBAAkB,KAAK;AAEvD,MAAI,OAAO,iBAAiB,aAAa;AACvC,aAAS,iBAAiB,eAAe,oBAAoB,IAAI;AACjE,aAAS,iBAAiB,eAAe,oBAAoB,IAAI;AACjE,aAAS,iBAAiB,aAAa,oBAAoB,IAAI;AAAA,EACjE,OAAO;AACL,aAAS,iBAAiB,aAAa,oBAAoB,IAAI;AAC/D,aAAS,iBAAiB,aAAa,oBAAoB,IAAI;AAC/D,aAAS,iBAAiB,WAAW,oBAAoB,IAAI;AAAA,EAC/D;AAEA,4BAA0B;AAC5B;AAEe,SAAR,kBAEL;AACA,yBAAuB;AACvB,QAAM,CAAC,qBAAqB,eAAe,IAAI,SAAS,eAAe,CAAC;AACxE,YAAU,MAAM;AACd,UAAM,UAAU,MAAM;AACpB,sBAAgB,eAAe,CAAC;AAAA,IAClC;AAEA,mBAAe,IAAI,OAAO;AAC1B,WAAO,MAAM;AACX,qBAAe,OAAO,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,gBAAgB,oBAAoB;AAC/C;","names":[]}
+{"version":3,"sources":["../../src/useFocusVisible.tsx"],"sourcesContent":["// Portions of the code in this file are based on code from react & react-spectrum:\n// https://github.com/facebook/react/blob/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions/events/src/dom/create-event-handle/Focus.js\n// https://github.com/adobe/react-spectrum/blob/c700898916bbd076bcc63e49d77c16d80623a8e7/packages/@react-aria/interactions/src/useFocusVisible.ts\n\nimport { useState, useEffect } from \"react\";\n\ntype Modality = \"keyboard\" | \"pointer\";\ntype HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent;\ntype Handler = (modality: Modality, e: HandlerEvent) => void;\n\nlet hasSetupGlobalListeners = false;\nlet currentModality: Modality | null = null;\nconst changeHandlers = new Set<Handler>();\nlet hasEventBeforeFocus = false;\n\nconst isMac =\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  typeof window !== \"undefined\" && window.navigator != null\n    ? // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with\n      /^Mac/.test(window.navigator.platform)\n    : false;\n\nfunction isValidKey(e: KeyboardEvent) {\n  return !(e.metaKey || (!isMac && e.altKey) || e.ctrlKey);\n}\n\nfunction triggerChangeHandlers(modality: Modality, e: HandlerEvent) {\n  changeHandlers.forEach((handler) => {\n    handler(modality, e);\n  });\n}\n\nfunction handleKeyboardEvent(e: KeyboardEvent) {\n  hasEventBeforeFocus = true;\n  if (isValidKey(e)) {\n    currentModality = \"keyboard\";\n    triggerChangeHandlers(\"keyboard\", e);\n  }\n}\n\nfunction handlePointerEvent(e: PointerEvent | MouseEvent) {\n  currentModality = \"pointer\";\n  if (e.type === \"mousedown\" || e.type === \"pointerdown\") {\n    hasEventBeforeFocus = true;\n    triggerChangeHandlers(\"pointer\", e);\n  }\n}\n\nfunction handleFocusEvent(e: FocusEvent) {\n  // Firefox fires two extra focus events when the user first clicks into an iframe:\n  // first on the window, then on the document. We ignore these events so they don't\n  // cause keyboard focus rings to appear.\n  if (e.target === window || e.target === document) {\n    return;\n  }\n\n  // If a focus event occurs without a preceding keyboard or pointer event, switch to keyboard modality.\n  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.\n  if (!hasEventBeforeFocus) {\n    currentModality = \"keyboard\";\n    triggerChangeHandlers(\"keyboard\", e);\n  }\n\n  hasEventBeforeFocus = false;\n}\n\nfunction handleWindowBlur() {\n  // When the window is blurred, reset state. This is necessary when tabbing out of the window,\n  // for example, since a subsequent focus event won't be fired.\n  hasEventBeforeFocus = false;\n}\n\nfunction isFocusVisible(): boolean {\n  return currentModality !== \"pointer\";\n}\n\nfunction setupGlobalFocusEvents() {\n  if (typeof window === \"undefined\" || hasSetupGlobalListeners) {\n    return;\n  }\n\n  // Programmatic focus() calls shouldn't affect the current input modality.\n  // However, we need to detect other cases when a focus event occurs without\n  // a preceding user event (e.g. screen reader focus). Overriding the focus\n  // method on HTMLElement.prototype is a bit hacky, but works.\n  // $FlowExpectedError[method-unbinding]\n  // eslint-disable-next-line @typescript-eslint/unbound-method\n  const { focus } = HTMLElement.prototype;\n  // $FlowIssue[cannot-write]\n  HTMLElement.prototype.focus = function focusElement(...args) {\n    hasEventBeforeFocus = true;\n    focus.apply(this, args);\n  };\n\n  document.addEventListener(\"keydown\", handleKeyboardEvent, true);\n  document.addEventListener(\"keyup\", handleKeyboardEvent, true);\n\n  // Register focus events on the window so they are sure to happen\n  // before React's event listeners (registered on the document).\n  window.addEventListener(\"focus\", handleFocusEvent, true);\n  window.addEventListener(\"blur\", handleWindowBlur, false);\n\n  if (typeof PointerEvent !== \"undefined\") {\n    document.addEventListener(\"pointerdown\", handlePointerEvent, true);\n    document.addEventListener(\"pointermove\", handlePointerEvent, true);\n    document.addEventListener(\"pointerup\", handlePointerEvent, true);\n  } else {\n    document.addEventListener(\"mousedown\", handlePointerEvent, true);\n    document.addEventListener(\"mousemove\", handlePointerEvent, true);\n    document.addEventListener(\"mouseup\", handlePointerEvent, true);\n  }\n\n  hasSetupGlobalListeners = true;\n}\n\nexport default function useFocusVisible(): {\n  isFocusVisible: boolean;\n} {\n  setupGlobalFocusEvents();\n  const [isFocusVisibleState, setFocusVisible] = useState(isFocusVisible());\n  useEffect(() => {\n    const handler = () => {\n      setFocusVisible(isFocusVisible());\n    };\n\n    changeHandlers.add(handler);\n    return () => {\n      changeHandlers.delete(handler);\n    };\n  }, []);\n\n  return { isFocusVisible: isFocusVisibleState };\n}\n"],"mappings":";;;AAIA,SAAS,UAAU,iBAAiB;AAMpC,IAAI,0BAA0B;AAC9B,IAAI,kBAAmC;AACvC,IAAM,iBAAiB,oBAAI,IAAa;AACxC,IAAI,sBAAsB;AAE1B,IAAM;AAAA;AAAA,EAEJ,OAAO,WAAW,eAAe,OAAO,aAAa;AAAA;AAAA,IAEjD,OAAO,KAAK,OAAO,UAAU,QAAQ;AAAA,MACrC;AAAA;AAEN,SAAS,WAAW,GAAkB;AACpC,SAAO,EAAE,EAAE,WAAY,CAAC,SAAS,EAAE,UAAW,EAAE;AAClD;AAEA,SAAS,sBAAsB,UAAoB,GAAiB;AAClE,iBAAe,QAAQ,CAAC,YAAY;AAClC,YAAQ,UAAU,CAAC;AAAA,EACrB,CAAC;AACH;AAEA,SAAS,oBAAoB,GAAkB;AAC7C,wBAAsB;AACtB,MAAI,WAAW,CAAC,GAAG;AACjB,sBAAkB;AAClB,0BAAsB,YAAY,CAAC;AAAA,EACrC;AACF;AAEA,SAAS,mBAAmB,GAA8B;AACxD,oBAAkB;AAClB,MAAI,EAAE,SAAS,eAAe,EAAE,SAAS,eAAe;AACtD,0BAAsB;AACtB,0BAAsB,WAAW,CAAC;AAAA,EACpC;AACF;AAEA,SAAS,iBAAiB,GAAe;AAIvC,MAAI,EAAE,WAAW,UAAU,EAAE,WAAW,UAAU;AAChD;AAAA,EACF;AAIA,MAAI,CAAC,qBAAqB;AACxB,sBAAkB;AAClB,0BAAsB,YAAY,CAAC;AAAA,EACrC;AAEA,wBAAsB;AACxB;AAEA,SAAS,mBAAmB;AAG1B,wBAAsB;AACxB;AAEA,SAAS,iBAA0B;AACjC,SAAO,oBAAoB;AAC7B;AAEA,SAAS,yBAAyB;AAChC,MAAI,OAAO,WAAW,eAAe,yBAAyB;AAC5D;AAAA,EACF;AAQA,QAAM,EAAE,MAAM,IAAI,YAAY;AAE9B,cAAY,UAAU,QAAQ,SAAS,gBAAgB,MAAM;AAC3D,0BAAsB;AACtB,UAAM,MAAM,MAAM,IAAI;AAAA,EACxB;AAEA,WAAS,iBAAiB,WAAW,qBAAqB,IAAI;AAC9D,WAAS,iBAAiB,SAAS,qBAAqB,IAAI;AAI5D,SAAO,iBAAiB,SAAS,kBAAkB,IAAI;AACvD,SAAO,iBAAiB,QAAQ,kBAAkB,KAAK;AAEvD,MAAI,OAAO,iBAAiB,aAAa;AACvC,aAAS,iBAAiB,eAAe,oBAAoB,IAAI;AACjE,aAAS,iBAAiB,eAAe,oBAAoB,IAAI;AACjE,aAAS,iBAAiB,aAAa,oBAAoB,IAAI;AAAA,EACjE,OAAO;AACL,aAAS,iBAAiB,aAAa,oBAAoB,IAAI;AAC/D,aAAS,iBAAiB,aAAa,oBAAoB,IAAI;AAC/D,aAAS,iBAAiB,WAAW,oBAAoB,IAAI;AAAA,EAC/D;AAEA,4BAA0B;AAC5B;AAEe,SAAR,kBAEL;AACA,yBAAuB;AACvB,QAAM,CAAC,qBAAqB,eAAe,IAAI,SAAS,eAAe,CAAC;AACxE,YAAU,MAAM;AACd,UAAM,UAAU,MAAM;AACpB,sBAAgB,eAAe,CAAC;AAAA,IAClC;AAEA,mBAAe,IAAI,OAAO;AAC1B,WAAO,MAAM;AACX,qBAAe,OAAO,OAAO;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,gBAAgB,oBAAoB;AAC/C;","names":[]}

package/dist/__chunks/{5NIFOD6K.cjs → COV3XKSJ.cjs}

@@ -1,4 +1,6 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/ThemeProvider/ThemeProvider.tsx
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
+
+// src/ThemeProvider/ThemeProvider.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 // ../syntax-design-tokens/dist/json/variables.json
@@ -181,8 +183,11 @@ function stylesForTheme(themeName) {
         ]
       ];
     }
+    if (themeName === "cambio" && key.includes("elevation")) {
+      return [null, null];
+    }
     return [key, value];
-  }).map(([key, value]) => `--${key}: ${value};`).join("\n")}
+  }).map(([key, value]) => key && value ? `--${key}: ${value};` : null).filter(Boolean).join("\n")}
     }
   `;
 }
@@ -211,4 +216,4 @@ function useTheme() {
 
 
 exports.ThemeProvider = ThemeProvider; exports.useTheme = useTheme;
-//# sourceMappingURL=5NIFOD6K.cjs.map
+//# sourceMappingURL=COV3XKSJ.cjs.map

package/dist/__chunks/COV3XKSJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ThemeProvider/ThemeProvider.tsx","../../../syntax-design-tokens/dist/json/variables.json"],"names":[],"mappings":"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","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\": undefined, // Deprecated - to be deleted\n  \"color-base-destructive-300\": \"color-cambio-destructive-300\",\n  \"color-base-destructive-700\": \"color-cambio-destructive-700\",\n  \"color-base-destructive-800\": undefined, // Deprecated - to be deleted\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\": undefined, // Deprecated - to be deleted\n  \"color-base-success-300\": \"color-cambio-success-300\",\n  \"color-base-success-700\": \"color-cambio-success-700\",\n  \"color-base-success-800\": undefined, // Deprecated - to be deleted\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"]}

package/dist/__chunks/{SPWDKPHT.cjs → D3JSJW4Q.cjs}

@@ -1,6 +1,7 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
-var _SZCVEBN2cjs = require('./SZCVEBN2.cjs');
+
+var _WJRIAS4Wcjs = require('./WJRIAS4W.cjs');
 
 // src/Card/Card.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -15,7 +16,7 @@ function Card({
     lg: 744
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _SZCVEBN2cjs.Box_default,
+    _WJRIAS4Wcjs.Box_default,
     {
       rounding: "lg",
       padding: 5,
@@ -33,4 +34,4 @@ function Card({
 
 
 exports.Card = Card;
-//# sourceMappingURL=SPWDKPHT.cjs.map
+//# sourceMappingURL=D3JSJW4Q.cjs.map

package/dist/__chunks/D3JSJW4Q.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":[],"mappings":";;;;;;AA8CI;AAZW,SAAR,KAAsB;AAAA,EAC3B,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAA0B;AACxB,QAAM,YAAY;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU,QAAQ,UAAU,IAAI;AAAA,MAChC,OAAM;AAAA,MACN;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ","sourcesContent":["import Box from \"../Box/Box\";\nimport type allColors from \"../colors/allColors\";\n\nconst DeprecatedCardSizes = [\"sm\", \"lg\"] as const;\n\ntype CardType = {\n  /**\n   * Test id for the button\n   */\n  \"data-testid\"?: string;\n  /**\n   * The background color of the box.\n   * @defaultValue `white`\n   */\n  backgroundColor?: (typeof allColors)[number];\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n  /**\n   * The size of the card\n   *\n   * `sm`: 352px\n   * `lg`: 744px\n   *\n   * @deprecated Card width should be controlled by the parent container\n   * @defaultValue `undefined`\n   */\n  size?: (typeof DeprecatedCardSizes)[number];\n};\n\n/**\n * [Card](https://cambly-syntax.vercel.app/?path=/docs/components-card--docs) is a basic container component to apply consistent styling and render child components.\n */\nexport default function Card({\n  backgroundColor = \"white\",\n  children,\n  size,\n  \"data-testid\": dataTestId,\n}: CardType): JSX.Element {\n  const sizeWidth = {\n    sm: 352,\n    lg: 744,\n  } as const;\n\n  return (\n    <Box\n      rounding=\"lg\"\n      padding={5}\n      smPadding={7}\n      lgPadding={7}\n      maxWidth={size && sizeWidth[size]}\n      width=\"100%\"\n      backgroundColor={backgroundColor}\n      data-testid={dataTestId}\n    >\n      {children}\n    </Box>\n  );\n}\n"]}