@cambly/syntax-core 10.6.0 → 10.7.0-beta.0

package/dist/__chunks/JHIBKTIX.js

@@ -0,0 +1,270 @@
+import {
+  RichSelectBoxContext,
+  RichSelectBox_default,
+  convertSelection
+} from "./QIJAUSGL.js";
+import {
+  RichSelectChip_default
+} from "./EH5FEWYB.js";
+import {
+  Popover_default
+} from "./JQDM3KJV.js";
+import {
+  DialogContext
+} from "./S3JLGSUU.js";
+import {
+  TapArea_default
+} from "./HSXMWMLA.js";
+import {
+  ColorBaseDestructive700,
+  ColorBaseGray800
+} from "./LDP6CRMG.js";
+import {
+  RichSelectSection_default
+} from "./FJFRNV7T.js";
+import {
+  RichSelectRadioButton_default
+} from "./JAOPHWQI.js";
+import {
+  Box_default
+} from "./OETPIE6V.js";
+import {
+  Typography_default
+} from "./EWZKTMOO.js";
+import {
+  useIsHydrated
+} from "./YJ7YDIGB.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./LULBCTQR.js";
+
+// src/RichSelect/RichSelectList.tsx
+import {
+  useMemo,
+  useRef
+} from "react";
+import classNames from "classnames";
+import {
+  Label as ReactAriaLabel,
+  Provider as ReactAriaProvider
+} from "react-aria-components";
+import { useControlledState } from "@react-stately/utils";
+import { setInteractionModality } from "@react-aria/interactions";
+
+// css-module:../SelectList/SelectList.module.css#css-module
+var SelectList_module_default = { "selectContainer": "_selectContainer_3ifov_1", "opacityOverlay": "_opacityOverlay_3ifov_7", "outerTextContainer": "_outerTextContainer_3ifov_11", "selectWrapper": "_selectWrapper_3ifov_16", "selectBox": "_selectBox_3ifov_21", "selectMouseFocusStyling": "_selectMouseFocusStyling_3ifov_37", "unselected": "_unselected_3ifov_42", "selected": "_selected_3ifov_46", "arrowIcon": "_arrowIcon_3ifov_50", "sm": "_sm_3ifov_64", "md": "_md_3ifov_70", "lg": "_lg_3ifov_76", "selectError": "_selectError_3ifov_82" };
+
+// src/RichSelect/RichSelectList.tsx
+import { useField } from "react-aria";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NOOP = () => void 0;
+var iconSize = {
+  sm: 20,
+  md: 24,
+  lg: 24
+};
+function RichSelectList(props) {
+  const _a = props, {
+    autosave,
+    children,
+    "data-testid": dataTestId,
+    disabled: disabledProp = false,
+    errorText,
+    helperText,
+    label,
+    onChange,
+    onClick = NOOP,
+    placeholderText,
+    selectTextValue,
+    selectedValues: selectedValuesProp,
+    defaultSelectedValues: defaultSelectedValuesProp,
+    size = "md"
+  } = _a, richSelectBoxProps = __objRest(_a, [
+    "autosave",
+    "children",
+    "data-testid",
+    "disabled",
+    "errorText",
+    "helperText",
+    "label",
+    "onChange",
+    "onClick",
+    "placeholderText",
+    "selectTextValue",
+    "selectedValues",
+    "defaultSelectedValues",
+    "size"
+  ]);
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
+  const overlayHandlerRef = useRef({});
+  const selectedKeysProp = useMemo(
+    () => convertSelection(selectedValuesProp),
+    [selectedValuesProp]
+  );
+  const defaultSelectedKeys = useMemo(
+    () => convertSelection(defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
+    [defaultSelectedValuesProp]
+  );
+  const [selectedKeys, setSelectedKeys] = useControlledState(
+    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
+    defaultSelectedKeys,
+    (value) => {
+      var _a2, _b;
+      const _value = value === "all" ? "all" : [...value].map(String);
+      onChange(_value);
+      if (!autosave)
+        (_b = (_a2 = overlayHandlerRef.current).close) == null ? void 0 : _b.call(_a2);
+    }
+  );
+  const selectedTextValue = useMemo(() => {
+    var _a2;
+    if (selectTextValue)
+      return (_a2 = selectTextValue(
+        selectedKeys === "all" ? "all" : [...selectedKeys].map(String)
+      )) != null ? _a2 : placeholderText;
+    if (selectedKeys === "all")
+      return "All selected";
+    if (selectedKeys.size)
+      return `${selectedKeys.size} selected`;
+    return placeholderText;
+  }, [selectTextValue, selectedKeys, placeholderText]);
+  const fieldRef = useRef(null);
+  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
+    label,
+    // this is the label for the select box
+    description: helperText,
+    errorMessage: errorText
+  });
+  return /* @__PURE__ */ jsx(
+    ReactAriaProvider,
+    {
+      values: [
+        [RichSelectBoxContext, { autoFocus: true }],
+        [DialogContext, { padding: autosave ? void 0 : 0 }]
+        // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
+      ],
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: classNames(SelectList_module_default.selectContainer, {
+            [SelectList_module_default.opacityOverlay]: disabled
+          }),
+          children: [
+            /* @__PURE__ */ jsx(
+              ReactAriaLabel,
+              __spreadProps(__spreadValues({
+                "data-testid": [dataTestId, "label"].filter(Boolean).join("-"),
+                className: classNames(
+                  SelectList_module_default.selectContainer,
+                  SelectList_module_default.outerTextContainer
+                )
+              }, labelProps), {
+                onClick: () => {
+                  var _a2;
+                  if (disabled)
+                    return;
+                  (_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
+                  setInteractionModality("keyboard");
+                },
+                children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label })
+              })
+            ),
+            /* @__PURE__ */ jsx(
+              Popover_default,
+              {
+                ref: overlayHandlerRef,
+                disabled,
+                accessibilityLabel: label,
+                content: (
+                  // this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided
+                  /* @__PURE__ */ jsx(
+                    Box_default,
+                    {
+                      padding: autosave ? void 0 : 5,
+                      dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
+                      children: /* @__PURE__ */ jsx(
+                        RichSelectBox_default,
+                        __spreadProps(__spreadValues({
+                          autosave,
+                          selectedValues: selectedKeys,
+                          defaultSelectedValues: defaultSelectedKeys,
+                          onChange: (selected) => setSelectedKeys(new Set(selected)),
+                          accessibilityLabel: label
+                        }, richSelectBoxProps), {
+                          children
+                        })
+                      )
+                    }
+                  )
+                ),
+                children: /* @__PURE__ */ jsx(
+                  TapArea_default,
+                  __spreadProps(__spreadValues({
+                    "data-testid": dataTestId,
+                    disabled,
+                    onClick,
+                    rounding: size === "lg" ? "lg" : "md"
+                  }, fieldProps), {
+                    ref: fieldRef,
+                    children: /* @__PURE__ */ jsxs("div", { className: SelectList_module_default.selectWrapper, children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: classNames(SelectList_module_default.selectBox, SelectList_module_default[size], {
+                            [SelectList_module_default.unselected]: !errorText && selectedKeys !== "all" && !selectedKeys.size,
+                            [SelectList_module_default.selected]: !errorText && (selectedKeys === "all" || selectedKeys.size),
+                            [SelectList_module_default.selectError]: errorText
+                          }),
+                          children: selectedTextValue
+                        }
+                      ),
+                      /* @__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,
+              __spreadProps(__spreadValues({
+                size: 100,
+                color: errorText ? "destructive-primary" : "gray700"
+              }, errorText ? errorMessageProps : descriptionProps), {
+                children: errorText ? errorText : helperText
+              })
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+var RichSelectList_default = Object.assign(RichSelectList, {
+  Section: RichSelectSection_default,
+  Chip: RichSelectChip_default,
+  RadioButton: RichSelectRadioButton_default
+});
+
+export {
+  RichSelectList_default
+};
+//# sourceMappingURL=JHIBKTIX.js.map

package/dist/__chunks/JHIBKTIX.js.map

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

package/dist/__chunks/JJQRVIE2.mjs

@@ -0,0 +1,86 @@
+import {
+  Box_default
+} from "./HJYCSDLB.mjs";
+import {
+  Typography_default
+} from "./3HUELEGR.mjs";
+import {
+  useIsHydrated
+} from "./XFKGXL73.mjs";
+
+// src/TextField/TextField.tsx
+import {
+  useId
+} from "react";
+import classNames from "classnames";
+
+// css-module:./TextField.module.css#css-module
+var TextField_module_default = { "textfield": "_textfield_cltsv_1", "label": "_label_cltsv_21", "sm": "_sm_cltsv_25", "md": "_md_cltsv_30", "lg": "_lg_cltsv_35", "inputError": "_inputError_cltsv_40" };
+
+// src/TextField/TextField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TextField({
+  autoComplete,
+  "data-testid": dataTestId,
+  disabled: disabledProp = false,
+  errorText = "",
+  helperText = "",
+  id,
+  label,
+  onChange,
+  placeholder = "",
+  size = "md",
+  type = "text",
+  value = ""
+}) {
+  const isHydrated = useIsHydrated();
+  const disabled = !isHydrated || disabledProp;
+  const reactId = useId();
+  const inputId = id != null ? id : reactId;
+  return /* @__PURE__ */ jsxs(
+    Box_default,
+    {
+      display: "flex",
+      direction: "column",
+      gap: 2,
+      width: "100%",
+      dangerouslySetInlineStyle: {
+        __style: {
+          opacity: disabled ? 0.5 : 1
+        }
+      },
+      children: [
+        label && /* @__PURE__ */ jsx("label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(Typography_default, { size: 100, color: "gray700", children: label }) }) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            autoComplete,
+            className: classNames(TextField_module_default.textfield, TextField_module_default[size], {
+              [TextField_module_default.inputError]: errorText
+            }),
+            "data-testid": dataTestId,
+            disabled,
+            id: inputId,
+            type,
+            onChange,
+            placeholder,
+            value
+          }
+        ),
+        (helperText || errorText) && /* @__PURE__ */ jsx(Box_default, { paddingX: 1, children: /* @__PURE__ */ jsx(
+          Typography_default,
+          {
+            size: 100,
+            color: errorText ? "destructive-primary" : "gray700",
+            children: errorText || helperText
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export {
+  TextField
+};
+//# sourceMappingURL=JJQRVIE2.mjs.map

package/dist/__chunks/JJQRVIE2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TextField/TextField.tsx","css-module:./TextField.module.css#css-module"],"sourcesContent":["import React, {\n  type ReactElement,\n  type HTMLInputTypeAttribute,\n  useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./TextField.module.css\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [TextField](https://cambly-syntax.vercel.app/?path=/docs/components-textfield--docs) is a component that allows users to enter text.\n */\nexport default function TextField({\n  autoComplete,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  errorText = \"\",\n  helperText = \"\",\n  id,\n  label,\n  onChange,\n  placeholder = \"\",\n  size = \"md\",\n  type = \"text\",\n  value = \"\",\n}: {\n  /**\n   * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.\n   *\n   * Feel free to add new values from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) as needed\n   */\n  autoComplete?: \"current-password\" | \"new-password\" | \"off\" | \"on\" | \"email\";\n  /**\n   * A data-testid to make querying for the TextField easier.\n   */\n  \"data-testid\"?: string;\n  /**\n   * If true, the TextField will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below TextField if there is an input error.\n   */\n  errorText?: string;\n  /**\n   * Informative helper text shown below TextField\n   */\n  helperText?: string;\n  /**\n   * TextField id, if not provided, a unique id will be generated\n   */\n  id?: string;\n  /**\n   * TextField visible label\n   */\n  label: string;\n  /**\n   * The callback to be called the input changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Optional TextField placeholder text\n   */\n  placeholder?: string;\n  /**\n   * Size of the TextField\n   * * `sm`: 32px\n   * * `md`: 40px\n   * * `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Input type of the TextField\n   *\n   * See [full list of input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)\n   */\n  type?: HTMLInputTypeAttribute;\n  /**\n   * Value of the TextField\n   */\n  value: string;\n}): ReactElement {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const reactId = useId();\n  const inputId = id ?? reactId;\n\n  return (\n    <Box\n      display=\"flex\"\n      direction=\"column\"\n      gap={2}\n      width=\"100%\"\n      dangerouslySetInlineStyle={{\n        __style: {\n          opacity: disabled ? 0.5 : 1,\n        },\n      }}\n    >\n      {label && (\n        <label className={styles.label} htmlFor={inputId}>\n          <Box paddingX={1}>\n            <Typography size={100} color=\"gray700\">\n              {label}\n            </Typography>\n          </Box>\n        </label>\n      )}\n      <input\n        autoComplete={autoComplete}\n        className={classNames(styles.textfield, styles[size], {\n          [styles.inputError]: errorText,\n        })}\n        data-testid={dataTestId}\n        disabled={disabled}\n        id={inputId}\n        type={type}\n        onChange={onChange}\n        placeholder={placeholder}\n        value={value}\n      />\n      {(helperText || errorText) && (\n        <Box paddingX={1}>\n          <Typography\n            size={100}\n            color={errorText ? \"destructive-primary\" : \"gray700\"}\n          >\n            {errorText || helperText}\n          </Typography>\n        </Box>\n      )}\n    </Box>\n  );\n}\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/TextField/TextField.module.css\"; export default {\"textfield\":\"_textfield_cltsv_1\",\"label\":\"_label_cltsv_21\",\"sm\":\"_sm_cltsv_25\",\"md\":\"_md_cltsv_30\",\"lg\":\"_lg_cltsv_35\",\"inputError\":\"_inputError_cltsv_40\"}"],"mappings":";;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,OAAO,gBAAgB;;;ACL0E,IAAO,2BAAQ,EAAC,aAAY,sBAAqB,SAAQ,mBAAkB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,cAAa,uBAAsB;;;AD8FvQ,SAcQ,KAdR;AAhFW,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV,GA4DiB;AACf,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,kBAAM;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAM;AAAA,MACN,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,WAAW,MAAM;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,iBACC,oBAAC,WAAM,WAAW,yBAAO,OAAO,SAAS,SACvC,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAM,WAC1B,iBACH,GACF,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,WAAW,yBAAO,WAAW,yBAAO,IAAI,GAAG;AAAA,cACpD,CAAC,yBAAO,UAAU,GAAG;AAAA,YACvB,CAAC;AAAA,YACD,eAAa;AAAA,YACb;AAAA,YACA,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,OAAO,YAAY,wBAAwB;AAAA,YAE1C,uBAAa;AAAA;AAAA,QAChB,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/__chunks/JMKHYRFL.mjs

@@ -0,0 +1,53 @@
+import {
+  Box_default
+} from "./HJYCSDLB.mjs";
+import {
+  Typography_default
+} from "./3HUELEGR.mjs";
+
+// css-module:./Badge.module.css#css-module
+var Badge_module_default = { "icon": "_icon_1g9xb_1" };
+
+// src/Badge/Badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var textColorForBackgroundColor = (color) => {
+  switch (color) {
+    case "gray200":
+    case "yellow700":
+      return "gray900";
+    default:
+      return "white";
+  }
+};
+var Badge = ({
+  icon: Icon,
+  text,
+  color = "primary700"
+}) => /* @__PURE__ */ jsx(
+  Box_default,
+  {
+    display: "inlineBlock",
+    paddingX: 2,
+    paddingY: 1,
+    rounding: "full",
+    backgroundColor: color,
+    children: /* @__PURE__ */ jsx(Typography_default, { color: textColorForBackgroundColor(color), size: 100, children: /* @__PURE__ */ jsxs(Box_default, { display: "flex", gap: 1, alignItems: "center", justifyContent: "start", children: [
+      Icon && /* @__PURE__ */ jsx(Icon, { className: Badge_module_default.icon }),
+      /* @__PURE__ */ jsx(
+        Typography_default,
+        {
+          color: textColorForBackgroundColor(color),
+          size: 100,
+          weight: "bold",
+          children: text
+        }
+      )
+    ] }) })
+  }
+);
+var Badge_default = Badge;
+
+export {
+  Badge_default
+};
+//# sourceMappingURL=JMKHYRFL.mjs.map

package/dist/__chunks/JMKHYRFL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"sourcesContent":["import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\n\nconst BadgeColor = [\n  \"gray200\",\n  \"gray900\",\n  \"destructive700\",\n  \"orange700\",\n  \"yellow700\",\n  \"success700\",\n  \"primary700\",\n  \"purple700\",\n] as const;\n\nconst textColorForBackgroundColor = (\n  color: (typeof BadgeColor)[number],\n): \"gray900\" | \"white\" => {\n  switch (color) {\n    case \"gray200\":\n    case \"yellow700\":\n      return \"gray900\";\n    default:\n      return \"white\";\n  }\n};\n\n/**\n * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.\n */\nconst Badge = ({\n  icon: Icon,\n  text,\n  color = \"primary700\",\n}: {\n  /**\n   * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n   */\n  icon?: React.ComponentType<{ className?: string }>;\n  /**\n   * The text to display inside the badge\n   */\n  text: string;\n  /**\n   * The color of the badge\n   *\n   * @defaultValue \"primary700\"\n   */\n  color?: (typeof BadgeColor)[number];\n}): JSX.Element => (\n  <Box\n    display=\"inlineBlock\"\n    paddingX={2}\n    paddingY={1}\n    rounding=\"full\"\n    backgroundColor={color}\n  >\n    <Typography color={textColorForBackgroundColor(color)} size={100}>\n      <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n        {Icon && <Icon className={styles.icon} />}\n        <Typography\n          color={textColorForBackgroundColor(color)}\n          size={100}\n          weight=\"bold\"\n        >\n          {text}\n        </Typography>\n      </Box>\n    </Typography>\n  </Box>\n);\n\nexport default Badge;\n"],"mappings":";;;;;;;;AAAyF,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;AC0DzH,SACW,KADX;AA3CN,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,QAAQ,CAAC;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,QAAQ;AACV,MAgBE;AAAA,EAAC;AAAA;AAAA,IACC,SAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAS;AAAA,IACT,iBAAiB;AAAA,IAEjB,8BAAC,sBAAW,OAAO,4BAA4B,KAAK,GAAG,MAAM,KAC3D,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,cAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM;AAAA,MACvC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,4BAA4B,KAAK;AAAA,UACxC,MAAM;AAAA,UACN,QAAO;AAAA,UAEN;AAAA;AAAA,MACH;AAAA,OACF,GACF;AAAA;AACF;AAGF,IAAO,gBAAQ;","names":[]}

package/dist/__chunks/{VY7MJTPK.js → JQDM3KJV.js}

@@ -1,21 +1,21 @@
 import {
   ModalDialog_default
-} from "./UYBMLRXR.js";
+} from "./L33TG65D.js";
 import {
   Dialog_default
-} from "./XFFSBU7E.js";
+} from "./S3JLGSUU.js";
 import {
   layout_module_default
-} from "./PTWXXDFF.js";
+} from "./IOQXUCI4.js";
 import {
   Box_module_default
-} from "./KMIZI5PW.js";
+} from "./TDW36DTR.js";
 import {
   syntaxToReactAriaPlacement
 } from "./ARBLKS7D.js";
 import {
   Triggerable_default
-} from "./JQ6POHCA.js";
+} from "./J42UNMZT.js";
 import {
   OverlayVisibility
 } from "./XKDASN7N.js";
@@ -140,4 +140,4 @@ export {
   AriaPopover,
   Popover_default
 };
-//# sourceMappingURL=VY7MJTPK.js.map
+//# sourceMappingURL=JQDM3KJV.js.map

package/dist/__chunks/JQDM3KJV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Popover/Popover.tsx","css-module:../Box/margin.module.css#css-module"],"sourcesContent":["import React, { type ReactNode, forwardRef, type ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { mergeProps } from \"react-aria\";\nimport {\n  Popover as ReactAriaPopover,\n  type PopoverProps as ReactAriaPopoverProps,\n  MenuTrigger as ReactAriaMenuTrigger,\n  composeRenderProps,\n} from \"react-aria-components\";\nimport Triggerable, {\n  type OverlayHandlerRef,\n} from \"../react-aria-utils/Triggerable\";\nimport OverlayVisibility from \"../react-aria-utils/OverlayVisibility\";\nimport Dialog from \"../Dialog/Dialog\";\nimport ModalDialog from \"../Dialog/ModalDialog\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport marginStyles from \"../Box/margin.module.css\";\nimport {\n  type Placement,\n  syntaxToReactAriaPlacement,\n} from \"../react-aria-utils/placement\";\n\ntype PopoverProps = {\n  /** Test id for the floating dialog */\n  \"data-testid\"?: string;\n  /** Optional aria-label for the popover (content element) */\n  accessibilityLabel?: string;\n  /** Optional aria-label for the close button (trigger element) when displayed as ModalDialog */\n  accessibilityCloseLabel?: string;\n  /** Optional trigger element */\n  children?: ReactElement;\n  /** Content to be shown inside the popover. */\n  content: ReactNode;\n  /** If set to true the popover trigger will be disabled */\n  disabled?: boolean;\n  /** If set to true the popover be open after mount / the first time it renders */\n  initialOpen?: boolean;\n  /** Optional boolean to control whether popover content is rendered as a modal */\n  modal?: boolean;\n  /** Optional handler for change of visibility for popover content, for control */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional handler for change of visibility for popover content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n  /** Optional boolean to control open state of popover externally */\n  open?: boolean;\n  /**\n   * Location of the popover content relative to anchor element\n   * @defaultValue \"bottom\"\n   */\n  placement?: Placement;\n};\n\ntype AriaPopoverProps = {\n  \"data-testid\"?: string;\n  /** Optional handler for change of visibility for overlaid content, for analytics timing */\n  onChangeContentVisibility?: (visible: boolean) => void;\n} & ReactAriaPopoverProps;\n/**\n * AriaPopover: This component extends Popover from react-aria-components\n * It applies syntax styles and adds aadditional props:\n *  - data-testid\n *  - onContentChangeVisibility\n */\nexport const AriaPopover = forwardRef<HTMLElement, AriaPopoverProps>(\n  function AriaPopover(\n    { children: childrenProp, onChangeContentVisibility, ...otherProps },\n    ref,\n  ): ReactElement {\n    return (\n      <ReactAriaPopover\n        ref={ref}\n        {...mergeProps(\n          {\n            offset: 8,\n            containerPadding: 16,\n            className: classNames([\n              boxStyles.box,\n              boxStyles.flex,\n              boxStyles.column,\n              layoutStyles.fullMaxWidth,\n              layoutStyles.fullMaxHeight,\n              layoutStyles.visibilityVisible,\n              // workaround react-aria layout bug: containerPadding on right side of window not being applied\n              marginStyles.marginEnd4,\n            ]),\n          },\n          otherProps,\n        )}\n      >\n        {composeRenderProps(\n          childrenProp,\n          (children, { isEntering, isExiting }) => (\n            <>\n              <OverlayVisibility\n                isEntering={isEntering}\n                isExiting={isExiting}\n                onChange={onChangeContentVisibility}\n              />\n              {children}\n            </>\n          ),\n        )}\n      </ReactAriaPopover>\n    );\n  },\n);\n\n/**\n * [Popover](https://cambly-syntax.vercel.app/?path=/docs/components-popover--docs) displays contextual information on hover or focus.\n *\n * Popover content is hidden by default and shown on click or focus.\n * The content is hidden again when the user mouses out of the trigger element or blurs the trigger element or presses Escape\n *\n * Example Usage:\n ```\n  <Popover\n    placement=\"bottom-start\"\n    initialOpen\n    content={(\n      <Box padding={2} maxWidth={400}>\n        ... some content goes here\n      </Box>\n    )}\n  >\n      <Button text=\"Trigger me\" />\n  </Popover>\n ```\n */\nconst Popover = forwardRef<OverlayHandlerRef, PopoverProps>(function Popover(\n  props,\n  ref,\n): ReactElement {\n  const {\n    \"data-testid\": dataTestId,\n    accessibilityLabel,\n    accessibilityCloseLabel,\n    children,\n    content,\n    disabled,\n    initialOpen,\n    modal: modalProp,\n    onOpenChange,\n    onChangeContentVisibility,\n    open,\n    placement = \"bottom\",\n  } = props;\n\n  const modal = !children || modalProp;\n\n  const modalNode = (\n    <ModalDialog\n      accessibilityLabel={accessibilityLabel}\n      accessibilityCloseLabel={accessibilityCloseLabel}\n      data-testid={dataTestId}\n      initialOpen={initialOpen}\n      onChangeContentVisibility={onChangeContentVisibility}\n      onOpenChange={onOpenChange}\n      open={open}\n    >\n      {content}\n    </ModalDialog>\n  );\n\n  const popoverNode = (\n    <AriaPopover\n      placement={syntaxToReactAriaPlacement(placement)}\n      onChangeContentVisibility={onChangeContentVisibility}\n    >\n      <Dialog accessibilityLabel={accessibilityLabel} data-testid={dataTestId}>\n        {content}\n      </Dialog>\n    </AriaPopover>\n  );\n\n  if (!children) return modalNode;\n  return (\n    <ReactAriaMenuTrigger\n      defaultOpen={initialOpen}\n      isOpen={open}\n      onOpenChange={onOpenChange}\n    >\n      {\n        <Triggerable disabled={disabled} ref={ref}>\n          {children}\n        </Triggerable>\n      }\n      {modal ? modalNode : popoverNode}\n    </ReactAriaMenuTrigger>\n  );\n});\n\nexport default Popover;\n","import \"/Users/christian/cambly/syntax/packages/syntax-core/src/Box/margin.module.css\"; export default {\"marginBottom-12\":\"_marginBottom-12_1whn1_2\",\"marginBottom-11\":\"_marginBottom-11_1whn1_6\",\"marginBottom-10\":\"_marginBottom-10_1whn1_10\",\"marginBottom-9\":\"_marginBottom-9_1whn1_14\",\"marginBottom-8\":\"_marginBottom-8_1whn1_18\",\"marginBottom-7\":\"_marginBottom-7_1whn1_22\",\"marginBottom-6\":\"_marginBottom-6_1whn1_26\",\"marginBottom-5\":\"_marginBottom-5_1whn1_30\",\"marginBottom-4\":\"_marginBottom-4_1whn1_34\",\"marginBottom-3\":\"_marginBottom-3_1whn1_38\",\"marginBottom-2\":\"_marginBottom-2_1whn1_42\",\"marginBottom-1\":\"_marginBottom-1_1whn1_2\",\"marginBottom0\":\"_marginBottom0_1whn1_50\",\"marginBottom1\":\"_marginBottom1_1whn1_54\",\"marginBottom2\":\"_marginBottom2_1whn1_58\",\"marginBottom3\":\"_marginBottom3_1whn1_62\",\"marginBottom4\":\"_marginBottom4_1whn1_66\",\"marginBottom5\":\"_marginBottom5_1whn1_70\",\"marginBottom6\":\"_marginBottom6_1whn1_74\",\"marginBottom7\":\"_marginBottom7_1whn1_78\",\"marginBottom8\":\"_marginBottom8_1whn1_82\",\"marginBottom9\":\"_marginBottom9_1whn1_86\",\"marginBottom10\":\"_marginBottom10_1whn1_90\",\"marginBottom11\":\"_marginBottom11_1whn1_94\",\"marginBottom12\":\"_marginBottom12_1whn1_98\",\"marginBottomauto\":\"_marginBottomauto_1whn1_102\",\"marginEnd-12\":\"_marginEnd-12_1whn1_107\",\"marginEnd-11\":\"_marginEnd-11_1whn1_111\",\"marginEnd-10\":\"_marginEnd-10_1whn1_115\",\"marginEnd-9\":\"_marginEnd-9_1whn1_119\",\"marginEnd-8\":\"_marginEnd-8_1whn1_123\",\"marginEnd-7\":\"_marginEnd-7_1whn1_127\",\"marginEnd-6\":\"_marginEnd-6_1whn1_131\",\"marginEnd-5\":\"_marginEnd-5_1whn1_135\",\"marginEnd-4\":\"_marginEnd-4_1whn1_139\",\"marginEnd-3\":\"_marginEnd-3_1whn1_143\",\"marginEnd-2\":\"_marginEnd-2_1whn1_147\",\"marginEnd-1\":\"_marginEnd-1_1whn1_107\",\"marginEnd0\":\"_marginEnd0_1whn1_155\",\"marginEnd1\":\"_marginEnd1_1whn1_159\",\"marginEnd2\":\"_marginEnd2_1whn1_163\",\"marginEnd3\":\"_marginEnd3_1whn1_167\",\"marginEnd4\":\"_marginEnd4_1whn1_171\",\"marginEnd5\":\"_marginEnd5_1whn1_175\",\"marginEnd6\":\"_marginEnd6_1whn1_179\",\"marginEnd7\":\"_marginEnd7_1whn1_183\",\"marginEnd8\":\"_marginEnd8_1whn1_187\",\"marginEnd9\":\"_marginEnd9_1whn1_191\",\"marginEnd10\":\"_marginEnd10_1whn1_195\",\"marginEnd11\":\"_marginEnd11_1whn1_199\",\"marginEnd12\":\"_marginEnd12_1whn1_203\",\"marginEndauto\":\"_marginEndauto_1whn1_207\",\"marginStart-12\":\"_marginStart-12_1whn1_212\",\"marginStart-11\":\"_marginStart-11_1whn1_216\",\"marginStart-10\":\"_marginStart-10_1whn1_220\",\"marginStart-9\":\"_marginStart-9_1whn1_224\",\"marginStart-8\":\"_marginStart-8_1whn1_228\",\"marginStart-7\":\"_marginStart-7_1whn1_232\",\"marginStart-6\":\"_marginStart-6_1whn1_236\",\"marginStart-5\":\"_marginStart-5_1whn1_240\",\"marginStart-4\":\"_marginStart-4_1whn1_244\",\"marginStart-3\":\"_marginStart-3_1whn1_248\",\"marginStart-2\":\"_marginStart-2_1whn1_252\",\"marginStart-1\":\"_marginStart-1_1whn1_212\",\"marginStart0\":\"_marginStart0_1whn1_260\",\"marginStart1\":\"_marginStart1_1whn1_264\",\"marginStart2\":\"_marginStart2_1whn1_268\",\"marginStart3\":\"_marginStart3_1whn1_272\",\"marginStart4\":\"_marginStart4_1whn1_276\",\"marginStart5\":\"_marginStart5_1whn1_280\",\"marginStart6\":\"_marginStart6_1whn1_284\",\"marginStart7\":\"_marginStart7_1whn1_288\",\"marginStart8\":\"_marginStart8_1whn1_292\",\"marginStart9\":\"_marginStart9_1whn1_296\",\"marginStart10\":\"_marginStart10_1whn1_300\",\"marginStart11\":\"_marginStart11_1whn1_304\",\"marginStart12\":\"_marginStart12_1whn1_308\",\"marginStartauto\":\"_marginStartauto_1whn1_312\",\"marginTop-12\":\"_marginTop-12_1whn1_317\",\"marginTop-11\":\"_marginTop-11_1whn1_321\",\"marginTop-10\":\"_marginTop-10_1whn1_325\",\"marginTop-9\":\"_marginTop-9_1whn1_329\",\"marginTop-8\":\"_marginTop-8_1whn1_333\",\"marginTop-7\":\"_marginTop-7_1whn1_337\",\"marginTop-6\":\"_marginTop-6_1whn1_341\",\"marginTop-5\":\"_marginTop-5_1whn1_345\",\"marginTop-4\":\"_marginTop-4_1whn1_349\",\"marginTop-3\":\"_marginTop-3_1whn1_353\",\"marginTop-2\":\"_marginTop-2_1whn1_357\",\"marginTop-1\":\"_marginTop-1_1whn1_317\",\"marginTop0\":\"_marginTop0_1whn1_365\",\"marginTop1\":\"_marginTop1_1whn1_369\",\"marginTop2\":\"_marginTop2_1whn1_373\",\"marginTop3\":\"_marginTop3_1whn1_377\",\"marginTop4\":\"_marginTop4_1whn1_381\",\"marginTop5\":\"_marginTop5_1whn1_385\",\"marginTop6\":\"_marginTop6_1whn1_389\",\"marginTop7\":\"_marginTop7_1whn1_393\",\"marginTop8\":\"_marginTop8_1whn1_397\",\"marginTop9\":\"_marginTop9_1whn1_401\",\"marginTop10\":\"_marginTop10_1whn1_405\",\"marginTop11\":\"_marginTop11_1whn1_409\",\"marginTop12\":\"_marginTop12_1whn1_413\",\"marginTopauto\":\"_marginTopauto_1whn1_417\",\"marginBottom-12Small\":\"_marginBottom-12Small_1whn1_423\",\"marginBottom-11Small\":\"_marginBottom-11Small_1whn1_427\",\"marginBottom-10Small\":\"_marginBottom-10Small_1whn1_431\",\"marginBottom-9Small\":\"_marginBottom-9Small_1whn1_435\",\"marginBottom-8Small\":\"_marginBottom-8Small_1whn1_439\",\"marginBottom-7Small\":\"_marginBottom-7Small_1whn1_443\",\"marginBottom-6Small\":\"_marginBottom-6Small_1whn1_447\",\"marginBottom-5Small\":\"_marginBottom-5Small_1whn1_451\",\"marginBottom-4Small\":\"_marginBottom-4Small_1whn1_455\",\"marginBottom-3Small\":\"_marginBottom-3Small_1whn1_459\",\"marginBottom-2Small\":\"_marginBottom-2Small_1whn1_463\",\"marginBottom-1Small\":\"_marginBottom-1Small_1whn1_467\",\"marginBottom0Small\":\"_marginBottom0Small_1whn1_471\",\"marginBottom1Small\":\"_marginBottom1Small_1whn1_475\",\"marginBottom2Small\":\"_marginBottom2Small_1whn1_479\",\"marginBottom3Small\":\"_marginBottom3Small_1whn1_483\",\"marginBottom4Small\":\"_marginBottom4Small_1whn1_487\",\"marginBottom5Small\":\"_marginBottom5Small_1whn1_491\",\"marginBottom6Small\":\"_marginBottom6Small_1whn1_495\",\"marginBottom7Small\":\"_marginBottom7Small_1whn1_499\",\"marginBottom8Small\":\"_marginBottom8Small_1whn1_503\",\"marginBottom9Small\":\"_marginBottom9Small_1whn1_507\",\"marginBottom10Small\":\"_marginBottom10Small_1whn1_511\",\"marginBottom11Small\":\"_marginBottom11Small_1whn1_515\",\"marginBottom12Small\":\"_marginBottom12Small_1whn1_519\",\"marginBottomautoSmall\":\"_marginBottomautoSmall_1whn1_523\",\"marginEnd-12Small\":\"_marginEnd-12Small_1whn1_527\",\"marginEnd-11Small\":\"_marginEnd-11Small_1whn1_531\",\"marginEnd-10Small\":\"_marginEnd-10Small_1whn1_535\",\"marginEnd-9Small\":\"_marginEnd-9Small_1whn1_539\",\"marginEnd-8Small\":\"_marginEnd-8Small_1whn1_543\",\"marginEnd-7Small\":\"_marginEnd-7Small_1whn1_547\",\"marginEnd-6Small\":\"_marginEnd-6Small_1whn1_551\",\"marginEnd-5Small\":\"_marginEnd-5Small_1whn1_555\",\"marginEnd-4Small\":\"_marginEnd-4Small_1whn1_559\",\"marginEnd-3Small\":\"_marginEnd-3Small_1whn1_563\",\"marginEnd-2Small\":\"_marginEnd-2Small_1whn1_567\",\"marginEnd-1Small\":\"_marginEnd-1Small_1whn1_571\",\"marginEnd0Small\":\"_marginEnd0Small_1whn1_575\",\"marginEnd1Small\":\"_marginEnd1Small_1whn1_579\",\"marginEnd2Small\":\"_marginEnd2Small_1whn1_583\",\"marginEnd3Small\":\"_marginEnd3Small_1whn1_587\",\"marginEnd4Small\":\"_marginEnd4Small_1whn1_591\",\"marginEnd5Small\":\"_marginEnd5Small_1whn1_595\",\"marginEnd6Small\":\"_marginEnd6Small_1whn1_599\",\"marginEnd7Small\":\"_marginEnd7Small_1whn1_603\",\"marginEnd8Small\":\"_marginEnd8Small_1whn1_607\",\"marginEnd9Small\":\"_marginEnd9Small_1whn1_611\",\"marginEnd10Small\":\"_marginEnd10Small_1whn1_615\",\"marginEnd11Small\":\"_marginEnd11Small_1whn1_619\",\"marginEnd12Small\":\"_marginEnd12Small_1whn1_623\",\"marginEndautoSmall\":\"_marginEndautoSmall_1whn1_627\",\"marginStart-12Small\":\"_marginStart-12Small_1whn1_631\",\"marginStart-11Small\":\"_marginStart-11Small_1whn1_635\",\"marginStart-10Small\":\"_marginStart-10Small_1whn1_639\",\"marginStart-9Small\":\"_marginStart-9Small_1whn1_643\",\"marginStart-8Small\":\"_marginStart-8Small_1whn1_647\",\"marginStart-7Small\":\"_marginStart-7Small_1whn1_651\",\"marginStart-6Small\":\"_marginStart-6Small_1whn1_655\",\"marginStart-5Small\":\"_marginStart-5Small_1whn1_659\",\"marginStart-4Small\":\"_marginStart-4Small_1whn1_663\",\"marginStart-3Small\":\"_marginStart-3Small_1whn1_667\",\"marginStart-2Small\":\"_marginStart-2Small_1whn1_671\",\"marginStart-1Small\":\"_marginStart-1Small_1whn1_675\",\"marginStart0Small\":\"_marginStart0Small_1whn1_679\",\"marginStart1Small\":\"_marginStart1Small_1whn1_683\",\"marginStart2Small\":\"_marginStart2Small_1whn1_687\",\"marginStart3Small\":\"_marginStart3Small_1whn1_691\",\"marginStart4Small\":\"_marginStart4Small_1whn1_695\",\"marginStart5Small\":\"_marginStart5Small_1whn1_699\",\"marginStart6Small\":\"_marginStart6Small_1whn1_703\",\"marginStart7Small\":\"_marginStart7Small_1whn1_707\",\"marginStart8Small\":\"_marginStart8Small_1whn1_711\",\"marginStart9Small\":\"_marginStart9Small_1whn1_715\",\"marginStart10Small\":\"_marginStart10Small_1whn1_719\",\"marginStart11Small\":\"_marginStart11Small_1whn1_723\",\"marginStart12Small\":\"_marginStart12Small_1whn1_727\",\"marginStartautoSmall\":\"_marginStartautoSmall_1whn1_731\",\"marginTop-12Small\":\"_marginTop-12Small_1whn1_735\",\"marginTop-11Small\":\"_marginTop-11Small_1whn1_739\",\"marginTop-10Small\":\"_marginTop-10Small_1whn1_743\",\"marginTop-9Small\":\"_marginTop-9Small_1whn1_747\",\"marginTop-8Small\":\"_marginTop-8Small_1whn1_751\",\"marginTop-7Small\":\"_marginTop-7Small_1whn1_755\",\"marginTop-6Small\":\"_marginTop-6Small_1whn1_759\",\"marginTop-5Small\":\"_marginTop-5Small_1whn1_763\",\"marginTop-4Small\":\"_marginTop-4Small_1whn1_767\",\"marginTop-3Small\":\"_marginTop-3Small_1whn1_771\",\"marginTop-2Small\":\"_marginTop-2Small_1whn1_775\",\"marginTop-1Small\":\"_marginTop-1Small_1whn1_779\",\"marginTop0Small\":\"_marginTop0Small_1whn1_783\",\"marginTop1Small\":\"_marginTop1Small_1whn1_787\",\"marginTop2Small\":\"_marginTop2Small_1whn1_791\",\"marginTop3Small\":\"_marginTop3Small_1whn1_795\",\"marginTop4Small\":\"_marginTop4Small_1whn1_799\",\"marginTop5Small\":\"_marginTop5Small_1whn1_803\",\"marginTop6Small\":\"_marginTop6Small_1whn1_807\",\"marginTop7Small\":\"_marginTop7Small_1whn1_811\",\"marginTop8Small\":\"_marginTop8Small_1whn1_815\",\"marginTop9Small\":\"_marginTop9Small_1whn1_819\",\"marginTop10Small\":\"_marginTop10Small_1whn1_823\",\"marginTop11Small\":\"_marginTop11Small_1whn1_827\",\"marginTop12Small\":\"_marginTop12Small_1whn1_831\",\"marginTopautoSmall\":\"_marginTopautoSmall_1whn1_835\",\"marginBottom-12Large\":\"_marginBottom-12Large_1whn1_842\",\"marginBottom-11Large\":\"_marginBottom-11Large_1whn1_846\",\"marginBottom-10Large\":\"_marginBottom-10Large_1whn1_850\",\"marginBottom-9Large\":\"_marginBottom-9Large_1whn1_854\",\"marginBottom-8Large\":\"_marginBottom-8Large_1whn1_858\",\"marginBottom-7Large\":\"_marginBottom-7Large_1whn1_862\",\"marginBottom-6Large\":\"_marginBottom-6Large_1whn1_866\",\"marginBottom-5Large\":\"_marginBottom-5Large_1whn1_870\",\"marginBottom-4Large\":\"_marginBottom-4Large_1whn1_874\",\"marginBottom-3Large\":\"_marginBottom-3Large_1whn1_878\",\"marginBottom-2Large\":\"_marginBottom-2Large_1whn1_882\",\"marginBottom-1Large\":\"_marginBottom-1Large_1whn1_886\",\"marginBottom0Large\":\"_marginBottom0Large_1whn1_890\",\"marginBottom1Large\":\"_marginBottom1Large_1whn1_894\",\"marginBottom2Large\":\"_marginBottom2Large_1whn1_898\",\"marginBottom3Large\":\"_marginBottom3Large_1whn1_902\",\"marginBottom4Large\":\"_marginBottom4Large_1whn1_906\",\"marginBottom5Large\":\"_marginBottom5Large_1whn1_910\",\"marginBottom6Large\":\"_marginBottom6Large_1whn1_914\",\"marginBottom7Large\":\"_marginBottom7Large_1whn1_918\",\"marginBottom8Large\":\"_marginBottom8Large_1whn1_922\",\"marginBottom9Large\":\"_marginBottom9Large_1whn1_926\",\"marginBottom10Large\":\"_marginBottom10Large_1whn1_930\",\"marginBottom11Large\":\"_marginBottom11Large_1whn1_934\",\"marginBottom12Large\":\"_marginBottom12Large_1whn1_938\",\"marginBottomautoLarge\":\"_marginBottomautoLarge_1whn1_942\",\"marginEnd-12Large\":\"_marginEnd-12Large_1whn1_946\",\"marginEnd-11Large\":\"_marginEnd-11Large_1whn1_950\",\"marginEnd-10Large\":\"_marginEnd-10Large_1whn1_954\",\"marginEnd-9Large\":\"_marginEnd-9Large_1whn1_958\",\"marginEnd-8Large\":\"_marginEnd-8Large_1whn1_962\",\"marginEnd-7Large\":\"_marginEnd-7Large_1whn1_966\",\"marginEnd-6Large\":\"_marginEnd-6Large_1whn1_970\",\"marginEnd-5Large\":\"_marginEnd-5Large_1whn1_974\",\"marginEnd-4Large\":\"_marginEnd-4Large_1whn1_978\",\"marginEnd-3Large\":\"_marginEnd-3Large_1whn1_982\",\"marginEnd-2Large\":\"_marginEnd-2Large_1whn1_986\",\"marginEnd-1Large\":\"_marginEnd-1Large_1whn1_990\",\"marginEnd0Large\":\"_marginEnd0Large_1whn1_994\",\"marginEnd1Large\":\"_marginEnd1Large_1whn1_998\",\"marginEnd2Large\":\"_marginEnd2Large_1whn1_1002\",\"marginEnd3Large\":\"_marginEnd3Large_1whn1_1006\",\"marginEnd4Large\":\"_marginEnd4Large_1whn1_1010\",\"marginEnd5Large\":\"_marginEnd5Large_1whn1_1014\",\"marginEnd6Large\":\"_marginEnd6Large_1whn1_1018\",\"marginEnd7Large\":\"_marginEnd7Large_1whn1_1022\",\"marginEnd8Large\":\"_marginEnd8Large_1whn1_1026\",\"marginEnd9Large\":\"_marginEnd9Large_1whn1_1030\",\"marginEnd10Large\":\"_marginEnd10Large_1whn1_1034\",\"marginEnd11Large\":\"_marginEnd11Large_1whn1_1038\",\"marginEnd12Large\":\"_marginEnd12Large_1whn1_1042\",\"marginEndautoLarge\":\"_marginEndautoLarge_1whn1_1046\",\"marginStart-12Large\":\"_marginStart-12Large_1whn1_1050\",\"marginStart-11Large\":\"_marginStart-11Large_1whn1_1054\",\"marginStart-10Large\":\"_marginStart-10Large_1whn1_1058\",\"marginStart-9Large\":\"_marginStart-9Large_1whn1_1062\",\"marginStart-8Large\":\"_marginStart-8Large_1whn1_1066\",\"marginStart-7Large\":\"_marginStart-7Large_1whn1_1070\",\"marginStart-6Large\":\"_marginStart-6Large_1whn1_1074\",\"marginStart-5Large\":\"_marginStart-5Large_1whn1_1078\",\"marginStart-4Large\":\"_marginStart-4Large_1whn1_1082\",\"marginStart-3Large\":\"_marginStart-3Large_1whn1_1086\",\"marginStart-2Large\":\"_marginStart-2Large_1whn1_1090\",\"marginStart-1Large\":\"_marginStart-1Large_1whn1_1094\",\"marginStart0Large\":\"_marginStart0Large_1whn1_1098\",\"marginStart1Large\":\"_marginStart1Large_1whn1_1102\",\"marginStart2Large\":\"_marginStart2Large_1whn1_1106\",\"marginStart3Large\":\"_marginStart3Large_1whn1_1110\",\"marginStart4Large\":\"_marginStart4Large_1whn1_1114\",\"marginStart5Large\":\"_marginStart5Large_1whn1_1118\",\"marginStart6Large\":\"_marginStart6Large_1whn1_1122\",\"marginStart7Large\":\"_marginStart7Large_1whn1_1126\",\"marginStart8Large\":\"_marginStart8Large_1whn1_1130\",\"marginStart9Large\":\"_marginStart9Large_1whn1_1134\",\"marginStart10Large\":\"_marginStart10Large_1whn1_1138\",\"marginStart11Large\":\"_marginStart11Large_1whn1_1142\",\"marginStart12Large\":\"_marginStart12Large_1whn1_1146\",\"marginStartautoLarge\":\"_marginStartautoLarge_1whn1_1150\",\"marginTop-12Large\":\"_marginTop-12Large_1whn1_1154\",\"marginTop-11Large\":\"_marginTop-11Large_1whn1_1158\",\"marginTop-10Large\":\"_marginTop-10Large_1whn1_1162\",\"marginTop-9Large\":\"_marginTop-9Large_1whn1_1166\",\"marginTop-8Large\":\"_marginTop-8Large_1whn1_1170\",\"marginTop-7Large\":\"_marginTop-7Large_1whn1_1174\",\"marginTop-6Large\":\"_marginTop-6Large_1whn1_1178\",\"marginTop-5Large\":\"_marginTop-5Large_1whn1_1182\",\"marginTop-4Large\":\"_marginTop-4Large_1whn1_1186\",\"marginTop-3Large\":\"_marginTop-3Large_1whn1_1190\",\"marginTop-2Large\":\"_marginTop-2Large_1whn1_1194\",\"marginTop-1Large\":\"_marginTop-1Large_1whn1_1198\",\"marginTop0Large\":\"_marginTop0Large_1whn1_1202\",\"marginTop1Large\":\"_marginTop1Large_1whn1_1206\",\"marginTop2Large\":\"_marginTop2Large_1whn1_1210\",\"marginTop3Large\":\"_marginTop3Large_1whn1_1214\",\"marginTop4Large\":\"_marginTop4Large_1whn1_1218\",\"marginTop5Large\":\"_marginTop5Large_1whn1_1222\",\"marginTop6Large\":\"_marginTop6Large_1whn1_1226\",\"marginTop7Large\":\"_marginTop7Large_1whn1_1230\",\"marginTop8Large\":\"_marginTop8Large_1whn1_1234\",\"marginTop9Large\":\"_marginTop9Large_1whn1_1238\",\"marginTop10Large\":\"_marginTop10Large_1whn1_1242\",\"marginTop11Large\":\"_marginTop11Large_1whn1_1246\",\"marginTop12Large\":\"_marginTop12Large_1whn1_1250\",\"marginTopautoLarge\":\"_marginTopautoLarge_1whn1_1254\"}"],"mappings":"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","names":["AriaPopover","Popover"]}