npm - @cambly/syntax-core - Versions diffs - 10.14.0 → 10.16.0 - Mend

@cambly/syntax-core 10.14.0 → 10.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (197) hide show

package/dist/__chunks/5WZOSAYH.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"names":["_a"],"mappings":"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","sourcesContent":["import React, {\n type ReactElement,\n useMemo,\n type SyntheticEvent,\n useRef,\n useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n ColorBaseDestructive700,\n 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 = RichSelectBoxProps & {\n /** Test id for the select element */\n \"data-testid\"?: string;\n /**\n * Disables the select dropdown entirely\n * @defaultValue false\n */\n disabled?: boolean;\n /** Callback to be called when select is clicked */\n onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n /** Text shown below select box if there is an input error. */\n errorText?: string;\n /** Text shown below select box */\n helperText?: string;\n /**\n * RichSelectList id, if not provided, a unique id will be generated\n */\n id?: string;\n /** Text shown above select box */\n label?: string;\n /**\n * Text showing in select box if no option has been chosen.\n * There should always have a placeholder unless there is a default option selected\n */\n placeholderText?: string;\n /** Use to render (override) text shown in the select box */\n selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n /**\n * 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 id,\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 reactId = useId();\n const inputId = id ?? reactId;\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n\n // passed to popover, which attached open/close methods\n const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n const selectedKeysProp = useMemo(\n () => convertSelection(selectedValuesProp),\n [selectedValuesProp],\n );\n const defaultSelectedKeys = useMemo(\n () => convertSelection(defaultSelectedValuesProp, new Set()),\n [defaultSelectedValuesProp],\n );\n const [selectedKeys, setSelectedKeys] = useControlledState(\n selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately. Internally they rely on value (first arg) able to be undefined\n defaultSelectedKeys,\n (value) => {\n const _value = value === \"all\" ? \"all\" : [...value].map(String);\n onChange(_value);\n if (!autosave) overlayHandlerRef.current.close?.();\n },\n );\n\n const selectedTextValue = useMemo(() => {\n if (selectTextValue)\n return (\n selectTextValue(\n selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n ) ?? placeholderText\n );\n if (selectedKeys === \"all\") return \"All selected\";\n if (selectedKeys.size) return `${selectedKeys.size} selected`;\n return placeholderText;\n }, [selectTextValue, selectedKeys, placeholderText]);\n\n const fieldRef = useRef<HTMLDivElement>(null);\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n useField({\n label, // this is the label for the select box\n description: helperText,\n errorMessage: errorText,\n });\n\n 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 {label && (\n <label className={styles.label} htmlFor={id}>\n <Box paddingX={1}>\n <Typography size={100} color=\"gray700\">\n {label}\n </Typography>\n </Box>\n </label>\n )}\n </ReactAriaLabel>\n <Popover\n ref={overlayHandlerRef}\n disabled={disabled}\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 {...richSelectBoxProps}\n accessibilityLabel={inputId}\n >\n {children}\n </RichSelectBox>\n </Box>\n }\n >\n <TapArea\n data-testid={dataTestId}\n disabled={disabled}\n onClick={onClick}\n rounding={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 \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_1o5o7_1\",\"selectContainerCambio\":\"_selectContainerCambio_1o5o7_7\",\"opacityOverlay\":\"_opacityOverlay_1o5o7_11\",\"labelCambio\":\"_labelCambio_1o5o7_15\",\"selectWrapper\":\"_selectWrapper_1o5o7_26\",\"selectBox\":\"_selectBox_1o5o7_31\",\"selectBoxClassic\":\"_selectBoxClassic_1o5o7_47\",\"selectBoxCambio\":\"_selectBoxCambio_1o5o7_52\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1o5o7_60\",\"unselected\":\"_unselected_1o5o7_65\",\"selected\":\"_selected_1o5o7_69\",\"arrowIcon\":\"_arrowIcon_1o5o7_73\",\"sm\":\"_sm_1o5o7_87\",\"md\":\"_md_1o5o7_93\",\"lg\":\"_lg_1o5o7_99\",\"selectError\":\"_selectError_1o5o7_105\",\"selectErrorCambio\":\"_selectErrorCambio_1o5o7_111\"}"]}

