[{"data":1,"prerenderedAt":5444},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-backgrounds":682,"-docs-theme-utilities-backgrounds-surround":5439},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":684,"body":685,"description":5432,"extension":5433,"links":5434,"meta":5435,"navigation":5436,"path":579,"seo":5437,"stem":580,"__hash__":5438},"docs_theme\u002Fdocs\u002Ftheme\u002Futilities\u002F04.backgrounds.md","Backgrounds Utilities",{"type":686,"value":687,"toc":5408},"minimark",[688,706,710,714,718,721,752,758,765,1576,1586,1592,1598,1939,1945,1951,2195,2200,2262,2268,2274,2687,2690,2825,2831,2837,3256,3262,3268,3511,3514,3567,3573,3579,3931,3940,3946,3952,4236,4240,4244,4742,4745,4824,4828,5309,5313,5361,5365,5404],[689,690,691,695,696,700,701,705],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Utilities Preset:"," The utilities on this page are registered by the ",[697,698,699],"a",{"href":565},"Utilities Preset"," (",[702,703,704],"code",{},"useUtilitiesPreset","). For most projects, applying them via the preset is the recommended approach.",[707,708,78],"h2",{"id":709},"overview",[711,712,713],"p",{},"Background utilities help you control the background styling of elements including colors, images, sizing, positioning, repeat behavior, and more.",[707,715,717],{"id":716},"why-use-background-utilities","Why Use Background Utilities?",[711,719,720],{},"Background utilities help you:",[722,723,724,734,740,746],"ul",{},[725,726,727,730,731],"li",{},[692,728,729],{},"Integrate with design tokens",": Reference your color system directly using ",[702,732,733],{},"ref()",[725,735,736,739],{},[692,737,738],{},"Handle responsive images",": Control how background images scale and position",[725,741,742,745],{},[692,743,744],{},"Create consistent patterns",": Generate reusable background styles across your application",[725,747,748,751],{},[692,749,750],{},"Support theming",": Background colors can automatically adapt to theme changes",[707,753,755],{"id":754},"usebackgroundcolorutility",[702,756,757],{},"useBackgroundColorUtility",[711,759,760,761,764],{},"The ",[702,762,763],{},"useBackgroundColorUtility()"," function creates utility classes for setting background colors.",[766,767,768,1171,1446],"tabs",{},[769,770,772],"tabs-item",{"icon":771,"label":290},"i-lucide-code",[773,774,780],"pre",{"className":775,"code":776,"filename":777,"language":778,"meta":779,"style":779},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { useBackgroundColorUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\n\u002F\u002F Define colors\nconst { colorPrimary, colorSecondary } = useColorDesignTokens(s, {\n    primary: '#006cff',\n    secondary: '#6c757d',\n} as const);\n\n\u002F\u002F Create background color utilities\nuseBackgroundColorUtility(s, {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    primary: ref(colorPrimary),\n    secondary: ref(colorSecondary),\n    white: '#fff',\n    black: '#000',\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[702,781,782,818,841,863,869,890,911,916,923,953,975,992,1008,1013,1019,1030,1047,1064,1081,1096,1110,1127,1144,1153,1158],{"__ignoreMap":779},[783,784,787,791,795,799,802,805,808,812,815],"span",{"class":785,"line":786},"line",1,[783,788,790],{"class":789},"s7zQu","import",[783,792,794],{"class":793},"sMK4o"," {",[783,796,798],{"class":797},"sTEyZ"," styleframe",[783,800,801],{"class":793}," }",[783,803,804],{"class":789}," from",[783,806,807],{"class":793}," \"",[783,809,811],{"class":810},"sfazB","styleframe",[783,813,814],{"class":793},"\"",[783,816,817],{"class":793},";\n",[783,819,821,823,825,828,830,832,834,837,839],{"class":785,"line":820},2,[783,822,790],{"class":789},[783,824,794],{"class":793},[783,826,827],{"class":797}," useColorDesignTokens",[783,829,801],{"class":793},[783,831,804],{"class":789},[783,833,807],{"class":793},[783,835,836],{"class":810},"@styleframe\u002Ftheme",[783,838,814],{"class":793},[783,840,817],{"class":793},[783,842,844,846,848,851,853,855,857,859,861],{"class":785,"line":843},3,[783,845,790],{"class":789},[783,847,794],{"class":793},[783,849,850],{"class":797}," useBackgroundColorUtility",[783,852,801],{"class":793},[783,854,804],{"class":789},[783,856,807],{"class":793},[783,858,836],{"class":810},[783,860,814],{"class":793},[783,862,817],{"class":793},[783,864,866],{"class":785,"line":865},4,[783,867,868],{"emptyLinePlaceholder":223},"\n",[783,870,872,876,879,882,885,888],{"class":785,"line":871},5,[783,873,875],{"class":874},"spNyl","const",[783,877,878],{"class":797}," s ",[783,880,881],{"class":793},"=",[783,883,798],{"class":884},"s2Zo4",[783,886,887],{"class":797},"()",[783,889,817],{"class":793},[783,891,893,895,897,900,903,906,909],{"class":785,"line":892},6,[783,894,875],{"class":874},[783,896,794],{"class":793},[783,898,899],{"class":797}," ref ",[783,901,902],{"class":793},"}",[783,904,905],{"class":793}," =",[783,907,908],{"class":797}," s",[783,910,817],{"class":793},[783,912,914],{"class":785,"line":913},7,[783,915,868],{"emptyLinePlaceholder":223},[783,917,919],{"class":785,"line":918},8,[783,920,922],{"class":921},"sHwdD","\u002F\u002F Define colors\n",[783,924,926,928,930,933,936,939,941,943,945,948,950],{"class":785,"line":925},9,[783,927,875],{"class":874},[783,929,794],{"class":793},[783,931,932],{"class":797}," colorPrimary",[783,934,935],{"class":793},",",[783,937,938],{"class":797}," colorSecondary ",[783,940,902],{"class":793},[783,942,905],{"class":793},[783,944,827],{"class":884},[783,946,947],{"class":797},"(s",[783,949,935],{"class":793},[783,951,952],{"class":793}," {\n",[783,954,956,960,963,966,969,972],{"class":785,"line":955},10,[783,957,959],{"class":958},"swJcz","    primary",[783,961,962],{"class":793},":",[783,964,965],{"class":793}," '",[783,967,968],{"class":810},"#006cff",[783,970,971],{"class":793},"'",[783,973,974],{"class":793},",\n",[783,976,978,981,983,985,988,990],{"class":785,"line":977},11,[783,979,980],{"class":958},"    secondary",[783,982,962],{"class":793},[783,984,965],{"class":793},[783,986,987],{"class":810},"#6c757d",[783,989,971],{"class":793},[783,991,974],{"class":793},[783,993,995,997,1000,1003,1006],{"class":785,"line":994},12,[783,996,902],{"class":793},[783,998,999],{"class":789}," as",[783,1001,1002],{"class":874}," const",[783,1004,1005],{"class":797},")",[783,1007,817],{"class":793},[783,1009,1011],{"class":785,"line":1010},13,[783,1012,868],{"emptyLinePlaceholder":223},[783,1014,1016],{"class":785,"line":1015},14,[783,1017,1018],{"class":921},"\u002F\u002F Create background color utilities\n",[783,1020,1022,1024,1026,1028],{"class":785,"line":1021},15,[783,1023,757],{"class":884},[783,1025,947],{"class":797},[783,1027,935],{"class":793},[783,1029,952],{"class":793},[783,1031,1033,1036,1038,1040,1043,1045],{"class":785,"line":1032},16,[783,1034,1035],{"class":958},"    inherit",[783,1037,962],{"class":793},[783,1039,965],{"class":793},[783,1041,1042],{"class":810},"inherit",[783,1044,971],{"class":793},[783,1046,974],{"class":793},[783,1048,1050,1053,1055,1057,1060,1062],{"class":785,"line":1049},17,[783,1051,1052],{"class":958},"    current",[783,1054,962],{"class":793},[783,1056,965],{"class":793},[783,1058,1059],{"class":810},"currentColor",[783,1061,971],{"class":793},[783,1063,974],{"class":793},[783,1065,1067,1070,1072,1074,1077,1079],{"class":785,"line":1066},18,[783,1068,1069],{"class":958},"    transparent",[783,1071,962],{"class":793},[783,1073,965],{"class":793},[783,1075,1076],{"class":810},"transparent",[783,1078,971],{"class":793},[783,1080,974],{"class":793},[783,1082,1084,1086,1088,1091,1094],{"class":785,"line":1083},19,[783,1085,959],{"class":958},[783,1087,962],{"class":793},[783,1089,1090],{"class":884}," ref",[783,1092,1093],{"class":797},"(colorPrimary)",[783,1095,974],{"class":793},[783,1097,1099,1101,1103,1105,1108],{"class":785,"line":1098},20,[783,1100,980],{"class":958},[783,1102,962],{"class":793},[783,1104,1090],{"class":884},[783,1106,1107],{"class":797},"(colorSecondary)",[783,1109,974],{"class":793},[783,1111,1113,1116,1118,1120,1123,1125],{"class":785,"line":1112},21,[783,1114,1115],{"class":958},"    white",[783,1117,962],{"class":793},[783,1119,965],{"class":793},[783,1121,1122],{"class":810},"#fff",[783,1124,971],{"class":793},[783,1126,974],{"class":793},[783,1128,1130,1133,1135,1137,1140,1142],{"class":785,"line":1129},22,[783,1131,1132],{"class":958},"    black",[783,1134,962],{"class":793},[783,1136,965],{"class":793},[783,1138,1139],{"class":810},"#000",[783,1141,971],{"class":793},[783,1143,974],{"class":793},[783,1145,1147,1149,1151],{"class":785,"line":1146},23,[783,1148,902],{"class":793},[783,1150,1005],{"class":797},[783,1152,817],{"class":793},[783,1154,1156],{"class":785,"line":1155},24,[783,1157,868],{"emptyLinePlaceholder":223},[783,1159,1161,1164,1167,1169],{"class":785,"line":1160},25,[783,1162,1163],{"class":789},"export",[783,1165,1166],{"class":789}," default",[783,1168,908],{"class":797},[783,1170,817],{"class":793},[769,1172,1173],{"icon":154,"label":326},[773,1174,1179],{"className":1175,"code":1176,"filename":1177,"language":1178,"meta":779,"style":779},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --color--primary: oklch(0.5749 0.233917 259.9541 \u002F 1);\n    --color--secondary: oklch(0.5575 0.0165 244.89 \u002F 1);\n}\n\n._bg\\:inherit { background-color: inherit; }\n._bg\\:current { background-color: currentColor; }\n._bg\\:transparent { background-color: transparent; }\n._bg\\:primary { background-color: var(--color--primary); }\n._bg\\:secondary { background-color: var(--color--secondary); }\n._bg\\:white { background-color: #fff; }\n._bg\\:black { background-color: #000; }\n","styleframe\u002Findex.css","css",[702,1180,1181,1190,1222,1248,1253,1257,1288,1312,1335,1365,1393,1420],{"__ignoreMap":779},[783,1182,1183,1185,1188],{"class":785,"line":786},[783,1184,962],{"class":793},[783,1186,1187],{"class":874},"root",[783,1189,952],{"class":793},[783,1191,1192,1195,1197,1200,1203,1207,1210,1213,1216,1219],{"class":785,"line":820},[783,1193,1194],{"class":797},"    --color--primary",[783,1196,962],{"class":793},[783,1198,1199],{"class":884}," oklch",[783,1201,1202],{"class":793},"(",[783,1204,1206],{"class":1205},"sbssI","0.5749",[783,1208,1209],{"class":1205}," 0.233917",[783,1211,1212],{"class":1205}," 259.9541",[783,1214,1215],{"class":797}," \u002F ",[783,1217,1218],{"class":1205},"1",[783,1220,1221],{"class":793},");\n",[783,1223,1224,1227,1229,1231,1233,1236,1239,1242,1244,1246],{"class":785,"line":843},[783,1225,1226],{"class":797},"    --color--secondary",[783,1228,962],{"class":793},[783,1230,1199],{"class":884},[783,1232,1202],{"class":793},[783,1234,1235],{"class":1205},"0.5575",[783,1237,1238],{"class":1205}," 0.0165",[783,1240,1241],{"class":1205}," 244.89",[783,1243,1215],{"class":797},[783,1245,1218],{"class":1205},[783,1247,1221],{"class":793},[783,1249,1250],{"class":785,"line":865},[783,1251,1252],{"class":793},"}\n",[783,1254,1255],{"class":785,"line":871},[783,1256,868],{"emptyLinePlaceholder":223},[783,1258,1259,1262,1266,1269,1271,1273,1277,1279,1282,1285],{"class":785,"line":892},[783,1260,1261],{"class":793},".",[783,1263,1265],{"class":1264},"sBMFI","_bg",[783,1267,1268],{"class":797},"\\:",[783,1270,1042],{"class":1264},[783,1272,794],{"class":793},[783,1274,1276],{"class":1275},"sqsOY"," background-color",[783,1278,962],{"class":793},[783,1280,1281],{"class":797}," inherit",[783,1283,1284],{"class":793},";",[783,1286,1287],{"class":793}," }\n",[783,1289,1290,1292,1294,1296,1299,1301,1303,1305,1308,1310],{"class":785,"line":913},[783,1291,1261],{"class":793},[783,1293,1265],{"class":1264},[783,1295,1268],{"class":797},[783,1297,1298],{"class":1264},"current",[783,1300,794],{"class":793},[783,1302,1276],{"class":1275},[783,1304,962],{"class":793},[783,1306,1307],{"class":797}," currentColor",[783,1309,1284],{"class":793},[783,1311,1287],{"class":793},[783,1313,1314,1316,1318,1320,1322,1324,1326,1328,1331,1333],{"class":785,"line":918},[783,1315,1261],{"class":793},[783,1317,1265],{"class":1264},[783,1319,1268],{"class":797},[783,1321,1076],{"class":1264},[783,1323,794],{"class":793},[783,1325,1276],{"class":1275},[783,1327,962],{"class":793},[783,1329,1330],{"class":797}," transparent",[783,1332,1284],{"class":793},[783,1334,1287],{"class":793},[783,1336,1337,1339,1341,1343,1346,1348,1350,1352,1355,1357,1360,1363],{"class":785,"line":925},[783,1338,1261],{"class":793},[783,1340,1265],{"class":1264},[783,1342,1268],{"class":797},[783,1344,1345],{"class":1264},"primary",[783,1347,794],{"class":793},[783,1349,1276],{"class":1275},[783,1351,962],{"class":793},[783,1353,1354],{"class":884}," var",[783,1356,1202],{"class":793},[783,1358,1359],{"class":797},"--color--primary",[783,1361,1362],{"class":793},");",[783,1364,1287],{"class":793},[783,1366,1367,1369,1371,1373,1376,1378,1380,1382,1384,1386,1389,1391],{"class":785,"line":955},[783,1368,1261],{"class":793},[783,1370,1265],{"class":1264},[783,1372,1268],{"class":797},[783,1374,1375],{"class":1264},"secondary",[783,1377,794],{"class":793},[783,1379,1276],{"class":1275},[783,1381,962],{"class":793},[783,1383,1354],{"class":884},[783,1385,1202],{"class":793},[783,1387,1388],{"class":797},"--color--secondary",[783,1390,1362],{"class":793},[783,1392,1287],{"class":793},[783,1394,1395,1397,1399,1401,1404,1406,1408,1410,1413,1416,1418],{"class":785,"line":977},[783,1396,1261],{"class":793},[783,1398,1265],{"class":1264},[783,1400,1268],{"class":797},[783,1402,1403],{"class":1264},"white",[783,1405,794],{"class":793},[783,1407,1276],{"class":1275},[783,1409,962],{"class":793},[783,1411,1412],{"class":793}," #",[783,1414,1415],{"class":797},"fff",[783,1417,1284],{"class":793},[783,1419,1287],{"class":793},[783,1421,1422,1424,1426,1428,1431,1433,1435,1437,1439,1442,1444],{"class":785,"line":994},[783,1423,1261],{"class":793},[783,1425,1265],{"class":1264},[783,1427,1268],{"class":797},[783,1429,1430],{"class":1264},"black",[783,1432,794],{"class":793},[783,1434,1276],{"class":1275},[783,1436,962],{"class":793},[783,1438,1412],{"class":793},[783,1440,1441],{"class":797},"000",[783,1443,1284],{"class":793},[783,1445,1287],{"class":793},[769,1447,1449],{"icon":520,"label":1448},"Usage",[773,1450,1454],{"className":1451,"code":1452,"language":1453,"meta":779,"style":779},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"_bg:primary\">Primary background\u003C\u002Fdiv>\n\u003Cdiv class=\"_bg:secondary\">Secondary background\u003C\u002Fdiv>\n\u003Cheader class=\"_bg:white\">White header\u003C\u002Fheader>\n\u003Cfooter class=\"_bg:black\">Black footer\u003C\u002Ffooter>\n","html",[702,1455,1456,1490,1518,1547],{"__ignoreMap":779},[783,1457,1458,1461,1464,1467,1469,1471,1474,1476,1479,1482,1485,1487],{"class":785,"line":786},[783,1459,1460],{"class":793},"\u003C",[783,1462,1463],{"class":958},"div",[783,1465,1466],{"class":874}," class",[783,1468,881],{"class":793},[783,1470,814],{"class":793},[783,1472,1473],{"class":810},"_bg:primary",[783,1475,814],{"class":793},[783,1477,1478],{"class":793},">",[783,1480,1481],{"class":797},"Primary background",[783,1483,1484],{"class":793},"\u003C\u002F",[783,1486,1463],{"class":958},[783,1488,1489],{"class":793},">\n",[783,1491,1492,1494,1496,1498,1500,1502,1505,1507,1509,1512,1514,1516],{"class":785,"line":820},[783,1493,1460],{"class":793},[783,1495,1463],{"class":958},[783,1497,1466],{"class":874},[783,1499,881],{"class":793},[783,1501,814],{"class":793},[783,1503,1504],{"class":810},"_bg:secondary",[783,1506,814],{"class":793},[783,1508,1478],{"class":793},[783,1510,1511],{"class":797},"Secondary background",[783,1513,1484],{"class":793},[783,1515,1463],{"class":958},[783,1517,1489],{"class":793},[783,1519,1520,1522,1525,1527,1529,1531,1534,1536,1538,1541,1543,1545],{"class":785,"line":843},[783,1521,1460],{"class":793},[783,1523,1524],{"class":958},"header",[783,1526,1466],{"class":874},[783,1528,881],{"class":793},[783,1530,814],{"class":793},[783,1532,1533],{"class":810},"_bg:white",[783,1535,814],{"class":793},[783,1537,1478],{"class":793},[783,1539,1540],{"class":797},"White header",[783,1542,1484],{"class":793},[783,1544,1524],{"class":958},[783,1546,1489],{"class":793},[783,1548,1549,1551,1554,1556,1558,1560,1563,1565,1567,1570,1572,1574],{"class":785,"line":865},[783,1550,1460],{"class":793},[783,1552,1553],{"class":958},"footer",[783,1555,1466],{"class":874},[783,1557,881],{"class":793},[783,1559,814],{"class":793},[783,1561,1562],{"class":810},"_bg:black",[783,1564,814],{"class":793},[783,1566,1478],{"class":793},[783,1568,1569],{"class":797},"Black footer",[783,1571,1484],{"class":793},[783,1573,1553],{"class":958},[783,1575,1489],{"class":793},[1577,1578,1579,1582,1583,1585],"tip",{},[692,1580,1581],{},"Pro tip",": Use ",[702,1584,733],{}," to reference your color design tokens so background colors automatically update with theme changes.",[707,1587,1589],{"id":1588},"usebackgroundimageutility",[702,1590,1591],{},"useBackgroundImageUtility",[711,1593,760,1594,1597],{},[702,1595,1596],{},"useBackgroundImageUtility()"," function creates utility classes for setting background images.",[766,1599,1600,1759,1875],{},[769,1601,1602],{"icon":771,"label":290},[773,1603,1605],{"className":775,"code":1604,"filename":777,"language":778,"meta":779,"style":779},"import { styleframe } from \"styleframe\";\nimport { useBackgroundImageUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseBackgroundImageUtility(s, {\n    none: 'none',\n    'gradient-primary': 'linear-gradient(to right, #006cff, #00b4d8)',\n    'gradient-dark': 'linear-gradient(to bottom, #1a1a1a, #2d2d2d)',\n});\n\nexport default s;\n",[702,1606,1607,1627,1648,1652,1666,1670,1680,1696,1717,1737,1745,1749],{"__ignoreMap":779},[783,1608,1609,1611,1613,1615,1617,1619,1621,1623,1625],{"class":785,"line":786},[783,1610,790],{"class":789},[783,1612,794],{"class":793},[783,1614,798],{"class":797},[783,1616,801],{"class":793},[783,1618,804],{"class":789},[783,1620,807],{"class":793},[783,1622,811],{"class":810},[783,1624,814],{"class":793},[783,1626,817],{"class":793},[783,1628,1629,1631,1633,1636,1638,1640,1642,1644,1646],{"class":785,"line":820},[783,1630,790],{"class":789},[783,1632,794],{"class":793},[783,1634,1635],{"class":797}," useBackgroundImageUtility",[783,1637,801],{"class":793},[783,1639,804],{"class":789},[783,1641,807],{"class":793},[783,1643,836],{"class":810},[783,1645,814],{"class":793},[783,1647,817],{"class":793},[783,1649,1650],{"class":785,"line":843},[783,1651,868],{"emptyLinePlaceholder":223},[783,1653,1654,1656,1658,1660,1662,1664],{"class":785,"line":865},[783,1655,875],{"class":874},[783,1657,878],{"class":797},[783,1659,881],{"class":793},[783,1661,798],{"class":884},[783,1663,887],{"class":797},[783,1665,817],{"class":793},[783,1667,1668],{"class":785,"line":871},[783,1669,868],{"emptyLinePlaceholder":223},[783,1671,1672,1674,1676,1678],{"class":785,"line":892},[783,1673,1591],{"class":884},[783,1675,947],{"class":797},[783,1677,935],{"class":793},[783,1679,952],{"class":793},[783,1681,1682,1685,1687,1689,1692,1694],{"class":785,"line":913},[783,1683,1684],{"class":958},"    none",[783,1686,962],{"class":793},[783,1688,965],{"class":793},[783,1690,1691],{"class":810},"none",[783,1693,971],{"class":793},[783,1695,974],{"class":793},[783,1697,1698,1701,1704,1706,1708,1710,1713,1715],{"class":785,"line":918},[783,1699,1700],{"class":793},"    '",[783,1702,1703],{"class":958},"gradient-primary",[783,1705,971],{"class":793},[783,1707,962],{"class":793},[783,1709,965],{"class":793},[783,1711,1712],{"class":810},"linear-gradient(to right, #006cff, #00b4d8)",[783,1714,971],{"class":793},[783,1716,974],{"class":793},[783,1718,1719,1721,1724,1726,1728,1730,1733,1735],{"class":785,"line":925},[783,1720,1700],{"class":793},[783,1722,1723],{"class":958},"gradient-dark",[783,1725,971],{"class":793},[783,1727,962],{"class":793},[783,1729,965],{"class":793},[783,1731,1732],{"class":810},"linear-gradient(to bottom, #1a1a1a, #2d2d2d)",[783,1734,971],{"class":793},[783,1736,974],{"class":793},[783,1738,1739,1741,1743],{"class":785,"line":955},[783,1740,902],{"class":793},[783,1742,1005],{"class":797},[783,1744,817],{"class":793},[783,1746,1747],{"class":785,"line":977},[783,1748,868],{"emptyLinePlaceholder":223},[783,1750,1751,1753,1755,1757],{"class":785,"line":994},[783,1752,1163],{"class":789},[783,1754,1166],{"class":789},[783,1756,908],{"class":797},[783,1758,817],{"class":793},[769,1760,1761],{"icon":154,"label":326},[773,1762,1764],{"className":1175,"code":1763,"filename":1177,"language":1178,"meta":779,"style":779},"._background-image\\:none { background-image: none; }\n._background-image\\:gradient-primary { background-image: linear-gradient(to right, #006cff, #00b4d8); }\n._background-image\\:gradient-dark { background-image: linear-gradient(to bottom, #1a1a1a, #2d2d2d); }\n",[702,1765,1766,1791,1834],{"__ignoreMap":779},[783,1767,1768,1770,1773,1775,1777,1779,1782,1784,1787,1789],{"class":785,"line":786},[783,1769,1261],{"class":793},[783,1771,1772],{"class":1264},"_background-image",[783,1774,1268],{"class":797},[783,1776,1691],{"class":1264},[783,1778,794],{"class":793},[783,1780,1781],{"class":1275}," background-image",[783,1783,962],{"class":793},[783,1785,1786],{"class":797}," none",[783,1788,1284],{"class":793},[783,1790,1287],{"class":793},[783,1792,1793,1795,1797,1799,1801,1803,1805,1807,1810,1813,1816,1818,1820,1823,1825,1827,1830,1832],{"class":785,"line":820},[783,1794,1261],{"class":793},[783,1796,1772],{"class":1264},[783,1798,1268],{"class":797},[783,1800,1703],{"class":1264},[783,1802,794],{"class":793},[783,1804,1781],{"class":1275},[783,1806,962],{"class":793},[783,1808,1809],{"class":884}," linear-gradient",[783,1811,1812],{"class":793},"(to",[783,1814,1815],{"class":797}," right",[783,1817,935],{"class":793},[783,1819,1412],{"class":793},[783,1821,1822],{"class":797},"006cff",[783,1824,935],{"class":793},[783,1826,1412],{"class":793},[783,1828,1829],{"class":797},"00b4d8",[783,1831,1362],{"class":793},[783,1833,1287],{"class":793},[783,1835,1836,1838,1840,1842,1844,1846,1848,1850,1852,1854,1857,1859,1861,1864,1866,1868,1871,1873],{"class":785,"line":843},[783,1837,1261],{"class":793},[783,1839,1772],{"class":1264},[783,1841,1268],{"class":797},[783,1843,1723],{"class":1264},[783,1845,794],{"class":793},[783,1847,1781],{"class":1275},[783,1849,962],{"class":793},[783,1851,1809],{"class":884},[783,1853,1812],{"class":793},[783,1855,1856],{"class":797}," bottom",[783,1858,935],{"class":793},[783,1860,1412],{"class":793},[783,1862,1863],{"class":797},"1a1a1a",[783,1865,935],{"class":793},[783,1867,1412],{"class":793},[783,1869,1870],{"class":797},"2d2d2d",[783,1872,1362],{"class":793},[783,1874,1287],{"class":793},[769,1876,1877],{"icon":520,"label":1448},[773,1878,1880],{"className":1451,"code":1879,"language":1453,"meta":779,"style":779},"\u003Cdiv class=\"_background-image:gradient-primary\">Gradient background\u003C\u002Fdiv>\n\u003Csection class=\"_background-image:gradient-dark\">Dark gradient section\u003C\u002Fsection>\n",[702,1881,1882,1910],{"__ignoreMap":779},[783,1883,1884,1886,1888,1890,1892,1894,1897,1899,1901,1904,1906,1908],{"class":785,"line":786},[783,1885,1460],{"class":793},[783,1887,1463],{"class":958},[783,1889,1466],{"class":874},[783,1891,881],{"class":793},[783,1893,814],{"class":793},[783,1895,1896],{"class":810},"_background-image:gradient-primary",[783,1898,814],{"class":793},[783,1900,1478],{"class":793},[783,1902,1903],{"class":797},"Gradient background",[783,1905,1484],{"class":793},[783,1907,1463],{"class":958},[783,1909,1489],{"class":793},[783,1911,1912,1914,1917,1919,1921,1923,1926,1928,1930,1933,1935,1937],{"class":785,"line":820},[783,1913,1460],{"class":793},[783,1915,1916],{"class":958},"section",[783,1918,1466],{"class":874},[783,1920,881],{"class":793},[783,1922,814],{"class":793},[783,1924,1925],{"class":810},"_background-image:gradient-dark",[783,1927,814],{"class":793},[783,1929,1478],{"class":793},[783,1931,1932],{"class":797},"Dark gradient section",[783,1934,1484],{"class":793},[783,1936,1916],{"class":958},[783,1938,1489],{"class":793},[707,1940,1942],{"id":1941},"usebackgroundsizeutility",[702,1943,1944],{},"useBackgroundSizeUtility",[711,1946,760,1947,1950],{},[702,1948,1949],{},"useBackgroundSizeUtility()"," function creates utility classes for controlling background image sizing.",[766,1952,1953,2051,2132],{},[769,1954,1955],{"icon":771,"label":290},[773,1956,1958],{"className":775,"code":1957,"filename":777,"language":778,"meta":779,"style":779},"import { styleframe } from \"styleframe\";\nimport { useBackgroundSizeUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\n\u002F\u002F Uses built-in defaults: auto, cover, contain\nuseBackgroundSizeUtility(s);\n\nexport default s;\n",[702,1959,1960,1980,2001,2005,2019,2023,2028,2037,2041],{"__ignoreMap":779},[783,1961,1962,1964,1966,1968,1970,1972,1974,1976,1978],{"class":785,"line":786},[783,1963,790],{"class":789},[783,1965,794],{"class":793},[783,1967,798],{"class":797},[783,1969,801],{"class":793},[783,1971,804],{"class":789},[783,1973,807],{"class":793},[783,1975,811],{"class":810},[783,1977,814],{"class":793},[783,1979,817],{"class":793},[783,1981,1982,1984,1986,1989,1991,1993,1995,1997,1999],{"class":785,"line":820},[783,1983,790],{"class":789},[783,1985,794],{"class":793},[783,1987,1988],{"class":797}," useBackgroundSizeUtility",[783,1990,801],{"class":793},[783,1992,804],{"class":789},[783,1994,807],{"class":793},[783,1996,836],{"class":810},[783,1998,814],{"class":793},[783,2000,817],{"class":793},[783,2002,2003],{"class":785,"line":843},[783,2004,868],{"emptyLinePlaceholder":223},[783,2006,2007,2009,2011,2013,2015,2017],{"class":785,"line":865},[783,2008,875],{"class":874},[783,2010,878],{"class":797},[783,2012,881],{"class":793},[783,2014,798],{"class":884},[783,2016,887],{"class":797},[783,2018,817],{"class":793},[783,2020,2021],{"class":785,"line":871},[783,2022,868],{"emptyLinePlaceholder":223},[783,2024,2025],{"class":785,"line":892},[783,2026,2027],{"class":921},"\u002F\u002F Uses built-in defaults: auto, cover, contain\n",[783,2029,2030,2032,2035],{"class":785,"line":913},[783,2031,1944],{"class":884},[783,2033,2034],{"class":797},"(s)",[783,2036,817],{"class":793},[783,2038,2039],{"class":785,"line":918},[783,2040,868],{"emptyLinePlaceholder":223},[783,2042,2043,2045,2047,2049],{"class":785,"line":925},[783,2044,1163],{"class":789},[783,2046,1166],{"class":789},[783,2048,908],{"class":797},[783,2050,817],{"class":793},[769,2052,2053],{"icon":154,"label":326},[773,2054,2056],{"className":1175,"code":2055,"filename":1177,"language":1178,"meta":779,"style":779},"._background-size\\:auto { background-size: auto; }\n._background-size\\:cover { background-size: cover; }\n._background-size\\:contain { background-size: contain; }\n",[702,2057,2058,2084,2108],{"__ignoreMap":779},[783,2059,2060,2062,2065,2067,2070,2072,2075,2077,2080,2082],{"class":785,"line":786},[783,2061,1261],{"class":793},[783,2063,2064],{"class":1264},"_background-size",[783,2066,1268],{"class":797},[783,2068,2069],{"class":1264},"auto",[783,2071,794],{"class":793},[783,2073,2074],{"class":1275}," background-size",[783,2076,962],{"class":793},[783,2078,2079],{"class":797}," auto",[783,2081,1284],{"class":793},[783,2083,1287],{"class":793},[783,2085,2086,2088,2090,2092,2095,2097,2099,2101,2104,2106],{"class":785,"line":820},[783,2087,1261],{"class":793},[783,2089,2064],{"class":1264},[783,2091,1268],{"class":797},[783,2093,2094],{"class":1264},"cover",[783,2096,794],{"class":793},[783,2098,2074],{"class":1275},[783,2100,962],{"class":793},[783,2102,2103],{"class":797}," cover",[783,2105,1284],{"class":793},[783,2107,1287],{"class":793},[783,2109,2110,2112,2114,2116,2119,2121,2123,2125,2128,2130],{"class":785,"line":843},[783,2111,1261],{"class":793},[783,2113,2064],{"class":1264},[783,2115,1268],{"class":797},[783,2117,2118],{"class":1264},"contain",[783,2120,794],{"class":793},[783,2122,2074],{"class":1275},[783,2124,962],{"class":793},[783,2126,2127],{"class":797}," contain",[783,2129,1284],{"class":793},[783,2131,1287],{"class":793},[769,2133,2134],{"icon":520,"label":1448},[773,2135,2137],{"className":1451,"code":2136,"language":1453,"meta":779,"style":779},"\u003Cdiv class=\"_background-size:cover\">Full coverage background\u003C\u002Fdiv>\n\u003Cdiv class=\"_background-size:contain\">Contained background\u003C\u002Fdiv>\n",[702,2138,2139,2167],{"__ignoreMap":779},[783,2140,2141,2143,2145,2147,2149,2151,2154,2156,2158,2161,2163,2165],{"class":785,"line":786},[783,2142,1460],{"class":793},[783,2144,1463],{"class":958},[783,2146,1466],{"class":874},[783,2148,881],{"class":793},[783,2150,814],{"class":793},[783,2152,2153],{"class":810},"_background-size:cover",[783,2155,814],{"class":793},[783,2157,1478],{"class":793},[783,2159,2160],{"class":797},"Full coverage background",[783,2162,1484],{"class":793},[783,2164,1463],{"class":958},[783,2166,1489],{"class":793},[783,2168,2169,2171,2173,2175,2177,2179,2182,2184,2186,2189,2191,2193],{"class":785,"line":820},[783,2170,1460],{"class":793},[783,2172,1463],{"class":958},[783,2174,1466],{"class":874},[783,2176,881],{"class":793},[783,2178,814],{"class":793},[783,2180,2181],{"class":810},"_background-size:contain",[783,2183,814],{"class":793},[783,2185,1478],{"class":793},[783,2187,2188],{"class":797},"Contained background",[783,2190,1484],{"class":793},[783,2192,1463],{"class":958},[783,2194,1489],{"class":793},[2196,2197,2199],"h3",{"id":2198},"default-values","Default Values",[2201,2202,2203,2219],"table",{},[2204,2205,2206],"thead",{},[2207,2208,2209,2213,2216],"tr",{},[2210,2211,2212],"th",{},"Key",[2210,2214,2215],{},"Value",[2210,2217,2218],{},"Description",[2220,2221,2222,2236,2249],"tbody",{},[2207,2223,2224,2229,2233],{},[2225,2226,2227],"td",{},[702,2228,2069],{},[2225,2230,2231],{},[702,2232,2069],{},[2225,2234,2235],{},"Default size, image displays at original dimensions",[2207,2237,2238,2242,2246],{},[2225,2239,2240],{},[702,2241,2094],{},[2225,2243,2244],{},[702,2245,2094],{},[2225,2247,2248],{},"Scale to cover entire element, may crop",[2207,2250,2251,2255,2259],{},[2225,2252,2253],{},[702,2254,2118],{},[2225,2256,2257],{},[702,2258,2118],{},[2225,2260,2261],{},"Scale to fit within element, may leave gaps",[707,2263,2265],{"id":2264},"usebackgroundpositionutility",[702,2266,2267],{},"useBackgroundPositionUtility",[711,2269,760,2270,2273],{},[702,2271,2272],{},"useBackgroundPositionUtility()"," function creates utility classes for positioning background images.",[766,2275,2276,2373,2596],{},[769,2277,2278],{"icon":771,"label":290},[773,2279,2281],{"className":775,"code":2280,"filename":777,"language":778,"meta":779,"style":779},"import { styleframe } from \"styleframe\";\nimport { useBackgroundPositionUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\n\u002F\u002F Uses built-in defaults for all position combinations\nuseBackgroundPositionUtility(s);\n\nexport default s;\n",[702,2282,2283,2303,2324,2328,2342,2346,2351,2359,2363],{"__ignoreMap":779},[783,2284,2285,2287,2289,2291,2293,2295,2297,2299,2301],{"class":785,"line":786},[783,2286,790],{"class":789},[783,2288,794],{"class":793},[783,2290,798],{"class":797},[783,2292,801],{"class":793},[783,2294,804],{"class":789},[783,2296,807],{"class":793},[783,2298,811],{"class":810},[783,2300,814],{"class":793},[783,2302,817],{"class":793},[783,2304,2305,2307,2309,2312,2314,2316,2318,2320,2322],{"class":785,"line":820},[783,2306,790],{"class":789},[783,2308,794],{"class":793},[783,2310,2311],{"class":797}," useBackgroundPositionUtility",[783,2313,801],{"class":793},[783,2315,804],{"class":789},[783,2317,807],{"class":793},[783,2319,836],{"class":810},[783,2321,814],{"class":793},[783,2323,817],{"class":793},[783,2325,2326],{"class":785,"line":843},[783,2327,868],{"emptyLinePlaceholder":223},[783,2329,2330,2332,2334,2336,2338,2340],{"class":785,"line":865},[783,2331,875],{"class":874},[783,2333,878],{"class":797},[783,2335,881],{"class":793},[783,2337,798],{"class":884},[783,2339,887],{"class":797},[783,2341,817],{"class":793},[783,2343,2344],{"class":785,"line":871},[783,2345,868],{"emptyLinePlaceholder":223},[783,2347,2348],{"class":785,"line":892},[783,2349,2350],{"class":921},"\u002F\u002F Uses built-in defaults for all position combinations\n",[783,2352,2353,2355,2357],{"class":785,"line":913},[783,2354,2267],{"class":884},[783,2356,2034],{"class":797},[783,2358,817],{"class":793},[783,2360,2361],{"class":785,"line":918},[783,2362,868],{"emptyLinePlaceholder":223},[783,2364,2365,2367,2369,2371],{"class":785,"line":925},[783,2366,1163],{"class":789},[783,2368,1166],{"class":789},[783,2370,908],{"class":797},[783,2372,817],{"class":793},[769,2374,2375],{"icon":154,"label":326},[773,2376,2378],{"className":1175,"code":2377,"filename":1177,"language":1178,"meta":779,"style":779},"._background-position\\:bottom { background-position: bottom; }\n._background-position\\:center { background-position: center; }\n._background-position\\:left { background-position: left; }\n._background-position\\:left-bottom { background-position: left bottom; }\n._background-position\\:left-top { background-position: left top; }\n._background-position\\:right { background-position: right; }\n._background-position\\:right-bottom { background-position: right bottom; }\n._background-position\\:right-top { background-position: right top; }\n._background-position\\:top { background-position: top; }\n",[702,2379,2380,2405,2429,2453,2477,2501,2524,2548,2572],{"__ignoreMap":779},[783,2381,2382,2384,2387,2389,2392,2394,2397,2399,2401,2403],{"class":785,"line":786},[783,2383,1261],{"class":793},[783,2385,2386],{"class":1264},"_background-position",[783,2388,1268],{"class":797},[783,2390,2391],{"class":1264},"bottom",[783,2393,794],{"class":793},[783,2395,2396],{"class":1275}," background-position",[783,2398,962],{"class":793},[783,2400,1856],{"class":797},[783,2402,1284],{"class":793},[783,2404,1287],{"class":793},[783,2406,2407,2409,2411,2413,2416,2418,2420,2422,2425,2427],{"class":785,"line":820},[783,2408,1261],{"class":793},[783,2410,2386],{"class":1264},[783,2412,1268],{"class":797},[783,2414,2415],{"class":1264},"center",[783,2417,794],{"class":793},[783,2419,2396],{"class":1275},[783,2421,962],{"class":793},[783,2423,2424],{"class":797}," center",[783,2426,1284],{"class":793},[783,2428,1287],{"class":793},[783,2430,2431,2433,2435,2437,2440,2442,2444,2446,2449,2451],{"class":785,"line":843},[783,2432,1261],{"class":793},[783,2434,2386],{"class":1264},[783,2436,1268],{"class":797},[783,2438,2439],{"class":1264},"left",[783,2441,794],{"class":793},[783,2443,2396],{"class":1275},[783,2445,962],{"class":793},[783,2447,2448],{"class":797}," left",[783,2450,1284],{"class":793},[783,2452,1287],{"class":793},[783,2454,2455,2457,2459,2461,2464,2466,2468,2470,2473,2475],{"class":785,"line":865},[783,2456,1261],{"class":793},[783,2458,2386],{"class":1264},[783,2460,1268],{"class":797},[783,2462,2463],{"class":1264},"left-bottom",[783,2465,794],{"class":793},[783,2467,2396],{"class":1275},[783,2469,962],{"class":793},[783,2471,2472],{"class":797}," left bottom",[783,2474,1284],{"class":793},[783,2476,1287],{"class":793},[783,2478,2479,2481,2483,2485,2488,2490,2492,2494,2497,2499],{"class":785,"line":871},[783,2480,1261],{"class":793},[783,2482,2386],{"class":1264},[783,2484,1268],{"class":797},[783,2486,2487],{"class":1264},"left-top",[783,2489,794],{"class":793},[783,2491,2396],{"class":1275},[783,2493,962],{"class":793},[783,2495,2496],{"class":797}," left top",[783,2498,1284],{"class":793},[783,2500,1287],{"class":793},[783,2502,2503,2505,2507,2509,2512,2514,2516,2518,2520,2522],{"class":785,"line":892},[783,2504,1261],{"class":793},[783,2506,2386],{"class":1264},[783,2508,1268],{"class":797},[783,2510,2511],{"class":1264},"right",[783,2513,794],{"class":793},[783,2515,2396],{"class":1275},[783,2517,962],{"class":793},[783,2519,1815],{"class":797},[783,2521,1284],{"class":793},[783,2523,1287],{"class":793},[783,2525,2526,2528,2530,2532,2535,2537,2539,2541,2544,2546],{"class":785,"line":913},[783,2527,1261],{"class":793},[783,2529,2386],{"class":1264},[783,2531,1268],{"class":797},[783,2533,2534],{"class":1264},"right-bottom",[783,2536,794],{"class":793},[783,2538,2396],{"class":1275},[783,2540,962],{"class":793},[783,2542,2543],{"class":797}," right bottom",[783,2545,1284],{"class":793},[783,2547,1287],{"class":793},[783,2549,2550,2552,2554,2556,2559,2561,2563,2565,2568,2570],{"class":785,"line":918},[783,2551,1261],{"class":793},[783,2553,2386],{"class":1264},[783,2555,1268],{"class":797},[783,2557,2558],{"class":1264},"right-top",[783,2560,794],{"class":793},[783,2562,2396],{"class":1275},[783,2564,962],{"class":793},[783,2566,2567],{"class":797}," right top",[783,2569,1284],{"class":793},[783,2571,1287],{"class":793},[783,2573,2574,2576,2578,2580,2583,2585,2587,2589,2592,2594],{"class":785,"line":925},[783,2575,1261],{"class":793},[783,2577,2386],{"class":1264},[783,2579,1268],{"class":797},[783,2581,2582],{"class":1264},"top",[783,2584,794],{"class":793},[783,2586,2396],{"class":1275},[783,2588,962],{"class":793},[783,2590,2591],{"class":797}," top",[783,2593,1284],{"class":793},[783,2595,1287],{"class":793},[769,2597,2598],{"icon":520,"label":1448},[773,2599,2601],{"className":1451,"code":2600,"language":1453,"meta":779,"style":779},"\u003Cdiv class=\"_background-position:center\">Centered background\u003C\u002Fdiv>\n\u003Cdiv class=\"_background-position:top\">Top-aligned background\u003C\u002Fdiv>\n\u003Cdiv class=\"_background-position:right-bottom\">Bottom-right background\u003C\u002Fdiv>\n",[702,2602,2603,2631,2659],{"__ignoreMap":779},[783,2604,2605,2607,2609,2611,2613,2615,2618,2620,2622,2625,2627,2629],{"class":785,"line":786},[783,2606,1460],{"class":793},[783,2608,1463],{"class":958},[783,2610,1466],{"class":874},[783,2612,881],{"class":793},[783,2614,814],{"class":793},[783,2616,2617],{"class":810},"_background-position:center",[783,2619,814],{"class":793},[783,2621,1478],{"class":793},[783,2623,2624],{"class":797},"Centered background",[783,2626,1484],{"class":793},[783,2628,1463],{"class":958},[783,2630,1489],{"class":793},[783,2632,2633,2635,2637,2639,2641,2643,2646,2648,2650,2653,2655,2657],{"class":785,"line":820},[783,2634,1460],{"class":793},[783,2636,1463],{"class":958},[783,2638,1466],{"class":874},[783,2640,881],{"class":793},[783,2642,814],{"class":793},[783,2644,2645],{"class":810},"_background-position:top",[783,2647,814],{"class":793},[783,2649,1478],{"class":793},[783,2651,2652],{"class":797},"Top-aligned background",[783,2654,1484],{"class":793},[783,2656,1463],{"class":958},[783,2658,1489],{"class":793},[783,2660,2661,2663,2665,2667,2669,2671,2674,2676,2678,2681,2683,2685],{"class":785,"line":843},[783,2662,1460],{"class":793},[783,2664,1463],{"class":958},[783,2666,1466],{"class":874},[783,2668,881],{"class":793},[783,2670,814],{"class":793},[783,2672,2673],{"class":810},"_background-position:right-bottom",[783,2675,814],{"class":793},[783,2677,1478],{"class":793},[783,2679,2680],{"class":797},"Bottom-right background",[783,2682,1484],{"class":793},[783,2684,1463],{"class":958},[783,2686,1489],{"class":793},[2196,2688,2199],{"id":2689},"default-values-1",[2201,2691,2692,2702],{},[2204,2693,2694],{},[2207,2695,2696,2698,2700],{},[2210,2697,2212],{},[2210,2699,2215],{},[2210,2701,2218],{},[2220,2703,2704,2717,2730,2743,2757,2771,2784,2798,2812],{},[2207,2705,2706,2710,2714],{},[2225,2707,2708],{},[702,2709,2391],{},[2225,2711,2712],{},[702,2713,2391],{},[2225,2715,2716],{},"Align to bottom center",[2207,2718,2719,2723,2727],{},[2225,2720,2721],{},[702,2722,2415],{},[2225,2724,2725],{},[702,2726,2415],{},[2225,2728,2729],{},"Center horizontally and vertically",[2207,2731,2732,2736,2740],{},[2225,2733,2734],{},[702,2735,2439],{},[2225,2737,2738],{},[702,2739,2439],{},[2225,2741,2742],{},"Align to left center",[2207,2744,2745,2749,2754],{},[2225,2746,2747],{},[702,2748,2463],{},[2225,2750,2751],{},[702,2752,2753],{},"left bottom",[2225,2755,2756],{},"Align to bottom left corner",[2207,2758,2759,2763,2768],{},[2225,2760,2761],{},[702,2762,2487],{},[2225,2764,2765],{},[702,2766,2767],{},"left top",[2225,2769,2770],{},"Align to top left corner",[2207,2772,2773,2777,2781],{},[2225,2774,2775],{},[702,2776,2511],{},[2225,2778,2779],{},[702,2780,2511],{},[2225,2782,2783],{},"Align to right center",[2207,2785,2786,2790,2795],{},[2225,2787,2788],{},[702,2789,2534],{},[2225,2791,2792],{},[702,2793,2794],{},"right bottom",[2225,2796,2797],{},"Align to bottom right corner",[2207,2799,2800,2804,2809],{},[2225,2801,2802],{},[702,2803,2558],{},[2225,2805,2806],{},[702,2807,2808],{},"right top",[2225,2810,2811],{},"Align to top right corner",[2207,2813,2814,2818,2822],{},[2225,2815,2816],{},[702,2817,2582],{},[2225,2819,2820],{},[702,2821,2582],{},[2225,2823,2824],{},"Align to top center",[707,2826,2828],{"id":2827},"usebackgroundrepeatutility",[702,2829,2830],{},"useBackgroundRepeatUtility",[711,2832,760,2833,2836],{},[702,2834,2835],{},"useBackgroundRepeatUtility()"," function creates utility classes for controlling how background images repeat.",[766,2838,2839,3046,3193],{},[769,2840,2841],{"icon":771,"label":290},[773,2842,2844],{"className":775,"code":2843,"filename":777,"language":778,"meta":779,"style":779},"import { styleframe } from \"styleframe\";\nimport { useBackgroundRepeatUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseBackgroundRepeatUtility(s, {\n    repeat: 'repeat',\n    'no-repeat': 'no-repeat',\n    'repeat-x': 'repeat-x',\n    'repeat-y': 'repeat-y',\n    round: 'round',\n    space: 'space',\n});\n\nexport default s;\n",[702,2845,2846,2866,2887,2891,2905,2909,2919,2935,2954,2973,2992,3008,3024,3032,3036],{"__ignoreMap":779},[783,2847,2848,2850,2852,2854,2856,2858,2860,2862,2864],{"class":785,"line":786},[783,2849,790],{"class":789},[783,2851,794],{"class":793},[783,2853,798],{"class":797},[783,2855,801],{"class":793},[783,2857,804],{"class":789},[783,2859,807],{"class":793},[783,2861,811],{"class":810},[783,2863,814],{"class":793},[783,2865,817],{"class":793},[783,2867,2868,2870,2872,2875,2877,2879,2881,2883,2885],{"class":785,"line":820},[783,2869,790],{"class":789},[783,2871,794],{"class":793},[783,2873,2874],{"class":797}," useBackgroundRepeatUtility",[783,2876,801],{"class":793},[783,2878,804],{"class":789},[783,2880,807],{"class":793},[783,2882,836],{"class":810},[783,2884,814],{"class":793},[783,2886,817],{"class":793},[783,2888,2889],{"class":785,"line":843},[783,2890,868],{"emptyLinePlaceholder":223},[783,2892,2893,2895,2897,2899,2901,2903],{"class":785,"line":865},[783,2894,875],{"class":874},[783,2896,878],{"class":797},[783,2898,881],{"class":793},[783,2900,798],{"class":884},[783,2902,887],{"class":797},[783,2904,817],{"class":793},[783,2906,2907],{"class":785,"line":871},[783,2908,868],{"emptyLinePlaceholder":223},[783,2910,2911,2913,2915,2917],{"class":785,"line":892},[783,2912,2830],{"class":884},[783,2914,947],{"class":797},[783,2916,935],{"class":793},[783,2918,952],{"class":793},[783,2920,2921,2924,2926,2928,2931,2933],{"class":785,"line":913},[783,2922,2923],{"class":958},"    repeat",[783,2925,962],{"class":793},[783,2927,965],{"class":793},[783,2929,2930],{"class":810},"repeat",[783,2932,971],{"class":793},[783,2934,974],{"class":793},[783,2936,2937,2939,2942,2944,2946,2948,2950,2952],{"class":785,"line":918},[783,2938,1700],{"class":793},[783,2940,2941],{"class":958},"no-repeat",[783,2943,971],{"class":793},[783,2945,962],{"class":793},[783,2947,965],{"class":793},[783,2949,2941],{"class":810},[783,2951,971],{"class":793},[783,2953,974],{"class":793},[783,2955,2956,2958,2961,2963,2965,2967,2969,2971],{"class":785,"line":925},[783,2957,1700],{"class":793},[783,2959,2960],{"class":958},"repeat-x",[783,2962,971],{"class":793},[783,2964,962],{"class":793},[783,2966,965],{"class":793},[783,2968,2960],{"class":810},[783,2970,971],{"class":793},[783,2972,974],{"class":793},[783,2974,2975,2977,2980,2982,2984,2986,2988,2990],{"class":785,"line":955},[783,2976,1700],{"class":793},[783,2978,2979],{"class":958},"repeat-y",[783,2981,971],{"class":793},[783,2983,962],{"class":793},[783,2985,965],{"class":793},[783,2987,2979],{"class":810},[783,2989,971],{"class":793},[783,2991,974],{"class":793},[783,2993,2994,2997,2999,3001,3004,3006],{"class":785,"line":977},[783,2995,2996],{"class":958},"    round",[783,2998,962],{"class":793},[783,3000,965],{"class":793},[783,3002,3003],{"class":810},"round",[783,3005,971],{"class":793},[783,3007,974],{"class":793},[783,3009,3010,3013,3015,3017,3020,3022],{"class":785,"line":994},[783,3011,3012],{"class":958},"    space",[783,3014,962],{"class":793},[783,3016,965],{"class":793},[783,3018,3019],{"class":810},"space",[783,3021,971],{"class":793},[783,3023,974],{"class":793},[783,3025,3026,3028,3030],{"class":785,"line":1010},[783,3027,902],{"class":793},[783,3029,1005],{"class":797},[783,3031,817],{"class":793},[783,3033,3034],{"class":785,"line":1015},[783,3035,868],{"emptyLinePlaceholder":223},[783,3037,3038,3040,3042,3044],{"class":785,"line":1021},[783,3039,1163],{"class":789},[783,3041,1166],{"class":789},[783,3043,908],{"class":797},[783,3045,817],{"class":793},[769,3047,3048],{"icon":154,"label":326},[773,3049,3051],{"className":1175,"code":3050,"filename":1177,"language":1178,"meta":779,"style":779},"._background-repeat\\:repeat { background-repeat: repeat; }\n._background-repeat\\:no-repeat { background-repeat: no-repeat; }\n._background-repeat\\:repeat-x { background-repeat: repeat-x; }\n._background-repeat\\:repeat-y { background-repeat: repeat-y; }\n._background-repeat\\:round { background-repeat: round; }\n._background-repeat\\:space { background-repeat: space; }\n",[702,3052,3053,3078,3101,3124,3147,3170],{"__ignoreMap":779},[783,3054,3055,3057,3060,3062,3064,3066,3069,3071,3074,3076],{"class":785,"line":786},[783,3056,1261],{"class":793},[783,3058,3059],{"class":1264},"_background-repeat",[783,3061,1268],{"class":797},[783,3063,2930],{"class":1264},[783,3065,794],{"class":793},[783,3067,3068],{"class":1275}," background-repeat",[783,3070,962],{"class":793},[783,3072,3073],{"class":797}," repeat",[783,3075,1284],{"class":793},[783,3077,1287],{"class":793},[783,3079,3080,3082,3084,3086,3088,3090,3092,3094,3097,3099],{"class":785,"line":820},[783,3081,1261],{"class":793},[783,3083,3059],{"class":1264},[783,3085,1268],{"class":797},[783,3087,2941],{"class":1264},[783,3089,794],{"class":793},[783,3091,3068],{"class":1275},[783,3093,962],{"class":793},[783,3095,3096],{"class":797}," no-repeat",[783,3098,1284],{"class":793},[783,3100,1287],{"class":793},[783,3102,3103,3105,3107,3109,3111,3113,3115,3117,3120,3122],{"class":785,"line":843},[783,3104,1261],{"class":793},[783,3106,3059],{"class":1264},[783,3108,1268],{"class":797},[783,3110,2960],{"class":1264},[783,3112,794],{"class":793},[783,3114,3068],{"class":1275},[783,3116,962],{"class":793},[783,3118,3119],{"class":797}," repeat-x",[783,3121,1284],{"class":793},[783,3123,1287],{"class":793},[783,3125,3126,3128,3130,3132,3134,3136,3138,3140,3143,3145],{"class":785,"line":865},[783,3127,1261],{"class":793},[783,3129,3059],{"class":1264},[783,3131,1268],{"class":797},[783,3133,2979],{"class":1264},[783,3135,794],{"class":793},[783,3137,3068],{"class":1275},[783,3139,962],{"class":793},[783,3141,3142],{"class":797}," repeat-y",[783,3144,1284],{"class":793},[783,3146,1287],{"class":793},[783,3148,3149,3151,3153,3155,3157,3159,3161,3163,3166,3168],{"class":785,"line":871},[783,3150,1261],{"class":793},[783,3152,3059],{"class":1264},[783,3154,1268],{"class":797},[783,3156,3003],{"class":1264},[783,3158,794],{"class":793},[783,3160,3068],{"class":1275},[783,3162,962],{"class":793},[783,3164,3165],{"class":797}," round",[783,3167,1284],{"class":793},[783,3169,1287],{"class":793},[783,3171,3172,3174,3176,3178,3180,3182,3184,3186,3189,3191],{"class":785,"line":892},[783,3173,1261],{"class":793},[783,3175,3059],{"class":1264},[783,3177,1268],{"class":797},[783,3179,3019],{"class":1264},[783,3181,794],{"class":793},[783,3183,3068],{"class":1275},[783,3185,962],{"class":793},[783,3187,3188],{"class":797}," space",[783,3190,1284],{"class":793},[783,3192,1287],{"class":793},[769,3194,3195],{"icon":520,"label":1448},[773,3196,3198],{"className":1451,"code":3197,"language":1453,"meta":779,"style":779},"\u003Cdiv class=\"_background-repeat:no-repeat\">Single background image\u003C\u002Fdiv>\n\u003Cdiv class=\"_background-repeat:repeat-x\">Horizontally repeating pattern\u003C\u002Fdiv>\n",[702,3199,3200,3228],{"__ignoreMap":779},[783,3201,3202,3204,3206,3208,3210,3212,3215,3217,3219,3222,3224,3226],{"class":785,"line":786},[783,3203,1460],{"class":793},[783,3205,1463],{"class":958},[783,3207,1466],{"class":874},[783,3209,881],{"class":793},[783,3211,814],{"class":793},[783,3213,3214],{"class":810},"_background-repeat:no-repeat",[783,3216,814],{"class":793},[783,3218,1478],{"class":793},[783,3220,3221],{"class":797},"Single background image",[783,3223,1484],{"class":793},[783,3225,1463],{"class":958},[783,3227,1489],{"class":793},[783,3229,3230,3232,3234,3236,3238,3240,3243,3245,3247,3250,3252,3254],{"class":785,"line":820},[783,3231,1460],{"class":793},[783,3233,1463],{"class":958},[783,3235,1466],{"class":874},[783,3237,881],{"class":793},[783,3239,814],{"class":793},[783,3241,3242],{"class":810},"_background-repeat:repeat-x",[783,3244,814],{"class":793},[783,3246,1478],{"class":793},[783,3248,3249],{"class":797},"Horizontally repeating pattern",[783,3251,1484],{"class":793},[783,3253,1463],{"class":958},[783,3255,1489],{"class":793},[707,3257,3259],{"id":3258},"usebackgroundattachmentutility",[702,3260,3261],{},"useBackgroundAttachmentUtility",[711,3263,760,3264,3267],{},[702,3265,3266],{},"useBackgroundAttachmentUtility()"," function creates utility classes for controlling how background images scroll.",[766,3269,3270,3367,3448],{},[769,3271,3272],{"icon":771,"label":290},[773,3273,3275],{"className":775,"code":3274,"filename":777,"language":778,"meta":779,"style":779},"import { styleframe } from \"styleframe\";\nimport { useBackgroundAttachmentUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\n\u002F\u002F Uses built-in defaults: fixed, local, scroll\nuseBackgroundAttachmentUtility(s);\n\nexport default s;\n",[702,3276,3277,3297,3318,3322,3336,3340,3345,3353,3357],{"__ignoreMap":779},[783,3278,3279,3281,3283,3285,3287,3289,3291,3293,3295],{"class":785,"line":786},[783,3280,790],{"class":789},[783,3282,794],{"class":793},[783,3284,798],{"class":797},[783,3286,801],{"class":793},[783,3288,804],{"class":789},[783,3290,807],{"class":793},[783,3292,811],{"class":810},[783,3294,814],{"class":793},[783,3296,817],{"class":793},[783,3298,3299,3301,3303,3306,3308,3310,3312,3314,3316],{"class":785,"line":820},[783,3300,790],{"class":789},[783,3302,794],{"class":793},[783,3304,3305],{"class":797}," useBackgroundAttachmentUtility",[783,3307,801],{"class":793},[783,3309,804],{"class":789},[783,3311,807],{"class":793},[783,3313,836],{"class":810},[783,3315,814],{"class":793},[783,3317,817],{"class":793},[783,3319,3320],{"class":785,"line":843},[783,3321,868],{"emptyLinePlaceholder":223},[783,3323,3324,3326,3328,3330,3332,3334],{"class":785,"line":865},[783,3325,875],{"class":874},[783,3327,878],{"class":797},[783,3329,881],{"class":793},[783,3331,798],{"class":884},[783,3333,887],{"class":797},[783,3335,817],{"class":793},[783,3337,3338],{"class":785,"line":871},[783,3339,868],{"emptyLinePlaceholder":223},[783,3341,3342],{"class":785,"line":892},[783,3343,3344],{"class":921},"\u002F\u002F Uses built-in defaults: fixed, local, scroll\n",[783,3346,3347,3349,3351],{"class":785,"line":913},[783,3348,3261],{"class":884},[783,3350,2034],{"class":797},[783,3352,817],{"class":793},[783,3354,3355],{"class":785,"line":918},[783,3356,868],{"emptyLinePlaceholder":223},[783,3358,3359,3361,3363,3365],{"class":785,"line":925},[783,3360,1163],{"class":789},[783,3362,1166],{"class":789},[783,3364,908],{"class":797},[783,3366,817],{"class":793},[769,3368,3369],{"icon":154,"label":326},[773,3370,3372],{"className":1175,"code":3371,"filename":1177,"language":1178,"meta":779,"style":779},"._background-attachment\\:fixed { background-attachment: fixed; }\n._background-attachment\\:local { background-attachment: local; }\n._background-attachment\\:scroll { background-attachment: scroll; }\n",[702,3373,3374,3400,3424],{"__ignoreMap":779},[783,3375,3376,3378,3381,3383,3386,3388,3391,3393,3396,3398],{"class":785,"line":786},[783,3377,1261],{"class":793},[783,3379,3380],{"class":1264},"_background-attachment",[783,3382,1268],{"class":797},[783,3384,3385],{"class":1264},"fixed",[783,3387,794],{"class":793},[783,3389,3390],{"class":1275}," background-attachment",[783,3392,962],{"class":793},[783,3394,3395],{"class":797}," fixed",[783,3397,1284],{"class":793},[783,3399,1287],{"class":793},[783,3401,3402,3404,3406,3408,3411,3413,3415,3417,3420,3422],{"class":785,"line":820},[783,3403,1261],{"class":793},[783,3405,3380],{"class":1264},[783,3407,1268],{"class":797},[783,3409,3410],{"class":1264},"local",[783,3412,794],{"class":793},[783,3414,3390],{"class":1275},[783,3416,962],{"class":793},[783,3418,3419],{"class":797}," local",[783,3421,1284],{"class":793},[783,3423,1287],{"class":793},[783,3425,3426,3428,3430,3432,3435,3437,3439,3441,3444,3446],{"class":785,"line":843},[783,3427,1261],{"class":793},[783,3429,3380],{"class":1264},[783,3431,1268],{"class":797},[783,3433,3434],{"class":1264},"scroll",[783,3436,794],{"class":793},[783,3438,3390],{"class":1275},[783,3440,962],{"class":793},[783,3442,3443],{"class":797}," scroll",[783,3445,1284],{"class":793},[783,3447,1287],{"class":793},[769,3449,3450],{"icon":520,"label":1448},[773,3451,3453],{"className":1451,"code":3452,"language":1453,"meta":779,"style":779},"\u003Cdiv class=\"_background-attachment:fixed\">Parallax-style fixed background\u003C\u002Fdiv>\n\u003Cdiv class=\"_background-attachment:scroll\">Normal scrolling background\u003C\u002Fdiv>\n",[702,3454,3455,3483],{"__ignoreMap":779},[783,3456,3457,3459,3461,3463,3465,3467,3470,3472,3474,3477,3479,3481],{"class":785,"line":786},[783,3458,1460],{"class":793},[783,3460,1463],{"class":958},[783,3462,1466],{"class":874},[783,3464,881],{"class":793},[783,3466,814],{"class":793},[783,3468,3469],{"class":810},"_background-attachment:fixed",[783,3471,814],{"class":793},[783,3473,1478],{"class":793},[783,3475,3476],{"class":797},"Parallax-style fixed background",[783,3478,1484],{"class":793},[783,3480,1463],{"class":958},[783,3482,1489],{"class":793},[783,3484,3485,3487,3489,3491,3493,3495,3498,3500,3502,3505,3507,3509],{"class":785,"line":820},[783,3486,1460],{"class":793},[783,3488,1463],{"class":958},[783,3490,1466],{"class":874},[783,3492,881],{"class":793},[783,3494,814],{"class":793},[783,3496,3497],{"class":810},"_background-attachment:scroll",[783,3499,814],{"class":793},[783,3501,1478],{"class":793},[783,3503,3504],{"class":797},"Normal scrolling background",[783,3506,1484],{"class":793},[783,3508,1463],{"class":958},[783,3510,1489],{"class":793},[2196,3512,2199],{"id":3513},"default-values-2",[2201,3515,3516,3526],{},[2204,3517,3518],{},[2207,3519,3520,3522,3524],{},[2210,3521,2212],{},[2210,3523,2215],{},[2210,3525,2218],{},[2220,3527,3528,3541,3554],{},[2207,3529,3530,3534,3538],{},[2225,3531,3532],{},[702,3533,3385],{},[2225,3535,3536],{},[702,3537,3385],{},[2225,3539,3540],{},"Background stays fixed relative to viewport",[2207,3542,3543,3547,3551],{},[2225,3544,3545],{},[702,3546,3410],{},[2225,3548,3549],{},[702,3550,3410],{},[2225,3552,3553],{},"Background scrolls with element's content",[2207,3555,3556,3560,3564],{},[2225,3557,3558],{},[702,3559,3434],{},[2225,3561,3562],{},[702,3563,3434],{},[2225,3565,3566],{},"Background scrolls with the element",[707,3568,3570],{"id":3569},"usebackgroundcliputility",[702,3571,3572],{},"useBackgroundClipUtility",[711,3574,760,3575,3578],{},[702,3576,3577],{},"useBackgroundClipUtility()"," function creates utility classes for controlling how far the background extends.",[766,3580,3581,3747,3851],{},[769,3582,3583],{"icon":771,"label":290},[773,3584,3586],{"className":775,"code":3585,"filename":777,"language":778,"meta":779,"style":779},"import { styleframe } from \"styleframe\";\nimport { useBackgroundClipUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseBackgroundClipUtility(s, {\n    border: 'border-box',\n    padding: 'padding-box',\n    content: 'content-box',\n    text: 'text',\n});\n\nexport default s;\n",[702,3587,3588,3608,3629,3633,3647,3651,3661,3677,3693,3709,3725,3733,3737],{"__ignoreMap":779},[783,3589,3590,3592,3594,3596,3598,3600,3602,3604,3606],{"class":785,"line":786},[783,3591,790],{"class":789},[783,3593,794],{"class":793},[783,3595,798],{"class":797},[783,3597,801],{"class":793},[783,3599,804],{"class":789},[783,3601,807],{"class":793},[783,3603,811],{"class":810},[783,3605,814],{"class":793},[783,3607,817],{"class":793},[783,3609,3610,3612,3614,3617,3619,3621,3623,3625,3627],{"class":785,"line":820},[783,3611,790],{"class":789},[783,3613,794],{"class":793},[783,3615,3616],{"class":797}," useBackgroundClipUtility",[783,3618,801],{"class":793},[783,3620,804],{"class":789},[783,3622,807],{"class":793},[783,3624,836],{"class":810},[783,3626,814],{"class":793},[783,3628,817],{"class":793},[783,3630,3631],{"class":785,"line":843},[783,3632,868],{"emptyLinePlaceholder":223},[783,3634,3635,3637,3639,3641,3643,3645],{"class":785,"line":865},[783,3636,875],{"class":874},[783,3638,878],{"class":797},[783,3640,881],{"class":793},[783,3642,798],{"class":884},[783,3644,887],{"class":797},[783,3646,817],{"class":793},[783,3648,3649],{"class":785,"line":871},[783,3650,868],{"emptyLinePlaceholder":223},[783,3652,3653,3655,3657,3659],{"class":785,"line":892},[783,3654,3572],{"class":884},[783,3656,947],{"class":797},[783,3658,935],{"class":793},[783,3660,952],{"class":793},[783,3662,3663,3666,3668,3670,3673,3675],{"class":785,"line":913},[783,3664,3665],{"class":958},"    border",[783,3667,962],{"class":793},[783,3669,965],{"class":793},[783,3671,3672],{"class":810},"border-box",[783,3674,971],{"class":793},[783,3676,974],{"class":793},[783,3678,3679,3682,3684,3686,3689,3691],{"class":785,"line":918},[783,3680,3681],{"class":958},"    padding",[783,3683,962],{"class":793},[783,3685,965],{"class":793},[783,3687,3688],{"class":810},"padding-box",[783,3690,971],{"class":793},[783,3692,974],{"class":793},[783,3694,3695,3698,3700,3702,3705,3707],{"class":785,"line":925},[783,3696,3697],{"class":958},"    content",[783,3699,962],{"class":793},[783,3701,965],{"class":793},[783,3703,3704],{"class":810},"content-box",[783,3706,971],{"class":793},[783,3708,974],{"class":793},[783,3710,3711,3714,3716,3718,3721,3723],{"class":785,"line":955},[783,3712,3713],{"class":958},"    text",[783,3715,962],{"class":793},[783,3717,965],{"class":793},[783,3719,3720],{"class":810},"text",[783,3722,971],{"class":793},[783,3724,974],{"class":793},[783,3726,3727,3729,3731],{"class":785,"line":977},[783,3728,902],{"class":793},[783,3730,1005],{"class":797},[783,3732,817],{"class":793},[783,3734,3735],{"class":785,"line":994},[783,3736,868],{"emptyLinePlaceholder":223},[783,3738,3739,3741,3743,3745],{"class":785,"line":1010},[783,3740,1163],{"class":789},[783,3742,1166],{"class":789},[783,3744,908],{"class":797},[783,3746,817],{"class":793},[769,3748,3749],{"icon":154,"label":326},[773,3750,3752],{"className":1175,"code":3751,"filename":1177,"language":1178,"meta":779,"style":779},"._background-clip\\:border { background-clip: border-box; }\n._background-clip\\:padding { background-clip: padding-box; }\n._background-clip\\:content { background-clip: content-box; }\n._background-clip\\:text { background-clip: text; }\n",[702,3753,3754,3780,3804,3828],{"__ignoreMap":779},[783,3755,3756,3758,3761,3763,3766,3768,3771,3773,3776,3778],{"class":785,"line":786},[783,3757,1261],{"class":793},[783,3759,3760],{"class":1264},"_background-clip",[783,3762,1268],{"class":797},[783,3764,3765],{"class":1264},"border",[783,3767,794],{"class":793},[783,3769,3770],{"class":1275}," background-clip",[783,3772,962],{"class":793},[783,3774,3775],{"class":797}," border-box",[783,3777,1284],{"class":793},[783,3779,1287],{"class":793},[783,3781,3782,3784,3786,3788,3791,3793,3795,3797,3800,3802],{"class":785,"line":820},[783,3783,1261],{"class":793},[783,3785,3760],{"class":1264},[783,3787,1268],{"class":797},[783,3789,3790],{"class":1264},"padding",[783,3792,794],{"class":793},[783,3794,3770],{"class":1275},[783,3796,962],{"class":793},[783,3798,3799],{"class":797}," padding-box",[783,3801,1284],{"class":793},[783,3803,1287],{"class":793},[783,3805,3806,3808,3810,3812,3815,3817,3819,3821,3824,3826],{"class":785,"line":843},[783,3807,1261],{"class":793},[783,3809,3760],{"class":1264},[783,3811,1268],{"class":797},[783,3813,3814],{"class":1264},"content",[783,3816,794],{"class":793},[783,3818,3770],{"class":1275},[783,3820,962],{"class":793},[783,3822,3823],{"class":797}," content-box",[783,3825,1284],{"class":793},[783,3827,1287],{"class":793},[783,3829,3830,3832,3834,3836,3838,3840,3842,3844,3847,3849],{"class":785,"line":865},[783,3831,1261],{"class":793},[783,3833,3760],{"class":1264},[783,3835,1268],{"class":797},[783,3837,3720],{"class":1264},[783,3839,794],{"class":793},[783,3841,3770],{"class":1275},[783,3843,962],{"class":793},[783,3845,3846],{"class":797}," text",[783,3848,1284],{"class":793},[783,3850,1287],{"class":793},[769,3852,3853],{"icon":520,"label":1448},[773,3854,3856],{"className":1451,"code":3855,"language":1453,"meta":779,"style":779},"\u003Cdiv class=\"_background-clip:padding\">Clip to padding box\u003C\u002Fdiv>\n\u003Ch1 class=\"_background-clip:text _background-image:gradient-primary\" style=\"color: transparent;\">\n    Gradient text\n\u003C\u002Fh1>\n",[702,3857,3858,3886,3918,3923],{"__ignoreMap":779},[783,3859,3860,3862,3864,3866,3868,3870,3873,3875,3877,3880,3882,3884],{"class":785,"line":786},[783,3861,1460],{"class":793},[783,3863,1463],{"class":958},[783,3865,1466],{"class":874},[783,3867,881],{"class":793},[783,3869,814],{"class":793},[783,3871,3872],{"class":810},"_background-clip:padding",[783,3874,814],{"class":793},[783,3876,1478],{"class":793},[783,3878,3879],{"class":797},"Clip to padding box",[783,3881,1484],{"class":793},[783,3883,1463],{"class":958},[783,3885,1489],{"class":793},[783,3887,3888,3890,3893,3895,3897,3899,3902,3904,3907,3909,3911,3914,3916],{"class":785,"line":820},[783,3889,1460],{"class":793},[783,3891,3892],{"class":958},"h1",[783,3894,1466],{"class":874},[783,3896,881],{"class":793},[783,3898,814],{"class":793},[783,3900,3901],{"class":810},"_background-clip:text _background-image:gradient-primary",[783,3903,814],{"class":793},[783,3905,3906],{"class":874}," style",[783,3908,881],{"class":793},[783,3910,814],{"class":793},[783,3912,3913],{"class":810},"color: transparent;",[783,3915,814],{"class":793},[783,3917,1489],{"class":793},[783,3919,3920],{"class":785,"line":843},[783,3921,3922],{"class":797},"    Gradient text\n",[783,3924,3925,3927,3929],{"class":785,"line":865},[783,3926,1484],{"class":793},[783,3928,3892],{"class":958},[783,3930,1489],{"class":793},[1577,3932,3933,1582,3936,3939],{},[692,3934,3935],{},"Gradient text",[702,3937,3938],{},"background-clip: text"," with a gradient background and transparent text color to create gradient text effects.",[707,3941,3943],{"id":3942},"usebackgroundoriginutility",[702,3944,3945],{},"useBackgroundOriginUtility",[711,3947,760,3948,3951],{},[702,3949,3950],{},"useBackgroundOriginUtility()"," function creates utility classes for setting the background's origin point.",[766,3953,3954,4098,4173],{},[769,3955,3956],{"icon":771,"label":290},[773,3957,3959],{"className":775,"code":3958,"filename":777,"language":778,"meta":779,"style":779},"import { styleframe } from \"styleframe\";\nimport { useBackgroundOriginUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseBackgroundOriginUtility(s, {\n    border: 'border-box',\n    padding: 'padding-box',\n    content: 'content-box',\n});\n\nexport default s;\n",[702,3960,3961,3981,4002,4006,4020,4024,4034,4048,4062,4076,4084,4088],{"__ignoreMap":779},[783,3962,3963,3965,3967,3969,3971,3973,3975,3977,3979],{"class":785,"line":786},[783,3964,790],{"class":789},[783,3966,794],{"class":793},[783,3968,798],{"class":797},[783,3970,801],{"class":793},[783,3972,804],{"class":789},[783,3974,807],{"class":793},[783,3976,811],{"class":810},[783,3978,814],{"class":793},[783,3980,817],{"class":793},[783,3982,3983,3985,3987,3990,3992,3994,3996,3998,4000],{"class":785,"line":820},[783,3984,790],{"class":789},[783,3986,794],{"class":793},[783,3988,3989],{"class":797}," useBackgroundOriginUtility",[783,3991,801],{"class":793},[783,3993,804],{"class":789},[783,3995,807],{"class":793},[783,3997,836],{"class":810},[783,3999,814],{"class":793},[783,4001,817],{"class":793},[783,4003,4004],{"class":785,"line":843},[783,4005,868],{"emptyLinePlaceholder":223},[783,4007,4008,4010,4012,4014,4016,4018],{"class":785,"line":865},[783,4009,875],{"class":874},[783,4011,878],{"class":797},[783,4013,881],{"class":793},[783,4015,798],{"class":884},[783,4017,887],{"class":797},[783,4019,817],{"class":793},[783,4021,4022],{"class":785,"line":871},[783,4023,868],{"emptyLinePlaceholder":223},[783,4025,4026,4028,4030,4032],{"class":785,"line":892},[783,4027,3945],{"class":884},[783,4029,947],{"class":797},[783,4031,935],{"class":793},[783,4033,952],{"class":793},[783,4035,4036,4038,4040,4042,4044,4046],{"class":785,"line":913},[783,4037,3665],{"class":958},[783,4039,962],{"class":793},[783,4041,965],{"class":793},[783,4043,3672],{"class":810},[783,4045,971],{"class":793},[783,4047,974],{"class":793},[783,4049,4050,4052,4054,4056,4058,4060],{"class":785,"line":918},[783,4051,3681],{"class":958},[783,4053,962],{"class":793},[783,4055,965],{"class":793},[783,4057,3688],{"class":810},[783,4059,971],{"class":793},[783,4061,974],{"class":793},[783,4063,4064,4066,4068,4070,4072,4074],{"class":785,"line":925},[783,4065,3697],{"class":958},[783,4067,962],{"class":793},[783,4069,965],{"class":793},[783,4071,3704],{"class":810},[783,4073,971],{"class":793},[783,4075,974],{"class":793},[783,4077,4078,4080,4082],{"class":785,"line":955},[783,4079,902],{"class":793},[783,4081,1005],{"class":797},[783,4083,817],{"class":793},[783,4085,4086],{"class":785,"line":977},[783,4087,868],{"emptyLinePlaceholder":223},[783,4089,4090,4092,4094,4096],{"class":785,"line":994},[783,4091,1163],{"class":789},[783,4093,1166],{"class":789},[783,4095,908],{"class":797},[783,4097,817],{"class":793},[769,4099,4100],{"icon":154,"label":326},[773,4101,4103],{"className":1175,"code":4102,"filename":1177,"language":1178,"meta":779,"style":779},"._background-origin\\:border { background-origin: border-box; }\n._background-origin\\:padding { background-origin: padding-box; }\n._background-origin\\:content { background-origin: content-box; }\n",[702,4104,4105,4129,4151],{"__ignoreMap":779},[783,4106,4107,4109,4112,4114,4116,4118,4121,4123,4125,4127],{"class":785,"line":786},[783,4108,1261],{"class":793},[783,4110,4111],{"class":1264},"_background-origin",[783,4113,1268],{"class":797},[783,4115,3765],{"class":1264},[783,4117,794],{"class":793},[783,4119,4120],{"class":1275}," background-origin",[783,4122,962],{"class":793},[783,4124,3775],{"class":797},[783,4126,1284],{"class":793},[783,4128,1287],{"class":793},[783,4130,4131,4133,4135,4137,4139,4141,4143,4145,4147,4149],{"class":785,"line":820},[783,4132,1261],{"class":793},[783,4134,4111],{"class":1264},[783,4136,1268],{"class":797},[783,4138,3790],{"class":1264},[783,4140,794],{"class":793},[783,4142,4120],{"class":1275},[783,4144,962],{"class":793},[783,4146,3799],{"class":797},[783,4148,1284],{"class":793},[783,4150,1287],{"class":793},[783,4152,4153,4155,4157,4159,4161,4163,4165,4167,4169,4171],{"class":785,"line":843},[783,4154,1261],{"class":793},[783,4156,4111],{"class":1264},[783,4158,1268],{"class":797},[783,4160,3814],{"class":1264},[783,4162,794],{"class":793},[783,4164,4120],{"class":1275},[783,4166,962],{"class":793},[783,4168,3823],{"class":797},[783,4170,1284],{"class":793},[783,4172,1287],{"class":793},[769,4174,4175],{"icon":520,"label":1448},[773,4176,4178],{"className":1451,"code":4177,"language":1453,"meta":779,"style":779},"\u003Cdiv class=\"_background-origin:border\">Background starts at border\u003C\u002Fdiv>\n\u003Cdiv class=\"_background-origin:content\">Background starts at content\u003C\u002Fdiv>\n",[702,4179,4180,4208],{"__ignoreMap":779},[783,4181,4182,4184,4186,4188,4190,4192,4195,4197,4199,4202,4204,4206],{"class":785,"line":786},[783,4183,1460],{"class":793},[783,4185,1463],{"class":958},[783,4187,1466],{"class":874},[783,4189,881],{"class":793},[783,4191,814],{"class":793},[783,4193,4194],{"class":810},"_background-origin:border",[783,4196,814],{"class":793},[783,4198,1478],{"class":793},[783,4200,4201],{"class":797},"Background starts at border",[783,4203,1484],{"class":793},[783,4205,1463],{"class":958},[783,4207,1489],{"class":793},[783,4209,4210,4212,4214,4216,4218,4220,4223,4225,4227,4230,4232,4234],{"class":785,"line":820},[783,4211,1460],{"class":793},[783,4213,1463],{"class":958},[783,4215,1466],{"class":874},[783,4217,881],{"class":793},[783,4219,814],{"class":793},[783,4221,4222],{"class":810},"_background-origin:content",[783,4224,814],{"class":793},[783,4226,1478],{"class":793},[783,4228,4229],{"class":797},"Background starts at content",[783,4231,1484],{"class":793},[783,4233,1463],{"class":958},[783,4235,1489],{"class":793},[707,4237,4239],{"id":4238},"examples","Examples",[2196,4241,4243],{"id":4242},"hero-section-with-background-image","Hero Section with Background Image",[766,4245,4246,4506],{},[769,4247,4248],{"icon":771,"label":290},[773,4249,4251],{"className":775,"code":4250,"filename":777,"language":778,"meta":779,"style":779},"import { styleframe } from \"styleframe\";\nimport {\n    useBackgroundColorUtility,\n    useBackgroundImageUtility,\n    useBackgroundSizeUtility,\n    useBackgroundPositionUtility,\n    useBackgroundRepeatUtility,\n} from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\n\u002F\u002F Background utilities for hero sections\nuseBackgroundColorUtility(s, {\n    overlay: 'rgba(0, 0, 0, 0.5)',\n});\n\nuseBackgroundImageUtility(s, {\n    hero: 'url(\"\u002Fimages\u002Fhero.jpg\")',\n    none: 'none',\n});\n\nuseBackgroundSizeUtility(s);\nuseBackgroundPositionUtility(s);\nuseBackgroundRepeatUtility(s, { 'no-repeat': 'no-repeat' });\n\nexport default s;\n",[702,4252,4253,4273,4279,4286,4293,4300,4307,4314,4328,4332,4346,4350,4355,4365,4381,4389,4393,4403,4419,4433,4441,4445,4453,4461,4491,4495],{"__ignoreMap":779},[783,4254,4255,4257,4259,4261,4263,4265,4267,4269,4271],{"class":785,"line":786},[783,4256,790],{"class":789},[783,4258,794],{"class":793},[783,4260,798],{"class":797},[783,4262,801],{"class":793},[783,4264,804],{"class":789},[783,4266,807],{"class":793},[783,4268,811],{"class":810},[783,4270,814],{"class":793},[783,4272,817],{"class":793},[783,4274,4275,4277],{"class":785,"line":820},[783,4276,790],{"class":789},[783,4278,952],{"class":793},[783,4280,4281,4284],{"class":785,"line":843},[783,4282,4283],{"class":797},"    useBackgroundColorUtility",[783,4285,974],{"class":793},[783,4287,4288,4291],{"class":785,"line":865},[783,4289,4290],{"class":797},"    useBackgroundImageUtility",[783,4292,974],{"class":793},[783,4294,4295,4298],{"class":785,"line":871},[783,4296,4297],{"class":797},"    useBackgroundSizeUtility",[783,4299,974],{"class":793},[783,4301,4302,4305],{"class":785,"line":892},[783,4303,4304],{"class":797},"    useBackgroundPositionUtility",[783,4306,974],{"class":793},[783,4308,4309,4312],{"class":785,"line":913},[783,4310,4311],{"class":797},"    useBackgroundRepeatUtility",[783,4313,974],{"class":793},[783,4315,4316,4318,4320,4322,4324,4326],{"class":785,"line":918},[783,4317,902],{"class":793},[783,4319,804],{"class":789},[783,4321,807],{"class":793},[783,4323,836],{"class":810},[783,4325,814],{"class":793},[783,4327,817],{"class":793},[783,4329,4330],{"class":785,"line":925},[783,4331,868],{"emptyLinePlaceholder":223},[783,4333,4334,4336,4338,4340,4342,4344],{"class":785,"line":955},[783,4335,875],{"class":874},[783,4337,878],{"class":797},[783,4339,881],{"class":793},[783,4341,798],{"class":884},[783,4343,887],{"class":797},[783,4345,817],{"class":793},[783,4347,4348],{"class":785,"line":977},[783,4349,868],{"emptyLinePlaceholder":223},[783,4351,4352],{"class":785,"line":994},[783,4353,4354],{"class":921},"\u002F\u002F Background utilities for hero sections\n",[783,4356,4357,4359,4361,4363],{"class":785,"line":1010},[783,4358,757],{"class":884},[783,4360,947],{"class":797},[783,4362,935],{"class":793},[783,4364,952],{"class":793},[783,4366,4367,4370,4372,4374,4377,4379],{"class":785,"line":1015},[783,4368,4369],{"class":958},"    overlay",[783,4371,962],{"class":793},[783,4373,965],{"class":793},[783,4375,4376],{"class":810},"rgba(0, 0, 0, 0.5)",[783,4378,971],{"class":793},[783,4380,974],{"class":793},[783,4382,4383,4385,4387],{"class":785,"line":1021},[783,4384,902],{"class":793},[783,4386,1005],{"class":797},[783,4388,817],{"class":793},[783,4390,4391],{"class":785,"line":1032},[783,4392,868],{"emptyLinePlaceholder":223},[783,4394,4395,4397,4399,4401],{"class":785,"line":1049},[783,4396,1591],{"class":884},[783,4398,947],{"class":797},[783,4400,935],{"class":793},[783,4402,952],{"class":793},[783,4404,4405,4408,4410,4412,4415,4417],{"class":785,"line":1066},[783,4406,4407],{"class":958},"    hero",[783,4409,962],{"class":793},[783,4411,965],{"class":793},[783,4413,4414],{"class":810},"url(\"\u002Fimages\u002Fhero.jpg\")",[783,4416,971],{"class":793},[783,4418,974],{"class":793},[783,4420,4421,4423,4425,4427,4429,4431],{"class":785,"line":1083},[783,4422,1684],{"class":958},[783,4424,962],{"class":793},[783,4426,965],{"class":793},[783,4428,1691],{"class":810},[783,4430,971],{"class":793},[783,4432,974],{"class":793},[783,4434,4435,4437,4439],{"class":785,"line":1098},[783,4436,902],{"class":793},[783,4438,1005],{"class":797},[783,4440,817],{"class":793},[783,4442,4443],{"class":785,"line":1112},[783,4444,868],{"emptyLinePlaceholder":223},[783,4446,4447,4449,4451],{"class":785,"line":1129},[783,4448,1944],{"class":884},[783,4450,2034],{"class":797},[783,4452,817],{"class":793},[783,4454,4455,4457,4459],{"class":785,"line":1146},[783,4456,2267],{"class":884},[783,4458,2034],{"class":797},[783,4460,817],{"class":793},[783,4462,4463,4465,4467,4469,4471,4473,4475,4477,4479,4481,4483,4485,4487,4489],{"class":785,"line":1155},[783,4464,2830],{"class":884},[783,4466,947],{"class":797},[783,4468,935],{"class":793},[783,4470,794],{"class":793},[783,4472,965],{"class":793},[783,4474,2941],{"class":958},[783,4476,971],{"class":793},[783,4478,962],{"class":793},[783,4480,965],{"class":793},[783,4482,2941],{"class":810},[783,4484,971],{"class":793},[783,4486,801],{"class":793},[783,4488,1005],{"class":797},[783,4490,817],{"class":793},[783,4492,4493],{"class":785,"line":1160},[783,4494,868],{"emptyLinePlaceholder":223},[783,4496,4498,4500,4502,4504],{"class":785,"line":4497},26,[783,4499,1163],{"class":789},[783,4501,1166],{"class":789},[783,4503,908],{"class":797},[783,4505,817],{"class":793},[769,4507,4508],{"icon":154,"label":326},[773,4509,4511],{"className":1175,"code":4510,"filename":1177,"language":1178,"meta":779,"style":779},"._bg\\:overlay { background-color: rgba(0, 0, 0, 0.5); }\n\n._background-image\\:hero { background-image: url(\"\u002Fimages\u002Fhero.jpg\"); }\n._background-image\\:none { background-image: none; }\n\n._background-size\\:auto { background-size: auto; }\n._background-size\\:cover { background-size: cover; }\n._background-size\\:contain { background-size: contain; }\n\n._background-position\\:center { background-position: center; }\n\u002F* ... more position utilities *\u002F\n\n._background-repeat\\:no-repeat { background-repeat: no-repeat; }\n",[702,4512,4513,4556,4560,4593,4615,4619,4641,4663,4685,4689,4711,4716,4720],{"__ignoreMap":779},[783,4514,4515,4517,4519,4521,4524,4526,4528,4530,4533,4535,4538,4540,4543,4545,4547,4549,4552,4554],{"class":785,"line":786},[783,4516,1261],{"class":793},[783,4518,1265],{"class":1264},[783,4520,1268],{"class":797},[783,4522,4523],{"class":1264},"overlay",[783,4525,794],{"class":793},[783,4527,1276],{"class":1275},[783,4529,962],{"class":793},[783,4531,4532],{"class":884}," rgba",[783,4534,1202],{"class":793},[783,4536,4537],{"class":1205},"0",[783,4539,935],{"class":793},[783,4541,4542],{"class":1205}," 0",[783,4544,935],{"class":793},[783,4546,4542],{"class":1205},[783,4548,935],{"class":793},[783,4550,4551],{"class":1205}," 0.5",[783,4553,1362],{"class":793},[783,4555,1287],{"class":793},[783,4557,4558],{"class":785,"line":820},[783,4559,868],{"emptyLinePlaceholder":223},[783,4561,4562,4564,4566,4568,4571,4573,4575,4577,4580,4582,4584,4587,4589,4591],{"class":785,"line":843},[783,4563,1261],{"class":793},[783,4565,1772],{"class":1264},[783,4567,1268],{"class":797},[783,4569,4570],{"class":1264},"hero",[783,4572,794],{"class":793},[783,4574,1781],{"class":1275},[783,4576,962],{"class":793},[783,4578,4579],{"class":884}," url",[783,4581,1202],{"class":793},[783,4583,814],{"class":793},[783,4585,4586],{"class":810},"\u002Fimages\u002Fhero.jpg",[783,4588,814],{"class":793},[783,4590,1362],{"class":793},[783,4592,1287],{"class":793},[783,4594,4595,4597,4599,4601,4603,4605,4607,4609,4611,4613],{"class":785,"line":865},[783,4596,1261],{"class":793},[783,4598,1772],{"class":1264},[783,4600,1268],{"class":797},[783,4602,1691],{"class":1264},[783,4604,794],{"class":793},[783,4606,1781],{"class":1275},[783,4608,962],{"class":793},[783,4610,1786],{"class":797},[783,4612,1284],{"class":793},[783,4614,1287],{"class":793},[783,4616,4617],{"class":785,"line":871},[783,4618,868],{"emptyLinePlaceholder":223},[783,4620,4621,4623,4625,4627,4629,4631,4633,4635,4637,4639],{"class":785,"line":892},[783,4622,1261],{"class":793},[783,4624,2064],{"class":1264},[783,4626,1268],{"class":797},[783,4628,2069],{"class":1264},[783,4630,794],{"class":793},[783,4632,2074],{"class":1275},[783,4634,962],{"class":793},[783,4636,2079],{"class":797},[783,4638,1284],{"class":793},[783,4640,1287],{"class":793},[783,4642,4643,4645,4647,4649,4651,4653,4655,4657,4659,4661],{"class":785,"line":913},[783,4644,1261],{"class":793},[783,4646,2064],{"class":1264},[783,4648,1268],{"class":797},[783,4650,2094],{"class":1264},[783,4652,794],{"class":793},[783,4654,2074],{"class":1275},[783,4656,962],{"class":793},[783,4658,2103],{"class":797},[783,4660,1284],{"class":793},[783,4662,1287],{"class":793},[783,4664,4665,4667,4669,4671,4673,4675,4677,4679,4681,4683],{"class":785,"line":918},[783,4666,1261],{"class":793},[783,4668,2064],{"class":1264},[783,4670,1268],{"class":797},[783,4672,2118],{"class":1264},[783,4674,794],{"class":793},[783,4676,2074],{"class":1275},[783,4678,962],{"class":793},[783,4680,2127],{"class":797},[783,4682,1284],{"class":793},[783,4684,1287],{"class":793},[783,4686,4687],{"class":785,"line":925},[783,4688,868],{"emptyLinePlaceholder":223},[783,4690,4691,4693,4695,4697,4699,4701,4703,4705,4707,4709],{"class":785,"line":955},[783,4692,1261],{"class":793},[783,4694,2386],{"class":1264},[783,4696,1268],{"class":797},[783,4698,2415],{"class":1264},[783,4700,794],{"class":793},[783,4702,2396],{"class":1275},[783,4704,962],{"class":793},[783,4706,2424],{"class":797},[783,4708,1284],{"class":793},[783,4710,1287],{"class":793},[783,4712,4713],{"class":785,"line":977},[783,4714,4715],{"class":921},"\u002F* ... more position utilities *\u002F\n",[783,4717,4718],{"class":785,"line":994},[783,4719,868],{"emptyLinePlaceholder":223},[783,4721,4722,4724,4726,4728,4730,4732,4734,4736,4738,4740],{"class":785,"line":1010},[783,4723,1261],{"class":793},[783,4725,3059],{"class":1264},[783,4727,1268],{"class":797},[783,4729,2941],{"class":1264},[783,4731,794],{"class":793},[783,4733,3068],{"class":1275},[783,4735,962],{"class":793},[783,4737,3096],{"class":797},[783,4739,1284],{"class":793},[783,4741,1287],{"class":793},[711,4743,4744],{},"Usage in HTML:",[773,4746,4748],{"className":1451,"code":4747,"language":1453,"meta":779,"style":779},"\u003Csection class=\"_background-image:hero _background-size:cover _background-position:center _background-repeat:no-repeat\">\n    \u003Cdiv class=\"_bg:overlay\">\n        \u003Ch1>Welcome\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n\u003C\u002Fsection>\n",[702,4749,4750,4769,4789,4807,4816],{"__ignoreMap":779},[783,4751,4752,4754,4756,4758,4760,4762,4765,4767],{"class":785,"line":786},[783,4753,1460],{"class":793},[783,4755,1916],{"class":958},[783,4757,1466],{"class":874},[783,4759,881],{"class":793},[783,4761,814],{"class":793},[783,4763,4764],{"class":810},"_background-image:hero _background-size:cover _background-position:center _background-repeat:no-repeat",[783,4766,814],{"class":793},[783,4768,1489],{"class":793},[783,4770,4771,4774,4776,4778,4780,4782,4785,4787],{"class":785,"line":820},[783,4772,4773],{"class":793},"    \u003C",[783,4775,1463],{"class":958},[783,4777,1466],{"class":874},[783,4779,881],{"class":793},[783,4781,814],{"class":793},[783,4783,4784],{"class":810},"_bg:overlay",[783,4786,814],{"class":793},[783,4788,1489],{"class":793},[783,4790,4791,4794,4796,4798,4801,4803,4805],{"class":785,"line":843},[783,4792,4793],{"class":793},"        \u003C",[783,4795,3892],{"class":958},[783,4797,1478],{"class":793},[783,4799,4800],{"class":797},"Welcome",[783,4802,1484],{"class":793},[783,4804,3892],{"class":958},[783,4806,1489],{"class":793},[783,4808,4809,4812,4814],{"class":785,"line":865},[783,4810,4811],{"class":793},"    \u003C\u002F",[783,4813,1463],{"class":958},[783,4815,1489],{"class":793},[783,4817,4818,4820,4822],{"class":785,"line":871},[783,4819,1484],{"class":793},[783,4821,1916],{"class":958},[783,4823,1489],{"class":793},[2196,4825,4827],{"id":4826},"gradient-text-effect","Gradient Text Effect",[766,4829,4830,5103],{},[769,4831,4832],{"icon":771,"label":290},[773,4833,4835],{"className":775,"code":4834,"filename":777,"language":778,"meta":779,"style":779},"import { styleframe } from \"styleframe\";\nimport { useBackgroundImageUtility, useBackgroundClipUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { selector } = s;\n\nuseBackgroundImageUtility(s, {\n    'gradient-rainbow': 'linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff)',\n});\n\nuseBackgroundClipUtility(s, {\n    text: 'text',\n});\n\n\u002F\u002F Create a reusable gradient text class\nselector('.gradient-text', {\n    backgroundImage: 'linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff)',\n    backgroundClip: 'text',\n    WebkitBackgroundClip: 'text',\n    color: 'transparent',\n});\n\nexport default s;\n",[702,4836,4837,4857,4881,4885,4899,4916,4920,4930,4950,4958,4962,4972,4986,4994,4998,5003,5021,5036,5051,5066,5081,5089,5093],{"__ignoreMap":779},[783,4838,4839,4841,4843,4845,4847,4849,4851,4853,4855],{"class":785,"line":786},[783,4840,790],{"class":789},[783,4842,794],{"class":793},[783,4844,798],{"class":797},[783,4846,801],{"class":793},[783,4848,804],{"class":789},[783,4850,807],{"class":793},[783,4852,811],{"class":810},[783,4854,814],{"class":793},[783,4856,817],{"class":793},[783,4858,4859,4861,4863,4865,4867,4869,4871,4873,4875,4877,4879],{"class":785,"line":820},[783,4860,790],{"class":789},[783,4862,794],{"class":793},[783,4864,1635],{"class":797},[783,4866,935],{"class":793},[783,4868,3616],{"class":797},[783,4870,801],{"class":793},[783,4872,804],{"class":789},[783,4874,807],{"class":793},[783,4876,836],{"class":810},[783,4878,814],{"class":793},[783,4880,817],{"class":793},[783,4882,4883],{"class":785,"line":843},[783,4884,868],{"emptyLinePlaceholder":223},[783,4886,4887,4889,4891,4893,4895,4897],{"class":785,"line":865},[783,4888,875],{"class":874},[783,4890,878],{"class":797},[783,4892,881],{"class":793},[783,4894,798],{"class":884},[783,4896,887],{"class":797},[783,4898,817],{"class":793},[783,4900,4901,4903,4905,4908,4910,4912,4914],{"class":785,"line":871},[783,4902,875],{"class":874},[783,4904,794],{"class":793},[783,4906,4907],{"class":797}," selector ",[783,4909,902],{"class":793},[783,4911,905],{"class":793},[783,4913,908],{"class":797},[783,4915,817],{"class":793},[783,4917,4918],{"class":785,"line":892},[783,4919,868],{"emptyLinePlaceholder":223},[783,4921,4922,4924,4926,4928],{"class":785,"line":913},[783,4923,1591],{"class":884},[783,4925,947],{"class":797},[783,4927,935],{"class":793},[783,4929,952],{"class":793},[783,4931,4932,4934,4937,4939,4941,4943,4946,4948],{"class":785,"line":918},[783,4933,1700],{"class":793},[783,4935,4936],{"class":958},"gradient-rainbow",[783,4938,971],{"class":793},[783,4940,962],{"class":793},[783,4942,965],{"class":793},[783,4944,4945],{"class":810},"linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff)",[783,4947,971],{"class":793},[783,4949,974],{"class":793},[783,4951,4952,4954,4956],{"class":785,"line":925},[783,4953,902],{"class":793},[783,4955,1005],{"class":797},[783,4957,817],{"class":793},[783,4959,4960],{"class":785,"line":955},[783,4961,868],{"emptyLinePlaceholder":223},[783,4963,4964,4966,4968,4970],{"class":785,"line":977},[783,4965,3572],{"class":884},[783,4967,947],{"class":797},[783,4969,935],{"class":793},[783,4971,952],{"class":793},[783,4973,4974,4976,4978,4980,4982,4984],{"class":785,"line":994},[783,4975,3713],{"class":958},[783,4977,962],{"class":793},[783,4979,965],{"class":793},[783,4981,3720],{"class":810},[783,4983,971],{"class":793},[783,4985,974],{"class":793},[783,4987,4988,4990,4992],{"class":785,"line":1010},[783,4989,902],{"class":793},[783,4991,1005],{"class":797},[783,4993,817],{"class":793},[783,4995,4996],{"class":785,"line":1015},[783,4997,868],{"emptyLinePlaceholder":223},[783,4999,5000],{"class":785,"line":1021},[783,5001,5002],{"class":921},"\u002F\u002F Create a reusable gradient text class\n",[783,5004,5005,5008,5010,5012,5015,5017,5019],{"class":785,"line":1032},[783,5006,5007],{"class":884},"selector",[783,5009,1202],{"class":797},[783,5011,971],{"class":793},[783,5013,5014],{"class":810},".gradient-text",[783,5016,971],{"class":793},[783,5018,935],{"class":793},[783,5020,952],{"class":793},[783,5022,5023,5026,5028,5030,5032,5034],{"class":785,"line":1049},[783,5024,5025],{"class":958},"    backgroundImage",[783,5027,962],{"class":793},[783,5029,965],{"class":793},[783,5031,4945],{"class":810},[783,5033,971],{"class":793},[783,5035,974],{"class":793},[783,5037,5038,5041,5043,5045,5047,5049],{"class":785,"line":1066},[783,5039,5040],{"class":958},"    backgroundClip",[783,5042,962],{"class":793},[783,5044,965],{"class":793},[783,5046,3720],{"class":810},[783,5048,971],{"class":793},[783,5050,974],{"class":793},[783,5052,5053,5056,5058,5060,5062,5064],{"class":785,"line":1083},[783,5054,5055],{"class":958},"    WebkitBackgroundClip",[783,5057,962],{"class":793},[783,5059,965],{"class":793},[783,5061,3720],{"class":810},[783,5063,971],{"class":793},[783,5065,974],{"class":793},[783,5067,5068,5071,5073,5075,5077,5079],{"class":785,"line":1098},[783,5069,5070],{"class":958},"    color",[783,5072,962],{"class":793},[783,5074,965],{"class":793},[783,5076,1076],{"class":810},[783,5078,971],{"class":793},[783,5080,974],{"class":793},[783,5082,5083,5085,5087],{"class":785,"line":1112},[783,5084,902],{"class":793},[783,5086,1005],{"class":797},[783,5088,817],{"class":793},[783,5090,5091],{"class":785,"line":1129},[783,5092,868],{"emptyLinePlaceholder":223},[783,5094,5095,5097,5099,5101],{"class":785,"line":1146},[783,5096,1163],{"class":789},[783,5098,1166],{"class":789},[783,5100,908],{"class":797},[783,5102,817],{"class":793},[769,5104,5105],{"icon":154,"label":326},[773,5106,5108],{"className":1175,"code":5107,"filename":1177,"language":1178,"meta":779,"style":779},"._background-image\\:gradient-rainbow {\n    background-image: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);\n}\n\n._background-clip\\:text { background-clip: text; }\n\n.gradient-text {\n    background-image: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);\n    background-clip: text;\n    -webkit-background-clip: text;\n    color: transparent;\n}\n",[702,5109,5110,5122,5180,5184,5188,5210,5214,5223,5273,5284,5295,5305],{"__ignoreMap":779},[783,5111,5112,5114,5116,5118,5120],{"class":785,"line":786},[783,5113,1261],{"class":793},[783,5115,1772],{"class":1264},[783,5117,1268],{"class":797},[783,5119,4936],{"class":1264},[783,5121,952],{"class":793},[783,5123,5124,5127,5129,5131,5133,5136,5138,5140,5143,5145,5147,5150,5152,5154,5157,5159,5161,5164,5166,5168,5171,5173,5175,5178],{"class":785,"line":820},[783,5125,5126],{"class":1275},"    background-image",[783,5128,962],{"class":793},[783,5130,1809],{"class":884},[783,5132,1202],{"class":793},[783,5134,5135],{"class":1205},"90deg",[783,5137,935],{"class":793},[783,5139,1412],{"class":793},[783,5141,5142],{"class":797},"ff0000",[783,5144,935],{"class":793},[783,5146,1412],{"class":793},[783,5148,5149],{"class":797},"ff7f00",[783,5151,935],{"class":793},[783,5153,1412],{"class":793},[783,5155,5156],{"class":797},"ffff00",[783,5158,935],{"class":793},[783,5160,1412],{"class":793},[783,5162,5163],{"class":797},"00ff00",[783,5165,935],{"class":793},[783,5167,1412],{"class":793},[783,5169,5170],{"class":797},"0000ff",[783,5172,935],{"class":793},[783,5174,1412],{"class":793},[783,5176,5177],{"class":797},"8b00ff",[783,5179,1221],{"class":793},[783,5181,5182],{"class":785,"line":843},[783,5183,1252],{"class":793},[783,5185,5186],{"class":785,"line":865},[783,5187,868],{"emptyLinePlaceholder":223},[783,5189,5190,5192,5194,5196,5198,5200,5202,5204,5206,5208],{"class":785,"line":871},[783,5191,1261],{"class":793},[783,5193,3760],{"class":1264},[783,5195,1268],{"class":797},[783,5197,3720],{"class":1264},[783,5199,794],{"class":793},[783,5201,3770],{"class":1275},[783,5203,962],{"class":793},[783,5205,3846],{"class":797},[783,5207,1284],{"class":793},[783,5209,1287],{"class":793},[783,5211,5212],{"class":785,"line":892},[783,5213,868],{"emptyLinePlaceholder":223},[783,5215,5216,5218,5221],{"class":785,"line":913},[783,5217,1261],{"class":793},[783,5219,5220],{"class":1264},"gradient-text",[783,5222,952],{"class":793},[783,5224,5225,5227,5229,5231,5233,5235,5237,5239,5241,5243,5245,5247,5249,5251,5253,5255,5257,5259,5261,5263,5265,5267,5269,5271],{"class":785,"line":918},[783,5226,5126],{"class":1275},[783,5228,962],{"class":793},[783,5230,1809],{"class":884},[783,5232,1202],{"class":793},[783,5234,5135],{"class":1205},[783,5236,935],{"class":793},[783,5238,1412],{"class":793},[783,5240,5142],{"class":797},[783,5242,935],{"class":793},[783,5244,1412],{"class":793},[783,5246,5149],{"class":797},[783,5248,935],{"class":793},[783,5250,1412],{"class":793},[783,5252,5156],{"class":797},[783,5254,935],{"class":793},[783,5256,1412],{"class":793},[783,5258,5163],{"class":797},[783,5260,935],{"class":793},[783,5262,1412],{"class":793},[783,5264,5170],{"class":797},[783,5266,935],{"class":793},[783,5268,1412],{"class":793},[783,5270,5177],{"class":797},[783,5272,1221],{"class":793},[783,5274,5275,5278,5280,5282],{"class":785,"line":925},[783,5276,5277],{"class":1275},"    background-clip",[783,5279,962],{"class":793},[783,5281,3846],{"class":797},[783,5283,817],{"class":793},[783,5285,5286,5289,5291,5293],{"class":785,"line":955},[783,5287,5288],{"class":1264},"    -webkit-background-clip",[783,5290,962],{"class":793},[783,5292,3846],{"class":797},[783,5294,817],{"class":793},[783,5296,5297,5299,5301,5303],{"class":785,"line":977},[783,5298,5070],{"class":1275},[783,5300,962],{"class":793},[783,5302,1330],{"class":797},[783,5304,817],{"class":793},[783,5306,5307],{"class":785,"line":994},[783,5308,1252],{"class":793},[707,5310,5312],{"id":5311},"best-practices","Best Practices",[722,5314,5315,5324,5330,5336,5346,5355],{},[725,5316,5317,5320,5321,5323],{},[692,5318,5319],{},"Use design tokens for colors",": Reference your color system with ",[702,5322,733],{}," for consistent backgrounds",[725,5325,5326,5329],{},[692,5327,5328],{},"Optimize background images",": Use appropriate image formats and sizes for performance",[725,5331,5332,5335],{},[692,5333,5334],{},"Consider accessibility",": Ensure sufficient contrast between backgrounds and foreground content",[725,5337,5338,5341,5342,5345],{},[692,5339,5340],{},"Use cover for hero images",": ",[702,5343,5344],{},"background-size: cover"," is usually best for full-width hero sections",[725,5347,5348,5341,5351,5354],{},[692,5349,5350],{},"Test fixed attachments on mobile",[702,5352,5353],{},"background-attachment: fixed"," can cause issues on some mobile browsers",[725,5356,5357,5360],{},[692,5358,5359],{},"Prefer CSS gradients",": Use CSS gradients instead of image files when possible for better performance",[707,5362,5364],{"id":5363},"faq","FAQ",[5366,5367,5368,5383,5387,5391],"accordion",{},[5369,5370,5373,5374,5376,5377,5379,5380,5382],"accordion-item",{"icon":5371,"label":5372},"i-lucide-circle-help","How do I create responsive background images?","Combine ",[702,5375,1944],{}," with responsive modifiers. Use ",[702,5378,2094],{}," for full-bleed images that scale to fill their container, or ",[702,5381,2118],{}," when you need to show the entire image without cropping.",[5369,5384,5386],{"icon":5371,"label":5385},"Can I use CSS variables in background-image?","Yes, but with some limitations. CSS variables work well for solid colors and gradients. For image URLs, you'll typically want to define them directly in the utility values.",[5369,5388,5390],{"icon":5371,"label":5389},"How do I layer multiple backgrounds?","CSS supports multiple backgrounds using comma-separated values. Create utilities for each layer and combine them with a selector, or define combined backgrounds in a single utility value.",[5369,5392,5394,5397,5398,5401,5402,1261],{"icon":5371,"label":5393},"What's the difference between background-clip and background-origin?",[702,5395,5396],{},"background-origin"," defines where the background image starts (its origin point), while ",[702,5399,5400],{},"background-clip"," defines where the background is visible (its clipping area). For gradient text effects, you need ",[702,5403,3938],{},[5405,5406,5407],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":779,"searchDepth":820,"depth":820,"links":5409},[5410,5411,5412,5413,5414,5417,5420,5421,5424,5425,5426,5430,5431],{"id":709,"depth":820,"text":78},{"id":716,"depth":820,"text":717},{"id":754,"depth":820,"text":757},{"id":1588,"depth":820,"text":1591},{"id":1941,"depth":820,"text":1944,"children":5415},[5416],{"id":2198,"depth":843,"text":2199},{"id":2264,"depth":820,"text":2267,"children":5418},[5419],{"id":2689,"depth":843,"text":2199},{"id":2827,"depth":820,"text":2830},{"id":3258,"depth":820,"text":3261,"children":5422},[5423],{"id":3513,"depth":843,"text":2199},{"id":3569,"depth":820,"text":3572},{"id":3942,"depth":820,"text":3945},{"id":4238,"depth":820,"text":4239,"children":5427},[5428,5429],{"id":4242,"depth":843,"text":4243},{"id":4826,"depth":843,"text":4827},{"id":5311,"depth":820,"text":5312},{"id":5363,"depth":820,"text":5364},"Create background utilities for colors, images, sizing, positioning, and more with full type safety.","md",null,{},{"title":578,"icon":303},{"title":684,"description":5432},"KvMB7jTZPJjMCWRCbi2f3IU-Y8RuQ7WVx4gL1irnpMY",[5440,5442],{"title":573,"path":574,"stem":575,"description":5441,"icon":576,"children":-1},"Create animation utilities for continuous motion effects and keyframe-based animations with full type safety.",{"title":180,"path":582,"stem":583,"description":5443,"icon":183,"children":-1},"Create border utilities for colors, widths, radiuses, styles, outlines, and focus rings with full type safety.",1781596350650]