@crystallize/design-system 1.4.0 → 1.4.2

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 (380) hide show
  1. package/CHANGELOG.md +124 -0
  2. package/dist/TableComponent-I2YOOYOU.css +281 -0
  3. package/dist/TableComponent-QINOO453.mjs +1377 -0
  4. package/dist/arrow-clockwise-Z2G6UEGP.svg +1 -0
  5. package/dist/arrow-counterclockwise-2O5EYVJT.svg +1 -0
  6. package/dist/bg-color-HB2WDYGO.svg +1 -0
  7. package/dist/camera-CR7D2PNH.svg +1 -0
  8. package/dist/caret-right-fill-FFBNEXVX.svg +1 -0
  9. package/dist/chat-square-quote-CI6PUJHH.svg +1 -0
  10. package/dist/chevron-down-3FRWSIKS.svg +1 -0
  11. package/dist/chunk-VUXQZRSP.mjs +737 -0
  12. package/dist/clipboard-OSEFDF25.svg +1 -0
  13. package/dist/close-FH57ZMJF.svg +1 -0
  14. package/dist/code-SEVR6TIQ.svg +1 -0
  15. package/dist/copy-DMGDODUL.svg +1 -0
  16. package/dist/diagram-2-CEJUD2B4.svg +1 -0
  17. package/dist/download-JXUGIUCX.svg +1 -0
  18. package/dist/draggable-block-menu-KKHDNKJA.svg +1 -0
  19. package/dist/dropdown-more-BHZ5COKX.svg +1 -0
  20. package/dist/file-image-TIQPFJX4.svg +1 -0
  21. package/dist/filetype-gif-OG2BEYYK.svg +1 -0
  22. package/dist/font-color-J4GA3ZJO.svg +1 -0
  23. package/dist/font-family-ZU5N6TTE.svg +1 -0
  24. package/dist/gear-ICMT4NTP.svg +1 -0
  25. package/dist/horizontal-rule-N6RD2V7H.svg +1 -0
  26. package/dist/indent-MJ6JIMCK.svg +1 -0
  27. package/dist/index.css +4209 -0
  28. package/dist/index.d.ts +450 -3
  29. package/dist/index.js +11526 -5
  30. package/dist/index.mjs +9437 -0
  31. package/dist/journal-code-XUT44HDV.svg +1 -0
  32. package/dist/justify-J7X5JEEX.svg +1 -0
  33. package/dist/link-W52N4JKZ.svg +1 -0
  34. package/dist/list-ol-2ZEUN4Z7.svg +1 -0
  35. package/dist/list-ul-DVKNUP47.svg +1 -0
  36. package/dist/lock-WCYOZOHW.svg +1 -0
  37. package/dist/lock-fill-JZSKOSHK.svg +1 -0
  38. package/dist/markdown-4BGQNLLT.svg +1 -0
  39. package/dist/mic-H5FNOMM7.svg +1 -0
  40. package/dist/outdent-2LUMUMIP.svg +1 -0
  41. package/dist/paint-bucket-VCISMZTH.svg +1 -0
  42. package/dist/palette-SWGFPRWZ.svg +1 -0
  43. package/dist/pencil-fill-STFSC26F.svg +1 -0
  44. package/dist/plug-HGGGEVS3.svg +1 -0
  45. package/dist/plug-fill-OTG3U4TN.svg +1 -0
  46. package/dist/plus-CQISIKEC.svg +1 -0
  47. package/dist/plus-slash-minus-N22JU4TI.svg +1 -0
  48. package/dist/prettier-WUJ7B5NV.svg +1 -0
  49. package/dist/prettier-error-DYJSLYDP.svg +1 -0
  50. package/dist/square-check-UTG6FU6D.svg +1 -0
  51. package/dist/success-YVXUMPEZ.svg +1 -0
  52. package/dist/table-BR6DI4ZQ.svg +1 -0
  53. package/dist/text-center-UQI6PAEF.svg +1 -0
  54. package/dist/text-left-KT2B6TR3.svg +1 -0
  55. package/dist/text-paragraph-MFTUIIQG.svg +1 -0
  56. package/dist/text-right-SKELPISG.svg +1 -0
  57. package/dist/trash-UOM6D7TD.svg +1 -0
  58. package/dist/type-bold-PY7COC3N.svg +1 -0
  59. package/dist/type-h1-6KJP7YOM.svg +1 -0
  60. package/dist/type-h2-VHI2USC3.svg +1 -0
  61. package/dist/type-h3-JIU77CHO.svg +1 -0
  62. package/dist/type-h4-P5EHKDAL.svg +1 -0
  63. package/dist/type-h5-CS2KYVRG.svg +1 -0
  64. package/dist/type-h6-J2O74LJZ.svg +1 -0
  65. package/dist/type-italic-3DSFOSG2.svg +1 -0
  66. package/dist/type-strikethrough-E2KKQFSX.svg +1 -0
  67. package/dist/type-subscript-BMPTRIBU.svg +1 -0
  68. package/dist/type-superscript-EDF6EPAA.svg +1 -0
  69. package/dist/type-underline-CBFA5VLF.svg +1 -0
  70. package/dist/upload-Q6KICGZW.svg +1 -0
  71. package/dist/user-EOI2NEFZ.svg +1 -0
  72. package/package.json +114 -79
  73. package/readme.md +9 -0
  74. package/src/action-menu/ActionMenu.stories.tsx +25 -0
  75. package/src/action-menu/action-item.tsx +16 -0
  76. package/src/action-menu/action-menu.css +38 -0
  77. package/src/action-menu/action-menu.tsx +25 -0
  78. package/src/action-menu/index.tsx +3 -0
  79. package/src/avatar/Avatar.stories.tsx +20 -0
  80. package/src/avatar/avatar.css +23 -0
  81. package/src/avatar/avatar.tsx +34 -0
  82. package/src/avatar/get-initials.ts +5 -0
  83. package/src/avatar/index.ts +1 -0
  84. package/src/button/Button.stories.tsx +105 -0
  85. package/src/button/button.css +116 -0
  86. package/src/button/button.tsx +136 -0
  87. package/src/button/index.ts +3 -0
  88. package/src/card/card.css +7 -0
  89. package/src/card/card.stories.tsx +24 -0
  90. package/src/card/card.tsx +27 -0
  91. package/src/card/index.ts +3 -0
  92. package/src/checkbox/checkbox.css +30 -0
  93. package/src/checkbox/checkbox.stories.tsx +62 -0
  94. package/src/checkbox/checkbox.test.tsx +16 -0
  95. package/src/checkbox/checkbox.tsx +28 -0
  96. package/src/checkbox/index.ts +1 -0
  97. package/src/colors/Colors.stories.tsx +127 -0
  98. package/src/colors/color-defaults.json +15 -0
  99. package/src/colors/color-pairing.json +12 -0
  100. package/src/colors/colors.json +158 -0
  101. package/src/colors/index.ts +1 -0
  102. package/src/colors/old-to-new.txt +19 -0
  103. package/src/colors/types.ts +29 -0
  104. package/src/dialog/Dialog.stories.tsx +168 -0
  105. package/src/dialog/Dialog.test.tsx +25 -0
  106. package/src/dialog/config.tsx +139 -0
  107. package/src/dialog/confirm-dialog.tsx +70 -0
  108. package/src/dialog/destroyFns.ts +1 -0
  109. package/src/dialog/dialog.css +27 -0
  110. package/src/dialog/dialog.tsx +95 -0
  111. package/src/dialog/index.tsx +40 -0
  112. package/src/dialog/types.ts +70 -0
  113. package/src/dropdown-menu/DropdownMenu.stories.tsx +38 -0
  114. package/src/dropdown-menu/dropdown-menu-item.tsx +15 -0
  115. package/src/dropdown-menu/dropdown-menu-label.tsx +10 -0
  116. package/src/dropdown-menu/dropdown-menu-root.tsx +33 -0
  117. package/src/dropdown-menu/dropdown-menu.css +20 -0
  118. package/src/dropdown-menu/index.ts +11 -0
  119. package/src/icon-button/IconButton.stories.tsx +45 -0
  120. package/src/icon-button/icon-button.css +50 -0
  121. package/src/icon-button/icon-button.tsx +39 -0
  122. package/src/icon-button/index.ts +3 -0
  123. package/src/iconography/Icon.stories.tsx +47 -0
  124. package/src/iconography/add.tsx +30 -0
  125. package/src/iconography/arrow.tsx +15 -0
  126. package/src/iconography/atom.tsx +59 -0
  127. package/src/iconography/cancel.tsx +26 -0
  128. package/src/iconography/catalogue.tsx +26 -0
  129. package/src/iconography/copy.tsx +24 -0
  130. package/src/iconography/crystal.tsx +93 -0
  131. package/src/iconography/customers.tsx +38 -0
  132. package/src/iconography/edit.tsx +30 -0
  133. package/src/iconography/error.tsx +40 -0
  134. package/src/iconography/fulfilment.tsx +58 -0
  135. package/src/iconography/glasses.tsx +62 -0
  136. package/src/iconography/graphQL.tsx +90 -0
  137. package/src/iconography/grid.tsx +84 -0
  138. package/src/iconography/hooks.tsx +26 -0
  139. package/src/iconography/image.tsx +47 -0
  140. package/src/iconography/index.ts +63 -0
  141. package/src/iconography/info.tsx +41 -0
  142. package/src/iconography/key.tsx +19 -0
  143. package/src/iconography/language.tsx +38 -0
  144. package/src/iconography/nail-polish.tsx +84 -0
  145. package/src/iconography/order.tsx +38 -0
  146. package/src/iconography/particle.tsx +88 -0
  147. package/src/iconography/percentage.tsx +44 -0
  148. package/src/iconography/price-tag.tsx +40 -0
  149. package/src/iconography/shapes.tsx +48 -0
  150. package/src/iconography/subscription.tsx +34 -0
  151. package/src/iconography/topics.tsx +58 -0
  152. package/src/iconography/triangle.tsx +27 -0
  153. package/src/iconography/usage.tsx +34 -0
  154. package/src/iconography/users.tsx +44 -0
  155. package/src/iconography/warning.tsx +51 -0
  156. package/src/index.css +14 -0
  157. package/src/index.ts +33 -0
  158. package/src/inline-radio/index.ts +1 -0
  159. package/src/inline-radio/inline-radio.css +36 -0
  160. package/src/inline-radio/inline-radio.stories.tsx +81 -0
  161. package/src/inline-radio/inline-radio.tsx +41 -0
  162. package/src/input/Input.stories.tsx +26 -0
  163. package/src/input/index.ts +1 -0
  164. package/src/input/input.css +7 -0
  165. package/src/input/input.tsx +20 -0
  166. package/src/input-with-label/InputWithLabel.stories.tsx +98 -0
  167. package/src/input-with-label/index.ts +3 -0
  168. package/src/input-with-label/input-with-label.css +35 -0
  169. package/src/input-with-label/input-with-label.tsx +59 -0
  170. package/src/label/index.ts +1 -0
  171. package/src/label/label.css +3 -0
  172. package/src/label/label.stories.tsx +19 -0
  173. package/src/label/label.tsx +13 -0
  174. package/src/progress/Progress.stories.tsx +26 -0
  175. package/src/progress/index.ts +1 -0
  176. package/src/progress/progress.css +7 -0
  177. package/src/progress/progress.tsx +17 -0
  178. package/src/radio/index.ts +1 -0
  179. package/src/radio/radio.css +20 -0
  180. package/src/radio/radio.stories.tsx +142 -0
  181. package/src/radio/radio.tsx +19 -0
  182. package/src/rich-text-editor/appSettings.ts +28 -0
  183. package/src/rich-text-editor/context/SettingsContext.tsx +71 -0
  184. package/src/rich-text-editor/context/SharedAutocompleteContext.tsx +60 -0
  185. package/src/rich-text-editor/context/SharedHistoryContext.tsx +25 -0
  186. package/src/rich-text-editor/hooks/useReport.ts +64 -0
  187. package/src/rich-text-editor/images/cat-typing.gif +0 -0
  188. package/src/rich-text-editor/images/emoji/1F600.png +0 -0
  189. package/src/rich-text-editor/images/emoji/1F641.png +0 -0
  190. package/src/rich-text-editor/images/emoji/1F642.png +0 -0
  191. package/src/rich-text-editor/images/emoji/2764.png +0 -0
  192. package/src/rich-text-editor/images/emoji/LICENSE.md +5 -0
  193. package/src/rich-text-editor/images/icons/LICENSE.md +5 -0
  194. package/src/rich-text-editor/images/icons/arrow-clockwise.svg +1 -0
  195. package/src/rich-text-editor/images/icons/arrow-counterclockwise.svg +1 -0
  196. package/src/rich-text-editor/images/icons/bg-color.svg +1 -0
  197. package/src/rich-text-editor/images/icons/camera.svg +1 -0
  198. package/src/rich-text-editor/images/icons/card-checklist.svg +1 -0
  199. package/src/rich-text-editor/images/icons/caret-right-fill.svg +1 -0
  200. package/src/rich-text-editor/images/icons/chat-left-text.svg +1 -0
  201. package/src/rich-text-editor/images/icons/chat-right-dots.svg +1 -0
  202. package/src/rich-text-editor/images/icons/chat-right-text.svg +1 -0
  203. package/src/rich-text-editor/images/icons/chat-right.svg +1 -0
  204. package/src/rich-text-editor/images/icons/chat-square-quote.svg +1 -0
  205. package/src/rich-text-editor/images/icons/chevron-down.svg +1 -0
  206. package/src/rich-text-editor/images/icons/clipboard.svg +1 -0
  207. package/src/rich-text-editor/images/icons/close.svg +1 -0
  208. package/src/rich-text-editor/images/icons/code.svg +1 -0
  209. package/src/rich-text-editor/images/icons/comments.svg +1 -0
  210. package/src/rich-text-editor/images/icons/copy.svg +1 -0
  211. package/src/rich-text-editor/images/icons/diagram-2.svg +1 -0
  212. package/src/rich-text-editor/images/icons/download.svg +1 -0
  213. package/src/rich-text-editor/images/icons/draggable-block-menu.svg +1 -0
  214. package/src/rich-text-editor/images/icons/dropdown-more.svg +1 -0
  215. package/src/rich-text-editor/images/icons/figma.svg +1 -0
  216. package/src/rich-text-editor/images/icons/file-image.svg +1 -0
  217. package/src/rich-text-editor/images/icons/filetype-gif.svg +1 -0
  218. package/src/rich-text-editor/images/icons/font-color.svg +1 -0
  219. package/src/rich-text-editor/images/icons/font-family.svg +1 -0
  220. package/src/rich-text-editor/images/icons/gear.svg +1 -0
  221. package/src/rich-text-editor/images/icons/horizontal-rule.svg +1 -0
  222. package/src/rich-text-editor/images/icons/indent.svg +1 -0
  223. package/src/rich-text-editor/images/icons/journal-code.svg +1 -0
  224. package/src/rich-text-editor/images/icons/journal-text.svg +1 -0
  225. package/src/rich-text-editor/images/icons/justify.svg +1 -0
  226. package/src/rich-text-editor/images/icons/link.svg +1 -0
  227. package/src/rich-text-editor/images/icons/list-ol.svg +1 -0
  228. package/src/rich-text-editor/images/icons/list-ul.svg +1 -0
  229. package/src/rich-text-editor/images/icons/lock-fill.svg +1 -0
  230. package/src/rich-text-editor/images/icons/lock.svg +1 -0
  231. package/src/rich-text-editor/images/icons/markdown.svg +1 -0
  232. package/src/rich-text-editor/images/icons/mic.svg +1 -0
  233. package/src/rich-text-editor/images/icons/outdent.svg +1 -0
  234. package/src/rich-text-editor/images/icons/paint-bucket.svg +1 -0
  235. package/src/rich-text-editor/images/icons/palette.svg +1 -0
  236. package/src/rich-text-editor/images/icons/pencil-fill.svg +1 -0
  237. package/src/rich-text-editor/images/icons/plug-fill.svg +1 -0
  238. package/src/rich-text-editor/images/icons/plug.svg +1 -0
  239. package/src/rich-text-editor/images/icons/plus-slash-minus.svg +1 -0
  240. package/src/rich-text-editor/images/icons/plus.svg +1 -0
  241. package/src/rich-text-editor/images/icons/prettier-error.svg +1 -0
  242. package/src/rich-text-editor/images/icons/prettier.svg +1 -0
  243. package/src/rich-text-editor/images/icons/send.svg +1 -0
  244. package/src/rich-text-editor/images/icons/square-check.svg +1 -0
  245. package/src/rich-text-editor/images/icons/sticky.svg +1 -0
  246. package/src/rich-text-editor/images/icons/success.svg +1 -0
  247. package/src/rich-text-editor/images/icons/table.svg +1 -0
  248. package/src/rich-text-editor/images/icons/text-center.svg +1 -0
  249. package/src/rich-text-editor/images/icons/text-left.svg +1 -0
  250. package/src/rich-text-editor/images/icons/text-paragraph.svg +1 -0
  251. package/src/rich-text-editor/images/icons/text-right.svg +1 -0
  252. package/src/rich-text-editor/images/icons/trash.svg +1 -0
  253. package/src/rich-text-editor/images/icons/trash3.svg +1 -0
  254. package/src/rich-text-editor/images/icons/tweet.svg +1 -0
  255. package/src/rich-text-editor/images/icons/type-bold.svg +1 -0
  256. package/src/rich-text-editor/images/icons/type-h1.svg +1 -0
  257. package/src/rich-text-editor/images/icons/type-h2.svg +1 -0
  258. package/src/rich-text-editor/images/icons/type-h3.svg +1 -0
  259. package/src/rich-text-editor/images/icons/type-h4.svg +1 -0
  260. package/src/rich-text-editor/images/icons/type-h5.svg +1 -0
  261. package/src/rich-text-editor/images/icons/type-h6.svg +1 -0
  262. package/src/rich-text-editor/images/icons/type-italic.svg +1 -0
  263. package/src/rich-text-editor/images/icons/type-strikethrough.svg +1 -0
  264. package/src/rich-text-editor/images/icons/type-subscript.svg +1 -0
  265. package/src/rich-text-editor/images/icons/type-superscript.svg +1 -0
  266. package/src/rich-text-editor/images/icons/type-underline.svg +1 -0
  267. package/src/rich-text-editor/images/icons/upload.svg +1 -0
  268. package/src/rich-text-editor/images/icons/user.svg +1 -0
  269. package/src/rich-text-editor/images/icons/youtube.svg +1 -0
  270. package/src/rich-text-editor/images/image/LICENSE.md +5 -0
  271. package/src/rich-text-editor/images/landscape.jpg +0 -0
  272. package/src/rich-text-editor/images/logo.svg +1 -0
  273. package/src/rich-text-editor/images/yellow-flower-small.jpg +0 -0
  274. package/src/rich-text-editor/images/yellow-flower.jpg +0 -0
  275. package/src/rich-text-editor/index.ts +1 -0
  276. package/src/rich-text-editor/model/crystallize-rich-text-types/code.ts +39 -0
  277. package/src/rich-text-editor/model/crystallize-rich-text-types/headings.ts +12 -0
  278. package/src/rich-text-editor/model/crystallize-rich-text-types/index.ts +69 -0
  279. package/src/rich-text-editor/model/crystallize-rich-text-types/link.ts +9 -0
  280. package/src/rich-text-editor/model/crystallize-rich-text-types/table.ts +16 -0
  281. package/src/rich-text-editor/model/crystallize-to-lexical.ts +186 -0
  282. package/src/rich-text-editor/model/lexical-to-crystallize.ts +232 -0
  283. package/src/rich-text-editor/nodes/AutocompleteNode.tsx +96 -0
  284. package/src/rich-text-editor/nodes/BaseNodes.ts +45 -0
  285. package/src/rich-text-editor/nodes/KeywordNode.ts +73 -0
  286. package/src/rich-text-editor/nodes/TableCellNodes.ts +31 -0
  287. package/src/rich-text-editor/nodes/TableComponent.tsx +1547 -0
  288. package/src/rich-text-editor/nodes/TableNode.tsx +398 -0
  289. package/src/rich-text-editor/plugins/ActionsPlugin/index.tsx +83 -0
  290. package/src/rich-text-editor/plugins/AutoLinkPlugin/index.tsx +47 -0
  291. package/src/rich-text-editor/plugins/AutocompletePlugin/index.tsx +2536 -0
  292. package/src/rich-text-editor/plugins/CodeActionMenuPlugin/components/CopyButton/index.tsx +60 -0
  293. package/src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.css +14 -0
  294. package/src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx +140 -0
  295. package/src/rich-text-editor/plugins/CodeActionMenuPlugin/index.css +46 -0
  296. package/src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx +155 -0
  297. package/src/rich-text-editor/plugins/CodeHighlightPlugin/index.ts +21 -0
  298. package/src/rich-text-editor/plugins/ComponentPickerPlugin/index.tsx +320 -0
  299. package/src/rich-text-editor/plugins/DragDropPastePlugin/index.ts +40 -0
  300. package/src/rich-text-editor/plugins/DraggableBlockPlugin/index.css +36 -0
  301. package/src/rich-text-editor/plugins/DraggableBlockPlugin/index.tsx +368 -0
  302. package/src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.css +40 -0
  303. package/src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx +305 -0
  304. package/src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.css +128 -0
  305. package/src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx +351 -0
  306. package/src/rich-text-editor/plugins/LinkPlugin/index.tsx +16 -0
  307. package/src/rich-text-editor/plugins/ListMaxIndentLevelPlugin/index.ts +86 -0
  308. package/src/rich-text-editor/plugins/MarkdownShortcutPlugin/index.tsx +16 -0
  309. package/src/rich-text-editor/plugins/MarkdownTransformers/index.ts +195 -0
  310. package/src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx +49 -0
  311. package/src/rich-text-editor/plugins/SpeechToTextPlugin/index.ts +113 -0
  312. package/src/rich-text-editor/plugins/TabFocusPlugin/index.tsx +65 -0
  313. package/src/rich-text-editor/plugins/TableActionMenuPlugin/index.tsx +481 -0
  314. package/src/rich-text-editor/plugins/TableCellResizer/index.css +12 -0
  315. package/src/rich-text-editor/plugins/TableCellResizer/index.tsx +386 -0
  316. package/src/rich-text-editor/plugins/TablePlugin.tsx +190 -0
  317. package/src/rich-text-editor/plugins/ToolbarPlugin/index.tsx +726 -0
  318. package/src/rich-text-editor/plugins/TreeViewPlugin/index.tsx +25 -0
  319. package/src/rich-text-editor/plugins/TypingPerfPlugin/index.ts +117 -0
  320. package/src/rich-text-editor/rich-text-editor.css +1361 -0
  321. package/src/rich-text-editor/rich-text-editor.stories.tsx +385 -0
  322. package/src/rich-text-editor/rich-text-editor.tsx +228 -0
  323. package/src/rich-text-editor/tests/rich-text-editor-basic-rendering.test.tsx +47 -0
  324. package/src/rich-text-editor/tests/rich-text-editor-code.test.tsx +39 -0
  325. package/src/rich-text-editor/tests/rich-text-editor-model-basics.test.tsx +56 -0
  326. package/src/rich-text-editor/tests/rich-text-editor-model-conversions.test.tsx +195 -0
  327. package/src/rich-text-editor/tests/rich-text-editor-onchange.test.tsx +37 -0
  328. package/src/rich-text-editor/tests/rich-text-editor-quote.test.tsx +36 -0
  329. package/src/rich-text-editor/tests/rich-text-editor-text-formats.test.tsx +135 -0
  330. package/src/rich-text-editor/tests/rich-text-editor-typing.test.tsx +73 -0
  331. package/src/rich-text-editor/tests/utils.ts +23 -0
  332. package/src/rich-text-editor/themes/PlaygroundEditorTheme.css +433 -0
  333. package/src/rich-text-editor/themes/PlaygroundEditorTheme.ts +113 -0
  334. package/src/rich-text-editor/types.ts +5 -0
  335. package/src/rich-text-editor/ui/ContentEditable.css +13 -0
  336. package/src/rich-text-editor/ui/ContentEditable.tsx +15 -0
  337. package/src/rich-text-editor/ui/LinkPreview.css +57 -0
  338. package/src/rich-text-editor/ui/LinkPreview.tsx +169 -0
  339. package/src/rich-text-editor/utils/environment.ts +1 -0
  340. package/src/rich-text-editor/utils/getDOMRangeRect.ts +42 -0
  341. package/src/rich-text-editor/utils/getSelectedNode.ts +27 -0
  342. package/src/rich-text-editor/utils/guard.ts +10 -0
  343. package/src/rich-text-editor/utils/isMobileWidth.ts +7 -0
  344. package/src/rich-text-editor/utils/joinClasses.ts +13 -0
  345. package/src/rich-text-editor/utils/point.ts +55 -0
  346. package/src/rich-text-editor/utils/rect.ts +158 -0
  347. package/src/rich-text-editor/utils/setFloatingElemPosition.ts +46 -0
  348. package/src/rich-text-editor/utils/swipe.ts +127 -0
  349. package/src/rich-text-editor/utils/url.ts +33 -0
  350. package/src/select/index.ts +1 -0
  351. package/src/select/select-item.tsx +18 -0
  352. package/src/select/select-root.tsx +50 -0
  353. package/src/select/select.css +44 -0
  354. package/src/select/select.stories.tsx +74 -0
  355. package/src/select/select.ts +9 -0
  356. package/src/slider/Slider.stories.tsx +54 -0
  357. package/src/slider/index.ts +1 -0
  358. package/src/slider/slider.css +27 -0
  359. package/src/slider/slider.tsx +20 -0
  360. package/src/spinner/Spinner.stories.tsx +19 -0
  361. package/src/spinner/index.tsx +48 -0
  362. package/src/spinner/spinner.css +11 -0
  363. package/src/tag/Tag.stories.tsx +32 -0
  364. package/src/tag/index.ts +1 -0
  365. package/src/tag/tag.css +7 -0
  366. package/src/tag/tag.tsx +27 -0
  367. package/src/vite-env.d.ts +1 -0
  368. package/tailwind.config.cjs +51 -0
  369. package/LICENSE +0 -21
  370. package/README.md +0 -87
  371. package/dist/components/Button.d.ts +0 -11
  372. package/dist/components/Checkbox.d.ts +0 -29
  373. package/dist/components/Typography.d.ts +0 -14
  374. package/dist/design-system.cjs.development.js +0 -251
  375. package/dist/design-system.cjs.development.js.map +0 -1
  376. package/dist/design-system.cjs.production.min.js +0 -2
  377. package/dist/design-system.cjs.production.min.js.map +0 -1
  378. package/dist/design-system.esm.js +0 -245
  379. package/dist/design-system.esm.js.map +0 -1
  380. package/dist/styles/theme.d.ts +0 -2