package/dist/__chunks/6W5WRS53.cjs.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/__chunks/FQMG5WUT.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../src/RichSelect/RichSelectList.tsx","css-module:../SelectList/SelectList.module.css#css-module"],"sourcesContent":["import React, {\n type ReactElement,\n useMemo,\n type SyntheticEvent,\n useRef,\n useId,\n} from \"react\";\nimport classNames from \"classnames\";\nimport {\n ColorBaseDestructive700,\n 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 = RichSelectBoxProps & {\n /** Test id for the select element */\n \"data-testid\"?: string;\n /**\n * Disables the select dropdown entirely\n * @defaultValue false\n */\n disabled?: boolean;\n /** Callback to be called when select is clicked */\n onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n /** Text shown below select box if there is an input error. */\n errorText?: string;\n /** Text shown below select box */\n helperText?: string;\n /**\n * RichSelectList id, if not provided, a unique id will be generated\n */\n id?: string;\n /** Text shown above select box */\n label?: string;\n /**\n * Text showing in select box if no option has been chosen.\n * There should always have a placeholder unless there is a default option selected\n */\n placeholderText?: string;\n /** Use to render (override) text shown in the select box */\n selectTextValue?: (selectedValues?: \"all\" | string[]) => string | undefined;\n /**\n * 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 id,\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 reactId = useId();\n const inputId = id ?? reactId;\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n\n // passed to popover, which attached open/close methods\n const overlayHandlerRef = useRef<OverlayHandlerRef>({});\n\n const selectedKeysProp = useMemo(\n () => convertSelection(selectedValuesProp),\n [selectedValuesProp],\n );\n const defaultSelectedKeys = useMemo(\n () => convertSelection(defaultSelectedValuesProp, new Set()),\n [defaultSelectedValuesProp],\n );\n const [selectedKeys, setSelectedKeys] = useControlledState(\n selectedKeysProp!, // eslint-disable-line @typescript-eslint/no-non-null-assertion -- there is a bug in the typedef for useControlledState from react-stately. Internally they rely on value (first arg) able to be undefined\n defaultSelectedKeys,\n (value) => {\n const _value = value === \"all\" ? \"all\" : [...value].map(String);\n onChange(_value);\n if (!autosave) overlayHandlerRef.current.close?.();\n },\n );\n\n const selectedTextValue = useMemo(() => {\n if (selectTextValue)\n return (\n selectTextValue(\n selectedKeys === \"all\" ? \"all\" : [...selectedKeys].map(String),\n ) ?? placeholderText\n );\n if (selectedKeys === \"all\") return \"All selected\";\n if (selectedKeys.size) return `${selectedKeys.size} selected`;\n return placeholderText;\n }, [selectTextValue, selectedKeys, placeholderText]);\n\n const fieldRef = useRef<HTMLDivElement>(null);\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n useField({\n label, // this is the label for the select box\n description: helperText,\n errorMessage: errorText,\n });\n\n 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 {label && (\n <label className={styles.label} htmlFor={id}>\n <Box paddingX={1}>\n <Typography size={100} color=\"gray700\">\n {label}\n </Typography>\n </Box>\n </label>\n )}\n </ReactAriaLabel>\n <Popover\n ref={overlayHandlerRef}\n disabled={disabled}\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 {...richSelectBoxProps}\n accessibilityLabel={inputId}\n >\n {children}\n </RichSelectBox>\n </Box>\n }\n >\n <TapArea\n data-testid={dataTestId}\n disabled={disabled}\n onClick={onClick}\n rounding={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 \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_1o5o7_1\",\"selectContainerCambio\":\"_selectContainerCambio_1o5o7_7\",\"opacityOverlay\":\"_opacityOverlay_1o5o7_11\",\"labelCambio\":\"_labelCambio_1o5o7_15\",\"selectWrapper\":\"_selectWrapper_1o5o7_26\",\"selectBox\":\"_selectBox_1o5o7_31\",\"selectBoxClassic\":\"_selectBoxClassic_1o5o7_47\",\"selectBoxCambio\":\"_selectBoxCambio_1o5o7_52\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1o5o7_60\",\"unselected\":\"_unselected_1o5o7_65\",\"selected\":\"_selected_1o5o7_69\",\"arrowIcon\":\"_arrowIcon_1o5o7_73\",\"sm\":\"_sm_1o5o7_87\",\"md\":\"_md_1o5o7_93\",\"lg\":\"_lg_1o5o7_99\",\"selectError\":\"_selectError_1o5o7_105\",\"selectErrorCambio\":\"_selectErrorCambio_1o5o7_111\"}"],"mappings":"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","names":["_a"]}

