[{"data":1,"prerenderedAt":3817},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-composables-interactivity":407,"-docs-theme-utilities-composables-interactivity-surround":3812},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":3804,"extension":3805,"links":3806,"meta":3807,"navigation":3808,"path":330,"seo":3809,"sitemap":3810,"stem":331,"__hash__":3811},"docs_theme/docs/theme/utilities/02.composables/07.interactivity.md","Interactivity Utilities",{"type":411,"value":412,"toc":3782},"minimark",[413,417,421,425,428,457,464,471,1279,1285,1288,1536,1542,1545,1868,1874,1877,2119,2125,2128,2597,2601,2608,2611,2689,2695,2698,2776,2782,2785,2895,2901,2904,2980,2986,2989,3099,3103,3107,3465,3469,3701,3705,3737,3741,3778],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"p",{},"Interactivity utilities help you control how users interact with elements including cursor styles, pointer events, text selection, scroll behavior, and touch actions.",[414,422,424],{"id":423},"why-use-interactivity-utilities","Why Use Interactivity Utilities?",[418,426,427],{},"Interactivity utilities help you:",[429,430,431,439,445,451],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Enhance user feedback",": Provide visual cues through cursor changes",[432,440,441,444],{},[435,442,443],{},"Control interactions",": Manage which elements respond to pointer events",[432,446,447,450],{},[435,448,449],{},"Improve accessibility",": Support various input methods including touch",[432,452,453,456],{},[435,454,455],{},"Customize scrolling",": Create smooth scroll experiences",[414,458,460],{"id":459},"usecursorutility",[461,462,463],"code",{},"useCursorUtility",[418,465,466,467,470],{},"The ",[461,468,469],{},"useCursorUtility()"," function creates utility classes for setting cursor styles.",[472,473,474,860,1177],"tabs",{},[475,476,479],"tabs-item",{"icon":477,"label":478},"i-lucide-code","Code",[480,481,487],"pre",{"className":482,"code":483,"filename":484,"language":485,"meta":486,"style":486},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useCursorUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseCursorUtility(s, {\n    auto: 'auto',\n    default: 'default',\n    pointer: 'pointer',\n    wait: 'wait',\n    text: 'text',\n    move: 'move',\n    help: 'help',\n    'not-allowed': 'not-allowed',\n    none: 'none',\n    grab: 'grab',\n    grabbing: 'grabbing',\n    'zoom-in': 'zoom-in',\n    'zoom-out': 'zoom-out',\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[461,488,489,525,548,554,575,580,594,616,633,650,667,684,701,718,739,756,773,790,810,830,841,846],{"__ignoreMap":486},[490,491,494,498,502,506,509,512,515,519,522],"span",{"class":492,"line":493},"line",1,[490,495,497],{"class":496},"s7zQu","import",[490,499,501],{"class":500},"sMK4o"," {",[490,503,505],{"class":504},"sTEyZ"," styleframe",[490,507,508],{"class":500}," }",[490,510,511],{"class":496}," from",[490,513,514],{"class":500}," \"",[490,516,518],{"class":517},"sfazB","styleframe",[490,520,521],{"class":500},"\"",[490,523,524],{"class":500},";\n",[490,526,528,530,532,535,537,539,541,544,546],{"class":492,"line":527},2,[490,529,497],{"class":496},[490,531,501],{"class":500},[490,533,534],{"class":504}," useCursorUtility",[490,536,508],{"class":500},[490,538,511],{"class":496},[490,540,514],{"class":500},[490,542,543],{"class":517},"@styleframe/theme",[490,545,521],{"class":500},[490,547,524],{"class":500},[490,549,551],{"class":492,"line":550},3,[490,552,553],{"emptyLinePlaceholder":206},"\n",[490,555,557,561,564,567,570,573],{"class":492,"line":556},4,[490,558,560],{"class":559},"spNyl","const",[490,562,563],{"class":504}," s ",[490,565,566],{"class":500},"=",[490,568,505],{"class":569},"s2Zo4",[490,571,572],{"class":504},"()",[490,574,524],{"class":500},[490,576,578],{"class":492,"line":577},5,[490,579,553],{"emptyLinePlaceholder":206},[490,581,583,585,588,591],{"class":492,"line":582},6,[490,584,463],{"class":569},[490,586,587],{"class":504},"(s",[490,589,590],{"class":500},",",[490,592,593],{"class":500}," {\n",[490,595,597,601,604,607,610,613],{"class":492,"line":596},7,[490,598,600],{"class":599},"swJcz","    auto",[490,602,603],{"class":500},":",[490,605,606],{"class":500}," '",[490,608,609],{"class":517},"auto",[490,611,612],{"class":500},"'",[490,614,615],{"class":500},",\n",[490,617,619,622,624,626,629,631],{"class":492,"line":618},8,[490,620,621],{"class":599},"    default",[490,623,603],{"class":500},[490,625,606],{"class":500},[490,627,628],{"class":517},"default",[490,630,612],{"class":500},[490,632,615],{"class":500},[490,634,636,639,641,643,646,648],{"class":492,"line":635},9,[490,637,638],{"class":599},"    pointer",[490,640,603],{"class":500},[490,642,606],{"class":500},[490,644,645],{"class":517},"pointer",[490,647,612],{"class":500},[490,649,615],{"class":500},[490,651,653,656,658,660,663,665],{"class":492,"line":652},10,[490,654,655],{"class":599},"    wait",[490,657,603],{"class":500},[490,659,606],{"class":500},[490,661,662],{"class":517},"wait",[490,664,612],{"class":500},[490,666,615],{"class":500},[490,668,670,673,675,677,680,682],{"class":492,"line":669},11,[490,671,672],{"class":599},"    text",[490,674,603],{"class":500},[490,676,606],{"class":500},[490,678,679],{"class":517},"text",[490,681,612],{"class":500},[490,683,615],{"class":500},[490,685,687,690,692,694,697,699],{"class":492,"line":686},12,[490,688,689],{"class":599},"    move",[490,691,603],{"class":500},[490,693,606],{"class":500},[490,695,696],{"class":517},"move",[490,698,612],{"class":500},[490,700,615],{"class":500},[490,702,704,707,709,711,714,716],{"class":492,"line":703},13,[490,705,706],{"class":599},"    help",[490,708,603],{"class":500},[490,710,606],{"class":500},[490,712,713],{"class":517},"help",[490,715,612],{"class":500},[490,717,615],{"class":500},[490,719,721,724,727,729,731,733,735,737],{"class":492,"line":720},14,[490,722,723],{"class":500},"    '",[490,725,726],{"class":599},"not-allowed",[490,728,612],{"class":500},[490,730,603],{"class":500},[490,732,606],{"class":500},[490,734,726],{"class":517},[490,736,612],{"class":500},[490,738,615],{"class":500},[490,740,742,745,747,749,752,754],{"class":492,"line":741},15,[490,743,744],{"class":599},"    none",[490,746,603],{"class":500},[490,748,606],{"class":500},[490,750,751],{"class":517},"none",[490,753,612],{"class":500},[490,755,615],{"class":500},[490,757,759,762,764,766,769,771],{"class":492,"line":758},16,[490,760,761],{"class":599},"    grab",[490,763,603],{"class":500},[490,765,606],{"class":500},[490,767,768],{"class":517},"grab",[490,770,612],{"class":500},[490,772,615],{"class":500},[490,774,776,779,781,783,786,788],{"class":492,"line":775},17,[490,777,778],{"class":599},"    grabbing",[490,780,603],{"class":500},[490,782,606],{"class":500},[490,784,785],{"class":517},"grabbing",[490,787,612],{"class":500},[490,789,615],{"class":500},[490,791,793,795,798,800,802,804,806,808],{"class":492,"line":792},18,[490,794,723],{"class":500},[490,796,797],{"class":599},"zoom-in",[490,799,612],{"class":500},[490,801,603],{"class":500},[490,803,606],{"class":500},[490,805,797],{"class":517},[490,807,612],{"class":500},[490,809,615],{"class":500},[490,811,813,815,818,820,822,824,826,828],{"class":492,"line":812},19,[490,814,723],{"class":500},[490,816,817],{"class":599},"zoom-out",[490,819,612],{"class":500},[490,821,603],{"class":500},[490,823,606],{"class":500},[490,825,817],{"class":517},[490,827,612],{"class":500},[490,829,615],{"class":500},[490,831,833,836,839],{"class":492,"line":832},20,[490,834,835],{"class":500},"}",[490,837,838],{"class":504},")",[490,840,524],{"class":500},[490,842,844],{"class":492,"line":843},21,[490,845,553],{"emptyLinePlaceholder":206},[490,847,849,852,855,858],{"class":492,"line":848},22,[490,850,851],{"class":496},"export",[490,853,854],{"class":496}," default",[490,856,857],{"class":504}," s",[490,859,524],{"class":500},[475,861,863],{"icon":140,"label":862},"Output",[480,864,869],{"className":865,"code":866,"filename":867,"language":868,"meta":486,"style":486},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._cursor\\:auto { cursor: auto; }\n._cursor\\:default { cursor: default; }\n._cursor\\:pointer { cursor: pointer; }\n._cursor\\:wait { cursor: wait; }\n._cursor\\:text { cursor: text; }\n._cursor\\:move { cursor: move; }\n._cursor\\:help { cursor: help; }\n._cursor\\:not-allowed { cursor: not-allowed; }\n._cursor\\:none { cursor: none; }\n._cursor\\:grab { cursor: grab; }\n._cursor\\:grabbing { cursor: grabbing; }\n._cursor\\:zoom-in { cursor: zoom-in; }\n._cursor\\:zoom-out { cursor: zoom-out; }\n","styleframe/index.css","css",[461,870,871,902,924,947,970,993,1016,1039,1062,1085,1108,1131,1154],{"__ignoreMap":486},[490,872,873,876,880,883,885,887,891,893,896,899],{"class":492,"line":493},[490,874,875],{"class":500},".",[490,877,879],{"class":878},"sBMFI","_cursor",[490,881,882],{"class":504},"\\:",[490,884,609],{"class":878},[490,886,501],{"class":500},[490,888,890],{"class":889},"sqsOY"," cursor",[490,892,603],{"class":500},[490,894,895],{"class":504}," auto",[490,897,898],{"class":500},";",[490,900,901],{"class":500}," }\n",[490,903,904,906,908,910,912,914,916,918,920,922],{"class":492,"line":527},[490,905,875],{"class":500},[490,907,879],{"class":878},[490,909,882],{"class":504},[490,911,628],{"class":878},[490,913,501],{"class":500},[490,915,890],{"class":889},[490,917,603],{"class":500},[490,919,854],{"class":504},[490,921,898],{"class":500},[490,923,901],{"class":500},[490,925,926,928,930,932,934,936,938,940,943,945],{"class":492,"line":550},[490,927,875],{"class":500},[490,929,879],{"class":878},[490,931,882],{"class":504},[490,933,645],{"class":878},[490,935,501],{"class":500},[490,937,890],{"class":889},[490,939,603],{"class":500},[490,941,942],{"class":504}," pointer",[490,944,898],{"class":500},[490,946,901],{"class":500},[490,948,949,951,953,955,957,959,961,963,966,968],{"class":492,"line":556},[490,950,875],{"class":500},[490,952,879],{"class":878},[490,954,882],{"class":504},[490,956,662],{"class":878},[490,958,501],{"class":500},[490,960,890],{"class":889},[490,962,603],{"class":500},[490,964,965],{"class":504}," wait",[490,967,898],{"class":500},[490,969,901],{"class":500},[490,971,972,974,976,978,980,982,984,986,989,991],{"class":492,"line":577},[490,973,875],{"class":500},[490,975,879],{"class":878},[490,977,882],{"class":504},[490,979,679],{"class":878},[490,981,501],{"class":500},[490,983,890],{"class":889},[490,985,603],{"class":500},[490,987,988],{"class":504}," text",[490,990,898],{"class":500},[490,992,901],{"class":500},[490,994,995,997,999,1001,1003,1005,1007,1009,1012,1014],{"class":492,"line":582},[490,996,875],{"class":500},[490,998,879],{"class":878},[490,1000,882],{"class":504},[490,1002,696],{"class":878},[490,1004,501],{"class":500},[490,1006,890],{"class":889},[490,1008,603],{"class":500},[490,1010,1011],{"class":504}," move",[490,1013,898],{"class":500},[490,1015,901],{"class":500},[490,1017,1018,1020,1022,1024,1026,1028,1030,1032,1035,1037],{"class":492,"line":596},[490,1019,875],{"class":500},[490,1021,879],{"class":878},[490,1023,882],{"class":504},[490,1025,713],{"class":878},[490,1027,501],{"class":500},[490,1029,890],{"class":889},[490,1031,603],{"class":500},[490,1033,1034],{"class":504}," help",[490,1036,898],{"class":500},[490,1038,901],{"class":500},[490,1040,1041,1043,1045,1047,1049,1051,1053,1055,1058,1060],{"class":492,"line":618},[490,1042,875],{"class":500},[490,1044,879],{"class":878},[490,1046,882],{"class":504},[490,1048,726],{"class":878},[490,1050,501],{"class":500},[490,1052,890],{"class":889},[490,1054,603],{"class":500},[490,1056,1057],{"class":504}," not-allowed",[490,1059,898],{"class":500},[490,1061,901],{"class":500},[490,1063,1064,1066,1068,1070,1072,1074,1076,1078,1081,1083],{"class":492,"line":635},[490,1065,875],{"class":500},[490,1067,879],{"class":878},[490,1069,882],{"class":504},[490,1071,751],{"class":878},[490,1073,501],{"class":500},[490,1075,890],{"class":889},[490,1077,603],{"class":500},[490,1079,1080],{"class":504}," none",[490,1082,898],{"class":500},[490,1084,901],{"class":500},[490,1086,1087,1089,1091,1093,1095,1097,1099,1101,1104,1106],{"class":492,"line":652},[490,1088,875],{"class":500},[490,1090,879],{"class":878},[490,1092,882],{"class":504},[490,1094,768],{"class":878},[490,1096,501],{"class":500},[490,1098,890],{"class":889},[490,1100,603],{"class":500},[490,1102,1103],{"class":504}," grab",[490,1105,898],{"class":500},[490,1107,901],{"class":500},[490,1109,1110,1112,1114,1116,1118,1120,1122,1124,1127,1129],{"class":492,"line":669},[490,1111,875],{"class":500},[490,1113,879],{"class":878},[490,1115,882],{"class":504},[490,1117,785],{"class":878},[490,1119,501],{"class":500},[490,1121,890],{"class":889},[490,1123,603],{"class":500},[490,1125,1126],{"class":504}," grabbing",[490,1128,898],{"class":500},[490,1130,901],{"class":500},[490,1132,1133,1135,1137,1139,1141,1143,1145,1147,1150,1152],{"class":492,"line":686},[490,1134,875],{"class":500},[490,1136,879],{"class":878},[490,1138,882],{"class":504},[490,1140,797],{"class":878},[490,1142,501],{"class":500},[490,1144,890],{"class":889},[490,1146,603],{"class":500},[490,1148,1149],{"class":504}," zoom-in",[490,1151,898],{"class":500},[490,1153,901],{"class":500},[490,1155,1156,1158,1160,1162,1164,1166,1168,1170,1173,1175],{"class":492,"line":703},[490,1157,875],{"class":500},[490,1159,879],{"class":878},[490,1161,882],{"class":504},[490,1163,817],{"class":878},[490,1165,501],{"class":500},[490,1167,890],{"class":889},[490,1169,603],{"class":500},[490,1171,1172],{"class":504}," zoom-out",[490,1174,898],{"class":500},[490,1176,901],{"class":500},[475,1178,1181],{"icon":1179,"label":1180},"i-lucide-layout","Usage",[480,1182,1186],{"className":1183,"code":1184,"language":1185,"meta":486,"style":486},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton class=\"_cursor:pointer\">Clickable button\u003C/button>\n\u003Cdiv class=\"_cursor:not-allowed\">Disabled area\u003C/div>\n\u003Cdiv class=\"_cursor:grab\">Draggable element\u003C/div>\n","html",[461,1187,1188,1222,1251],{"__ignoreMap":486},[490,1189,1190,1193,1196,1199,1201,1203,1206,1208,1211,1214,1217,1219],{"class":492,"line":493},[490,1191,1192],{"class":500},"\u003C",[490,1194,1195],{"class":599},"button",[490,1197,1198],{"class":559}," class",[490,1200,566],{"class":500},[490,1202,521],{"class":500},[490,1204,1205],{"class":517},"_cursor:pointer",[490,1207,521],{"class":500},[490,1209,1210],{"class":500},">",[490,1212,1213],{"class":504},"Clickable button",[490,1215,1216],{"class":500},"\u003C/",[490,1218,1195],{"class":599},[490,1220,1221],{"class":500},">\n",[490,1223,1224,1226,1229,1231,1233,1235,1238,1240,1242,1245,1247,1249],{"class":492,"line":527},[490,1225,1192],{"class":500},[490,1227,1228],{"class":599},"div",[490,1230,1198],{"class":559},[490,1232,566],{"class":500},[490,1234,521],{"class":500},[490,1236,1237],{"class":517},"_cursor:not-allowed",[490,1239,521],{"class":500},[490,1241,1210],{"class":500},[490,1243,1244],{"class":504},"Disabled area",[490,1246,1216],{"class":500},[490,1248,1228],{"class":599},[490,1250,1221],{"class":500},[490,1252,1253,1255,1257,1259,1261,1263,1266,1268,1270,1273,1275,1277],{"class":492,"line":550},[490,1254,1192],{"class":500},[490,1256,1228],{"class":599},[490,1258,1198],{"class":559},[490,1260,566],{"class":500},[490,1262,521],{"class":500},[490,1264,1265],{"class":517},"_cursor:grab",[490,1267,521],{"class":500},[490,1269,1210],{"class":500},[490,1271,1272],{"class":504},"Draggable element",[490,1274,1216],{"class":500},[490,1276,1228],{"class":599},[490,1278,1221],{"class":500},[414,1280,1282],{"id":1281},"usepointereventsutility",[461,1283,1284],{},"usePointerEventsUtility",[418,1286,1287],{},"Control whether an element responds to pointer events.",[472,1289,1290,1420,1473],{},[475,1291,1292],{"icon":477,"label":478},[480,1293,1295],{"className":482,"code":1294,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { usePointerEventsUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nusePointerEventsUtility(s, {\n    none: 'none',\n    auto: 'auto',\n});\n\nexport default s;\n",[461,1296,1297,1317,1338,1342,1356,1360,1370,1384,1398,1406,1410],{"__ignoreMap":486},[490,1298,1299,1301,1303,1305,1307,1309,1311,1313,1315],{"class":492,"line":493},[490,1300,497],{"class":496},[490,1302,501],{"class":500},[490,1304,505],{"class":504},[490,1306,508],{"class":500},[490,1308,511],{"class":496},[490,1310,514],{"class":500},[490,1312,518],{"class":517},[490,1314,521],{"class":500},[490,1316,524],{"class":500},[490,1318,1319,1321,1323,1326,1328,1330,1332,1334,1336],{"class":492,"line":527},[490,1320,497],{"class":496},[490,1322,501],{"class":500},[490,1324,1325],{"class":504}," usePointerEventsUtility",[490,1327,508],{"class":500},[490,1329,511],{"class":496},[490,1331,514],{"class":500},[490,1333,543],{"class":517},[490,1335,521],{"class":500},[490,1337,524],{"class":500},[490,1339,1340],{"class":492,"line":550},[490,1341,553],{"emptyLinePlaceholder":206},[490,1343,1344,1346,1348,1350,1352,1354],{"class":492,"line":556},[490,1345,560],{"class":559},[490,1347,563],{"class":504},[490,1349,566],{"class":500},[490,1351,505],{"class":569},[490,1353,572],{"class":504},[490,1355,524],{"class":500},[490,1357,1358],{"class":492,"line":577},[490,1359,553],{"emptyLinePlaceholder":206},[490,1361,1362,1364,1366,1368],{"class":492,"line":582},[490,1363,1284],{"class":569},[490,1365,587],{"class":504},[490,1367,590],{"class":500},[490,1369,593],{"class":500},[490,1371,1372,1374,1376,1378,1380,1382],{"class":492,"line":596},[490,1373,744],{"class":599},[490,1375,603],{"class":500},[490,1377,606],{"class":500},[490,1379,751],{"class":517},[490,1381,612],{"class":500},[490,1383,615],{"class":500},[490,1385,1386,1388,1390,1392,1394,1396],{"class":492,"line":618},[490,1387,600],{"class":599},[490,1389,603],{"class":500},[490,1391,606],{"class":500},[490,1393,609],{"class":517},[490,1395,612],{"class":500},[490,1397,615],{"class":500},[490,1399,1400,1402,1404],{"class":492,"line":635},[490,1401,835],{"class":500},[490,1403,838],{"class":504},[490,1405,524],{"class":500},[490,1407,1408],{"class":492,"line":652},[490,1409,553],{"emptyLinePlaceholder":206},[490,1411,1412,1414,1416,1418],{"class":492,"line":669},[490,1413,851],{"class":496},[490,1415,854],{"class":496},[490,1417,857],{"class":504},[490,1419,524],{"class":500},[475,1421,1422],{"icon":140,"label":862},[480,1423,1425],{"className":865,"code":1424,"filename":867,"language":868,"meta":486,"style":486},"._pointer-events\\:none { pointer-events: none; }\n._pointer-events\\:auto { pointer-events: auto; }\n",[461,1426,1427,1451],{"__ignoreMap":486},[490,1428,1429,1431,1434,1436,1438,1440,1443,1445,1447,1449],{"class":492,"line":493},[490,1430,875],{"class":500},[490,1432,1433],{"class":878},"_pointer-events",[490,1435,882],{"class":504},[490,1437,751],{"class":878},[490,1439,501],{"class":500},[490,1441,1442],{"class":889}," pointer-events",[490,1444,603],{"class":500},[490,1446,1080],{"class":504},[490,1448,898],{"class":500},[490,1450,901],{"class":500},[490,1452,1453,1455,1457,1459,1461,1463,1465,1467,1469,1471],{"class":492,"line":527},[490,1454,875],{"class":500},[490,1456,1433],{"class":878},[490,1458,882],{"class":504},[490,1460,609],{"class":878},[490,1462,501],{"class":500},[490,1464,1442],{"class":889},[490,1466,603],{"class":500},[490,1468,895],{"class":504},[490,1470,898],{"class":500},[490,1472,901],{"class":500},[475,1474,1475],{"icon":1179,"label":1180},[480,1476,1478],{"className":1183,"code":1477,"language":1185,"meta":486,"style":486},"\u003Cdiv class=\"_pointer-events:none\">Click passes through\u003C/div>\n\u003Cdiv class=\"_pointer-events:auto\">Normal click behavior\u003C/div>\n",[461,1479,1480,1508],{"__ignoreMap":486},[490,1481,1482,1484,1486,1488,1490,1492,1495,1497,1499,1502,1504,1506],{"class":492,"line":493},[490,1483,1192],{"class":500},[490,1485,1228],{"class":599},[490,1487,1198],{"class":559},[490,1489,566],{"class":500},[490,1491,521],{"class":500},[490,1493,1494],{"class":517},"_pointer-events:none",[490,1496,521],{"class":500},[490,1498,1210],{"class":500},[490,1500,1501],{"class":504},"Click passes through",[490,1503,1216],{"class":500},[490,1505,1228],{"class":599},[490,1507,1221],{"class":500},[490,1509,1510,1512,1514,1516,1518,1520,1523,1525,1527,1530,1532,1534],{"class":492,"line":527},[490,1511,1192],{"class":500},[490,1513,1228],{"class":599},[490,1515,1198],{"class":559},[490,1517,566],{"class":500},[490,1519,521],{"class":500},[490,1521,1522],{"class":517},"_pointer-events:auto",[490,1524,521],{"class":500},[490,1526,1210],{"class":500},[490,1528,1529],{"class":504},"Normal click behavior",[490,1531,1216],{"class":500},[490,1533,1228],{"class":599},[490,1535,1221],{"class":500},[414,1537,1539],{"id":1538},"useuserselectutility",[461,1540,1541],{},"useUserSelectUtility",[418,1543,1544],{},"Control text selection behavior.",[472,1546,1547,1707,1805],{},[475,1548,1549],{"icon":477,"label":478},[480,1550,1552],{"className":482,"code":1551,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useUserSelectUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseUserSelectUtility(s, {\n    none: 'none',\n    text: 'text',\n    all: 'all',\n    auto: 'auto',\n});\n\nexport default s;\n",[461,1553,1554,1574,1595,1599,1613,1617,1627,1641,1655,1671,1685,1693,1697],{"__ignoreMap":486},[490,1555,1556,1558,1560,1562,1564,1566,1568,1570,1572],{"class":492,"line":493},[490,1557,497],{"class":496},[490,1559,501],{"class":500},[490,1561,505],{"class":504},[490,1563,508],{"class":500},[490,1565,511],{"class":496},[490,1567,514],{"class":500},[490,1569,518],{"class":517},[490,1571,521],{"class":500},[490,1573,524],{"class":500},[490,1575,1576,1578,1580,1583,1585,1587,1589,1591,1593],{"class":492,"line":527},[490,1577,497],{"class":496},[490,1579,501],{"class":500},[490,1581,1582],{"class":504}," useUserSelectUtility",[490,1584,508],{"class":500},[490,1586,511],{"class":496},[490,1588,514],{"class":500},[490,1590,543],{"class":517},[490,1592,521],{"class":500},[490,1594,524],{"class":500},[490,1596,1597],{"class":492,"line":550},[490,1598,553],{"emptyLinePlaceholder":206},[490,1600,1601,1603,1605,1607,1609,1611],{"class":492,"line":556},[490,1602,560],{"class":559},[490,1604,563],{"class":504},[490,1606,566],{"class":500},[490,1608,505],{"class":569},[490,1610,572],{"class":504},[490,1612,524],{"class":500},[490,1614,1615],{"class":492,"line":577},[490,1616,553],{"emptyLinePlaceholder":206},[490,1618,1619,1621,1623,1625],{"class":492,"line":582},[490,1620,1541],{"class":569},[490,1622,587],{"class":504},[490,1624,590],{"class":500},[490,1626,593],{"class":500},[490,1628,1629,1631,1633,1635,1637,1639],{"class":492,"line":596},[490,1630,744],{"class":599},[490,1632,603],{"class":500},[490,1634,606],{"class":500},[490,1636,751],{"class":517},[490,1638,612],{"class":500},[490,1640,615],{"class":500},[490,1642,1643,1645,1647,1649,1651,1653],{"class":492,"line":618},[490,1644,672],{"class":599},[490,1646,603],{"class":500},[490,1648,606],{"class":500},[490,1650,679],{"class":517},[490,1652,612],{"class":500},[490,1654,615],{"class":500},[490,1656,1657,1660,1662,1664,1667,1669],{"class":492,"line":635},[490,1658,1659],{"class":599},"    all",[490,1661,603],{"class":500},[490,1663,606],{"class":500},[490,1665,1666],{"class":517},"all",[490,1668,612],{"class":500},[490,1670,615],{"class":500},[490,1672,1673,1675,1677,1679,1681,1683],{"class":492,"line":652},[490,1674,600],{"class":599},[490,1676,603],{"class":500},[490,1678,606],{"class":500},[490,1680,609],{"class":517},[490,1682,612],{"class":500},[490,1684,615],{"class":500},[490,1686,1687,1689,1691],{"class":492,"line":669},[490,1688,835],{"class":500},[490,1690,838],{"class":504},[490,1692,524],{"class":500},[490,1694,1695],{"class":492,"line":686},[490,1696,553],{"emptyLinePlaceholder":206},[490,1698,1699,1701,1703,1705],{"class":492,"line":703},[490,1700,851],{"class":496},[490,1702,854],{"class":496},[490,1704,857],{"class":504},[490,1706,524],{"class":500},[475,1708,1709],{"icon":140,"label":862},[480,1710,1712],{"className":865,"code":1711,"filename":867,"language":868,"meta":486,"style":486},"._user-select\\:none { user-select: none; }\n._user-select\\:text { user-select: text; }\n._user-select\\:all { user-select: all; }\n._user-select\\:auto { user-select: auto; }\n",[461,1713,1714,1738,1760,1783],{"__ignoreMap":486},[490,1715,1716,1718,1721,1723,1725,1727,1730,1732,1734,1736],{"class":492,"line":493},[490,1717,875],{"class":500},[490,1719,1720],{"class":878},"_user-select",[490,1722,882],{"class":504},[490,1724,751],{"class":878},[490,1726,501],{"class":500},[490,1728,1729],{"class":889}," user-select",[490,1731,603],{"class":500},[490,1733,1080],{"class":504},[490,1735,898],{"class":500},[490,1737,901],{"class":500},[490,1739,1740,1742,1744,1746,1748,1750,1752,1754,1756,1758],{"class":492,"line":527},[490,1741,875],{"class":500},[490,1743,1720],{"class":878},[490,1745,882],{"class":504},[490,1747,679],{"class":878},[490,1749,501],{"class":500},[490,1751,1729],{"class":889},[490,1753,603],{"class":500},[490,1755,988],{"class":504},[490,1757,898],{"class":500},[490,1759,901],{"class":500},[490,1761,1762,1764,1766,1768,1770,1772,1774,1776,1779,1781],{"class":492,"line":550},[490,1763,875],{"class":500},[490,1765,1720],{"class":878},[490,1767,882],{"class":504},[490,1769,1666],{"class":878},[490,1771,501],{"class":500},[490,1773,1729],{"class":889},[490,1775,603],{"class":500},[490,1777,1778],{"class":504}," all",[490,1780,898],{"class":500},[490,1782,901],{"class":500},[490,1784,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803],{"class":492,"line":556},[490,1786,875],{"class":500},[490,1788,1720],{"class":878},[490,1790,882],{"class":504},[490,1792,609],{"class":878},[490,1794,501],{"class":500},[490,1796,1729],{"class":889},[490,1798,603],{"class":500},[490,1800,895],{"class":504},[490,1802,898],{"class":500},[490,1804,901],{"class":500},[475,1806,1807],{"icon":1179,"label":1180},[480,1808,1810],{"className":1183,"code":1809,"language":1185,"meta":486,"style":486},"\u003Cbutton class=\"_user-select:none\">Can't select this text\u003C/button>\n\u003Ccode class=\"_user-select:all\">Click to select all\u003C/code>\n",[461,1811,1812,1840],{"__ignoreMap":486},[490,1813,1814,1816,1818,1820,1822,1824,1827,1829,1831,1834,1836,1838],{"class":492,"line":493},[490,1815,1192],{"class":500},[490,1817,1195],{"class":599},[490,1819,1198],{"class":559},[490,1821,566],{"class":500},[490,1823,521],{"class":500},[490,1825,1826],{"class":517},"_user-select:none",[490,1828,521],{"class":500},[490,1830,1210],{"class":500},[490,1832,1833],{"class":504},"Can't select this text",[490,1835,1216],{"class":500},[490,1837,1195],{"class":599},[490,1839,1221],{"class":500},[490,1841,1842,1844,1846,1848,1850,1852,1855,1857,1859,1862,1864,1866],{"class":492,"line":527},[490,1843,1192],{"class":500},[490,1845,461],{"class":599},[490,1847,1198],{"class":559},[490,1849,566],{"class":500},[490,1851,521],{"class":500},[490,1853,1854],{"class":517},"_user-select:all",[490,1856,521],{"class":500},[490,1858,1210],{"class":500},[490,1860,1861],{"class":504},"Click to select all",[490,1863,1216],{"class":500},[490,1865,461],{"class":599},[490,1867,1221],{"class":500},[414,1869,1871],{"id":1870},"usescrollbehaviorutility",[461,1872,1873],{},"useScrollBehaviorUtility",[418,1875,1876],{},"Control scroll animation behavior.",[472,1878,1879,2011,2065],{},[475,1880,1881],{"icon":477,"label":478},[480,1882,1884],{"className":482,"code":1883,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useScrollBehaviorUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseScrollBehaviorUtility(s, {\n    auto: 'auto',\n    smooth: 'smooth',\n});\n\nexport default s;\n",[461,1885,1886,1906,1927,1931,1945,1949,1959,1973,1989,1997,2001],{"__ignoreMap":486},[490,1887,1888,1890,1892,1894,1896,1898,1900,1902,1904],{"class":492,"line":493},[490,1889,497],{"class":496},[490,1891,501],{"class":500},[490,1893,505],{"class":504},[490,1895,508],{"class":500},[490,1897,511],{"class":496},[490,1899,514],{"class":500},[490,1901,518],{"class":517},[490,1903,521],{"class":500},[490,1905,524],{"class":500},[490,1907,1908,1910,1912,1915,1917,1919,1921,1923,1925],{"class":492,"line":527},[490,1909,497],{"class":496},[490,1911,501],{"class":500},[490,1913,1914],{"class":504}," useScrollBehaviorUtility",[490,1916,508],{"class":500},[490,1918,511],{"class":496},[490,1920,514],{"class":500},[490,1922,543],{"class":517},[490,1924,521],{"class":500},[490,1926,524],{"class":500},[490,1928,1929],{"class":492,"line":550},[490,1930,553],{"emptyLinePlaceholder":206},[490,1932,1933,1935,1937,1939,1941,1943],{"class":492,"line":556},[490,1934,560],{"class":559},[490,1936,563],{"class":504},[490,1938,566],{"class":500},[490,1940,505],{"class":569},[490,1942,572],{"class":504},[490,1944,524],{"class":500},[490,1946,1947],{"class":492,"line":577},[490,1948,553],{"emptyLinePlaceholder":206},[490,1950,1951,1953,1955,1957],{"class":492,"line":582},[490,1952,1873],{"class":569},[490,1954,587],{"class":504},[490,1956,590],{"class":500},[490,1958,593],{"class":500},[490,1960,1961,1963,1965,1967,1969,1971],{"class":492,"line":596},[490,1962,600],{"class":599},[490,1964,603],{"class":500},[490,1966,606],{"class":500},[490,1968,609],{"class":517},[490,1970,612],{"class":500},[490,1972,615],{"class":500},[490,1974,1975,1978,1980,1982,1985,1987],{"class":492,"line":618},[490,1976,1977],{"class":599},"    smooth",[490,1979,603],{"class":500},[490,1981,606],{"class":500},[490,1983,1984],{"class":517},"smooth",[490,1986,612],{"class":500},[490,1988,615],{"class":500},[490,1990,1991,1993,1995],{"class":492,"line":635},[490,1992,835],{"class":500},[490,1994,838],{"class":504},[490,1996,524],{"class":500},[490,1998,1999],{"class":492,"line":652},[490,2000,553],{"emptyLinePlaceholder":206},[490,2002,2003,2005,2007,2009],{"class":492,"line":669},[490,2004,851],{"class":496},[490,2006,854],{"class":496},[490,2008,857],{"class":504},[490,2010,524],{"class":500},[475,2012,2013],{"icon":140,"label":862},[480,2014,2016],{"className":865,"code":2015,"filename":867,"language":868,"meta":486,"style":486},"._scroll-behavior\\:auto { scroll-behavior: auto; }\n._scroll-behavior\\:smooth { scroll-behavior: smooth; }\n",[461,2017,2018,2042],{"__ignoreMap":486},[490,2019,2020,2022,2025,2027,2029,2031,2034,2036,2038,2040],{"class":492,"line":493},[490,2021,875],{"class":500},[490,2023,2024],{"class":878},"_scroll-behavior",[490,2026,882],{"class":504},[490,2028,609],{"class":878},[490,2030,501],{"class":500},[490,2032,2033],{"class":889}," scroll-behavior",[490,2035,603],{"class":500},[490,2037,895],{"class":504},[490,2039,898],{"class":500},[490,2041,901],{"class":500},[490,2043,2044,2046,2048,2050,2052,2054,2056,2058,2061,2063],{"class":492,"line":527},[490,2045,875],{"class":500},[490,2047,2024],{"class":878},[490,2049,882],{"class":504},[490,2051,1984],{"class":878},[490,2053,501],{"class":500},[490,2055,2033],{"class":889},[490,2057,603],{"class":500},[490,2059,2060],{"class":504}," smooth",[490,2062,898],{"class":500},[490,2064,901],{"class":500},[475,2066,2067],{"icon":1179,"label":1180},[480,2068,2070],{"className":1183,"code":2069,"language":1185,"meta":486,"style":486},"\u003Chtml class=\"_scroll-behavior:smooth\">\n\u003Cdiv class=\"_scroll-behavior:auto\">Instant scrolling container\u003C/div>\n",[461,2071,2072,2091],{"__ignoreMap":486},[490,2073,2074,2076,2078,2080,2082,2084,2087,2089],{"class":492,"line":493},[490,2075,1192],{"class":500},[490,2077,1185],{"class":599},[490,2079,1198],{"class":559},[490,2081,566],{"class":500},[490,2083,521],{"class":500},[490,2085,2086],{"class":517},"_scroll-behavior:smooth",[490,2088,521],{"class":500},[490,2090,1221],{"class":500},[490,2092,2093,2095,2097,2099,2101,2103,2106,2108,2110,2113,2115,2117],{"class":492,"line":527},[490,2094,1192],{"class":500},[490,2096,1228],{"class":599},[490,2098,1198],{"class":559},[490,2100,566],{"class":500},[490,2102,521],{"class":500},[490,2104,2105],{"class":517},"_scroll-behavior:auto",[490,2107,521],{"class":500},[490,2109,1210],{"class":500},[490,2111,2112],{"class":504},"Instant scrolling container",[490,2114,1216],{"class":500},[490,2116,1228],{"class":599},[490,2118,1221],{"class":500},[414,2120,2122],{"id":2121},"usetouchactionutility",[461,2123,2124],{},"useTouchActionUtility",[418,2126,2127],{},"Control how touch interactions are handled.",[472,2129,2130,2406,2534],{},[475,2131,2132],{"icon":477,"label":478},[480,2133,2135],{"className":482,"code":2134,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useTouchActionUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseTouchActionUtility(s, {\n    auto: 'auto',\n    none: 'none',\n    'pan-x': 'pan-x',\n    'pan-left': 'pan-left',\n    'pan-right': 'pan-right',\n    'pan-y': 'pan-y',\n    'pan-up': 'pan-up',\n    'pan-down': 'pan-down',\n    pinchZoom: 'pinch-zoom',\n    manipulation: 'manipulation',\n});\n\nexport default s;\n",[461,2136,2137,2157,2178,2182,2196,2200,2210,2224,2238,2257,2276,2295,2314,2333,2352,2368,2384,2392,2396],{"__ignoreMap":486},[490,2138,2139,2141,2143,2145,2147,2149,2151,2153,2155],{"class":492,"line":493},[490,2140,497],{"class":496},[490,2142,501],{"class":500},[490,2144,505],{"class":504},[490,2146,508],{"class":500},[490,2148,511],{"class":496},[490,2150,514],{"class":500},[490,2152,518],{"class":517},[490,2154,521],{"class":500},[490,2156,524],{"class":500},[490,2158,2159,2161,2163,2166,2168,2170,2172,2174,2176],{"class":492,"line":527},[490,2160,497],{"class":496},[490,2162,501],{"class":500},[490,2164,2165],{"class":504}," useTouchActionUtility",[490,2167,508],{"class":500},[490,2169,511],{"class":496},[490,2171,514],{"class":500},[490,2173,543],{"class":517},[490,2175,521],{"class":500},[490,2177,524],{"class":500},[490,2179,2180],{"class":492,"line":550},[490,2181,553],{"emptyLinePlaceholder":206},[490,2183,2184,2186,2188,2190,2192,2194],{"class":492,"line":556},[490,2185,560],{"class":559},[490,2187,563],{"class":504},[490,2189,566],{"class":500},[490,2191,505],{"class":569},[490,2193,572],{"class":504},[490,2195,524],{"class":500},[490,2197,2198],{"class":492,"line":577},[490,2199,553],{"emptyLinePlaceholder":206},[490,2201,2202,2204,2206,2208],{"class":492,"line":582},[490,2203,2124],{"class":569},[490,2205,587],{"class":504},[490,2207,590],{"class":500},[490,2209,593],{"class":500},[490,2211,2212,2214,2216,2218,2220,2222],{"class":492,"line":596},[490,2213,600],{"class":599},[490,2215,603],{"class":500},[490,2217,606],{"class":500},[490,2219,609],{"class":517},[490,2221,612],{"class":500},[490,2223,615],{"class":500},[490,2225,2226,2228,2230,2232,2234,2236],{"class":492,"line":618},[490,2227,744],{"class":599},[490,2229,603],{"class":500},[490,2231,606],{"class":500},[490,2233,751],{"class":517},[490,2235,612],{"class":500},[490,2237,615],{"class":500},[490,2239,2240,2242,2245,2247,2249,2251,2253,2255],{"class":492,"line":635},[490,2241,723],{"class":500},[490,2243,2244],{"class":599},"pan-x",[490,2246,612],{"class":500},[490,2248,603],{"class":500},[490,2250,606],{"class":500},[490,2252,2244],{"class":517},[490,2254,612],{"class":500},[490,2256,615],{"class":500},[490,2258,2259,2261,2264,2266,2268,2270,2272,2274],{"class":492,"line":652},[490,2260,723],{"class":500},[490,2262,2263],{"class":599},"pan-left",[490,2265,612],{"class":500},[490,2267,603],{"class":500},[490,2269,606],{"class":500},[490,2271,2263],{"class":517},[490,2273,612],{"class":500},[490,2275,615],{"class":500},[490,2277,2278,2280,2283,2285,2287,2289,2291,2293],{"class":492,"line":669},[490,2279,723],{"class":500},[490,2281,2282],{"class":599},"pan-right",[490,2284,612],{"class":500},[490,2286,603],{"class":500},[490,2288,606],{"class":500},[490,2290,2282],{"class":517},[490,2292,612],{"class":500},[490,2294,615],{"class":500},[490,2296,2297,2299,2302,2304,2306,2308,2310,2312],{"class":492,"line":686},[490,2298,723],{"class":500},[490,2300,2301],{"class":599},"pan-y",[490,2303,612],{"class":500},[490,2305,603],{"class":500},[490,2307,606],{"class":500},[490,2309,2301],{"class":517},[490,2311,612],{"class":500},[490,2313,615],{"class":500},[490,2315,2316,2318,2321,2323,2325,2327,2329,2331],{"class":492,"line":703},[490,2317,723],{"class":500},[490,2319,2320],{"class":599},"pan-up",[490,2322,612],{"class":500},[490,2324,603],{"class":500},[490,2326,606],{"class":500},[490,2328,2320],{"class":517},[490,2330,612],{"class":500},[490,2332,615],{"class":500},[490,2334,2335,2337,2340,2342,2344,2346,2348,2350],{"class":492,"line":720},[490,2336,723],{"class":500},[490,2338,2339],{"class":599},"pan-down",[490,2341,612],{"class":500},[490,2343,603],{"class":500},[490,2345,606],{"class":500},[490,2347,2339],{"class":517},[490,2349,612],{"class":500},[490,2351,615],{"class":500},[490,2353,2354,2357,2359,2361,2364,2366],{"class":492,"line":741},[490,2355,2356],{"class":599},"    pinchZoom",[490,2358,603],{"class":500},[490,2360,606],{"class":500},[490,2362,2363],{"class":517},"pinch-zoom",[490,2365,612],{"class":500},[490,2367,615],{"class":500},[490,2369,2370,2373,2375,2377,2380,2382],{"class":492,"line":758},[490,2371,2372],{"class":599},"    manipulation",[490,2374,603],{"class":500},[490,2376,606],{"class":500},[490,2378,2379],{"class":517},"manipulation",[490,2381,612],{"class":500},[490,2383,615],{"class":500},[490,2385,2386,2388,2390],{"class":492,"line":775},[490,2387,835],{"class":500},[490,2389,838],{"class":504},[490,2391,524],{"class":500},[490,2393,2394],{"class":492,"line":792},[490,2395,553],{"emptyLinePlaceholder":206},[490,2397,2398,2400,2402,2404],{"class":492,"line":812},[490,2399,851],{"class":496},[490,2401,854],{"class":496},[490,2403,857],{"class":504},[490,2405,524],{"class":500},[475,2407,2408],{"icon":140,"label":862},[480,2409,2411],{"className":865,"code":2410,"filename":867,"language":868,"meta":486,"style":486},"._touch-action\\:auto { touch-action: auto; }\n._touch-action\\:none { touch-action: none; }\n._touch-action\\:pan-x { touch-action: pan-x; }\n._touch-action\\:pan-y { touch-action: pan-y; }\n._touch-action\\:manipulation { touch-action: manipulation; }\n/* ... more values */\n",[461,2412,2413,2437,2459,2482,2505,2528],{"__ignoreMap":486},[490,2414,2415,2417,2420,2422,2424,2426,2429,2431,2433,2435],{"class":492,"line":493},[490,2416,875],{"class":500},[490,2418,2419],{"class":878},"_touch-action",[490,2421,882],{"class":504},[490,2423,609],{"class":878},[490,2425,501],{"class":500},[490,2427,2428],{"class":889}," touch-action",[490,2430,603],{"class":500},[490,2432,895],{"class":504},[490,2434,898],{"class":500},[490,2436,901],{"class":500},[490,2438,2439,2441,2443,2445,2447,2449,2451,2453,2455,2457],{"class":492,"line":527},[490,2440,875],{"class":500},[490,2442,2419],{"class":878},[490,2444,882],{"class":504},[490,2446,751],{"class":878},[490,2448,501],{"class":500},[490,2450,2428],{"class":889},[490,2452,603],{"class":500},[490,2454,1080],{"class":504},[490,2456,898],{"class":500},[490,2458,901],{"class":500},[490,2460,2461,2463,2465,2467,2469,2471,2473,2475,2478,2480],{"class":492,"line":550},[490,2462,875],{"class":500},[490,2464,2419],{"class":878},[490,2466,882],{"class":504},[490,2468,2244],{"class":878},[490,2470,501],{"class":500},[490,2472,2428],{"class":889},[490,2474,603],{"class":500},[490,2476,2477],{"class":504}," pan-x",[490,2479,898],{"class":500},[490,2481,901],{"class":500},[490,2483,2484,2486,2488,2490,2492,2494,2496,2498,2501,2503],{"class":492,"line":556},[490,2485,875],{"class":500},[490,2487,2419],{"class":878},[490,2489,882],{"class":504},[490,2491,2301],{"class":878},[490,2493,501],{"class":500},[490,2495,2428],{"class":889},[490,2497,603],{"class":500},[490,2499,2500],{"class":504}," pan-y",[490,2502,898],{"class":500},[490,2504,901],{"class":500},[490,2506,2507,2509,2511,2513,2515,2517,2519,2521,2524,2526],{"class":492,"line":577},[490,2508,875],{"class":500},[490,2510,2419],{"class":878},[490,2512,882],{"class":504},[490,2514,2379],{"class":878},[490,2516,501],{"class":500},[490,2518,2428],{"class":889},[490,2520,603],{"class":500},[490,2522,2523],{"class":504}," manipulation",[490,2525,898],{"class":500},[490,2527,901],{"class":500},[490,2529,2530],{"class":492,"line":582},[490,2531,2533],{"class":2532},"sHwdD","/* ... more values */\n",[475,2535,2536],{"icon":1179,"label":1180},[480,2537,2539],{"className":1183,"code":2538,"language":1185,"meta":486,"style":486},"\u003Cdiv class=\"_touch-action:none\">Disable all touch gestures\u003C/div>\n\u003Cbutton class=\"_touch-action:manipulation\">Fast tap response\u003C/button>\n",[461,2540,2541,2569],{"__ignoreMap":486},[490,2542,2543,2545,2547,2549,2551,2553,2556,2558,2560,2563,2565,2567],{"class":492,"line":493},[490,2544,1192],{"class":500},[490,2546,1228],{"class":599},[490,2548,1198],{"class":559},[490,2550,566],{"class":500},[490,2552,521],{"class":500},[490,2554,2555],{"class":517},"_touch-action:none",[490,2557,521],{"class":500},[490,2559,1210],{"class":500},[490,2561,2562],{"class":504},"Disable all touch gestures",[490,2564,1216],{"class":500},[490,2566,1228],{"class":599},[490,2568,1221],{"class":500},[490,2570,2571,2573,2575,2577,2579,2581,2584,2586,2588,2591,2593,2595],{"class":492,"line":527},[490,2572,1192],{"class":500},[490,2574,1195],{"class":599},[490,2576,1198],{"class":559},[490,2578,566],{"class":500},[490,2580,521],{"class":500},[490,2582,2583],{"class":517},"_touch-action:manipulation",[490,2585,521],{"class":500},[490,2587,1210],{"class":500},[490,2589,2590],{"class":504},"Fast tap response",[490,2592,1216],{"class":500},[490,2594,1195],{"class":599},[490,2596,1221],{"class":500},[414,2598,2600],{"id":2599},"more-interactivity-utilities","More Interactivity Utilities",[2602,2603,2605],"h3",{"id":2604},"useaccentcolorutility",[461,2606,2607],{},"useAccentColorUtility",[418,2609,2610],{},"Set the accent color for form controls.",[480,2612,2614],{"className":482,"code":2613,"language":485,"meta":486,"style":486},"import { useAccentColorUtility } from \"@styleframe/theme\";\n\nuseAccentColorUtility(s, {\n    auto: 'auto',\n    primary: '#006cff',\n});\n",[461,2615,2616,2637,2641,2651,2665,2681],{"__ignoreMap":486},[490,2617,2618,2620,2622,2625,2627,2629,2631,2633,2635],{"class":492,"line":493},[490,2619,497],{"class":496},[490,2621,501],{"class":500},[490,2623,2624],{"class":504}," useAccentColorUtility",[490,2626,508],{"class":500},[490,2628,511],{"class":496},[490,2630,514],{"class":500},[490,2632,543],{"class":517},[490,2634,521],{"class":500},[490,2636,524],{"class":500},[490,2638,2639],{"class":492,"line":527},[490,2640,553],{"emptyLinePlaceholder":206},[490,2642,2643,2645,2647,2649],{"class":492,"line":550},[490,2644,2607],{"class":569},[490,2646,587],{"class":504},[490,2648,590],{"class":500},[490,2650,593],{"class":500},[490,2652,2653,2655,2657,2659,2661,2663],{"class":492,"line":556},[490,2654,600],{"class":599},[490,2656,603],{"class":500},[490,2658,606],{"class":500},[490,2660,609],{"class":517},[490,2662,612],{"class":500},[490,2664,615],{"class":500},[490,2666,2667,2670,2672,2674,2677,2679],{"class":492,"line":577},[490,2668,2669],{"class":599},"    primary",[490,2671,603],{"class":500},[490,2673,606],{"class":500},[490,2675,2676],{"class":517},"#006cff",[490,2678,612],{"class":500},[490,2680,615],{"class":500},[490,2682,2683,2685,2687],{"class":492,"line":582},[490,2684,835],{"class":500},[490,2686,838],{"class":504},[490,2688,524],{"class":500},[2602,2690,2692],{"id":2691},"usecaretcolorutility",[461,2693,2694],{},"useCaretColorUtility",[418,2696,2697],{},"Set the color of the text input caret.",[480,2699,2701],{"className":482,"code":2700,"language":485,"meta":486,"style":486},"import { useCaretColorUtility } from \"@styleframe/theme\";\n\nuseCaretColorUtility(s, {\n    primary: '#006cff',\n    transparent: 'transparent',\n});\n",[461,2702,2703,2724,2728,2738,2752,2768],{"__ignoreMap":486},[490,2704,2705,2707,2709,2712,2714,2716,2718,2720,2722],{"class":492,"line":493},[490,2706,497],{"class":496},[490,2708,501],{"class":500},[490,2710,2711],{"class":504}," useCaretColorUtility",[490,2713,508],{"class":500},[490,2715,511],{"class":496},[490,2717,514],{"class":500},[490,2719,543],{"class":517},[490,2721,521],{"class":500},[490,2723,524],{"class":500},[490,2725,2726],{"class":492,"line":527},[490,2727,553],{"emptyLinePlaceholder":206},[490,2729,2730,2732,2734,2736],{"class":492,"line":550},[490,2731,2694],{"class":569},[490,2733,587],{"class":504},[490,2735,590],{"class":500},[490,2737,593],{"class":500},[490,2739,2740,2742,2744,2746,2748,2750],{"class":492,"line":556},[490,2741,2669],{"class":599},[490,2743,603],{"class":500},[490,2745,606],{"class":500},[490,2747,2676],{"class":517},[490,2749,612],{"class":500},[490,2751,615],{"class":500},[490,2753,2754,2757,2759,2761,2764,2766],{"class":492,"line":577},[490,2755,2756],{"class":599},"    transparent",[490,2758,603],{"class":500},[490,2760,606],{"class":500},[490,2762,2763],{"class":517},"transparent",[490,2765,612],{"class":500},[490,2767,615],{"class":500},[490,2769,2770,2772,2774],{"class":492,"line":582},[490,2771,835],{"class":500},[490,2773,838],{"class":504},[490,2775,524],{"class":500},[2602,2777,2779],{"id":2778},"useresizeutility",[461,2780,2781],{},"useResizeUtility",[418,2783,2784],{},"Control whether an element is resizable.",[480,2786,2788],{"className":482,"code":2787,"language":485,"meta":486,"style":486},"import { useResizeUtility } from \"@styleframe/theme\";\n\nuseResizeUtility(s, {\n    none: 'none',\n    y: 'vertical',\n    x: 'horizontal',\n    both: 'both',\n});\n",[461,2789,2790,2811,2815,2825,2839,2855,2871,2887],{"__ignoreMap":486},[490,2791,2792,2794,2796,2799,2801,2803,2805,2807,2809],{"class":492,"line":493},[490,2793,497],{"class":496},[490,2795,501],{"class":500},[490,2797,2798],{"class":504}," useResizeUtility",[490,2800,508],{"class":500},[490,2802,511],{"class":496},[490,2804,514],{"class":500},[490,2806,543],{"class":517},[490,2808,521],{"class":500},[490,2810,524],{"class":500},[490,2812,2813],{"class":492,"line":527},[490,2814,553],{"emptyLinePlaceholder":206},[490,2816,2817,2819,2821,2823],{"class":492,"line":550},[490,2818,2781],{"class":569},[490,2820,587],{"class":504},[490,2822,590],{"class":500},[490,2824,593],{"class":500},[490,2826,2827,2829,2831,2833,2835,2837],{"class":492,"line":556},[490,2828,744],{"class":599},[490,2830,603],{"class":500},[490,2832,606],{"class":500},[490,2834,751],{"class":517},[490,2836,612],{"class":500},[490,2838,615],{"class":500},[490,2840,2841,2844,2846,2848,2851,2853],{"class":492,"line":577},[490,2842,2843],{"class":599},"    y",[490,2845,603],{"class":500},[490,2847,606],{"class":500},[490,2849,2850],{"class":517},"vertical",[490,2852,612],{"class":500},[490,2854,615],{"class":500},[490,2856,2857,2860,2862,2864,2867,2869],{"class":492,"line":582},[490,2858,2859],{"class":599},"    x",[490,2861,603],{"class":500},[490,2863,606],{"class":500},[490,2865,2866],{"class":517},"horizontal",[490,2868,612],{"class":500},[490,2870,615],{"class":500},[490,2872,2873,2876,2878,2880,2883,2885],{"class":492,"line":596},[490,2874,2875],{"class":599},"    both",[490,2877,603],{"class":500},[490,2879,606],{"class":500},[490,2881,2882],{"class":517},"both",[490,2884,612],{"class":500},[490,2886,615],{"class":500},[490,2888,2889,2891,2893],{"class":492,"line":618},[490,2890,835],{"class":500},[490,2892,838],{"class":504},[490,2894,524],{"class":500},[2602,2896,2898],{"id":2897},"useappearanceutility",[461,2899,2900],{},"useAppearanceUtility",[418,2902,2903],{},"Control native browser styling on form elements.",[480,2905,2907],{"className":482,"code":2906,"language":485,"meta":486,"style":486},"import { useAppearanceUtility } from \"@styleframe/theme\";\n\nuseAppearanceUtility(s, {\n    none: 'none',\n    auto: 'auto',\n});\n",[461,2908,2909,2930,2934,2944,2958,2972],{"__ignoreMap":486},[490,2910,2911,2913,2915,2918,2920,2922,2924,2926,2928],{"class":492,"line":493},[490,2912,497],{"class":496},[490,2914,501],{"class":500},[490,2916,2917],{"class":504}," useAppearanceUtility",[490,2919,508],{"class":500},[490,2921,511],{"class":496},[490,2923,514],{"class":500},[490,2925,543],{"class":517},[490,2927,521],{"class":500},[490,2929,524],{"class":500},[490,2931,2932],{"class":492,"line":527},[490,2933,553],{"emptyLinePlaceholder":206},[490,2935,2936,2938,2940,2942],{"class":492,"line":550},[490,2937,2900],{"class":569},[490,2939,587],{"class":504},[490,2941,590],{"class":500},[490,2943,593],{"class":500},[490,2945,2946,2948,2950,2952,2954,2956],{"class":492,"line":556},[490,2947,744],{"class":599},[490,2949,603],{"class":500},[490,2951,606],{"class":500},[490,2953,751],{"class":517},[490,2955,612],{"class":500},[490,2957,615],{"class":500},[490,2959,2960,2962,2964,2966,2968,2970],{"class":492,"line":577},[490,2961,600],{"class":599},[490,2963,603],{"class":500},[490,2965,606],{"class":500},[490,2967,609],{"class":517},[490,2969,612],{"class":500},[490,2971,615],{"class":500},[490,2973,2974,2976,2978],{"class":492,"line":582},[490,2975,835],{"class":500},[490,2977,838],{"class":504},[490,2979,524],{"class":500},[2602,2981,2983],{"id":2982},"usewillchangeutility",[461,2984,2985],{},"useWillChangeUtility",[418,2987,2988],{},"Hint to browsers about expected changes for optimization.",[480,2990,2992],{"className":482,"code":2991,"language":485,"meta":486,"style":486},"import { useWillChangeUtility } from \"@styleframe/theme\";\n\nuseWillChangeUtility(s, {\n    auto: 'auto',\n    scroll: 'scroll-position',\n    contents: 'contents',\n    transform: 'transform',\n});\n",[461,2993,2994,3015,3019,3029,3043,3059,3075,3091],{"__ignoreMap":486},[490,2995,2996,2998,3000,3003,3005,3007,3009,3011,3013],{"class":492,"line":493},[490,2997,497],{"class":496},[490,2999,501],{"class":500},[490,3001,3002],{"class":504}," useWillChangeUtility",[490,3004,508],{"class":500},[490,3006,511],{"class":496},[490,3008,514],{"class":500},[490,3010,543],{"class":517},[490,3012,521],{"class":500},[490,3014,524],{"class":500},[490,3016,3017],{"class":492,"line":527},[490,3018,553],{"emptyLinePlaceholder":206},[490,3020,3021,3023,3025,3027],{"class":492,"line":550},[490,3022,2985],{"class":569},[490,3024,587],{"class":504},[490,3026,590],{"class":500},[490,3028,593],{"class":500},[490,3030,3031,3033,3035,3037,3039,3041],{"class":492,"line":556},[490,3032,600],{"class":599},[490,3034,603],{"class":500},[490,3036,606],{"class":500},[490,3038,609],{"class":517},[490,3040,612],{"class":500},[490,3042,615],{"class":500},[490,3044,3045,3048,3050,3052,3055,3057],{"class":492,"line":577},[490,3046,3047],{"class":599},"    scroll",[490,3049,603],{"class":500},[490,3051,606],{"class":500},[490,3053,3054],{"class":517},"scroll-position",[490,3056,612],{"class":500},[490,3058,615],{"class":500},[490,3060,3061,3064,3066,3068,3071,3073],{"class":492,"line":582},[490,3062,3063],{"class":599},"    contents",[490,3065,603],{"class":500},[490,3067,606],{"class":500},[490,3069,3070],{"class":517},"contents",[490,3072,612],{"class":500},[490,3074,615],{"class":500},[490,3076,3077,3080,3082,3084,3087,3089],{"class":492,"line":596},[490,3078,3079],{"class":599},"    transform",[490,3081,603],{"class":500},[490,3083,606],{"class":500},[490,3085,3086],{"class":517},"transform",[490,3088,612],{"class":500},[490,3090,615],{"class":500},[490,3092,3093,3095,3097],{"class":492,"line":618},[490,3094,835],{"class":500},[490,3096,838],{"class":504},[490,3098,524],{"class":500},[414,3100,3102],{"id":3101},"examples","Examples",[2602,3104,3106],{"id":3105},"disabled-button-state","Disabled Button State",[472,3108,3109,3373],{},[475,3110,3111],{"icon":477,"label":478},[480,3112,3114],{"className":482,"code":3113,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useCursorUtility, usePointerEventsUtility, useUserSelectUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { modifier } = s;\n\nconst disabled = modifier('disabled', ({ declarations }) => ({\n    '&:disabled': declarations,\n}));\n\nuseCursorUtility(s, { 'not-allowed': 'not-allowed' }, [disabled]);\nusePointerEventsUtility(s, { none: 'none' }, [disabled]);\nuseUserSelectUtility(s, { none: 'none' });\n\nexport default s;\n",[461,3115,3116,3136,3164,3168,3182,3200,3204,3247,3262,3271,3275,3307,3333,3359,3363],{"__ignoreMap":486},[490,3117,3118,3120,3122,3124,3126,3128,3130,3132,3134],{"class":492,"line":493},[490,3119,497],{"class":496},[490,3121,501],{"class":500},[490,3123,505],{"class":504},[490,3125,508],{"class":500},[490,3127,511],{"class":496},[490,3129,514],{"class":500},[490,3131,518],{"class":517},[490,3133,521],{"class":500},[490,3135,524],{"class":500},[490,3137,3138,3140,3142,3144,3146,3148,3150,3152,3154,3156,3158,3160,3162],{"class":492,"line":527},[490,3139,497],{"class":496},[490,3141,501],{"class":500},[490,3143,534],{"class":504},[490,3145,590],{"class":500},[490,3147,1325],{"class":504},[490,3149,590],{"class":500},[490,3151,1582],{"class":504},[490,3153,508],{"class":500},[490,3155,511],{"class":496},[490,3157,514],{"class":500},[490,3159,543],{"class":517},[490,3161,521],{"class":500},[490,3163,524],{"class":500},[490,3165,3166],{"class":492,"line":550},[490,3167,553],{"emptyLinePlaceholder":206},[490,3169,3170,3172,3174,3176,3178,3180],{"class":492,"line":556},[490,3171,560],{"class":559},[490,3173,563],{"class":504},[490,3175,566],{"class":500},[490,3177,505],{"class":569},[490,3179,572],{"class":504},[490,3181,524],{"class":500},[490,3183,3184,3186,3188,3191,3193,3196,3198],{"class":492,"line":577},[490,3185,560],{"class":559},[490,3187,501],{"class":500},[490,3189,3190],{"class":504}," modifier ",[490,3192,835],{"class":500},[490,3194,3195],{"class":500}," =",[490,3197,857],{"class":504},[490,3199,524],{"class":500},[490,3201,3202],{"class":492,"line":582},[490,3203,553],{"emptyLinePlaceholder":206},[490,3205,3206,3208,3211,3213,3216,3219,3221,3224,3226,3228,3231,3235,3238,3241,3244],{"class":492,"line":596},[490,3207,560],{"class":559},[490,3209,3210],{"class":504}," disabled ",[490,3212,566],{"class":500},[490,3214,3215],{"class":569}," modifier",[490,3217,3218],{"class":504},"(",[490,3220,612],{"class":500},[490,3222,3223],{"class":517},"disabled",[490,3225,612],{"class":500},[490,3227,590],{"class":500},[490,3229,3230],{"class":500}," ({",[490,3232,3234],{"class":3233},"sHdIc"," declarations",[490,3236,3237],{"class":500}," })",[490,3239,3240],{"class":559}," =>",[490,3242,3243],{"class":504}," (",[490,3245,3246],{"class":500},"{\n",[490,3248,3249,3251,3254,3256,3258,3260],{"class":492,"line":618},[490,3250,723],{"class":500},[490,3252,3253],{"class":599},"&:disabled",[490,3255,612],{"class":500},[490,3257,603],{"class":500},[490,3259,3234],{"class":504},[490,3261,615],{"class":500},[490,3263,3264,3266,3269],{"class":492,"line":635},[490,3265,835],{"class":500},[490,3267,3268],{"class":504},"))",[490,3270,524],{"class":500},[490,3272,3273],{"class":492,"line":652},[490,3274,553],{"emptyLinePlaceholder":206},[490,3276,3277,3279,3281,3283,3285,3287,3289,3291,3293,3295,3297,3299,3302,3305],{"class":492,"line":669},[490,3278,463],{"class":569},[490,3280,587],{"class":504},[490,3282,590],{"class":500},[490,3284,501],{"class":500},[490,3286,606],{"class":500},[490,3288,726],{"class":599},[490,3290,612],{"class":500},[490,3292,603],{"class":500},[490,3294,606],{"class":500},[490,3296,726],{"class":517},[490,3298,612],{"class":500},[490,3300,3301],{"class":500}," },",[490,3303,3304],{"class":504}," [disabled])",[490,3306,524],{"class":500},[490,3308,3309,3311,3313,3315,3317,3319,3321,3323,3325,3327,3329,3331],{"class":492,"line":686},[490,3310,1284],{"class":569},[490,3312,587],{"class":504},[490,3314,590],{"class":500},[490,3316,501],{"class":500},[490,3318,1080],{"class":599},[490,3320,603],{"class":500},[490,3322,606],{"class":500},[490,3324,751],{"class":517},[490,3326,612],{"class":500},[490,3328,3301],{"class":500},[490,3330,3304],{"class":504},[490,3332,524],{"class":500},[490,3334,3335,3337,3339,3341,3343,3345,3347,3349,3351,3353,3355,3357],{"class":492,"line":703},[490,3336,1541],{"class":569},[490,3338,587],{"class":504},[490,3340,590],{"class":500},[490,3342,501],{"class":500},[490,3344,1080],{"class":599},[490,3346,603],{"class":500},[490,3348,606],{"class":500},[490,3350,751],{"class":517},[490,3352,612],{"class":500},[490,3354,508],{"class":500},[490,3356,838],{"class":504},[490,3358,524],{"class":500},[490,3360,3361],{"class":492,"line":720},[490,3362,553],{"emptyLinePlaceholder":206},[490,3364,3365,3367,3369,3371],{"class":492,"line":741},[490,3366,851],{"class":496},[490,3368,854],{"class":496},[490,3370,857],{"class":504},[490,3372,524],{"class":500},[475,3374,3375],{"icon":140,"label":862},[480,3376,3378],{"className":865,"code":3377,"filename":867,"language":868,"meta":486,"style":486},"._disabled\\:cursor\\:not-allowed:disabled { cursor: not-allowed; }\n._disabled\\:pointer-events\\:none:disabled { pointer-events: none; }\n._user-select\\:none { user-select: none; }\n",[461,3379,3380,3412,3443],{"__ignoreMap":486},[490,3381,3382,3384,3387,3389,3392,3394,3396,3398,3400,3402,3404,3406,3408,3410],{"class":492,"line":493},[490,3383,875],{"class":500},[490,3385,3386],{"class":878},"_disabled",[490,3388,882],{"class":504},[490,3390,3391],{"class":878},"cursor",[490,3393,882],{"class":504},[490,3395,726],{"class":878},[490,3397,603],{"class":500},[490,3399,3223],{"class":559},[490,3401,501],{"class":500},[490,3403,890],{"class":889},[490,3405,603],{"class":500},[490,3407,1057],{"class":504},[490,3409,898],{"class":500},[490,3411,901],{"class":500},[490,3413,3414,3416,3418,3420,3423,3425,3427,3429,3431,3433,3435,3437,3439,3441],{"class":492,"line":527},[490,3415,875],{"class":500},[490,3417,3386],{"class":878},[490,3419,882],{"class":504},[490,3421,3422],{"class":878},"pointer-events",[490,3424,882],{"class":504},[490,3426,751],{"class":878},[490,3428,603],{"class":500},[490,3430,3223],{"class":559},[490,3432,501],{"class":500},[490,3434,1442],{"class":889},[490,3436,603],{"class":500},[490,3438,1080],{"class":504},[490,3440,898],{"class":500},[490,3442,901],{"class":500},[490,3444,3445,3447,3449,3451,3453,3455,3457,3459,3461,3463],{"class":492,"line":550},[490,3446,875],{"class":500},[490,3448,1720],{"class":878},[490,3450,882],{"class":504},[490,3452,751],{"class":878},[490,3454,501],{"class":500},[490,3456,1729],{"class":889},[490,3458,603],{"class":500},[490,3460,1080],{"class":504},[490,3462,898],{"class":500},[490,3464,901],{"class":500},[2602,3466,3468],{"id":3467},"smooth-scroll-navigation","Smooth Scroll Navigation",[472,3470,3471,3646],{},[475,3472,3473],{"icon":477,"label":478},[480,3474,3476],{"className":482,"code":3475,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useScrollBehaviorUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { selector } = s;\n\nuseScrollBehaviorUtility(s, { smooth: 'smooth' });\n\n// Apply to html element for page-wide smooth scrolling\nselector('html', {\n    scrollBehavior: 'smooth',\n});\n\nexport default s;\n",[461,3477,3478,3498,3518,3522,3536,3553,3557,3583,3587,3592,3609,3624,3632,3636],{"__ignoreMap":486},[490,3479,3480,3482,3484,3486,3488,3490,3492,3494,3496],{"class":492,"line":493},[490,3481,497],{"class":496},[490,3483,501],{"class":500},[490,3485,505],{"class":504},[490,3487,508],{"class":500},[490,3489,511],{"class":496},[490,3491,514],{"class":500},[490,3493,518],{"class":517},[490,3495,521],{"class":500},[490,3497,524],{"class":500},[490,3499,3500,3502,3504,3506,3508,3510,3512,3514,3516],{"class":492,"line":527},[490,3501,497],{"class":496},[490,3503,501],{"class":500},[490,3505,1914],{"class":504},[490,3507,508],{"class":500},[490,3509,511],{"class":496},[490,3511,514],{"class":500},[490,3513,543],{"class":517},[490,3515,521],{"class":500},[490,3517,524],{"class":500},[490,3519,3520],{"class":492,"line":550},[490,3521,553],{"emptyLinePlaceholder":206},[490,3523,3524,3526,3528,3530,3532,3534],{"class":492,"line":556},[490,3525,560],{"class":559},[490,3527,563],{"class":504},[490,3529,566],{"class":500},[490,3531,505],{"class":569},[490,3533,572],{"class":504},[490,3535,524],{"class":500},[490,3537,3538,3540,3542,3545,3547,3549,3551],{"class":492,"line":577},[490,3539,560],{"class":559},[490,3541,501],{"class":500},[490,3543,3544],{"class":504}," selector ",[490,3546,835],{"class":500},[490,3548,3195],{"class":500},[490,3550,857],{"class":504},[490,3552,524],{"class":500},[490,3554,3555],{"class":492,"line":582},[490,3556,553],{"emptyLinePlaceholder":206},[490,3558,3559,3561,3563,3565,3567,3569,3571,3573,3575,3577,3579,3581],{"class":492,"line":596},[490,3560,1873],{"class":569},[490,3562,587],{"class":504},[490,3564,590],{"class":500},[490,3566,501],{"class":500},[490,3568,2060],{"class":599},[490,3570,603],{"class":500},[490,3572,606],{"class":500},[490,3574,1984],{"class":517},[490,3576,612],{"class":500},[490,3578,508],{"class":500},[490,3580,838],{"class":504},[490,3582,524],{"class":500},[490,3584,3585],{"class":492,"line":618},[490,3586,553],{"emptyLinePlaceholder":206},[490,3588,3589],{"class":492,"line":635},[490,3590,3591],{"class":2532},"// Apply to html element for page-wide smooth scrolling\n",[490,3593,3594,3597,3599,3601,3603,3605,3607],{"class":492,"line":652},[490,3595,3596],{"class":569},"selector",[490,3598,3218],{"class":504},[490,3600,612],{"class":500},[490,3602,1185],{"class":517},[490,3604,612],{"class":500},[490,3606,590],{"class":500},[490,3608,593],{"class":500},[490,3610,3611,3614,3616,3618,3620,3622],{"class":492,"line":669},[490,3612,3613],{"class":599},"    scrollBehavior",[490,3615,603],{"class":500},[490,3617,606],{"class":500},[490,3619,1984],{"class":517},[490,3621,612],{"class":500},[490,3623,615],{"class":500},[490,3625,3626,3628,3630],{"class":492,"line":686},[490,3627,835],{"class":500},[490,3629,838],{"class":504},[490,3631,524],{"class":500},[490,3633,3634],{"class":492,"line":703},[490,3635,553],{"emptyLinePlaceholder":206},[490,3637,3638,3640,3642,3644],{"class":492,"line":720},[490,3639,851],{"class":496},[490,3641,854],{"class":496},[490,3643,857],{"class":504},[490,3645,524],{"class":500},[475,3647,3648],{"icon":140,"label":862},[480,3649,3651],{"className":865,"code":3650,"filename":867,"language":868,"meta":486,"style":486},"._scroll-behavior\\:smooth { scroll-behavior: smooth; }\n\nhtml {\n    scroll-behavior: smooth;\n}\n",[461,3652,3653,3675,3679,3685,3696],{"__ignoreMap":486},[490,3654,3655,3657,3659,3661,3663,3665,3667,3669,3671,3673],{"class":492,"line":493},[490,3656,875],{"class":500},[490,3658,2024],{"class":878},[490,3660,882],{"class":504},[490,3662,1984],{"class":878},[490,3664,501],{"class":500},[490,3666,2033],{"class":889},[490,3668,603],{"class":500},[490,3670,2060],{"class":504},[490,3672,898],{"class":500},[490,3674,901],{"class":500},[490,3676,3677],{"class":492,"line":527},[490,3678,553],{"emptyLinePlaceholder":206},[490,3680,3681,3683],{"class":492,"line":550},[490,3682,1185],{"class":878},[490,3684,593],{"class":500},[490,3686,3687,3690,3692,3694],{"class":492,"line":556},[490,3688,3689],{"class":889},"    scroll-behavior",[490,3691,603],{"class":500},[490,3693,2060],{"class":504},[490,3695,524],{"class":500},[490,3697,3698],{"class":492,"line":577},[490,3699,3700],{"class":500},"}\n",[414,3702,3704],{"id":3703},"best-practices","Best Practices",[429,3706,3707,3713,3719,3725,3731],{},[432,3708,3709,3712],{},[435,3710,3711],{},"Use semantic cursors",": Match cursor to the action (pointer for clickable, grab for draggable)",[432,3714,3715,3718],{},[435,3716,3717],{},"Respect user preferences",": Some users prefer reduced motion; use smooth scroll thoughtfully",[432,3720,3721,3724],{},[435,3722,3723],{},"Don't disable user select universally",": Only prevent selection where it makes sense (buttons, drag handles)",[432,3726,3727,3730],{},[435,3728,3729],{},"Test touch interactions",": Touch actions affect mobile usability significantly",[432,3732,3733,3736],{},[435,3734,3735],{},"Use will-change sparingly",": It consumes memory; only use when you know changes will happen",[414,3738,3740],{"id":3739},"faq","FAQ",[3742,3743,3744,3750,3754,3758],"accordion",{},[3745,3746,3749],"accordion-item",{"icon":3747,"label":3748},"i-lucide-circle-help","When should I use pointer-events: none?","Use it for overlay elements that shouldn't block clicks (like decorative elements), elements that should be visually present but not interactive, or elements during loading/disabled states.",[3745,3751,3753],{"icon":3747,"label":3752},"What does touch-action: manipulation do?","It enables panning and zooming but disables other non-standard gestures like double-tap zoom. This is useful for buttons and interactive elements where you want to avoid the 300ms click delay on mobile.",[3745,3755,3757],{"icon":3747,"label":3756},"Should I use user-select: none on buttons?","Generally yes, preventing text selection on buttons improves the interaction feel. Users don't expect to select button text. However, ensure this doesn't interfere with accessibility.",[3745,3759,3761,3762,3765,3766,3769,3770,3773,3774,3777],{"icon":3747,"label":3760},"Does scroll-behavior affect JavaScript scrolling?","Yes, ",[461,3763,3764],{},"scroll-behavior: smooth"," affects both anchor link navigation and JavaScript methods like ",[461,3767,3768],{},"scrollIntoView()"," and ",[461,3771,3772],{},"window.scrollTo()",". Use ",[461,3775,3776],{},"{ behavior: 'instant' }"," in JavaScript if you need to override it.",[3779,3780,3781],"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 .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":486,"searchDepth":527,"depth":527,"links":3783},[3784,3785,3786,3787,3788,3789,3790,3791,3798,3802,3803],{"id":416,"depth":527,"text":64},{"id":423,"depth":527,"text":424},{"id":459,"depth":527,"text":463},{"id":1281,"depth":527,"text":1284},{"id":1538,"depth":527,"text":1541},{"id":1870,"depth":527,"text":1873},{"id":2121,"depth":527,"text":2124},{"id":2599,"depth":527,"text":2600,"children":3792},[3793,3794,3795,3796,3797],{"id":2604,"depth":550,"text":2607},{"id":2691,"depth":550,"text":2694},{"id":2778,"depth":550,"text":2781},{"id":2897,"depth":550,"text":2900},{"id":2982,"depth":550,"text":2985},{"id":3101,"depth":527,"text":3102,"children":3799},[3800,3801],{"id":3105,"depth":550,"text":3106},{"id":3467,"depth":550,"text":3468},{"id":3703,"depth":527,"text":3704},{"id":3739,"depth":527,"text":3740},"Create interactivity utilities for cursor styles, pointer events, user selection, and scroll behavior with full type safety.","md",null,{},{"title":329,"icon":7},{"title":409,"description":3804},{"loc":330},"8DXPmVmb7QfQ-wqFuypODb8N9UZIku2paGlz1ibookk",[3813,3815],{"title":325,"path":326,"stem":327,"description":3814,"icon":7,"children":-1},"Create flexbox and grid layout utilities for building responsive layouts with full type safety.",{"title":333,"path":334,"stem":335,"description":3816,"icon":7,"children":-1},"Create layout utilities for display, position, overflow, visibility, and more with full type safety.",1776621147973]