package/dist/index.css ADDED
@@ -0,0 +1,4209 @@
1
+ /* src/index.css */
2
+ :root {
3
+ --c-color-cyan-50: 238 253 252;
4
+ --c-color-cyan-100: 191 246 248;
5
+ --c-color-cyan-200: 172 241 245;
6
+ --c-color-cyan-300: 115 229 237;
7
+ --c-color-cyan-400: 51 208 221;
8
+ --c-color-cyan-500: 23 179 195;
9
+ --c-color-cyan-600: 22 144 164;
10
+ --c-color-cyan-700: 25 115 133;
11
+ --c-color-cyan-800: 29 94 109;
12
+ --c-color-cyan-900: 28 78 93;
13
+ --c-color-pink-50: 254 241 249;
14
+ --c-color-pink-100: 254 229 244;
15
+ --c-color-pink-200: 255 204 236;
16
+ --c-color-pink-300: 255 161 219;
17
+ --c-color-pink-400: 255 102 192;
18
+ --c-color-pink-500: 251 57 164;
19
+ --c-color-pink-600: 235 23 130;
20
+ --c-color-pink-700: 205 9 102;
21
+ --c-color-pink-800: 169 11 84;
22
+ --c-color-pink-900: 141 14 73;
23
+ --c-color-gray-50: 245 245 246;
24
+ --c-color-gray-100: 228 229 233;
25
+ --c-color-gray-200: 204 207 213;
26
+ --c-color-gray-300: 169 174 183;
27
+ --c-color-gray-400: 126 133 146;
28
+ --c-color-gray-500: 98 103 120;
29
+ --c-color-gray-600: 84 88 102;
30
+ --c-color-gray-700: 76 79 90;
31
+ --c-color-gray-800: 64 66 74;
32
+ --c-color-gray-900: 57 58 64;
33
+ --c-color-purple-50: 247 246 249;
34
+ --c-color-purple-100: 238 236 242;
35
+ --c-color-purple-200: 216 213 226;
36
+ --c-color-purple-300: 182 176 201;
37
+ --c-color-purple-400: 142 133 171;
38
+ --c-color-purple-500: 112 102 145;
39
+ --c-color-purple-600: 91 81 120;
40
+ --c-color-purple-700: 75 66 98;
41
+ --c-color-purple-800: 64 57 83;
42
+ --c-color-purple-900: 57 51 71;
43
+ --c-color-green-50: 243 248 248;
44
+ --c-color-green-100: 223 235 238;
45
+ --c-color-green-200: 195 218 222;
46
+ --c-color-green-300: 154 191 198;
47
+ --c-color-green-400: 105 156 167;
48
+ --c-color-green-500: 82 134 147;
49
+ --c-color-green-600: 67 106 119;
50
+ --c-color-green-700: 59 88 99;
51
+ --c-color-green-800: 55 75 83;
52
+ --c-color-green-900: 49 65 72;
53
+ --c-color-orange-50: 255 249 235;
54
+ --c-color-orange-100: 255 237 198;
55
+ --c-color-orange-200: 255 222 153;
56
+ --c-color-orange-300: 255 191 74;
57
+ --c-color-orange-400: 255 165 32;
58
+ --c-color-orange-500: 249 129 7;
59
+ --c-color-orange-600: 221 92 2;
60
+ --c-color-orange-700: 183 61 6;
61
+ --c-color-orange-800: 148 46 12;
62
+ --c-color-orange-900: 122 39 13;
63
+ --c-color-s-red-50: 254 242 242;
64
+ --c-color-s-red-100: 255 225 225;
65
+ --c-color-s-red-200: 255 200 200;
66
+ --c-color-s-red-300: 255 173 173;
67
+ --c-color-s-red-400: 253 108 108;
68
+ --c-color-s-red-500: 245 62 62;
69
+ --c-color-s-red-600: 226 32 32;
70
+ --c-color-s-red-700: 190 23 23;
71
+ --c-color-s-red-800: 157 23 23;
72
+ --c-color-s-red-900: 130 26 26;
73
+ --c-color-s-orange-50: 255 247 237;
74
+ --c-color-s-orange-100: 255 237 213;
75
+ --c-color-s-orange-200: 255 214 165;
76
+ --c-color-s-orange-300: 255 187 114;
77
+ --c-color-s-orange-400: 253 148 58;
78
+ --c-color-s-orange-500: 252 117 19;
79
+ --c-color-s-orange-600: 237 89 9;
80
+ --c-color-s-orange-700: 196 66 10;
81
+ --c-color-s-orange-800: 156 52 16;
82
+ --c-color-s-orange-900: 125 45 17;
83
+ --c-color-s-yellow-50: 254 254 232;
84
+ --c-color-s-yellow-100: 253 255 182;
85
+ --c-color-s-yellow-200: 255 254 136;
86
+ --c-color-s-yellow-300: 255 247 68;
87
+ --c-color-s-yellow-400: 254 233 17;
88
+ --c-color-s-yellow-500: 238 207 4;
89
+ --c-color-s-yellow-600: 205 162 1;
90
+ --c-color-s-yellow-700: 164 116 4;
91
+ --c-color-s-yellow-800: 135 91 12;
92
+ --c-color-s-yellow-900: 115 74 16;
93
+ --c-color-s-green-50: 242 255 238;
94
+ --c-color-s-green-100: 222 255 216;
95
+ --c-color-s-green-200: 202 255 191;
96
+ --c-color-s-green-300: 141 253 120;
97
+ --c-color-s-green-400: 83 242 54;
98
+ --c-color-s-green-500: 44 219 12;
99
+ --c-color-s-green-600: 30 182 3;
100
+ --c-color-s-green-700: 27 142 7;
101
+ --c-color-s-green-800: 26 112 11;
102
+ --c-color-s-green-900: 22 91 12;
103
+ --c-color-s-blue-50: 239 245 255;
104
+ --c-color-s-blue-100: 218 231 255;
105
+ --c-color-s-blue-200: 190 213 255;
106
+ --c-color-s-blue-300: 160 196 255;
107
+ --c-color-s-blue-400: 93 150 253;
108
+ --c-color-s-blue-500: 55 111 250;
109
+ --c-color-s-blue-600: 33 79 239;
110
+ --c-color-s-blue-700: 25 58 220;
111
+ --c-color-s-blue-800: 27 49 178;
112
+ --c-color-s-blue-900: 28 47 140;
113
+ --c-color-s-purple-50: 244 243 255;
114
+ --c-color-s-purple-100: 235 232 255;
115
+ --c-color-s-purple-200: 217 213 255;
116
+ --c-color-s-purple-300: 189 178 255;
117
+ --c-color-s-purple-400: 157 136 253;
118
+ --c-color-s-purple-500: 126 88 250;
119
+ --c-color-s-purple-600: 111 53 242;
120
+ --c-color-s-purple-700: 96 35 222;
121
+ --c-color-s-purple-800: 80 29 186;
122
+ --c-color-s-purple-900: 67 26 152;
123
+ --c-color-s-pink-50: 255 244 255;
124
+ --c-color-s-pink-100: 255 231 255;
125
+ --c-color-s-pink-200: 255 198 255;
126
+ --c-color-s-pink-300: 254 169 250;
127
+ --c-color-s-pink-400: 252 118 244;
128
+ --c-color-s-pink-500: 243 66 231;
129
+ --c-color-s-pink-600: 215 34 200;
130
+ --c-color-s-pink-700: 178 25 161;
131
+ --c-color-s-pink-800: 146 22 132;
132
+ --c-color-s-pink-900: 119 24 105;
133
+ --c-color-cyan-50-900: var(--c-color-cyan-50);
134
+ --c-color-cyan-100-800: var(--c-color-cyan-100);
135
+ --c-color-cyan-200-700: var(--c-color-cyan-200);
136
+ --c-color-cyan: var(--c-color-cyan-200);
137
+ --c-color-cyan-300-600: var(--c-color-cyan-300);
138
+ --c-color-cyan-400-500: var(--c-color-cyan-400);
139
+ --c-color-cyan-500-400: var(--c-color-cyan-500);
140
+ --c-color-cyan-600-300: var(--c-color-cyan-600);
141
+ --c-color-cyan-700-200: var(--c-color-cyan-700);
142
+ --c-color-cyan-800-100: var(--c-color-cyan-800);
143
+ --c-color-cyan-900-50: var(--c-color-cyan-900);
144
+ --c-color-pink-50-900: var(--c-color-pink-50);
145
+ --c-color-pink-100-800: var(--c-color-pink-100);
146
+ --c-color-pink-200-700: var(--c-color-pink-200);
147
+ --c-color-pink-300-600: var(--c-color-pink-300);
148
+ --c-color-pink: var(--c-color-pink-300);
149
+ --c-color-pink-400-500: var(--c-color-pink-400);
150
+ --c-color-pink-500-400: var(--c-color-pink-500);
151
+ --c-color-pink-600-300: var(--c-color-pink-600);
152
+ --c-color-pink-700-200: var(--c-color-pink-700);
153
+ --c-color-pink-800-100: var(--c-color-pink-800);
154
+ --c-color-pink-900-50: var(--c-color-pink-900);
155
+ --c-color-gray-50-900: var(--c-color-gray-50);
156
+ --c-color-gray-100-800: var(--c-color-gray-100);
157
+ --c-color-gray-200-700: var(--c-color-gray-200);
158
+ --c-color-gray-300-600: var(--c-color-gray-300);
159
+ --c-color-gray-400-500: var(--c-color-gray-400);
160
+ --c-color-gray-500-400: var(--c-color-gray-500);
161
+ --c-color-gray-600-300: var(--c-color-gray-600);
162
+ --c-color-gray-700-200: var(--c-color-gray-700);
163
+ --c-color-gray: var(--c-color-gray-700);
164
+ --c-color-gray-800-100: var(--c-color-gray-800);
165
+ --c-color-gray-900-50: var(--c-color-gray-900);
166
+ --c-color-purple-50-900: var(--c-color-purple-50);
167
+ --c-color-purple: var(--c-color-purple-50);
168
+ --c-color-purple-100-800: var(--c-color-purple-100);
169
+ --c-color-purple-200-700: var(--c-color-purple-200);
170
+ --c-color-purple-300-600: var(--c-color-purple-300);
171
+ --c-color-purple-400-500: var(--c-color-purple-400);
172
+ --c-color-purple-500-400: var(--c-color-purple-500);
173
+ --c-color-purple-600-300: var(--c-color-purple-600);
174
+ --c-color-purple-700-200: var(--c-color-purple-700);
175
+ --c-color-purple-800-100: var(--c-color-purple-800);
176
+ --c-color-purple-900-50: var(--c-color-purple-900);
177
+ --c-color-green-50-900: var(--c-color-green-50);
178
+ --c-color-green-100-800: var(--c-color-green-100);
179
+ --c-color-green-200-700: var(--c-color-green-200);
180
+ --c-color-green-300-600: var(--c-color-green-300);
181
+ --c-color-green-400-500: var(--c-color-green-400);
182
+ --c-color-green: var(--c-color-green-400);
183
+ --c-color-green-500-400: var(--c-color-green-500);
184
+ --c-color-green-600-300: var(--c-color-green-600);
185
+ --c-color-green-700-200: var(--c-color-green-700);
186
+ --c-color-green-800-100: var(--c-color-green-800);
187
+ --c-color-green-900-50: var(--c-color-green-900);
188
+ --c-color-orange-50-900: var(--c-color-orange-50);
189
+ --c-color-orange-100-800: var(--c-color-orange-100);
190
+ --c-color-orange-200-700: var(--c-color-orange-200);
191
+ --c-color-orange: var(--c-color-orange-200);
192
+ --c-color-orange-300-600: var(--c-color-orange-300);
193
+ --c-color-orange-400-500: var(--c-color-orange-400);
194
+ --c-color-orange-500-400: var(--c-color-orange-500);
195
+ --c-color-orange-600-300: var(--c-color-orange-600);
196
+ --c-color-orange-700-200: var(--c-color-orange-700);
197
+ --c-color-orange-800-100: var(--c-color-orange-800);
198
+ --c-color-orange-900-50: var(--c-color-orange-900);
199
+ --c-color-s-red-50-900: var(--c-color-s-red-50);
200
+ --c-color-s-red-100-800: var(--c-color-s-red-100);
201
+ --c-color-s-red-200-700: var(--c-color-s-red-200);
202
+ --c-color-s-red-300-600: var(--c-color-s-red-300);
203
+ --c-color-s-red-400-500: var(--c-color-s-red-400);
204
+ --c-color-s-red: var(--c-color-s-red-400);
205
+ --c-color-s-red-500-400: var(--c-color-s-red-500);
206
+ --c-color-s-red-600-300: var(--c-color-s-red-600);
207
+ --c-color-s-red-700-200: var(--c-color-s-red-700);
208
+ --c-color-s-red-800-100: var(--c-color-s-red-800);
209
+ --c-color-s-red-900-50: var(--c-color-s-red-900);
210
+ --c-color-s-orange-50-900: var(--c-color-s-orange-50);
211
+ --c-color-s-orange-100-800: var(--c-color-s-orange-100);
212
+ --c-color-s-orange-200-700: var(--c-color-s-orange-200);
213
+ --c-color-s-orange-300-600: var(--c-color-s-orange-300);
214
+ --c-color-s-orange: var(--c-color-s-orange-300);
215
+ --c-color-s-orange-400-500: var(--c-color-s-orange-400);
216
+ --c-color-s-orange-500-400: var(--c-color-s-orange-500);
217
+ --c-color-s-orange-600-300: var(--c-color-s-orange-600);
218
+ --c-color-s-orange-700-200: var(--c-color-s-orange-700);
219
+ --c-color-s-orange-800-100: var(--c-color-s-orange-800);
220
+ --c-color-s-orange-900-50: var(--c-color-s-orange-900);
221
+ --c-color-s-yellow-50-900: var(--c-color-s-yellow-50);
222
+ --c-color-s-yellow-100-800: var(--c-color-s-yellow-100);
223
+ --c-color-s-yellow-200-700: var(--c-color-s-yellow-200);
224
+ --c-color-s-yellow: var(--c-color-s-yellow-200);
225
+ --c-color-s-yellow-300-600: var(--c-color-s-yellow-300);
226
+ --c-color-s-yellow-400-500: var(--c-color-s-yellow-400);
227
+ --c-color-s-yellow-500-400: var(--c-color-s-yellow-500);
228
+ --c-color-s-yellow-600-300: var(--c-color-s-yellow-600);
229
+ --c-color-s-yellow-700-200: var(--c-color-s-yellow-700);
230
+ --c-color-s-yellow-800-100: var(--c-color-s-yellow-800);
231
+ --c-color-s-yellow-900-50: var(--c-color-s-yellow-900);
232
+ --c-color-s-green-50-900: var(--c-color-s-green-50);
233
+ --c-color-s-green-100-800: var(--c-color-s-green-100);
234
+ --c-color-s-green-200-700: var(--c-color-s-green-200);
235
+ --c-color-s-green-300-600: var(--c-color-s-green-300);
236
+ --c-color-s-green: var(--c-color-s-green-300);
237
+ --c-color-s-green-400-500: var(--c-color-s-green-400);
238
+ --c-color-s-green-500-400: var(--c-color-s-green-500);
239
+ --c-color-s-green-600-300: var(--c-color-s-green-600);
240
+ --c-color-s-green-700-200: var(--c-color-s-green-700);
241
+ --c-color-s-green-800-100: var(--c-color-s-green-800);
242
+ --c-color-s-green-900-50: var(--c-color-s-green-900);
243
+ --c-color-s-blue-50-900: var(--c-color-s-blue-50);
244
+ --c-color-s-blue-100-800: var(--c-color-s-blue-100);
245
+ --c-color-s-blue-200-700: var(--c-color-s-blue-200);
246
+ --c-color-s-blue-300-600: var(--c-color-s-blue-300);
247
+ --c-color-s-blue-400-500: var(--c-color-s-blue-400);
248
+ --c-color-s-blue: var(--c-color-s-blue-400);
249
+ --c-color-s-blue-500-400: var(--c-color-s-blue-500);
250
+ --c-color-s-blue-600-300: var(--c-color-s-blue-600);
251
+ --c-color-s-blue-700-200: var(--c-color-s-blue-700);
252
+ --c-color-s-blue-800-100: var(--c-color-s-blue-800);
253
+ --c-color-s-blue-900-50: var(--c-color-s-blue-900);
254
+ --c-color-s-purple-50-900: var(--c-color-s-purple-50);
255
+ --c-color-s-purple-100-800: var(--c-color-s-purple-100);
256
+ --c-color-s-purple-200-700: var(--c-color-s-purple-200);
257
+ --c-color-s-purple-300-600: var(--c-color-s-purple-300);
258
+ --c-color-s-purple-400-500: var(--c-color-s-purple-400);
259
+ --c-color-s-purple: var(--c-color-s-purple-400);
260
+ --c-color-s-purple-500-400: var(--c-color-s-purple-500);
261
+ --c-color-s-purple-600-300: var(--c-color-s-purple-600);
262
+ --c-color-s-purple-700-200: var(--c-color-s-purple-700);
263
+ --c-color-s-purple-800-100: var(--c-color-s-purple-800);
264
+ --c-color-s-purple-900-50: var(--c-color-s-purple-900);
265
+ --c-color-s-pink-50-900: var(--c-color-s-pink-50);
266
+ --c-color-s-pink-100-800: var(--c-color-s-pink-100);
267
+ --c-color-s-pink-200-700: var(--c-color-s-pink-200);
268
+ --c-color-s-pink-300-600: var(--c-color-s-pink-300);
269
+ --c-color-s-pink: var(--c-color-s-pink-300);
270
+ --c-color-s-pink-400-500: var(--c-color-s-pink-400);
271
+ --c-color-s-pink-500-400: var(--c-color-s-pink-500);
272
+ --c-color-s-pink-600-300: var(--c-color-s-pink-600);
273
+ --c-color-s-pink-700-200: var(--c-color-s-pink-700);
274
+ --c-color-s-pink-800-100: var(--c-color-s-pink-800);
275
+ --c-color-s-pink-900-50: var(--c-color-s-pink-900);
276
+ --c-color-elevate: 255 255 255;
277
+ --c-color-overlay: 0 0 0 ;
278
+ }
279
+ .c-dark {
280
+ --c-color-cyan-50-900: var(--c-color-cyan-900);
281
+ --c-color-cyan-100-800: var(--c-color-cyan-800);
282
+ --c-color-cyan-200-700: var(--c-color-cyan-700);
283
+ --c-color-cyan: var(--c-color-cyan-700);
284
+ --c-color-cyan-300-600: var(--c-color-cyan-600);
285
+ --c-color-cyan-400-500: var(--c-color-cyan-500);
286
+ --c-color-cyan-500-400: var(--c-color-cyan-400);
287
+ --c-color-cyan-600-300: var(--c-color-cyan-300);
288
+ --c-color-cyan-700-200: var(--c-color-cyan-200);
289
+ --c-color-cyan-800-100: var(--c-color-cyan-100);
290
+ --c-color-cyan-900-50: var(--c-color-cyan-50);
291
+ --c-color-pink-50-900: var(--c-color-pink-900);
292
+ --c-color-pink-100-800: var(--c-color-pink-800);
293
+ --c-color-pink-200-700: var(--c-color-pink-700);
294
+ --c-color-pink-300-600: var(--c-color-pink-600);
295
+ --c-color-pink: var(--c-color-pink-600);
296
+ --c-color-pink-400-500: var(--c-color-pink-500);
297
+ --c-color-pink-500-400: var(--c-color-pink-400);
298
+ --c-color-pink-600-300: var(--c-color-pink-300);
299
+ --c-color-pink-700-200: var(--c-color-pink-200);
300
+ --c-color-pink-800-100: var(--c-color-pink-100);
301
+ --c-color-pink-900-50: var(--c-color-pink-50);
302
+ --c-color-gray-50-900: var(--c-color-gray-900);
303
+ --c-color-gray-100-800: var(--c-color-gray-800);
304
+ --c-color-gray-200-700: var(--c-color-gray-700);
305
+ --c-color-gray-300-600: var(--c-color-gray-600);
306
+ --c-color-gray-400-500: var(--c-color-gray-500);
307
+ --c-color-gray-500-400: var(--c-color-gray-400);
308
+ --c-color-gray-600-300: var(--c-color-gray-300);
309
+ --c-color-gray-700-200: var(--c-color-gray-200);
310
+ --c-color-gray: var(--c-color-gray-200);
311
+ --c-color-gray-800-100: var(--c-color-gray-100);
312
+ --c-color-gray-900-50: var(--c-color-gray-50);
313
+ --c-color-purple-50-900: var(--c-color-purple-900);
314
+ --c-color-purple: var(--c-color-purple-900);
315
+ --c-color-purple-100-800: var(--c-color-purple-800);
316
+ --c-color-purple-200-700: var(--c-color-purple-700);
317
+ --c-color-purple-300-600: var(--c-color-purple-600);
318
+ --c-color-purple-400-500: var(--c-color-purple-500);
319
+ --c-color-purple-500-400: var(--c-color-purple-400);
320
+ --c-color-purple-600-300: var(--c-color-purple-300);
321
+ --c-color-purple-700-200: var(--c-color-purple-200);
322
+ --c-color-purple-800-100: var(--c-color-purple-100);
323
+ --c-color-purple-900-50: var(--c-color-purple-50);
324
+ --c-color-green-50-900: var(--c-color-green-900);
325
+ --c-color-green-100-800: var(--c-color-green-800);
326
+ --c-color-green-200-700: var(--c-color-green-700);
327
+ --c-color-green-300-600: var(--c-color-green-600);
328
+ --c-color-green-400-500: var(--c-color-green-500);
329
+ --c-color-green: var(--c-color-green-500);
330
+ --c-color-green-500-400: var(--c-color-green-400);
331
+ --c-color-green-600-300: var(--c-color-green-300);
332
+ --c-color-green-700-200: var(--c-color-green-200);
333
+ --c-color-green-800-100: var(--c-color-green-100);
334
+ --c-color-green-900-50: var(--c-color-green-50);
335
+ --c-color-orange-50-900: var(--c-color-orange-900);
336
+ --c-color-orange-100-800: var(--c-color-orange-800);
337
+ --c-color-orange-200-700: var(--c-color-orange-700);
338
+ --c-color-orange: var(--c-color-orange-700);
339
+ --c-color-orange-300-600: var(--c-color-orange-600);
340
+ --c-color-orange-400-500: var(--c-color-orange-500);
341
+ --c-color-orange-500-400: var(--c-color-orange-400);
342
+ --c-color-orange-600-300: var(--c-color-orange-300);
343
+ --c-color-orange-700-200: var(--c-color-orange-200);
344
+ --c-color-orange-800-100: var(--c-color-orange-100);
345
+ --c-color-orange-900-50: var(--c-color-orange-50);
346
+ --c-color-s-red-50-900: var(--c-color-s-red-900);
347
+ --c-color-s-red-100-800: var(--c-color-s-red-800);
348
+ --c-color-s-red-200-700: var(--c-color-s-red-700);
349
+ --c-color-s-red-300-600: var(--c-color-s-red-600);
350
+ --c-color-s-red-400-500: var(--c-color-s-red-500);
351
+ --c-color-s-red: var(--c-color-s-red-500);
352
+ --c-color-s-red-500-400: var(--c-color-s-red-400);
353
+ --c-color-s-red-600-300: var(--c-color-s-red-300);
354
+ --c-color-s-red-700-200: var(--c-color-s-red-200);
355
+ --c-color-s-red-800-100: var(--c-color-s-red-100);
356
+ --c-color-s-red-900-50: var(--c-color-s-red-50);
357
+ --c-color-s-orange-50-900: var(--c-color-s-orange-900);
358
+ --c-color-s-orange-100-800: var(--c-color-s-orange-800);
359
+ --c-color-s-orange-200-700: var(--c-color-s-orange-700);
360
+ --c-color-s-orange-300-600: var(--c-color-s-orange-600);
361
+ --c-color-s-orange: var(--c-color-s-orange-600);
362
+ --c-color-s-orange-400-500: var(--c-color-s-orange-500);
363
+ --c-color-s-orange-500-400: var(--c-color-s-orange-400);
364
+ --c-color-s-orange-600-300: var(--c-color-s-orange-300);
365
+ --c-color-s-orange-700-200: var(--c-color-s-orange-200);
366
+ --c-color-s-orange-800-100: var(--c-color-s-orange-100);
367
+ --c-color-s-orange-900-50: var(--c-color-s-orange-50);
368
+ --c-color-s-yellow-50-900: var(--c-color-s-yellow-900);
369
+ --c-color-s-yellow-100-800: var(--c-color-s-yellow-800);
370
+ --c-color-s-yellow-200-700: var(--c-color-s-yellow-700);
371
+ --c-color-s-yellow: var(--c-color-s-yellow-700);
372
+ --c-color-s-yellow-300-600: var(--c-color-s-yellow-600);
373
+ --c-color-s-yellow-400-500: var(--c-color-s-yellow-500);
374
+ --c-color-s-yellow-500-400: var(--c-color-s-yellow-400);
375
+ --c-color-s-yellow-600-300: var(--c-color-s-yellow-300);
376
+ --c-color-s-yellow-700-200: var(--c-color-s-yellow-200);
377
+ --c-color-s-yellow-800-100: var(--c-color-s-yellow-100);
378
+ --c-color-s-yellow-900-50: var(--c-color-s-yellow-50);
379
+ --c-color-s-green-50-900: var(--c-color-s-green-900);
380
+ --c-color-s-green-100-800: var(--c-color-s-green-800);
381
+ --c-color-s-green-200-700: var(--c-color-s-green-700);
382
+ --c-color-s-green-300-600: var(--c-color-s-green-600);
383
+ --c-color-s-green: var(--c-color-s-green-600);
384
+ --c-color-s-green-400-500: var(--c-color-s-green-500);
385
+ --c-color-s-green-500-400: var(--c-color-s-green-400);
386
+ --c-color-s-green-600-300: var(--c-color-s-green-300);
387
+ --c-color-s-green-700-200: var(--c-color-s-green-200);
388
+ --c-color-s-green-800-100: var(--c-color-s-green-100);
389
+ --c-color-s-green-900-50: var(--c-color-s-green-50);
390
+ --c-color-s-blue-50-900: var(--c-color-s-blue-900);
391
+ --c-color-s-blue-100-800: var(--c-color-s-blue-800);
392
+ --c-color-s-blue-200-700: var(--c-color-s-blue-700);
393
+ --c-color-s-blue-300-600: var(--c-color-s-blue-600);
394
+ --c-color-s-blue-400-500: var(--c-color-s-blue-500);
395
+ --c-color-s-blue: var(--c-color-s-blue-500);
396
+ --c-color-s-blue-500-400: var(--c-color-s-blue-400);
397
+ --c-color-s-blue-600-300: var(--c-color-s-blue-300);
398
+ --c-color-s-blue-700-200: var(--c-color-s-blue-200);
399
+ --c-color-s-blue-800-100: var(--c-color-s-blue-100);
400
+ --c-color-s-blue-900-50: var(--c-color-s-blue-50);
401
+ --c-color-s-purple-50-900: var(--c-color-s-purple-900);
402
+ --c-color-s-purple-100-800: var(--c-color-s-purple-800);
403
+ --c-color-s-purple-200-700: var(--c-color-s-purple-700);
404
+ --c-color-s-purple-300-600: var(--c-color-s-purple-600);
405
+ --c-color-s-purple-400-500: var(--c-color-s-purple-500);
406
+ --c-color-s-purple: var(--c-color-s-purple-500);
407
+ --c-color-s-purple-500-400: var(--c-color-s-purple-400);
408
+ --c-color-s-purple-600-300: var(--c-color-s-purple-300);
409
+ --c-color-s-purple-700-200: var(--c-color-s-purple-200);
410
+ --c-color-s-purple-800-100: var(--c-color-s-purple-100);
411
+ --c-color-s-purple-900-50: var(--c-color-s-purple-50);
412
+ --c-color-s-pink-50-900: var(--c-color-s-pink-900);
413
+ --c-color-s-pink-100-800: var(--c-color-s-pink-800);
414
+ --c-color-s-pink-200-700: var(--c-color-s-pink-700);
415
+ --c-color-s-pink-300-600: var(--c-color-s-pink-600);
416
+ --c-color-s-pink: var(--c-color-s-pink-600);
417
+ --c-color-s-pink-400-500: var(--c-color-s-pink-500);
418
+ --c-color-s-pink-500-400: var(--c-color-s-pink-400);
419
+ --c-color-s-pink-600-300: var(--c-color-s-pink-300);
420
+ --c-color-s-pink-700-200: var(--c-color-s-pink-200);
421
+ --c-color-s-pink-800-100: var(--c-color-s-pink-100);
422
+ --c-color-s-pink-900-50: var(--c-color-s-pink-50);
423
+ --c-color-elevate: var(--c-color-purple-50-900);
424
+ --c-color-overlay: 0 0 0 ;
425
+ }
426
+ body {
427
+ font-family:
428
+ Roboto,
429
+ ui-sans-serif,
430
+ system-ui,
431
+ -apple-system,
432
+ BlinkMacSystemFont,
433
+ "Segoe UI",
434
+ Roboto,
435
+ "Helvetica Neue",
436
+ Arial,
437
+ "Noto Sans",
438
+ sans-serif,
439
+ "Apple Color Emoji",
440
+ "Segoe UI Emoji",
441
+ "Segoe UI Symbol",
442
+ "Noto Color Emoji";
443
+ color: rgb(var(--c-color-gray));
444
+ }
445
+ input,
446
+ textarea,
447
+ button {
448
+ font-family:
449
+ Roboto,
450
+ ui-sans-serif,
451
+ system-ui,
452
+ -apple-system,
453
+ BlinkMacSystemFont,
454
+ "Segoe UI",
455
+ Roboto,
456
+ "Helvetica Neue",
457
+ Arial,
458
+ "Noto Sans",
459
+ sans-serif,
460
+ "Apple Color Emoji",
461
+ "Segoe UI Emoji",
462
+ "Segoe UI Symbol",
463
+ "Noto Color Emoji";
464
+ color: rgb(var(--c-color-gray));
465
+ }
466
+ .transform,
467
+ .active\:scale-95 {
468
+ --tw-translate-x: 0;
469
+ --tw-translate-y: 0;
470
+ --tw-rotate: 0;
471
+ --tw-skew-x: 0;
472
+ --tw-skew-y: 0;
473
+ --tw-scale-x: 1;
474
+ --tw-scale-y: 1 ;
475
+ }
476
+ .shadow-md,
477
+ .shadow-sm {
478
+ --tw-ring-offset-shadow: 0 0 #0000;
479
+ --tw-ring-shadow: 0 0 #0000;
480
+ --tw-shadow: 0 0 #0000;
481
+ --tw-shadow-colored: 0 0 #0000 ;
482
+ }
483
+ .filter {
484
+ --tw-blur: ;
485
+ --tw-brightness: ;
486
+ --tw-contrast: ;
487
+ --tw-grayscale: ;
488
+ --tw-hue-rotate: ;
489
+ --tw-invert: ;
490
+ --tw-saturate: ;
491
+ --tw-sepia: ;
492
+ --tw-drop-shadow: ;
493
+ }
494
+ .container {
495
+ width: 100%;
496
+ }
497
+ @media (min-width: 640px) {
498
+ .container {
499
+ max-width: 640px;
500
+ }
501
+ }
502
+ @media (min-width: 768px) {
503
+ .container {
504
+ max-width: 768px;
505
+ }
506
+ }
507
+ @media (min-width: 1024px) {
508
+ .container {
509
+ max-width: 1024px;
510
+ }
511
+ }
512
+ @media (min-width: 1280px) {
513
+ .container {
514
+ max-width: 1280px;
515
+ }
516
+ }
517
+ @media (min-width: 1536px) {
518
+ .container {
519
+ max-width: 1536px;
520
+ }
521
+ }
522
+ .sr-only {
523
+ position: absolute;
524
+ width: 1px;
525
+ height: 1px;
526
+ padding: 0;
527
+ margin: -1px;
528
+ overflow: hidden;
529
+ clip: rect(0, 0, 0, 0);
530
+ white-space: nowrap;
531
+ border-width: 0;
532
+ }
533
+ .pointer-events-none {
534
+ pointer-events: none;
535
+ }
536
+ .invisible {
537
+ visibility: hidden;
538
+ }
539
+ .static {
540
+ position: static;
541
+ }
542
+ .absolute {
543
+ position: absolute;
544
+ }
545
+ .relative {
546
+ position: relative;
547
+ }
548
+ .top-2 {
549
+ top: 0.5rem;
550
+ }
551
+ .left-2 {
552
+ left: 0.5rem;
553
+ }
554
+ .right-2 {
555
+ right: 0.5rem;
556
+ }
557
+ .top-0 {
558
+ top: 0px;
559
+ }
560
+ .left-6 {
561
+ left: 1.5rem;
562
+ }
563
+ .right-10 {
564
+ right: 2.5rem;
565
+ }
566
+ .z-50 {
567
+ z-index: 50;
568
+ }
569
+ .my-6 {
570
+ margin-top: 1.5rem;
571
+ margin-bottom: 1.5rem;
572
+ }
573
+ .mx-auto {
574
+ margin-left: auto;
575
+ margin-right: auto;
576
+ }
577
+ .my-1 {
578
+ margin-top: 0.25rem;
579
+ margin-bottom: 0.25rem;
580
+ }
581
+ .mt-8 {
582
+ margin-top: 2rem;
583
+ }
584
+ .mt-4 {
585
+ margin-top: 1rem;
586
+ }
587
+ .mt-2 {
588
+ margin-top: 0.5rem;
589
+ }
590
+ .mt-3 {
591
+ margin-top: 0.75rem;
592
+ }
593
+ .mb-4 {
594
+ margin-bottom: 1rem;
595
+ }
596
+ .ml-5 {
597
+ margin-left: 1.25rem;
598
+ }
599
+ .mt-1 {
600
+ margin-top: 0.25rem;
601
+ }
602
+ .block {
603
+ display: block;
604
+ }
605
+ .inline-block {
606
+ display: inline-block;
607
+ }
608
+ .inline {
609
+ display: inline;
610
+ }
611
+ .flex {
612
+ display: flex;
613
+ }
614
+ .\!flex {
615
+ display: flex !important;
616
+ }
617
+ .table {
618
+ display: table;
619
+ }
620
+ .table-cell {
621
+ display: table-cell;
622
+ }
623
+ .table-row {
624
+ display: table-row;
625
+ }
626
+ .grid {
627
+ display: grid;
628
+ }
629
+ .list-item {
630
+ display: list-item;
631
+ }
632
+ .hidden {
633
+ display: none;
634
+ }
635
+ .h-24 {
636
+ height: 6rem;
637
+ }
638
+ .h-\[8px\] {
639
+ height: 8px;
640
+ }
641
+ .h-\[44px\] {
642
+ height: 44px;
643
+ }
644
+ .h-full {
645
+ height: 100%;
646
+ }
647
+ .h-6 {
648
+ height: 1.5rem;
649
+ }
650
+ .h-5 {
651
+ height: 1.25rem;
652
+ }
653
+ .w-\[8px\] {
654
+ width: 8px;
655
+ }
656
+ .w-\[44px\] {
657
+ width: 44px;
658
+ }
659
+ .w-full {
660
+ width: 100%;
661
+ }
662
+ .w-6 {
663
+ width: 1.5rem;
664
+ }
665
+ .w-4 {
666
+ width: 1rem;
667
+ }
668
+ .w-5 {
669
+ width: 1.25rem;
670
+ }
671
+ .min-w-\[44px\] {
672
+ min-width: 44px;
673
+ }
674
+ .min-w-\[150px\] {
675
+ min-width: 150px;
676
+ }
677
+ .min-w-\[200px\] {
678
+ min-width: 200px;
679
+ }
680
+ .max-w-\[1100px\] {
681
+ max-width: 1100px;
682
+ }
683
+ .max-w-full {
684
+ max-width: 100%;
685
+ }
686
+ .flex-1 {
687
+ flex: 1 1 0%;
688
+ }
689
+ .transform {
690
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
691
+ }
692
+ .cursor-pointer {
693
+ cursor: pointer;
694
+ }
695
+ .select-none {
696
+ user-select: none;
697
+ }
698
+ .resize {
699
+ resize: both;
700
+ }
701
+ .grid-cols-6 {
702
+ grid-template-columns: repeat(6, minmax(0, 1fr));
703
+ }
704
+ .grid-cols-10 {
705
+ grid-template-columns: repeat(10, minmax(0, 1fr));
706
+ }
707
+ .grid-cols-5 {
708
+ grid-template-columns: repeat(5, minmax(0, 1fr));
709
+ }
710
+ .grid-cols-\[1fr_1px_1fr\] {
711
+ grid-template-columns: 1fr 1px 1fr;
712
+ }
713
+ .flex-col {
714
+ flex-direction: column;
715
+ }
716
+ .flex-nowrap {
717
+ flex-wrap: nowrap;
718
+ }
719
+ .items-start {
720
+ align-items: flex-start;
721
+ }
722
+ .items-center {
723
+ align-items: center;
724
+ }
725
+ .justify-end {
726
+ justify-content: flex-end;
727
+ }
728
+ .justify-center {
729
+ justify-content: center;
730
+ }
731
+ .justify-between {
732
+ justify-content: space-between;
733
+ }
734
+ .justify-items-center {
735
+ justify-items: center;
736
+ }
737
+ .gap-6 {
738
+ gap: 1.5rem;
739
+ }
740
+ .gap-4 {
741
+ gap: 1rem;
742
+ }
743
+ .gap-1 {
744
+ gap: 0.25rem;
745
+ }
746
+ .gap-0\.5 {
747
+ gap: 0.125rem;
748
+ }
749
+ .gap-0 {
750
+ gap: 0px;
751
+ }
752
+ .space-x-2 > :not([hidden]) ~ :not([hidden]) {
753
+ --tw-space-x-reverse: 0;
754
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
755
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
756
+ }
757
+ .space-y-4 > :not([hidden]) ~ :not([hidden]) {
758
+ --tw-space-y-reverse: 0;
759
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
760
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
761
+ }
762
+ .space-x-6 > :not([hidden]) ~ :not([hidden]) {
763
+ --tw-space-x-reverse: 0;
764
+ margin-right: calc(1.5rem * var(--tw-space-x-reverse));
765
+ margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
766
+ }
767
+ .space-y-2 > :not([hidden]) ~ :not([hidden]) {
768
+ --tw-space-y-reverse: 0;
769
+ margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
770
+ margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
771
+ }
772
+ .space-y-6 > :not([hidden]) ~ :not([hidden]) {
773
+ --tw-space-y-reverse: 0;
774
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
775
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
776
+ }
777
+ .self-end {
778
+ align-self: flex-end;
779
+ }
780
+ .overflow-hidden {
781
+ overflow: hidden;
782
+ }
783
+ .text-ellipsis {
784
+ text-overflow: ellipsis;
785
+ }
786
+ .whitespace-nowrap {
787
+ white-space: nowrap;
788
+ }
789
+ .rounded {
790
+ border-radius: 0.25rem;
791
+ }
792
+ .rounded-lg {
793
+ border-radius: 0.5rem;
794
+ }
795
+ .rounded-md {
796
+ border-radius: 0.375rem;
797
+ }
798
+ .rounded-sm {
799
+ border-radius: 0.125rem;
800
+ }
801
+ .border {
802
+ border-width: 1px;
803
+ }
804
+ .border-0 {
805
+ border-width: 0px;
806
+ }
807
+ .border-b {
808
+ border-bottom-width: 1px;
809
+ }
810
+ .border-solid {
811
+ border-style: solid;
812
+ }
813
+ .border-gray-100-800 {
814
+ --tw-border-opacity: 1;
815
+ border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
816
+ }
817
+ .bg-gray {
818
+ background-color: rgb(var(--c-color-gray));
819
+ }
820
+ .bg-gray-50-900 {
821
+ --tw-bg-opacity: 1;
822
+ background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
823
+ }
824
+ .bg-white {
825
+ --tw-bg-opacity: 1;
826
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
827
+ }
828
+ .bg-gray-100-800 {
829
+ --tw-bg-opacity: 1;
830
+ background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
831
+ }
832
+ .bg-purple-50-900 {
833
+ --tw-bg-opacity: 1;
834
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
835
+ }
836
+ .\!bg-purple-50-900 {
837
+ --tw-bg-opacity: 1 !important;
838
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity)) !important;
839
+ }
840
+ .bg-\[length\:18px_18px\] {
841
+ background-size: 18px 18px;
842
+ }
843
+ .bg-\[length\:17px_17px\] {
844
+ background-size: 17px 17px;
845
+ }
846
+ .bg-\[length\:16px_16px\] {
847
+ background-size: 16px 16px;
848
+ }
849
+ .bg-\[length\:20px_20px\] {
850
+ background-size: 20px 20px;
851
+ }
852
+ .bg-center {
853
+ background-position: center;
854
+ }
855
+ .bg-no-repeat {
856
+ background-repeat: no-repeat;
857
+ }
858
+ .p-4 {
859
+ padding: 1rem;
860
+ }
861
+ .p-\[5px\] {
862
+ padding: 5px;
863
+ }
864
+ .p-10 {
865
+ padding: 2.5rem;
866
+ }
867
+ .px-3 {
868
+ padding-left: 0.75rem;
869
+ padding-right: 0.75rem;
870
+ }
871
+ .px-6 {
872
+ padding-left: 1.5rem;
873
+ padding-right: 1.5rem;
874
+ }
875
+ .py-2 {
876
+ padding-top: 0.5rem;
877
+ padding-bottom: 0.5rem;
878
+ }
879
+ .px-1 {
880
+ padding-left: 0.25rem;
881
+ padding-right: 0.25rem;
882
+ }
883
+ .py-0\.5 {
884
+ padding-top: 0.125rem;
885
+ padding-bottom: 0.125rem;
886
+ }
887
+ .py-0 {
888
+ padding-top: 0px;
889
+ padding-bottom: 0px;
890
+ }
891
+ .text-center {
892
+ text-align: center;
893
+ }
894
+ .font-sans {
895
+ font-family:
896
+ Roboto,
897
+ ui-sans-serif,
898
+ system-ui,
899
+ -apple-system,
900
+ BlinkMacSystemFont,
901
+ "Segoe UI",
902
+ Roboto,
903
+ "Helvetica Neue",
904
+ Arial,
905
+ "Noto Sans",
906
+ sans-serif,
907
+ "Apple Color Emoji",
908
+ "Segoe UI Emoji",
909
+ "Segoe UI Symbol",
910
+ "Noto Color Emoji";
911
+ }
912
+ .text-sm {
913
+ font-size: 0.875rem;
914
+ line-height: 1.25rem;
915
+ }
916
+ .text-xs {
917
+ font-size: 0.75rem;
918
+ line-height: 1rem;
919
+ }
920
+ .text-\[14px\] {
921
+ font-size: 14px;
922
+ }
923
+ .text-\[10px\] {
924
+ font-size: 10px;
925
+ }
926
+ .font-normal {
927
+ font-weight: 400;
928
+ }
929
+ .font-bold {
930
+ font-weight: 700;
931
+ }
932
+ .font-medium {
933
+ font-weight: 500;
934
+ }
935
+ .italic {
936
+ font-style: italic;
937
+ }
938
+ .leading-6 {
939
+ line-height: 1.5rem;
940
+ }
941
+ .text-gray {
942
+ color: rgb(var(--c-color-gray));
943
+ }
944
+ .text-gray-700-200 {
945
+ --tw-text-opacity: 1;
946
+ color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
947
+ }
948
+ .text-gray-300-600 {
949
+ --tw-text-opacity: 1;
950
+ color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity));
951
+ }
952
+ .text-gray-600-300 {
953
+ --tw-text-opacity: 1;
954
+ color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity));
955
+ }
956
+ .text-pink-600-300 {
957
+ --tw-text-opacity: 1;
958
+ color: rgb(var(--c-color-pink-600-300) / var(--tw-text-opacity));
959
+ }
960
+ .underline {
961
+ text-decoration-line: underline;
962
+ }
963
+ .opacity-100 {
964
+ opacity: 1;
965
+ }
966
+ .opacity-60 {
967
+ opacity: 0.6;
968
+ }
969
+ .opacity-30 {
970
+ opacity: 0.3;
971
+ }
972
+ .opacity-80 {
973
+ opacity: 0.8;
974
+ }
975
+ .shadow-md {
976
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
977
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
978
+ box-shadow:
979
+ var(--tw-ring-offset-shadow, 0 0 #0000),
980
+ var(--tw-ring-shadow, 0 0 #0000),
981
+ var(--tw-shadow);
982
+ }
983
+ .shadow-sm {
984
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
985
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
986
+ box-shadow:
987
+ var(--tw-ring-offset-shadow, 0 0 #0000),
988
+ var(--tw-ring-shadow, 0 0 #0000),
989
+ var(--tw-shadow);
990
+ }
991
+ .filter {
992
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
993
+ }
994
+ .transition {
995
+ transition-property:
996
+ color,
997
+ background-color,
998
+ border-color,
999
+ text-decoration-color,
1000
+ fill,
1001
+ stroke,
1002
+ opacity,
1003
+ box-shadow,
1004
+ transform,
1005
+ filter,
1006
+ backdrop-filter;
1007
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1008
+ transition-duration: 150ms;
1009
+ }
1010
+ .active\:scale-95:active {
1011
+ --tw-scale-x: .95;
1012
+ --tw-scale-y: .95;
1013
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1014
+ }
1015
+
1016
+ /* src/button/button.css */
1017
+ .c-btn {
1018
+ display: inline-grid;
1019
+ cursor: pointer;
1020
+ grid-auto-flow: column;
1021
+ align-items: center;
1022
+ gap: 0.5rem;
1023
+ white-space: nowrap;
1024
+ border-radius: 0.25rem;
1025
+ border-style: none;
1026
+ background-color: transparent;
1027
+ font-family:
1028
+ Roboto,
1029
+ ui-sans-serif,
1030
+ system-ui,
1031
+ -apple-system,
1032
+ BlinkMacSystemFont,
1033
+ "Segoe UI",
1034
+ Roboto,
1035
+ "Helvetica Neue",
1036
+ Arial,
1037
+ "Noto Sans",
1038
+ sans-serif,
1039
+ "Apple Color Emoji",
1040
+ "Segoe UI Emoji",
1041
+ "Segoe UI Symbol",
1042
+ "Noto Color Emoji";
1043
+ font-weight: 600;
1044
+ color: rgb(var(--c-color-gray));
1045
+ text-decoration-line: none;
1046
+ outline-offset: -1px;
1047
+ }
1048
+ .c-btn:focus-visible {
1049
+ outline-style: solid;
1050
+ outline-width: 1px;
1051
+ outline-color: inherit;
1052
+ outline-color: currentColor;
1053
+ }
1054
+ .c-btn:disabled {
1055
+ cursor: default;
1056
+ --tw-text-opacity: 1;
1057
+ color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity));
1058
+ }
1059
+ .c-btn__prepend,
1060
+ .c-btn__append {
1061
+ display: flex;
1062
+ align-items: center;
1063
+ }
1064
+ .c-btn__prepend {
1065
+ margin-left: -0.5rem;
1066
+ }
1067
+ .c-btn__append {
1068
+ margin-right: -0.5rem;
1069
+ }
1070
+ .c-btn__loading-spinner {
1071
+ position: absolute;
1072
+ left: 0.25rem;
1073
+ display: flex;
1074
+ align-items: center;
1075
+ justify-content: center;
1076
+ }
1077
+ .c-btn,
1078
+ .c-btn .c-btn__loading-spinner {
1079
+ --tw-bg-opacity: 1;
1080
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
1081
+ }
1082
+ .c-btn:not(:disabled):hover {
1083
+ outline-style: solid;
1084
+ outline-width: 1px;
1085
+ outline-color: rgb(var(--c-color-purple-200-700) / 1);
1086
+ }
1087
+ .c-btn:not(:disabled):active {
1088
+ --tw-bg-opacity: 1;
1089
+ background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
1090
+ }
1091
+ .c-btn-loading {
1092
+ position: relative;
1093
+ }
1094
+ .c-btn-loading .c-btn__prepend,
1095
+ .c-btn-loading .c-btn__append {
1096
+ opacity: 0;
1097
+ transition-property: opacity;
1098
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1099
+ transition-duration: 150ms;
1100
+ }
1101
+ .c-btn-elevate {
1102
+ --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
1103
+ --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
1104
+ box-shadow:
1105
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1106
+ var(--tw-ring-shadow, 0 0 #0000),
1107
+ var(--tw-shadow);
1108
+ }
1109
+ .c-btn-elevate,
1110
+ .c-btn-elevate .c-btn__loading-spinner {
1111
+ --tw-bg-opacity: 1;
1112
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
1113
+ }
1114
+ .c-btn-elevate:not(:disabled):hover {
1115
+ outline-color: rgb(var(--c-color-gray-100-800) / 1);
1116
+ }
1117
+ .c-btn-elevate:not(:disabled):active {
1118
+ --tw-bg-opacity: 1;
1119
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
1120
+ }
1121
+ .c-btn-action,
1122
+ .c-btn-action .c-btn__loading-spinner {
1123
+ --tw-bg-opacity: 1;
1124
+ background-color: rgb(var(--c-color-cyan-100-800) / var(--tw-bg-opacity));
1125
+ }
1126
+ .c-btn-action:not(:disabled):hover {
1127
+ outline-style: solid;
1128
+ outline-width: 1px;
1129
+ outline-color: rgb(var(--c-color-cyan-300-600) / 1);
1130
+ }
1131
+ .c-btn-action:not(:disabled):active {
1132
+ --tw-bg-opacity: 1;
1133
+ background-color: rgb(var(--c-color-cyan-200-700) / var(--tw-bg-opacity));
1134
+ }
1135
+ .c-btn-danger {
1136
+ --tw-text-opacity: 1;
1137
+ color: rgb(var(--c-color-pink-600-300) / var(--tw-text-opacity));
1138
+ }
1139
+ .c-btn-danger:not(:disabled):hover {
1140
+ outline-color: rgb(var(--c-color-pink-300-600) / 1);
1141
+ }
1142
+ .c-btn-xs {
1143
+ height: 1.5rem;
1144
+ padding-top: 0.5rem;
1145
+ padding-bottom: 0.5rem;
1146
+ padding-left: 1rem;
1147
+ padding-right: 1rem;
1148
+ }
1149
+ .c-btn-xs .c-btn__loading-spinner {
1150
+ left: 3px;
1151
+ }
1152
+ .c-btn-sm {
1153
+ height: 2.25rem;
1154
+ padding-left: 1.5rem;
1155
+ padding-right: 1.5rem;
1156
+ font-size: 0.875rem;
1157
+ line-height: 1.25rem;
1158
+ }
1159
+ .c-btn-md {
1160
+ height: 2.75rem;
1161
+ padding-left: 2rem;
1162
+ padding-right: 2rem;
1163
+ font-size: 1rem;
1164
+ line-height: 1.5rem;
1165
+ }
1166
+ .c-btn-lg {
1167
+ height: 3.5rem;
1168
+ padding-left: 2.5rem;
1169
+ padding-right: 2.5rem;
1170
+ font-size: 1.125rem;
1171
+ line-height: 1.75rem;
1172
+ }
1173
+ .c-btn-lg .c-btn__loading-spinner {
1174
+ left: 0.5rem;
1175
+ }
1176
+
1177
+ /* src/spinner/spinner.css */
1178
+ .c-spinner {
1179
+ display: inline-flex;
1180
+ align-items: center;
1181
+ }
1182
+ @keyframes spin {
1183
+ to {
1184
+ transform: rotate(360deg);
1185
+ }
1186
+ 0% {
1187
+ transform: rotate(0deg);
1188
+ stroke-dashoffset: 26.4;
1189
+ }
1190
+ 50% {
1191
+ transform: rotate(720deg);
1192
+ stroke-dashoffset: 125.6;
1193
+ }
1194
+ 100% {
1195
+ transform: rotate(1080deg);
1196
+ stroke-dashoffset: 26.4;
1197
+ }
1198
+ }
1199
+ .c-spinner-artifact {
1200
+ animation: spin 2s linear infinite;
1201
+ fill: transparent;
1202
+ }
1203
+ .c-spinner-children {
1204
+ margin-left: 15px;
1205
+ display: inline-block;
1206
+ }
1207
+
1208
+ /* src/card/card.css */
1209
+ .c-card {
1210
+ border-radius: 0.5rem;
1211
+ --tw-bg-opacity: 1;
1212
+ background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
1213
+ padding: 1rem;
1214
+ }
1215
+ @media (min-width: 640px) {
1216
+ .c-card {
1217
+ padding: 2rem;
1218
+ }
1219
+ }
1220
+ .c-card-elevate {
1221
+ --tw-bg-opacity: 1;
1222
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
1223
+ }
1224
+
1225
+ /* src/action-menu/action-menu.css */
1226
+ .c-action-menu {
1227
+ display: flex;
1228
+ height: 2rem;
1229
+ width: 2rem;
1230
+ flex-shrink: 0;
1231
+ --tw-rotate: 0deg;
1232
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1233
+ cursor: pointer;
1234
+ flex-direction: column;
1235
+ align-items: center;
1236
+ justify-content: center;
1237
+ gap: 2px;
1238
+ border-radius: 0.375rem;
1239
+ border-style: none;
1240
+ background-color: transparent;
1241
+ padding: 0.25rem;
1242
+ outline-offset: -1px;
1243
+ transition-property:
1244
+ color,
1245
+ background-color,
1246
+ border-color,
1247
+ text-decoration-color,
1248
+ fill,
1249
+ stroke,
1250
+ opacity,
1251
+ box-shadow,
1252
+ transform,
1253
+ filter,
1254
+ backdrop-filter;
1255
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1256
+ transition-duration: 150ms;
1257
+ }
1258
+ .c-action-menu-dot {
1259
+ height: 4px;
1260
+ width: 4px;
1261
+ border-radius: 9999px;
1262
+ background-color: rgb(var(--c-color-gray));
1263
+ }
1264
+ .c-action-menu[data-state=open],
1265
+ .c-action-menu [aria-expanded=true] {
1266
+ flex-direction: row;
1267
+ gap: 3px;
1268
+ }
1269
+ .c-action-menu:focus-visible {
1270
+ outline-style: solid;
1271
+ outline-width: 1px;
1272
+ outline-color: inherit;
1273
+ outline-color: currentColor;
1274
+ }
1275
+ .c-action-menu:not(:disabled):hover {
1276
+ gap: 3px;
1277
+ --tw-bg-opacity: 1;
1278
+ background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
1279
+ outline-style: solid;
1280
+ outline-width: 1px;
1281
+ outline-color: rgb(var(--c-color-purple-200-700) / 1);
1282
+ }
1283
+ .c-action-menu:not(:disabled):active {
1284
+ --tw-scale-x: .95;
1285
+ --tw-scale-y: .95;
1286
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1287
+ --tw-bg-opacity: 1;
1288
+ background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
1289
+ }
1290
+ .c-action-menu-item {
1291
+ display: flex;
1292
+ cursor: pointer;
1293
+ align-items: center;
1294
+ gap: 0.5rem;
1295
+ padding-top: 0.625rem;
1296
+ padding-bottom: 0.625rem;
1297
+ padding-left: 1.25rem;
1298
+ padding-right: 1.25rem;
1299
+ font-family:
1300
+ Roboto,
1301
+ ui-sans-serif,
1302
+ system-ui,
1303
+ -apple-system,
1304
+ BlinkMacSystemFont,
1305
+ "Segoe UI",
1306
+ Roboto,
1307
+ "Helvetica Neue",
1308
+ Arial,
1309
+ "Noto Sans",
1310
+ sans-serif,
1311
+ "Apple Color Emoji",
1312
+ "Segoe UI Emoji",
1313
+ "Segoe UI Symbol",
1314
+ "Noto Color Emoji";
1315
+ font-size: 0.875rem;
1316
+ line-height: 1.25rem;
1317
+ font-weight: 500;
1318
+ color: rgb(var(--c-color-gray));
1319
+ }
1320
+ .c-action-menu-item:hover {
1321
+ --tw-bg-opacity: 1;
1322
+ background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
1323
+ }
1324
+ .c-action-menu-item:focus {
1325
+ --tw-bg-opacity: 1;
1326
+ background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
1327
+ outline: 2px solid transparent;
1328
+ outline-offset: 2px;
1329
+ }
1330
+ .c-action-menu-item.danger {
1331
+ --tw-text-opacity: 1;
1332
+ color: rgb(var(--c-color-pink-600-300) / var(--tw-text-opacity));
1333
+ }
1334
+
1335
+ /* src/dropdown-menu/dropdown-menu.css */
1336
+ .c-dropdown-menu-content {
1337
+ --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
1338
+ --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
1339
+ box-shadow:
1340
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1341
+ var(--tw-ring-shadow, 0 0 #0000),
1342
+ var(--tw-shadow);
1343
+ }
1344
+ .c-dropdown-menu-label {
1345
+ --tw-bg-opacity: 1;
1346
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
1347
+ padding-left: 1rem;
1348
+ padding-right: 1rem;
1349
+ padding-top: 0.5rem;
1350
+ font-family:
1351
+ Roboto,
1352
+ ui-sans-serif,
1353
+ system-ui,
1354
+ -apple-system,
1355
+ BlinkMacSystemFont,
1356
+ "Segoe UI",
1357
+ Roboto,
1358
+ "Helvetica Neue",
1359
+ Arial,
1360
+ "Noto Sans",
1361
+ sans-serif,
1362
+ "Apple Color Emoji",
1363
+ "Segoe UI Emoji",
1364
+ "Segoe UI Symbol",
1365
+ "Noto Color Emoji";
1366
+ font-size: 0.75rem;
1367
+ line-height: 1rem;
1368
+ font-weight: 700;
1369
+ --tw-text-opacity: 1;
1370
+ color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
1371
+ }
1372
+ .c-dropdown-menu-label:first-child {
1373
+ border-top-left-radius: 0.25rem;
1374
+ border-top-right-radius: 0.25rem;
1375
+ }
1376
+ .c-dropdown-menu-item {
1377
+ display: flex;
1378
+ height: 2.5rem;
1379
+ cursor: pointer;
1380
+ align-items: center;
1381
+ --tw-bg-opacity: 1;
1382
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
1383
+ padding-left: 0.75rem;
1384
+ padding-right: 0.75rem;
1385
+ font-family:
1386
+ Roboto,
1387
+ ui-sans-serif,
1388
+ system-ui,
1389
+ -apple-system,
1390
+ BlinkMacSystemFont,
1391
+ "Segoe UI",
1392
+ Roboto,
1393
+ "Helvetica Neue",
1394
+ Arial,
1395
+ "Noto Sans",
1396
+ sans-serif,
1397
+ "Apple Color Emoji",
1398
+ "Segoe UI Emoji",
1399
+ "Segoe UI Symbol",
1400
+ "Noto Color Emoji";
1401
+ font-size: 0.75rem;
1402
+ line-height: 1rem;
1403
+ font-weight: 500;
1404
+ --tw-text-opacity: 1;
1405
+ color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
1406
+ }
1407
+ .c-dropdown-menu-item:hover,
1408
+ .c-dropdown-menu-item:focus,
1409
+ .c-dropdown-menu-item:focus-visible {
1410
+ --tw-bg-opacity: 1;
1411
+ background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
1412
+ outline: 2px solid transparent;
1413
+ outline-offset: 2px;
1414
+ }
1415
+ .c-dropdown-menu-item:first-child {
1416
+ border-top-right-radius: 0.25rem;
1417
+ border-top-left-radius: 0.25rem;
1418
+ }
1419
+ .c-dropdown-menu-item:last-child {
1420
+ border-bottom-right-radius: 0.25rem;
1421
+ border-bottom-left-radius: 0.25rem;
1422
+ }
1423
+
1424
+ /* src/avatar/avatar.css */
1425
+ .c-avatar {
1426
+ display: flex;
1427
+ align-items: center;
1428
+ justify-content: center;
1429
+ border-radius: 9999px;
1430
+ border-width: 1px;
1431
+ border-style: solid;
1432
+ --tw-border-opacity: 1;
1433
+ border-color: rgb(var(--c-color-cyan-800-100) / var(--tw-border-opacity));
1434
+ --tw-bg-opacity: 1;
1435
+ background-color: rgb(var(--c-color-cyan-200-700) / var(--tw-bg-opacity));
1436
+ --tw-text-opacity: 1;
1437
+ color: rgb(var(--c-color-cyan-800-100) / var(--tw-text-opacity));
1438
+ }
1439
+ .c-avatar-initials {
1440
+ font-weight: 700;
1441
+ line-height: 1;
1442
+ letter-spacing: -0.025em;
1443
+ }
1444
+ .c-avatar-md {
1445
+ height: 1.75rem;
1446
+ width: 1.75rem;
1447
+ font-size: 0.75rem;
1448
+ line-height: 1rem;
1449
+ }
1450
+ .c-avatar-lg {
1451
+ height: 2.25rem;
1452
+ width: 2.25rem;
1453
+ font-size: 0.875rem;
1454
+ line-height: 1.25rem;
1455
+ }
1456
+ .c-avatar-xl {
1457
+ height: 3rem;
1458
+ width: 3rem;
1459
+ font-size: 1rem;
1460
+ line-height: 1.5rem;
1461
+ }
1462
+ .c-avatar-2xl {
1463
+ height: 4rem;
1464
+ width: 4rem;
1465
+ font-size: 1.25rem;
1466
+ line-height: 1.75rem;
1467
+ }
1468
+
1469
+ /* src/checkbox/checkbox.css */
1470
+ .c-checkbox {
1471
+ display: flex;
1472
+ height: 0.875rem;
1473
+ width: 0.875rem;
1474
+ cursor: pointer;
1475
+ align-items: center;
1476
+ justify-content: center;
1477
+ border-radius: 0.125rem;
1478
+ border-width: 1px;
1479
+ border-style: solid;
1480
+ --tw-border-opacity: 1;
1481
+ border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
1482
+ --tw-bg-opacity: 1;
1483
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
1484
+ }
1485
+ .c-checkbox[aria-checked=true] {
1486
+ --tw-border-opacity: 1;
1487
+ border-color: rgb(var(--c-color-cyan-700-200) / var(--tw-border-opacity));
1488
+ --tw-bg-opacity: 1;
1489
+ background-color: rgb(var(--c-color-cyan-200-700) / var(--tw-bg-opacity));
1490
+ }
1491
+ .c-checkbox:focus {
1492
+ outline: 2px solid transparent;
1493
+ outline-offset: 2px;
1494
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1495
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1496
+ box-shadow:
1497
+ var(--tw-ring-offset-shadow),
1498
+ var(--tw-ring-shadow),
1499
+ var(--tw-shadow, 0 0 #0000);
1500
+ --tw-ring-opacity: 1;
1501
+ --tw-ring-color: rgb(var(--c-color-cyan-700-200) / var(--tw-ring-opacity));
1502
+ --tw-ring-offset-width: 1px ;
1503
+ }
1504
+ .c-checkbox:disabled {
1505
+ cursor: default;
1506
+ opacity: 0.4;
1507
+ }
1508
+ .c-checkbox:readonly {
1509
+ cursor: default;
1510
+ }
1511
+ .c-checkbox__svg {
1512
+ height: 0.5rem;
1513
+ width: 0.5rem;
1514
+ }
1515
+ .c-checkbox__svg-p1 {
1516
+ fill: rgb(var(--c-color-cyan-700-200) / 1);
1517
+ }
1518
+ .c-checkbox__svg-p2 {
1519
+ stroke: rgb(var(--c-color-cyan-700-200) / 1);
1520
+ }
1521
+
1522
+ /* src/dialog/dialog.css */
1523
+ .c-dialog {
1524
+ position: fixed;
1525
+ top: 50%;
1526
+ left: 50%;
1527
+ z-index: 20;
1528
+ width: auto;
1529
+ min-width: 25%;
1530
+ max-width: 800px;
1531
+ border-radius: 0.5rem;
1532
+ --tw-bg-opacity: 1;
1533
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
1534
+ padding: 3.5rem;
1535
+ line-height: 1.5rem;
1536
+ --tw-text-opacity: 1;
1537
+ color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
1538
+ --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
1539
+ --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
1540
+ box-shadow:
1541
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1542
+ var(--tw-ring-shadow, 0 0 #0000),
1543
+ var(--tw-shadow);
1544
+ transform: translate(-50%, -50%);
1545
+ }
1546
+ .c-dialog-overlay {
1547
+ position: fixed;
1548
+ top: 0px;
1549
+ right: 0px;
1550
+ bottom: 0px;
1551
+ left: 0px;
1552
+ z-index: 10;
1553
+ background-color: rgb(var(--c-color-overlay) / 0.3);
1554
+ }
1555
+ .c-dialog-icon {
1556
+ margin-top: 0.25rem;
1557
+ margin-bottom: 0.25rem;
1558
+ flex-shrink: 0;
1559
+ }
1560
+ .c-dialog-title {
1561
+ margin: 0px;
1562
+ font-family:
1563
+ "Roboto Slab",
1564
+ ui-serif,
1565
+ Georgia,
1566
+ Cambria,
1567
+ "Times New Roman",
1568
+ Times,
1569
+ serif;
1570
+ font-size: 1.25rem;
1571
+ line-height: 1.75rem;
1572
+ font-weight: 700;
1573
+ color: rgb(var(--c-color-gray));
1574
+ }
1575
+ .c-dialog-description {
1576
+ margin-top: 0.25rem;
1577
+ margin-bottom: 1.25rem;
1578
+ font-weight: 500;
1579
+ }
1580
+ .c-dialog-close-button {
1581
+ position: absolute;
1582
+ top: 0px;
1583
+ right: 0px;
1584
+ display: inline-flex;
1585
+ height: 3rem;
1586
+ width: 3rem;
1587
+ align-items: center;
1588
+ justify-content: center;
1589
+ border-radius: 0px;
1590
+ border-top-right-radius: 0.5rem;
1591
+ border-width: 1px;
1592
+ background-color: transparent !important;
1593
+ padding: 0px !important;
1594
+ --tw-drop-shadow: drop-shadow(0 0 #0000) !important;
1595
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
1596
+ }
1597
+ .c-dialog-close-button:hover {
1598
+ --tw-bg-opacity: 1 !important;
1599
+ background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity)) !important;
1600
+ }
1601
+ .c-dialog-close-button:focus {
1602
+ --tw-bg-opacity: 1 !important;
1603
+ background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity)) !important;
1604
+ }
1605
+ .c-dialog-with-icon {
1606
+ display: flex;
1607
+ align-items: flex-start;
1608
+ gap: 1.5rem;
1609
+ padding-left: 1.5rem;
1610
+ }
1611
+
1612
+ /* src/icon-button/icon-button.css */
1613
+ .c-icon-button {
1614
+ display: flex;
1615
+ cursor: pointer;
1616
+ appearance: none;
1617
+ align-items: center;
1618
+ justify-content: center;
1619
+ border-radius: 0.25rem;
1620
+ border-style: none;
1621
+ background-color: transparent;
1622
+ padding: 0px;
1623
+ font-weight: 500;
1624
+ }
1625
+ .c-icon-button:disabled {
1626
+ --tw-scale-x: 1;
1627
+ --tw-scale-y: 1;
1628
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1629
+ cursor: default;
1630
+ --tw-shadow: 0 0 #0000;
1631
+ --tw-shadow-colored: 0 0 #0000;
1632
+ box-shadow:
1633
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1634
+ var(--tw-ring-shadow, 0 0 #0000),
1635
+ var(--tw-shadow);
1636
+ }
1637
+ .c-icon-button:enabled:active {
1638
+ transform: scale(0.95);
1639
+ }
1640
+ .c-icon-button:enabled:focus,
1641
+ .c-icon-button:enabled:hover {
1642
+ --tw-bg-opacity: 1;
1643
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
1644
+ --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
1645
+ --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
1646
+ box-shadow:
1647
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1648
+ var(--tw-ring-shadow, 0 0 #0000),
1649
+ var(--tw-shadow);
1650
+ }
1651
+ .c-icon-button:enabled:hover {
1652
+ outline-style: solid;
1653
+ outline-width: 1px;
1654
+ outline-color: rgb(var(--c-color-purple-200-700) / 1);
1655
+ }
1656
+ .c-icon-button:enabled:focus-visible {
1657
+ outline-style: solid;
1658
+ outline-width: 1px;
1659
+ outline-offset: 1px;
1660
+ outline-color: inherit;
1661
+ }
1662
+ .c-icon-button-elevate {
1663
+ --tw-bg-opacity: 1;
1664
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
1665
+ --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
1666
+ --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
1667
+ box-shadow:
1668
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1669
+ var(--tw-ring-shadow, 0 0 #0000),
1670
+ var(--tw-shadow);
1671
+ }
1672
+ .c-icon-button-xxs {
1673
+ height: 1.25rem;
1674
+ width: 1.25rem;
1675
+ }
1676
+ .c-icon-button-xs {
1677
+ height: 1.5rem;
1678
+ width: 1.5rem;
1679
+ }
1680
+ .c-icon-button-sm {
1681
+ height: 2.25rem;
1682
+ width: 2.25rem;
1683
+ }
1684
+ .c-icon-button-md {
1685
+ height: 2.75rem;
1686
+ width: 2.75rem;
1687
+ }
1688
+ .c-icon-button-lg {
1689
+ height: 3.5rem;
1690
+ width: 3.5rem;
1691
+ }
1692
+
1693
+ /* src/inline-radio/inline-radio.css */
1694
+ .c-inline-radio-group {
1695
+ display: inline-flex;
1696
+ }
1697
+ .c-inline-radio-group > :not([hidden]) ~ :not([hidden]) {
1698
+ --tw-space-x-reverse: 0;
1699
+ margin-right: calc(0.25rem * var(--tw-space-x-reverse));
1700
+ margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
1701
+ }
1702
+ .c-inline-radio-group {
1703
+ border-radius: 0.25rem;
1704
+ --tw-bg-opacity: 1;
1705
+ background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
1706
+ padding: 3px;
1707
+ }
1708
+ .c-inline-radio-group-xs {
1709
+ height: 1.5rem;
1710
+ }
1711
+ .c-inline-radio-group-sm {
1712
+ height: 2.25rem;
1713
+ font-size: 0.875rem;
1714
+ line-height: 1.25rem;
1715
+ }
1716
+ .c-inline-radio-group-md {
1717
+ height: 2.75rem;
1718
+ font-size: 1rem;
1719
+ line-height: 1.5rem;
1720
+ }
1721
+ .c-inline-radio-group-lg {
1722
+ height: 3.5rem;
1723
+ font-size: 1.125rem;
1724
+ line-height: 1.75rem;
1725
+ }
1726
+ .c-inline-radio {
1727
+ margin: 0px;
1728
+ display: flex;
1729
+ cursor: pointer;
1730
+ align-items: center;
1731
+ justify-content: center;
1732
+ border-radius: 3px;
1733
+ border-style: none;
1734
+ background-color: transparent;
1735
+ font-size: 0.875rem;
1736
+ line-height: 1.25rem;
1737
+ font-weight: 500;
1738
+ line-height: 1 !important;
1739
+ color: rgb(var(--c-color-gray));
1740
+ }
1741
+ .c-inline-radio[aria-checked=true] {
1742
+ --tw-bg-opacity: 1;
1743
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
1744
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1745
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1746
+ box-shadow:
1747
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1748
+ var(--tw-ring-shadow, 0 0 #0000),
1749
+ var(--tw-shadow);
1750
+ }
1751
+ .c-inline-radio:focus-visible {
1752
+ outline-style: solid;
1753
+ outline-width: 1px;
1754
+ outline-color: inherit;
1755
+ outline-color: currentColor;
1756
+ }
1757
+ .c-inline-radio:disabled {
1758
+ cursor: not-allowed;
1759
+ }
1760
+
1761
+ /* src/input-with-label/input-with-label.css */
1762
+ .c-input-with-label {
1763
+ position: relative;
1764
+ display: block;
1765
+ border-radius: 0.25rem;
1766
+ border-width: 1px;
1767
+ border-style: solid;
1768
+ border-color: transparent;
1769
+ padding: 0.75rem;
1770
+ }
1771
+ .c-input-with-label-input-wrap {
1772
+ margin-top: 0.25rem;
1773
+ display: flex;
1774
+ }
1775
+ .c-input-with-label-input {
1776
+ flex: 1 1 0%;
1777
+ overflow: hidden;
1778
+ text-overflow: ellipsis;
1779
+ font-size: 1rem;
1780
+ line-height: 1.5rem;
1781
+ }
1782
+ .c-input-with-label-append {
1783
+ margin-right: -0.75rem;
1784
+ display: flex;
1785
+ flex-shrink: 0;
1786
+ align-items: center;
1787
+ padding-left: 0.75rem;
1788
+ padding-right: 0.75rem;
1789
+ }
1790
+ .c-input-with-label-elevated {
1791
+ --tw-bg-opacity: 1;
1792
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
1793
+ --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
1794
+ --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
1795
+ box-shadow:
1796
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1797
+ var(--tw-ring-shadow, 0 0 #0000),
1798
+ var(--tw-shadow);
1799
+ }
1800
+ .c-input-with-label.c-input-with-label--error {
1801
+ color: rgb(var(--c-color-pink-600-300));
1802
+ }
1803
+ .c-input-with-label-error {
1804
+ margin-top: 0.25rem !important;
1805
+ font-size: 0.75rem;
1806
+ line-height: 1rem;
1807
+ color: rgb(var(--c-color-pink-600-300));
1808
+ }
1809
+ .c-input-with-label-sm {
1810
+ font-size: 0.875rem;
1811
+ line-height: 1.25rem;
1812
+ }
1813
+ .c-input-with-label-lg {
1814
+ font-size: 1.125rem;
1815
+ line-height: 1.75rem;
1816
+ }
1817
+
1818
+ /* src/input/input.css */
1819
+ .c-input {
1820
+ border-style: none;
1821
+ background-color: transparent;
1822
+ padding: 0px;
1823
+ }
1824
+ .c-input::placeholder {
1825
+ font-size: 0.875rem;
1826
+ line-height: 1.25rem;
1827
+ font-weight: 400;
1828
+ font-style: italic;
1829
+ --tw-text-opacity: 1;
1830
+ color: rgb(var(--c-color-gray-300-600) / var(--tw-text-opacity));
1831
+ }
1832
+ .c-input:focus {
1833
+ outline: 2px solid transparent;
1834
+ outline-offset: 2px;
1835
+ }
1836
+ .c-input:disabled {
1837
+ cursor: not-allowed;
1838
+ --tw-text-opacity: 1;
1839
+ color: rgb(var(--c-color-gray-400-500) / var(--tw-text-opacity));
1840
+ }
1841
+
1842
+ /* src/label/label.css */
1843
+ .c-label {
1844
+ font-size: 0.875rem;
1845
+ line-height: 1.25rem;
1846
+ font-weight: 500;
1847
+ --tw-text-opacity: 1;
1848
+ color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
1849
+ }
1850
+
1851
+ /* src/progress/progress.css */
1852
+ .c-progress-root {
1853
+ position: relative;
1854
+ height: 1rem;
1855
+ width: 100%;
1856
+ overflow: hidden;
1857
+ border-radius: 9999px;
1858
+ --tw-bg-opacity: 1;
1859
+ background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
1860
+ }
1861
+ .c-progress-indicator {
1862
+ height: 100%;
1863
+ width: 100%;
1864
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1865
+ --tw-bg-opacity: 1;
1866
+ background-color: rgb(var(--c-color-cyan-300-600) / var(--tw-bg-opacity));
1867
+ transition-duration: 500ms;
1868
+ transition-timing-function: linear;
1869
+ }
1870
+
1871
+ /* src/radio/radio.css */
1872
+ .c-radio-item {
1873
+ display: flex;
1874
+ height: 0.75rem;
1875
+ width: 0.75rem;
1876
+ flex-shrink: 0;
1877
+ align-items: center;
1878
+ justify-content: center;
1879
+ border-radius: 9999px;
1880
+ border-width: 1px;
1881
+ border-style: solid;
1882
+ --tw-border-opacity: 1;
1883
+ border-color: rgb(var(--c-color-gray-200-700) / var(--tw-border-opacity));
1884
+ --tw-bg-opacity: 1;
1885
+ background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
1886
+ padding: 0px;
1887
+ }
1888
+ .c-radio-item:focus,
1889
+ .c-radio-item:focus-visible {
1890
+ outline: 2px solid transparent;
1891
+ outline-offset: 2px;
1892
+ }
1893
+ .c-radio-item:disabled {
1894
+ --tw-bg-opacity: 1;
1895
+ background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
1896
+ opacity: 0.4;
1897
+ }
1898
+ .c-radio-item[aria-checked=true] {
1899
+ --tw-border-opacity: 1;
1900
+ border-color: rgb(var(--c-color-cyan-700-200) / var(--tw-border-opacity));
1901
+ --tw-bg-opacity: 1;
1902
+ background-color: rgb(var(--c-color-cyan-200-700) / var(--tw-bg-opacity));
1903
+ }
1904
+ .c-radio-indicator {
1905
+ display: block;
1906
+ height: 6px;
1907
+ width: 6px;
1908
+ border-radius: 9999px;
1909
+ --tw-bg-opacity: 1;
1910
+ background-color: rgb(var(--c-color-cyan-700-200) / var(--tw-bg-opacity));
1911
+ }
1912
+
1913
+ /* src/select/select.css */
1914
+ .c-select-trigger {
1915
+ display: inline-flex;
1916
+ cursor: pointer;
1917
+ align-items: center;
1918
+ justify-content: center;
1919
+ gap: 1rem;
1920
+ white-space: nowrap;
1921
+ border-radius: 0.25rem;
1922
+ border-width: 0px;
1923
+ --tw-bg-opacity: 1;
1924
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
1925
+ padding-left: 1rem;
1926
+ padding-right: 1rem;
1927
+ font-size: 0.875rem;
1928
+ line-height: 1.25rem;
1929
+ font-weight: 500;
1930
+ color: rgb(var(--c-color-gray));
1931
+ --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
1932
+ --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
1933
+ box-shadow:
1934
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1935
+ var(--tw-ring-shadow, 0 0 #0000),
1936
+ var(--tw-shadow);
1937
+ }
1938
+ .c-select-trigger:disabled {
1939
+ cursor: default;
1940
+ opacity: 0.5;
1941
+ }
1942
+ .c-select-trigger-xs {
1943
+ height: 1.5rem;
1944
+ }
1945
+ .c-select-trigger-sm {
1946
+ height: 2.25rem;
1947
+ font-size: 0.875rem;
1948
+ line-height: 1.25rem;
1949
+ }
1950
+ .c-select-trigger-md {
1951
+ height: 2.75rem;
1952
+ font-size: 1rem;
1953
+ line-height: 1.5rem;
1954
+ }
1955
+ .c-select-trigger-lg {
1956
+ height: 3.5rem;
1957
+ font-size: 1.125rem;
1958
+ line-height: 1.75rem;
1959
+ }
1960
+ .c-select-value {
1961
+ font-style: italic;
1962
+ --tw-text-opacity: 1;
1963
+ color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
1964
+ }
1965
+ .c-select-content {
1966
+ overflow: hidden;
1967
+ border-radius: 0.25rem;
1968
+ --tw-bg-opacity: 1;
1969
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
1970
+ color: rgb(var(--c-color-gray));
1971
+ --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
1972
+ --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
1973
+ box-shadow:
1974
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1975
+ var(--tw-ring-shadow, 0 0 #0000),
1976
+ var(--tw-shadow);
1977
+ }
1978
+ .c-select-viewport {
1979
+ padding-top: 0.5rem;
1980
+ padding-bottom: 0.5rem;
1981
+ }
1982
+ .c-select-item {
1983
+ display: flex;
1984
+ cursor: pointer;
1985
+ align-items: center;
1986
+ white-space: nowrap;
1987
+ padding-left: 1.5rem;
1988
+ padding-right: 1.5rem;
1989
+ padding-top: 0.5rem;
1990
+ padding-bottom: 0.5rem;
1991
+ font-weight: 500;
1992
+ color: rgb(var(--c-color-gray));
1993
+ }
1994
+ .c-select-item:hover,
1995
+ .c-select-item:focus {
1996
+ --tw-bg-opacity: 1;
1997
+ background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
1998
+ outline: 2px solid transparent;
1999
+ outline-offset: 2px;
2000
+ }
2001
+
2002
+ /* src/slider/slider.css */
2003
+ .c-slider-root {
2004
+ position: relative;
2005
+ display: flex;
2006
+ width: 13rem;
2007
+ touch-action: none;
2008
+ user-select: none;
2009
+ align-items: center;
2010
+ }
2011
+ .c-slider-root[data-orientation=horizontal] {
2012
+ height: 1.25rem;
2013
+ }
2014
+ .c-slider-root[data-orientation=vertical] {
2015
+ height: 7rem;
2016
+ width: 1.25rem;
2017
+ flex-direction: column;
2018
+ }
2019
+ .c-slider-track {
2020
+ position: relative;
2021
+ flex-grow: 1;
2022
+ border-radius: 9999px;
2023
+ --tw-bg-opacity: 1;
2024
+ background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
2025
+ }
2026
+ .c-slider-track[data-orientation=horizontal] {
2027
+ height: 3px;
2028
+ }
2029
+ .c-slider-track[data-orientation=vertical] {
2030
+ width: 3px;
2031
+ }
2032
+ .c-slider-range {
2033
+ position: absolute;
2034
+ border-radius: 9999px;
2035
+ --tw-bg-opacity: 1;
2036
+ background-color: rgb(var(--c-color-gray-600-300) / var(--tw-bg-opacity));
2037
+ }
2038
+ .c-slider-range[data-orientation=horizontal] {
2039
+ height: 100%;
2040
+ }
2041
+ .c-slider-range[data-orientation=vertical] {
2042
+ width: 100%;
2043
+ }
2044
+ .c-slider-range-transparent {
2045
+ background-color: transparent;
2046
+ }
2047
+ .c-slider-thumb {
2048
+ display: block;
2049
+ height: 1.25rem;
2050
+ width: 1.25rem;
2051
+ border-radius: 0.75rem;
2052
+ --tw-bg-opacity: 1;
2053
+ background-color: rgb(var(--c-color-gray-600-300) / var(--tw-bg-opacity));
2054
+ --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
2055
+ --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
2056
+ box-shadow:
2057
+ var(--tw-ring-offset-shadow, 0 0 #0000),
2058
+ var(--tw-ring-shadow, 0 0 #0000),
2059
+ var(--tw-shadow);
2060
+ }
2061
+ .c-slider-thumb:hover {
2062
+ --tw-bg-opacity: 1;
2063
+ background-color: rgb(var(--c-color-gray-700-200) / var(--tw-bg-opacity));
2064
+ }
2065
+ .c-slider-thumb:focus {
2066
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2067
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
2068
+ box-shadow:
2069
+ var(--tw-ring-offset-shadow, 0 0 #0000),
2070
+ var(--tw-ring-shadow, 0 0 #0000),
2071
+ var(--tw-shadow);
2072
+ outline: 2px solid transparent;
2073
+ outline-offset: 2px;
2074
+ }
2075
+
2076
+ /* src/tag/tag.css */
2077
+ .c-tag {
2078
+ display: inline-flex;
2079
+ align-items: center;
2080
+ border-radius: 0.25rem;
2081
+ border-width: 1px;
2082
+ border-style: solid;
2083
+ --tw-border-opacity: 1;
2084
+ border-color: rgb(var(--c-color-gray-200-700) / var(--tw-border-opacity));
2085
+ --tw-bg-opacity: 1;
2086
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
2087
+ padding: 0.25rem;
2088
+ text-align: center;
2089
+ font-size: 0.75rem;
2090
+ line-height: 1rem;
2091
+ font-weight: 500;
2092
+ --tw-text-opacity: 1;
2093
+ color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
2094
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
2095
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
2096
+ box-shadow:
2097
+ var(--tw-ring-offset-shadow, 0 0 #0000),
2098
+ var(--tw-ring-shadow, 0 0 #0000),
2099
+ var(--tw-shadow);
2100
+ }
2101
+ .c-tag-elevate {
2102
+ --tw-bg-opacity: 1;
2103
+ background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
2104
+ }
2105
+
2106
+ /* src/rich-text-editor/rich-text-editor.css */
2107
+ .c-rich-text-editor {
2108
+ margin: 0px auto;
2109
+ max-width: 1100px;
2110
+ position: relative;
2111
+ line-height: 1.7;
2112
+ }
2113
+ .c-rich-text-editor > * {
2114
+ box-sizing: border-box;
2115
+ }
2116
+ .c-rich-text-editor {
2117
+ font-family:
2118
+ Roboto,
2119
+ ui-sans-serif,
2120
+ system-ui,
2121
+ -apple-system,
2122
+ BlinkMacSystemFont,
2123
+ "Segoe UI",
2124
+ Roboto,
2125
+ "Helvetica Neue",
2126
+ Arial,
2127
+ "Noto Sans",
2128
+ sans-serif,
2129
+ "Apple Color Emoji",
2130
+ "Segoe UI Emoji",
2131
+ "Segoe UI Symbol",
2132
+ "Noto Color Emoji" !important;
2133
+ font-weight: 400;
2134
+ --tw-text-opacity: 1;
2135
+ color: rgb(var(--c-color-gray-900-50) / var(--tw-text-opacity));
2136
+ }
2137
+ .c-rich-text-editor .editor-container {
2138
+ background: #fff;
2139
+ position: relative;
2140
+ cursor: text;
2141
+ margin-top: 0.5rem;
2142
+ border-bottom-left-radius: 0.375rem;
2143
+ border-bottom-right-radius: 0.375rem;
2144
+ }
2145
+ .c-rich-text-editor .editor-container.plain-text {
2146
+ border-top-left-radius: 0.375rem;
2147
+ border-top-right-radius: 0.375rem;
2148
+ }
2149
+ .c-rich-text-editor span.editor-image {
2150
+ cursor: default;
2151
+ display: inline-block;
2152
+ position: relative;
2153
+ user-select: none;
2154
+ }
2155
+ .c-rich-text-editor .editor-image img {
2156
+ max-width: 100%;
2157
+ cursor: default;
2158
+ }
2159
+ .c-rich-text-editor .editor-image img.focused {
2160
+ outline: 2px solid rgb(60, 132, 244);
2161
+ user-select: none;
2162
+ }
2163
+ .c-rich-text-editor .editor-image img.focused.draggable {
2164
+ cursor: grab;
2165
+ }
2166
+ .c-rich-text-editor .editor-image img.focused.draggable:active {
2167
+ cursor: grabbing;
2168
+ }
2169
+ .c-rich-text-editor .editor-image .image-caption-container {
2170
+ display: block;
2171
+ position: absolute;
2172
+ bottom: 4px;
2173
+ left: 0;
2174
+ right: 0;
2175
+ padding: 0;
2176
+ margin: 0;
2177
+ border-top: 1px solid #fff;
2178
+ background-color: rgba(255, 255, 255, 0.9);
2179
+ min-width: 100px;
2180
+ color: #000;
2181
+ overflow: hidden;
2182
+ }
2183
+ .c-rich-text-editor .editor-image .image-caption-button {
2184
+ display: block;
2185
+ position: absolute;
2186
+ bottom: 20px;
2187
+ left: 0;
2188
+ right: 0;
2189
+ width: 30%;
2190
+ padding: 10px;
2191
+ margin: 0 auto;
2192
+ border: 1px solid rgba(255, 255, 255, 0.3);
2193
+ border-radius: 5px;
2194
+ background-color: rgba(0, 0, 0, 0.5);
2195
+ min-width: 100px;
2196
+ color: #fff;
2197
+ cursor: pointer;
2198
+ user-select: none;
2199
+ }
2200
+ .c-rich-text-editor .editor-image .image-caption-button:hover {
2201
+ background-color: rgba(60, 132, 244, 0.5);
2202
+ }
2203
+ .c-rich-text-editor .editor-image .image-resizer {
2204
+ display: block;
2205
+ width: 7px;
2206
+ height: 7px;
2207
+ position: absolute;
2208
+ background-color: rgb(60, 132, 244);
2209
+ border: 1px solid #fff;
2210
+ }
2211
+ .c-rich-text-editor .editor-image .image-resizer.image-resizer-n {
2212
+ top: -6px;
2213
+ left: 48%;
2214
+ cursor: n-resize;
2215
+ }
2216
+ .c-rich-text-editor .editor-image .image-resizer.image-resizer-ne {
2217
+ top: -6px;
2218
+ right: -6px;
2219
+ cursor: ne-resize;
2220
+ }
2221
+ .c-rich-text-editor .editor-image .image-resizer.image-resizer-e {
2222
+ bottom: 48%;
2223
+ right: -6px;
2224
+ cursor: e-resize;
2225
+ }
2226
+ .c-rich-text-editor .editor-image .image-resizer.image-resizer-se {
2227
+ bottom: -2px;
2228
+ right: -6px;
2229
+ cursor: nwse-resize;
2230
+ }
2231
+ .c-rich-text-editor .editor-image .image-resizer.image-resizer-s {
2232
+ bottom: -2px;
2233
+ left: 48%;
2234
+ cursor: s-resize;
2235
+ }
2236
+ .c-rich-text-editor .editor-image .image-resizer.image-resizer-sw {
2237
+ bottom: -2px;
2238
+ left: -6px;
2239
+ cursor: sw-resize;
2240
+ }
2241
+ .c-rich-text-editor .editor-image .image-resizer.image-resizer-w {
2242
+ bottom: 48%;
2243
+ left: -6px;
2244
+ cursor: w-resize;
2245
+ }
2246
+ .c-rich-text-editor .editor-image .image-resizer.image-resizer-nw {
2247
+ top: -6px;
2248
+ left: -6px;
2249
+ cursor: nw-resize;
2250
+ }
2251
+ .c-rich-text-editor .editor-scroller {
2252
+ min-height: 150px;
2253
+ border: 0;
2254
+ resize: none;
2255
+ cursor: text;
2256
+ display: block;
2257
+ position: relative;
2258
+ outline: 0;
2259
+ resize: vertical;
2260
+ }
2261
+ .c-rich-text-editor .editor {
2262
+ height: 100%;
2263
+ position: relative;
2264
+ }
2265
+ .c-rich-text-editor .test-recorder-output {
2266
+ margin: 20px auto 20px auto;
2267
+ width: 100%;
2268
+ }
2269
+ .c-rich-text-editor pre {
2270
+ line-height: 1.1;
2271
+ color: #fff;
2272
+ margin: 0;
2273
+ padding: 10px;
2274
+ overflow: auto;
2275
+ max-height: 180px;
2276
+ --tw-bg-opacity: 1;
2277
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
2278
+ font-size: 0.875rem;
2279
+ line-height: 1.25rem;
2280
+ }
2281
+ .c-rich-text-editor pre::-webkit-scrollbar {
2282
+ background: transparent;
2283
+ width: 10px;
2284
+ }
2285
+ .c-rich-text-editor pre::-webkit-scrollbar-thumb {
2286
+ background: #999;
2287
+ }
2288
+ .c-rich-text-editor .editor-dev-button {
2289
+ position: relative;
2290
+ display: block;
2291
+ width: 40px;
2292
+ height: 40px;
2293
+ font-size: 12px;
2294
+ border-radius: 20px;
2295
+ border: none;
2296
+ cursor: pointer;
2297
+ outline: none;
2298
+ box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
2299
+ background-color: #444;
2300
+ }
2301
+ .c-rich-text-editor .editor-dev-button::after {
2302
+ content: "";
2303
+ position: absolute;
2304
+ top: 10px;
2305
+ right: 10px;
2306
+ bottom: 10px;
2307
+ left: 10px;
2308
+ display: block;
2309
+ background-size: contain;
2310
+ filter: invert(1);
2311
+ }
2312
+ .c-rich-text-editor .editor-dev-button:hover {
2313
+ background-color: #555;
2314
+ }
2315
+ .c-rich-text-editor .editor-dev-button.active {
2316
+ background-color: rgb(233, 35, 35);
2317
+ }
2318
+ .c-rich-text-editor .test-recorder-toolbar {
2319
+ display: flex;
2320
+ }
2321
+ .c-rich-text-editor .test-recorder-button {
2322
+ position: relative;
2323
+ display: block;
2324
+ width: 32px;
2325
+ height: 32px;
2326
+ font-size: 10px;
2327
+ padding: 6px 6px;
2328
+ border-radius: 4px;
2329
+ border: none;
2330
+ cursor: pointer;
2331
+ outline: none;
2332
+ box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
2333
+ background-color: #222;
2334
+ transition: box-shadow 50ms ease-out;
2335
+ }
2336
+ .c-rich-text-editor .test-recorder-button:active {
2337
+ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
2338
+ }
2339
+ .c-rich-text-editor .test-recorder-button + .test-recorder-button {
2340
+ margin-left: 4px;
2341
+ }
2342
+ .c-rich-text-editor .test-recorder-button::after {
2343
+ content: "";
2344
+ position: absolute;
2345
+ top: 8px;
2346
+ right: 8px;
2347
+ bottom: 8px;
2348
+ left: 8px;
2349
+ display: block;
2350
+ background-size: contain;
2351
+ filter: invert(1);
2352
+ }
2353
+ .c-rich-text-editor #options-button {
2354
+ position: fixed;
2355
+ left: 20px;
2356
+ bottom: 20px;
2357
+ }
2358
+ .c-rich-text-editor #test-recorder-button {
2359
+ position: fixed;
2360
+ left: 70px;
2361
+ bottom: 20px;
2362
+ }
2363
+ .c-rich-text-editor #paste-log-button {
2364
+ position: fixed;
2365
+ left: 120px;
2366
+ bottom: 20px;
2367
+ }
2368
+ .c-rich-text-editor #options-button::after {
2369
+ background-image: url(./gear-ICMT4NTP.svg);
2370
+ }
2371
+ .c-rich-text-editor #test-recorder-button::after {
2372
+ background-image: url(./journal-code-XUT44HDV.svg);
2373
+ }
2374
+ .c-rich-text-editor #paste-log-button::after {
2375
+ background-image: url(./clipboard-OSEFDF25.svg);
2376
+ }
2377
+ .c-rich-text-editor #test-recorder-button-snapshot {
2378
+ margin-right: auto;
2379
+ }
2380
+ .c-rich-text-editor #test-recorder-button-snapshot::after {
2381
+ background-image: url(./camera-CR7D2PNH.svg);
2382
+ }
2383
+ .c-rich-text-editor #test-recorder-button-copy::after {
2384
+ background-image: url(./clipboard-OSEFDF25.svg);
2385
+ }
2386
+ .c-rich-text-editor #test-recorder-button-download::after {
2387
+ background-image: url(./download-JXUGIUCX.svg);
2388
+ }
2389
+ .c-rich-text-editor .typeahead-popover {
2390
+ background: #fff;
2391
+ box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
2392
+ border-radius: 8px;
2393
+ margin-top: 25px;
2394
+ }
2395
+ .c-rich-text-editor .typeahead-popover ul {
2396
+ padding: 0;
2397
+ list-style: none;
2398
+ margin: 0;
2399
+ border-radius: 8px;
2400
+ max-height: 200px;
2401
+ overflow-y: scroll;
2402
+ }
2403
+ .c-rich-text-editor .typeahead-popover ul::-webkit-scrollbar {
2404
+ display: none;
2405
+ }
2406
+ .c-rich-text-editor .typeahead-popover ul {
2407
+ -ms-overflow-style: none;
2408
+ scrollbar-width: none;
2409
+ }
2410
+ .c-rich-text-editor .typeahead-popover ul li {
2411
+ margin: 0;
2412
+ min-width: 180px;
2413
+ font-size: 14px;
2414
+ outline: none;
2415
+ cursor: pointer;
2416
+ border-radius: 8px;
2417
+ }
2418
+ .c-rich-text-editor .typeahead-popover ul li.selected {
2419
+ background: #eee;
2420
+ }
2421
+ .c-rich-text-editor .typeahead-popover li {
2422
+ margin: 0 8px 0 8px;
2423
+ padding: 8px;
2424
+ color: #050505;
2425
+ cursor: pointer;
2426
+ line-height: 16px;
2427
+ font-size: 15px;
2428
+ display: flex;
2429
+ align-content: center;
2430
+ flex-direction: row;
2431
+ flex-shrink: 0;
2432
+ background-color: #fff;
2433
+ border-radius: 8px;
2434
+ border: 0;
2435
+ }
2436
+ .c-rich-text-editor .typeahead-popover li.active {
2437
+ display: flex;
2438
+ width: 20px;
2439
+ height: 20px;
2440
+ background-size: contain;
2441
+ }
2442
+ .c-rich-text-editor .typeahead-popover li:first-child {
2443
+ border-radius: 8px 8px 0px 0px;
2444
+ }
2445
+ .c-rich-text-editor .typeahead-popover li:last-child {
2446
+ border-radius: 0px 0px 8px 8px;
2447
+ }
2448
+ .c-rich-text-editor .typeahead-popover li:hover {
2449
+ background-color: #eee;
2450
+ }
2451
+ .c-rich-text-editor .typeahead-popover li .text {
2452
+ display: flex;
2453
+ line-height: 20px;
2454
+ flex-grow: 1;
2455
+ min-width: 150px;
2456
+ }
2457
+ .c-rich-text-editor .typeahead-popover li .icon {
2458
+ display: flex;
2459
+ width: 20px;
2460
+ height: 20px;
2461
+ user-select: none;
2462
+ margin-right: 8px;
2463
+ line-height: 16px;
2464
+ background-size: contain;
2465
+ background-repeat: no-repeat;
2466
+ background-position: center;
2467
+ }
2468
+ .c-rich-text-editor .component-picker-menu {
2469
+ width: 200px;
2470
+ }
2471
+ .c-rich-text-editor .auto-embed-menu {
2472
+ width: 150px;
2473
+ }
2474
+ .c-rich-text-editor i.palette {
2475
+ background-image: url(./palette-SWGFPRWZ.svg);
2476
+ }
2477
+ .c-rich-text-editor i.bucket {
2478
+ background-image: url(./paint-bucket-VCISMZTH.svg);
2479
+ }
2480
+ .c-rich-text-editor i.bold {
2481
+ background-image: url(./type-bold-PY7COC3N.svg);
2482
+ }
2483
+ .c-rich-text-editor i.italic {
2484
+ background-image: url(./type-italic-3DSFOSG2.svg);
2485
+ }
2486
+ .c-rich-text-editor i.clear {
2487
+ background-image: url(./trash-UOM6D7TD.svg);
2488
+ }
2489
+ .c-rich-text-editor i.code {
2490
+ background-image: url(./code-SEVR6TIQ.svg);
2491
+ }
2492
+ .c-rich-text-editor i.underline {
2493
+ background-image: url(./type-underline-CBFA5VLF.svg);
2494
+ }
2495
+ .c-rich-text-editor i.strikethrough {
2496
+ background-image: url(./type-strikethrough-E2KKQFSX.svg);
2497
+ }
2498
+ .c-rich-text-editor i.subscript {
2499
+ background-image: url(./type-subscript-BMPTRIBU.svg);
2500
+ }
2501
+ .c-rich-text-editor i.superscript {
2502
+ background-image: url(./type-superscript-EDF6EPAA.svg);
2503
+ }
2504
+ .c-rich-text-editor i.link {
2505
+ background-image: url(./link-W52N4JKZ.svg);
2506
+ }
2507
+ .c-rich-text-editor i.horizontal-rule {
2508
+ background-image: url(./horizontal-rule-N6RD2V7H.svg);
2509
+ }
2510
+ .c-rich-text-editor .icon.plus {
2511
+ background-image: url(./plus-CQISIKEC.svg);
2512
+ }
2513
+ .c-rich-text-editor .icon.caret-right {
2514
+ background-image: url(./caret-right-fill-FFBNEXVX.svg);
2515
+ }
2516
+ .c-rich-text-editor .icon.dropdown-more {
2517
+ background-image: url(./dropdown-more-BHZ5COKX.svg);
2518
+ }
2519
+ .c-rich-text-editor .icon.font-color {
2520
+ background-image: url(./font-color-J4GA3ZJO.svg);
2521
+ }
2522
+ .c-rich-text-editor .icon.font-family {
2523
+ background-image: url(./font-family-ZU5N6TTE.svg);
2524
+ }
2525
+ .c-rich-text-editor .icon.bg-color {
2526
+ background-image: url(./bg-color-HB2WDYGO.svg);
2527
+ }
2528
+ .c-rich-text-editor i.image {
2529
+ background-image: url(./file-image-TIQPFJX4.svg);
2530
+ }
2531
+ .c-rich-text-editor i.table {
2532
+ background-image: url(./table-BR6DI4ZQ.svg);
2533
+ }
2534
+ .c-rich-text-editor i.close {
2535
+ background-image: url(./close-FH57ZMJF.svg);
2536
+ }
2537
+ .c-rich-text-editor .icon.left-align,
2538
+ .c-rich-text-editor i.left-align {
2539
+ background-image: url(./text-left-KT2B6TR3.svg);
2540
+ }
2541
+ .c-rich-text-editor i.center-align {
2542
+ background-image: url(./text-center-UQI6PAEF.svg);
2543
+ }
2544
+ .c-rich-text-editor i.right-align {
2545
+ background-image: url(./text-right-SKELPISG.svg);
2546
+ }
2547
+ .c-rich-text-editor i.justify-align {
2548
+ background-image: url(./justify-J7X5JEEX.svg);
2549
+ }
2550
+ .c-rich-text-editor i.indent {
2551
+ background-image: url(./indent-MJ6JIMCK.svg);
2552
+ }
2553
+ .c-rich-text-editor i.markdown {
2554
+ background-image: url(./markdown-4BGQNLLT.svg);
2555
+ }
2556
+ .c-rich-text-editor i.outdent {
2557
+ background-image: url(./outdent-2LUMUMIP.svg);
2558
+ }
2559
+ .c-rich-text-editor i.undo {
2560
+ background-image: url(./arrow-counterclockwise-2O5EYVJT.svg);
2561
+ }
2562
+ .c-rich-text-editor i.redo {
2563
+ background-image: url(./arrow-clockwise-Z2G6UEGP.svg);
2564
+ }
2565
+ .c-rich-text-editor i.mic {
2566
+ background-image: url(./mic-H5FNOMM7.svg);
2567
+ }
2568
+ .c-rich-text-editor i.import {
2569
+ background-image: url(./upload-Q6KICGZW.svg);
2570
+ }
2571
+ .c-rich-text-editor i.export {
2572
+ background-image: url(./download-JXUGIUCX.svg);
2573
+ }
2574
+ .c-rich-text-editor i.diagram-2 {
2575
+ background-image: url(./diagram-2-CEJUD2B4.svg);
2576
+ }
2577
+ .c-rich-text-editor i.user {
2578
+ background-image: url(./user-EOI2NEFZ.svg);
2579
+ }
2580
+ .c-rich-text-editor i.equation {
2581
+ background-image: url(./plus-slash-minus-N22JU4TI.svg);
2582
+ }
2583
+ .c-rich-text-editor i.gif {
2584
+ background-image: url(./filetype-gif-OG2BEYYK.svg);
2585
+ }
2586
+ .c-rich-text-editor i.copy {
2587
+ background-image: url(./copy-DMGDODUL.svg);
2588
+ }
2589
+ .c-rich-text-editor i.success {
2590
+ background-image: url(./success-YVXUMPEZ.svg);
2591
+ }
2592
+ .c-rich-text-editor i.prettier {
2593
+ background-image: url(./prettier-WUJ7B5NV.svg);
2594
+ }
2595
+ .c-rich-text-editor i.prettier-error {
2596
+ background-image: url(./prettier-error-DYJSLYDP.svg);
2597
+ }
2598
+ .c-rich-text-editor .link-editor {
2599
+ box-sizing: border-box;
2600
+ }
2601
+ .c-rich-text-editor .link-editor .button.active,
2602
+ .c-rich-text-editor .toolbar .button.active {
2603
+ --tw-bg-opacity: 1;
2604
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
2605
+ }
2606
+ .c-rich-text-editor .link-editor {
2607
+ border-radius: 0.5rem !important;
2608
+ border-width: 1px;
2609
+ border-style: solid;
2610
+ --tw-border-opacity: 1;
2611
+ border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
2612
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
2613
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
2614
+ box-shadow:
2615
+ var(--tw-ring-offset-shadow, 0 0 #0000),
2616
+ var(--tw-ring-shadow, 0 0 #0000),
2617
+ var(--tw-shadow) !important;
2618
+ }
2619
+ .c-rich-text-editor .link-editor .link-input {
2620
+ width: 100%;
2621
+ box-sizing: border-box;
2622
+ margin: 8px 0;
2623
+ padding: 8px 24px;
2624
+ font-size: 15px;
2625
+ color: rgb(5, 5, 5);
2626
+ outline: 0;
2627
+ position: relative;
2628
+ font-family: inherit;
2629
+ border-color: rgb(var(--c-color-gray));
2630
+ font-size: 0.875rem;
2631
+ line-height: 1.25rem;
2632
+ --tw-text-opacity: 1;
2633
+ color: rgb(var(--c-color-s-blue-600-300) / var(--tw-text-opacity));
2634
+ }
2635
+ .c-rich-text-editor .link-editor div.link-edit {
2636
+ background-image: url(./pencil-fill-STFSC26F.svg);
2637
+ background-size: 12px;
2638
+ background-position: center;
2639
+ background-repeat: no-repeat;
2640
+ width: 35px;
2641
+ vertical-align: -0.25em;
2642
+ position: absolute;
2643
+ right: 0;
2644
+ top: 0;
2645
+ bottom: 0;
2646
+ cursor: pointer;
2647
+ }
2648
+ .c-rich-text-editor .link-editor .link-input {
2649
+ box-sizing: border-box;
2650
+ }
2651
+ .c-rich-text-editor .link-editor .link-input a {
2652
+ color: rgb(33, 111, 219);
2653
+ text-decoration: none;
2654
+ display: block;
2655
+ white-space: nowrap;
2656
+ overflow: hidden;
2657
+ text-overflow: ellipsis;
2658
+ --tw-text-opacity: 1;
2659
+ color: rgb(var(--c-color-s-blue-600-300) / var(--tw-text-opacity));
2660
+ }
2661
+ .c-rich-text-editor .link-editor .link-input a:hover {
2662
+ text-decoration: underline;
2663
+ }
2664
+ .c-rich-text-editor .link-editor .font-size-wrapper,
2665
+ .c-rich-text-editor .link-editor .font-family-wrapper {
2666
+ display: flex;
2667
+ margin: 0 4px;
2668
+ }
2669
+ .c-rich-text-editor .link-editor select {
2670
+ padding: 6px;
2671
+ border: none;
2672
+ background-color: rgba(0, 0, 0, 0.075);
2673
+ border-radius: 4px;
2674
+ }
2675
+ .c-rich-text-editor #block-controls {
2676
+ display: block;
2677
+ position: absolute;
2678
+ right: 10px;
2679
+ width: 32px;
2680
+ height: 32px;
2681
+ box-sizing: border-box;
2682
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
2683
+ top: 16px;
2684
+ z-index: 10;
2685
+ border-radius: 8px;
2686
+ border: 1px solid rgb(206, 208, 212);
2687
+ overflow: hidden;
2688
+ }
2689
+ .c-rich-text-editor #block-controls button {
2690
+ border: 1px solid white;
2691
+ background-color: #fff;
2692
+ display: block;
2693
+ transition: background-color 0.1s ease;
2694
+ cursor: pointer;
2695
+ outline: none;
2696
+ border-radius: 8px;
2697
+ padding: 3px;
2698
+ }
2699
+ .c-rich-text-editor #block-controls button:hover {
2700
+ background-color: #efefef;
2701
+ }
2702
+ .c-rich-text-editor #block-controls button:focus-visible {
2703
+ border-color: blue;
2704
+ }
2705
+ .c-rich-text-editor #block-controls span.block-type {
2706
+ background-size: contain;
2707
+ display: block;
2708
+ width: 18px;
2709
+ height: 18px;
2710
+ margin: 2px;
2711
+ }
2712
+ .c-rich-text-editor #block-controls span.block-type.paragraph {
2713
+ background-image: url(./text-paragraph-MFTUIIQG.svg);
2714
+ }
2715
+ .c-rich-text-editor #block-controls span.block-type.h1 {
2716
+ background-image: url(./type-h1-6KJP7YOM.svg);
2717
+ }
2718
+ .c-rich-text-editor #block-controls span.block-type.h2 {
2719
+ background-image: url(./type-h2-VHI2USC3.svg);
2720
+ }
2721
+ .c-rich-text-editor #block-controls span.block-type.quote {
2722
+ background-image: url(./chat-square-quote-CI6PUJHH.svg);
2723
+ }
2724
+ .c-rich-text-editor #block-controls span.block-type.ul {
2725
+ background-image: url(./list-ul-DVKNUP47.svg);
2726
+ }
2727
+ .c-rich-text-editor #block-controls span.block-type.ol {
2728
+ background-image: url(./list-ol-2ZEUN4Z7.svg);
2729
+ }
2730
+ .c-rich-text-editor #block-controls span.block-type.code {
2731
+ background-image: url(./code-SEVR6TIQ.svg);
2732
+ }
2733
+ .c-rich-text-editor .characters-limit {
2734
+ color: #888;
2735
+ font-size: 12px;
2736
+ text-align: right;
2737
+ display: block;
2738
+ position: absolute;
2739
+ left: 12px;
2740
+ bottom: 5px;
2741
+ }
2742
+ .c-rich-text-editor .characters-limit.characters-limit-exceeded {
2743
+ color: red;
2744
+ }
2745
+ .c-rich-text-editor .dropdown {
2746
+ z-index: 10;
2747
+ display: block;
2748
+ position: fixed;
2749
+ box-shadow:
2750
+ 0 12px 28px 0 rgba(0, 0, 0, 0.2),
2751
+ 0 2px 4px 0 rgba(0, 0, 0, 0.1),
2752
+ inset 0 0 0 1px rgba(255, 255, 255, 0.5);
2753
+ border-radius: 8px;
2754
+ min-height: 40px;
2755
+ background-color: #fff;
2756
+ }
2757
+ .c-rich-text-editor .dropdown .item {
2758
+ margin: 0 8px 0 8px;
2759
+ padding: 8px;
2760
+ color: #050505;
2761
+ cursor: pointer;
2762
+ line-height: 16px;
2763
+ font-size: 15px;
2764
+ display: flex;
2765
+ align-content: center;
2766
+ flex-direction: row;
2767
+ flex-shrink: 0;
2768
+ justify-content: space-between;
2769
+ background-color: #fff;
2770
+ border-radius: 8px;
2771
+ border: 0;
2772
+ max-width: 250px;
2773
+ min-width: 100px;
2774
+ }
2775
+ .c-rich-text-editor .dropdown .item.fontsize-item,
2776
+ .c-rich-text-editor .dropdown .item.fontsize-item .text {
2777
+ min-width: unset;
2778
+ }
2779
+ .c-rich-text-editor .dropdown .item .active {
2780
+ display: flex;
2781
+ width: 20px;
2782
+ height: 20px;
2783
+ background-size: contain;
2784
+ }
2785
+ .c-rich-text-editor .dropdown .item:first-child {
2786
+ margin-top: 8px;
2787
+ }
2788
+ .c-rich-text-editor .dropdown .item:last-child {
2789
+ margin-bottom: 8px;
2790
+ }
2791
+ .c-rich-text-editor .dropdown .item:hover {
2792
+ background-color: #eee;
2793
+ }
2794
+ .c-rich-text-editor .dropdown .item .text {
2795
+ display: flex;
2796
+ line-height: 20px;
2797
+ flex-grow: 1;
2798
+ min-width: 150px;
2799
+ }
2800
+ .c-rich-text-editor .dropdown .item .icon {
2801
+ display: flex;
2802
+ width: 20px;
2803
+ height: 20px;
2804
+ user-select: none;
2805
+ margin-right: 12px;
2806
+ line-height: 16px;
2807
+ background-size: contain;
2808
+ background-position: center;
2809
+ background-repeat: no-repeat;
2810
+ }
2811
+ .c-rich-text-editor .dropdown .divider {
2812
+ width: auto;
2813
+ background-color: #eee;
2814
+ margin: 4px 8px;
2815
+ height: 1px;
2816
+ }
2817
+ @media screen and (max-width: 1100px) {
2818
+ .c-rich-text-editor .dropdown-button-text {
2819
+ display: none !important;
2820
+ }
2821
+ .c-rich-text-editor .font-size .dropdown-button-text {
2822
+ display: flex !important;
2823
+ }
2824
+ .c-rich-text-editor .code-language .dropdown-button-text {
2825
+ display: flex !important;
2826
+ }
2827
+ }
2828
+ .c-rich-text-editor .icon.paragraph {
2829
+ background-image: url(./text-paragraph-MFTUIIQG.svg);
2830
+ }
2831
+ .c-rich-text-editor .icon.h1 {
2832
+ background-image: url(./type-h1-6KJP7YOM.svg);
2833
+ }
2834
+ .c-rich-text-editor .icon.h2 {
2835
+ background-image: url(./type-h2-VHI2USC3.svg);
2836
+ }
2837
+ .c-rich-text-editor .icon.h3 {
2838
+ background-image: url(./type-h3-JIU77CHO.svg);
2839
+ }
2840
+ .c-rich-text-editor .icon.h4 {
2841
+ background-image: url(./type-h4-P5EHKDAL.svg);
2842
+ }
2843
+ .c-rich-text-editor .icon.h5 {
2844
+ background-image: url(./type-h5-CS2KYVRG.svg);
2845
+ }
2846
+ .c-rich-text-editor .icon.h6 {
2847
+ background-image: url(./type-h6-J2O74LJZ.svg);
2848
+ }
2849
+ .c-rich-text-editor .icon.bullet-list,
2850
+ .c-rich-text-editor .icon.bullet {
2851
+ background-image: url(./list-ul-DVKNUP47.svg);
2852
+ }
2853
+ .c-rich-text-editor .icon.check-list,
2854
+ .c-rich-text-editor .icon.check {
2855
+ background-image: url(./square-check-UTG6FU6D.svg);
2856
+ }
2857
+ .c-rich-text-editor .icon.numbered-list,
2858
+ .c-rich-text-editor .icon.number {
2859
+ background-image: url(./list-ol-2ZEUN4Z7.svg);
2860
+ }
2861
+ .c-rich-text-editor .icon.quote {
2862
+ background-image: url(./chat-square-quote-CI6PUJHH.svg);
2863
+ }
2864
+ .c-rich-text-editor .icon.code {
2865
+ background-image: url(./code-SEVR6TIQ.svg);
2866
+ }
2867
+ .c-rich-text-editor .switches {
2868
+ z-index: 6;
2869
+ position: fixed;
2870
+ left: 10px;
2871
+ bottom: 70px;
2872
+ animation: slide-in 0.4s ease;
2873
+ }
2874
+ @keyframes slide-in {
2875
+ 0% {
2876
+ opacity: 0;
2877
+ transform: translateX(-200px);
2878
+ }
2879
+ 100% {
2880
+ opacity: 1;
2881
+ transform: translateX(0);
2882
+ }
2883
+ }
2884
+ .c-rich-text-editor .switch {
2885
+ display: block;
2886
+ color: #444;
2887
+ margin: 5px 0;
2888
+ background-color: rgba(238, 238, 238, 0.7);
2889
+ padding: 5px 10px;
2890
+ border-radius: 10px;
2891
+ }
2892
+ .c-rich-text-editor #rich-text-switch {
2893
+ right: 0;
2894
+ }
2895
+ .c-rich-text-editor #character-count-switch {
2896
+ right: 130px;
2897
+ }
2898
+ .c-rich-text-editor .switch label {
2899
+ margin-right: 5px;
2900
+ line-height: 24px;
2901
+ width: 100px;
2902
+ font-size: 14px;
2903
+ display: inline-block;
2904
+ vertical-align: middle;
2905
+ }
2906
+ .c-rich-text-editor .switch button {
2907
+ background-color: rgb(206, 208, 212);
2908
+ height: 24px;
2909
+ box-sizing: border-box;
2910
+ border-radius: 12px;
2911
+ width: 44px;
2912
+ display: inline-block;
2913
+ vertical-align: middle;
2914
+ position: relative;
2915
+ outline: none;
2916
+ cursor: pointer;
2917
+ transition: background-color 0.1s;
2918
+ border: 2px solid transparent;
2919
+ }
2920
+ .c-rich-text-editor .switch button:focus-visible {
2921
+ border-color: blue;
2922
+ }
2923
+ .c-rich-text-editor .switch button span {
2924
+ top: 0px;
2925
+ left: 0px;
2926
+ display: block;
2927
+ position: absolute;
2928
+ width: 20px;
2929
+ height: 20px;
2930
+ border-radius: 12px;
2931
+ background-color: white;
2932
+ transition: transform 0.2s;
2933
+ }
2934
+ .c-rich-text-editor .switch button[aria-checked=true] {
2935
+ background-color: rgb(24, 119, 242);
2936
+ }
2937
+ .c-rich-text-editor .switch button[aria-checked=true] span {
2938
+ transform: translateX(20px);
2939
+ }
2940
+ .c-rich-text-editor .keyword {
2941
+ color: rgb(241, 118, 94);
2942
+ font-weight: bold;
2943
+ }
2944
+ .c-rich-text-editor .actions i.indent {
2945
+ background-image: url(./indent-MJ6JIMCK.svg);
2946
+ }
2947
+ .c-rich-text-editor .actions i.outdent {
2948
+ background-image: url(./outdent-2LUMUMIP.svg);
2949
+ }
2950
+ .c-rich-text-editor .actions i.lock {
2951
+ background-image: url(./lock-fill-JZSKOSHK.svg);
2952
+ }
2953
+ .c-rich-text-editor .actions i.image {
2954
+ background-image: url(./file-image-TIQPFJX4.svg);
2955
+ }
2956
+ .c-rich-text-editor .actions i.table {
2957
+ background-image: url(./table-BR6DI4ZQ.svg);
2958
+ }
2959
+ .c-rich-text-editor .actions i.unlock {
2960
+ background-image: url(./lock-WCYOZOHW.svg);
2961
+ }
2962
+ .c-rich-text-editor .actions i.left-align {
2963
+ background-image: url(./text-left-KT2B6TR3.svg);
2964
+ }
2965
+ .c-rich-text-editor .actions i.center-align {
2966
+ background-image: url(./text-center-UQI6PAEF.svg);
2967
+ }
2968
+ .c-rich-text-editor .actions i.right-align {
2969
+ background-image: url(./text-right-SKELPISG.svg);
2970
+ }
2971
+ .c-rich-text-editor .actions i.justify-align {
2972
+ background-image: url(./justify-J7X5JEEX.svg);
2973
+ }
2974
+ .c-rich-text-editor .actions i.disconnect {
2975
+ background-image: url(./plug-HGGGEVS3.svg);
2976
+ }
2977
+ .c-rich-text-editor .actions i.connect {
2978
+ background-image: url(./plug-fill-OTG3U4TN.svg);
2979
+ }
2980
+ .c-rich-text-editor table.disable-selection {
2981
+ -webkit-touch-callout: none;
2982
+ -webkit-user-select: none;
2983
+ -khtml-user-select: none;
2984
+ -moz-user-select: none;
2985
+ -ms-user-select: none;
2986
+ user-select: none;
2987
+ }
2988
+ .c-rich-text-editor table.disable-selection span::selection {
2989
+ background-color: transparent;
2990
+ }
2991
+ .c-rich-text-editor table.disable-selection br::selection {
2992
+ background-color: transparent;
2993
+ }
2994
+ .c-rich-text-editor .table-cell-action-button-container {
2995
+ position: absolute;
2996
+ top: 0;
2997
+ left: 0;
2998
+ will-change: transform;
2999
+ }
3000
+ .c-rich-text-editor .table-cell-action-button {
3001
+ background-color: none;
3002
+ display: flex;
3003
+ justify-content: center;
3004
+ align-items: center;
3005
+ border: 0;
3006
+ position: relative;
3007
+ border-radius: 15px;
3008
+ color: #222;
3009
+ display: inline-block;
3010
+ cursor: pointer;
3011
+ }
3012
+ .c-rich-text-editor i.chevron-down {
3013
+ background-color: transparent;
3014
+ background-size: contain;
3015
+ display: inline-block;
3016
+ height: 8px;
3017
+ width: 8px;
3018
+ background-image: url(./chevron-down-3FRWSIKS.svg);
3019
+ }
3020
+ .c-rich-text-editor .action-button {
3021
+ background-color: #eee;
3022
+ border: 0;
3023
+ padding: 8px 12px;
3024
+ position: relative;
3025
+ margin-left: 5px;
3026
+ border-radius: 15px;
3027
+ color: #222;
3028
+ display: inline-block;
3029
+ cursor: pointer;
3030
+ }
3031
+ .c-rich-text-editor .action-button:hover {
3032
+ background-color: #ddd;
3033
+ color: #000;
3034
+ }
3035
+ .c-rich-text-editor .action-button-mic.active {
3036
+ animation: mic-pulsate-color 3s infinite;
3037
+ }
3038
+ .c-rich-text-editor button.action-button:disabled {
3039
+ opacity: 0.6;
3040
+ background: #eee;
3041
+ cursor: not-allowed;
3042
+ }
3043
+ @keyframes mic-pulsate-color {
3044
+ 0% {
3045
+ background-color: #ffdcdc;
3046
+ }
3047
+ 50% {
3048
+ background-color: #ff8585;
3049
+ }
3050
+ 100% {
3051
+ background-color: #ffdcdc;
3052
+ }
3053
+ }
3054
+ .c-rich-text-editor .debug-timetravel-panel {
3055
+ overflow: hidden;
3056
+ padding: 0 0 10px 0;
3057
+ margin: auto;
3058
+ display: flex;
3059
+ }
3060
+ .c-rich-text-editor .debug-timetravel-panel-slider {
3061
+ padding: 0;
3062
+ flex: 8;
3063
+ }
3064
+ .c-rich-text-editor .debug-timetravel-panel-button {
3065
+ padding: 0;
3066
+ border: 0;
3067
+ background: none;
3068
+ flex: 1;
3069
+ color: #fff;
3070
+ font-size: 12px;
3071
+ }
3072
+ .c-rich-text-editor .debug-timetravel-panel-button:hover {
3073
+ text-decoration: underline;
3074
+ }
3075
+ .c-rich-text-editor .debug-timetravel-button {
3076
+ border: 0;
3077
+ padding: 0;
3078
+ font-size: 12px;
3079
+ top: 10px;
3080
+ right: 15px;
3081
+ position: absolute;
3082
+ background: none;
3083
+ color: #fff;
3084
+ }
3085
+ .c-rich-text-editor .debug-timetravel-button:hover {
3086
+ text-decoration: underline;
3087
+ }
3088
+ .c-rich-text-editor .connecting {
3089
+ font-size: 15px;
3090
+ color: #999;
3091
+ overflow: hidden;
3092
+ position: absolute;
3093
+ text-overflow: ellipsis;
3094
+ top: 10px;
3095
+ left: 10px;
3096
+ user-select: none;
3097
+ white-space: nowrap;
3098
+ display: inline-block;
3099
+ pointer-events: none;
3100
+ }
3101
+ .c-rich-text-editor .ltr {
3102
+ text-align: left;
3103
+ }
3104
+ .c-rich-text-editor .rtl {
3105
+ text-align: right;
3106
+ }
3107
+ .c-rich-text-editor .toolbar {
3108
+ display: flex;
3109
+ height: 3rem;
3110
+ width: 100%;
3111
+ justify-content: space-between;
3112
+ overflow: auto;
3113
+ border-top-left-radius: 0.375rem;
3114
+ border-top-right-radius: 0.375rem;
3115
+ padding-top: 0.25rem;
3116
+ padding-bottom: 0.25rem;
3117
+ padding-right: 0.5rem;
3118
+ padding-left: 1rem;
3119
+ vertical-align: middle;
3120
+ }
3121
+ .c-rich-text-editor .toolbar button.toolbar-item {
3122
+ display: flex;
3123
+ flex-shrink: 0;
3124
+ cursor: pointer;
3125
+ align-items: center;
3126
+ justify-content: space-between;
3127
+ border-radius: 0.375rem;
3128
+ border-width: 0px;
3129
+ background-color: transparent;
3130
+ padding: 0.5rem;
3131
+ vertical-align: middle;
3132
+ }
3133
+ .c-rich-text-editor .toolbar button.toolbar-item:disabled {
3134
+ cursor: not-allowed;
3135
+ }
3136
+ .c-rich-text-editor .toolbar button.toolbar-item.spaced {
3137
+ margin-right: 0.125rem;
3138
+ }
3139
+ .c-rich-text-editor .toolbar button.toolbar-item i.format {
3140
+ background-size: contain;
3141
+ display: inline-block;
3142
+ height: 18px;
3143
+ width: 18px;
3144
+ vertical-align: -0.25em;
3145
+ display: flex;
3146
+ opacity: 0.6;
3147
+ }
3148
+ .c-rich-text-editor .toolbar button.toolbar-item:disabled .icon,
3149
+ .c-rich-text-editor .toolbar button.toolbar-item:disabled .text,
3150
+ .c-rich-text-editor .toolbar button.toolbar-item:disabled i.format,
3151
+ .c-rich-text-editor .toolbar button.toolbar-item:disabled .chevron-down {
3152
+ opacity: 0.2;
3153
+ }
3154
+ .c-rich-text-editor .toolbar button.toolbar-item.active {
3155
+ --tw-bg-opacity: 1;
3156
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
3157
+ }
3158
+ .c-rich-text-editor .toolbar button.toolbar-item.active i {
3159
+ opacity: 1;
3160
+ }
3161
+ .c-rich-text-editor .toolbar .toolbar-item:hover:not([disabled]) {
3162
+ --tw-bg-opacity: 1;
3163
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
3164
+ }
3165
+ .c-rich-text-editor .toolbar .toolbar-item.font-family .text {
3166
+ display: block;
3167
+ max-width: 40px;
3168
+ }
3169
+ .c-rich-text-editor .toolbar .code-language {
3170
+ width: 150px;
3171
+ }
3172
+ .c-rich-text-editor .toolbar .toolbar-item .text {
3173
+ display: flex;
3174
+ line-height: 20px;
3175
+ vertical-align: middle;
3176
+ font-size: 14px;
3177
+ color: #777;
3178
+ text-overflow: ellipsis;
3179
+ overflow: hidden;
3180
+ height: 20px;
3181
+ text-align: left;
3182
+ padding-right: 10px;
3183
+ }
3184
+ .c-rich-text-editor .toolbar .toolbar-item .icon {
3185
+ display: flex;
3186
+ width: 20px;
3187
+ height: 20px;
3188
+ user-select: none;
3189
+ margin-right: 8px;
3190
+ line-height: 16px;
3191
+ background-size: contain;
3192
+ }
3193
+ .c-rich-text-editor .toolbar i.chevron-down {
3194
+ margin-top: 3px;
3195
+ width: 16px;
3196
+ height: 16px;
3197
+ display: flex;
3198
+ user-select: none;
3199
+ }
3200
+ .c-rich-text-editor .toolbar i.chevron-down.inside {
3201
+ width: 16px;
3202
+ height: 16px;
3203
+ display: flex;
3204
+ margin-left: -25px;
3205
+ margin-top: 11px;
3206
+ margin-right: 10px;
3207
+ pointer-events: none;
3208
+ }
3209
+ .c-rich-text-editor .toolbar .divider {
3210
+ width: 1px;
3211
+ background-color: #eee;
3212
+ margin: 0 4px;
3213
+ }
3214
+ .c-rich-text-editor .github-corner:hover .octo-arm {
3215
+ animation: octocat-wave 560ms ease-in-out;
3216
+ }
3217
+ @keyframes octocat-wave {
3218
+ 0%, 100% {
3219
+ transform: rotate(0);
3220
+ }
3221
+ 20%, 60% {
3222
+ transform: rotate(-25deg);
3223
+ }
3224
+ 40%, 80% {
3225
+ transform: rotate(10deg);
3226
+ }
3227
+ }
3228
+ @media (max-width: 500px) {
3229
+ .c-rich-text-editor .github-corner:hover .octo-arm {
3230
+ animation: none;
3231
+ }
3232
+ .c-rich-text-editor .github-corner .octo-arm {
3233
+ animation: octocat-wave 560ms ease-in-out;
3234
+ }
3235
+ }
3236
+ .c-rich-text-editor .spacer {
3237
+ letter-spacing: -2px;
3238
+ }
3239
+ .c-rich-text-editor button.item i {
3240
+ opacity: 0.6;
3241
+ }
3242
+ .c-rich-text-editor button.item.dropdown-item-active {
3243
+ background-color: rgba(223, 232, 250, 0.3);
3244
+ }
3245
+ .c-rich-text-editor button.item.dropdown-item-active i {
3246
+ opacity: 1;
3247
+ }
3248
+ .c-rich-text-editor hr {
3249
+ padding: 4px 0;
3250
+ border: 1px solid red;
3251
+ border: none;
3252
+ margin: 1em 0;
3253
+ cursor: pointer;
3254
+ }
3255
+ .c-rich-text-editor hr:after {
3256
+ content: "";
3257
+ display: block;
3258
+ height: 1px;
3259
+ background-color: #ccc;
3260
+ line-height: 1px;
3261
+ --tw-bg-opacity: 1;
3262
+ background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
3263
+ }
3264
+ .c-rich-text-editor hr.selected {
3265
+ outline: 2px solid rgb(60, 132, 244);
3266
+ user-select: none;
3267
+ }
3268
+ .c-rich-text-editor .TableNode__contentEditable {
3269
+ min-height: 20px;
3270
+ border: 0px;
3271
+ resize: none;
3272
+ min-height: 100%;
3273
+ cursor: text;
3274
+ display: block;
3275
+ position: relative;
3276
+ tab-size: 1;
3277
+ outline: 0px;
3278
+ padding: 0;
3279
+ user-select: text;
3280
+ font-size: 15px;
3281
+ white-space: pre-wrap;
3282
+ word-break: break-word;
3283
+ z-index: 3;
3284
+ }
3285
+ .c-rich-text-editor .TableNode__contentEditable .PlaygroundEditorTheme__paragraph {
3286
+ margin-top: 0px;
3287
+ }
3288
+ .c-rich-text-editor .PlaygroundEditorTheme__blockCursor {
3289
+ display: block;
3290
+ pointer-events: none;
3291
+ position: absolute;
3292
+ }
3293
+ .c-rich-text-editor .PlaygroundEditorTheme__blockCursor:after {
3294
+ content: "";
3295
+ display: block;
3296
+ position: absolute;
3297
+ top: -2px;
3298
+ width: 20px;
3299
+ border-top: 1px solid black;
3300
+ animation: CursorBlink 1.1s steps(2, start) infinite;
3301
+ }
3302
+ @keyframes CursorBlink {
3303
+ to {
3304
+ visibility: hidden;
3305
+ }
3306
+ }
3307
+
3308
+ /* src/rich-text-editor/plugins/CodeActionMenuPlugin/index.css */
3309
+ .code-action-menu-container {
3310
+ height: 35.8px;
3311
+ font-size: 10px;
3312
+ color: rgba(0, 0, 0, 0.5);
3313
+ position: absolute;
3314
+ display: flex;
3315
+ align-items: center;
3316
+ flex-direction: row;
3317
+ user-select: none;
3318
+ }
3319
+ .code-action-menu-container .code-highlight-language {
3320
+ margin-right: 4px;
3321
+ }
3322
+ .code-action-menu-container button.menu-item {
3323
+ border: 1px solid transparent;
3324
+ border-radius: 4px;
3325
+ padding: 4px;
3326
+ background: none;
3327
+ cursor: pointer;
3328
+ flex-shrink: 0;
3329
+ display: flex;
3330
+ align-items: center;
3331
+ color: rgba(0, 0, 0, 0.5);
3332
+ text-transform: uppercase;
3333
+ }
3334
+ .code-action-menu-container button.menu-item i.format {
3335
+ height: 16px;
3336
+ width: 16px;
3337
+ opacity: 0.6;
3338
+ display: flex;
3339
+ color: rgba(0, 0, 0, 0.5);
3340
+ background-size: contain;
3341
+ }
3342
+ .code-action-menu-container button.menu-item:hover {
3343
+ border: 1px solid rgba(0, 0, 0, 0.3);
3344
+ opacity: 0.9;
3345
+ }
3346
+ .code-action-menu-container button.menu-item:active {
3347
+ background-color: rgba(223, 232, 250);
3348
+ border: 1px solid rgba(0, 0, 0, 0.45);
3349
+ }
3350
+
3351
+ /* src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.css */
3352
+ .code-action-menu-container .prettier-wrapper {
3353
+ position: relative;
3354
+ }
3355
+ .code-action-menu-container .prettier-wrapper .code-error-tips {
3356
+ padding: 5px;
3357
+ border-radius: 4px;
3358
+ color: #fff;
3359
+ background: #222;
3360
+ margin-top: 4px;
3361
+ position: absolute;
3362
+ top: 26px;
3363
+ right: 0;
3364
+ }
3365
+
3366
+ /* src/rich-text-editor/plugins/DraggableBlockPlugin/index.css */
3367
+ .draggable-block-menu {
3368
+ border-radius: 4px;
3369
+ padding: 2px 1px;
3370
+ cursor: grab;
3371
+ opacity: 0;
3372
+ position: absolute;
3373
+ left: 0;
3374
+ top: 0;
3375
+ will-change: transform;
3376
+ }
3377
+ .draggable-block-menu .icon {
3378
+ width: 16px;
3379
+ height: 16px;
3380
+ opacity: 0.3;
3381
+ background-image: url(./draggable-block-menu-KKHDNKJA.svg);
3382
+ }
3383
+ .draggable-block-menu:active {
3384
+ cursor: grabbing;
3385
+ }
3386
+ .draggable-block-menu:hover {
3387
+ background-color: #efefef;
3388
+ }
3389
+ .draggable-block-target-line {
3390
+ pointer-events: none;
3391
+ background: deepskyblue;
3392
+ height: 4px;
3393
+ position: absolute;
3394
+ left: 0;
3395
+ top: 0;
3396
+ opacity: 0;
3397
+ will-change: transform;
3398
+ }
3399
+
3400
+ /* src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.css */
3401
+ .link-editor {
3402
+ position: absolute;
3403
+ top: 0;
3404
+ left: 0;
3405
+ z-index: 10;
3406
+ max-width: 400px;
3407
+ width: 100%;
3408
+ opacity: 0;
3409
+ background-color: #fff;
3410
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
3411
+ border-radius: 8px;
3412
+ transition: opacity 0.5s;
3413
+ will-change: transform;
3414
+ }
3415
+ .link-editor .button {
3416
+ width: 20px;
3417
+ height: 20px;
3418
+ display: inline-block;
3419
+ padding: 6px;
3420
+ border-radius: 8px;
3421
+ cursor: pointer;
3422
+ margin: 0 2px;
3423
+ }
3424
+ .link-editor .button.hovered {
3425
+ width: 20px;
3426
+ height: 20px;
3427
+ display: inline-block;
3428
+ background-color: #eee;
3429
+ }
3430
+ .link-editor .button i,
3431
+ .actions i {
3432
+ background-size: contain;
3433
+ display: inline-block;
3434
+ height: 20px;
3435
+ width: 20px;
3436
+ vertical-align: -0.25em;
3437
+ }
3438
+
3439
+ /* src/rich-text-editor/ui/LinkPreview.css */
3440
+ @keyframes glimmer-animation {
3441
+ 0% {
3442
+ background: #f9f9f9;
3443
+ }
3444
+ .50% {
3445
+ background: #eeeeee;
3446
+ }
3447
+ .100% {
3448
+ background: #f9f9f9;
3449
+ }
3450
+ }
3451
+ .LinkPreview__container {
3452
+ }
3453
+ .LinkPreview__imageWrapper {
3454
+ text-align: center;
3455
+ }
3456
+ .LinkPreview__image {
3457
+ margin: auto;
3458
+ max-height: 250px;
3459
+ max-width: 100%;
3460
+ }
3461
+ .LinkPreview__title {
3462
+ margin-left: 1.5rem;
3463
+ margin-right: 1.5rem;
3464
+ margin-top: 0.5rem;
3465
+ font-family:
3466
+ "Roboto Slab",
3467
+ ui-serif,
3468
+ Georgia,
3469
+ Cambria,
3470
+ "Times New Roman",
3471
+ Times,
3472
+ serif;
3473
+ font-weight: 600;
3474
+ line-height: 1.25rem;
3475
+ --tw-text-opacity: 1;
3476
+ color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
3477
+ }
3478
+ .LinkPreview__description {
3479
+ margin-left: 1.5rem;
3480
+ margin-right: 1.5rem;
3481
+ margin-top: 0.5rem;
3482
+ margin-bottom: 1rem;
3483
+ font-size: 0.875rem;
3484
+ line-height: 1.25rem;
3485
+ }
3486
+ .LinkPreview__domain {
3487
+ margin-left: 1.5rem;
3488
+ margin-right: 1.5rem;
3489
+ margin-top: 0.5rem;
3490
+ font-size: 0.875rem;
3491
+ line-height: 1.25rem;
3492
+ --tw-text-opacity: 1;
3493
+ color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
3494
+ }
3495
+ .LinkPreview__glimmer {
3496
+ background: #f9f9f9;
3497
+ border-radius: 8px;
3498
+ height: 18px;
3499
+ margin-bottom: 8px;
3500
+ margin-left: 12px;
3501
+ margin-right: 12px;
3502
+ animation-duration: 3s;
3503
+ animation-iteration-count: infinite;
3504
+ animation-timing-function: linear;
3505
+ animation-name: glimmer-animation;
3506
+ }
3507
+
3508
+ /* src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.css */
3509
+ .floating-text-format-popup {
3510
+ vertical-align: middle;
3511
+ background-color: #fff;
3512
+ transition: opacity 0.5s;
3513
+ height: 43px;
3514
+ will-change: transform;
3515
+ box-sizing: border-box;
3516
+ position: absolute;
3517
+ top: 0px;
3518
+ left: 0px;
3519
+ z-index: 10;
3520
+ display: flex;
3521
+ border-radius: 0.375rem;
3522
+ --tw-bg-opacity: 1;
3523
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
3524
+ padding: 0.25rem;
3525
+ opacity: 0;
3526
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
3527
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
3528
+ box-shadow:
3529
+ var(--tw-ring-offset-shadow, 0 0 #0000),
3530
+ var(--tw-ring-shadow, 0 0 #0000),
3531
+ var(--tw-shadow);
3532
+ }
3533
+ .floating-text-format-popup button.popup-item {
3534
+ border: 0;
3535
+ display: flex;
3536
+ background: none;
3537
+ border-radius: 10px;
3538
+ padding: 8px;
3539
+ cursor: pointer;
3540
+ vertical-align: middle;
3541
+ }
3542
+ .floating-text-format-popup button.popup-item:disabled {
3543
+ cursor: not-allowed;
3544
+ }
3545
+ .floating-text-format-popup button.popup-item.spaced {
3546
+ margin-right: 2px;
3547
+ }
3548
+ .floating-text-format-popup button.popup-item i.format {
3549
+ background-size: contain;
3550
+ display: inline-block;
3551
+ height: 18px;
3552
+ width: 18px;
3553
+ margin-top: 2px;
3554
+ vertical-align: -0.25em;
3555
+ display: flex;
3556
+ opacity: 0.6;
3557
+ }
3558
+ .floating-text-format-popup button.popup-item:disabled i.format {
3559
+ opacity: 0.2;
3560
+ }
3561
+ .floating-text-format-popup button.popup-item.active {
3562
+ background-color: rgba(223, 232, 250, 0.3);
3563
+ }
3564
+ .floating-text-format-popup button.popup-item.active i {
3565
+ opacity: 1;
3566
+ }
3567
+ .floating-text-format-popup .popup-item:hover:not([disabled]) {
3568
+ background-color: #eee;
3569
+ }
3570
+ .floating-text-format-popup select.popup-item {
3571
+ border: 0;
3572
+ display: flex;
3573
+ background: none;
3574
+ border-radius: 10px;
3575
+ padding: 8px;
3576
+ vertical-align: middle;
3577
+ -webkit-appearance: none;
3578
+ -moz-appearance: none;
3579
+ width: 70px;
3580
+ font-size: 14px;
3581
+ color: #777;
3582
+ text-overflow: ellipsis;
3583
+ }
3584
+ .floating-text-format-popup select.code-language {
3585
+ text-transform: capitalize;
3586
+ width: 130px;
3587
+ }
3588
+ .floating-text-format-popup .popup-item .text {
3589
+ display: flex;
3590
+ line-height: 20px;
3591
+ vertical-align: middle;
3592
+ font-size: 14px;
3593
+ color: #777;
3594
+ text-overflow: ellipsis;
3595
+ width: 70px;
3596
+ overflow: hidden;
3597
+ height: 20px;
3598
+ text-align: left;
3599
+ }
3600
+ .floating-text-format-popup .popup-item .icon {
3601
+ display: flex;
3602
+ width: 20px;
3603
+ height: 20px;
3604
+ user-select: none;
3605
+ margin-right: 8px;
3606
+ line-height: 16px;
3607
+ background-size: contain;
3608
+ }
3609
+ .floating-text-format-popup i.chevron-down {
3610
+ margin-top: 3px;
3611
+ width: 16px;
3612
+ height: 16px;
3613
+ display: flex;
3614
+ user-select: none;
3615
+ }
3616
+ .floating-text-format-popup i.chevron-down.inside {
3617
+ width: 16px;
3618
+ height: 16px;
3619
+ display: flex;
3620
+ margin-left: -25px;
3621
+ margin-top: 11px;
3622
+ margin-right: 10px;
3623
+ pointer-events: none;
3624
+ }
3625
+ .floating-text-format-popup .divider {
3626
+ width: 1px;
3627
+ background-color: #eee;
3628
+ margin: 0 4px;
3629
+ }
3630
+ @media (max-width: 1024px) {
3631
+ .floating-text-format-popup button.insert-comment {
3632
+ display: none;
3633
+ }
3634
+ }
3635
+
3636
+ /* src/rich-text-editor/plugins/TableCellResizer/index.css */
3637
+ .TableCellResizer__resizer {
3638
+ position: absolute;
3639
+ }
3640
+
3641
+ /* src/rich-text-editor/themes/PlaygroundEditorTheme.css */
3642
+ .PlaygroundEditorTheme__ltr {
3643
+ text-align: left;
3644
+ }
3645
+ .PlaygroundEditorTheme__rtl {
3646
+ text-align: right;
3647
+ }
3648
+ .PlaygroundEditorTheme__paragraph {
3649
+ font-size: 15px;
3650
+ position: relative;
3651
+ margin: 0px;
3652
+ margin-top: 0.5rem;
3653
+ line-height: 1.5rem;
3654
+ --tw-text-opacity: 1;
3655
+ color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity));
3656
+ }
3657
+ .PlaygroundEditorTheme__paragraph + .PlaygroundEditorTheme__paragraph {
3658
+ position: relative;
3659
+ margin: 0px;
3660
+ margin-top: 1rem;
3661
+ }
3662
+ .PlaygroundEditorTheme__quote {
3663
+ font-size: 15px;
3664
+ border-left-width: 4px;
3665
+ border-left-style: solid;
3666
+ margin: 0px;
3667
+ margin-left: 1.25rem;
3668
+ padding-left: 1rem;
3669
+ margin-top: 1.5rem;
3670
+ margin-bottom: 1.5rem;
3671
+ --tw-border-opacity: 1;
3672
+ border-left-color: rgb(var(--c-color-purple-700-200) / var(--tw-border-opacity));
3673
+ font-weight: 400;
3674
+ --tw-text-opacity: 1;
3675
+ color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3676
+ }
3677
+ .PlaygroundEditorTheme__h1 {
3678
+ font-size: 20px;
3679
+ margin: 0px;
3680
+ margin-bottom: 0.25rem;
3681
+ margin-top: 0.5rem;
3682
+ font-weight: 500;
3683
+ line-height: 1.5rem;
3684
+ --tw-text-opacity: 1;
3685
+ color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3686
+ }
3687
+ .PlaygroundEditorTheme__h2 {
3688
+ font-size: 19px;
3689
+ margin: 0px;
3690
+ margin-bottom: 0.25rem;
3691
+ margin-top: 0.5rem;
3692
+ font-size: 1.125rem;
3693
+ font-weight: 500;
3694
+ line-height: 1.5rem;
3695
+ --tw-text-opacity: 1;
3696
+ color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3697
+ }
3698
+ .PlaygroundEditorTheme__h3 {
3699
+ font-size: 18px;
3700
+ margin: 0px;
3701
+ margin-bottom: 0.25rem;
3702
+ margin-top: 0.5rem;
3703
+ font-weight: 500;
3704
+ line-height: 1.5rem;
3705
+ --tw-text-opacity: 1;
3706
+ color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3707
+ }
3708
+ .PlaygroundEditorTheme__h4 {
3709
+ font-size: 17px;
3710
+ margin: 0px;
3711
+ margin-bottom: 0.25rem;
3712
+ margin-top: 0.5rem;
3713
+ font-weight: 500;
3714
+ line-height: 1.5rem;
3715
+ --tw-text-opacity: 1;
3716
+ color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3717
+ }
3718
+ .PlaygroundEditorTheme__h5 {
3719
+ font-size: 16px;
3720
+ margin: 0px;
3721
+ margin-bottom: 0.25rem;
3722
+ margin-top: 0.5rem;
3723
+ font-weight: 500;
3724
+ line-height: 1.5rem;
3725
+ --tw-text-opacity: 1;
3726
+ color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3727
+ }
3728
+ .PlaygroundEditorTheme__h6 {
3729
+ font-size: 16px;
3730
+ margin: 0px;
3731
+ margin-bottom: 0.25rem;
3732
+ margin-top: 0.5rem;
3733
+ font-weight: 500;
3734
+ line-height: 1.5rem;
3735
+ --tw-text-opacity: 1;
3736
+ color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3737
+ }
3738
+ .PlaygroundEditorTheme__indent {
3739
+ --lexical-indent-base-value: 20px;
3740
+ }
3741
+ .PlaygroundEditorTheme__textBold {
3742
+ font-weight: 700;
3743
+ }
3744
+ .PlaygroundEditorTheme__textItalic {
3745
+ font-style: italic;
3746
+ }
3747
+ .PlaygroundEditorTheme__textUnderline {
3748
+ text-decoration-line: underline;
3749
+ }
3750
+ .PlaygroundEditorTheme__textStrikethrough {
3751
+ text-decoration-line: line-through;
3752
+ }
3753
+ .PlaygroundEditorTheme__textUnderlineStrikethrough {
3754
+ text-decoration: underline line-through;
3755
+ }
3756
+ .PlaygroundEditorTheme__textSubscript {
3757
+ font-size: 0.8em;
3758
+ vertical-align: sub !important;
3759
+ }
3760
+ .PlaygroundEditorTheme__textSuperscript {
3761
+ font-size: 0.8em;
3762
+ vertical-align: super;
3763
+ }
3764
+ .PlaygroundEditorTheme__textCode {
3765
+ padding: 2px 0.5rem;
3766
+ font-family:
3767
+ Menlo,
3768
+ Consolas,
3769
+ Monaco,
3770
+ monospace;
3771
+ font-size: 13px;
3772
+ border-width: 1px;
3773
+ border-style: solid;
3774
+ border-radius: 0.375rem;
3775
+ --tw-border-opacity: 1;
3776
+ border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
3777
+ --tw-bg-opacity: 1;
3778
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
3779
+ }
3780
+ .PlaygroundEditorTheme__hashtag {
3781
+ background-color: rgba(88, 144, 255, 0.15);
3782
+ border-bottom: 1px solid rgba(88, 144, 255, 0.3);
3783
+ }
3784
+ .PlaygroundEditorTheme__link {
3785
+ text-decoration: none;
3786
+ box-shadow: #5d96fd 0 -2px inset;
3787
+ --tw-text-opacity: 1 !important;
3788
+ color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity)) !important;
3789
+ }
3790
+ .PlaygroundEditorTheme__link:hover {
3791
+ cursor: pointer;
3792
+ }
3793
+ .PlaygroundEditorTheme__code {
3794
+ position: relative;
3795
+ margin-top: 0.5rem;
3796
+ margin-bottom: 0.5rem;
3797
+ margin-left: 0px;
3798
+ margin-right: 0px;
3799
+ display: block;
3800
+ overflow-x: auto;
3801
+ border-radius: 0.375rem;
3802
+ border-width: 1px;
3803
+ border-style: solid;
3804
+ --tw-border-opacity: 1;
3805
+ border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
3806
+ --tw-bg-opacity: 1;
3807
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
3808
+ padding: 0.5rem;
3809
+ padding-left: 3.5rem;
3810
+ font-size: 0.875rem;
3811
+ line-height: 1.25rem;
3812
+ font-family:
3813
+ Menlo,
3814
+ Consolas,
3815
+ Monaco,
3816
+ monospace;
3817
+ font-size: 12px;
3818
+ tab-size: 2;
3819
+ }
3820
+ .PlaygroundEditorTheme__code:before {
3821
+ position: absolute;
3822
+ top: 0px;
3823
+ left: 0px;
3824
+ border-width: 0px;
3825
+ border-right-width: 1px;
3826
+ border-style: solid;
3827
+ --tw-border-opacity: 1;
3828
+ border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
3829
+ --tw-bg-opacity: 1;
3830
+ background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
3831
+ padding: 0.5rem;
3832
+ text-align: right;
3833
+ --tw-text-opacity: 1;
3834
+ color: rgb(var(--c-color-gray-400-500) / var(--tw-text-opacity));
3835
+ content: attr(data-gutter);
3836
+ white-space: pre-wrap;
3837
+ min-width: 25px;
3838
+ }
3839
+ .PlaygroundEditorTheme__table {
3840
+ border-spacing: 0;
3841
+ max-width: 100%;
3842
+ overflow-y: scroll;
3843
+ table-layout: fixed;
3844
+ width: calc(100% - 25px);
3845
+ margin: 30px 0;
3846
+ overflow: hidden;
3847
+ border-width: 1px 1px 0 0;
3848
+ border-style: solid;
3849
+ border-radius: 0.375rem;
3850
+ --tw-border-opacity: 1;
3851
+ border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
3852
+ }
3853
+ .PlaygroundEditorTheme__tableSelected {
3854
+ outline-width: 2px;
3855
+ outline-color: rgb(var(--c-color-purple-200-700) / 1);
3856
+ }
3857
+ .PlaygroundEditorTheme__tableCell {
3858
+ position: relative;
3859
+ cursor: default;
3860
+ border-width: 1px;
3861
+ border-style: solid;
3862
+ --tw-border-opacity: 1;
3863
+ border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
3864
+ padding-left: 0.5rem;
3865
+ padding-right: 0.5rem;
3866
+ padding-top: 0px;
3867
+ padding-bottom: 0px;
3868
+ text-align: start;
3869
+ vertical-align: top;
3870
+ outline: 2px solid transparent;
3871
+ outline-offset: 2px;
3872
+ min-width: 75px;
3873
+ border-width: 0 0 1px 1px;
3874
+ }
3875
+ .PlaygroundEditorTheme__tableCell .PlaygroundEditorTheme__paragraph {
3876
+ margin-top: 0.5rem;
3877
+ margin-bottom: 0.5rem;
3878
+ font-size: 0.875rem;
3879
+ line-height: 1.25rem;
3880
+ }
3881
+ .PlaygroundEditorTheme__tableCellSortedIndicator {
3882
+ display: block;
3883
+ opacity: 0.5;
3884
+ position: absolute;
3885
+ bottom: 0;
3886
+ left: 0;
3887
+ width: 100%;
3888
+ height: 4px;
3889
+ background-color: #999;
3890
+ }
3891
+ .PlaygroundEditorTheme__tableCellResizer {
3892
+ position: absolute;
3893
+ right: -4px;
3894
+ height: 100%;
3895
+ width: 8px;
3896
+ cursor: ew-resize;
3897
+ z-index: 10;
3898
+ top: 0;
3899
+ }
3900
+ .PlaygroundEditorTheme__tableCellHeader {
3901
+ --tw-bg-opacity: 1;
3902
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
3903
+ text-align: start;
3904
+ }
3905
+ .PlaygroundEditorTheme__tableCellSelected {
3906
+ background-color: #c9dbf0;
3907
+ }
3908
+ .PlaygroundEditorTheme__tableCellPrimarySelected {
3909
+ border-width: 2px;
3910
+ border-style: solid;
3911
+ --tw-border-opacity: 1;
3912
+ border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
3913
+ display: block;
3914
+ height: calc(100% - 2px);
3915
+ position: absolute;
3916
+ width: calc(100% - 2px);
3917
+ left: -1px;
3918
+ top: -1px;
3919
+ z-index: 2;
3920
+ }
3921
+ .PlaygroundEditorTheme__tableCellEditing {
3922
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
3923
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
3924
+ box-shadow:
3925
+ var(--tw-ring-offset-shadow, 0 0 #0000),
3926
+ var(--tw-ring-shadow, 0 0 #0000),
3927
+ var(--tw-shadow);
3928
+ border-radius: 3px;
3929
+ }
3930
+ .PlaygroundEditorTheme__tableAddColumns {
3931
+ position: absolute;
3932
+ top: 0;
3933
+ width: 20px;
3934
+ height: 100%;
3935
+ right: 0;
3936
+ animation: table-controls 0.2s ease;
3937
+ border: 0;
3938
+ cursor: pointer;
3939
+ border: 1px solid transparent;
3940
+ --tw-bg-opacity: 1;
3941
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
3942
+ }
3943
+ .PlaygroundEditorTheme__tableAddColumns:after {
3944
+ background-image: url(./plus-CQISIKEC.svg);
3945
+ background-size: contain;
3946
+ background-position: center;
3947
+ background-repeat: no-repeat;
3948
+ display: block;
3949
+ content: " ";
3950
+ position: absolute;
3951
+ top: 0;
3952
+ left: 0;
3953
+ width: 100%;
3954
+ height: 100%;
3955
+ opacity: 1;
3956
+ }
3957
+ .PlaygroundEditorTheme__tableAddColumns:hover {
3958
+ border-radius: 0.125rem;
3959
+ --tw-border-opacity: 1;
3960
+ border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
3961
+ }
3962
+ .PlaygroundEditorTheme__tableAddRows {
3963
+ position: absolute;
3964
+ bottom: -25px;
3965
+ width: calc(100% - 25px);
3966
+ height: 20px;
3967
+ left: 0;
3968
+ animation: table-controls 0.2s ease;
3969
+ border: 0;
3970
+ cursor: pointer;
3971
+ border: 1px solid transparent;
3972
+ --tw-bg-opacity: 1;
3973
+ background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
3974
+ }
3975
+ .PlaygroundEditorTheme__tableAddRows:after {
3976
+ background-image: url(./plus-CQISIKEC.svg);
3977
+ background-size: contain;
3978
+ background-position: center;
3979
+ background-repeat: no-repeat;
3980
+ display: block;
3981
+ content: " ";
3982
+ position: absolute;
3983
+ top: 0;
3984
+ left: 0;
3985
+ width: 100%;
3986
+ height: 100%;
3987
+ opacity: 1;
3988
+ }
3989
+ .PlaygroundEditorTheme__tableAddRows:hover {
3990
+ border-radius: 0.125rem;
3991
+ --tw-border-opacity: 1;
3992
+ border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
3993
+ }
3994
+ @keyframes table-controls {
3995
+ 0% {
3996
+ opacity: 0;
3997
+ }
3998
+ 100% {
3999
+ opacity: 1;
4000
+ }
4001
+ }
4002
+ .PlaygroundEditorTheme__tableCellResizeRuler {
4003
+ display: block;
4004
+ position: absolute;
4005
+ width: 1px;
4006
+ background-color: rgb(60, 132, 244);
4007
+ height: 100%;
4008
+ top: 0;
4009
+ }
4010
+ .PlaygroundEditorTheme__tableCellActionButtonContainer {
4011
+ display: block;
4012
+ right: 5px;
4013
+ top: 6px;
4014
+ position: absolute;
4015
+ z-index: 4;
4016
+ width: 20px;
4017
+ height: 20px;
4018
+ }
4019
+ .PlaygroundEditorTheme__tableCellActionButton {
4020
+ background-color: #eee;
4021
+ display: block;
4022
+ border: 0;
4023
+ border-radius: 20px;
4024
+ width: 20px;
4025
+ height: 20px;
4026
+ color: #222;
4027
+ cursor: pointer;
4028
+ }
4029
+ .PlaygroundEditorTheme__tableCellActionButton:hover {
4030
+ background-color: #ddd;
4031
+ }
4032
+ .PlaygroundEditorTheme__characterLimit {
4033
+ display: inline;
4034
+ background-color: #ffbbbb !important;
4035
+ }
4036
+ .PlaygroundEditorTheme__ol1 {
4037
+ padding: 0;
4038
+ margin: 0;
4039
+ list-style-position: inside;
4040
+ }
4041
+ .PlaygroundEditorTheme__ol2 {
4042
+ padding: 0;
4043
+ margin: 0;
4044
+ list-style-type: upper-alpha;
4045
+ list-style-position: inside;
4046
+ }
4047
+ .PlaygroundEditorTheme__ol3 {
4048
+ padding: 0;
4049
+ margin: 0;
4050
+ list-style-type: lower-alpha;
4051
+ list-style-position: inside;
4052
+ }
4053
+ .PlaygroundEditorTheme__ol4 {
4054
+ padding: 0;
4055
+ margin: 0;
4056
+ list-style-type: upper-roman;
4057
+ list-style-position: inside;
4058
+ }
4059
+ .PlaygroundEditorTheme__ol5 {
4060
+ padding: 0;
4061
+ margin: 0;
4062
+ list-style-type: lower-roman;
4063
+ list-style-position: inside;
4064
+ }
4065
+ .PlaygroundEditorTheme__ul {
4066
+ padding: 0;
4067
+ margin: 0;
4068
+ list-style-position: inside;
4069
+ }
4070
+ .PlaygroundEditorTheme__listItem {
4071
+ margin-top: 0px;
4072
+ margin-bottom: 0px;
4073
+ margin-left: 1.25rem;
4074
+ margin-right: 1.25rem;
4075
+ line-height: 1.5rem;
4076
+ --tw-text-opacity: 1;
4077
+ color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity));
4078
+ }
4079
+ .PlaygroundEditorTheme__listItemChecked,
4080
+ .PlaygroundEditorTheme__listItemUnchecked {
4081
+ position: relative;
4082
+ margin-left: 8px;
4083
+ margin-right: 8px;
4084
+ padding-left: 24px;
4085
+ padding-right: 24px;
4086
+ list-style-type: none;
4087
+ outline: none;
4088
+ }
4089
+ .PlaygroundEditorTheme__listItemChecked {
4090
+ text-decoration: line-through;
4091
+ }
4092
+ .PlaygroundEditorTheme__listItemUnchecked:before,
4093
+ .PlaygroundEditorTheme__listItemChecked:before {
4094
+ content: "";
4095
+ width: 16px;
4096
+ height: 16px;
4097
+ top: 2px;
4098
+ left: 0;
4099
+ cursor: pointer;
4100
+ display: block;
4101
+ background-size: cover;
4102
+ position: absolute;
4103
+ }
4104
+ .PlaygroundEditorTheme__listItemUnchecked[dir=rtl]:before,
4105
+ .PlaygroundEditorTheme__listItemChecked[dir=rtl]:before {
4106
+ left: auto;
4107
+ right: 0;
4108
+ }
4109
+ .PlaygroundEditorTheme__listItemUnchecked:focus:before,
4110
+ .PlaygroundEditorTheme__listItemChecked:focus:before {
4111
+ box-shadow: 0 0 0 2px #a6cdfe;
4112
+ border-radius: 2px;
4113
+ }
4114
+ .PlaygroundEditorTheme__listItemUnchecked:before {
4115
+ border: 1px solid #999;
4116
+ border-radius: 2px;
4117
+ }
4118
+ .PlaygroundEditorTheme__listItemChecked:before {
4119
+ border: 1px solid rgb(61, 135, 245);
4120
+ border-radius: 2px;
4121
+ background-color: #3d87f5;
4122
+ background-repeat: no-repeat;
4123
+ }
4124
+ .PlaygroundEditorTheme__listItemChecked:after {
4125
+ content: "";
4126
+ cursor: pointer;
4127
+ border-color: #fff;
4128
+ border-style: solid;
4129
+ position: absolute;
4130
+ display: block;
4131
+ top: 6px;
4132
+ width: 3px;
4133
+ left: 7px;
4134
+ right: 7px;
4135
+ height: 6px;
4136
+ transform: rotate(45deg);
4137
+ border-width: 0 2px 2px 0;
4138
+ }
4139
+ .PlaygroundEditorTheme__nestedListItem {
4140
+ list-style-type: none;
4141
+ }
4142
+ .PlaygroundEditorTheme__nestedListItem:before,
4143
+ .PlaygroundEditorTheme__nestedListItem:after {
4144
+ display: none;
4145
+ }
4146
+ .PlaygroundEditorTheme__tokenComment {
4147
+ color: slategray;
4148
+ }
4149
+ .PlaygroundEditorTheme__tokenPunctuation {
4150
+ color: #999;
4151
+ }
4152
+ .PlaygroundEditorTheme__tokenProperty {
4153
+ color: #905;
4154
+ }
4155
+ .PlaygroundEditorTheme__tokenSelector {
4156
+ color: #690;
4157
+ }
4158
+ .PlaygroundEditorTheme__tokenOperator {
4159
+ color: #9a6e3a;
4160
+ }
4161
+ .PlaygroundEditorTheme__tokenAttr {
4162
+ color: #07a;
4163
+ }
4164
+ .PlaygroundEditorTheme__tokenVariable {
4165
+ color: #e90;
4166
+ }
4167
+ .PlaygroundEditorTheme__tokenFunction {
4168
+ color: #dd4a68;
4169
+ }
4170
+ .PlaygroundEditorTheme__mark {
4171
+ background: rgba(255, 212, 0, 0.14);
4172
+ border-bottom: 2px solid rgba(255, 212, 0, 0.3);
4173
+ padding-bottom: 2px;
4174
+ }
4175
+ .PlaygroundEditorTheme__markOverlap {
4176
+ background: rgba(255, 212, 0, 0.3);
4177
+ border-bottom: 2px solid rgba(255, 212, 0, 0.7);
4178
+ }
4179
+ .PlaygroundEditorTheme__mark.selected {
4180
+ background: rgba(255, 212, 0, 0.5);
4181
+ border-bottom: 2px solid rgba(255, 212, 0, 1);
4182
+ }
4183
+ .PlaygroundEditorTheme__markOverlap.selected {
4184
+ background: rgba(255, 212, 0, 0.7);
4185
+ border-bottom: 2px solid rgba(255, 212, 0, 0.7);
4186
+ }
4187
+ .PlaygroundEditorTheme__embedBlock {
4188
+ user-select: none;
4189
+ }
4190
+ .PlaygroundEditorTheme__embedBlockFocus {
4191
+ outline: 2px solid rgb(60, 132, 244);
4192
+ }
4193
+
4194
+ /* src/rich-text-editor/ui/ContentEditable.css */
4195
+ .ContentEditable__root {
4196
+ tab-size: 1;
4197
+ min-height: calc(100% - 16px);
4198
+ position: relative;
4199
+ display: block;
4200
+ border-width: 0px;
4201
+ padding-left: 1.5rem;
4202
+ padding-right: 1.5rem;
4203
+ padding-top: 0.5rem;
4204
+ padding-bottom: 0.5rem;
4205
+ padding-top: 0px !important;
4206
+ font-size: 0.875rem;
4207
+ line-height: 1.25rem;
4208
+ outline-width: 0px;
4209
+ }