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

@cambly/syntax-core 10.15.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 (189) hide show

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/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/{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/{VOLO4QB4.cjs.map → 6S3NMK6F.cjs.map} RENAMED Viewed

File without changes

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

File without changes