package/dist/__chunks/FY4WHNNR.js.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/__chunks/TN6NRPAZ.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../src/Modal/Modal.tsx","css-module:./Modal.module.css#css-module"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport classnames from \"classnames\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string }) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n <path\n fill=\"inherit\"\n d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n />\n </svg>\n );\n}\n\n// Note: Only sm + lg size currently. design thinks there should only be two sizes.\n// If there IS a md size at some point, we should use the \"size\" const.\nconst sizeWidth = {\n sm: 400,\n lg: 600,\n} as const;\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n const [showModal, setShowModal] = useState(false)\n\n return (\n <>\n {showModal && <Modal\n header=\"header text\"\n onDismiss={() => setShowModal(false)}\n footer={\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n }\n >\n <Typography>\n Body text goes here!\n </Typography>\n </Modal> }\n </>\n )\n ```\n */\nexport default function Modal({\n header,\n children,\n image,\n onDismiss,\n footer,\n accessibilityCloseLabel = \"close modal\",\n size = \"sm\",\n zIndex = 1,\n \"data-testid\": dataTestId,\n}: {\n /**\n * The modal's main content. Should typically take in `Typography`'d text.\n */\n children: JSX.Element;\n /**\n * The header inside a modal as a string.\n */\n header: string;\n /**\n * What the X button (or clicking out of the modal area) does.\n * Typically used for closing the Modal\n */\n onDismiss: () => void;\n /**\n * The optional image rendered above the Modal.\n * Image size should be 400w x 200h.\n * If images aren't that sized, should ask design to give another image.\n */\n image?: JSX.Element;\n /**\n * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n * * Use Syntax `Button` and pass it into footer.\n * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n * * If two(2) buttons, put primary button _second_.\n *\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n */\n footer?: JSX.Element;\n /**\n * The accessibilty text on the close button.\n * (Sets the aria-label of the button)\n *\n *\n * @defaultValue close modal\n */\n accessibilityCloseLabel?: string;\n /**\n * The size of the card\n *\n * * `sm`: 400px\n * * `lg`: 600px\n *\n *\n * @defaultValue sm\n */\n size?: keyof typeof sizeWidth;\n /**\n * The z-index for the modal.\n * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n *\n * @defaultValue 0\n */\n zIndex?: number;\n /**\n * Test id for the modal\n */\n \"data-testid\"?: string;\n}): ReactElement {\n const { themeName } = useTheme();\n return (\n <Layer zIndex={zIndex}>\n <StopScroll>\n <FocusTrap>\n <div\n className={classnames(\n styles.backdrop,\n themeName === \"classic\"\n ? styles.backdropClassic\n : styles.backdropCambio,\n )}\n role=\"presentation\"\n onClick={(e) => e.target === e.currentTarget && onDismiss()}\n onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n >\n <Box\n data-testid={dataTestId}\n backgroundColor=\"white\"\n rounding=\"xl\"\n display=\"flex\"\n direction=\"column\"\n minWidth={240}\n maxWidth={sizeWidth[size]}\n width=\"100%\"\n dangerouslySetInlineStyle={{ __style: { overflow: \"hidden\" } }}\n >\n <Box position=\"relative\">\n <button\n aria-label={accessibilityCloseLabel}\n type=\"button\"\n className={classnames(\n styles.closeButton,\n themeName === \"classic\"\n ? styles.closeButtonClassic\n : styles.closeButtonCambio,\n {\n [styles.closeButtonWithImage]:\n !!image && themeName === \"classic\",\n },\n )}\n onClick={onDismiss}\n >\n <XIcon\n color={image && themeName === \"classic\" ? \"#fff\" : \"#000\"}\n />\n </button>\n </Box>\n {image && <Box maxHeight={200}>{image}</Box>}\n <Box\n display=\"flex\"\n gap={3}\n direction=\"column\"\n padding={themeName === \"classic\" ? 9 : 3}\n >\n <Heading\n as=\"h1\"\n size={themeName === \"classic\" ? 500 : 400}\n fontStyle={themeName === \"classic\" ? \"sans-serif\" : \"serif\"}\n >\n {header}\n </Heading>\n <Box marginBottom={themeName === \"classic\" ? 4 : 0}>\n {children}\n </Box>\n {footer && (\n <Box\n display=\"flex\"\n direction=\"column\"\n gap={3}\n smDirection=\"row\"\n smJustifyContent=\"end\"\n lgDirection=\"row\"\n lgJustifyContent=\"end\"\n >\n {footer}\n </Box>\n )}\n </Box>\n </Box>\n </div>\n </FocusTrap>\n </StopScroll>\n </Layer>\n );\n}\n\nModal.displayName = \"Modal\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_tqzb0_1\",\"backdropClassic\":\"_backdropClassic_tqzb0_11\",\"backdropCambio\":\"_backdropCambio_tqzb0_15\",\"closeButton\":\"_closeButton_tqzb0_19\",\"closeButtonClassic\":\"_closeButtonClassic_tqzb0_34\",\"closeButtonCambio\":\"_closeButtonCambio_tqzb0_41\",\"closeButtonWithImage\":\"_closeButtonWithImage_tqzb0_53\"}"],"mappings":"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","names":[]}

