25:["$","title",null,{"children":"Product Education Callout Boxes | Yu Wang | Observable"}] 49:T6c0,box = (color, { title = null, fontSize = FONT_SIZE, css = "", scope = DOM.uid("note").id, titleColor = "inherit", titleBackground = "rgba(0, 0, 0, 0.05)", } = {}) => { const style = document.head.appendChild(htl.html`\n\n\n \n \n \n \n \n \n \n \n

Free	Pro
\n \n Create an unlimited number of notebooks. \n Work in public; that is, your notebooks are visible to everyone. \n \n	\n \n Create an unlimited in public or private; make them public when you choose. \n Use private data such as data from database connections or secrets. \n \n

`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"details_table = box(\"hsl(0, 0%, 96%)\", {\n css: `\n :scope table {\n border: none !important;\n padding: 0px;\n margin: 0px;\n }\n\n :scope tr {\n border: none !important;\n padding-bottom: 5px;\n margin: 0px;\n }\n\n :scope th,\n :scope td {\n width: 29%;\n border-right: 1px solid #ccc;\n padding-left: 2%;\n padding-right: 2%;\n }\n\n :scope th:last-child,\n :scope td:last-child {\n border-right: none;\n }\n\n :scope ul {\n margin: 0px;\n padding-left: 5%;\n }\n\n :scope li {\n padding: 3px;\n }\n `\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"---\n## Box Helper\n\n**Notes:**\n- The selector `:scope` is replaced with the actual class selector.\n- `css` can also be a function that receives the current scope (if, for example, you want to apply the scope as a namespace).\n- Multiple columns are supported out of the box.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"FONT_SIZE = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"// Add px as unit to unitless values\nensureUnit = v => typeof v === \"number\" ? `${v}px` : v","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null