@cambly/syntax-core 10.8.1 → 10.9.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.
- package/dist/Avatar/Avatar.d.ts +1 -1
- package/dist/Badge/Badge.cjs +4 -3
- package/dist/Badge/Badge.css +114 -22
- package/dist/Badge/Badge.css.map +1 -1
- package/dist/Badge/Badge.d.ts +1 -1
- package/dist/Badge/Badge.js +3 -2
- package/dist/Button/Button.cjs +4 -4
- package/dist/Button/Button.css +114 -22
- package/dist/Button/Button.css.map +1 -1
- package/dist/Button/Button.js +3 -3
- package/dist/ButtonGroup/ButtonGroup.d.ts +1 -1
- package/dist/Checkbox/Checkbox.cjs +4 -3
- package/dist/Checkbox/Checkbox.css +114 -22
- package/dist/Checkbox/Checkbox.css.map +1 -1
- package/dist/Checkbox/Checkbox.d.ts +1 -1
- package/dist/Checkbox/Checkbox.js +3 -2
- package/dist/Chip/Chip.cjs +4 -3
- package/dist/Chip/Chip.css +114 -22
- package/dist/Chip/Chip.css.map +1 -1
- package/dist/Chip/Chip.js +3 -2
- package/dist/Dialog/ModalDialog.cjs +4 -4
- package/dist/Dialog/ModalDialog.js +3 -3
- package/dist/Heading/Heading.cjs +4 -3
- package/dist/Heading/Heading.css +114 -22
- package/dist/Heading/Heading.css.map +1 -1
- package/dist/Heading/Heading.d.ts +33 -4
- package/dist/Heading/Heading.js +3 -2
- package/dist/IconButton/IconButton.cjs +3 -3
- package/dist/IconButton/IconButton.js +2 -2
- package/dist/LinkButton/LinkButton.cjs +4 -4
- package/dist/LinkButton/LinkButton.css +114 -22
- package/dist/LinkButton/LinkButton.css.map +1 -1
- package/dist/LinkButton/LinkButton.js +3 -3
- package/dist/Modal/Modal.cjs +5 -4
- package/dist/Modal/Modal.css +114 -22
- package/dist/Modal/Modal.css.map +1 -1
- package/dist/Modal/Modal.js +4 -3
- package/dist/Popover/Popover.cjs +5 -5
- package/dist/Popover/Popover.js +4 -4
- package/dist/RadioButton/RadioButton.cjs +4 -3
- package/dist/RadioButton/RadioButton.css +114 -22
- package/dist/RadioButton/RadioButton.css.map +1 -1
- package/dist/RadioButton/RadioButton.d.ts +1 -1
- package/dist/RadioButton/RadioButton.js +3 -2
- package/dist/RichSelect/RichSelectBox.cjs +10 -10
- package/dist/RichSelect/RichSelectBox.css +114 -22
- package/dist/RichSelect/RichSelectBox.css.map +1 -1
- package/dist/RichSelect/RichSelectBox.d.ts +1 -1
- package/dist/RichSelect/RichSelectBox.js +9 -9
- package/dist/RichSelect/RichSelectChip.cjs +5 -4
- package/dist/RichSelect/RichSelectChip.css +114 -22
- package/dist/RichSelect/RichSelectChip.css.map +1 -1
- package/dist/RichSelect/RichSelectChip.js +4 -3
- package/dist/RichSelect/RichSelectList.cjs +15 -15
- package/dist/RichSelect/RichSelectList.css +114 -22
- package/dist/RichSelect/RichSelectList.css.map +1 -1
- package/dist/RichSelect/RichSelectList.d.ts +1 -1
- package/dist/RichSelect/RichSelectList.js +14 -14
- package/dist/RichSelect/RichSelectRadioButton.cjs +5 -4
- package/dist/RichSelect/RichSelectRadioButton.css +114 -22
- package/dist/RichSelect/RichSelectRadioButton.css.map +1 -1
- package/dist/RichSelect/RichSelectRadioButton.d.ts +1 -1
- package/dist/RichSelect/RichSelectRadioButton.js +4 -3
- package/dist/RichSelect/RichSelectSection.cjs +4 -3
- package/dist/RichSelect/RichSelectSection.css +114 -22
- package/dist/RichSelect/RichSelectSection.css.map +1 -1
- package/dist/RichSelect/RichSelectSection.js +3 -2
- package/dist/SelectList/SelectList.cjs +5 -4
- package/dist/SelectList/SelectList.css +114 -22
- package/dist/SelectList/SelectList.css.map +1 -1
- package/dist/SelectList/SelectList.js +4 -3
- package/dist/TapArea/TapArea.d.ts +1 -1
- package/dist/TextArea/TextArea.cjs +4 -3
- package/dist/TextArea/TextArea.css +114 -22
- package/dist/TextArea/TextArea.css.map +1 -1
- package/dist/TextArea/TextArea.js +3 -2
- package/dist/TextField/TextField.cjs +4 -3
- package/dist/TextField/TextField.css +114 -22
- package/dist/TextField/TextField.css.map +1 -1
- package/dist/TextField/TextField.js +3 -2
- package/dist/ThemeProvider/ThemeProvider.cjs +2 -2
- package/dist/ThemeProvider/ThemeProvider.js +1 -1
- package/dist/Tooltip/Tooltip.cjs +4 -3
- package/dist/Tooltip/Tooltip.css +114 -22
- package/dist/Tooltip/Tooltip.css.map +1 -1
- package/dist/Tooltip/Tooltip.js +3 -2
- package/dist/Typography/Typography.cjs +3 -2
- package/dist/Typography/Typography.css +114 -22
- package/dist/Typography/Typography.css.map +1 -1
- package/dist/Typography/Typography.d.ts +54 -5
- package/dist/Typography/Typography.js +2 -1
- package/dist/__chunks/{L4KE5YQS.cjs → 2IVYMX2N.cjs} +3 -3
- package/dist/__chunks/{FKV5VN7F.js → 2L772DMJ.js} +2 -2
- package/dist/__chunks/32FNU7ZY.js +128 -0
- package/dist/__chunks/32FNU7ZY.js.map +1 -0
- package/dist/__chunks/{CS6U6WBZ.js → 3UFCDOCF.js} +2 -2
- package/dist/__chunks/{3BFH4YPH.cjs → 4QCCTDDW.cjs} +4 -4
- package/dist/__chunks/{PLF2SHYM.js → 5HJFQPOL.js} +2 -2
- package/dist/__chunks/{RRAXSCWL.js → 6LBX2D7Z.js} +8 -8
- package/dist/__chunks/{BANKR5VQ.js → 6NXOQHE2.js} +2 -2
- package/dist/__chunks/{GQC7B3U6.cjs → 7W5RYLTS.cjs} +3 -3
- package/dist/__chunks/{KX4HD3Q3.cjs → ANT3IQ3X.cjs} +10 -10
- package/dist/__chunks/{53IMFXFX.js → ARYTS7XZ.js} +3 -3
- package/dist/__chunks/{53IMFXFX.js.map → ARYTS7XZ.js.map} +1 -1
- package/dist/__chunks/{RMC2RSHW.js → BIOBVFK4.js} +2 -2
- package/dist/__chunks/{4PICWHAJ.js → BQ6CW43H.js} +2 -2
- package/dist/__chunks/{LW7YGM7C.js → CRDTRKBH.js} +2 -2
- package/dist/__chunks/{P7UEPXTA.cjs → CVY5S6ZX.cjs} +4 -4
- package/dist/__chunks/{LIP6F5HL.js → DAMHOGG6.js} +2 -2
- package/dist/__chunks/{S6D6YJNT.cjs → DM4UMQ5D.cjs} +19 -19
- package/dist/__chunks/{EW5FQDYY.cjs → DSCWFIR3.cjs} +4 -4
- package/dist/__chunks/{EW5FQDYY.cjs.map → DSCWFIR3.cjs.map} +1 -1
- package/dist/__chunks/{2OKXRMSO.cjs → DWTZH7KM.cjs} +5 -5
- package/dist/__chunks/{4QLZTDKE.cjs → FINKF5MC.cjs} +3 -3
- package/dist/__chunks/{VXNZTCXZ.cjs → GJ44NFS5.cjs} +12 -5
- package/dist/__chunks/GJ44NFS5.cjs.map +1 -0
- package/dist/__chunks/{YCBSKN3Q.js → HOSRHZZG.js} +2 -2
- package/dist/__chunks/{2DU7NSCB.js → IOQT7L7F.js} +1 -1
- package/dist/__chunks/{2DU7NSCB.js.map → IOQT7L7F.js.map} +1 -1
- package/dist/__chunks/{TYZIM5GF.js → IOYNCG2J.js} +3 -3
- package/dist/__chunks/{4LYJ2Z5F.js → JBEJC7X2.js} +11 -4
- package/dist/__chunks/JBEJC7X2.js.map +1 -0
- package/dist/__chunks/{SSFANAKU.js → JOG44CT2.js} +5 -5
- package/dist/__chunks/{YMNL37TU.cjs → K2AMFXJG.cjs} +5 -5
- package/dist/__chunks/{BTZDTIOB.cjs → K2SCOMJX.cjs} +3 -3
- package/dist/__chunks/{NGCJ3BBY.js → KOZMH6AE.js} +3 -3
- package/dist/__chunks/{NGCJ3BBY.js.map → KOZMH6AE.js.map} +1 -1
- package/dist/__chunks/{HKGPCZ2V.js → KP3CHNJW.js} +5 -5
- package/dist/__chunks/{ZQFEITZH.cjs → LCEAHKFE.cjs} +3 -3
- package/dist/__chunks/{C6UG54GY.js → MQUMPR4A.js} +2 -2
- package/dist/__chunks/{HFRUEPJM.cjs → OI44OAX7.cjs} +6 -6
- package/dist/__chunks/{U6LLWKED.cjs → POAYQEOA.cjs} +1 -1
- package/dist/__chunks/{U6LLWKED.cjs.map → POAYQEOA.cjs.map} +1 -1
- package/dist/__chunks/{FXDPBBRB.js → Q5RYWCW7.js} +2 -2
- package/dist/__chunks/{HVGUWZ5I.js → RXNTJFP4.js} +5 -2
- package/dist/__chunks/RXNTJFP4.js.map +1 -0
- package/dist/__chunks/{W4UIYTBG.cjs → SJG2X2VN.cjs} +4 -4
- package/dist/__chunks/{W4UIYTBG.cjs.map → SJG2X2VN.cjs.map} +1 -1
- package/dist/__chunks/{DO56RCLX.js → T2WKEFB5.js} +2 -2
- package/dist/__chunks/TIW4V757.cjs +128 -0
- package/dist/__chunks/TIW4V757.cjs.map +1 -0
- package/dist/__chunks/{5WQ23BQE.js → TMH27D62.js} +5 -5
- package/dist/__chunks/{I37F5HVM.cjs → TVGN7SBI.cjs} +3 -3
- package/dist/__chunks/{EJTCFSQF.cjs → UXWIAEKV.cjs} +6 -6
- package/dist/__chunks/{63LUPH3X.cjs → WDR3YIMA.cjs} +3 -3
- package/dist/__chunks/{5NIFOD6K.cjs → WKDXUPAM.cjs} +5 -2
- package/dist/__chunks/WKDXUPAM.cjs.map +1 -0
- package/dist/__chunks/{5JI6NPPE.cjs → WPRJVUVL.cjs} +3 -3
- package/dist/__chunks/{JYKKN54U.cjs → X6F66N7W.cjs} +3 -3
- package/dist/index.cjs +26 -26
- package/dist/index.css +114 -22
- package/dist/index.css.map +1 -1
- package/dist/index.js +25 -25
- package/package.json +1 -1
- package/dist/__chunks/4LYJ2Z5F.js.map +0 -1
- package/dist/__chunks/5NIFOD6K.cjs.map +0 -1
- package/dist/__chunks/HVGUWZ5I.js.map +0 -1
- package/dist/__chunks/JBNXAIXY.cjs +0 -78
- package/dist/__chunks/JBNXAIXY.cjs.map +0 -1
- package/dist/__chunks/TGGJZ5GF.js +0 -78
- package/dist/__chunks/TGGJZ5GF.js.map +0 -1
- package/dist/__chunks/VXNZTCXZ.cjs.map +0 -1
- /package/dist/__chunks/{L4KE5YQS.cjs.map → 2IVYMX2N.cjs.map} +0 -0
- /package/dist/__chunks/{FKV5VN7F.js.map → 2L772DMJ.js.map} +0 -0
- /package/dist/__chunks/{CS6U6WBZ.js.map → 3UFCDOCF.js.map} +0 -0
- /package/dist/__chunks/{3BFH4YPH.cjs.map → 4QCCTDDW.cjs.map} +0 -0
- /package/dist/__chunks/{PLF2SHYM.js.map → 5HJFQPOL.js.map} +0 -0
- /package/dist/__chunks/{RRAXSCWL.js.map → 6LBX2D7Z.js.map} +0 -0
- /package/dist/__chunks/{BANKR5VQ.js.map → 6NXOQHE2.js.map} +0 -0
- /package/dist/__chunks/{GQC7B3U6.cjs.map → 7W5RYLTS.cjs.map} +0 -0
- /package/dist/__chunks/{KX4HD3Q3.cjs.map → ANT3IQ3X.cjs.map} +0 -0
- /package/dist/__chunks/{RMC2RSHW.js.map → BIOBVFK4.js.map} +0 -0
- /package/dist/__chunks/{4PICWHAJ.js.map → BQ6CW43H.js.map} +0 -0
- /package/dist/__chunks/{LW7YGM7C.js.map → CRDTRKBH.js.map} +0 -0
- /package/dist/__chunks/{P7UEPXTA.cjs.map → CVY5S6ZX.cjs.map} +0 -0
- /package/dist/__chunks/{LIP6F5HL.js.map → DAMHOGG6.js.map} +0 -0
- /package/dist/__chunks/{S6D6YJNT.cjs.map → DM4UMQ5D.cjs.map} +0 -0
- /package/dist/__chunks/{2OKXRMSO.cjs.map → DWTZH7KM.cjs.map} +0 -0
- /package/dist/__chunks/{4QLZTDKE.cjs.map → FINKF5MC.cjs.map} +0 -0
- /package/dist/__chunks/{YCBSKN3Q.js.map → HOSRHZZG.js.map} +0 -0
- /package/dist/__chunks/{TYZIM5GF.js.map → IOYNCG2J.js.map} +0 -0
- /package/dist/__chunks/{SSFANAKU.js.map → JOG44CT2.js.map} +0 -0
- /package/dist/__chunks/{YMNL37TU.cjs.map → K2AMFXJG.cjs.map} +0 -0
- /package/dist/__chunks/{BTZDTIOB.cjs.map → K2SCOMJX.cjs.map} +0 -0
- /package/dist/__chunks/{HKGPCZ2V.js.map → KP3CHNJW.js.map} +0 -0
- /package/dist/__chunks/{ZQFEITZH.cjs.map → LCEAHKFE.cjs.map} +0 -0
- /package/dist/__chunks/{C6UG54GY.js.map → MQUMPR4A.js.map} +0 -0
- /package/dist/__chunks/{HFRUEPJM.cjs.map → OI44OAX7.cjs.map} +0 -0
- /package/dist/__chunks/{FXDPBBRB.js.map → Q5RYWCW7.js.map} +0 -0
- /package/dist/__chunks/{DO56RCLX.js.map → T2WKEFB5.js.map} +0 -0
- /package/dist/__chunks/{5WQ23BQE.js.map → TMH27D62.js.map} +0 -0
- /package/dist/__chunks/{I37F5HVM.cjs.map → TVGN7SBI.cjs.map} +0 -0
- /package/dist/__chunks/{EJTCFSQF.cjs.map → UXWIAEKV.cjs.map} +0 -0
- /package/dist/__chunks/{63LUPH3X.cjs.map → WDR3YIMA.cjs.map} +0 -0
- /package/dist/__chunks/{5JI6NPPE.cjs.map → WPRJVUVL.cjs.map} +0 -0
- /package/dist/__chunks/{JYKKN54U.cjs.map → X6F66N7W.cjs.map} +0 -0
|
@@ -181,8 +181,11 @@ function stylesForTheme(themeName) {
|
|
|
181
181
|
]
|
|
182
182
|
];
|
|
183
183
|
}
|
|
184
|
+
if (themeName === "cambio" && key.includes("elevation")) {
|
|
185
|
+
return [null, null];
|
|
186
|
+
}
|
|
184
187
|
return [key, value];
|
|
185
|
-
}).map(([key, value]) => `--${key}: ${value};`).join("\n")}
|
|
188
|
+
}).map(([key, value]) => key && value ? `--${key}: ${value};` : null).filter(Boolean).join("\n")}
|
|
186
189
|
}
|
|
187
190
|
`;
|
|
188
191
|
}
|
|
@@ -211,4 +214,4 @@ export {
|
|
|
211
214
|
ThemeProvider,
|
|
212
215
|
useTheme
|
|
213
216
|
};
|
|
214
|
-
//# sourceMappingURL=
|
|
217
|
+
//# sourceMappingURL=RXNTJFP4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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\": undefined, // Deprecated - to be deleted\n \"color-base-destructive-300\": \"color-cambio-destructive-300\",\n \"color-base-destructive-700\": \"color-cambio-destructive-700\",\n \"color-base-destructive-800\": undefined, // Deprecated - to be deleted\n \"color-base-destructive-900\": \"color-cambio-destructive-900\",\n \"color-base-gray-10\": \"color-cambio-gray-370\",\n \"color-base-gray-30\": \"color-cambio-gray-370\",\n \"color-base-gray-60\": \"color-cambio-gray-870\",\n \"color-base-gray-80\": \"color-cambio-gray-870\",\n \"color-base-gray-100\": \"color-cambio-gray-100\",\n \"color-base-gray-200\": \"color-cambio-gray-200\",\n \"color-base-gray-300\": \"color-cambio-gray-300\",\n \"color-base-gray-700\": \"color-cambio-gray-700\",\n \"color-base-gray-800\": \"color-cambio-gray-800\",\n \"color-base-gray-900\": \"color-cambio-gray-900\",\n \"color-base-orange-100\": undefined, // Deprecated - to be deleted\n \"color-base-orange-200\": undefined, // Deprecated - to be deleted\n \"color-base-orange-300\": undefined, // Deprecated - to be deleted\n \"color-base-orange-700\": \"color-cambio-orange\",\n \"color-base-orange-800\": undefined, // Deprecated - to be deleted\n \"color-base-orange-900\": undefined, // Deprecated - to be deleted\n \"color-base-primary-100\": \"color-cambio-gray-100\",\n \"color-base-primary-200\": \"color-cambio-gray-200\",\n \"color-base-primary-300\": \"color-cambio-gray-300\",\n \"color-base-primary-700\": \"color-cambio-gray-700\",\n \"color-base-primary-800\": \"color-cambio-gray-800\",\n \"color-base-primary-900\": \"color-cambio-gray-900\",\n \"color-base-success-100\": \"color-cambio-success-100\",\n \"color-base-success-200\": undefined, // Deprecated - to be deleted\n \"color-base-success-300\": \"color-cambio-success-300\",\n \"color-base-success-700\": \"color-cambio-success-700\",\n \"color-base-success-800\": undefined, // Deprecated - to be deleted\n \"color-base-success-900\": \"color-cambio-success-900\",\n \"color-base-purple-100\": undefined, // Deprecated - to be deleted\n \"color-base-purple-200\": undefined, // Deprecated - to be deleted\n \"color-base-purple-300\": undefined, // Deprecated - to be deleted\n \"color-base-purple-700\": \"color-cambio-purple\",\n \"color-base-purple-800\": undefined, // Deprecated - to be deleted\n \"color-base-purple-900\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-100\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-200\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-300\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-700\": \"color-cambio-yellow-700\",\n \"color-base-yellow-800\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-900\": undefined, // Deprecated - to be deleted\n \"color-base-white\": \"color-cambio-white\",\n};\n\nfunction stylesForTheme(themeName: ThemeName) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const tokenVariables: Record<string, string> = variables;\n return `\n :root {\n ${Object.entries(tokenVariables)\n .filter(([key]) => {\n return themeName === \"classic\" ? !key.includes(\"cambio\") : true;\n })\n .map(([key, value]) => {\n // Replace classic values with cambio ones if they exist\n if (\n themeName === \"cambio\" &&\n classicToCambioKeyLookup[\n key as keyof typeof classicToCambioKeyLookup\n ]\n ) {\n return [\n key,\n tokenVariables[\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n classicToCambioKeyLookup[\n key as keyof typeof classicToCambioKeyLookup\n ]!\n ],\n ];\n }\n // `elevation` is a classic only concept\n if (themeName === \"cambio\" && key.includes(\"elevation\")) {\n return [null, null];\n }\n return [key, value];\n })\n .map(([key, value]) => (key && value ? `--${key}: ${value};` : null))\n .filter(Boolean)\n .join(\"\\n\")}\n }\n `;\n}\n\nexport default function ThemeProvider({\n themeName = \"classic\",\n children,\n}: {\n themeName: ThemeName;\n children: React.ReactNode;\n}): React.ReactElement {\n const value = useMemo(() => ({ themeName }), [themeName]);\n\n const innerStyles = useMemo(() => stylesForTheme(themeName), [themeName]);\n\n return (\n <ThemeContext.Provider value={value}>\n <style\n dangerouslySetInnerHTML={{ __html: innerStyles }}\n data-testid=\"themeprovider-style\"\n ></style>\n {children}\n </ThemeContext.Provider>\n );\n}\n\nexport function useTheme(): Theme {\n return React.useContext(ThemeContext);\n}\n","{\n \"color-base-black\": \"#000000\",\n \"color-base-destructive-100\": \"#fef3f5\",\n \"color-base-destructive-200\": \"#fad6de\",\n \"color-base-destructive-300\": \"#f2a2b2\",\n \"color-base-destructive-700\": \"#d32a4b\",\n \"color-base-destructive-800\": \"#81162c\",\n \"color-base-destructive-900\": \"#55101d\",\n \"color-base-gray-10\": \"rgba(203, 203, 203, 0.5)\",\n \"color-base-gray-30\": \"rgba(0, 0, 0, 0.3)\",\n \"color-base-gray-60\": \"rgba(0, 0, 0, 0.6)\",\n \"color-base-gray-80\": \"rgba(0, 0, 0, 0.8)\",\n \"color-base-gray-100\": \"#f7f7f7\",\n \"color-base-gray-200\": \"#f0f0f0\",\n \"color-base-gray-300\": \"#d0d0d0\",\n \"color-base-gray-700\": \"#767676\",\n \"color-base-gray-800\": \"#353535\",\n \"color-base-gray-900\": \"#191919\",\n \"color-base-orange-100\": \"#fdf2f0\",\n \"color-base-orange-200\": \"#f6cdc4\",\n \"color-base-orange-300\": \"#ec9987\",\n \"color-base-orange-700\": \"#c34124\",\n \"color-base-orange-800\": \"#732818\",\n \"color-base-orange-900\": \"#4d1a10\",\n \"color-base-primary-100\": \"#eff6fa\",\n \"color-base-primary-200\": \"#c1dbe7\",\n \"color-base-primary-300\": \"#84b7d0\",\n \"color-base-primary-700\": \"#236482\",\n \"color-base-primary-800\": \"#274858\",\n \"color-base-primary-900\": \"#1b303b\",\n \"color-base-success-100\": \"#eff7f1\",\n \"color-base-success-200\": \"#bddcc6\",\n \"color-base-success-300\": \"#81ba92\",\n \"color-base-success-700\": \"#397b4d\",\n \"color-base-success-800\": \"#2d4936\",\n \"color-base-success-900\": \"#1e3124\",\n \"color-base-purple-100\": \"#f9f5fa\",\n \"color-base-purple-200\": \"#e8dceb\",\n \"color-base-purple-300\": \"#cdb4d3\",\n \"color-base-purple-700\": \"#8b5f95\",\n \"color-base-purple-800\": \"#523b58\",\n \"color-base-purple-900\": \"#37273b\",\n \"color-base-yellow-100\": \"#fdf5d9\",\n \"color-base-yellow-200\": \"#fbe8a3\",\n \"color-base-yellow-300\": \"#f8d663\",\n \"color-base-yellow-700\": \"#ffc929\",\n \"color-base-yellow-800\": \"#765f1c\",\n \"color-base-yellow-900\": \"#3b3009\",\n \"color-base-white\": \"#ffffff\",\n \"color-cambio-black\": \"#050500\",\n \"color-cambio-white\": \"#ffffff\",\n \"color-cambio-gray-100\": \"#faf4eb\",\n \"color-cambio-gray-200\": \"#e4dbd3\",\n \"color-cambio-gray-300\": \"#beb4ab\",\n \"color-cambio-gray-370\": \"rgba(190, 180, 171, 0.7)\",\n \"color-cambio-gray-700\": \"#888077\",\n \"color-cambio-gray-800\": \"#5c554d\",\n \"color-cambio-gray-870\": \"rgba(92, 85, 77, 0.7)\",\n \"color-cambio-gray-900\": \"#312b23\",\n \"color-cambio-destructive-100\": \"#ffdeda\",\n \"color-cambio-destructive-300\": \"#ff8071\",\n \"color-cambio-destructive-370\": \"rgba(255, 128, 113, 0.7)\",\n \"color-cambio-destructive-700\": \"#c93f32\",\n \"color-cambio-destructive-770\": \"rgba(201, 63, 50, 0.7)\",\n \"color-cambio-destructive-900\": \"#6d0002\",\n \"color-cambio-success-100\": \"#daf2c8\",\n \"color-cambio-success-300\": \"#84ce64\",\n \"color-cambio-success-370\": \"rgba(132, 206, 100, 0.7)\",\n \"color-cambio-success-700\": \"#3c7f20\",\n \"color-cambio-success-770\": \"rgba(60, 127, 32, 0.7)\",\n \"color-cambio-success-900\": \"#103e00\",\n \"color-cambio-red\": \"#f56e56\",\n \"color-cambio-orange\": \"#ff8f57\",\n \"color-cambio-tan\": \"#ffb47d\",\n \"color-cambio-cream\": \"#fffad1\",\n \"color-cambio-purple\": \"#6840a8\",\n \"color-cambio-lilac\": \"#b59ef0\",\n \"color-cambio-thistle\": \"#d69ca4\",\n \"color-cambio-pink\": \"#ffccea\",\n \"color-cambio-navy\": \"#191142\",\n \"color-cambio-teal\": \"#44a6cf\",\n \"color-cambio-slate\": \"#7c9fc6\",\n \"color-cambio-sky\": \"#b1e8fc\",\n \"color-cambio-yellow-700\": \"#ffe733\",\n \"color-cambio-transparent-full\": \"rgba(0, 0, 0, 0)\",\n \"elevation-400\": \"0px 16px 32px 0px #00000040\"\n}\n"],"mappings":"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","names":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var _LTM57QMYcjs = require('./LTM57QMY.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _TIW4V757cjs = require('./TIW4V757.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
|
|
@@ -92,10 +92,10 @@ var RadioButton = ({
|
|
|
92
92
|
}
|
|
93
93
|
),
|
|
94
94
|
label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
95
|
-
|
|
95
|
+
_TIW4V757cjs.Typography_default,
|
|
96
96
|
{
|
|
97
97
|
size: size === "md" ? 200 : 100,
|
|
98
|
-
color: error ? "destructive-primary" : "
|
|
98
|
+
color: error ? "destructive-primary" : "gray900",
|
|
99
99
|
children: label
|
|
100
100
|
}
|
|
101
101
|
)
|
|
@@ -108,4 +108,4 @@ var RadioButton_default = RadioButton;
|
|
|
108
108
|
|
|
109
109
|
|
|
110
110
|
exports.RadioButton_default = RadioButton_default;
|
|
111
|
-
//# sourceMappingURL=
|
|
111
|
+
//# sourceMappingURL=SJG2X2VN.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACD+E,IAAO,6BAAQ,EAAC,sBAAqB,+BAA8B,YAAW,qBAAoB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,UAAS,oBAAmB,UAAS,oBAAmB,sBAAqB,gCAA+B,cAAa,wBAAuB,cAAa,wBAAuB,cAAa,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,iBAAgB,2BAA0B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,oBAAmB,8BAA6B,eAAc,wBAAuB;;;AD4FrvB,SAYI,KAZJ;AAhFJ,IAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,8BAA8B;AAAA,EAC9B,UAAU,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAsDoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,QAAM,eAAe,WAAW,2BAAO,YAAY,2BAAO,IAAI,GAAG;AAAA,IAC/D,CAAC,2BAAO,gBAAgB,GAAG;AAAA,IAC3B,CAAC,2BAAO,WAAW,GAAG,CAAC;AAAA,IACvB,CAAC,qBAAY,yBAAyB,GACnC,aAAa,kBAAmB;AAAA,EACrC,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,2BAAO;AAAA,QACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,2BAAO,QAAQ,GAAG;AAAA,UACnB,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,UAC1B,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,WAAW,cAAc;AAAA,cAClC,CAAC,2BAAO,eAAe,GAAG,SAAS;AAAA,cACnC,CAAC,2BAAO,eAAe,GAAG,SAAS;AAAA,YACrC,CAAC;AAAA;AAAA,QACH,IAEA,oBAAC,SAAI,WAAW,WAAW,cAAc,2BAAO,aAAa,GAAG;AAAA,QAElE;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,cACnD;AAAA,gBACE,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,gBAC9B,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,cAChC;AAAA,YACF;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,OAAO,MAAM;AAAA,YAC5B,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n checked = false,\n \"data-testid\": dataTestId,\n dangerouslyForceFocusStyles = false,\n disabled: disabledProp = false,\n error = false,\n id,\n label,\n name,\n onChange,\n size = \"md\",\n value,\n}: {\n /**\n * Whether or not the radio button is checked\n *\n * @defaultValue false\n */\n checked?: boolean;\n /**\n * Test id for the radio button\n */\n \"data-testid\"?: string;\n /**\n * Whether or not the radio button is disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether to show error color schema\n *\n * @defaultValue false\n */\n error?: boolean;\n /**\n * Id for the the radio button\n */\n id?: string;\n /**\n * Value to show end user\n */\n label: string;\n /**\n * The name of the grouping the radio buttons are in\n */\n name: string;\n /**\n * The callback to be called when the radio button is clicked\n */\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n /**\n * Size of the components\n *\n * * `sm`: 16px\n * * `md`: 24px\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\";\n /**\n * Value of the selected radio option\n */\n value: string | number;\n /** forces focus ring styling */\n dangerouslyForceFocusStyles?: boolean;\n}): ReactElement => {\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const [isFocused, setIsFocused] = useState(false);\n const { isFocusVisible } = useFocusVisible();\n\n const sharedStyles = classnames(styles.background, styles[size], {\n [styles.errorBorderColor]: error,\n [styles.borderColor]: !error,\n [focusStyles.accessibilityOutlineFocus]:\n (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n });\n\n return (\n <label\n className={classnames(\n styles.radioBaseContainer,\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n {\n [styles.disabled]: disabled,\n [styles.smBase]: size === \"sm\",\n [styles.mdBase]: size === \"md\",\n },\n )}\n >\n {checked ? (\n <div\n className={classnames(sharedStyles, {\n [styles.mdCheckedBorder]: size === \"md\",\n [styles.smCheckedBorder]: size === \"sm\",\n })}\n />\n ) : (\n <div className={classnames(sharedStyles, styles.neutralBorder)} />\n )}\n <input\n data-testid={dataTestId}\n type=\"radio\"\n id={id}\n name={name}\n className={classnames(\n styles.radioStyleOverride,\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n {\n [styles.smOverride]: size === \"sm\",\n [styles.mdOverride]: size === \"md\",\n },\n )}\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n value={value}\n onFocus={() => {\n setIsFocused(true);\n }}\n onBlur={() => {\n setIsFocused(false);\n }}\n />\n {label && (\n <Typography\n size={size === \"md\" ? 200 : 100}\n color={error ? \"destructive-primary\" : \"
|
|
1
|
+
{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACD+E,IAAO,6BAAQ,EAAC,sBAAqB,+BAA8B,YAAW,qBAAoB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,UAAS,oBAAmB,UAAS,oBAAmB,sBAAqB,gCAA+B,cAAa,wBAAuB,cAAa,wBAAuB,cAAa,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,iBAAgB,2BAA0B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,oBAAmB,8BAA6B,eAAc,wBAAuB;;;AD4FrvB,SAYI,KAZJ;AAhFJ,IAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,8BAA8B;AAAA,EAC9B,UAAU,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAsDoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,QAAM,eAAe,WAAW,2BAAO,YAAY,2BAAO,IAAI,GAAG;AAAA,IAC/D,CAAC,2BAAO,gBAAgB,GAAG;AAAA,IAC3B,CAAC,2BAAO,WAAW,GAAG,CAAC;AAAA,IACvB,CAAC,qBAAY,yBAAyB,GACnC,aAAa,kBAAmB;AAAA,EACrC,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,2BAAO;AAAA,QACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,2BAAO,QAAQ,GAAG;AAAA,UACnB,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,UAC1B,CAAC,2BAAO,MAAM,GAAG,SAAS;AAAA,QAC5B;AAAA,MACF;AAAA,MAEC;AAAA,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,WAAW,cAAc;AAAA,cAClC,CAAC,2BAAO,eAAe,GAAG,SAAS;AAAA,cACnC,CAAC,2BAAO,eAAe,GAAG,SAAS;AAAA,YACrC,CAAC;AAAA;AAAA,QACH,IAEA,oBAAC,SAAI,WAAW,WAAW,cAAc,2BAAO,aAAa,GAAG;AAAA,QAElE;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,cACnD;AAAA,gBACE,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,gBAC9B,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,cAChC;AAAA,YACF;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,OAAO,MAAM;AAAA,YAC5B,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n checked = false,\n \"data-testid\": dataTestId,\n dangerouslyForceFocusStyles = false,\n disabled: disabledProp = false,\n error = false,\n id,\n label,\n name,\n onChange,\n size = \"md\",\n value,\n}: {\n /**\n * Whether or not the radio button is checked\n *\n * @defaultValue false\n */\n checked?: boolean;\n /**\n * Test id for the radio button\n */\n \"data-testid\"?: string;\n /**\n * Whether or not the radio button is disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether to show error color schema\n *\n * @defaultValue false\n */\n error?: boolean;\n /**\n * Id for the the radio button\n */\n id?: string;\n /**\n * Value to show end user\n */\n label: string;\n /**\n * The name of the grouping the radio buttons are in\n */\n name: string;\n /**\n * The callback to be called when the radio button is clicked\n */\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n /**\n * Size of the components\n *\n * * `sm`: 16px\n * * `md`: 24px\n *\n * @defaultValue \"md\"\n */\n size?: \"sm\" | \"md\";\n /**\n * Value of the selected radio option\n */\n value: string | number;\n /** forces focus ring styling */\n dangerouslyForceFocusStyles?: boolean;\n}): ReactElement => {\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const [isFocused, setIsFocused] = useState(false);\n const { isFocusVisible } = useFocusVisible();\n\n const sharedStyles = classnames(styles.background, styles[size], {\n [styles.errorBorderColor]: error,\n [styles.borderColor]: !error,\n [focusStyles.accessibilityOutlineFocus]:\n (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n });\n\n return (\n <label\n className={classnames(\n styles.radioBaseContainer,\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n {\n [styles.disabled]: disabled,\n [styles.smBase]: size === \"sm\",\n [styles.mdBase]: size === \"md\",\n },\n )}\n >\n {checked ? (\n <div\n className={classnames(sharedStyles, {\n [styles.mdCheckedBorder]: size === \"md\",\n [styles.smCheckedBorder]: size === \"sm\",\n })}\n />\n ) : (\n <div className={classnames(sharedStyles, styles.neutralBorder)} />\n )}\n <input\n data-testid={dataTestId}\n type=\"radio\"\n id={id}\n name={name}\n className={classnames(\n styles.radioStyleOverride,\n styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n {\n [styles.smOverride]: size === \"sm\",\n [styles.mdOverride]: size === \"md\",\n },\n )}\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n value={value}\n onFocus={() => {\n setIsFocused(true);\n }}\n onBlur={() => {\n setIsFocused(false);\n }}\n />\n {label && (\n <Typography\n size={size === \"md\" ? 200 : 100}\n color={error ? \"destructive-primary\" : \"gray900\"}\n >\n {label}\n </Typography>\n )}\n </label>\n );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_6h2zg_1\",\"disabled\":\"_disabled_6h2zg_9\",\"cursorDisabled\":\"_cursorDisabled_6h2zg_13\",\"cursorEnabled\":\"_cursorEnabled_6h2zg_17\",\"smBase\":\"_smBase_6h2zg_21\",\"mdBase\":\"_mdBase_6h2zg_25\",\"radioStyleOverride\":\"_radioStyleOverride_6h2zg_29\",\"smOverride\":\"_smOverride_6h2zg_34\",\"mdOverride\":\"_mdOverride_6h2zg_39\",\"background\":\"_background_6h2zg_44\",\"sm\":\"_sm_6h2zg_21\",\"md\":\"_md_6h2zg_25\",\"neutralBorder\":\"_neutralBorder_6h2zg_61\",\"smCheckedBorder\":\"_smCheckedBorder_6h2zg_65\",\"mdCheckedBorder\":\"_mdCheckedBorder_6h2zg_69\",\"errorBorderColor\":\"_errorBorderColor_6h2zg_73\",\"borderColor\":\"_borderColor_6h2zg_77\"}"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
ModalDialog_default
|
|
3
|
-
} from "./
|
|
3
|
+
} from "./MQUMPR4A.js";
|
|
4
4
|
import {
|
|
5
5
|
Dialog_default
|
|
6
6
|
} from "./ZEA5JDEB.js";
|
|
@@ -140,4 +140,4 @@ export {
|
|
|
140
140
|
AriaPopover,
|
|
141
141
|
Popover_default
|
|
142
142
|
};
|
|
143
|
-
//# sourceMappingURL=
|
|
143
|
+
//# sourceMappingURL=T2WKEFB5.js.map
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
2
|
+
|
|
3
|
+
var _TF76F532cjs = require('./TF76F532.cjs');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
var _WKDXUPAMcjs = require('./WKDXUPAM.cjs');
|
|
7
|
+
|
|
8
|
+
// src/Typography/Typography.tsx
|
|
9
|
+
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
10
|
+
var _react = require('react');
|
|
11
|
+
|
|
12
|
+
// css-module:./Typography.module.css#css-module
|
|
13
|
+
var Typography_module_default = { "typography": "_typography_15wcy_1", "sansSerif": "_sansSerif_15wcy_19", "serif": "_serif_15wcy_25", "size100": "_size100_15wcy_31", "size200": "_size200_15wcy_35", "size300": "_size300_15wcy_39", "size500": "_size500_15wcy_43", "size600": "_size600_15wcy_47", "size700": "_size700_15wcy_51", "size800": "_size800_15wcy_55", "size100Cambio": "_size100Cambio_15wcy_60", "size200Cambio": "_size200Cambio_15wcy_64", "size300Cambio": "_size300Cambio_15wcy_68", "size400Cambio": "_size400Cambio_15wcy_72", "size500Cambio": "_size500Cambio_15wcy_76", "size600Cambio": "_size600Cambio_15wcy_80", "size700Cambio": "_size700Cambio_15wcy_84", "size800Cambio": "_size800Cambio_15wcy_88", "size900Cambio": "_size900Cambio_15wcy_92", "size1000Cambio": "_size1000Cambio_15wcy_133", "size1100Cambio": "_size1100Cambio_15wcy_137", "center": "_center_15wcy_143", "forceLeft": "_forceLeft_15wcy_147", "forceRight": "_forceRight_15wcy_151", "start": "_start_15wcy_155", "end": "_end_15wcy_159", "bold": "_bold_15wcy_164", "regular": "_regular_15wcy_168", "interactive": "_interactive_15wcy_172", "semiBold": "_semiBold_15wcy_176", "heavy": "_heavy_15wcy_180", "regularCambio": "_regularCambio_15wcy_184", "mediumCambio": "_mediumCambio_15wcy_188", "semiBoldCambio": "_semiBoldCambio_15wcy_192", "underline": "_underline_15wcy_196", "inline": "_inline_15wcy_200", "uppercase": "_uppercase_15wcy_204", "lineClamp": "_lineClamp_15wcy_208" };
|
|
14
|
+
|
|
15
|
+
// src/Typography/Typography.tsx
|
|
16
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
17
|
+
function classicTextColor(color) {
|
|
18
|
+
switch (color) {
|
|
19
|
+
case "gray700":
|
|
20
|
+
return _TF76F532cjs.colors_module_default.gray700Color;
|
|
21
|
+
case "white":
|
|
22
|
+
return _TF76F532cjs.colors_module_default.whiteColor;
|
|
23
|
+
case "inherit":
|
|
24
|
+
return _TF76F532cjs.colors_module_default.inheritColor;
|
|
25
|
+
case "primary":
|
|
26
|
+
return _TF76F532cjs.colors_module_default.primary700Color;
|
|
27
|
+
case "destructive-primary":
|
|
28
|
+
case "destructive-darkBackground":
|
|
29
|
+
return _TF76F532cjs.colors_module_default.destructive700Color;
|
|
30
|
+
case "success":
|
|
31
|
+
return _TF76F532cjs.colors_module_default.success700Color;
|
|
32
|
+
default:
|
|
33
|
+
return _TF76F532cjs.colors_module_default.gray900Color;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
function cambioTextColor(color) {
|
|
37
|
+
switch (color) {
|
|
38
|
+
case "gray700":
|
|
39
|
+
return _TF76F532cjs.colors_module_default.cambioGray800Color;
|
|
40
|
+
case "white":
|
|
41
|
+
return _TF76F532cjs.colors_module_default.cambioWhiteColor;
|
|
42
|
+
case "inherit":
|
|
43
|
+
return _TF76F532cjs.colors_module_default.inheritColor;
|
|
44
|
+
case "destructive-primary":
|
|
45
|
+
return _TF76F532cjs.colors_module_default.cambioDestructive900Color;
|
|
46
|
+
case "destructive-darkBackground":
|
|
47
|
+
return _TF76F532cjs.colors_module_default.cambioDestructive100Color;
|
|
48
|
+
case "success":
|
|
49
|
+
return _TF76F532cjs.colors_module_default.cambioSuccess900Color;
|
|
50
|
+
case "success-darkBackground":
|
|
51
|
+
return _TF76F532cjs.colors_module_default.cambioSuccess100Color;
|
|
52
|
+
default:
|
|
53
|
+
return _TF76F532cjs.colors_module_default.cambioBlackColor;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
function classicWeight(weight) {
|
|
57
|
+
switch (weight) {
|
|
58
|
+
case "medium":
|
|
59
|
+
return "regular";
|
|
60
|
+
default:
|
|
61
|
+
return weight;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
function cambioWeight(weight) {
|
|
65
|
+
switch (weight) {
|
|
66
|
+
case "interactive":
|
|
67
|
+
return "medium";
|
|
68
|
+
case "bold":
|
|
69
|
+
case "heavy":
|
|
70
|
+
return "regular";
|
|
71
|
+
default:
|
|
72
|
+
return weight;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
var Typography = _react.forwardRef.call(void 0, function Typography2({
|
|
76
|
+
align = "start",
|
|
77
|
+
as = "div",
|
|
78
|
+
children,
|
|
79
|
+
color = "gray900",
|
|
80
|
+
"data-testid": dataTestId,
|
|
81
|
+
fontStyle = "sans-serif",
|
|
82
|
+
id,
|
|
83
|
+
inline = false,
|
|
84
|
+
lineClamp = void 0,
|
|
85
|
+
size = 200,
|
|
86
|
+
tooltip,
|
|
87
|
+
transform = "none",
|
|
88
|
+
underline = false,
|
|
89
|
+
weight = "regular"
|
|
90
|
+
}, ref) {
|
|
91
|
+
const Tag = as;
|
|
92
|
+
const { themeName } = _WKDXUPAMcjs.useTheme.call(void 0, );
|
|
93
|
+
const weightStyles = themeName === "classic" ? Typography_module_default[classicWeight(weight)] : Typography_module_default[`${cambioWeight(weight)}Cambio`];
|
|
94
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
95
|
+
Tag,
|
|
96
|
+
{
|
|
97
|
+
id,
|
|
98
|
+
className: _classnames2.default.call(void 0,
|
|
99
|
+
Typography_module_default.typography,
|
|
100
|
+
Typography_module_default[align],
|
|
101
|
+
weightStyles,
|
|
102
|
+
themeName === "cambio" && fontStyle === "serif" ? Typography_module_default.serif : Typography_module_default.sansSerif,
|
|
103
|
+
themeName === "cambio" ? cambioTextColor(color) : classicTextColor(color),
|
|
104
|
+
inline && Typography_module_default.inline,
|
|
105
|
+
themeName === "classic" ? Typography_module_default[`size${// TypeScript doesn't narrow the type of size with `.includes` so we have to do it manually
|
|
106
|
+
// https://github.com/microsoft/TypeScript/issues/36275#issuecomment-643376433
|
|
107
|
+
// One we ship Cambio, we can remove these checks
|
|
108
|
+
size === 100 || size === 200 || size === 300 || size === 500 || size === 600 || size === 700 || size === 800 ? size : 200}`] : Typography_module_default[`size${size}Cambio`],
|
|
109
|
+
transform === "uppercase" && Typography_module_default.uppercase,
|
|
110
|
+
underline && Typography_module_default.underline,
|
|
111
|
+
lineClamp != null && Typography_module_default.lineClamp
|
|
112
|
+
),
|
|
113
|
+
"data-testid": dataTestId,
|
|
114
|
+
style: {
|
|
115
|
+
WebkitLineClamp: lineClamp
|
|
116
|
+
},
|
|
117
|
+
title: tooltip,
|
|
118
|
+
ref,
|
|
119
|
+
children
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
});
|
|
123
|
+
var Typography_default = Typography;
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
exports.Typography_default = Typography_default;
|
|
128
|
+
//# sourceMappingURL=TIW4V757.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"names":["Typography"],"mappings":"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","sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction classicTextColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.gray700Color;\n case \"white\":\n return colorStyles.whiteColor;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"primary\":\n return colorStyles.primary700Color;\n case \"destructive-primary\":\n case \"destructive-darkBackground\":\n return colorStyles.destructive700Color;\n case \"success\":\n return colorStyles.success700Color;\n default:\n return colorStyles.gray900Color;\n }\n}\n\nfunction cambioTextColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.cambioGray800Color;\n case \"white\":\n return colorStyles.cambioWhiteColor;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"destructive-primary\":\n return colorStyles.cambioDestructive900Color;\n case \"destructive-darkBackground\":\n return colorStyles.cambioDestructive100Color;\n case \"success\":\n return colorStyles.cambioSuccess900Color;\n case \"success-darkBackground\":\n return colorStyles.cambioSuccess100Color;\n // primary / gray900\n default:\n return colorStyles.cambioBlackColor;\n }\n}\n\nfunction classicWeight(\n weight: \"regular\" | \"interactive\" | \"medium\" | \"semiBold\" | \"bold\" | \"heavy\",\n): \"regular\" | \"interactive\" | \"semiBold\" | \"bold\" | \"heavy\" {\n switch (weight) {\n case \"medium\":\n return \"regular\";\n default:\n return weight;\n }\n}\n\nfunction cambioWeight(\n weight: \"regular\" | \"interactive\" | \"medium\" | \"semiBold\" | \"bold\" | \"heavy\",\n): \"regular\" | \"medium\" | \"semiBold\" {\n switch (weight) {\n case \"interactive\":\n return \"medium\";\n case \"bold\":\n case \"heavy\":\n return \"regular\";\n default:\n return weight;\n }\n}\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = forwardRef<\n HTMLDivElement,\n {\n /**\n * Aligns the text to the left, right, or center of the container.\n * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n *\n * @defaultValue \"start\"\n */\n align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n /**\n * DOM element to render as.\n *\n * @defaultValue \"div\"\n */\n as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n /**\n * The text to be rendered\n */\n children?: ReactNode;\n /**\n * The color of the text.\n *\n * Cambio only: `success-darkBackground` / `destructive-darkBackground`\n *\n * @defaultValue \"gray900\"\n */\n color?:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"inherit\";\n /**\n * Test id for the text\n */\n \"data-testid\"?: string;\n /**\n * Style of the font\n *\n * Classic only supports `sans-serif`\n *\n * @defaultValue \"sans-serif\"\n */\n fontStyle?: \"serif\" | \"sans-serif\";\n /**\n * The id for the element\n */\n id?: string;\n /**\n * Whether the text should flow inline with other elements.\n *\n * @defaultValue false\n */\n inline?: boolean;\n /**\n * The number of lines we should truncate the text at\n */\n lineClamp?: number | undefined;\n /**\n * Size of the text.\n *\n * Classic:\n * * `100`: 12px\n * * `200`: 14px\n * * `300`: 16px\n * * `500`: 20px\n * * `600`: 28px\n * * `700`: 40px\n * * `800`: 64px\n *\n * Cambio Mobile:\n * * `100`: 14px\n * * `200`: 16px\n * * `300`: 18px\n * * `400`: 20px\n * * `500`: 23px\n * * `600`: 26px\n * * `700`: 29px\n * * `800`: 33px\n * * `900`: 37px\n * * `1000`: 41px\n * * `1100`: 46px\n *\n * Cambio Desktop (viewport width > 480px):\n * * `100`: 13px\n * * `200`: 16px\n * * `300`: 20px\n * * `400`: 25px\n * * `500`: 31px\n * * `600`: 39px\n * * `700`: 49px\n * * `800`: 61px\n * * `900`: 76px\n * * `1000`: 95px\n * * `1100`: 119px\n *\n * @defaultValue 200\n */\n size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100;\n /**\n * The tooltip to be displayed when the user hovers the text\n */\n tooltip?: string;\n /**\n * Whether the text should be transformed to uppercase.\n *\n * @defaultValue \"none\"\n */\n transform?: \"none\" | \"uppercase\";\n /**\n * Whether the text has an underline.\n *\n * @defaultValue false\n */\n underline?: boolean;\n /**\n * Indicates the boldness of the text.\n *\n * Classic:\n * * `regular`: 400\n * * `interactive`: 500 (Classic only)\n * * `semiBold`: 600\n * * `bold`: 700 (Classic only)\n * * `heavy`: 860 (Classic only)\n *\n * Cambio:\n * * `regular`: 400\n * * `medium`: 510\n * * `semiBold`: 590\n *\n * @defaultValue \"regular\"\n */\n weight?:\n | \"regular\"\n | \"interactive\"\n | \"medium\"\n | \"semiBold\"\n | \"bold\"\n | \"heavy\";\n }\n>(function Typography(\n {\n align = \"start\",\n as = \"div\",\n children,\n color = \"gray900\",\n \"data-testid\": dataTestId,\n fontStyle = \"sans-serif\",\n id,\n inline = false,\n lineClamp = undefined,\n size = 200,\n tooltip,\n transform = \"none\",\n underline = false,\n weight = \"regular\",\n },\n ref,\n): ReactElement {\n const Tag = as;\n\n const { themeName } = useTheme();\n\n const weightStyles =\n themeName === \"classic\"\n ? styles[classicWeight(weight)]\n : styles[`${cambioWeight(weight)}Cambio`];\n\n return (\n <Tag\n id={id}\n className={classNames(\n styles.typography,\n styles[align],\n weightStyles,\n themeName === \"cambio\" && fontStyle === \"serif\"\n ? styles.serif\n : styles.sansSerif,\n themeName === \"cambio\"\n ? cambioTextColor(color)\n : classicTextColor(color),\n inline && styles.inline,\n themeName === \"classic\"\n ? styles[\n `size${\n // TypeScript doesn't narrow the type of size with `.includes` so we have to do it manually\n // https://github.com/microsoft/TypeScript/issues/36275#issuecomment-643376433\n // One we ship Cambio, we can remove these checks\n size === 100 ||\n size === 200 ||\n size === 300 ||\n size === 500 ||\n size === 600 ||\n size === 700 ||\n size === 800\n ? size\n : 200\n }`\n ]\n : styles[`size${size}Cambio`],\n transform === \"uppercase\" && styles.uppercase,\n underline && styles.underline,\n lineClamp != null && styles.lineClamp,\n )}\n data-testid={dataTestId}\n style={{\n WebkitLineClamp: lineClamp,\n }}\n title={tooltip}\n ref={ref}\n >\n {children}\n </Tag>\n );\n});\n\nexport default Typography;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_15wcy_1\",\"sansSerif\":\"_sansSerif_15wcy_19\",\"serif\":\"_serif_15wcy_25\",\"size100\":\"_size100_15wcy_31\",\"size200\":\"_size200_15wcy_35\",\"size300\":\"_size300_15wcy_39\",\"size500\":\"_size500_15wcy_43\",\"size600\":\"_size600_15wcy_47\",\"size700\":\"_size700_15wcy_51\",\"size800\":\"_size800_15wcy_55\",\"size100Cambio\":\"_size100Cambio_15wcy_60\",\"size200Cambio\":\"_size200Cambio_15wcy_64\",\"size300Cambio\":\"_size300Cambio_15wcy_68\",\"size400Cambio\":\"_size400Cambio_15wcy_72\",\"size500Cambio\":\"_size500Cambio_15wcy_76\",\"size600Cambio\":\"_size600Cambio_15wcy_80\",\"size700Cambio\":\"_size700Cambio_15wcy_84\",\"size800Cambio\":\"_size800Cambio_15wcy_88\",\"size900Cambio\":\"_size900Cambio_15wcy_92\",\"size1000Cambio\":\"_size1000Cambio_15wcy_133\",\"size1100Cambio\":\"_size1100Cambio_15wcy_137\",\"center\":\"_center_15wcy_143\",\"forceLeft\":\"_forceLeft_15wcy_147\",\"forceRight\":\"_forceRight_15wcy_151\",\"start\":\"_start_15wcy_155\",\"end\":\"_end_15wcy_159\",\"bold\":\"_bold_15wcy_164\",\"regular\":\"_regular_15wcy_168\",\"interactive\":\"_interactive_15wcy_172\",\"semiBold\":\"_semiBold_15wcy_176\",\"heavy\":\"_heavy_15wcy_180\",\"regularCambio\":\"_regularCambio_15wcy_184\",\"mediumCambio\":\"_mediumCambio_15wcy_188\",\"semiBoldCambio\":\"_semiBoldCambio_15wcy_192\",\"underline\":\"_underline_15wcy_196\",\"inline\":\"_inline_15wcy_200\",\"uppercase\":\"_uppercase_15wcy_204\",\"lineClamp\":\"_lineClamp_15wcy_208\"}"]}
|
|
@@ -19,15 +19,15 @@ import {
|
|
|
19
19
|
cambioBackgroundColor,
|
|
20
20
|
classicBackgroundColor
|
|
21
21
|
} from "./YOMN7RCA.js";
|
|
22
|
-
import {
|
|
23
|
-
useTheme
|
|
24
|
-
} from "./HVGUWZ5I.js";
|
|
25
22
|
import {
|
|
26
23
|
Box_default
|
|
27
24
|
} from "./I5W7ECUO.js";
|
|
28
25
|
import {
|
|
29
26
|
Typography_default
|
|
30
|
-
} from "./
|
|
27
|
+
} from "./32FNU7ZY.js";
|
|
28
|
+
import {
|
|
29
|
+
useTheme
|
|
30
|
+
} from "./RXNTJFP4.js";
|
|
31
31
|
import {
|
|
32
32
|
useIsHydrated
|
|
33
33
|
} from "./YJ7YDIGB.js";
|
|
@@ -132,4 +132,4 @@ var Button_default = Button;
|
|
|
132
132
|
export {
|
|
133
133
|
Button_default
|
|
134
134
|
};
|
|
135
|
-
//# sourceMappingURL=
|
|
135
|
+
//# sourceMappingURL=TMH27D62.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _K2SCOMJXcjs = require('./K2SCOMJX.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _VA23P3ZIcjs = require('./VA23P3ZI.cjs');
|
|
@@ -99,7 +99,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
|
|
|
99
99
|
} = props;
|
|
100
100
|
const modal = !children || modalProp;
|
|
101
101
|
const modalNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
102
|
-
|
|
102
|
+
_K2SCOMJXcjs.ModalDialog_default,
|
|
103
103
|
{
|
|
104
104
|
accessibilityLabel,
|
|
105
105
|
accessibilityCloseLabel,
|
|
@@ -140,4 +140,4 @@ var Popover_default = Popover;
|
|
|
140
140
|
|
|
141
141
|
|
|
142
142
|
exports.AriaPopover = AriaPopover; exports.Popover_default = Popover_default;
|
|
143
|
-
//# sourceMappingURL=
|
|
143
|
+
//# sourceMappingURL=TVGN7SBI.cjs.map
|
|
@@ -21,13 +21,13 @@ var _VS4SS6B3cjs = require('./VS4SS6B3.cjs');
|
|
|
21
21
|
var _MF7Q6ZSWcjs = require('./MF7Q6ZSW.cjs');
|
|
22
22
|
|
|
23
23
|
|
|
24
|
-
var
|
|
24
|
+
var _SZCVEBN2cjs = require('./SZCVEBN2.cjs');
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
var
|
|
27
|
+
var _TIW4V757cjs = require('./TIW4V757.cjs');
|
|
28
28
|
|
|
29
29
|
|
|
30
|
-
var
|
|
30
|
+
var _WKDXUPAMcjs = require('./WKDXUPAM.cjs');
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
var _FZRIE7EXcjs = require('./FZRIE7EX.cjs');
|
|
@@ -59,7 +59,7 @@ var Button = _react.forwardRef.call(void 0,
|
|
|
59
59
|
type = "button"
|
|
60
60
|
}, ref) => {
|
|
61
61
|
const isHydrated = _FZRIE7EXcjs.useIsHydrated.call(void 0, );
|
|
62
|
-
const { themeName } =
|
|
62
|
+
const { themeName } = _WKDXUPAMcjs.useTheme.call(void 0, );
|
|
63
63
|
const foregroundColorClass = themeName === "classic" ? _VS4SS6B3cjs.classicForegroundColor.call(void 0, _PSWX5DBCcjs.classicColor.call(void 0, color)) : _VS4SS6B3cjs.cambioForegroundColor.call(void 0, _PSWX5DBCcjs.cambioColor.call(void 0, color));
|
|
64
64
|
const backgroundColorClass = themeName === "classic" ? _MF7Q6ZSWcjs.classicBackgroundColor.call(void 0, _PSWX5DBCcjs.classicColor.call(void 0, color)) : _MF7Q6ZSWcjs.cambioBackgroundColor.call(void 0, _PSWX5DBCcjs.cambioColor.call(void 0, color));
|
|
65
65
|
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
@@ -87,7 +87,7 @@ var Button = _react.forwardRef.call(void 0,
|
|
|
87
87
|
children: [
|
|
88
88
|
!loading && StartIcon && themeName === "classic" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StartIcon, { className: _classnames2.default.call(void 0, Button_module_default.icon, _A72TS5OXcjs.iconSize_default[size]) }),
|
|
89
89
|
(loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SZCVEBN2cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
90
|
-
|
|
90
|
+
_TIW4V757cjs.Typography_default,
|
|
91
91
|
{
|
|
92
92
|
size: themeName === "classic" ? _7AYSDTC6cjs.textVariant_default[size] : _7AYSDTC6cjs.textVariant_default[size],
|
|
93
93
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
@@ -132,4 +132,4 @@ var Button_default = Button;
|
|
|
132
132
|
|
|
133
133
|
|
|
134
134
|
exports.Button_default = Button_default;
|
|
135
|
-
//# sourceMappingURL=
|
|
135
|
+
//# sourceMappingURL=UXWIAEKV.cjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _SJG2X2VNcjs = require('./SJG2X2VN.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _GYI2PBXYcjs = require('./GYI2PBXY.cjs');
|
|
@@ -18,7 +18,7 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
|
|
|
18
18
|
function RichSelectRadioButton(props, ref) {
|
|
19
19
|
const _a = props, { size, name } = _a, otherProps = _I64JGYX7cjs.__objRest.call(void 0, _a, ["size", "name"]);
|
|
20
20
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GYI2PBXYcjs.RichSelectItem_default, _I64JGYX7cjs.__spreadProps.call(void 0, _I64JGYX7cjs.__spreadValues.call(void 0, {}, otherProps), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
21
|
-
|
|
21
|
+
_SJG2X2VNcjs.RadioButton_default,
|
|
22
22
|
{
|
|
23
23
|
checked: isSelected,
|
|
24
24
|
disabled: isDisabled,
|
|
@@ -36,4 +36,4 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
exports.RichSelectRadioButton_default = RichSelectRadioButton_default;
|
|
39
|
-
//# sourceMappingURL=
|
|
39
|
+
//# sourceMappingURL=WDR3YIMA.cjs.map
|
|
@@ -181,8 +181,11 @@ function stylesForTheme(themeName) {
|
|
|
181
181
|
]
|
|
182
182
|
];
|
|
183
183
|
}
|
|
184
|
+
if (themeName === "cambio" && key.includes("elevation")) {
|
|
185
|
+
return [null, null];
|
|
186
|
+
}
|
|
184
187
|
return [key, value];
|
|
185
|
-
}).map(([key, value]) => `--${key}: ${value};`).join("\n")}
|
|
188
|
+
}).map(([key, value]) => key && value ? `--${key}: ${value};` : null).filter(Boolean).join("\n")}
|
|
186
189
|
}
|
|
187
190
|
`;
|
|
188
191
|
}
|
|
@@ -211,4 +214,4 @@ function useTheme() {
|
|
|
211
214
|
|
|
212
215
|
|
|
213
216
|
exports.ThemeProvider = ThemeProvider; exports.useTheme = useTheme;
|
|
214
|
-
//# sourceMappingURL=
|
|
217
|
+
//# sourceMappingURL=WKDXUPAM.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/ThemeProvider/ThemeProvider.tsx","../../../syntax-design-tokens/dist/json/variables.json"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport variables from \"@cambly/syntax-design-tokens/dist/json/variables.json\";\n\ntype ThemeName = \"classic\" | \"cambio\";\n\ntype Theme = {\n themeName: ThemeName;\n};\n\nconst ThemeContext = React.createContext<Theme>({\n themeName: \"classic\",\n});\nThemeContext.displayName = \"ThemeContext\";\n\nconst classicToCambioKeyLookup = {\n \"color-base-black\": \"color-cambio-black\",\n \"color-base-destructive-100\": \"color-cambio-destructive-100\",\n \"color-base-destructive-200\": undefined, // Deprecated - to be deleted\n \"color-base-destructive-300\": \"color-cambio-destructive-300\",\n \"color-base-destructive-700\": \"color-cambio-destructive-700\",\n \"color-base-destructive-800\": undefined, // Deprecated - to be deleted\n \"color-base-destructive-900\": \"color-cambio-destructive-900\",\n \"color-base-gray-10\": \"color-cambio-gray-370\",\n \"color-base-gray-30\": \"color-cambio-gray-370\",\n \"color-base-gray-60\": \"color-cambio-gray-870\",\n \"color-base-gray-80\": \"color-cambio-gray-870\",\n \"color-base-gray-100\": \"color-cambio-gray-100\",\n \"color-base-gray-200\": \"color-cambio-gray-200\",\n \"color-base-gray-300\": \"color-cambio-gray-300\",\n \"color-base-gray-700\": \"color-cambio-gray-700\",\n \"color-base-gray-800\": \"color-cambio-gray-800\",\n \"color-base-gray-900\": \"color-cambio-gray-900\",\n \"color-base-orange-100\": undefined, // Deprecated - to be deleted\n \"color-base-orange-200\": undefined, // Deprecated - to be deleted\n \"color-base-orange-300\": undefined, // Deprecated - to be deleted\n \"color-base-orange-700\": \"color-cambio-orange\",\n \"color-base-orange-800\": undefined, // Deprecated - to be deleted\n \"color-base-orange-900\": undefined, // Deprecated - to be deleted\n \"color-base-primary-100\": \"color-cambio-gray-100\",\n \"color-base-primary-200\": \"color-cambio-gray-200\",\n \"color-base-primary-300\": \"color-cambio-gray-300\",\n \"color-base-primary-700\": \"color-cambio-gray-700\",\n \"color-base-primary-800\": \"color-cambio-gray-800\",\n \"color-base-primary-900\": \"color-cambio-gray-900\",\n \"color-base-success-100\": \"color-cambio-success-100\",\n \"color-base-success-200\": undefined, // Deprecated - to be deleted\n \"color-base-success-300\": \"color-cambio-success-300\",\n \"color-base-success-700\": \"color-cambio-success-700\",\n \"color-base-success-800\": undefined, // Deprecated - to be deleted\n \"color-base-success-900\": \"color-cambio-success-900\",\n \"color-base-purple-100\": undefined, // Deprecated - to be deleted\n \"color-base-purple-200\": undefined, // Deprecated - to be deleted\n \"color-base-purple-300\": undefined, // Deprecated - to be deleted\n \"color-base-purple-700\": \"color-cambio-purple\",\n \"color-base-purple-800\": undefined, // Deprecated - to be deleted\n \"color-base-purple-900\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-100\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-200\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-300\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-700\": \"color-cambio-yellow-700\",\n \"color-base-yellow-800\": undefined, // Deprecated - to be deleted\n \"color-base-yellow-900\": undefined, // Deprecated - to be deleted\n \"color-base-white\": \"color-cambio-white\",\n};\n\nfunction stylesForTheme(themeName: ThemeName) {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const tokenVariables: Record<string, string> = variables;\n return `\n :root {\n ${Object.entries(tokenVariables)\n .filter(([key]) => {\n return themeName === \"classic\" ? !key.includes(\"cambio\") : true;\n })\n .map(([key, value]) => {\n // Replace classic values with cambio ones if they exist\n if (\n themeName === \"cambio\" &&\n classicToCambioKeyLookup[\n key as keyof typeof classicToCambioKeyLookup\n ]\n ) {\n return [\n key,\n tokenVariables[\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n classicToCambioKeyLookup[\n key as keyof typeof classicToCambioKeyLookup\n ]!\n ],\n ];\n }\n // `elevation` is a classic only concept\n if (themeName === \"cambio\" && key.includes(\"elevation\")) {\n return [null, null];\n }\n return [key, value];\n })\n .map(([key, value]) => (key && value ? `--${key}: ${value};` : null))\n .filter(Boolean)\n .join(\"\\n\")}\n }\n `;\n}\n\nexport default function ThemeProvider({\n themeName = \"classic\",\n children,\n}: {\n themeName: ThemeName;\n children: React.ReactNode;\n}): React.ReactElement {\n const value = useMemo(() => ({ themeName }), [themeName]);\n\n const innerStyles = useMemo(() => stylesForTheme(themeName), [themeName]);\n\n return (\n <ThemeContext.Provider value={value}>\n <style\n dangerouslySetInnerHTML={{ __html: innerStyles }}\n data-testid=\"themeprovider-style\"\n ></style>\n {children}\n </ThemeContext.Provider>\n );\n}\n\nexport function useTheme(): Theme {\n return React.useContext(ThemeContext);\n}\n","{\n \"color-base-black\": \"#000000\",\n \"color-base-destructive-100\": \"#fef3f5\",\n \"color-base-destructive-200\": \"#fad6de\",\n \"color-base-destructive-300\": \"#f2a2b2\",\n \"color-base-destructive-700\": \"#d32a4b\",\n \"color-base-destructive-800\": \"#81162c\",\n \"color-base-destructive-900\": \"#55101d\",\n \"color-base-gray-10\": \"rgba(203, 203, 203, 0.5)\",\n \"color-base-gray-30\": \"rgba(0, 0, 0, 0.3)\",\n \"color-base-gray-60\": \"rgba(0, 0, 0, 0.6)\",\n \"color-base-gray-80\": \"rgba(0, 0, 0, 0.8)\",\n \"color-base-gray-100\": \"#f7f7f7\",\n \"color-base-gray-200\": \"#f0f0f0\",\n \"color-base-gray-300\": \"#d0d0d0\",\n \"color-base-gray-700\": \"#767676\",\n \"color-base-gray-800\": \"#353535\",\n \"color-base-gray-900\": \"#191919\",\n \"color-base-orange-100\": \"#fdf2f0\",\n \"color-base-orange-200\": \"#f6cdc4\",\n \"color-base-orange-300\": \"#ec9987\",\n \"color-base-orange-700\": \"#c34124\",\n \"color-base-orange-800\": \"#732818\",\n \"color-base-orange-900\": \"#4d1a10\",\n \"color-base-primary-100\": \"#eff6fa\",\n \"color-base-primary-200\": \"#c1dbe7\",\n \"color-base-primary-300\": \"#84b7d0\",\n \"color-base-primary-700\": \"#236482\",\n \"color-base-primary-800\": \"#274858\",\n \"color-base-primary-900\": \"#1b303b\",\n \"color-base-success-100\": \"#eff7f1\",\n \"color-base-success-200\": \"#bddcc6\",\n \"color-base-success-300\": \"#81ba92\",\n \"color-base-success-700\": \"#397b4d\",\n \"color-base-success-800\": \"#2d4936\",\n \"color-base-success-900\": \"#1e3124\",\n \"color-base-purple-100\": \"#f9f5fa\",\n \"color-base-purple-200\": \"#e8dceb\",\n \"color-base-purple-300\": \"#cdb4d3\",\n \"color-base-purple-700\": \"#8b5f95\",\n \"color-base-purple-800\": \"#523b58\",\n \"color-base-purple-900\": \"#37273b\",\n \"color-base-yellow-100\": \"#fdf5d9\",\n \"color-base-yellow-200\": \"#fbe8a3\",\n \"color-base-yellow-300\": \"#f8d663\",\n \"color-base-yellow-700\": \"#ffc929\",\n \"color-base-yellow-800\": \"#765f1c\",\n \"color-base-yellow-900\": \"#3b3009\",\n \"color-base-white\": \"#ffffff\",\n \"color-cambio-black\": \"#050500\",\n \"color-cambio-white\": \"#ffffff\",\n \"color-cambio-gray-100\": \"#faf4eb\",\n \"color-cambio-gray-200\": \"#e4dbd3\",\n \"color-cambio-gray-300\": \"#beb4ab\",\n \"color-cambio-gray-370\": \"rgba(190, 180, 171, 0.7)\",\n \"color-cambio-gray-700\": \"#888077\",\n \"color-cambio-gray-800\": \"#5c554d\",\n \"color-cambio-gray-870\": \"rgba(92, 85, 77, 0.7)\",\n \"color-cambio-gray-900\": \"#312b23\",\n \"color-cambio-destructive-100\": \"#ffdeda\",\n \"color-cambio-destructive-300\": \"#ff8071\",\n \"color-cambio-destructive-370\": \"rgba(255, 128, 113, 0.7)\",\n \"color-cambio-destructive-700\": \"#c93f32\",\n \"color-cambio-destructive-770\": \"rgba(201, 63, 50, 0.7)\",\n \"color-cambio-destructive-900\": \"#6d0002\",\n \"color-cambio-success-100\": \"#daf2c8\",\n \"color-cambio-success-300\": \"#84ce64\",\n \"color-cambio-success-370\": \"rgba(132, 206, 100, 0.7)\",\n \"color-cambio-success-700\": \"#3c7f20\",\n \"color-cambio-success-770\": \"rgba(60, 127, 32, 0.7)\",\n \"color-cambio-success-900\": \"#103e00\",\n \"color-cambio-red\": \"#f56e56\",\n \"color-cambio-orange\": \"#ff8f57\",\n \"color-cambio-tan\": \"#ffb47d\",\n \"color-cambio-cream\": \"#fffad1\",\n \"color-cambio-purple\": \"#6840a8\",\n \"color-cambio-lilac\": \"#b59ef0\",\n \"color-cambio-thistle\": \"#d69ca4\",\n \"color-cambio-pink\": \"#ffccea\",\n \"color-cambio-navy\": \"#191142\",\n \"color-cambio-teal\": \"#44a6cf\",\n \"color-cambio-slate\": \"#7c9fc6\",\n \"color-cambio-sky\": \"#b1e8fc\",\n \"color-cambio-yellow-700\": \"#ffe733\",\n \"color-cambio-transparent-full\": \"rgba(0, 0, 0, 0)\",\n \"elevation-400\": \"0px 16px 32px 0px #00000040\"\n}\n"]}
|
|
@@ -9,7 +9,7 @@ var _VMARHE5Bcjs = require('./VMARHE5B.cjs');
|
|
|
9
9
|
var _7GJ2SD7Ocjs = require('./7GJ2SD7O.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _TIW4V757cjs = require('./TIW4V757.cjs');
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
var _TF76F532cjs = require('./TF76F532.cjs');
|
|
@@ -101,7 +101,7 @@ var AriaTooltip = _react.forwardRef.call(void 0, function AriaTooltip2(_a, ref)
|
|
|
101
101
|
childrenProp,
|
|
102
102
|
(children, { isEntering, isExiting }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
103
103
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipArrow, {}),
|
|
104
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
104
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TIW4V757cjs.Typography_default, { size: 100, color: "white", children }),
|
|
105
105
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
106
106
|
_RFHPSEBFcjs.OverlayVisibility,
|
|
107
107
|
{
|
|
@@ -161,4 +161,4 @@ var Tooltip_default = Tooltip;
|
|
|
161
161
|
|
|
162
162
|
|
|
163
163
|
exports.AriaTooltip = AriaTooltip; exports.Tooltip_default = Tooltip_default;
|
|
164
|
-
//# sourceMappingURL=
|
|
164
|
+
//# sourceMappingURL=WPRJVUVL.cjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _GJ44NFS5cjs = require('./GJ44NFS5.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _PBWG2BB5cjs = require('./PBWG2BB5.cjs');
|
|
@@ -80,7 +80,7 @@ function Modal({
|
|
|
80
80
|
) }),
|
|
81
81
|
image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SZCVEBN2cjs.Box_default, { maxHeight: 200, children: image }),
|
|
82
82
|
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _SZCVEBN2cjs.Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
|
|
83
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
83
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GJ44NFS5cjs.Heading_default, { as: "h1", size: 500, children: header }),
|
|
84
84
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SZCVEBN2cjs.Box_default, { marginBottom: 4, children }),
|
|
85
85
|
footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
86
86
|
_SZCVEBN2cjs.Box_default,
|
|
@@ -107,4 +107,4 @@ Modal.displayName = "Modal";
|
|
|
107
107
|
|
|
108
108
|
|
|
109
109
|
exports.Modal = Modal;
|
|
110
|
-
//# sourceMappingURL=
|
|
110
|
+
//# sourceMappingURL=X6F66N7W.cjs.map
|