package/dist/__chunks/YLJDLIHH.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../src/Modal/Modal.tsx","css-module:./Modal.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import { type ReactElement } from \"react\";\nimport classnames from \"classnames\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction XIcon({ color = \"#000\" }: { color?: string }) {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" fill={color}>\n <path\n fill=\"inherit\"\n d=\"M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z\"\n />\n </svg>\n );\n}\n\n// Note: Only sm + lg size currently. design thinks there should only be two sizes.\n// If there IS a md size at some point, we should use the \"size\" const.\nconst sizeWidth = {\n sm: 400,\n lg: 600,\n} as const;\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n const [showModal, setShowModal] = useState(false)\n\n return (\n <>\n {showModal && <Modal\n header=\"header text\"\n onDismiss={() => setShowModal(false)}\n footer={\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n }\n >\n <Typography>\n Body text goes here!\n </Typography>\n </Modal> }\n </>\n )\n ```\n */\nexport default function Modal({\n header,\n children,\n image,\n onDismiss,\n footer,\n accessibilityCloseLabel = \"close modal\",\n size = \"sm\",\n zIndex = 1,\n \"data-testid\": dataTestId,\n}: {\n /**\n * The modal's main content. Should typically take in `Typography`'d text.\n */\n children: JSX.Element;\n /**\n * The header inside a modal as a string.\n */\n header: string;\n /**\n * What the X button (or clicking out of the modal area) does.\n * Typically used for closing the Modal\n */\n onDismiss: () => void;\n /**\n * The optional image rendered above the Modal.\n * Image size should be 400w x 200h.\n * If images aren't that sized, should ask design to give another image.\n */\n image?: JSX.Element;\n /**\n * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n * * Use Syntax `Button` and pass it into footer.\n * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n * * If two(2) buttons, put primary button _second_.\n *\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n */\n footer?: JSX.Element;\n /**\n * The accessibilty text on the close button.\n * (Sets the aria-label of the button)\n *\n *\n * @defaultValue close modal\n */\n accessibilityCloseLabel?: string;\n /**\n * The size of the card\n *\n * * `sm`: 400px\n * * `lg`: 600px\n *\n *\n * @defaultValue sm\n */\n size?: keyof typeof sizeWidth;\n /**\n * The z-index for the modal.\n * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n *\n * @defaultValue 0\n */\n zIndex?: number;\n /**\n * Test id for the modal\n */\n \"data-testid\"?: string;\n}): ReactElement {\n const { themeName } = useTheme();\n return (\n <Layer zIndex={zIndex}>\n <StopScroll>\n <FocusTrap>\n <div\n className={classnames(\n styles.backdrop,\n themeName === \"classic\"\n ? styles.backdropClassic\n : styles.backdropCambio,\n )}\n role=\"presentation\"\n onClick={(e) => e.target === e.currentTarget && onDismiss()}\n onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n >\n <Box\n data-testid={dataTestId}\n backgroundColor=\"white\"\n rounding=\"xl\"\n display=\"flex\"\n direction=\"column\"\n minWidth={240}\n maxWidth={sizeWidth[size]}\n width=\"100%\"\n dangerouslySetInlineStyle={{ __style: { overflow: \"hidden\" } }}\n >\n <Box position=\"relative\">\n <button\n aria-label={accessibilityCloseLabel}\n type=\"button\"\n className={classnames(\n styles.closeButton,\n themeName === \"classic\"\n ? styles.closeButtonClassic\n : styles.closeButtonCambio,\n {\n [styles.closeButtonWithImage]:\n !!image && themeName === \"classic\",\n },\n )}\n onClick={onDismiss}\n >\n <XIcon\n color={image && themeName === \"classic\" ? \"#fff\" : \"#000\"}\n />\n </button>\n </Box>\n {image && <Box maxHeight={200}>{image}</Box>}\n <Box\n display=\"flex\"\n gap={3}\n direction=\"column\"\n padding={themeName === \"classic\" ? 9 : 3}\n >\n <Heading\n as=\"h1\"\n size={themeName === \"classic\" ? 500 : 400}\n fontStyle={themeName === \"classic\" ? \"sans-serif\" : \"serif\"}\n >\n {header}\n </Heading>\n <Box marginBottom={themeName === \"classic\" ? 4 : 0}>\n {children}\n </Box>\n {footer && (\n <Box\n display=\"flex\"\n direction=\"column\"\n gap={3}\n smDirection=\"row\"\n smJustifyContent=\"end\"\n lgDirection=\"row\"\n lgJustifyContent=\"end\"\n >\n {footer}\n </Box>\n )}\n </Box>\n </Box>\n </div>\n </FocusTrap>\n </StopScroll>\n </Layer>\n );\n}\n\nModal.displayName = \"Modal\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_tqzb0_1\",\"backdropClassic\":\"_backdropClassic_tqzb0_11\",\"backdropCambio\":\"_backdropCambio_tqzb0_15\",\"closeButton\":\"_closeButton_tqzb0_19\",\"closeButtonClassic\":\"_closeButtonClassic_tqzb0_34\",\"closeButtonCambio\":\"_closeButtonCambio_tqzb0_41\",\"closeButtonWithImage\":\"_closeButtonWithImage_tqzb0_53\"}"]}

