[{"data":1,"prerenderedAt":6449},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-effects":682,"-docs-theme-utilities-effects-surround":6444},{"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":6438,"extension":1329,"links":6439,"meta":6440,"navigation":6441,"path":586,"seo":6442,"stem":587,"__hash__":6443},"docs_theme\u002Fdocs\u002Ftheme\u002Futilities\u002F06.effects.md","Effects Utilities",{"type":686,"value":687,"toc":6422},"minimark",[688,706,710,714,718,721,749,755,762,2140,2150,2156,2162,2539,2545,2551,3395,3401,3407,3836,3842,3848,4704,4710,4716,5096,5100,5105,5880,5883,5931,5935,6215,6217,6335,6339,6377,6381,6418],[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",{},"Effect utilities help you apply visual effects to elements including box shadows, text shadows, opacity, and blend modes. These utilities create depth, hierarchy, and visual interest in your designs.",[707,715,717],{"id":716},"why-use-effect-utilities","Why Use Effect Utilities?",[711,719,720],{},"Effect utilities help you:",[722,723,724,731,737,743],"ul",{},[725,726,727,730],"li",{},[692,728,729],{},"Create visual hierarchy",": Use shadows to indicate elevation and depth",[725,732,733,736],{},[692,734,735],{},"Control transparency",": Manage element opacity for overlays and fades",[725,738,739,742],{},[692,740,741],{},"Apply blend effects",": Mix colors and images with blend modes",[725,744,745,748],{},[692,746,747],{},"Integrate with design tokens",": Define consistent shadow values across your application",[707,750,752],{"id":751},"useboxshadowutility",[702,753,754],{},"useBoxShadowUtility",[711,756,757,758,761],{},"The ",[702,759,760],{},"useBoxShadowUtility()"," function creates utility classes for applying box shadows.",[763,764,765,1060,2012],"tabs",{},[766,767,769],"tabs-item",{"icon":768,"label":290},"i-lucide-code",[770,771,777],"pre",{"className":772,"code":773,"filename":774,"language":775,"meta":776,"style":776},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useBoxShadowUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseBoxShadowUtility(s, {\n    sm: '0 1px 2px 0 rgb(0 0 0 \u002F 0.05)',\n    default: '0 1px 3px 0 rgb(0 0 0 \u002F 0.1), 0 1px 2px -1px rgb(0 0 0 \u002F 0.1)',\n    md: '0 4px 6px -1px rgb(0 0 0 \u002F 0.1), 0 2px 4px -2px rgb(0 0 0 \u002F 0.1)',\n    lg: '0 10px 15px -3px rgb(0 0 0 \u002F 0.1), 0 4px 6px -4px rgb(0 0 0 \u002F 0.1)',\n    xl: '0 20px 25px -5px rgb(0 0 0 \u002F 0.1), 0 8px 10px -6px rgb(0 0 0 \u002F 0.1)',\n    '2xl': '0 25px 50px -12px rgb(0 0 0 \u002F 0.25)',\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 \u002F 0.05)',\n    none: 'none',\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[702,778,779,815,838,844,865,870,884,906,923,940,957,974,996,1013,1030,1041,1046],{"__ignoreMap":776},[780,781,784,788,792,796,799,802,805,809,812],"span",{"class":782,"line":783},"line",1,[780,785,787],{"class":786},"s7zQu","import",[780,789,791],{"class":790},"sMK4o"," {",[780,793,795],{"class":794},"sTEyZ"," styleframe",[780,797,798],{"class":790}," }",[780,800,801],{"class":786}," from",[780,803,804],{"class":790}," \"",[780,806,808],{"class":807},"sfazB","styleframe",[780,810,811],{"class":790},"\"",[780,813,814],{"class":790},";\n",[780,816,818,820,822,825,827,829,831,834,836],{"class":782,"line":817},2,[780,819,787],{"class":786},[780,821,791],{"class":790},[780,823,824],{"class":794}," useBoxShadowUtility",[780,826,798],{"class":790},[780,828,801],{"class":786},[780,830,804],{"class":790},[780,832,833],{"class":807},"@styleframe\u002Ftheme",[780,835,811],{"class":790},[780,837,814],{"class":790},[780,839,841],{"class":782,"line":840},3,[780,842,843],{"emptyLinePlaceholder":223},"\n",[780,845,847,851,854,857,860,863],{"class":782,"line":846},4,[780,848,850],{"class":849},"spNyl","const",[780,852,853],{"class":794}," s ",[780,855,856],{"class":790},"=",[780,858,795],{"class":859},"s2Zo4",[780,861,862],{"class":794},"()",[780,864,814],{"class":790},[780,866,868],{"class":782,"line":867},5,[780,869,843],{"emptyLinePlaceholder":223},[780,871,873,875,878,881],{"class":782,"line":872},6,[780,874,754],{"class":859},[780,876,877],{"class":794},"(s",[780,879,880],{"class":790},",",[780,882,883],{"class":790}," {\n",[780,885,887,891,894,897,900,903],{"class":782,"line":886},7,[780,888,890],{"class":889},"swJcz","    sm",[780,892,893],{"class":790},":",[780,895,896],{"class":790}," '",[780,898,899],{"class":807},"0 1px 2px 0 rgb(0 0 0 \u002F 0.05)",[780,901,902],{"class":790},"'",[780,904,905],{"class":790},",\n",[780,907,909,912,914,916,919,921],{"class":782,"line":908},8,[780,910,911],{"class":889},"    default",[780,913,893],{"class":790},[780,915,896],{"class":790},[780,917,918],{"class":807},"0 1px 3px 0 rgb(0 0 0 \u002F 0.1), 0 1px 2px -1px rgb(0 0 0 \u002F 0.1)",[780,920,902],{"class":790},[780,922,905],{"class":790},[780,924,926,929,931,933,936,938],{"class":782,"line":925},9,[780,927,928],{"class":889},"    md",[780,930,893],{"class":790},[780,932,896],{"class":790},[780,934,935],{"class":807},"0 4px 6px -1px rgb(0 0 0 \u002F 0.1), 0 2px 4px -2px rgb(0 0 0 \u002F 0.1)",[780,937,902],{"class":790},[780,939,905],{"class":790},[780,941,943,946,948,950,953,955],{"class":782,"line":942},10,[780,944,945],{"class":889},"    lg",[780,947,893],{"class":790},[780,949,896],{"class":790},[780,951,952],{"class":807},"0 10px 15px -3px rgb(0 0 0 \u002F 0.1), 0 4px 6px -4px rgb(0 0 0 \u002F 0.1)",[780,954,902],{"class":790},[780,956,905],{"class":790},[780,958,960,963,965,967,970,972],{"class":782,"line":959},11,[780,961,962],{"class":889},"    xl",[780,964,893],{"class":790},[780,966,896],{"class":790},[780,968,969],{"class":807},"0 20px 25px -5px rgb(0 0 0 \u002F 0.1), 0 8px 10px -6px rgb(0 0 0 \u002F 0.1)",[780,971,902],{"class":790},[780,973,905],{"class":790},[780,975,977,980,983,985,987,989,992,994],{"class":782,"line":976},12,[780,978,979],{"class":790},"    '",[780,981,982],{"class":889},"2xl",[780,984,902],{"class":790},[780,986,893],{"class":790},[780,988,896],{"class":790},[780,990,991],{"class":807},"0 25px 50px -12px rgb(0 0 0 \u002F 0.25)",[780,993,902],{"class":790},[780,995,905],{"class":790},[780,997,999,1002,1004,1006,1009,1011],{"class":782,"line":998},13,[780,1000,1001],{"class":889},"    inner",[780,1003,893],{"class":790},[780,1005,896],{"class":790},[780,1007,1008],{"class":807},"inset 0 2px 4px 0 rgb(0 0 0 \u002F 0.05)",[780,1010,902],{"class":790},[780,1012,905],{"class":790},[780,1014,1016,1019,1021,1023,1026,1028],{"class":782,"line":1015},14,[780,1017,1018],{"class":889},"    none",[780,1020,893],{"class":790},[780,1022,896],{"class":790},[780,1024,1025],{"class":807},"none",[780,1027,902],{"class":790},[780,1029,905],{"class":790},[780,1031,1033,1036,1039],{"class":782,"line":1032},15,[780,1034,1035],{"class":790},"}",[780,1037,1038],{"class":794},")",[780,1040,814],{"class":790},[780,1042,1044],{"class":782,"line":1043},16,[780,1045,843],{"emptyLinePlaceholder":223},[780,1047,1049,1052,1055,1058],{"class":782,"line":1048},17,[780,1050,1051],{"class":786},"export",[780,1053,1054],{"class":786}," default",[780,1056,1057],{"class":794}," s",[780,1059,814],{"class":790},[766,1061,1062],{"icon":154,"label":326},[770,1063,1068],{"className":1064,"code":1065,"filename":1066,"language":1067,"meta":776,"style":776},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._box-shadow\\:sm {\n    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 \u002F 0.05);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow {\n    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 \u002F 0.1), 0 1px 2px -1px rgb(0 0 0 \u002F 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:md {\n    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 \u002F 0.1), 0 2px 4px -2px rgb(0 0 0 \u002F 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:lg {\n    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 \u002F 0.1), 0 4px 6px -4px rgb(0 0 0 \u002F 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:xl {\n    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 \u002F 0.1), 0 8px 10px -6px rgb(0 0 0 \u002F 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:2xl {\n    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 \u002F 0.25);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:inner {\n    --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 \u002F 0.05);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:none {\n    --tw-shadow: none;\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n","styleframe\u002Findex.css","css",[702,1069,1070,1087,1128,1187,1192,1196,1204,1261,1311,1315,1319,1332,1389,1439,1443,1447,1460,1518,1569,1574,1579,1593,1653,1704,1709,1714,1727,1761,1812,1817,1822,1836,1870,1921,1926,1931,1944,1956,2007],{"__ignoreMap":776},[780,1071,1072,1075,1079,1082,1085],{"class":782,"line":783},[780,1073,1074],{"class":790},".",[780,1076,1078],{"class":1077},"sBMFI","_box-shadow",[780,1080,1081],{"class":794},"\\:",[780,1083,1084],{"class":1077},"sm",[780,1086,883],{"class":790},[780,1088,1089,1092,1094,1098,1101,1104,1106,1109,1112,1115,1117,1119,1122,1125],{"class":782,"line":817},[780,1090,1091],{"class":794},"    --tw-shadow",[780,1093,893],{"class":790},[780,1095,1097],{"class":1096},"sbssI"," 0",[780,1099,1100],{"class":1096}," 1px",[780,1102,1103],{"class":1096}," 2px",[780,1105,1097],{"class":1096},[780,1107,1108],{"class":859}," rgb",[780,1110,1111],{"class":790},"(",[780,1113,1114],{"class":1096},"0",[780,1116,1097],{"class":1096},[780,1118,1097],{"class":1096},[780,1120,1121],{"class":794}," \u002F ",[780,1123,1124],{"class":1096},"0.05",[780,1126,1127],{"class":790},");\n",[780,1129,1130,1134,1136,1139,1141,1144,1146,1148,1150,1153,1156,1159,1161,1163,1166,1168,1170,1172,1174,1176,1178,1180,1182,1185],{"class":782,"line":840},[780,1131,1133],{"class":1132},"sqsOY","    box-shadow",[780,1135,893],{"class":790},[780,1137,1138],{"class":859}," var",[780,1140,1111],{"class":790},[780,1142,1143],{"class":794},"--tw-ring-offset-shadow",[780,1145,880],{"class":790},[780,1147,1097],{"class":1096},[780,1149,1097],{"class":1096},[780,1151,1152],{"class":790}," #",[780,1154,1155],{"class":794},"0000",[780,1157,1158],{"class":790},"),",[780,1160,1138],{"class":859},[780,1162,1111],{"class":790},[780,1164,1165],{"class":794},"--tw-ring-shadow",[780,1167,880],{"class":790},[780,1169,1097],{"class":1096},[780,1171,1097],{"class":1096},[780,1173,1152],{"class":790},[780,1175,1155],{"class":794},[780,1177,1158],{"class":790},[780,1179,1138],{"class":859},[780,1181,1111],{"class":790},[780,1183,1184],{"class":794},"--tw-shadow",[780,1186,1127],{"class":790},[780,1188,1189],{"class":782,"line":846},[780,1190,1191],{"class":790},"}\n",[780,1193,1194],{"class":782,"line":867},[780,1195,843],{"emptyLinePlaceholder":223},[780,1197,1198,1200,1202],{"class":782,"line":872},[780,1199,1074],{"class":790},[780,1201,1078],{"class":1077},[780,1203,883],{"class":790},[780,1205,1206,1208,1210,1212,1214,1217,1219,1221,1223,1225,1227,1229,1231,1234,1236,1238,1240,1242,1245,1247,1249,1251,1253,1255,1257,1259],{"class":782,"line":886},[780,1207,1091],{"class":794},[780,1209,893],{"class":790},[780,1211,1097],{"class":1096},[780,1213,1100],{"class":1096},[780,1215,1216],{"class":1096}," 3px",[780,1218,1097],{"class":1096},[780,1220,1108],{"class":859},[780,1222,1111],{"class":790},[780,1224,1114],{"class":1096},[780,1226,1097],{"class":1096},[780,1228,1097],{"class":1096},[780,1230,1121],{"class":794},[780,1232,1233],{"class":1096},"0.1",[780,1235,1158],{"class":790},[780,1237,1097],{"class":1096},[780,1239,1100],{"class":1096},[780,1241,1103],{"class":1096},[780,1243,1244],{"class":1096}," -1px",[780,1246,1108],{"class":859},[780,1248,1111],{"class":790},[780,1250,1114],{"class":1096},[780,1252,1097],{"class":1096},[780,1254,1097],{"class":1096},[780,1256,1121],{"class":794},[780,1258,1233],{"class":1096},[780,1260,1127],{"class":790},[780,1262,1263,1265,1267,1269,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309],{"class":782,"line":908},[780,1264,1133],{"class":1132},[780,1266,893],{"class":790},[780,1268,1138],{"class":859},[780,1270,1111],{"class":790},[780,1272,1143],{"class":794},[780,1274,880],{"class":790},[780,1276,1097],{"class":1096},[780,1278,1097],{"class":1096},[780,1280,1152],{"class":790},[780,1282,1155],{"class":794},[780,1284,1158],{"class":790},[780,1286,1138],{"class":859},[780,1288,1111],{"class":790},[780,1290,1165],{"class":794},[780,1292,880],{"class":790},[780,1294,1097],{"class":1096},[780,1296,1097],{"class":1096},[780,1298,1152],{"class":790},[780,1300,1155],{"class":794},[780,1302,1158],{"class":790},[780,1304,1138],{"class":859},[780,1306,1111],{"class":790},[780,1308,1184],{"class":794},[780,1310,1127],{"class":790},[780,1312,1313],{"class":782,"line":925},[780,1314,1191],{"class":790},[780,1316,1317],{"class":782,"line":942},[780,1318,843],{"emptyLinePlaceholder":223},[780,1320,1321,1323,1325,1327,1330],{"class":782,"line":959},[780,1322,1074],{"class":790},[780,1324,1078],{"class":1077},[780,1326,1081],{"class":794},[780,1328,1329],{"class":1077},"md",[780,1331,883],{"class":790},[780,1333,1334,1336,1338,1340,1343,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1366,1368,1370,1373,1375,1377,1379,1381,1383,1385,1387],{"class":782,"line":976},[780,1335,1091],{"class":794},[780,1337,893],{"class":790},[780,1339,1097],{"class":1096},[780,1341,1342],{"class":1096}," 4px",[780,1344,1345],{"class":1096}," 6px",[780,1347,1244],{"class":1096},[780,1349,1108],{"class":859},[780,1351,1111],{"class":790},[780,1353,1114],{"class":1096},[780,1355,1097],{"class":1096},[780,1357,1097],{"class":1096},[780,1359,1121],{"class":794},[780,1361,1233],{"class":1096},[780,1363,1158],{"class":790},[780,1365,1097],{"class":1096},[780,1367,1103],{"class":1096},[780,1369,1342],{"class":1096},[780,1371,1372],{"class":1096}," -2px",[780,1374,1108],{"class":859},[780,1376,1111],{"class":790},[780,1378,1114],{"class":1096},[780,1380,1097],{"class":1096},[780,1382,1097],{"class":1096},[780,1384,1121],{"class":794},[780,1386,1233],{"class":1096},[780,1388,1127],{"class":790},[780,1390,1391,1393,1395,1397,1399,1401,1403,1405,1407,1409,1411,1413,1415,1417,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437],{"class":782,"line":998},[780,1392,1133],{"class":1132},[780,1394,893],{"class":790},[780,1396,1138],{"class":859},[780,1398,1111],{"class":790},[780,1400,1143],{"class":794},[780,1402,880],{"class":790},[780,1404,1097],{"class":1096},[780,1406,1097],{"class":1096},[780,1408,1152],{"class":790},[780,1410,1155],{"class":794},[780,1412,1158],{"class":790},[780,1414,1138],{"class":859},[780,1416,1111],{"class":790},[780,1418,1165],{"class":794},[780,1420,880],{"class":790},[780,1422,1097],{"class":1096},[780,1424,1097],{"class":1096},[780,1426,1152],{"class":790},[780,1428,1155],{"class":794},[780,1430,1158],{"class":790},[780,1432,1138],{"class":859},[780,1434,1111],{"class":790},[780,1436,1184],{"class":794},[780,1438,1127],{"class":790},[780,1440,1441],{"class":782,"line":1015},[780,1442,1191],{"class":790},[780,1444,1445],{"class":782,"line":1032},[780,1446,843],{"emptyLinePlaceholder":223},[780,1448,1449,1451,1453,1455,1458],{"class":782,"line":1043},[780,1450,1074],{"class":790},[780,1452,1078],{"class":1077},[780,1454,1081],{"class":794},[780,1456,1457],{"class":1077},"lg",[780,1459,883],{"class":790},[780,1461,1462,1464,1466,1468,1471,1474,1477,1479,1481,1483,1485,1487,1489,1491,1493,1495,1497,1499,1502,1504,1506,1508,1510,1512,1514,1516],{"class":782,"line":1048},[780,1463,1091],{"class":794},[780,1465,893],{"class":790},[780,1467,1097],{"class":1096},[780,1469,1470],{"class":1096}," 10px",[780,1472,1473],{"class":1096}," 15px",[780,1475,1476],{"class":1096}," -3px",[780,1478,1108],{"class":859},[780,1480,1111],{"class":790},[780,1482,1114],{"class":1096},[780,1484,1097],{"class":1096},[780,1486,1097],{"class":1096},[780,1488,1121],{"class":794},[780,1490,1233],{"class":1096},[780,1492,1158],{"class":790},[780,1494,1097],{"class":1096},[780,1496,1342],{"class":1096},[780,1498,1345],{"class":1096},[780,1500,1501],{"class":1096}," -4px",[780,1503,1108],{"class":859},[780,1505,1111],{"class":790},[780,1507,1114],{"class":1096},[780,1509,1097],{"class":1096},[780,1511,1097],{"class":1096},[780,1513,1121],{"class":794},[780,1515,1233],{"class":1096},[780,1517,1127],{"class":790},[780,1519,1521,1523,1525,1527,1529,1531,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551,1553,1555,1557,1559,1561,1563,1565,1567],{"class":782,"line":1520},18,[780,1522,1133],{"class":1132},[780,1524,893],{"class":790},[780,1526,1138],{"class":859},[780,1528,1111],{"class":790},[780,1530,1143],{"class":794},[780,1532,880],{"class":790},[780,1534,1097],{"class":1096},[780,1536,1097],{"class":1096},[780,1538,1152],{"class":790},[780,1540,1155],{"class":794},[780,1542,1158],{"class":790},[780,1544,1138],{"class":859},[780,1546,1111],{"class":790},[780,1548,1165],{"class":794},[780,1550,880],{"class":790},[780,1552,1097],{"class":1096},[780,1554,1097],{"class":1096},[780,1556,1152],{"class":790},[780,1558,1155],{"class":794},[780,1560,1158],{"class":790},[780,1562,1138],{"class":859},[780,1564,1111],{"class":790},[780,1566,1184],{"class":794},[780,1568,1127],{"class":790},[780,1570,1572],{"class":782,"line":1571},19,[780,1573,1191],{"class":790},[780,1575,1577],{"class":782,"line":1576},20,[780,1578,843],{"emptyLinePlaceholder":223},[780,1580,1582,1584,1586,1588,1591],{"class":782,"line":1581},21,[780,1583,1074],{"class":790},[780,1585,1078],{"class":1077},[780,1587,1081],{"class":794},[780,1589,1590],{"class":1077},"xl",[780,1592,883],{"class":790},[780,1594,1596,1598,1600,1602,1605,1608,1611,1613,1615,1617,1619,1621,1623,1625,1627,1629,1632,1634,1637,1639,1641,1643,1645,1647,1649,1651],{"class":782,"line":1595},22,[780,1597,1091],{"class":794},[780,1599,893],{"class":790},[780,1601,1097],{"class":1096},[780,1603,1604],{"class":1096}," 20px",[780,1606,1607],{"class":1096}," 25px",[780,1609,1610],{"class":1096}," -5px",[780,1612,1108],{"class":859},[780,1614,1111],{"class":790},[780,1616,1114],{"class":1096},[780,1618,1097],{"class":1096},[780,1620,1097],{"class":1096},[780,1622,1121],{"class":794},[780,1624,1233],{"class":1096},[780,1626,1158],{"class":790},[780,1628,1097],{"class":1096},[780,1630,1631],{"class":1096}," 8px",[780,1633,1470],{"class":1096},[780,1635,1636],{"class":1096}," -6px",[780,1638,1108],{"class":859},[780,1640,1111],{"class":790},[780,1642,1114],{"class":1096},[780,1644,1097],{"class":1096},[780,1646,1097],{"class":1096},[780,1648,1121],{"class":794},[780,1650,1233],{"class":1096},[780,1652,1127],{"class":790},[780,1654,1656,1658,1660,1662,1664,1666,1668,1670,1672,1674,1676,1678,1680,1682,1684,1686,1688,1690,1692,1694,1696,1698,1700,1702],{"class":782,"line":1655},23,[780,1657,1133],{"class":1132},[780,1659,893],{"class":790},[780,1661,1138],{"class":859},[780,1663,1111],{"class":790},[780,1665,1143],{"class":794},[780,1667,880],{"class":790},[780,1669,1097],{"class":1096},[780,1671,1097],{"class":1096},[780,1673,1152],{"class":790},[780,1675,1155],{"class":794},[780,1677,1158],{"class":790},[780,1679,1138],{"class":859},[780,1681,1111],{"class":790},[780,1683,1165],{"class":794},[780,1685,880],{"class":790},[780,1687,1097],{"class":1096},[780,1689,1097],{"class":1096},[780,1691,1152],{"class":790},[780,1693,1155],{"class":794},[780,1695,1158],{"class":790},[780,1697,1138],{"class":859},[780,1699,1111],{"class":790},[780,1701,1184],{"class":794},[780,1703,1127],{"class":790},[780,1705,1707],{"class":782,"line":1706},24,[780,1708,1191],{"class":790},[780,1710,1712],{"class":782,"line":1711},25,[780,1713,843],{"emptyLinePlaceholder":223},[780,1715,1717,1719,1721,1723,1725],{"class":782,"line":1716},26,[780,1718,1074],{"class":790},[780,1720,1078],{"class":1077},[780,1722,1081],{"class":794},[780,1724,982],{"class":1077},[780,1726,883],{"class":790},[780,1728,1730,1732,1734,1736,1738,1741,1744,1746,1748,1750,1752,1754,1756,1759],{"class":782,"line":1729},27,[780,1731,1091],{"class":794},[780,1733,893],{"class":790},[780,1735,1097],{"class":1096},[780,1737,1607],{"class":1096},[780,1739,1740],{"class":1096}," 50px",[780,1742,1743],{"class":1096}," -12px",[780,1745,1108],{"class":859},[780,1747,1111],{"class":790},[780,1749,1114],{"class":1096},[780,1751,1097],{"class":1096},[780,1753,1097],{"class":1096},[780,1755,1121],{"class":794},[780,1757,1758],{"class":1096},"0.25",[780,1760,1127],{"class":790},[780,1762,1764,1766,1768,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788,1790,1792,1794,1796,1798,1800,1802,1804,1806,1808,1810],{"class":782,"line":1763},28,[780,1765,1133],{"class":1132},[780,1767,893],{"class":790},[780,1769,1138],{"class":859},[780,1771,1111],{"class":790},[780,1773,1143],{"class":794},[780,1775,880],{"class":790},[780,1777,1097],{"class":1096},[780,1779,1097],{"class":1096},[780,1781,1152],{"class":790},[780,1783,1155],{"class":794},[780,1785,1158],{"class":790},[780,1787,1138],{"class":859},[780,1789,1111],{"class":790},[780,1791,1165],{"class":794},[780,1793,880],{"class":790},[780,1795,1097],{"class":1096},[780,1797,1097],{"class":1096},[780,1799,1152],{"class":790},[780,1801,1155],{"class":794},[780,1803,1158],{"class":790},[780,1805,1138],{"class":859},[780,1807,1111],{"class":790},[780,1809,1184],{"class":794},[780,1811,1127],{"class":790},[780,1813,1815],{"class":782,"line":1814},29,[780,1816,1191],{"class":790},[780,1818,1820],{"class":782,"line":1819},30,[780,1821,843],{"emptyLinePlaceholder":223},[780,1823,1825,1827,1829,1831,1834],{"class":782,"line":1824},31,[780,1826,1074],{"class":790},[780,1828,1078],{"class":1077},[780,1830,1081],{"class":794},[780,1832,1833],{"class":1077},"inner",[780,1835,883],{"class":790},[780,1837,1839,1841,1843,1846,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866,1868],{"class":782,"line":1838},32,[780,1840,1091],{"class":794},[780,1842,893],{"class":790},[780,1844,1845],{"class":794}," inset ",[780,1847,1114],{"class":1096},[780,1849,1103],{"class":1096},[780,1851,1342],{"class":1096},[780,1853,1097],{"class":1096},[780,1855,1108],{"class":859},[780,1857,1111],{"class":790},[780,1859,1114],{"class":1096},[780,1861,1097],{"class":1096},[780,1863,1097],{"class":1096},[780,1865,1121],{"class":794},[780,1867,1124],{"class":1096},[780,1869,1127],{"class":790},[780,1871,1873,1875,1877,1879,1881,1883,1885,1887,1889,1891,1893,1895,1897,1899,1901,1903,1905,1907,1909,1911,1913,1915,1917,1919],{"class":782,"line":1872},33,[780,1874,1133],{"class":1132},[780,1876,893],{"class":790},[780,1878,1138],{"class":859},[780,1880,1111],{"class":790},[780,1882,1143],{"class":794},[780,1884,880],{"class":790},[780,1886,1097],{"class":1096},[780,1888,1097],{"class":1096},[780,1890,1152],{"class":790},[780,1892,1155],{"class":794},[780,1894,1158],{"class":790},[780,1896,1138],{"class":859},[780,1898,1111],{"class":790},[780,1900,1165],{"class":794},[780,1902,880],{"class":790},[780,1904,1097],{"class":1096},[780,1906,1097],{"class":1096},[780,1908,1152],{"class":790},[780,1910,1155],{"class":794},[780,1912,1158],{"class":790},[780,1914,1138],{"class":859},[780,1916,1111],{"class":790},[780,1918,1184],{"class":794},[780,1920,1127],{"class":790},[780,1922,1924],{"class":782,"line":1923},34,[780,1925,1191],{"class":790},[780,1927,1929],{"class":782,"line":1928},35,[780,1930,843],{"emptyLinePlaceholder":223},[780,1932,1934,1936,1938,1940,1942],{"class":782,"line":1933},36,[780,1935,1074],{"class":790},[780,1937,1078],{"class":1077},[780,1939,1081],{"class":794},[780,1941,1025],{"class":1077},[780,1943,883],{"class":790},[780,1945,1947,1949,1951,1954],{"class":782,"line":1946},37,[780,1948,1091],{"class":794},[780,1950,893],{"class":790},[780,1952,1953],{"class":794}," none",[780,1955,814],{"class":790},[780,1957,1959,1961,1963,1965,1967,1969,1971,1973,1975,1977,1979,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999,2001,2003,2005],{"class":782,"line":1958},38,[780,1960,1133],{"class":1132},[780,1962,893],{"class":790},[780,1964,1138],{"class":859},[780,1966,1111],{"class":790},[780,1968,1143],{"class":794},[780,1970,880],{"class":790},[780,1972,1097],{"class":1096},[780,1974,1097],{"class":1096},[780,1976,1152],{"class":790},[780,1978,1155],{"class":794},[780,1980,1158],{"class":790},[780,1982,1138],{"class":859},[780,1984,1111],{"class":790},[780,1986,1165],{"class":794},[780,1988,880],{"class":790},[780,1990,1097],{"class":1096},[780,1992,1097],{"class":1096},[780,1994,1152],{"class":790},[780,1996,1155],{"class":794},[780,1998,1158],{"class":790},[780,2000,1138],{"class":859},[780,2002,1111],{"class":790},[780,2004,1184],{"class":794},[780,2006,1127],{"class":790},[780,2008,2010],{"class":782,"line":2009},39,[780,2011,1191],{"class":790},[766,2013,2015],{"icon":520,"label":2014},"Usage",[770,2016,2020],{"className":2017,"code":2018,"language":2019,"meta":776,"style":776},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"_box-shadow:sm\">Subtle shadow\u003C\u002Fdiv>\n\u003Cdiv class=\"_box-shadow:md\">Medium shadow\u003C\u002Fdiv>\n\u003Cdiv class=\"_box-shadow:lg\">Large shadow\u003C\u002Fdiv>\n\u003Cdiv class=\"_box-shadow:inner\">Inset shadow\u003C\u002Fdiv>\n","html",[702,2021,2022,2056,2084,2112],{"__ignoreMap":776},[780,2023,2024,2027,2030,2033,2035,2037,2040,2042,2045,2048,2051,2053],{"class":782,"line":783},[780,2025,2026],{"class":790},"\u003C",[780,2028,2029],{"class":889},"div",[780,2031,2032],{"class":849}," class",[780,2034,856],{"class":790},[780,2036,811],{"class":790},[780,2038,2039],{"class":807},"_box-shadow:sm",[780,2041,811],{"class":790},[780,2043,2044],{"class":790},">",[780,2046,2047],{"class":794},"Subtle shadow",[780,2049,2050],{"class":790},"\u003C\u002F",[780,2052,2029],{"class":889},[780,2054,2055],{"class":790},">\n",[780,2057,2058,2060,2062,2064,2066,2068,2071,2073,2075,2078,2080,2082],{"class":782,"line":817},[780,2059,2026],{"class":790},[780,2061,2029],{"class":889},[780,2063,2032],{"class":849},[780,2065,856],{"class":790},[780,2067,811],{"class":790},[780,2069,2070],{"class":807},"_box-shadow:md",[780,2072,811],{"class":790},[780,2074,2044],{"class":790},[780,2076,2077],{"class":794},"Medium shadow",[780,2079,2050],{"class":790},[780,2081,2029],{"class":889},[780,2083,2055],{"class":790},[780,2085,2086,2088,2090,2092,2094,2096,2099,2101,2103,2106,2108,2110],{"class":782,"line":840},[780,2087,2026],{"class":790},[780,2089,2029],{"class":889},[780,2091,2032],{"class":849},[780,2093,856],{"class":790},[780,2095,811],{"class":790},[780,2097,2098],{"class":807},"_box-shadow:lg",[780,2100,811],{"class":790},[780,2102,2044],{"class":790},[780,2104,2105],{"class":794},"Large shadow",[780,2107,2050],{"class":790},[780,2109,2029],{"class":889},[780,2111,2055],{"class":790},[780,2113,2114,2116,2118,2120,2122,2124,2127,2129,2131,2134,2136,2138],{"class":782,"line":846},[780,2115,2026],{"class":790},[780,2117,2029],{"class":889},[780,2119,2032],{"class":849},[780,2121,856],{"class":790},[780,2123,811],{"class":790},[780,2125,2126],{"class":807},"_box-shadow:inner",[780,2128,811],{"class":790},[780,2130,2044],{"class":790},[780,2132,2133],{"class":794},"Inset shadow",[780,2135,2050],{"class":790},[780,2137,2029],{"class":889},[780,2139,2055],{"class":790},[2141,2142,2143,2146,2147,2149],"tip",{},[692,2144,2145],{},"Pro tip",": The box shadow utility uses CSS custom properties (",[702,2148,1184],{},") so it can be combined with ring utilities without conflicts.",[707,2151,2153],{"id":2152},"useboxshadowcolorutility",[702,2154,2155],{},"useBoxShadowColorUtility",[711,2157,757,2158,2161],{},[702,2159,2160],{},"useBoxShadowColorUtility()"," function creates utility classes for setting shadow colors.",[763,2163,2164,2385,2504],{},[766,2165,2166],{"icon":768,"label":290},[770,2167,2169],{"className":772,"code":2168,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useBoxShadowColorUtility } from \"@styleframe\u002Ftheme\";\nimport { useColorDesignTokens } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);\n\nuseBoxShadowColorUtility(s, {\n    primary: ref(colorPrimary),\n    black: 'rgb(0 0 0 \u002F 0.25)',\n});\n\nexport default s;\n",[702,2170,2171,2191,2212,2233,2237,2251,2269,2273,2318,2322,2332,2347,2363,2371,2375],{"__ignoreMap":776},[780,2172,2173,2175,2177,2179,2181,2183,2185,2187,2189],{"class":782,"line":783},[780,2174,787],{"class":786},[780,2176,791],{"class":790},[780,2178,795],{"class":794},[780,2180,798],{"class":790},[780,2182,801],{"class":786},[780,2184,804],{"class":790},[780,2186,808],{"class":807},[780,2188,811],{"class":790},[780,2190,814],{"class":790},[780,2192,2193,2195,2197,2200,2202,2204,2206,2208,2210],{"class":782,"line":817},[780,2194,787],{"class":786},[780,2196,791],{"class":790},[780,2198,2199],{"class":794}," useBoxShadowColorUtility",[780,2201,798],{"class":790},[780,2203,801],{"class":786},[780,2205,804],{"class":790},[780,2207,833],{"class":807},[780,2209,811],{"class":790},[780,2211,814],{"class":790},[780,2213,2214,2216,2218,2221,2223,2225,2227,2229,2231],{"class":782,"line":840},[780,2215,787],{"class":786},[780,2217,791],{"class":790},[780,2219,2220],{"class":794}," useColorDesignTokens",[780,2222,798],{"class":790},[780,2224,801],{"class":786},[780,2226,804],{"class":790},[780,2228,833],{"class":807},[780,2230,811],{"class":790},[780,2232,814],{"class":790},[780,2234,2235],{"class":782,"line":846},[780,2236,843],{"emptyLinePlaceholder":223},[780,2238,2239,2241,2243,2245,2247,2249],{"class":782,"line":867},[780,2240,850],{"class":849},[780,2242,853],{"class":794},[780,2244,856],{"class":790},[780,2246,795],{"class":859},[780,2248,862],{"class":794},[780,2250,814],{"class":790},[780,2252,2253,2255,2257,2260,2262,2265,2267],{"class":782,"line":872},[780,2254,850],{"class":849},[780,2256,791],{"class":790},[780,2258,2259],{"class":794}," ref ",[780,2261,1035],{"class":790},[780,2263,2264],{"class":790}," =",[780,2266,1057],{"class":794},[780,2268,814],{"class":790},[780,2270,2271],{"class":782,"line":886},[780,2272,843],{"emptyLinePlaceholder":223},[780,2274,2275,2277,2279,2282,2284,2286,2288,2290,2292,2294,2297,2299,2301,2304,2306,2308,2311,2314,2316],{"class":782,"line":908},[780,2276,850],{"class":849},[780,2278,791],{"class":790},[780,2280,2281],{"class":794}," colorPrimary ",[780,2283,1035],{"class":790},[780,2285,2264],{"class":790},[780,2287,2220],{"class":859},[780,2289,877],{"class":794},[780,2291,880],{"class":790},[780,2293,791],{"class":790},[780,2295,2296],{"class":889}," primary",[780,2298,893],{"class":790},[780,2300,896],{"class":790},[780,2302,2303],{"class":807},"#006cff",[780,2305,902],{"class":790},[780,2307,798],{"class":790},[780,2309,2310],{"class":786}," as",[780,2312,2313],{"class":849}," const",[780,2315,1038],{"class":794},[780,2317,814],{"class":790},[780,2319,2320],{"class":782,"line":925},[780,2321,843],{"emptyLinePlaceholder":223},[780,2323,2324,2326,2328,2330],{"class":782,"line":942},[780,2325,2155],{"class":859},[780,2327,877],{"class":794},[780,2329,880],{"class":790},[780,2331,883],{"class":790},[780,2333,2334,2337,2339,2342,2345],{"class":782,"line":959},[780,2335,2336],{"class":889},"    primary",[780,2338,893],{"class":790},[780,2340,2341],{"class":859}," ref",[780,2343,2344],{"class":794},"(colorPrimary)",[780,2346,905],{"class":790},[780,2348,2349,2352,2354,2356,2359,2361],{"class":782,"line":976},[780,2350,2351],{"class":889},"    black",[780,2353,893],{"class":790},[780,2355,896],{"class":790},[780,2357,2358],{"class":807},"rgb(0 0 0 \u002F 0.25)",[780,2360,902],{"class":790},[780,2362,905],{"class":790},[780,2364,2365,2367,2369],{"class":782,"line":998},[780,2366,1035],{"class":790},[780,2368,1038],{"class":794},[780,2370,814],{"class":790},[780,2372,2373],{"class":782,"line":1015},[780,2374,843],{"emptyLinePlaceholder":223},[780,2376,2377,2379,2381,2383],{"class":782,"line":1032},[780,2378,1051],{"class":786},[780,2380,1054],{"class":786},[780,2382,1057],{"class":794},[780,2384,814],{"class":790},[766,2386,2387],{"icon":154,"label":326},[770,2388,2390],{"className":1064,"code":2389,"filename":1066,"language":1067,"meta":776,"style":776},":root {\n    --color--primary: oklch(0.5749 0.233917 259.9541 \u002F 1);\n}\n\n._box-shadow-color\\:primary { --tw-shadow-color: var(--color--primary); }\n._box-shadow-color\\:black { --tw-shadow-color: rgb(0 0 0 \u002F 0.25); }\n",[702,2391,2392,2401,2429,2433,2437,2469],{"__ignoreMap":776},[780,2393,2394,2396,2399],{"class":782,"line":783},[780,2395,893],{"class":790},[780,2397,2398],{"class":849},"root",[780,2400,883],{"class":790},[780,2402,2403,2406,2408,2411,2413,2416,2419,2422,2424,2427],{"class":782,"line":817},[780,2404,2405],{"class":794},"    --color--primary",[780,2407,893],{"class":790},[780,2409,2410],{"class":859}," oklch",[780,2412,1111],{"class":790},[780,2414,2415],{"class":1096},"0.5749",[780,2417,2418],{"class":1096}," 0.233917",[780,2420,2421],{"class":1096}," 259.9541",[780,2423,1121],{"class":794},[780,2425,2426],{"class":1096},"1",[780,2428,1127],{"class":790},[780,2430,2431],{"class":782,"line":840},[780,2432,1191],{"class":790},[780,2434,2435],{"class":782,"line":846},[780,2436,843],{"emptyLinePlaceholder":223},[780,2438,2439,2441,2444,2446,2449,2451,2454,2456,2458,2460,2463,2466],{"class":782,"line":867},[780,2440,1074],{"class":790},[780,2442,2443],{"class":1077},"_box-shadow-color",[780,2445,1081],{"class":794},[780,2447,2448],{"class":1077},"primary",[780,2450,791],{"class":790},[780,2452,2453],{"class":794}," --tw-shadow-color",[780,2455,893],{"class":790},[780,2457,1138],{"class":859},[780,2459,1111],{"class":790},[780,2461,2462],{"class":794},"--color--primary",[780,2464,2465],{"class":790},");",[780,2467,2468],{"class":790}," }\n",[780,2470,2471,2473,2475,2477,2480,2482,2484,2486,2488,2490,2492,2494,2496,2498,2500,2502],{"class":782,"line":872},[780,2472,1074],{"class":790},[780,2474,2443],{"class":1077},[780,2476,1081],{"class":794},[780,2478,2479],{"class":1077},"black",[780,2481,791],{"class":790},[780,2483,2453],{"class":794},[780,2485,893],{"class":790},[780,2487,1108],{"class":859},[780,2489,1111],{"class":790},[780,2491,1114],{"class":1096},[780,2493,1097],{"class":1096},[780,2495,1097],{"class":1096},[780,2497,1121],{"class":794},[780,2499,1758],{"class":1096},[780,2501,2465],{"class":790},[780,2503,2468],{"class":790},[766,2505,2506],{"icon":520,"label":2014},[770,2507,2509],{"className":2017,"code":2508,"language":2019,"meta":776,"style":776},"\u003Cdiv class=\"_box-shadow:lg _box-shadow-color:primary\">Colored shadow\u003C\u002Fdiv>\n",[702,2510,2511],{"__ignoreMap":776},[780,2512,2513,2515,2517,2519,2521,2523,2526,2528,2530,2533,2535,2537],{"class":782,"line":783},[780,2514,2026],{"class":790},[780,2516,2029],{"class":889},[780,2518,2032],{"class":849},[780,2520,856],{"class":790},[780,2522,811],{"class":790},[780,2524,2525],{"class":807},"_box-shadow:lg _box-shadow-color:primary",[780,2527,811],{"class":790},[780,2529,2044],{"class":790},[780,2531,2532],{"class":794},"Colored shadow",[780,2534,2050],{"class":790},[780,2536,2029],{"class":889},[780,2538,2055],{"class":790},[707,2540,2542],{"id":2541},"useopacityutility",[702,2543,2544],{},"useOpacityUtility",[711,2546,757,2547,2550],{},[702,2548,2549],{},"useOpacityUtility()"," function creates utility classes for controlling element opacity.",[763,2552,2553,2949,3303],{},[766,2554,2555],{"icon":768,"label":290},[770,2556,2558],{"className":772,"code":2557,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useOpacityUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseOpacityUtility(s, {\n    '0': '0',\n    '5': '0.05',\n    '10': '0.1',\n    '20': '0.2',\n    '25': '0.25',\n    '30': '0.3',\n    '40': '0.4',\n    '50': '0.5',\n    '60': '0.6',\n    '70': '0.7',\n    '75': '0.75',\n    '80': '0.8',\n    '90': '0.9',\n    '95': '0.95',\n    '100': '1',\n});\n\nexport default s;\n",[702,2559,2560,2580,2601,2605,2619,2623,2633,2651,2670,2689,2709,2728,2748,2768,2788,2808,2828,2848,2868,2888,2908,2927,2935,2939],{"__ignoreMap":776},[780,2561,2562,2564,2566,2568,2570,2572,2574,2576,2578],{"class":782,"line":783},[780,2563,787],{"class":786},[780,2565,791],{"class":790},[780,2567,795],{"class":794},[780,2569,798],{"class":790},[780,2571,801],{"class":786},[780,2573,804],{"class":790},[780,2575,808],{"class":807},[780,2577,811],{"class":790},[780,2579,814],{"class":790},[780,2581,2582,2584,2586,2589,2591,2593,2595,2597,2599],{"class":782,"line":817},[780,2583,787],{"class":786},[780,2585,791],{"class":790},[780,2587,2588],{"class":794}," useOpacityUtility",[780,2590,798],{"class":790},[780,2592,801],{"class":786},[780,2594,804],{"class":790},[780,2596,833],{"class":807},[780,2598,811],{"class":790},[780,2600,814],{"class":790},[780,2602,2603],{"class":782,"line":840},[780,2604,843],{"emptyLinePlaceholder":223},[780,2606,2607,2609,2611,2613,2615,2617],{"class":782,"line":846},[780,2608,850],{"class":849},[780,2610,853],{"class":794},[780,2612,856],{"class":790},[780,2614,795],{"class":859},[780,2616,862],{"class":794},[780,2618,814],{"class":790},[780,2620,2621],{"class":782,"line":867},[780,2622,843],{"emptyLinePlaceholder":223},[780,2624,2625,2627,2629,2631],{"class":782,"line":872},[780,2626,2544],{"class":859},[780,2628,877],{"class":794},[780,2630,880],{"class":790},[780,2632,883],{"class":790},[780,2634,2635,2637,2639,2641,2643,2645,2647,2649],{"class":782,"line":886},[780,2636,979],{"class":790},[780,2638,1114],{"class":889},[780,2640,902],{"class":790},[780,2642,893],{"class":790},[780,2644,896],{"class":790},[780,2646,1114],{"class":807},[780,2648,902],{"class":790},[780,2650,905],{"class":790},[780,2652,2653,2655,2658,2660,2662,2664,2666,2668],{"class":782,"line":908},[780,2654,979],{"class":790},[780,2656,2657],{"class":889},"5",[780,2659,902],{"class":790},[780,2661,893],{"class":790},[780,2663,896],{"class":790},[780,2665,1124],{"class":807},[780,2667,902],{"class":790},[780,2669,905],{"class":790},[780,2671,2672,2674,2677,2679,2681,2683,2685,2687],{"class":782,"line":925},[780,2673,979],{"class":790},[780,2675,2676],{"class":889},"10",[780,2678,902],{"class":790},[780,2680,893],{"class":790},[780,2682,896],{"class":790},[780,2684,1233],{"class":807},[780,2686,902],{"class":790},[780,2688,905],{"class":790},[780,2690,2691,2693,2696,2698,2700,2702,2705,2707],{"class":782,"line":942},[780,2692,979],{"class":790},[780,2694,2695],{"class":889},"20",[780,2697,902],{"class":790},[780,2699,893],{"class":790},[780,2701,896],{"class":790},[780,2703,2704],{"class":807},"0.2",[780,2706,902],{"class":790},[780,2708,905],{"class":790},[780,2710,2711,2713,2716,2718,2720,2722,2724,2726],{"class":782,"line":959},[780,2712,979],{"class":790},[780,2714,2715],{"class":889},"25",[780,2717,902],{"class":790},[780,2719,893],{"class":790},[780,2721,896],{"class":790},[780,2723,1758],{"class":807},[780,2725,902],{"class":790},[780,2727,905],{"class":790},[780,2729,2730,2732,2735,2737,2739,2741,2744,2746],{"class":782,"line":976},[780,2731,979],{"class":790},[780,2733,2734],{"class":889},"30",[780,2736,902],{"class":790},[780,2738,893],{"class":790},[780,2740,896],{"class":790},[780,2742,2743],{"class":807},"0.3",[780,2745,902],{"class":790},[780,2747,905],{"class":790},[780,2749,2750,2752,2755,2757,2759,2761,2764,2766],{"class":782,"line":998},[780,2751,979],{"class":790},[780,2753,2754],{"class":889},"40",[780,2756,902],{"class":790},[780,2758,893],{"class":790},[780,2760,896],{"class":790},[780,2762,2763],{"class":807},"0.4",[780,2765,902],{"class":790},[780,2767,905],{"class":790},[780,2769,2770,2772,2775,2777,2779,2781,2784,2786],{"class":782,"line":1015},[780,2771,979],{"class":790},[780,2773,2774],{"class":889},"50",[780,2776,902],{"class":790},[780,2778,893],{"class":790},[780,2780,896],{"class":790},[780,2782,2783],{"class":807},"0.5",[780,2785,902],{"class":790},[780,2787,905],{"class":790},[780,2789,2790,2792,2795,2797,2799,2801,2804,2806],{"class":782,"line":1032},[780,2791,979],{"class":790},[780,2793,2794],{"class":889},"60",[780,2796,902],{"class":790},[780,2798,893],{"class":790},[780,2800,896],{"class":790},[780,2802,2803],{"class":807},"0.6",[780,2805,902],{"class":790},[780,2807,905],{"class":790},[780,2809,2810,2812,2815,2817,2819,2821,2824,2826],{"class":782,"line":1043},[780,2811,979],{"class":790},[780,2813,2814],{"class":889},"70",[780,2816,902],{"class":790},[780,2818,893],{"class":790},[780,2820,896],{"class":790},[780,2822,2823],{"class":807},"0.7",[780,2825,902],{"class":790},[780,2827,905],{"class":790},[780,2829,2830,2832,2835,2837,2839,2841,2844,2846],{"class":782,"line":1048},[780,2831,979],{"class":790},[780,2833,2834],{"class":889},"75",[780,2836,902],{"class":790},[780,2838,893],{"class":790},[780,2840,896],{"class":790},[780,2842,2843],{"class":807},"0.75",[780,2845,902],{"class":790},[780,2847,905],{"class":790},[780,2849,2850,2852,2855,2857,2859,2861,2864,2866],{"class":782,"line":1520},[780,2851,979],{"class":790},[780,2853,2854],{"class":889},"80",[780,2856,902],{"class":790},[780,2858,893],{"class":790},[780,2860,896],{"class":790},[780,2862,2863],{"class":807},"0.8",[780,2865,902],{"class":790},[780,2867,905],{"class":790},[780,2869,2870,2872,2875,2877,2879,2881,2884,2886],{"class":782,"line":1571},[780,2871,979],{"class":790},[780,2873,2874],{"class":889},"90",[780,2876,902],{"class":790},[780,2878,893],{"class":790},[780,2880,896],{"class":790},[780,2882,2883],{"class":807},"0.9",[780,2885,902],{"class":790},[780,2887,905],{"class":790},[780,2889,2890,2892,2895,2897,2899,2901,2904,2906],{"class":782,"line":1576},[780,2891,979],{"class":790},[780,2893,2894],{"class":889},"95",[780,2896,902],{"class":790},[780,2898,893],{"class":790},[780,2900,896],{"class":790},[780,2902,2903],{"class":807},"0.95",[780,2905,902],{"class":790},[780,2907,905],{"class":790},[780,2909,2910,2912,2915,2917,2919,2921,2923,2925],{"class":782,"line":1581},[780,2911,979],{"class":790},[780,2913,2914],{"class":889},"100",[780,2916,902],{"class":790},[780,2918,893],{"class":790},[780,2920,896],{"class":790},[780,2922,2426],{"class":807},[780,2924,902],{"class":790},[780,2926,905],{"class":790},[780,2928,2929,2931,2933],{"class":782,"line":1595},[780,2930,1035],{"class":790},[780,2932,1038],{"class":794},[780,2934,814],{"class":790},[780,2936,2937],{"class":782,"line":1655},[780,2938,843],{"emptyLinePlaceholder":223},[780,2940,2941,2943,2945,2947],{"class":782,"line":1706},[780,2942,1051],{"class":786},[780,2944,1054],{"class":786},[780,2946,1057],{"class":794},[780,2948,814],{"class":790},[766,2950,2951],{"icon":154,"label":326},[770,2952,2954],{"className":1064,"code":2953,"filename":1066,"language":1067,"meta":776,"style":776},"._opacity\\:0 { opacity: 0; }\n._opacity\\:5 { opacity: 0.05; }\n._opacity\\:10 { opacity: 0.1; }\n._opacity\\:20 { opacity: 0.2; }\n._opacity\\:25 { opacity: 0.25; }\n._opacity\\:30 { opacity: 0.3; }\n._opacity\\:40 { opacity: 0.4; }\n._opacity\\:50 { opacity: 0.5; }\n._opacity\\:60 { opacity: 0.6; }\n._opacity\\:70 { opacity: 0.7; }\n._opacity\\:75 { opacity: 0.75; }\n._opacity\\:80 { opacity: 0.8; }\n._opacity\\:90 { opacity: 0.9; }\n._opacity\\:95 { opacity: 0.95; }\n._opacity\\:100 { opacity: 1; }\n",[702,2955,2956,2981,3004,3027,3050,3073,3096,3119,3142,3165,3188,3211,3234,3257,3280],{"__ignoreMap":776},[780,2957,2958,2960,2963,2965,2967,2969,2972,2974,2976,2979],{"class":782,"line":783},[780,2959,1074],{"class":790},[780,2961,2962],{"class":1077},"_opacity",[780,2964,1081],{"class":794},[780,2966,1114],{"class":1077},[780,2968,791],{"class":790},[780,2970,2971],{"class":1132}," opacity",[780,2973,893],{"class":790},[780,2975,1097],{"class":1096},[780,2977,2978],{"class":790},";",[780,2980,2468],{"class":790},[780,2982,2983,2985,2987,2989,2991,2993,2995,2997,3000,3002],{"class":782,"line":817},[780,2984,1074],{"class":790},[780,2986,2962],{"class":1077},[780,2988,1081],{"class":794},[780,2990,2657],{"class":1077},[780,2992,791],{"class":790},[780,2994,2971],{"class":1132},[780,2996,893],{"class":790},[780,2998,2999],{"class":1096}," 0.05",[780,3001,2978],{"class":790},[780,3003,2468],{"class":790},[780,3005,3006,3008,3010,3012,3014,3016,3018,3020,3023,3025],{"class":782,"line":840},[780,3007,1074],{"class":790},[780,3009,2962],{"class":1077},[780,3011,1081],{"class":794},[780,3013,2676],{"class":1077},[780,3015,791],{"class":790},[780,3017,2971],{"class":1132},[780,3019,893],{"class":790},[780,3021,3022],{"class":1096}," 0.1",[780,3024,2978],{"class":790},[780,3026,2468],{"class":790},[780,3028,3029,3031,3033,3035,3037,3039,3041,3043,3046,3048],{"class":782,"line":846},[780,3030,1074],{"class":790},[780,3032,2962],{"class":1077},[780,3034,1081],{"class":794},[780,3036,2695],{"class":1077},[780,3038,791],{"class":790},[780,3040,2971],{"class":1132},[780,3042,893],{"class":790},[780,3044,3045],{"class":1096}," 0.2",[780,3047,2978],{"class":790},[780,3049,2468],{"class":790},[780,3051,3052,3054,3056,3058,3060,3062,3064,3066,3069,3071],{"class":782,"line":867},[780,3053,1074],{"class":790},[780,3055,2962],{"class":1077},[780,3057,1081],{"class":794},[780,3059,2715],{"class":1077},[780,3061,791],{"class":790},[780,3063,2971],{"class":1132},[780,3065,893],{"class":790},[780,3067,3068],{"class":1096}," 0.25",[780,3070,2978],{"class":790},[780,3072,2468],{"class":790},[780,3074,3075,3077,3079,3081,3083,3085,3087,3089,3092,3094],{"class":782,"line":872},[780,3076,1074],{"class":790},[780,3078,2962],{"class":1077},[780,3080,1081],{"class":794},[780,3082,2734],{"class":1077},[780,3084,791],{"class":790},[780,3086,2971],{"class":1132},[780,3088,893],{"class":790},[780,3090,3091],{"class":1096}," 0.3",[780,3093,2978],{"class":790},[780,3095,2468],{"class":790},[780,3097,3098,3100,3102,3104,3106,3108,3110,3112,3115,3117],{"class":782,"line":886},[780,3099,1074],{"class":790},[780,3101,2962],{"class":1077},[780,3103,1081],{"class":794},[780,3105,2754],{"class":1077},[780,3107,791],{"class":790},[780,3109,2971],{"class":1132},[780,3111,893],{"class":790},[780,3113,3114],{"class":1096}," 0.4",[780,3116,2978],{"class":790},[780,3118,2468],{"class":790},[780,3120,3121,3123,3125,3127,3129,3131,3133,3135,3138,3140],{"class":782,"line":908},[780,3122,1074],{"class":790},[780,3124,2962],{"class":1077},[780,3126,1081],{"class":794},[780,3128,2774],{"class":1077},[780,3130,791],{"class":790},[780,3132,2971],{"class":1132},[780,3134,893],{"class":790},[780,3136,3137],{"class":1096}," 0.5",[780,3139,2978],{"class":790},[780,3141,2468],{"class":790},[780,3143,3144,3146,3148,3150,3152,3154,3156,3158,3161,3163],{"class":782,"line":925},[780,3145,1074],{"class":790},[780,3147,2962],{"class":1077},[780,3149,1081],{"class":794},[780,3151,2794],{"class":1077},[780,3153,791],{"class":790},[780,3155,2971],{"class":1132},[780,3157,893],{"class":790},[780,3159,3160],{"class":1096}," 0.6",[780,3162,2978],{"class":790},[780,3164,2468],{"class":790},[780,3166,3167,3169,3171,3173,3175,3177,3179,3181,3184,3186],{"class":782,"line":942},[780,3168,1074],{"class":790},[780,3170,2962],{"class":1077},[780,3172,1081],{"class":794},[780,3174,2814],{"class":1077},[780,3176,791],{"class":790},[780,3178,2971],{"class":1132},[780,3180,893],{"class":790},[780,3182,3183],{"class":1096}," 0.7",[780,3185,2978],{"class":790},[780,3187,2468],{"class":790},[780,3189,3190,3192,3194,3196,3198,3200,3202,3204,3207,3209],{"class":782,"line":959},[780,3191,1074],{"class":790},[780,3193,2962],{"class":1077},[780,3195,1081],{"class":794},[780,3197,2834],{"class":1077},[780,3199,791],{"class":790},[780,3201,2971],{"class":1132},[780,3203,893],{"class":790},[780,3205,3206],{"class":1096}," 0.75",[780,3208,2978],{"class":790},[780,3210,2468],{"class":790},[780,3212,3213,3215,3217,3219,3221,3223,3225,3227,3230,3232],{"class":782,"line":976},[780,3214,1074],{"class":790},[780,3216,2962],{"class":1077},[780,3218,1081],{"class":794},[780,3220,2854],{"class":1077},[780,3222,791],{"class":790},[780,3224,2971],{"class":1132},[780,3226,893],{"class":790},[780,3228,3229],{"class":1096}," 0.8",[780,3231,2978],{"class":790},[780,3233,2468],{"class":790},[780,3235,3236,3238,3240,3242,3244,3246,3248,3250,3253,3255],{"class":782,"line":998},[780,3237,1074],{"class":790},[780,3239,2962],{"class":1077},[780,3241,1081],{"class":794},[780,3243,2874],{"class":1077},[780,3245,791],{"class":790},[780,3247,2971],{"class":1132},[780,3249,893],{"class":790},[780,3251,3252],{"class":1096}," 0.9",[780,3254,2978],{"class":790},[780,3256,2468],{"class":790},[780,3258,3259,3261,3263,3265,3267,3269,3271,3273,3276,3278],{"class":782,"line":1015},[780,3260,1074],{"class":790},[780,3262,2962],{"class":1077},[780,3264,1081],{"class":794},[780,3266,2894],{"class":1077},[780,3268,791],{"class":790},[780,3270,2971],{"class":1132},[780,3272,893],{"class":790},[780,3274,3275],{"class":1096}," 0.95",[780,3277,2978],{"class":790},[780,3279,2468],{"class":790},[780,3281,3282,3284,3286,3288,3290,3292,3294,3296,3299,3301],{"class":782,"line":1032},[780,3283,1074],{"class":790},[780,3285,2962],{"class":1077},[780,3287,1081],{"class":794},[780,3289,2914],{"class":1077},[780,3291,791],{"class":790},[780,3293,2971],{"class":1132},[780,3295,893],{"class":790},[780,3297,3298],{"class":1096}," 1",[780,3300,2978],{"class":790},[780,3302,2468],{"class":790},[766,3304,3305],{"icon":520,"label":2014},[770,3306,3308],{"className":2017,"code":3307,"language":2019,"meta":776,"style":776},"\u003Cdiv class=\"_opacity:50\">50% opacity\u003C\u002Fdiv>\n\u003Cdiv class=\"_opacity:75\">75% opacity\u003C\u002Fdiv>\n\u003Cbutton class=\"_opacity:50 _hover:opacity:100\">Fade on hover\u003C\u002Fbutton>\n",[702,3309,3310,3338,3366],{"__ignoreMap":776},[780,3311,3312,3314,3316,3318,3320,3322,3325,3327,3329,3332,3334,3336],{"class":782,"line":783},[780,3313,2026],{"class":790},[780,3315,2029],{"class":889},[780,3317,2032],{"class":849},[780,3319,856],{"class":790},[780,3321,811],{"class":790},[780,3323,3324],{"class":807},"_opacity:50",[780,3326,811],{"class":790},[780,3328,2044],{"class":790},[780,3330,3331],{"class":794},"50% opacity",[780,3333,2050],{"class":790},[780,3335,2029],{"class":889},[780,3337,2055],{"class":790},[780,3339,3340,3342,3344,3346,3348,3350,3353,3355,3357,3360,3362,3364],{"class":782,"line":817},[780,3341,2026],{"class":790},[780,3343,2029],{"class":889},[780,3345,2032],{"class":849},[780,3347,856],{"class":790},[780,3349,811],{"class":790},[780,3351,3352],{"class":807},"_opacity:75",[780,3354,811],{"class":790},[780,3356,2044],{"class":790},[780,3358,3359],{"class":794},"75% opacity",[780,3361,2050],{"class":790},[780,3363,2029],{"class":889},[780,3365,2055],{"class":790},[780,3367,3368,3370,3373,3375,3377,3379,3382,3384,3386,3389,3391,3393],{"class":782,"line":840},[780,3369,2026],{"class":790},[780,3371,3372],{"class":889},"button",[780,3374,2032],{"class":849},[780,3376,856],{"class":790},[780,3378,811],{"class":790},[780,3380,3381],{"class":807},"_opacity:50 _hover:opacity:100",[780,3383,811],{"class":790},[780,3385,2044],{"class":790},[780,3387,3388],{"class":794},"Fade on hover",[780,3390,2050],{"class":790},[780,3392,3372],{"class":889},[780,3394,2055],{"class":790},[707,3396,3398],{"id":3397},"usetextshadowutility",[702,3399,3400],{},"useTextShadowUtility",[711,3402,757,3403,3406],{},[702,3404,3405],{},"useTextShadowUtility()"," function creates utility classes for applying text shadows.",[763,3408,3409,3585,3773],{},[766,3410,3411],{"icon":768,"label":290},[770,3412,3414],{"className":772,"code":3413,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useTextShadowUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseTextShadowUtility(s, {\n    sm: '0 1px 2px rgb(0 0 0 \u002F 0.05)',\n    default: '0 1px 3px rgb(0 0 0 \u002F 0.1)',\n    md: '0 2px 4px rgb(0 0 0 \u002F 0.1)',\n    lg: '0 4px 8px rgb(0 0 0 \u002F 0.15)',\n    none: 'none',\n});\n\nexport default s;\n",[702,3415,3416,3436,3457,3461,3475,3479,3489,3504,3519,3534,3549,3563,3571,3575],{"__ignoreMap":776},[780,3417,3418,3420,3422,3424,3426,3428,3430,3432,3434],{"class":782,"line":783},[780,3419,787],{"class":786},[780,3421,791],{"class":790},[780,3423,795],{"class":794},[780,3425,798],{"class":790},[780,3427,801],{"class":786},[780,3429,804],{"class":790},[780,3431,808],{"class":807},[780,3433,811],{"class":790},[780,3435,814],{"class":790},[780,3437,3438,3440,3442,3445,3447,3449,3451,3453,3455],{"class":782,"line":817},[780,3439,787],{"class":786},[780,3441,791],{"class":790},[780,3443,3444],{"class":794}," useTextShadowUtility",[780,3446,798],{"class":790},[780,3448,801],{"class":786},[780,3450,804],{"class":790},[780,3452,833],{"class":807},[780,3454,811],{"class":790},[780,3456,814],{"class":790},[780,3458,3459],{"class":782,"line":840},[780,3460,843],{"emptyLinePlaceholder":223},[780,3462,3463,3465,3467,3469,3471,3473],{"class":782,"line":846},[780,3464,850],{"class":849},[780,3466,853],{"class":794},[780,3468,856],{"class":790},[780,3470,795],{"class":859},[780,3472,862],{"class":794},[780,3474,814],{"class":790},[780,3476,3477],{"class":782,"line":867},[780,3478,843],{"emptyLinePlaceholder":223},[780,3480,3481,3483,3485,3487],{"class":782,"line":872},[780,3482,3400],{"class":859},[780,3484,877],{"class":794},[780,3486,880],{"class":790},[780,3488,883],{"class":790},[780,3490,3491,3493,3495,3497,3500,3502],{"class":782,"line":886},[780,3492,890],{"class":889},[780,3494,893],{"class":790},[780,3496,896],{"class":790},[780,3498,3499],{"class":807},"0 1px 2px rgb(0 0 0 \u002F 0.05)",[780,3501,902],{"class":790},[780,3503,905],{"class":790},[780,3505,3506,3508,3510,3512,3515,3517],{"class":782,"line":908},[780,3507,911],{"class":889},[780,3509,893],{"class":790},[780,3511,896],{"class":790},[780,3513,3514],{"class":807},"0 1px 3px rgb(0 0 0 \u002F 0.1)",[780,3516,902],{"class":790},[780,3518,905],{"class":790},[780,3520,3521,3523,3525,3527,3530,3532],{"class":782,"line":925},[780,3522,928],{"class":889},[780,3524,893],{"class":790},[780,3526,896],{"class":790},[780,3528,3529],{"class":807},"0 2px 4px rgb(0 0 0 \u002F 0.1)",[780,3531,902],{"class":790},[780,3533,905],{"class":790},[780,3535,3536,3538,3540,3542,3545,3547],{"class":782,"line":942},[780,3537,945],{"class":889},[780,3539,893],{"class":790},[780,3541,896],{"class":790},[780,3543,3544],{"class":807},"0 4px 8px rgb(0 0 0 \u002F 0.15)",[780,3546,902],{"class":790},[780,3548,905],{"class":790},[780,3550,3551,3553,3555,3557,3559,3561],{"class":782,"line":959},[780,3552,1018],{"class":889},[780,3554,893],{"class":790},[780,3556,896],{"class":790},[780,3558,1025],{"class":807},[780,3560,902],{"class":790},[780,3562,905],{"class":790},[780,3564,3565,3567,3569],{"class":782,"line":976},[780,3566,1035],{"class":790},[780,3568,1038],{"class":794},[780,3570,814],{"class":790},[780,3572,3573],{"class":782,"line":998},[780,3574,843],{"emptyLinePlaceholder":223},[780,3576,3577,3579,3581,3583],{"class":782,"line":1015},[780,3578,1051],{"class":786},[780,3580,1054],{"class":786},[780,3582,1057],{"class":794},[780,3584,814],{"class":790},[766,3586,3587],{"icon":154,"label":326},[770,3588,3590],{"className":1064,"code":3589,"filename":1066,"language":1067,"meta":776,"style":776},"._text-shadow\\:sm { text-shadow: 0 1px 2px rgb(0 0 0 \u002F 0.05); }\n._text-shadow { text-shadow: 0 1px 3px rgb(0 0 0 \u002F 0.1); }\n._text-shadow\\:md { text-shadow: 0 2px 4px rgb(0 0 0 \u002F 0.1); }\n._text-shadow\\:lg { text-shadow: 0 4px 8px rgb(0 0 0 \u002F 0.15); }\n._text-shadow\\:none { text-shadow: none; }\n",[702,3591,3592,3634,3670,3710,3751],{"__ignoreMap":776},[780,3593,3594,3596,3599,3601,3603,3605,3608,3610,3612,3614,3616,3618,3620,3622,3624,3626,3628,3630,3632],{"class":782,"line":783},[780,3595,1074],{"class":790},[780,3597,3598],{"class":1077},"_text-shadow",[780,3600,1081],{"class":794},[780,3602,1084],{"class":1077},[780,3604,791],{"class":790},[780,3606,3607],{"class":1132}," text-shadow",[780,3609,893],{"class":790},[780,3611,1097],{"class":1096},[780,3613,1100],{"class":1096},[780,3615,1103],{"class":1096},[780,3617,1108],{"class":859},[780,3619,1111],{"class":790},[780,3621,1114],{"class":1096},[780,3623,1097],{"class":1096},[780,3625,1097],{"class":1096},[780,3627,1121],{"class":794},[780,3629,1124],{"class":1096},[780,3631,2465],{"class":790},[780,3633,2468],{"class":790},[780,3635,3636,3638,3640,3642,3644,3646,3648,3650,3652,3654,3656,3658,3660,3662,3664,3666,3668],{"class":782,"line":817},[780,3637,1074],{"class":790},[780,3639,3598],{"class":1077},[780,3641,791],{"class":790},[780,3643,3607],{"class":1132},[780,3645,893],{"class":790},[780,3647,1097],{"class":1096},[780,3649,1100],{"class":1096},[780,3651,1216],{"class":1096},[780,3653,1108],{"class":859},[780,3655,1111],{"class":790},[780,3657,1114],{"class":1096},[780,3659,1097],{"class":1096},[780,3661,1097],{"class":1096},[780,3663,1121],{"class":794},[780,3665,1233],{"class":1096},[780,3667,2465],{"class":790},[780,3669,2468],{"class":790},[780,3671,3672,3674,3676,3678,3680,3682,3684,3686,3688,3690,3692,3694,3696,3698,3700,3702,3704,3706,3708],{"class":782,"line":840},[780,3673,1074],{"class":790},[780,3675,3598],{"class":1077},[780,3677,1081],{"class":794},[780,3679,1329],{"class":1077},[780,3681,791],{"class":790},[780,3683,3607],{"class":1132},[780,3685,893],{"class":790},[780,3687,1097],{"class":1096},[780,3689,1103],{"class":1096},[780,3691,1342],{"class":1096},[780,3693,1108],{"class":859},[780,3695,1111],{"class":790},[780,3697,1114],{"class":1096},[780,3699,1097],{"class":1096},[780,3701,1097],{"class":1096},[780,3703,1121],{"class":794},[780,3705,1233],{"class":1096},[780,3707,2465],{"class":790},[780,3709,2468],{"class":790},[780,3711,3712,3714,3716,3718,3720,3722,3724,3726,3728,3730,3732,3734,3736,3738,3740,3742,3744,3747,3749],{"class":782,"line":846},[780,3713,1074],{"class":790},[780,3715,3598],{"class":1077},[780,3717,1081],{"class":794},[780,3719,1457],{"class":1077},[780,3721,791],{"class":790},[780,3723,3607],{"class":1132},[780,3725,893],{"class":790},[780,3727,1097],{"class":1096},[780,3729,1342],{"class":1096},[780,3731,1631],{"class":1096},[780,3733,1108],{"class":859},[780,3735,1111],{"class":790},[780,3737,1114],{"class":1096},[780,3739,1097],{"class":1096},[780,3741,1097],{"class":1096},[780,3743,1121],{"class":794},[780,3745,3746],{"class":1096},"0.15",[780,3748,2465],{"class":790},[780,3750,2468],{"class":790},[780,3752,3753,3755,3757,3759,3761,3763,3765,3767,3769,3771],{"class":782,"line":867},[780,3754,1074],{"class":790},[780,3756,3598],{"class":1077},[780,3758,1081],{"class":794},[780,3760,1025],{"class":1077},[780,3762,791],{"class":790},[780,3764,3607],{"class":1132},[780,3766,893],{"class":790},[780,3768,1953],{"class":794},[780,3770,2978],{"class":790},[780,3772,2468],{"class":790},[766,3774,3775],{"icon":520,"label":2014},[770,3776,3778],{"className":2017,"code":3777,"language":2019,"meta":776,"style":776},"\u003Ch1 class=\"_text-shadow\">Subtle text shadow\u003C\u002Fh1>\n\u003Ch1 class=\"_text-shadow:lg\">Large text shadow\u003C\u002Fh1>\n",[702,3779,3780,3808],{"__ignoreMap":776},[780,3781,3782,3784,3787,3789,3791,3793,3795,3797,3799,3802,3804,3806],{"class":782,"line":783},[780,3783,2026],{"class":790},[780,3785,3786],{"class":889},"h1",[780,3788,2032],{"class":849},[780,3790,856],{"class":790},[780,3792,811],{"class":790},[780,3794,3598],{"class":807},[780,3796,811],{"class":790},[780,3798,2044],{"class":790},[780,3800,3801],{"class":794},"Subtle text shadow",[780,3803,2050],{"class":790},[780,3805,3786],{"class":889},[780,3807,2055],{"class":790},[780,3809,3810,3812,3814,3816,3818,3820,3823,3825,3827,3830,3832,3834],{"class":782,"line":817},[780,3811,2026],{"class":790},[780,3813,3786],{"class":889},[780,3815,2032],{"class":849},[780,3817,856],{"class":790},[780,3819,811],{"class":790},[780,3821,3822],{"class":807},"_text-shadow:lg",[780,3824,811],{"class":790},[780,3826,2044],{"class":790},[780,3828,3829],{"class":794},"Large text shadow",[780,3831,2050],{"class":790},[780,3833,3786],{"class":889},[780,3835,2055],{"class":790},[707,3837,3839],{"id":3838},"usemixblendmodeutility",[702,3840,3841],{},"useMixBlendModeUtility",[711,3843,757,3844,3847],{},[702,3845,3846],{},"useMixBlendModeUtility()"," function creates utility classes for controlling how an element blends with its background.",[763,3849,3850,4220,4597],{},[766,3851,3852],{"icon":768,"label":290},[770,3853,3855],{"className":772,"code":3854,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useMixBlendModeUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseMixBlendModeUtility(s, {\n    normal: 'normal',\n    multiply: 'multiply',\n    screen: 'screen',\n    overlay: 'overlay',\n    darken: 'darken',\n    lighten: 'lighten',\n    'color-dodge': 'color-dodge',\n    'color-burn': 'color-burn',\n    'hard-light': 'hard-light',\n    'soft-light': 'soft-light',\n    difference: 'difference',\n    exclusion: 'exclusion',\n    hue: 'hue',\n    saturation: 'saturation',\n    color: 'color',\n    luminosity: 'luminosity',\n});\n\nexport default s;\n",[702,3856,3857,3877,3898,3902,3916,3920,3930,3946,3962,3978,3994,4010,4026,4045,4064,4083,4102,4118,4134,4150,4166,4182,4198,4206,4210],{"__ignoreMap":776},[780,3858,3859,3861,3863,3865,3867,3869,3871,3873,3875],{"class":782,"line":783},[780,3860,787],{"class":786},[780,3862,791],{"class":790},[780,3864,795],{"class":794},[780,3866,798],{"class":790},[780,3868,801],{"class":786},[780,3870,804],{"class":790},[780,3872,808],{"class":807},[780,3874,811],{"class":790},[780,3876,814],{"class":790},[780,3878,3879,3881,3883,3886,3888,3890,3892,3894,3896],{"class":782,"line":817},[780,3880,787],{"class":786},[780,3882,791],{"class":790},[780,3884,3885],{"class":794}," useMixBlendModeUtility",[780,3887,798],{"class":790},[780,3889,801],{"class":786},[780,3891,804],{"class":790},[780,3893,833],{"class":807},[780,3895,811],{"class":790},[780,3897,814],{"class":790},[780,3899,3900],{"class":782,"line":840},[780,3901,843],{"emptyLinePlaceholder":223},[780,3903,3904,3906,3908,3910,3912,3914],{"class":782,"line":846},[780,3905,850],{"class":849},[780,3907,853],{"class":794},[780,3909,856],{"class":790},[780,3911,795],{"class":859},[780,3913,862],{"class":794},[780,3915,814],{"class":790},[780,3917,3918],{"class":782,"line":867},[780,3919,843],{"emptyLinePlaceholder":223},[780,3921,3922,3924,3926,3928],{"class":782,"line":872},[780,3923,3841],{"class":859},[780,3925,877],{"class":794},[780,3927,880],{"class":790},[780,3929,883],{"class":790},[780,3931,3932,3935,3937,3939,3942,3944],{"class":782,"line":886},[780,3933,3934],{"class":889},"    normal",[780,3936,893],{"class":790},[780,3938,896],{"class":790},[780,3940,3941],{"class":807},"normal",[780,3943,902],{"class":790},[780,3945,905],{"class":790},[780,3947,3948,3951,3953,3955,3958,3960],{"class":782,"line":908},[780,3949,3950],{"class":889},"    multiply",[780,3952,893],{"class":790},[780,3954,896],{"class":790},[780,3956,3957],{"class":807},"multiply",[780,3959,902],{"class":790},[780,3961,905],{"class":790},[780,3963,3964,3967,3969,3971,3974,3976],{"class":782,"line":925},[780,3965,3966],{"class":889},"    screen",[780,3968,893],{"class":790},[780,3970,896],{"class":790},[780,3972,3973],{"class":807},"screen",[780,3975,902],{"class":790},[780,3977,905],{"class":790},[780,3979,3980,3983,3985,3987,3990,3992],{"class":782,"line":942},[780,3981,3982],{"class":889},"    overlay",[780,3984,893],{"class":790},[780,3986,896],{"class":790},[780,3988,3989],{"class":807},"overlay",[780,3991,902],{"class":790},[780,3993,905],{"class":790},[780,3995,3996,3999,4001,4003,4006,4008],{"class":782,"line":959},[780,3997,3998],{"class":889},"    darken",[780,4000,893],{"class":790},[780,4002,896],{"class":790},[780,4004,4005],{"class":807},"darken",[780,4007,902],{"class":790},[780,4009,905],{"class":790},[780,4011,4012,4015,4017,4019,4022,4024],{"class":782,"line":976},[780,4013,4014],{"class":889},"    lighten",[780,4016,893],{"class":790},[780,4018,896],{"class":790},[780,4020,4021],{"class":807},"lighten",[780,4023,902],{"class":790},[780,4025,905],{"class":790},[780,4027,4028,4030,4033,4035,4037,4039,4041,4043],{"class":782,"line":998},[780,4029,979],{"class":790},[780,4031,4032],{"class":889},"color-dodge",[780,4034,902],{"class":790},[780,4036,893],{"class":790},[780,4038,896],{"class":790},[780,4040,4032],{"class":807},[780,4042,902],{"class":790},[780,4044,905],{"class":790},[780,4046,4047,4049,4052,4054,4056,4058,4060,4062],{"class":782,"line":1015},[780,4048,979],{"class":790},[780,4050,4051],{"class":889},"color-burn",[780,4053,902],{"class":790},[780,4055,893],{"class":790},[780,4057,896],{"class":790},[780,4059,4051],{"class":807},[780,4061,902],{"class":790},[780,4063,905],{"class":790},[780,4065,4066,4068,4071,4073,4075,4077,4079,4081],{"class":782,"line":1032},[780,4067,979],{"class":790},[780,4069,4070],{"class":889},"hard-light",[780,4072,902],{"class":790},[780,4074,893],{"class":790},[780,4076,896],{"class":790},[780,4078,4070],{"class":807},[780,4080,902],{"class":790},[780,4082,905],{"class":790},[780,4084,4085,4087,4090,4092,4094,4096,4098,4100],{"class":782,"line":1043},[780,4086,979],{"class":790},[780,4088,4089],{"class":889},"soft-light",[780,4091,902],{"class":790},[780,4093,893],{"class":790},[780,4095,896],{"class":790},[780,4097,4089],{"class":807},[780,4099,902],{"class":790},[780,4101,905],{"class":790},[780,4103,4104,4107,4109,4111,4114,4116],{"class":782,"line":1048},[780,4105,4106],{"class":889},"    difference",[780,4108,893],{"class":790},[780,4110,896],{"class":790},[780,4112,4113],{"class":807},"difference",[780,4115,902],{"class":790},[780,4117,905],{"class":790},[780,4119,4120,4123,4125,4127,4130,4132],{"class":782,"line":1520},[780,4121,4122],{"class":889},"    exclusion",[780,4124,893],{"class":790},[780,4126,896],{"class":790},[780,4128,4129],{"class":807},"exclusion",[780,4131,902],{"class":790},[780,4133,905],{"class":790},[780,4135,4136,4139,4141,4143,4146,4148],{"class":782,"line":1571},[780,4137,4138],{"class":889},"    hue",[780,4140,893],{"class":790},[780,4142,896],{"class":790},[780,4144,4145],{"class":807},"hue",[780,4147,902],{"class":790},[780,4149,905],{"class":790},[780,4151,4152,4155,4157,4159,4162,4164],{"class":782,"line":1576},[780,4153,4154],{"class":889},"    saturation",[780,4156,893],{"class":790},[780,4158,896],{"class":790},[780,4160,4161],{"class":807},"saturation",[780,4163,902],{"class":790},[780,4165,905],{"class":790},[780,4167,4168,4171,4173,4175,4178,4180],{"class":782,"line":1581},[780,4169,4170],{"class":889},"    color",[780,4172,893],{"class":790},[780,4174,896],{"class":790},[780,4176,4177],{"class":807},"color",[780,4179,902],{"class":790},[780,4181,905],{"class":790},[780,4183,4184,4187,4189,4191,4194,4196],{"class":782,"line":1595},[780,4185,4186],{"class":889},"    luminosity",[780,4188,893],{"class":790},[780,4190,896],{"class":790},[780,4192,4193],{"class":807},"luminosity",[780,4195,902],{"class":790},[780,4197,905],{"class":790},[780,4199,4200,4202,4204],{"class":782,"line":1655},[780,4201,1035],{"class":790},[780,4203,1038],{"class":794},[780,4205,814],{"class":790},[780,4207,4208],{"class":782,"line":1706},[780,4209,843],{"emptyLinePlaceholder":223},[780,4211,4212,4214,4216,4218],{"class":782,"line":1711},[780,4213,1051],{"class":786},[780,4215,1054],{"class":786},[780,4217,1057],{"class":794},[780,4219,814],{"class":790},[766,4221,4222],{"icon":154,"label":326},[770,4223,4225],{"className":1064,"code":4224,"filename":1066,"language":1067,"meta":776,"style":776},"._mix-blend-mode\\:normal { mix-blend-mode: normal; }\n._mix-blend-mode\\:multiply { mix-blend-mode: multiply; }\n._mix-blend-mode\\:screen { mix-blend-mode: screen; }\n._mix-blend-mode\\:overlay { mix-blend-mode: overlay; }\n._mix-blend-mode\\:darken { mix-blend-mode: darken; }\n._mix-blend-mode\\:lighten { mix-blend-mode: lighten; }\n._mix-blend-mode\\:color-dodge { mix-blend-mode: color-dodge; }\n._mix-blend-mode\\:color-burn { mix-blend-mode: color-burn; }\n._mix-blend-mode\\:hard-light { mix-blend-mode: hard-light; }\n._mix-blend-mode\\:soft-light { mix-blend-mode: soft-light; }\n._mix-blend-mode\\:difference { mix-blend-mode: difference; }\n._mix-blend-mode\\:exclusion { mix-blend-mode: exclusion; }\n._mix-blend-mode\\:hue { mix-blend-mode: hue; }\n._mix-blend-mode\\:saturation { mix-blend-mode: saturation; }\n._mix-blend-mode\\:color { mix-blend-mode: color; }\n._mix-blend-mode\\:luminosity { mix-blend-mode: luminosity; }\n",[702,4226,4227,4252,4275,4298,4321,4344,4367,4390,4413,4436,4459,4482,4505,4528,4551,4574],{"__ignoreMap":776},[780,4228,4229,4231,4234,4236,4238,4240,4243,4245,4248,4250],{"class":782,"line":783},[780,4230,1074],{"class":790},[780,4232,4233],{"class":1077},"_mix-blend-mode",[780,4235,1081],{"class":794},[780,4237,3941],{"class":1077},[780,4239,791],{"class":790},[780,4241,4242],{"class":1132}," mix-blend-mode",[780,4244,893],{"class":790},[780,4246,4247],{"class":794}," normal",[780,4249,2978],{"class":790},[780,4251,2468],{"class":790},[780,4253,4254,4256,4258,4260,4262,4264,4266,4268,4271,4273],{"class":782,"line":817},[780,4255,1074],{"class":790},[780,4257,4233],{"class":1077},[780,4259,1081],{"class":794},[780,4261,3957],{"class":1077},[780,4263,791],{"class":790},[780,4265,4242],{"class":1132},[780,4267,893],{"class":790},[780,4269,4270],{"class":794}," multiply",[780,4272,2978],{"class":790},[780,4274,2468],{"class":790},[780,4276,4277,4279,4281,4283,4285,4287,4289,4291,4294,4296],{"class":782,"line":840},[780,4278,1074],{"class":790},[780,4280,4233],{"class":1077},[780,4282,1081],{"class":794},[780,4284,3973],{"class":1077},[780,4286,791],{"class":790},[780,4288,4242],{"class":1132},[780,4290,893],{"class":790},[780,4292,4293],{"class":794}," screen",[780,4295,2978],{"class":790},[780,4297,2468],{"class":790},[780,4299,4300,4302,4304,4306,4308,4310,4312,4314,4317,4319],{"class":782,"line":846},[780,4301,1074],{"class":790},[780,4303,4233],{"class":1077},[780,4305,1081],{"class":794},[780,4307,3989],{"class":1077},[780,4309,791],{"class":790},[780,4311,4242],{"class":1132},[780,4313,893],{"class":790},[780,4315,4316],{"class":794}," overlay",[780,4318,2978],{"class":790},[780,4320,2468],{"class":790},[780,4322,4323,4325,4327,4329,4331,4333,4335,4337,4340,4342],{"class":782,"line":867},[780,4324,1074],{"class":790},[780,4326,4233],{"class":1077},[780,4328,1081],{"class":794},[780,4330,4005],{"class":1077},[780,4332,791],{"class":790},[780,4334,4242],{"class":1132},[780,4336,893],{"class":790},[780,4338,4339],{"class":794}," darken",[780,4341,2978],{"class":790},[780,4343,2468],{"class":790},[780,4345,4346,4348,4350,4352,4354,4356,4358,4360,4363,4365],{"class":782,"line":872},[780,4347,1074],{"class":790},[780,4349,4233],{"class":1077},[780,4351,1081],{"class":794},[780,4353,4021],{"class":1077},[780,4355,791],{"class":790},[780,4357,4242],{"class":1132},[780,4359,893],{"class":790},[780,4361,4362],{"class":794}," lighten",[780,4364,2978],{"class":790},[780,4366,2468],{"class":790},[780,4368,4369,4371,4373,4375,4377,4379,4381,4383,4386,4388],{"class":782,"line":886},[780,4370,1074],{"class":790},[780,4372,4233],{"class":1077},[780,4374,1081],{"class":794},[780,4376,4032],{"class":1077},[780,4378,791],{"class":790},[780,4380,4242],{"class":1132},[780,4382,893],{"class":790},[780,4384,4385],{"class":794}," color-dodge",[780,4387,2978],{"class":790},[780,4389,2468],{"class":790},[780,4391,4392,4394,4396,4398,4400,4402,4404,4406,4409,4411],{"class":782,"line":908},[780,4393,1074],{"class":790},[780,4395,4233],{"class":1077},[780,4397,1081],{"class":794},[780,4399,4051],{"class":1077},[780,4401,791],{"class":790},[780,4403,4242],{"class":1132},[780,4405,893],{"class":790},[780,4407,4408],{"class":794}," color-burn",[780,4410,2978],{"class":790},[780,4412,2468],{"class":790},[780,4414,4415,4417,4419,4421,4423,4425,4427,4429,4432,4434],{"class":782,"line":925},[780,4416,1074],{"class":790},[780,4418,4233],{"class":1077},[780,4420,1081],{"class":794},[780,4422,4070],{"class":1077},[780,4424,791],{"class":790},[780,4426,4242],{"class":1132},[780,4428,893],{"class":790},[780,4430,4431],{"class":794}," hard-light",[780,4433,2978],{"class":790},[780,4435,2468],{"class":790},[780,4437,4438,4440,4442,4444,4446,4448,4450,4452,4455,4457],{"class":782,"line":942},[780,4439,1074],{"class":790},[780,4441,4233],{"class":1077},[780,4443,1081],{"class":794},[780,4445,4089],{"class":1077},[780,4447,791],{"class":790},[780,4449,4242],{"class":1132},[780,4451,893],{"class":790},[780,4453,4454],{"class":794}," soft-light",[780,4456,2978],{"class":790},[780,4458,2468],{"class":790},[780,4460,4461,4463,4465,4467,4469,4471,4473,4475,4478,4480],{"class":782,"line":959},[780,4462,1074],{"class":790},[780,4464,4233],{"class":1077},[780,4466,1081],{"class":794},[780,4468,4113],{"class":1077},[780,4470,791],{"class":790},[780,4472,4242],{"class":1132},[780,4474,893],{"class":790},[780,4476,4477],{"class":794}," difference",[780,4479,2978],{"class":790},[780,4481,2468],{"class":790},[780,4483,4484,4486,4488,4490,4492,4494,4496,4498,4501,4503],{"class":782,"line":976},[780,4485,1074],{"class":790},[780,4487,4233],{"class":1077},[780,4489,1081],{"class":794},[780,4491,4129],{"class":1077},[780,4493,791],{"class":790},[780,4495,4242],{"class":1132},[780,4497,893],{"class":790},[780,4499,4500],{"class":794}," exclusion",[780,4502,2978],{"class":790},[780,4504,2468],{"class":790},[780,4506,4507,4509,4511,4513,4515,4517,4519,4521,4524,4526],{"class":782,"line":998},[780,4508,1074],{"class":790},[780,4510,4233],{"class":1077},[780,4512,1081],{"class":794},[780,4514,4145],{"class":1077},[780,4516,791],{"class":790},[780,4518,4242],{"class":1132},[780,4520,893],{"class":790},[780,4522,4523],{"class":794}," hue",[780,4525,2978],{"class":790},[780,4527,2468],{"class":790},[780,4529,4530,4532,4534,4536,4538,4540,4542,4544,4547,4549],{"class":782,"line":1015},[780,4531,1074],{"class":790},[780,4533,4233],{"class":1077},[780,4535,1081],{"class":794},[780,4537,4161],{"class":1077},[780,4539,791],{"class":790},[780,4541,4242],{"class":1132},[780,4543,893],{"class":790},[780,4545,4546],{"class":794}," saturation",[780,4548,2978],{"class":790},[780,4550,2468],{"class":790},[780,4552,4553,4555,4557,4559,4561,4563,4565,4567,4570,4572],{"class":782,"line":1032},[780,4554,1074],{"class":790},[780,4556,4233],{"class":1077},[780,4558,1081],{"class":794},[780,4560,4177],{"class":1077},[780,4562,791],{"class":790},[780,4564,4242],{"class":1132},[780,4566,893],{"class":790},[780,4568,4569],{"class":794}," color",[780,4571,2978],{"class":790},[780,4573,2468],{"class":790},[780,4575,4576,4578,4580,4582,4584,4586,4588,4590,4593,4595],{"class":782,"line":1043},[780,4577,1074],{"class":790},[780,4579,4233],{"class":1077},[780,4581,1081],{"class":794},[780,4583,4193],{"class":1077},[780,4585,791],{"class":790},[780,4587,4242],{"class":1132},[780,4589,893],{"class":790},[780,4591,4592],{"class":794}," luminosity",[780,4594,2978],{"class":790},[780,4596,2468],{"class":790},[766,4598,4599],{"icon":520,"label":2014},[770,4600,4602],{"className":2017,"code":4601,"language":2019,"meta":776,"style":776},"\u003Cdiv class=\"_mix-blend-mode:multiply\">Multiply blend\u003C\u002Fdiv>\n\u003Cdiv class=\"_mix-blend-mode:screen\">Screen blend\u003C\u002Fdiv>\n\u003Cimg class=\"_mix-blend-mode:overlay\" src=\"image.jpg\" alt=\"Blended image\">\n",[702,4603,4604,4632,4660],{"__ignoreMap":776},[780,4605,4606,4608,4610,4612,4614,4616,4619,4621,4623,4626,4628,4630],{"class":782,"line":783},[780,4607,2026],{"class":790},[780,4609,2029],{"class":889},[780,4611,2032],{"class":849},[780,4613,856],{"class":790},[780,4615,811],{"class":790},[780,4617,4618],{"class":807},"_mix-blend-mode:multiply",[780,4620,811],{"class":790},[780,4622,2044],{"class":790},[780,4624,4625],{"class":794},"Multiply blend",[780,4627,2050],{"class":790},[780,4629,2029],{"class":889},[780,4631,2055],{"class":790},[780,4633,4634,4636,4638,4640,4642,4644,4647,4649,4651,4654,4656,4658],{"class":782,"line":817},[780,4635,2026],{"class":790},[780,4637,2029],{"class":889},[780,4639,2032],{"class":849},[780,4641,856],{"class":790},[780,4643,811],{"class":790},[780,4645,4646],{"class":807},"_mix-blend-mode:screen",[780,4648,811],{"class":790},[780,4650,2044],{"class":790},[780,4652,4653],{"class":794},"Screen blend",[780,4655,2050],{"class":790},[780,4657,2029],{"class":889},[780,4659,2055],{"class":790},[780,4661,4662,4664,4667,4669,4671,4673,4676,4678,4681,4683,4685,4688,4690,4693,4695,4697,4700,4702],{"class":782,"line":840},[780,4663,2026],{"class":790},[780,4665,4666],{"class":889},"img",[780,4668,2032],{"class":849},[780,4670,856],{"class":790},[780,4672,811],{"class":790},[780,4674,4675],{"class":807},"_mix-blend-mode:overlay",[780,4677,811],{"class":790},[780,4679,4680],{"class":849}," src",[780,4682,856],{"class":790},[780,4684,811],{"class":790},[780,4686,4687],{"class":807},"image.jpg",[780,4689,811],{"class":790},[780,4691,4692],{"class":849}," alt",[780,4694,856],{"class":790},[780,4696,811],{"class":790},[780,4698,4699],{"class":807},"Blended image",[780,4701,811],{"class":790},[780,4703,2055],{"class":790},[707,4705,4707],{"id":4706},"usebackgroundblendmodeutility",[702,4708,4709],{},"useBackgroundBlendModeUtility",[711,4711,757,4712,4715],{},[702,4713,4714],{},"useBackgroundBlendModeUtility()"," function creates utility classes for controlling how background layers blend together.",[763,4717,4718,4904,5045],{},[766,4719,4720],{"icon":768,"label":290},[770,4721,4723],{"className":772,"code":4722,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useBackgroundBlendModeUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseBackgroundBlendModeUtility(s, {\n    normal: 'normal',\n    multiply: 'multiply',\n    screen: 'screen',\n    overlay: 'overlay',\n    darken: 'darken',\n    lighten: 'lighten',\n});\n\nexport default s;\n",[702,4724,4725,4745,4766,4770,4784,4788,4798,4812,4826,4840,4854,4868,4882,4890,4894],{"__ignoreMap":776},[780,4726,4727,4729,4731,4733,4735,4737,4739,4741,4743],{"class":782,"line":783},[780,4728,787],{"class":786},[780,4730,791],{"class":790},[780,4732,795],{"class":794},[780,4734,798],{"class":790},[780,4736,801],{"class":786},[780,4738,804],{"class":790},[780,4740,808],{"class":807},[780,4742,811],{"class":790},[780,4744,814],{"class":790},[780,4746,4747,4749,4751,4754,4756,4758,4760,4762,4764],{"class":782,"line":817},[780,4748,787],{"class":786},[780,4750,791],{"class":790},[780,4752,4753],{"class":794}," useBackgroundBlendModeUtility",[780,4755,798],{"class":790},[780,4757,801],{"class":786},[780,4759,804],{"class":790},[780,4761,833],{"class":807},[780,4763,811],{"class":790},[780,4765,814],{"class":790},[780,4767,4768],{"class":782,"line":840},[780,4769,843],{"emptyLinePlaceholder":223},[780,4771,4772,4774,4776,4778,4780,4782],{"class":782,"line":846},[780,4773,850],{"class":849},[780,4775,853],{"class":794},[780,4777,856],{"class":790},[780,4779,795],{"class":859},[780,4781,862],{"class":794},[780,4783,814],{"class":790},[780,4785,4786],{"class":782,"line":867},[780,4787,843],{"emptyLinePlaceholder":223},[780,4789,4790,4792,4794,4796],{"class":782,"line":872},[780,4791,4709],{"class":859},[780,4793,877],{"class":794},[780,4795,880],{"class":790},[780,4797,883],{"class":790},[780,4799,4800,4802,4804,4806,4808,4810],{"class":782,"line":886},[780,4801,3934],{"class":889},[780,4803,893],{"class":790},[780,4805,896],{"class":790},[780,4807,3941],{"class":807},[780,4809,902],{"class":790},[780,4811,905],{"class":790},[780,4813,4814,4816,4818,4820,4822,4824],{"class":782,"line":908},[780,4815,3950],{"class":889},[780,4817,893],{"class":790},[780,4819,896],{"class":790},[780,4821,3957],{"class":807},[780,4823,902],{"class":790},[780,4825,905],{"class":790},[780,4827,4828,4830,4832,4834,4836,4838],{"class":782,"line":925},[780,4829,3966],{"class":889},[780,4831,893],{"class":790},[780,4833,896],{"class":790},[780,4835,3973],{"class":807},[780,4837,902],{"class":790},[780,4839,905],{"class":790},[780,4841,4842,4844,4846,4848,4850,4852],{"class":782,"line":942},[780,4843,3982],{"class":889},[780,4845,893],{"class":790},[780,4847,896],{"class":790},[780,4849,3989],{"class":807},[780,4851,902],{"class":790},[780,4853,905],{"class":790},[780,4855,4856,4858,4860,4862,4864,4866],{"class":782,"line":959},[780,4857,3998],{"class":889},[780,4859,893],{"class":790},[780,4861,896],{"class":790},[780,4863,4005],{"class":807},[780,4865,902],{"class":790},[780,4867,905],{"class":790},[780,4869,4870,4872,4874,4876,4878,4880],{"class":782,"line":976},[780,4871,4014],{"class":889},[780,4873,893],{"class":790},[780,4875,896],{"class":790},[780,4877,4021],{"class":807},[780,4879,902],{"class":790},[780,4881,905],{"class":790},[780,4883,4884,4886,4888],{"class":782,"line":998},[780,4885,1035],{"class":790},[780,4887,1038],{"class":794},[780,4889,814],{"class":790},[780,4891,4892],{"class":782,"line":1015},[780,4893,843],{"emptyLinePlaceholder":223},[780,4895,4896,4898,4900,4902],{"class":782,"line":1032},[780,4897,1051],{"class":786},[780,4899,1054],{"class":786},[780,4901,1057],{"class":794},[780,4903,814],{"class":790},[766,4905,4906],{"icon":154,"label":326},[770,4907,4909],{"className":1064,"code":4908,"filename":1066,"language":1067,"meta":776,"style":776},"._background-blend-mode\\:normal { background-blend-mode: normal; }\n._background-blend-mode\\:multiply { background-blend-mode: multiply; }\n._background-blend-mode\\:screen { background-blend-mode: screen; }\n._background-blend-mode\\:overlay { background-blend-mode: overlay; }\n._background-blend-mode\\:darken { background-blend-mode: darken; }\n._background-blend-mode\\:lighten { background-blend-mode: lighten; }\n",[702,4910,4911,4935,4957,4979,5001,5023],{"__ignoreMap":776},[780,4912,4913,4915,4918,4920,4922,4924,4927,4929,4931,4933],{"class":782,"line":783},[780,4914,1074],{"class":790},[780,4916,4917],{"class":1077},"_background-blend-mode",[780,4919,1081],{"class":794},[780,4921,3941],{"class":1077},[780,4923,791],{"class":790},[780,4925,4926],{"class":1132}," background-blend-mode",[780,4928,893],{"class":790},[780,4930,4247],{"class":794},[780,4932,2978],{"class":790},[780,4934,2468],{"class":790},[780,4936,4937,4939,4941,4943,4945,4947,4949,4951,4953,4955],{"class":782,"line":817},[780,4938,1074],{"class":790},[780,4940,4917],{"class":1077},[780,4942,1081],{"class":794},[780,4944,3957],{"class":1077},[780,4946,791],{"class":790},[780,4948,4926],{"class":1132},[780,4950,893],{"class":790},[780,4952,4270],{"class":794},[780,4954,2978],{"class":790},[780,4956,2468],{"class":790},[780,4958,4959,4961,4963,4965,4967,4969,4971,4973,4975,4977],{"class":782,"line":840},[780,4960,1074],{"class":790},[780,4962,4917],{"class":1077},[780,4964,1081],{"class":794},[780,4966,3973],{"class":1077},[780,4968,791],{"class":790},[780,4970,4926],{"class":1132},[780,4972,893],{"class":790},[780,4974,4293],{"class":794},[780,4976,2978],{"class":790},[780,4978,2468],{"class":790},[780,4980,4981,4983,4985,4987,4989,4991,4993,4995,4997,4999],{"class":782,"line":846},[780,4982,1074],{"class":790},[780,4984,4917],{"class":1077},[780,4986,1081],{"class":794},[780,4988,3989],{"class":1077},[780,4990,791],{"class":790},[780,4992,4926],{"class":1132},[780,4994,893],{"class":790},[780,4996,4316],{"class":794},[780,4998,2978],{"class":790},[780,5000,2468],{"class":790},[780,5002,5003,5005,5007,5009,5011,5013,5015,5017,5019,5021],{"class":782,"line":867},[780,5004,1074],{"class":790},[780,5006,4917],{"class":1077},[780,5008,1081],{"class":794},[780,5010,4005],{"class":1077},[780,5012,791],{"class":790},[780,5014,4926],{"class":1132},[780,5016,893],{"class":790},[780,5018,4339],{"class":794},[780,5020,2978],{"class":790},[780,5022,2468],{"class":790},[780,5024,5025,5027,5029,5031,5033,5035,5037,5039,5041,5043],{"class":782,"line":872},[780,5026,1074],{"class":790},[780,5028,4917],{"class":1077},[780,5030,1081],{"class":794},[780,5032,4021],{"class":1077},[780,5034,791],{"class":790},[780,5036,4926],{"class":1132},[780,5038,893],{"class":790},[780,5040,4362],{"class":794},[780,5042,2978],{"class":790},[780,5044,2468],{"class":790},[766,5046,5047],{"icon":520,"label":2014},[770,5048,5050],{"className":2017,"code":5049,"language":2019,"meta":776,"style":776},"\u003Cdiv class=\"_background-blend-mode:multiply\" style=\"background: url(image.jpg), blue;\">\n    Background layers multiply\n\u003C\u002Fdiv>\n",[702,5051,5052,5083,5088],{"__ignoreMap":776},[780,5053,5054,5056,5058,5060,5062,5064,5067,5069,5072,5074,5076,5079,5081],{"class":782,"line":783},[780,5055,2026],{"class":790},[780,5057,2029],{"class":889},[780,5059,2032],{"class":849},[780,5061,856],{"class":790},[780,5063,811],{"class":790},[780,5065,5066],{"class":807},"_background-blend-mode:multiply",[780,5068,811],{"class":790},[780,5070,5071],{"class":849}," style",[780,5073,856],{"class":790},[780,5075,811],{"class":790},[780,5077,5078],{"class":807},"background: url(image.jpg), blue;",[780,5080,811],{"class":790},[780,5082,2055],{"class":790},[780,5084,5085],{"class":782,"line":817},[780,5086,5087],{"class":794},"    Background layers multiply\n",[780,5089,5090,5092,5094],{"class":782,"line":840},[780,5091,2050],{"class":790},[780,5093,2029],{"class":889},[780,5095,2055],{"class":790},[707,5097,5099],{"id":5098},"examples","Examples",[5101,5102,5104],"h3",{"id":5103},"card-with-elevation","Card with Elevation",[763,5106,5107,5399],{},[766,5108,5109],{"icon":768,"label":290},[770,5110,5112],{"className":772,"code":5111,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useBoxShadowUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { selector, modifier } = s;\n\nuseBoxShadowUtility(s, {\n    sm: '0 1px 2px 0 rgb(0 0 0 \u002F 0.05)',\n    default: '0 1px 3px 0 rgb(0 0 0 \u002F 0.1), 0 1px 2px -1px rgb(0 0 0 \u002F 0.1)',\n    md: '0 4px 6px -1px rgb(0 0 0 \u002F 0.1), 0 2px 4px -2px rgb(0 0 0 \u002F 0.1)',\n    lg: '0 10px 15px -3px rgb(0 0 0 \u002F 0.1), 0 4px 6px -4px rgb(0 0 0 \u002F 0.1)',\n});\n\n\u002F\u002F Create hover modifier\nconst hover = modifier('hover', ({ declarations }) => ({\n    '&:hover': declarations,\n}));\n\n\u002F\u002F Apply shadow with hover state\nuseBoxShadowUtility(s, { lg: '0 10px 15px -3px rgb(0 0 0 \u002F 0.1), 0 4px 6px -4px rgb(0 0 0 \u002F 0.1)' }, [hover]);\n\nexport default s;\n",[702,5113,5114,5134,5154,5158,5172,5194,5198,5208,5222,5236,5250,5264,5272,5276,5282,5323,5338,5347,5351,5356,5385,5389],{"__ignoreMap":776},[780,5115,5116,5118,5120,5122,5124,5126,5128,5130,5132],{"class":782,"line":783},[780,5117,787],{"class":786},[780,5119,791],{"class":790},[780,5121,795],{"class":794},[780,5123,798],{"class":790},[780,5125,801],{"class":786},[780,5127,804],{"class":790},[780,5129,808],{"class":807},[780,5131,811],{"class":790},[780,5133,814],{"class":790},[780,5135,5136,5138,5140,5142,5144,5146,5148,5150,5152],{"class":782,"line":817},[780,5137,787],{"class":786},[780,5139,791],{"class":790},[780,5141,824],{"class":794},[780,5143,798],{"class":790},[780,5145,801],{"class":786},[780,5147,804],{"class":790},[780,5149,833],{"class":807},[780,5151,811],{"class":790},[780,5153,814],{"class":790},[780,5155,5156],{"class":782,"line":840},[780,5157,843],{"emptyLinePlaceholder":223},[780,5159,5160,5162,5164,5166,5168,5170],{"class":782,"line":846},[780,5161,850],{"class":849},[780,5163,853],{"class":794},[780,5165,856],{"class":790},[780,5167,795],{"class":859},[780,5169,862],{"class":794},[780,5171,814],{"class":790},[780,5173,5174,5176,5178,5181,5183,5186,5188,5190,5192],{"class":782,"line":867},[780,5175,850],{"class":849},[780,5177,791],{"class":790},[780,5179,5180],{"class":794}," selector",[780,5182,880],{"class":790},[780,5184,5185],{"class":794}," modifier ",[780,5187,1035],{"class":790},[780,5189,2264],{"class":790},[780,5191,1057],{"class":794},[780,5193,814],{"class":790},[780,5195,5196],{"class":782,"line":872},[780,5197,843],{"emptyLinePlaceholder":223},[780,5199,5200,5202,5204,5206],{"class":782,"line":886},[780,5201,754],{"class":859},[780,5203,877],{"class":794},[780,5205,880],{"class":790},[780,5207,883],{"class":790},[780,5209,5210,5212,5214,5216,5218,5220],{"class":782,"line":908},[780,5211,890],{"class":889},[780,5213,893],{"class":790},[780,5215,896],{"class":790},[780,5217,899],{"class":807},[780,5219,902],{"class":790},[780,5221,905],{"class":790},[780,5223,5224,5226,5228,5230,5232,5234],{"class":782,"line":925},[780,5225,911],{"class":889},[780,5227,893],{"class":790},[780,5229,896],{"class":790},[780,5231,918],{"class":807},[780,5233,902],{"class":790},[780,5235,905],{"class":790},[780,5237,5238,5240,5242,5244,5246,5248],{"class":782,"line":942},[780,5239,928],{"class":889},[780,5241,893],{"class":790},[780,5243,896],{"class":790},[780,5245,935],{"class":807},[780,5247,902],{"class":790},[780,5249,905],{"class":790},[780,5251,5252,5254,5256,5258,5260,5262],{"class":782,"line":959},[780,5253,945],{"class":889},[780,5255,893],{"class":790},[780,5257,896],{"class":790},[780,5259,952],{"class":807},[780,5261,902],{"class":790},[780,5263,905],{"class":790},[780,5265,5266,5268,5270],{"class":782,"line":976},[780,5267,1035],{"class":790},[780,5269,1038],{"class":794},[780,5271,814],{"class":790},[780,5273,5274],{"class":782,"line":998},[780,5275,843],{"emptyLinePlaceholder":223},[780,5277,5278],{"class":782,"line":1015},[780,5279,5281],{"class":5280},"sHwdD","\u002F\u002F Create hover modifier\n",[780,5283,5284,5286,5289,5291,5294,5296,5298,5301,5303,5305,5308,5312,5315,5318,5320],{"class":782,"line":1032},[780,5285,850],{"class":849},[780,5287,5288],{"class":794}," hover ",[780,5290,856],{"class":790},[780,5292,5293],{"class":859}," modifier",[780,5295,1111],{"class":794},[780,5297,902],{"class":790},[780,5299,5300],{"class":807},"hover",[780,5302,902],{"class":790},[780,5304,880],{"class":790},[780,5306,5307],{"class":790}," ({",[780,5309,5311],{"class":5310},"sHdIc"," declarations",[780,5313,5314],{"class":790}," })",[780,5316,5317],{"class":849}," =>",[780,5319,700],{"class":794},[780,5321,5322],{"class":790},"{\n",[780,5324,5325,5327,5330,5332,5334,5336],{"class":782,"line":1043},[780,5326,979],{"class":790},[780,5328,5329],{"class":889},"&:hover",[780,5331,902],{"class":790},[780,5333,893],{"class":790},[780,5335,5311],{"class":794},[780,5337,905],{"class":790},[780,5339,5340,5342,5345],{"class":782,"line":1048},[780,5341,1035],{"class":790},[780,5343,5344],{"class":794},"))",[780,5346,814],{"class":790},[780,5348,5349],{"class":782,"line":1520},[780,5350,843],{"emptyLinePlaceholder":223},[780,5352,5353],{"class":782,"line":1571},[780,5354,5355],{"class":5280},"\u002F\u002F Apply shadow with hover state\n",[780,5357,5358,5360,5362,5364,5366,5369,5371,5373,5375,5377,5380,5383],{"class":782,"line":1576},[780,5359,754],{"class":859},[780,5361,877],{"class":794},[780,5363,880],{"class":790},[780,5365,791],{"class":790},[780,5367,5368],{"class":889}," lg",[780,5370,893],{"class":790},[780,5372,896],{"class":790},[780,5374,952],{"class":807},[780,5376,902],{"class":790},[780,5378,5379],{"class":790}," },",[780,5381,5382],{"class":794}," [hover])",[780,5384,814],{"class":790},[780,5386,5387],{"class":782,"line":1581},[780,5388,843],{"emptyLinePlaceholder":223},[780,5390,5391,5393,5395,5397],{"class":782,"line":1595},[780,5392,1051],{"class":786},[780,5394,1054],{"class":786},[780,5396,1057],{"class":794},[780,5398,814],{"class":790},[766,5400,5401],{"icon":154,"label":326},[770,5402,5404],{"className":1064,"code":5403,"filename":1066,"language":1067,"meta":776,"style":776},"._box-shadow\\:sm {\n    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 \u002F 0.05);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow {\n    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 \u002F 0.1), 0 1px 2px -1px rgb(0 0 0 \u002F 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._box-shadow\\:lg {\n    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 \u002F 0.1), 0 4px 6px -4px rgb(0 0 0 \u002F 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n._hover\\:box-shadow\\:lg:hover {\n    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 \u002F 0.1), 0 4px 6px -4px rgb(0 0 0 \u002F 0.1);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n",[702,5405,5406,5418,5448,5498,5502,5506,5514,5568,5618,5622,5626,5638,5692,5742,5746,5750,5772,5826,5876],{"__ignoreMap":776},[780,5407,5408,5410,5412,5414,5416],{"class":782,"line":783},[780,5409,1074],{"class":790},[780,5411,1078],{"class":1077},[780,5413,1081],{"class":794},[780,5415,1084],{"class":1077},[780,5417,883],{"class":790},[780,5419,5420,5422,5424,5426,5428,5430,5432,5434,5436,5438,5440,5442,5444,5446],{"class":782,"line":817},[780,5421,1091],{"class":794},[780,5423,893],{"class":790},[780,5425,1097],{"class":1096},[780,5427,1100],{"class":1096},[780,5429,1103],{"class":1096},[780,5431,1097],{"class":1096},[780,5433,1108],{"class":859},[780,5435,1111],{"class":790},[780,5437,1114],{"class":1096},[780,5439,1097],{"class":1096},[780,5441,1097],{"class":1096},[780,5443,1121],{"class":794},[780,5445,1124],{"class":1096},[780,5447,1127],{"class":790},[780,5449,5450,5452,5454,5456,5458,5460,5462,5464,5466,5468,5470,5472,5474,5476,5478,5480,5482,5484,5486,5488,5490,5492,5494,5496],{"class":782,"line":840},[780,5451,1133],{"class":1132},[780,5453,893],{"class":790},[780,5455,1138],{"class":859},[780,5457,1111],{"class":790},[780,5459,1143],{"class":794},[780,5461,880],{"class":790},[780,5463,1097],{"class":1096},[780,5465,1097],{"class":1096},[780,5467,1152],{"class":790},[780,5469,1155],{"class":794},[780,5471,1158],{"class":790},[780,5473,1138],{"class":859},[780,5475,1111],{"class":790},[780,5477,1165],{"class":794},[780,5479,880],{"class":790},[780,5481,1097],{"class":1096},[780,5483,1097],{"class":1096},[780,5485,1152],{"class":790},[780,5487,1155],{"class":794},[780,5489,1158],{"class":790},[780,5491,1138],{"class":859},[780,5493,1111],{"class":790},[780,5495,1184],{"class":794},[780,5497,1127],{"class":790},[780,5499,5500],{"class":782,"line":846},[780,5501,1191],{"class":790},[780,5503,5504],{"class":782,"line":867},[780,5505,843],{"emptyLinePlaceholder":223},[780,5507,5508,5510,5512],{"class":782,"line":872},[780,5509,1074],{"class":790},[780,5511,1078],{"class":1077},[780,5513,883],{"class":790},[780,5515,5516,5518,5520,5522,5524,5526,5528,5530,5532,5534,5536,5538,5540,5542,5544,5546,5548,5550,5552,5554,5556,5558,5560,5562,5564,5566],{"class":782,"line":886},[780,5517,1091],{"class":794},[780,5519,893],{"class":790},[780,5521,1097],{"class":1096},[780,5523,1100],{"class":1096},[780,5525,1216],{"class":1096},[780,5527,1097],{"class":1096},[780,5529,1108],{"class":859},[780,5531,1111],{"class":790},[780,5533,1114],{"class":1096},[780,5535,1097],{"class":1096},[780,5537,1097],{"class":1096},[780,5539,1121],{"class":794},[780,5541,1233],{"class":1096},[780,5543,1158],{"class":790},[780,5545,1097],{"class":1096},[780,5547,1100],{"class":1096},[780,5549,1103],{"class":1096},[780,5551,1244],{"class":1096},[780,5553,1108],{"class":859},[780,5555,1111],{"class":790},[780,5557,1114],{"class":1096},[780,5559,1097],{"class":1096},[780,5561,1097],{"class":1096},[780,5563,1121],{"class":794},[780,5565,1233],{"class":1096},[780,5567,1127],{"class":790},[780,5569,5570,5572,5574,5576,5578,5580,5582,5584,5586,5588,5590,5592,5594,5596,5598,5600,5602,5604,5606,5608,5610,5612,5614,5616],{"class":782,"line":908},[780,5571,1133],{"class":1132},[780,5573,893],{"class":790},[780,5575,1138],{"class":859},[780,5577,1111],{"class":790},[780,5579,1143],{"class":794},[780,5581,880],{"class":790},[780,5583,1097],{"class":1096},[780,5585,1097],{"class":1096},[780,5587,1152],{"class":790},[780,5589,1155],{"class":794},[780,5591,1158],{"class":790},[780,5593,1138],{"class":859},[780,5595,1111],{"class":790},[780,5597,1165],{"class":794},[780,5599,880],{"class":790},[780,5601,1097],{"class":1096},[780,5603,1097],{"class":1096},[780,5605,1152],{"class":790},[780,5607,1155],{"class":794},[780,5609,1158],{"class":790},[780,5611,1138],{"class":859},[780,5613,1111],{"class":790},[780,5615,1184],{"class":794},[780,5617,1127],{"class":790},[780,5619,5620],{"class":782,"line":925},[780,5621,1191],{"class":790},[780,5623,5624],{"class":782,"line":942},[780,5625,843],{"emptyLinePlaceholder":223},[780,5627,5628,5630,5632,5634,5636],{"class":782,"line":959},[780,5629,1074],{"class":790},[780,5631,1078],{"class":1077},[780,5633,1081],{"class":794},[780,5635,1457],{"class":1077},[780,5637,883],{"class":790},[780,5639,5640,5642,5644,5646,5648,5650,5652,5654,5656,5658,5660,5662,5664,5666,5668,5670,5672,5674,5676,5678,5680,5682,5684,5686,5688,5690],{"class":782,"line":976},[780,5641,1091],{"class":794},[780,5643,893],{"class":790},[780,5645,1097],{"class":1096},[780,5647,1470],{"class":1096},[780,5649,1473],{"class":1096},[780,5651,1476],{"class":1096},[780,5653,1108],{"class":859},[780,5655,1111],{"class":790},[780,5657,1114],{"class":1096},[780,5659,1097],{"class":1096},[780,5661,1097],{"class":1096},[780,5663,1121],{"class":794},[780,5665,1233],{"class":1096},[780,5667,1158],{"class":790},[780,5669,1097],{"class":1096},[780,5671,1342],{"class":1096},[780,5673,1345],{"class":1096},[780,5675,1501],{"class":1096},[780,5677,1108],{"class":859},[780,5679,1111],{"class":790},[780,5681,1114],{"class":1096},[780,5683,1097],{"class":1096},[780,5685,1097],{"class":1096},[780,5687,1121],{"class":794},[780,5689,1233],{"class":1096},[780,5691,1127],{"class":790},[780,5693,5694,5696,5698,5700,5702,5704,5706,5708,5710,5712,5714,5716,5718,5720,5722,5724,5726,5728,5730,5732,5734,5736,5738,5740],{"class":782,"line":998},[780,5695,1133],{"class":1132},[780,5697,893],{"class":790},[780,5699,1138],{"class":859},[780,5701,1111],{"class":790},[780,5703,1143],{"class":794},[780,5705,880],{"class":790},[780,5707,1097],{"class":1096},[780,5709,1097],{"class":1096},[780,5711,1152],{"class":790},[780,5713,1155],{"class":794},[780,5715,1158],{"class":790},[780,5717,1138],{"class":859},[780,5719,1111],{"class":790},[780,5721,1165],{"class":794},[780,5723,880],{"class":790},[780,5725,1097],{"class":1096},[780,5727,1097],{"class":1096},[780,5729,1152],{"class":790},[780,5731,1155],{"class":794},[780,5733,1158],{"class":790},[780,5735,1138],{"class":859},[780,5737,1111],{"class":790},[780,5739,1184],{"class":794},[780,5741,1127],{"class":790},[780,5743,5744],{"class":782,"line":1015},[780,5745,1191],{"class":790},[780,5747,5748],{"class":782,"line":1032},[780,5749,843],{"emptyLinePlaceholder":223},[780,5751,5752,5754,5757,5759,5762,5764,5766,5768,5770],{"class":782,"line":1043},[780,5753,1074],{"class":790},[780,5755,5756],{"class":1077},"_hover",[780,5758,1081],{"class":794},[780,5760,5761],{"class":1077},"box-shadow",[780,5763,1081],{"class":794},[780,5765,1457],{"class":1077},[780,5767,893],{"class":790},[780,5769,5300],{"class":849},[780,5771,883],{"class":790},[780,5773,5774,5776,5778,5780,5782,5784,5786,5788,5790,5792,5794,5796,5798,5800,5802,5804,5806,5808,5810,5812,5814,5816,5818,5820,5822,5824],{"class":782,"line":1048},[780,5775,1091],{"class":794},[780,5777,893],{"class":790},[780,5779,1097],{"class":1096},[780,5781,1470],{"class":1096},[780,5783,1473],{"class":1096},[780,5785,1476],{"class":1096},[780,5787,1108],{"class":859},[780,5789,1111],{"class":790},[780,5791,1114],{"class":1096},[780,5793,1097],{"class":1096},[780,5795,1097],{"class":1096},[780,5797,1121],{"class":794},[780,5799,1233],{"class":1096},[780,5801,1158],{"class":790},[780,5803,1097],{"class":1096},[780,5805,1342],{"class":1096},[780,5807,1345],{"class":1096},[780,5809,1501],{"class":1096},[780,5811,1108],{"class":859},[780,5813,1111],{"class":790},[780,5815,1114],{"class":1096},[780,5817,1097],{"class":1096},[780,5819,1097],{"class":1096},[780,5821,1121],{"class":794},[780,5823,1233],{"class":1096},[780,5825,1127],{"class":790},[780,5827,5828,5830,5832,5834,5836,5838,5840,5842,5844,5846,5848,5850,5852,5854,5856,5858,5860,5862,5864,5866,5868,5870,5872,5874],{"class":782,"line":1520},[780,5829,1133],{"class":1132},[780,5831,893],{"class":790},[780,5833,1138],{"class":859},[780,5835,1111],{"class":790},[780,5837,1143],{"class":794},[780,5839,880],{"class":790},[780,5841,1097],{"class":1096},[780,5843,1097],{"class":1096},[780,5845,1152],{"class":790},[780,5847,1155],{"class":794},[780,5849,1158],{"class":790},[780,5851,1138],{"class":859},[780,5853,1111],{"class":790},[780,5855,1165],{"class":794},[780,5857,880],{"class":790},[780,5859,1097],{"class":1096},[780,5861,1097],{"class":1096},[780,5863,1152],{"class":790},[780,5865,1155],{"class":794},[780,5867,1158],{"class":790},[780,5869,1138],{"class":859},[780,5871,1111],{"class":790},[780,5873,1184],{"class":794},[780,5875,1127],{"class":790},[780,5877,5878],{"class":782,"line":1571},[780,5879,1191],{"class":790},[711,5881,5882],{},"Usage in HTML:",[770,5884,5886],{"className":2017,"code":5885,"language":2019,"meta":776,"style":776},"\u003Cdiv class=\"_box-shadow _hover:box-shadow:lg\" style=\"transition: box-shadow 0.2s\">\n    Hover me for elevation\n\u003C\u002Fdiv>\n",[702,5887,5888,5918,5923],{"__ignoreMap":776},[780,5889,5890,5892,5894,5896,5898,5900,5903,5905,5907,5909,5911,5914,5916],{"class":782,"line":783},[780,5891,2026],{"class":790},[780,5893,2029],{"class":889},[780,5895,2032],{"class":849},[780,5897,856],{"class":790},[780,5899,811],{"class":790},[780,5901,5902],{"class":807},"_box-shadow _hover:box-shadow:lg",[780,5904,811],{"class":790},[780,5906,5071],{"class":849},[780,5908,856],{"class":790},[780,5910,811],{"class":790},[780,5912,5913],{"class":807},"transition: box-shadow 0.2s",[780,5915,811],{"class":790},[780,5917,2055],{"class":790},[780,5919,5920],{"class":782,"line":817},[780,5921,5922],{"class":794},"    Hover me for elevation\n",[780,5924,5925,5927,5929],{"class":782,"line":840},[780,5926,2050],{"class":790},[780,5928,2029],{"class":889},[780,5930,2055],{"class":790},[5101,5932,5934],{"id":5933},"faded-overlay","Faded Overlay",[763,5936,5937,6133],{},[766,5938,5939],{"icon":768,"label":290},[770,5940,5942],{"className":772,"code":5941,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useOpacityUtility } from \"@styleframe\u002Ftheme\";\nimport { useBackgroundColorUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nuseBackgroundColorUtility(s, {\n    black: '#000',\n});\n\nuseOpacityUtility(s, {\n    '50': '0.5',\n    '75': '0.75',\n});\n\nexport default s;\n",[702,5943,5944,5964,5984,6005,6009,6023,6027,6038,6053,6061,6065,6075,6093,6111,6119,6123],{"__ignoreMap":776},[780,5945,5946,5948,5950,5952,5954,5956,5958,5960,5962],{"class":782,"line":783},[780,5947,787],{"class":786},[780,5949,791],{"class":790},[780,5951,795],{"class":794},[780,5953,798],{"class":790},[780,5955,801],{"class":786},[780,5957,804],{"class":790},[780,5959,808],{"class":807},[780,5961,811],{"class":790},[780,5963,814],{"class":790},[780,5965,5966,5968,5970,5972,5974,5976,5978,5980,5982],{"class":782,"line":817},[780,5967,787],{"class":786},[780,5969,791],{"class":790},[780,5971,2588],{"class":794},[780,5973,798],{"class":790},[780,5975,801],{"class":786},[780,5977,804],{"class":790},[780,5979,833],{"class":807},[780,5981,811],{"class":790},[780,5983,814],{"class":790},[780,5985,5986,5988,5990,5993,5995,5997,5999,6001,6003],{"class":782,"line":840},[780,5987,787],{"class":786},[780,5989,791],{"class":790},[780,5991,5992],{"class":794}," useBackgroundColorUtility",[780,5994,798],{"class":790},[780,5996,801],{"class":786},[780,5998,804],{"class":790},[780,6000,833],{"class":807},[780,6002,811],{"class":790},[780,6004,814],{"class":790},[780,6006,6007],{"class":782,"line":846},[780,6008,843],{"emptyLinePlaceholder":223},[780,6010,6011,6013,6015,6017,6019,6021],{"class":782,"line":867},[780,6012,850],{"class":849},[780,6014,853],{"class":794},[780,6016,856],{"class":790},[780,6018,795],{"class":859},[780,6020,862],{"class":794},[780,6022,814],{"class":790},[780,6024,6025],{"class":782,"line":872},[780,6026,843],{"emptyLinePlaceholder":223},[780,6028,6029,6032,6034,6036],{"class":782,"line":886},[780,6030,6031],{"class":859},"useBackgroundColorUtility",[780,6033,877],{"class":794},[780,6035,880],{"class":790},[780,6037,883],{"class":790},[780,6039,6040,6042,6044,6046,6049,6051],{"class":782,"line":908},[780,6041,2351],{"class":889},[780,6043,893],{"class":790},[780,6045,896],{"class":790},[780,6047,6048],{"class":807},"#000",[780,6050,902],{"class":790},[780,6052,905],{"class":790},[780,6054,6055,6057,6059],{"class":782,"line":925},[780,6056,1035],{"class":790},[780,6058,1038],{"class":794},[780,6060,814],{"class":790},[780,6062,6063],{"class":782,"line":942},[780,6064,843],{"emptyLinePlaceholder":223},[780,6066,6067,6069,6071,6073],{"class":782,"line":959},[780,6068,2544],{"class":859},[780,6070,877],{"class":794},[780,6072,880],{"class":790},[780,6074,883],{"class":790},[780,6076,6077,6079,6081,6083,6085,6087,6089,6091],{"class":782,"line":976},[780,6078,979],{"class":790},[780,6080,2774],{"class":889},[780,6082,902],{"class":790},[780,6084,893],{"class":790},[780,6086,896],{"class":790},[780,6088,2783],{"class":807},[780,6090,902],{"class":790},[780,6092,905],{"class":790},[780,6094,6095,6097,6099,6101,6103,6105,6107,6109],{"class":782,"line":998},[780,6096,979],{"class":790},[780,6098,2834],{"class":889},[780,6100,902],{"class":790},[780,6102,893],{"class":790},[780,6104,896],{"class":790},[780,6106,2843],{"class":807},[780,6108,902],{"class":790},[780,6110,905],{"class":790},[780,6112,6113,6115,6117],{"class":782,"line":1015},[780,6114,1035],{"class":790},[780,6116,1038],{"class":794},[780,6118,814],{"class":790},[780,6120,6121],{"class":782,"line":1032},[780,6122,843],{"emptyLinePlaceholder":223},[780,6124,6125,6127,6129,6131],{"class":782,"line":1043},[780,6126,1051],{"class":786},[780,6128,1054],{"class":786},[780,6130,1057],{"class":794},[780,6132,814],{"class":790},[766,6134,6135],{"icon":154,"label":326},[770,6136,6138],{"className":1064,"code":6137,"filename":1066,"language":1067,"meta":776,"style":776},"._bg\\:black { background-color: #000; }\n\n._opacity\\:50 { opacity: 0.5; }\n._opacity\\:75 { opacity: 0.75; }\n",[702,6139,6140,6167,6171,6193],{"__ignoreMap":776},[780,6141,6142,6144,6147,6149,6151,6153,6156,6158,6160,6163,6165],{"class":782,"line":783},[780,6143,1074],{"class":790},[780,6145,6146],{"class":1077},"_bg",[780,6148,1081],{"class":794},[780,6150,2479],{"class":1077},[780,6152,791],{"class":790},[780,6154,6155],{"class":1132}," background-color",[780,6157,893],{"class":790},[780,6159,1152],{"class":790},[780,6161,6162],{"class":794},"000",[780,6164,2978],{"class":790},[780,6166,2468],{"class":790},[780,6168,6169],{"class":782,"line":817},[780,6170,843],{"emptyLinePlaceholder":223},[780,6172,6173,6175,6177,6179,6181,6183,6185,6187,6189,6191],{"class":782,"line":840},[780,6174,1074],{"class":790},[780,6176,2962],{"class":1077},[780,6178,1081],{"class":794},[780,6180,2774],{"class":1077},[780,6182,791],{"class":790},[780,6184,2971],{"class":1132},[780,6186,893],{"class":790},[780,6188,3137],{"class":1096},[780,6190,2978],{"class":790},[780,6192,2468],{"class":790},[780,6194,6195,6197,6199,6201,6203,6205,6207,6209,6211,6213],{"class":782,"line":846},[780,6196,1074],{"class":790},[780,6198,2962],{"class":1077},[780,6200,1081],{"class":794},[780,6202,2834],{"class":1077},[780,6204,791],{"class":790},[780,6206,2971],{"class":1132},[780,6208,893],{"class":790},[780,6210,3206],{"class":1096},[780,6212,2978],{"class":790},[780,6214,2468],{"class":790},[711,6216,5882],{},[770,6218,6220],{"className":2017,"code":6219,"language":2019,"meta":776,"style":776},"\u003Cdiv class=\"image-container\" style=\"position: relative;\">\n    \u003Cimg src=\"hero.jpg\" alt=\"Hero\">\n    \u003Cdiv class=\"_bg:black _opacity:50\" style=\"position: absolute; inset: 0;\">\n        \u003C!-- Semi-transparent overlay -->\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[702,6221,6222,6252,6283,6313,6318,6327],{"__ignoreMap":776},[780,6223,6224,6226,6228,6230,6232,6234,6237,6239,6241,6243,6245,6248,6250],{"class":782,"line":783},[780,6225,2026],{"class":790},[780,6227,2029],{"class":889},[780,6229,2032],{"class":849},[780,6231,856],{"class":790},[780,6233,811],{"class":790},[780,6235,6236],{"class":807},"image-container",[780,6238,811],{"class":790},[780,6240,5071],{"class":849},[780,6242,856],{"class":790},[780,6244,811],{"class":790},[780,6246,6247],{"class":807},"position: relative;",[780,6249,811],{"class":790},[780,6251,2055],{"class":790},[780,6253,6254,6257,6259,6261,6263,6265,6268,6270,6272,6274,6276,6279,6281],{"class":782,"line":817},[780,6255,6256],{"class":790},"    \u003C",[780,6258,4666],{"class":889},[780,6260,4680],{"class":849},[780,6262,856],{"class":790},[780,6264,811],{"class":790},[780,6266,6267],{"class":807},"hero.jpg",[780,6269,811],{"class":790},[780,6271,4692],{"class":849},[780,6273,856],{"class":790},[780,6275,811],{"class":790},[780,6277,6278],{"class":807},"Hero",[780,6280,811],{"class":790},[780,6282,2055],{"class":790},[780,6284,6285,6287,6289,6291,6293,6295,6298,6300,6302,6304,6306,6309,6311],{"class":782,"line":840},[780,6286,6256],{"class":790},[780,6288,2029],{"class":889},[780,6290,2032],{"class":849},[780,6292,856],{"class":790},[780,6294,811],{"class":790},[780,6296,6297],{"class":807},"_bg:black _opacity:50",[780,6299,811],{"class":790},[780,6301,5071],{"class":849},[780,6303,856],{"class":790},[780,6305,811],{"class":790},[780,6307,6308],{"class":807},"position: absolute; inset: 0;",[780,6310,811],{"class":790},[780,6312,2055],{"class":790},[780,6314,6315],{"class":782,"line":846},[780,6316,6317],{"class":5280},"        \u003C!-- Semi-transparent overlay -->\n",[780,6319,6320,6323,6325],{"class":782,"line":867},[780,6321,6322],{"class":790},"    \u003C\u002F",[780,6324,2029],{"class":889},[780,6326,2055],{"class":790},[780,6328,6329,6331,6333],{"class":782,"line":872},[780,6330,2050],{"class":790},[780,6332,2029],{"class":889},[780,6334,2055],{"class":790},[707,6336,6338],{"id":6337},"best-practices","Best Practices",[722,6340,6341,6347,6353,6359,6365,6371],{},[725,6342,6343,6346],{},[692,6344,6345],{},"Use consistent shadow scales",": Define a shadow scale (sm, default, md, lg, xl) for consistent elevation",[725,6348,6349,6352],{},[692,6350,6351],{},"Consider dark mode",": Shadows may need adjustment for dark themes where they can look harsh",[725,6354,6355,6358],{},[692,6356,6357],{},"Animate with care",": Box shadows can be expensive to animate; consider using transform for hover effects when possible",[725,6360,6361,6364],{},[692,6362,6363],{},"Use opacity for overlays",": Opacity utilities work well for modal overlays and image tints",[725,6366,6367,6370],{},[692,6368,6369],{},"Test blend modes",": Blend mode effects vary significantly based on the colors involved",[725,6372,6373,6376],{},[692,6374,6375],{},"Combine with transitions",": Add CSS transitions for smooth shadow and opacity changes",[707,6378,6380],{"id":6379},"faq","FAQ",[6382,6383,6384,6392,6403,6414],"accordion",{},[6385,6386,757,6389,6391],"accordion-item",{"icon":6387,"label":6388},"i-lucide-circle-help","Why do shadows use CSS custom properties?",[702,6390,1184],{}," custom property allows shadows to be combined with ring utilities. Both use box-shadow, so the custom property approach lets them coexist without overwriting each other.",[6385,6393,6395,6398,6399,6402],{"icon":6387,"label":6394},"What's the difference between mix-blend-mode and background-blend-mode?",[702,6396,6397],{},"mix-blend-mode"," controls how an element blends with elements behind it. ",[702,6400,6401],{},"background-blend-mode"," controls how an element's background layers (image, color, gradient) blend with each other.",[6385,6404,6406,6407,6409,6410,6413],{"icon":6387,"label":6405},"Can I create colored shadows?","Yes, use ",[702,6408,2155],{}," to set shadow colors. This works best when combined with shadow utilities that use the ",[702,6411,6412],{},"--tw-shadow-color"," custom property.",[6385,6415,6417],{"icon":6387,"label":6416},"How do I animate opacity smoothly?","Add a CSS transition for opacity. Opacity is well-optimized for animations and won't cause layout shifts. Consider using modifiers with different opacity values for hover\u002Ffocus states.",[6419,6420,6421],"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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":776,"searchDepth":817,"depth":817,"links":6423},[6424,6425,6426,6427,6428,6429,6430,6431,6432,6436,6437],{"id":709,"depth":817,"text":78},{"id":716,"depth":817,"text":717},{"id":751,"depth":817,"text":754},{"id":2152,"depth":817,"text":2155},{"id":2541,"depth":817,"text":2544},{"id":3397,"depth":817,"text":3400},{"id":3838,"depth":817,"text":3841},{"id":4706,"depth":817,"text":4709},{"id":5098,"depth":817,"text":5099,"children":6433},[6434,6435],{"id":5103,"depth":840,"text":5104},{"id":5933,"depth":840,"text":5934},{"id":6337,"depth":817,"text":6338},{"id":6379,"depth":817,"text":6380},"Create effect utilities for shadows, opacity, and blend modes with full type safety.",null,{},{"title":585,"icon":119},{"title":684,"description":6438},"PuoeW5HCGsBPx3sA261Xq1B9NRbphOLQggyFF2fakLE",[6445,6447],{"title":180,"path":582,"stem":583,"description":6446,"icon":183,"children":-1},"Create border utilities for colors, widths, radiuses, styles, outlines, and focus rings with full type safety.",{"title":589,"path":590,"stem":591,"description":6448,"icon":592,"children":-1},"Create filter utilities for blur, brightness, contrast, grayscale, and backdrop effects with full type safety.",1781596351971]