package/dist/__chunks/ZDSY6FEO.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"names":[],"mappings":"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","sourcesContent":["import React, {\n type ReactElement,\n type ReactNode,\n useId,\n useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n ColorBaseDestructive700,\n ColorBaseGray800,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nconst iconSize = {\n sm: 20,\n md: 24,\n lg: 24,\n} as const;\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n children,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n errorText,\n helperText,\n id,\n label,\n onChange,\n onClick,\n placeholderText,\n selectedValue = \"\",\n size = \"md\",\n}: {\n /**\n * One or more SelectList.Option components.\n */\n children: ReactNode;\n /**\n * Test id for the select element\n */\n \"data-testid\"?: string;\n /**\n * true if the select dropdown is disabled\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Callback to be called when select is clicked\n */\n onClick?: React.MouseEventHandler<HTMLSelectElement>;\n /**\n * Text shown below select box if there is an input error.\n */\n errorText?: string;\n /**\n * Text shown below select box\n */\n helperText?: string;\n /**\n * Id of the select element\n */\n id?: string;\n /**\n * Text shown above select box\n */\n label: string;\n /**\n * The callback to be called when an option is selected\n */\n onChange: React.ChangeEventHandler<HTMLSelectElement>;\n /**\n * Text showing in select box if no option has been chosen.\n * We should always have a placeholder unless there is a default option selected\n */\n placeholderText?: string;\n /**\n * Value of the currently selected option\n */\n selectedValue?: string;\n /**\n * Size of the select box\n * * `sm`: 32px\n * * `md`: 40px\n * * `lg`: 48px\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\" | \"lg\";\n}): ReactElement {\n const reactId = useId();\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const { themeName } = useTheme();\n const selectId = id ?? reactId;\n const { isFocusVisible } = useFocusVisible();\n const [isFocused, setIsFocused] = useState(false);\n\n return (\n <div\n className={classNames(styles.selectContainer, {\n [styles.opacityOverlay]: disabled,\n [styles.selectContainerCambio]: themeName === \"cambio\",\n })}\n >\n {label && (\n <label\n htmlFor={selectId}\n className={classNames(themeName === \"cambio\" && styles.labelCambio)}\n >\n <Box paddingX={themeName === \"classic\" ? 1 : 3}>\n <Typography size={100} color=\"gray700\">\n {label}\n </Typography>\n </Box>\n </label>\n )}\n <div className={styles.selectWrapper}>\n <select\n id={selectId}\n data-testid={dataTestId}\n disabled={disabled}\n className={classNames(\n styles.selectBox,\n themeName === \"classic\"\n ? styles.selectBoxClassic\n : styles.selectBoxCambio,\n themeName === \"classic\" && styles[size],\n {\n [styles.unselected]: !selectedValue && !errorText,\n [styles.selected]: selectedValue && !errorText,\n [themeName === \"classic\"\n ? styles.selectError\n : styles.selectErrorCambio]: errorText,\n [focusStyles.accessibilityOutlineFocus]:\n isFocused && isFocusVisible, // for focus keyboard\n [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n },\n )}\n onChange={onChange}\n onClick={onClick}\n value={\n placeholderText && !selectedValue ? placeholderText : selectedValue\n }\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n >\n {placeholderText && (\n <option disabled value={placeholderText}>\n {placeholderText}\n </option>\n )}\n {children}\n </select>\n <div className={styles.arrowIcon}>\n <svg\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n width={themeName === \"classic\" ? iconSize[size] : 24}\n >\n <path\n fill={errorText ? ColorBaseDestructive700 : ColorBaseGray800}\n d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n />\n </svg>\n </div>\n </div>\n {(helperText || errorText) && (\n <Box paddingX={themeName === \"classic\" ? 1 : 0}>\n <Typography\n size={100}\n color={errorText ? \"destructive-primary\" : \"gray700\"}\n >\n {errorText ? errorText : helperText}\n </Typography>\n </Box>\n )}\n </div>\n );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_1o5o7_1\",\"selectContainerCambio\":\"_selectContainerCambio_1o5o7_7\",\"opacityOverlay\":\"_opacityOverlay_1o5o7_11\",\"labelCambio\":\"_labelCambio_1o5o7_15\",\"selectWrapper\":\"_selectWrapper_1o5o7_26\",\"selectBox\":\"_selectBox_1o5o7_31\",\"selectBoxClassic\":\"_selectBoxClassic_1o5o7_47\",\"selectBoxCambio\":\"_selectBoxCambio_1o5o7_52\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_1o5o7_60\",\"unselected\":\"_unselected_1o5o7_65\",\"selected\":\"_selected_1o5o7_69\",\"arrowIcon\":\"_arrowIcon_1o5o7_73\",\"sm\":\"_sm_1o5o7_87\",\"md\":\"_md_1o5o7_93\",\"lg\":\"_lg_1o5o7_99\",\"selectError\":\"_selectError_1o5o7_105\",\"selectErrorCambio\":\"_selectErrorCambio_1o5o7_111\"}"]}

/package/dist/__chunks/{W7GPAEHP.cjs.map → 2RKCTJBI.cjs.map} RENAMED Viewed

File without changes

/package/dist/__chunks/{4SUKTRWG.cjs.map → 4HRJ2HGG.cjs.map} RENAMED Viewed

File without changes

/package/dist/__chunks/{ARCUBQR4.js.map → 52D6HVA3.js.map} RENAMED Viewed

File without changes

/package/dist/__chunks/{UYZYKU2W.cjs.map → 5V4GT2NJ.cjs.map} RENAMED Viewed

File without changes

/package/dist/__chunks/{EVDDEHP3.cjs.map → 7K5BKF5X.cjs.map} RENAMED Viewed

File without changes

/package/dist/__chunks/{CXD34CNP.cjs.map → 7OYM5HJI.cjs.map} RENAMED Viewed

File without changes