[{"data":1,"prerenderedAt":4929},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-composables-transforms":407,"-docs-theme-utilities-composables-transforms-surround":4924},{"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":4916,"extension":4917,"links":4918,"meta":4919,"navigation":4920,"path":353,"seo":4921,"sitemap":4922,"stem":354,"__hash__":4923},"docs_theme/docs/theme/utilities/02.composables/13.transforms.md","Transforms Utilities",{"type":411,"value":412,"toc":4896},"minimark",[413,417,421,425,428,457,464,471,1284,1291,1297,1303,2153,2159,2165,2896,2900,2911,2914,3175,3181,3184,3367,3373,3376,3494,3500,3503,3558,3562,3566,4098,4101,4148,4152,4747,4749,4815,4819,4851,4855,4892],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"p",{},"Transform utilities help you manipulate elements visually through rotation, scaling, translation, and skewing. These utilities support both 2D and 3D transformations.",[414,422,424],{"id":423},"why-use-transform-utilities","Why Use Transform Utilities?",[418,426,427],{},"Transform utilities help you:",[429,430,431,439,445,451],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Create animations",": Build smooth animations by transforming element properties",[432,440,441,444],{},[435,442,443],{},"Enhance interactions",": Add hover effects with scale and rotation",[432,446,447,450],{},[435,448,449],{},"Position elements",": Use translate for precise positioning without affecting layout",[432,452,453,456],{},[435,454,455],{},"Enable 3D effects",": Create depth with perspective and 3D transforms",[414,458,460],{"id":459},"userotateutility",[461,462,463],"code",{},"useRotateUtility",[418,465,466,467,470],{},"The ",[461,468,469],{},"useRotateUtility()"," function creates utility classes for rotating elements.",[472,473,474,819,1211],"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 { useRotateUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseRotateUtility(s, {\n    '0': '0deg',\n    '1': '1deg',\n    '2': '2deg',\n    '3': '3deg',\n    '6': '6deg',\n    '12': '12deg',\n    '45': '45deg',\n    '90': '90deg',\n    '180': '180deg',\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[461,488,489,525,548,554,575,580,594,621,642,663,684,705,726,747,768,789,800,805],{"__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}," useRotateUtility",[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,600,604,607,610,613,616,618],{"class":492,"line":596},7,[490,598,599],{"class":500},"    '",[490,601,603],{"class":602},"swJcz","0",[490,605,606],{"class":500},"'",[490,608,609],{"class":500},":",[490,611,612],{"class":500}," '",[490,614,615],{"class":517},"0deg",[490,617,606],{"class":500},[490,619,620],{"class":500},",\n",[490,622,624,626,629,631,633,635,638,640],{"class":492,"line":623},8,[490,625,599],{"class":500},[490,627,628],{"class":602},"1",[490,630,606],{"class":500},[490,632,609],{"class":500},[490,634,612],{"class":500},[490,636,637],{"class":517},"1deg",[490,639,606],{"class":500},[490,641,620],{"class":500},[490,643,645,647,650,652,654,656,659,661],{"class":492,"line":644},9,[490,646,599],{"class":500},[490,648,649],{"class":602},"2",[490,651,606],{"class":500},[490,653,609],{"class":500},[490,655,612],{"class":500},[490,657,658],{"class":517},"2deg",[490,660,606],{"class":500},[490,662,620],{"class":500},[490,664,666,668,671,673,675,677,680,682],{"class":492,"line":665},10,[490,667,599],{"class":500},[490,669,670],{"class":602},"3",[490,672,606],{"class":500},[490,674,609],{"class":500},[490,676,612],{"class":500},[490,678,679],{"class":517},"3deg",[490,681,606],{"class":500},[490,683,620],{"class":500},[490,685,687,689,692,694,696,698,701,703],{"class":492,"line":686},11,[490,688,599],{"class":500},[490,690,691],{"class":602},"6",[490,693,606],{"class":500},[490,695,609],{"class":500},[490,697,612],{"class":500},[490,699,700],{"class":517},"6deg",[490,702,606],{"class":500},[490,704,620],{"class":500},[490,706,708,710,713,715,717,719,722,724],{"class":492,"line":707},12,[490,709,599],{"class":500},[490,711,712],{"class":602},"12",[490,714,606],{"class":500},[490,716,609],{"class":500},[490,718,612],{"class":500},[490,720,721],{"class":517},"12deg",[490,723,606],{"class":500},[490,725,620],{"class":500},[490,727,729,731,734,736,738,740,743,745],{"class":492,"line":728},13,[490,730,599],{"class":500},[490,732,733],{"class":602},"45",[490,735,606],{"class":500},[490,737,609],{"class":500},[490,739,612],{"class":500},[490,741,742],{"class":517},"45deg",[490,744,606],{"class":500},[490,746,620],{"class":500},[490,748,750,752,755,757,759,761,764,766],{"class":492,"line":749},14,[490,751,599],{"class":500},[490,753,754],{"class":602},"90",[490,756,606],{"class":500},[490,758,609],{"class":500},[490,760,612],{"class":500},[490,762,763],{"class":517},"90deg",[490,765,606],{"class":500},[490,767,620],{"class":500},[490,769,771,773,776,778,780,782,785,787],{"class":492,"line":770},15,[490,772,599],{"class":500},[490,774,775],{"class":602},"180",[490,777,606],{"class":500},[490,779,609],{"class":500},[490,781,612],{"class":500},[490,783,784],{"class":517},"180deg",[490,786,606],{"class":500},[490,788,620],{"class":500},[490,790,792,795,798],{"class":492,"line":791},16,[490,793,794],{"class":500},"}",[490,796,797],{"class":504},")",[490,799,524],{"class":500},[490,801,803],{"class":492,"line":802},17,[490,804,553],{"emptyLinePlaceholder":206},[490,806,808,811,814,817],{"class":492,"line":807},18,[490,809,810],{"class":496},"export",[490,812,813],{"class":496}," default",[490,815,816],{"class":504}," s",[490,818,524],{"class":500},[475,820,822],{"icon":140,"label":821},"Output",[480,823,828],{"className":824,"code":825,"filename":826,"language":827,"meta":486,"style":486},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._rotate\\:0 {\n    --tw-rotate: 0deg;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n._rotate\\:45 {\n    --tw-rotate: 45deg;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n._rotate\\:90 {\n    --tw-rotate: 90deg;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n/* ... more values */\n","styleframe/index.css","css",[461,829,830,846,859,966,971,975,987,998,1084,1088,1092,1104,1115,1201,1205],{"__ignoreMap":486},[490,831,832,835,839,842,844],{"class":492,"line":493},[490,833,834],{"class":500},".",[490,836,838],{"class":837},"sBMFI","_rotate",[490,840,841],{"class":504},"\\:",[490,843,603],{"class":837},[490,845,593],{"class":500},[490,847,848,851,853,857],{"class":492,"line":527},[490,849,850],{"class":504},"    --tw-rotate",[490,852,609],{"class":500},[490,854,856],{"class":855},"sbssI"," 0deg",[490,858,524],{"class":500},[490,860,861,865,867,870,873,876,878,881,884,887,889,892,895,898,900,902,904,907,909,912,914,916,918,921,923,926,928,930,932,935,937,940,942,944,946,949,951,954,956,958,960,963],{"class":492,"line":550},[490,862,864],{"class":863},"sqsOY","    transform",[490,866,609],{"class":500},[490,868,869],{"class":569}," translate",[490,871,872],{"class":500},"(",[490,874,875],{"class":569},"var",[490,877,872],{"class":500},[490,879,880],{"class":504},"--tw-translate-x",[490,882,883],{"class":500},"),",[490,885,886],{"class":569}," var",[490,888,872],{"class":500},[490,890,891],{"class":504},"--tw-translate-y",[490,893,894],{"class":500},"))",[490,896,897],{"class":569}," rotate",[490,899,872],{"class":500},[490,901,875],{"class":569},[490,903,872],{"class":500},[490,905,906],{"class":504},"--tw-rotate",[490,908,894],{"class":500},[490,910,911],{"class":569}," skewX",[490,913,872],{"class":500},[490,915,875],{"class":569},[490,917,872],{"class":500},[490,919,920],{"class":504},"--tw-skew-x",[490,922,894],{"class":500},[490,924,925],{"class":569}," skewY",[490,927,872],{"class":500},[490,929,875],{"class":569},[490,931,872],{"class":500},[490,933,934],{"class":504},"--tw-skew-y",[490,936,894],{"class":500},[490,938,939],{"class":569}," scaleX",[490,941,872],{"class":500},[490,943,875],{"class":569},[490,945,872],{"class":500},[490,947,948],{"class":504},"--tw-scale-x",[490,950,894],{"class":500},[490,952,953],{"class":569}," scaleY",[490,955,872],{"class":500},[490,957,875],{"class":569},[490,959,872],{"class":500},[490,961,962],{"class":504},"--tw-scale-y",[490,964,965],{"class":500},"));\n",[490,967,968],{"class":492,"line":556},[490,969,970],{"class":500},"}\n",[490,972,973],{"class":492,"line":577},[490,974,553],{"emptyLinePlaceholder":206},[490,976,977,979,981,983,985],{"class":492,"line":582},[490,978,834],{"class":500},[490,980,838],{"class":837},[490,982,841],{"class":504},[490,984,733],{"class":837},[490,986,593],{"class":500},[490,988,989,991,993,996],{"class":492,"line":596},[490,990,850],{"class":504},[490,992,609],{"class":500},[490,994,995],{"class":855}," 45deg",[490,997,524],{"class":500},[490,999,1000,1002,1004,1006,1008,1010,1012,1014,1016,1018,1020,1022,1024,1026,1028,1030,1032,1034,1036,1038,1040,1042,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080,1082],{"class":492,"line":623},[490,1001,864],{"class":863},[490,1003,609],{"class":500},[490,1005,869],{"class":569},[490,1007,872],{"class":500},[490,1009,875],{"class":569},[490,1011,872],{"class":500},[490,1013,880],{"class":504},[490,1015,883],{"class":500},[490,1017,886],{"class":569},[490,1019,872],{"class":500},[490,1021,891],{"class":504},[490,1023,894],{"class":500},[490,1025,897],{"class":569},[490,1027,872],{"class":500},[490,1029,875],{"class":569},[490,1031,872],{"class":500},[490,1033,906],{"class":504},[490,1035,894],{"class":500},[490,1037,911],{"class":569},[490,1039,872],{"class":500},[490,1041,875],{"class":569},[490,1043,872],{"class":500},[490,1045,920],{"class":504},[490,1047,894],{"class":500},[490,1049,925],{"class":569},[490,1051,872],{"class":500},[490,1053,875],{"class":569},[490,1055,872],{"class":500},[490,1057,934],{"class":504},[490,1059,894],{"class":500},[490,1061,939],{"class":569},[490,1063,872],{"class":500},[490,1065,875],{"class":569},[490,1067,872],{"class":500},[490,1069,948],{"class":504},[490,1071,894],{"class":500},[490,1073,953],{"class":569},[490,1075,872],{"class":500},[490,1077,875],{"class":569},[490,1079,872],{"class":500},[490,1081,962],{"class":504},[490,1083,965],{"class":500},[490,1085,1086],{"class":492,"line":644},[490,1087,970],{"class":500},[490,1089,1090],{"class":492,"line":665},[490,1091,553],{"emptyLinePlaceholder":206},[490,1093,1094,1096,1098,1100,1102],{"class":492,"line":686},[490,1095,834],{"class":500},[490,1097,838],{"class":837},[490,1099,841],{"class":504},[490,1101,754],{"class":837},[490,1103,593],{"class":500},[490,1105,1106,1108,1110,1113],{"class":492,"line":707},[490,1107,850],{"class":504},[490,1109,609],{"class":500},[490,1111,1112],{"class":855}," 90deg",[490,1114,524],{"class":500},[490,1116,1117,1119,1121,1123,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143,1145,1147,1149,1151,1153,1155,1157,1159,1161,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197,1199],{"class":492,"line":728},[490,1118,864],{"class":863},[490,1120,609],{"class":500},[490,1122,869],{"class":569},[490,1124,872],{"class":500},[490,1126,875],{"class":569},[490,1128,872],{"class":500},[490,1130,880],{"class":504},[490,1132,883],{"class":500},[490,1134,886],{"class":569},[490,1136,872],{"class":500},[490,1138,891],{"class":504},[490,1140,894],{"class":500},[490,1142,897],{"class":569},[490,1144,872],{"class":500},[490,1146,875],{"class":569},[490,1148,872],{"class":500},[490,1150,906],{"class":504},[490,1152,894],{"class":500},[490,1154,911],{"class":569},[490,1156,872],{"class":500},[490,1158,875],{"class":569},[490,1160,872],{"class":500},[490,1162,920],{"class":504},[490,1164,894],{"class":500},[490,1166,925],{"class":569},[490,1168,872],{"class":500},[490,1170,875],{"class":569},[490,1172,872],{"class":500},[490,1174,934],{"class":504},[490,1176,894],{"class":500},[490,1178,939],{"class":569},[490,1180,872],{"class":500},[490,1182,875],{"class":569},[490,1184,872],{"class":500},[490,1186,948],{"class":504},[490,1188,894],{"class":500},[490,1190,953],{"class":569},[490,1192,872],{"class":500},[490,1194,875],{"class":569},[490,1196,872],{"class":500},[490,1198,962],{"class":504},[490,1200,965],{"class":500},[490,1202,1203],{"class":492,"line":749},[490,1204,970],{"class":500},[490,1206,1207],{"class":492,"line":770},[490,1208,1210],{"class":1209},"sHwdD","/* ... more values */\n",[475,1212,1215],{"icon":1213,"label":1214},"i-lucide-layout","Usage",[480,1216,1220],{"className":1217,"code":1218,"language":1219,"meta":486,"style":486},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"_rotate:45\">Rotated 45 degrees\u003C/div>\n\u003Cdiv class=\"_rotate:90\">Rotated 90 degrees\u003C/div>\n","html",[461,1221,1222,1256],{"__ignoreMap":486},[490,1223,1224,1227,1230,1233,1235,1237,1240,1242,1245,1248,1251,1253],{"class":492,"line":493},[490,1225,1226],{"class":500},"\u003C",[490,1228,1229],{"class":602},"div",[490,1231,1232],{"class":559}," class",[490,1234,566],{"class":500},[490,1236,521],{"class":500},[490,1238,1239],{"class":517},"_rotate:45",[490,1241,521],{"class":500},[490,1243,1244],{"class":500},">",[490,1246,1247],{"class":504},"Rotated 45 degrees",[490,1249,1250],{"class":500},"\u003C/",[490,1252,1229],{"class":602},[490,1254,1255],{"class":500},">\n",[490,1257,1258,1260,1262,1264,1266,1268,1271,1273,1275,1278,1280,1282],{"class":492,"line":527},[490,1259,1226],{"class":500},[490,1261,1229],{"class":602},[490,1263,1232],{"class":559},[490,1265,566],{"class":500},[490,1267,521],{"class":500},[490,1269,1270],{"class":517},"_rotate:90",[490,1272,521],{"class":500},[490,1274,1244],{"class":500},[490,1276,1277],{"class":504},"Rotated 90 degrees",[490,1279,1250],{"class":500},[490,1281,1229],{"class":602},[490,1283,1255],{"class":500},[1285,1286,1287,1290],"tip",{},[435,1288,1289],{},"Pro tip",": Transform utilities use CSS custom properties, allowing you to combine multiple transforms (rotate + scale + translate) on the same element.",[414,1292,1294],{"id":1293},"usescaleutility",[461,1295,1296],{},"useScaleUtility",[418,1298,466,1299,1302],{},[461,1300,1301],{},"useScaleUtility()"," function creates utility classes for scaling elements.",[472,1304,1305,1669,2050],{},[475,1306,1307],{"icon":477,"label":478},[480,1308,1310],{"className":482,"code":1309,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useScaleUtility, useScaleXUtility, useScaleYUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst scaleValues = {\n    '0': '0',\n    '50': '.5',\n    '75': '.75',\n    '90': '.9',\n    '95': '.95',\n    '100': '1',\n    '105': '1.05',\n    '110': '1.1',\n    '125': '1.25',\n    '150': '1.5',\n};\n\nuseScaleUtility(s, scaleValues);    // Both X and Y\nuseScaleXUtility(s, scaleValues);   // X axis only\nuseScaleYUtility(s, scaleValues);   // Y axis only\n\nexport default s;\n",[461,1311,1312,1332,1363,1367,1381,1385,1396,1414,1434,1454,1473,1493,1512,1532,1552,1572,1592,1597,1601,1619,1636,1653,1658],{"__ignoreMap":486},[490,1313,1314,1316,1318,1320,1322,1324,1326,1328,1330],{"class":492,"line":493},[490,1315,497],{"class":496},[490,1317,501],{"class":500},[490,1319,505],{"class":504},[490,1321,508],{"class":500},[490,1323,511],{"class":496},[490,1325,514],{"class":500},[490,1327,518],{"class":517},[490,1329,521],{"class":500},[490,1331,524],{"class":500},[490,1333,1334,1336,1338,1341,1343,1346,1348,1351,1353,1355,1357,1359,1361],{"class":492,"line":527},[490,1335,497],{"class":496},[490,1337,501],{"class":500},[490,1339,1340],{"class":504}," useScaleUtility",[490,1342,590],{"class":500},[490,1344,1345],{"class":504}," useScaleXUtility",[490,1347,590],{"class":500},[490,1349,1350],{"class":504}," useScaleYUtility",[490,1352,508],{"class":500},[490,1354,511],{"class":496},[490,1356,514],{"class":500},[490,1358,543],{"class":517},[490,1360,521],{"class":500},[490,1362,524],{"class":500},[490,1364,1365],{"class":492,"line":550},[490,1366,553],{"emptyLinePlaceholder":206},[490,1368,1369,1371,1373,1375,1377,1379],{"class":492,"line":556},[490,1370,560],{"class":559},[490,1372,563],{"class":504},[490,1374,566],{"class":500},[490,1376,505],{"class":569},[490,1378,572],{"class":504},[490,1380,524],{"class":500},[490,1382,1383],{"class":492,"line":577},[490,1384,553],{"emptyLinePlaceholder":206},[490,1386,1387,1389,1392,1394],{"class":492,"line":582},[490,1388,560],{"class":559},[490,1390,1391],{"class":504}," scaleValues ",[490,1393,566],{"class":500},[490,1395,593],{"class":500},[490,1397,1398,1400,1402,1404,1406,1408,1410,1412],{"class":492,"line":596},[490,1399,599],{"class":500},[490,1401,603],{"class":602},[490,1403,606],{"class":500},[490,1405,609],{"class":500},[490,1407,612],{"class":500},[490,1409,603],{"class":517},[490,1411,606],{"class":500},[490,1413,620],{"class":500},[490,1415,1416,1418,1421,1423,1425,1427,1430,1432],{"class":492,"line":623},[490,1417,599],{"class":500},[490,1419,1420],{"class":602},"50",[490,1422,606],{"class":500},[490,1424,609],{"class":500},[490,1426,612],{"class":500},[490,1428,1429],{"class":517},".5",[490,1431,606],{"class":500},[490,1433,620],{"class":500},[490,1435,1436,1438,1441,1443,1445,1447,1450,1452],{"class":492,"line":644},[490,1437,599],{"class":500},[490,1439,1440],{"class":602},"75",[490,1442,606],{"class":500},[490,1444,609],{"class":500},[490,1446,612],{"class":500},[490,1448,1449],{"class":517},".75",[490,1451,606],{"class":500},[490,1453,620],{"class":500},[490,1455,1456,1458,1460,1462,1464,1466,1469,1471],{"class":492,"line":665},[490,1457,599],{"class":500},[490,1459,754],{"class":602},[490,1461,606],{"class":500},[490,1463,609],{"class":500},[490,1465,612],{"class":500},[490,1467,1468],{"class":517},".9",[490,1470,606],{"class":500},[490,1472,620],{"class":500},[490,1474,1475,1477,1480,1482,1484,1486,1489,1491],{"class":492,"line":686},[490,1476,599],{"class":500},[490,1478,1479],{"class":602},"95",[490,1481,606],{"class":500},[490,1483,609],{"class":500},[490,1485,612],{"class":500},[490,1487,1488],{"class":517},".95",[490,1490,606],{"class":500},[490,1492,620],{"class":500},[490,1494,1495,1497,1500,1502,1504,1506,1508,1510],{"class":492,"line":707},[490,1496,599],{"class":500},[490,1498,1499],{"class":602},"100",[490,1501,606],{"class":500},[490,1503,609],{"class":500},[490,1505,612],{"class":500},[490,1507,628],{"class":517},[490,1509,606],{"class":500},[490,1511,620],{"class":500},[490,1513,1514,1516,1519,1521,1523,1525,1528,1530],{"class":492,"line":728},[490,1515,599],{"class":500},[490,1517,1518],{"class":602},"105",[490,1520,606],{"class":500},[490,1522,609],{"class":500},[490,1524,612],{"class":500},[490,1526,1527],{"class":517},"1.05",[490,1529,606],{"class":500},[490,1531,620],{"class":500},[490,1533,1534,1536,1539,1541,1543,1545,1548,1550],{"class":492,"line":749},[490,1535,599],{"class":500},[490,1537,1538],{"class":602},"110",[490,1540,606],{"class":500},[490,1542,609],{"class":500},[490,1544,612],{"class":500},[490,1546,1547],{"class":517},"1.1",[490,1549,606],{"class":500},[490,1551,620],{"class":500},[490,1553,1554,1556,1559,1561,1563,1565,1568,1570],{"class":492,"line":770},[490,1555,599],{"class":500},[490,1557,1558],{"class":602},"125",[490,1560,606],{"class":500},[490,1562,609],{"class":500},[490,1564,612],{"class":500},[490,1566,1567],{"class":517},"1.25",[490,1569,606],{"class":500},[490,1571,620],{"class":500},[490,1573,1574,1576,1579,1581,1583,1585,1588,1590],{"class":492,"line":791},[490,1575,599],{"class":500},[490,1577,1578],{"class":602},"150",[490,1580,606],{"class":500},[490,1582,609],{"class":500},[490,1584,612],{"class":500},[490,1586,1587],{"class":517},"1.5",[490,1589,606],{"class":500},[490,1591,620],{"class":500},[490,1593,1594],{"class":492,"line":802},[490,1595,1596],{"class":500},"};\n",[490,1598,1599],{"class":492,"line":807},[490,1600,553],{"emptyLinePlaceholder":206},[490,1602,1604,1606,1608,1610,1613,1616],{"class":492,"line":1603},19,[490,1605,1296],{"class":569},[490,1607,587],{"class":504},[490,1609,590],{"class":500},[490,1611,1612],{"class":504}," scaleValues)",[490,1614,1615],{"class":500},";",[490,1617,1618],{"class":1209},"    // Both X and Y\n",[490,1620,1622,1625,1627,1629,1631,1633],{"class":492,"line":1621},20,[490,1623,1624],{"class":569},"useScaleXUtility",[490,1626,587],{"class":504},[490,1628,590],{"class":500},[490,1630,1612],{"class":504},[490,1632,1615],{"class":500},[490,1634,1635],{"class":1209},"   // X axis only\n",[490,1637,1639,1642,1644,1646,1648,1650],{"class":492,"line":1638},21,[490,1640,1641],{"class":569},"useScaleYUtility",[490,1643,587],{"class":504},[490,1645,590],{"class":500},[490,1647,1612],{"class":504},[490,1649,1615],{"class":500},[490,1651,1652],{"class":1209},"   // Y axis only\n",[490,1654,1656],{"class":492,"line":1655},22,[490,1657,553],{"emptyLinePlaceholder":206},[490,1659,1661,1663,1665,1667],{"class":492,"line":1660},23,[490,1662,810],{"class":496},[490,1664,813],{"class":496},[490,1666,816],{"class":504},[490,1668,524],{"class":500},[475,1670,1671],{"icon":140,"label":821},[480,1672,1674],{"className":824,"code":1673,"filename":826,"language":827,"meta":486,"style":486},"._scale\\:100 {\n    --tw-scale-x: 1;\n    --tw-scale-y: 1;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n._scale\\:105 {\n    --tw-scale-x: 1.05;\n    --tw-scale-y: 1.05;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n._scale-x\\:100 {\n    --tw-scale-x: 1;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n/* ... more values */\n",[461,1675,1676,1689,1701,1712,1798,1802,1806,1818,1829,1839,1925,1929,1933,1946,1956,2042,2046],{"__ignoreMap":486},[490,1677,1678,1680,1683,1685,1687],{"class":492,"line":493},[490,1679,834],{"class":500},[490,1681,1682],{"class":837},"_scale",[490,1684,841],{"class":504},[490,1686,1499],{"class":837},[490,1688,593],{"class":500},[490,1690,1691,1694,1696,1699],{"class":492,"line":527},[490,1692,1693],{"class":504},"    --tw-scale-x",[490,1695,609],{"class":500},[490,1697,1698],{"class":855}," 1",[490,1700,524],{"class":500},[490,1702,1703,1706,1708,1710],{"class":492,"line":550},[490,1704,1705],{"class":504},"    --tw-scale-y",[490,1707,609],{"class":500},[490,1709,1698],{"class":855},[490,1711,524],{"class":500},[490,1713,1714,1716,1718,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742,1744,1746,1748,1750,1752,1754,1756,1758,1760,1762,1764,1766,1768,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788,1790,1792,1794,1796],{"class":492,"line":556},[490,1715,864],{"class":863},[490,1717,609],{"class":500},[490,1719,869],{"class":569},[490,1721,872],{"class":500},[490,1723,875],{"class":569},[490,1725,872],{"class":500},[490,1727,880],{"class":504},[490,1729,883],{"class":500},[490,1731,886],{"class":569},[490,1733,872],{"class":500},[490,1735,891],{"class":504},[490,1737,894],{"class":500},[490,1739,897],{"class":569},[490,1741,872],{"class":500},[490,1743,875],{"class":569},[490,1745,872],{"class":500},[490,1747,906],{"class":504},[490,1749,894],{"class":500},[490,1751,911],{"class":569},[490,1753,872],{"class":500},[490,1755,875],{"class":569},[490,1757,872],{"class":500},[490,1759,920],{"class":504},[490,1761,894],{"class":500},[490,1763,925],{"class":569},[490,1765,872],{"class":500},[490,1767,875],{"class":569},[490,1769,872],{"class":500},[490,1771,934],{"class":504},[490,1773,894],{"class":500},[490,1775,939],{"class":569},[490,1777,872],{"class":500},[490,1779,875],{"class":569},[490,1781,872],{"class":500},[490,1783,948],{"class":504},[490,1785,894],{"class":500},[490,1787,953],{"class":569},[490,1789,872],{"class":500},[490,1791,875],{"class":569},[490,1793,872],{"class":500},[490,1795,962],{"class":504},[490,1797,965],{"class":500},[490,1799,1800],{"class":492,"line":577},[490,1801,970],{"class":500},[490,1803,1804],{"class":492,"line":582},[490,1805,553],{"emptyLinePlaceholder":206},[490,1807,1808,1810,1812,1814,1816],{"class":492,"line":596},[490,1809,834],{"class":500},[490,1811,1682],{"class":837},[490,1813,841],{"class":504},[490,1815,1518],{"class":837},[490,1817,593],{"class":500},[490,1819,1820,1822,1824,1827],{"class":492,"line":623},[490,1821,1693],{"class":504},[490,1823,609],{"class":500},[490,1825,1826],{"class":855}," 1.05",[490,1828,524],{"class":500},[490,1830,1831,1833,1835,1837],{"class":492,"line":644},[490,1832,1705],{"class":504},[490,1834,609],{"class":500},[490,1836,1826],{"class":855},[490,1838,524],{"class":500},[490,1840,1841,1843,1845,1847,1849,1851,1853,1855,1857,1859,1861,1863,1865,1867,1869,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,1921,1923],{"class":492,"line":665},[490,1842,864],{"class":863},[490,1844,609],{"class":500},[490,1846,869],{"class":569},[490,1848,872],{"class":500},[490,1850,875],{"class":569},[490,1852,872],{"class":500},[490,1854,880],{"class":504},[490,1856,883],{"class":500},[490,1858,886],{"class":569},[490,1860,872],{"class":500},[490,1862,891],{"class":504},[490,1864,894],{"class":500},[490,1866,897],{"class":569},[490,1868,872],{"class":500},[490,1870,875],{"class":569},[490,1872,872],{"class":500},[490,1874,906],{"class":504},[490,1876,894],{"class":500},[490,1878,911],{"class":569},[490,1880,872],{"class":500},[490,1882,875],{"class":569},[490,1884,872],{"class":500},[490,1886,920],{"class":504},[490,1888,894],{"class":500},[490,1890,925],{"class":569},[490,1892,872],{"class":500},[490,1894,875],{"class":569},[490,1896,872],{"class":500},[490,1898,934],{"class":504},[490,1900,894],{"class":500},[490,1902,939],{"class":569},[490,1904,872],{"class":500},[490,1906,875],{"class":569},[490,1908,872],{"class":500},[490,1910,948],{"class":504},[490,1912,894],{"class":500},[490,1914,953],{"class":569},[490,1916,872],{"class":500},[490,1918,875],{"class":569},[490,1920,872],{"class":500},[490,1922,962],{"class":504},[490,1924,965],{"class":500},[490,1926,1927],{"class":492,"line":686},[490,1928,970],{"class":500},[490,1930,1931],{"class":492,"line":707},[490,1932,553],{"emptyLinePlaceholder":206},[490,1934,1935,1937,1940,1942,1944],{"class":492,"line":728},[490,1936,834],{"class":500},[490,1938,1939],{"class":837},"_scale-x",[490,1941,841],{"class":504},[490,1943,1499],{"class":837},[490,1945,593],{"class":500},[490,1947,1948,1950,1952,1954],{"class":492,"line":749},[490,1949,1693],{"class":504},[490,1951,609],{"class":500},[490,1953,1698],{"class":855},[490,1955,524],{"class":500},[490,1957,1958,1960,1962,1964,1966,1968,1970,1972,1974,1976,1978,1980,1982,1984,1986,1988,1990,1992,1994,1996,1998,2000,2002,2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2024,2026,2028,2030,2032,2034,2036,2038,2040],{"class":492,"line":770},[490,1959,864],{"class":863},[490,1961,609],{"class":500},[490,1963,869],{"class":569},[490,1965,872],{"class":500},[490,1967,875],{"class":569},[490,1969,872],{"class":500},[490,1971,880],{"class":504},[490,1973,883],{"class":500},[490,1975,886],{"class":569},[490,1977,872],{"class":500},[490,1979,891],{"class":504},[490,1981,894],{"class":500},[490,1983,897],{"class":569},[490,1985,872],{"class":500},[490,1987,875],{"class":569},[490,1989,872],{"class":500},[490,1991,906],{"class":504},[490,1993,894],{"class":500},[490,1995,911],{"class":569},[490,1997,872],{"class":500},[490,1999,875],{"class":569},[490,2001,872],{"class":500},[490,2003,920],{"class":504},[490,2005,894],{"class":500},[490,2007,925],{"class":569},[490,2009,872],{"class":500},[490,2011,875],{"class":569},[490,2013,872],{"class":500},[490,2015,934],{"class":504},[490,2017,894],{"class":500},[490,2019,939],{"class":569},[490,2021,872],{"class":500},[490,2023,875],{"class":569},[490,2025,872],{"class":500},[490,2027,948],{"class":504},[490,2029,894],{"class":500},[490,2031,953],{"class":569},[490,2033,872],{"class":500},[490,2035,875],{"class":569},[490,2037,872],{"class":500},[490,2039,962],{"class":504},[490,2041,965],{"class":500},[490,2043,2044],{"class":492,"line":791},[490,2045,970],{"class":500},[490,2047,2048],{"class":492,"line":802},[490,2049,1210],{"class":1209},[475,2051,2052],{"icon":1213,"label":1214},[480,2053,2055],{"className":1217,"code":2054,"language":1219,"meta":486,"style":486},"\u003Cdiv class=\"_scale:105\">Slightly enlarged\u003C/div>\n\u003Cdiv class=\"_scale:150\">50% larger\u003C/div>\n\u003Cdiv class=\"_hover:scale:105\" style=\"transition: transform 0.2s;\">Hover to grow\u003C/div>\n",[461,2056,2057,2085,2113],{"__ignoreMap":486},[490,2058,2059,2061,2063,2065,2067,2069,2072,2074,2076,2079,2081,2083],{"class":492,"line":493},[490,2060,1226],{"class":500},[490,2062,1229],{"class":602},[490,2064,1232],{"class":559},[490,2066,566],{"class":500},[490,2068,521],{"class":500},[490,2070,2071],{"class":517},"_scale:105",[490,2073,521],{"class":500},[490,2075,1244],{"class":500},[490,2077,2078],{"class":504},"Slightly enlarged",[490,2080,1250],{"class":500},[490,2082,1229],{"class":602},[490,2084,1255],{"class":500},[490,2086,2087,2089,2091,2093,2095,2097,2100,2102,2104,2107,2109,2111],{"class":492,"line":527},[490,2088,1226],{"class":500},[490,2090,1229],{"class":602},[490,2092,1232],{"class":559},[490,2094,566],{"class":500},[490,2096,521],{"class":500},[490,2098,2099],{"class":517},"_scale:150",[490,2101,521],{"class":500},[490,2103,1244],{"class":500},[490,2105,2106],{"class":504},"50% larger",[490,2108,1250],{"class":500},[490,2110,1229],{"class":602},[490,2112,1255],{"class":500},[490,2114,2115,2117,2119,2121,2123,2125,2128,2130,2133,2135,2137,2140,2142,2144,2147,2149,2151],{"class":492,"line":550},[490,2116,1226],{"class":500},[490,2118,1229],{"class":602},[490,2120,1232],{"class":559},[490,2122,566],{"class":500},[490,2124,521],{"class":500},[490,2126,2127],{"class":517},"_hover:scale:105",[490,2129,521],{"class":500},[490,2131,2132],{"class":559}," style",[490,2134,566],{"class":500},[490,2136,521],{"class":500},[490,2138,2139],{"class":517},"transition: transform 0.2s;",[490,2141,521],{"class":500},[490,2143,1244],{"class":500},[490,2145,2146],{"class":504},"Hover to grow",[490,2148,1250],{"class":500},[490,2150,1229],{"class":602},[490,2152,1255],{"class":500},[414,2154,2156],{"id":2155},"usetranslateutility",[461,2157,2158],{},"useTranslateUtility",[418,2160,466,2161,2164],{},[461,2162,2163],{},"useTranslateUtility()"," function creates utility classes for moving elements.",[472,2166,2167,2435,2805],{},[475,2168,2169],{"icon":477,"label":478},[480,2170,2172],{"className":482,"code":2171,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useTranslateXUtility, useTranslateYUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst translateValues = {\n    '0': '0px',\n    '1': '0.25rem',\n    '2': '0.5rem',\n    '4': '1rem',\n    '8': '2rem',\n    '1/2': '50%',\n    full: '100%',\n};\n\nuseTranslateXUtility(s, translateValues);\nuseTranslateYUtility(s, translateValues);\n\nexport default s;\n",[461,2173,2174,2194,2220,2224,2238,2242,2253,2272,2291,2310,2330,2350,2370,2386,2390,2394,2408,2421,2425],{"__ignoreMap":486},[490,2175,2176,2178,2180,2182,2184,2186,2188,2190,2192],{"class":492,"line":493},[490,2177,497],{"class":496},[490,2179,501],{"class":500},[490,2181,505],{"class":504},[490,2183,508],{"class":500},[490,2185,511],{"class":496},[490,2187,514],{"class":500},[490,2189,518],{"class":517},[490,2191,521],{"class":500},[490,2193,524],{"class":500},[490,2195,2196,2198,2200,2203,2205,2208,2210,2212,2214,2216,2218],{"class":492,"line":527},[490,2197,497],{"class":496},[490,2199,501],{"class":500},[490,2201,2202],{"class":504}," useTranslateXUtility",[490,2204,590],{"class":500},[490,2206,2207],{"class":504}," useTranslateYUtility",[490,2209,508],{"class":500},[490,2211,511],{"class":496},[490,2213,514],{"class":500},[490,2215,543],{"class":517},[490,2217,521],{"class":500},[490,2219,524],{"class":500},[490,2221,2222],{"class":492,"line":550},[490,2223,553],{"emptyLinePlaceholder":206},[490,2225,2226,2228,2230,2232,2234,2236],{"class":492,"line":556},[490,2227,560],{"class":559},[490,2229,563],{"class":504},[490,2231,566],{"class":500},[490,2233,505],{"class":569},[490,2235,572],{"class":504},[490,2237,524],{"class":500},[490,2239,2240],{"class":492,"line":577},[490,2241,553],{"emptyLinePlaceholder":206},[490,2243,2244,2246,2249,2251],{"class":492,"line":582},[490,2245,560],{"class":559},[490,2247,2248],{"class":504}," translateValues ",[490,2250,566],{"class":500},[490,2252,593],{"class":500},[490,2254,2255,2257,2259,2261,2263,2265,2268,2270],{"class":492,"line":596},[490,2256,599],{"class":500},[490,2258,603],{"class":602},[490,2260,606],{"class":500},[490,2262,609],{"class":500},[490,2264,612],{"class":500},[490,2266,2267],{"class":517},"0px",[490,2269,606],{"class":500},[490,2271,620],{"class":500},[490,2273,2274,2276,2278,2280,2282,2284,2287,2289],{"class":492,"line":623},[490,2275,599],{"class":500},[490,2277,628],{"class":602},[490,2279,606],{"class":500},[490,2281,609],{"class":500},[490,2283,612],{"class":500},[490,2285,2286],{"class":517},"0.25rem",[490,2288,606],{"class":500},[490,2290,620],{"class":500},[490,2292,2293,2295,2297,2299,2301,2303,2306,2308],{"class":492,"line":644},[490,2294,599],{"class":500},[490,2296,649],{"class":602},[490,2298,606],{"class":500},[490,2300,609],{"class":500},[490,2302,612],{"class":500},[490,2304,2305],{"class":517},"0.5rem",[490,2307,606],{"class":500},[490,2309,620],{"class":500},[490,2311,2312,2314,2317,2319,2321,2323,2326,2328],{"class":492,"line":665},[490,2313,599],{"class":500},[490,2315,2316],{"class":602},"4",[490,2318,606],{"class":500},[490,2320,609],{"class":500},[490,2322,612],{"class":500},[490,2324,2325],{"class":517},"1rem",[490,2327,606],{"class":500},[490,2329,620],{"class":500},[490,2331,2332,2334,2337,2339,2341,2343,2346,2348],{"class":492,"line":686},[490,2333,599],{"class":500},[490,2335,2336],{"class":602},"8",[490,2338,606],{"class":500},[490,2340,609],{"class":500},[490,2342,612],{"class":500},[490,2344,2345],{"class":517},"2rem",[490,2347,606],{"class":500},[490,2349,620],{"class":500},[490,2351,2352,2354,2357,2359,2361,2363,2366,2368],{"class":492,"line":707},[490,2353,599],{"class":500},[490,2355,2356],{"class":602},"1/2",[490,2358,606],{"class":500},[490,2360,609],{"class":500},[490,2362,612],{"class":500},[490,2364,2365],{"class":517},"50%",[490,2367,606],{"class":500},[490,2369,620],{"class":500},[490,2371,2372,2375,2377,2379,2382,2384],{"class":492,"line":728},[490,2373,2374],{"class":602},"    full",[490,2376,609],{"class":500},[490,2378,612],{"class":500},[490,2380,2381],{"class":517},"100%",[490,2383,606],{"class":500},[490,2385,620],{"class":500},[490,2387,2388],{"class":492,"line":749},[490,2389,1596],{"class":500},[490,2391,2392],{"class":492,"line":770},[490,2393,553],{"emptyLinePlaceholder":206},[490,2395,2396,2399,2401,2403,2406],{"class":492,"line":791},[490,2397,2398],{"class":569},"useTranslateXUtility",[490,2400,587],{"class":504},[490,2402,590],{"class":500},[490,2404,2405],{"class":504}," translateValues)",[490,2407,524],{"class":500},[490,2409,2410,2413,2415,2417,2419],{"class":492,"line":802},[490,2411,2412],{"class":569},"useTranslateYUtility",[490,2414,587],{"class":504},[490,2416,590],{"class":500},[490,2418,2405],{"class":504},[490,2420,524],{"class":500},[490,2422,2423],{"class":492,"line":807},[490,2424,553],{"emptyLinePlaceholder":206},[490,2426,2427,2429,2431,2433],{"class":492,"line":1603},[490,2428,810],{"class":496},[490,2430,813],{"class":496},[490,2432,816],{"class":504},[490,2434,524],{"class":500},[475,2436,2437],{"icon":140,"label":821},[480,2438,2440],{"className":824,"code":2439,"filename":826,"language":827,"meta":486,"style":486},"._translate-x\\:0 {\n    --tw-translate-x: 0px;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n._translate-x\\:1\\/2 {\n    --tw-translate-x: 50%;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n._translate-y\\:1\\/2 {\n    --tw-translate-y: 50%;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n/* ... more values */\n",[461,2441,2442,2455,2467,2553,2557,2561,2578,2589,2675,2679,2683,2700,2711,2797,2801],{"__ignoreMap":486},[490,2443,2444,2446,2449,2451,2453],{"class":492,"line":493},[490,2445,834],{"class":500},[490,2447,2448],{"class":837},"_translate-x",[490,2450,841],{"class":504},[490,2452,603],{"class":837},[490,2454,593],{"class":500},[490,2456,2457,2460,2462,2465],{"class":492,"line":527},[490,2458,2459],{"class":504},"    --tw-translate-x",[490,2461,609],{"class":500},[490,2463,2464],{"class":855}," 0px",[490,2466,524],{"class":500},[490,2468,2469,2471,2473,2475,2477,2479,2481,2483,2485,2487,2489,2491,2493,2495,2497,2499,2501,2503,2505,2507,2509,2511,2513,2515,2517,2519,2521,2523,2525,2527,2529,2531,2533,2535,2537,2539,2541,2543,2545,2547,2549,2551],{"class":492,"line":550},[490,2470,864],{"class":863},[490,2472,609],{"class":500},[490,2474,869],{"class":569},[490,2476,872],{"class":500},[490,2478,875],{"class":569},[490,2480,872],{"class":500},[490,2482,880],{"class":504},[490,2484,883],{"class":500},[490,2486,886],{"class":569},[490,2488,872],{"class":500},[490,2490,891],{"class":504},[490,2492,894],{"class":500},[490,2494,897],{"class":569},[490,2496,872],{"class":500},[490,2498,875],{"class":569},[490,2500,872],{"class":500},[490,2502,906],{"class":504},[490,2504,894],{"class":500},[490,2506,911],{"class":569},[490,2508,872],{"class":500},[490,2510,875],{"class":569},[490,2512,872],{"class":500},[490,2514,920],{"class":504},[490,2516,894],{"class":500},[490,2518,925],{"class":569},[490,2520,872],{"class":500},[490,2522,875],{"class":569},[490,2524,872],{"class":500},[490,2526,934],{"class":504},[490,2528,894],{"class":500},[490,2530,939],{"class":569},[490,2532,872],{"class":500},[490,2534,875],{"class":569},[490,2536,872],{"class":500},[490,2538,948],{"class":504},[490,2540,894],{"class":500},[490,2542,953],{"class":569},[490,2544,872],{"class":500},[490,2546,875],{"class":569},[490,2548,872],{"class":500},[490,2550,962],{"class":504},[490,2552,965],{"class":500},[490,2554,2555],{"class":492,"line":556},[490,2556,970],{"class":500},[490,2558,2559],{"class":492,"line":577},[490,2560,553],{"emptyLinePlaceholder":206},[490,2562,2563,2565,2567,2569,2571,2574,2576],{"class":492,"line":582},[490,2564,834],{"class":500},[490,2566,2448],{"class":837},[490,2568,841],{"class":504},[490,2570,628],{"class":837},[490,2572,2573],{"class":504},"\\/",[490,2575,649],{"class":837},[490,2577,593],{"class":500},[490,2579,2580,2582,2584,2587],{"class":492,"line":596},[490,2581,2459],{"class":504},[490,2583,609],{"class":500},[490,2585,2586],{"class":855}," 50%",[490,2588,524],{"class":500},[490,2590,2591,2593,2595,2597,2599,2601,2603,2605,2607,2609,2611,2613,2615,2617,2619,2621,2623,2625,2627,2629,2631,2633,2635,2637,2639,2641,2643,2645,2647,2649,2651,2653,2655,2657,2659,2661,2663,2665,2667,2669,2671,2673],{"class":492,"line":623},[490,2592,864],{"class":863},[490,2594,609],{"class":500},[490,2596,869],{"class":569},[490,2598,872],{"class":500},[490,2600,875],{"class":569},[490,2602,872],{"class":500},[490,2604,880],{"class":504},[490,2606,883],{"class":500},[490,2608,886],{"class":569},[490,2610,872],{"class":500},[490,2612,891],{"class":504},[490,2614,894],{"class":500},[490,2616,897],{"class":569},[490,2618,872],{"class":500},[490,2620,875],{"class":569},[490,2622,872],{"class":500},[490,2624,906],{"class":504},[490,2626,894],{"class":500},[490,2628,911],{"class":569},[490,2630,872],{"class":500},[490,2632,875],{"class":569},[490,2634,872],{"class":500},[490,2636,920],{"class":504},[490,2638,894],{"class":500},[490,2640,925],{"class":569},[490,2642,872],{"class":500},[490,2644,875],{"class":569},[490,2646,872],{"class":500},[490,2648,934],{"class":504},[490,2650,894],{"class":500},[490,2652,939],{"class":569},[490,2654,872],{"class":500},[490,2656,875],{"class":569},[490,2658,872],{"class":500},[490,2660,948],{"class":504},[490,2662,894],{"class":500},[490,2664,953],{"class":569},[490,2666,872],{"class":500},[490,2668,875],{"class":569},[490,2670,872],{"class":500},[490,2672,962],{"class":504},[490,2674,965],{"class":500},[490,2676,2677],{"class":492,"line":644},[490,2678,970],{"class":500},[490,2680,2681],{"class":492,"line":665},[490,2682,553],{"emptyLinePlaceholder":206},[490,2684,2685,2687,2690,2692,2694,2696,2698],{"class":492,"line":686},[490,2686,834],{"class":500},[490,2688,2689],{"class":837},"_translate-y",[490,2691,841],{"class":504},[490,2693,628],{"class":837},[490,2695,2573],{"class":504},[490,2697,649],{"class":837},[490,2699,593],{"class":500},[490,2701,2702,2705,2707,2709],{"class":492,"line":707},[490,2703,2704],{"class":504},"    --tw-translate-y",[490,2706,609],{"class":500},[490,2708,2586],{"class":855},[490,2710,524],{"class":500},[490,2712,2713,2715,2717,2719,2721,2723,2725,2727,2729,2731,2733,2735,2737,2739,2741,2743,2745,2747,2749,2751,2753,2755,2757,2759,2761,2763,2765,2767,2769,2771,2773,2775,2777,2779,2781,2783,2785,2787,2789,2791,2793,2795],{"class":492,"line":728},[490,2714,864],{"class":863},[490,2716,609],{"class":500},[490,2718,869],{"class":569},[490,2720,872],{"class":500},[490,2722,875],{"class":569},[490,2724,872],{"class":500},[490,2726,880],{"class":504},[490,2728,883],{"class":500},[490,2730,886],{"class":569},[490,2732,872],{"class":500},[490,2734,891],{"class":504},[490,2736,894],{"class":500},[490,2738,897],{"class":569},[490,2740,872],{"class":500},[490,2742,875],{"class":569},[490,2744,872],{"class":500},[490,2746,906],{"class":504},[490,2748,894],{"class":500},[490,2750,911],{"class":569},[490,2752,872],{"class":500},[490,2754,875],{"class":569},[490,2756,872],{"class":500},[490,2758,920],{"class":504},[490,2760,894],{"class":500},[490,2762,925],{"class":569},[490,2764,872],{"class":500},[490,2766,875],{"class":569},[490,2768,872],{"class":500},[490,2770,934],{"class":504},[490,2772,894],{"class":500},[490,2774,939],{"class":569},[490,2776,872],{"class":500},[490,2778,875],{"class":569},[490,2780,872],{"class":500},[490,2782,948],{"class":504},[490,2784,894],{"class":500},[490,2786,953],{"class":569},[490,2788,872],{"class":500},[490,2790,875],{"class":569},[490,2792,872],{"class":500},[490,2794,962],{"class":504},[490,2796,965],{"class":500},[490,2798,2799],{"class":492,"line":749},[490,2800,970],{"class":500},[490,2802,2803],{"class":492,"line":770},[490,2804,1210],{"class":1209},[475,2806,2807],{"icon":1213,"label":1214},[480,2808,2810],{"className":1217,"code":2809,"language":1219,"meta":486,"style":486},"\u003Cdiv class=\"_translate-x:4\">Moved 1rem right\u003C/div>\n\u003Cdiv class=\"_translate-y:1/2\">Moved 50% down\u003C/div>\n\u003Cdiv class=\"_translate-x:-1/2 _translate-y:-1/2\">Offset for centering\u003C/div>\n",[461,2811,2812,2840,2868],{"__ignoreMap":486},[490,2813,2814,2816,2818,2820,2822,2824,2827,2829,2831,2834,2836,2838],{"class":492,"line":493},[490,2815,1226],{"class":500},[490,2817,1229],{"class":602},[490,2819,1232],{"class":559},[490,2821,566],{"class":500},[490,2823,521],{"class":500},[490,2825,2826],{"class":517},"_translate-x:4",[490,2828,521],{"class":500},[490,2830,1244],{"class":500},[490,2832,2833],{"class":504},"Moved 1rem right",[490,2835,1250],{"class":500},[490,2837,1229],{"class":602},[490,2839,1255],{"class":500},[490,2841,2842,2844,2846,2848,2850,2852,2855,2857,2859,2862,2864,2866],{"class":492,"line":527},[490,2843,1226],{"class":500},[490,2845,1229],{"class":602},[490,2847,1232],{"class":559},[490,2849,566],{"class":500},[490,2851,521],{"class":500},[490,2853,2854],{"class":517},"_translate-y:1/2",[490,2856,521],{"class":500},[490,2858,1244],{"class":500},[490,2860,2861],{"class":504},"Moved 50% down",[490,2863,1250],{"class":500},[490,2865,1229],{"class":602},[490,2867,1255],{"class":500},[490,2869,2870,2872,2874,2876,2878,2880,2883,2885,2887,2890,2892,2894],{"class":492,"line":550},[490,2871,1226],{"class":500},[490,2873,1229],{"class":602},[490,2875,1232],{"class":559},[490,2877,566],{"class":500},[490,2879,521],{"class":500},[490,2881,2882],{"class":517},"_translate-x:-1/2 _translate-y:-1/2",[490,2884,521],{"class":500},[490,2886,1244],{"class":500},[490,2888,2889],{"class":504},"Offset for centering",[490,2891,1250],{"class":500},[490,2893,1229],{"class":602},[490,2895,1255],{"class":500},[414,2897,2899],{"id":2898},"more-transform-utilities","More Transform Utilities",[2901,2902,2904,2907,2908],"h3",{"id":2903},"useskewxutility-useskewyutility",[461,2905,2906],{},"useSkewXUtility"," & ",[461,2909,2910],{},"useSkewYUtility",[418,2912,2913],{},"Skew elements along the X or Y axis.",[480,2915,2917],{"className":482,"code":2916,"language":485,"meta":486,"style":486},"useSkewXUtility(s, {\n    '0': '0deg',\n    '1': '1deg',\n    '2': '2deg',\n    '3': '3deg',\n    '6': '6deg',\n    '12': '12deg',\n});\n\nuseSkewYUtility(s, {\n    '0': '0deg',\n    '1': '1deg',\n    '2': '2deg',\n    '3': '3deg',\n    '6': '6deg',\n    '12': '12deg',\n});\n",[461,2918,2919,2929,2947,2965,2983,3001,3019,3037,3045,3049,3059,3077,3095,3113,3131,3149,3167],{"__ignoreMap":486},[490,2920,2921,2923,2925,2927],{"class":492,"line":493},[490,2922,2906],{"class":569},[490,2924,587],{"class":504},[490,2926,590],{"class":500},[490,2928,593],{"class":500},[490,2930,2931,2933,2935,2937,2939,2941,2943,2945],{"class":492,"line":527},[490,2932,599],{"class":500},[490,2934,603],{"class":602},[490,2936,606],{"class":500},[490,2938,609],{"class":500},[490,2940,612],{"class":500},[490,2942,615],{"class":517},[490,2944,606],{"class":500},[490,2946,620],{"class":500},[490,2948,2949,2951,2953,2955,2957,2959,2961,2963],{"class":492,"line":550},[490,2950,599],{"class":500},[490,2952,628],{"class":602},[490,2954,606],{"class":500},[490,2956,609],{"class":500},[490,2958,612],{"class":500},[490,2960,637],{"class":517},[490,2962,606],{"class":500},[490,2964,620],{"class":500},[490,2966,2967,2969,2971,2973,2975,2977,2979,2981],{"class":492,"line":556},[490,2968,599],{"class":500},[490,2970,649],{"class":602},[490,2972,606],{"class":500},[490,2974,609],{"class":500},[490,2976,612],{"class":500},[490,2978,658],{"class":517},[490,2980,606],{"class":500},[490,2982,620],{"class":500},[490,2984,2985,2987,2989,2991,2993,2995,2997,2999],{"class":492,"line":577},[490,2986,599],{"class":500},[490,2988,670],{"class":602},[490,2990,606],{"class":500},[490,2992,609],{"class":500},[490,2994,612],{"class":500},[490,2996,679],{"class":517},[490,2998,606],{"class":500},[490,3000,620],{"class":500},[490,3002,3003,3005,3007,3009,3011,3013,3015,3017],{"class":492,"line":582},[490,3004,599],{"class":500},[490,3006,691],{"class":602},[490,3008,606],{"class":500},[490,3010,609],{"class":500},[490,3012,612],{"class":500},[490,3014,700],{"class":517},[490,3016,606],{"class":500},[490,3018,620],{"class":500},[490,3020,3021,3023,3025,3027,3029,3031,3033,3035],{"class":492,"line":596},[490,3022,599],{"class":500},[490,3024,712],{"class":602},[490,3026,606],{"class":500},[490,3028,609],{"class":500},[490,3030,612],{"class":500},[490,3032,721],{"class":517},[490,3034,606],{"class":500},[490,3036,620],{"class":500},[490,3038,3039,3041,3043],{"class":492,"line":623},[490,3040,794],{"class":500},[490,3042,797],{"class":504},[490,3044,524],{"class":500},[490,3046,3047],{"class":492,"line":644},[490,3048,553],{"emptyLinePlaceholder":206},[490,3050,3051,3053,3055,3057],{"class":492,"line":665},[490,3052,2910],{"class":569},[490,3054,587],{"class":504},[490,3056,590],{"class":500},[490,3058,593],{"class":500},[490,3060,3061,3063,3065,3067,3069,3071,3073,3075],{"class":492,"line":686},[490,3062,599],{"class":500},[490,3064,603],{"class":602},[490,3066,606],{"class":500},[490,3068,609],{"class":500},[490,3070,612],{"class":500},[490,3072,615],{"class":517},[490,3074,606],{"class":500},[490,3076,620],{"class":500},[490,3078,3079,3081,3083,3085,3087,3089,3091,3093],{"class":492,"line":707},[490,3080,599],{"class":500},[490,3082,628],{"class":602},[490,3084,606],{"class":500},[490,3086,609],{"class":500},[490,3088,612],{"class":500},[490,3090,637],{"class":517},[490,3092,606],{"class":500},[490,3094,620],{"class":500},[490,3096,3097,3099,3101,3103,3105,3107,3109,3111],{"class":492,"line":728},[490,3098,599],{"class":500},[490,3100,649],{"class":602},[490,3102,606],{"class":500},[490,3104,609],{"class":500},[490,3106,612],{"class":500},[490,3108,658],{"class":517},[490,3110,606],{"class":500},[490,3112,620],{"class":500},[490,3114,3115,3117,3119,3121,3123,3125,3127,3129],{"class":492,"line":749},[490,3116,599],{"class":500},[490,3118,670],{"class":602},[490,3120,606],{"class":500},[490,3122,609],{"class":500},[490,3124,612],{"class":500},[490,3126,679],{"class":517},[490,3128,606],{"class":500},[490,3130,620],{"class":500},[490,3132,3133,3135,3137,3139,3141,3143,3145,3147],{"class":492,"line":770},[490,3134,599],{"class":500},[490,3136,691],{"class":602},[490,3138,606],{"class":500},[490,3140,609],{"class":500},[490,3142,612],{"class":500},[490,3144,700],{"class":517},[490,3146,606],{"class":500},[490,3148,620],{"class":500},[490,3150,3151,3153,3155,3157,3159,3161,3163,3165],{"class":492,"line":791},[490,3152,599],{"class":500},[490,3154,712],{"class":602},[490,3156,606],{"class":500},[490,3158,609],{"class":500},[490,3160,612],{"class":500},[490,3162,721],{"class":517},[490,3164,606],{"class":500},[490,3166,620],{"class":500},[490,3168,3169,3171,3173],{"class":492,"line":802},[490,3170,794],{"class":500},[490,3172,797],{"class":504},[490,3174,524],{"class":500},[2901,3176,3178],{"id":3177},"usetransformoriginutility",[461,3179,3180],{},"useTransformOriginUtility",[418,3182,3183],{},"Set the origin point for transforms.",[480,3185,3187],{"className":482,"code":3186,"language":485,"meta":486,"style":486},"useTransformOriginUtility(s, {\n    center: 'center',\n    top: 'top',\n    'top-right': 'top right',\n    right: 'right',\n    'bottom-right': 'bottom right',\n    bottom: 'bottom',\n    'bottom-left': 'bottom left',\n    left: 'left',\n    'top-left': 'top left',\n});\n",[461,3188,3189,3199,3215,3231,3251,3267,3287,3303,3323,3339,3359],{"__ignoreMap":486},[490,3190,3191,3193,3195,3197],{"class":492,"line":493},[490,3192,3180],{"class":569},[490,3194,587],{"class":504},[490,3196,590],{"class":500},[490,3198,593],{"class":500},[490,3200,3201,3204,3206,3208,3211,3213],{"class":492,"line":527},[490,3202,3203],{"class":602},"    center",[490,3205,609],{"class":500},[490,3207,612],{"class":500},[490,3209,3210],{"class":517},"center",[490,3212,606],{"class":500},[490,3214,620],{"class":500},[490,3216,3217,3220,3222,3224,3227,3229],{"class":492,"line":550},[490,3218,3219],{"class":602},"    top",[490,3221,609],{"class":500},[490,3223,612],{"class":500},[490,3225,3226],{"class":517},"top",[490,3228,606],{"class":500},[490,3230,620],{"class":500},[490,3232,3233,3235,3238,3240,3242,3244,3247,3249],{"class":492,"line":556},[490,3234,599],{"class":500},[490,3236,3237],{"class":602},"top-right",[490,3239,606],{"class":500},[490,3241,609],{"class":500},[490,3243,612],{"class":500},[490,3245,3246],{"class":517},"top right",[490,3248,606],{"class":500},[490,3250,620],{"class":500},[490,3252,3253,3256,3258,3260,3263,3265],{"class":492,"line":577},[490,3254,3255],{"class":602},"    right",[490,3257,609],{"class":500},[490,3259,612],{"class":500},[490,3261,3262],{"class":517},"right",[490,3264,606],{"class":500},[490,3266,620],{"class":500},[490,3268,3269,3271,3274,3276,3278,3280,3283,3285],{"class":492,"line":582},[490,3270,599],{"class":500},[490,3272,3273],{"class":602},"bottom-right",[490,3275,606],{"class":500},[490,3277,609],{"class":500},[490,3279,612],{"class":500},[490,3281,3282],{"class":517},"bottom right",[490,3284,606],{"class":500},[490,3286,620],{"class":500},[490,3288,3289,3292,3294,3296,3299,3301],{"class":492,"line":596},[490,3290,3291],{"class":602},"    bottom",[490,3293,609],{"class":500},[490,3295,612],{"class":500},[490,3297,3298],{"class":517},"bottom",[490,3300,606],{"class":500},[490,3302,620],{"class":500},[490,3304,3305,3307,3310,3312,3314,3316,3319,3321],{"class":492,"line":623},[490,3306,599],{"class":500},[490,3308,3309],{"class":602},"bottom-left",[490,3311,606],{"class":500},[490,3313,609],{"class":500},[490,3315,612],{"class":500},[490,3317,3318],{"class":517},"bottom left",[490,3320,606],{"class":500},[490,3322,620],{"class":500},[490,3324,3325,3328,3330,3332,3335,3337],{"class":492,"line":644},[490,3326,3327],{"class":602},"    left",[490,3329,609],{"class":500},[490,3331,612],{"class":500},[490,3333,3334],{"class":517},"left",[490,3336,606],{"class":500},[490,3338,620],{"class":500},[490,3340,3341,3343,3346,3348,3350,3352,3355,3357],{"class":492,"line":665},[490,3342,599],{"class":500},[490,3344,3345],{"class":602},"top-left",[490,3347,606],{"class":500},[490,3349,609],{"class":500},[490,3351,612],{"class":500},[490,3353,3354],{"class":517},"top left",[490,3356,606],{"class":500},[490,3358,620],{"class":500},[490,3360,3361,3363,3365],{"class":492,"line":686},[490,3362,794],{"class":500},[490,3364,797],{"class":504},[490,3366,524],{"class":500},[2901,3368,3370],{"id":3369},"useperspectiveutility",[461,3371,3372],{},"usePerspectiveUtility",[418,3374,3375],{},"Add 3D perspective to transform containers.",[480,3377,3379],{"className":482,"code":3378,"language":485,"meta":486,"style":486},"usePerspectiveUtility(s, {\n    none: 'none',\n    '100': '100px',\n    '200': '200px',\n    '500': '500px',\n    '1000': '1000px',\n});\n",[461,3380,3381,3391,3407,3426,3446,3466,3486],{"__ignoreMap":486},[490,3382,3383,3385,3387,3389],{"class":492,"line":493},[490,3384,3372],{"class":569},[490,3386,587],{"class":504},[490,3388,590],{"class":500},[490,3390,593],{"class":500},[490,3392,3393,3396,3398,3400,3403,3405],{"class":492,"line":527},[490,3394,3395],{"class":602},"    none",[490,3397,609],{"class":500},[490,3399,612],{"class":500},[490,3401,3402],{"class":517},"none",[490,3404,606],{"class":500},[490,3406,620],{"class":500},[490,3408,3409,3411,3413,3415,3417,3419,3422,3424],{"class":492,"line":550},[490,3410,599],{"class":500},[490,3412,1499],{"class":602},[490,3414,606],{"class":500},[490,3416,609],{"class":500},[490,3418,612],{"class":500},[490,3420,3421],{"class":517},"100px",[490,3423,606],{"class":500},[490,3425,620],{"class":500},[490,3427,3428,3430,3433,3435,3437,3439,3442,3444],{"class":492,"line":556},[490,3429,599],{"class":500},[490,3431,3432],{"class":602},"200",[490,3434,606],{"class":500},[490,3436,609],{"class":500},[490,3438,612],{"class":500},[490,3440,3441],{"class":517},"200px",[490,3443,606],{"class":500},[490,3445,620],{"class":500},[490,3447,3448,3450,3453,3455,3457,3459,3462,3464],{"class":492,"line":577},[490,3449,599],{"class":500},[490,3451,3452],{"class":602},"500",[490,3454,606],{"class":500},[490,3456,609],{"class":500},[490,3458,612],{"class":500},[490,3460,3461],{"class":517},"500px",[490,3463,606],{"class":500},[490,3465,620],{"class":500},[490,3467,3468,3470,3473,3475,3477,3479,3482,3484],{"class":492,"line":582},[490,3469,599],{"class":500},[490,3471,3472],{"class":602},"1000",[490,3474,606],{"class":500},[490,3476,609],{"class":500},[490,3478,612],{"class":500},[490,3480,3481],{"class":517},"1000px",[490,3483,606],{"class":500},[490,3485,620],{"class":500},[490,3487,3488,3490,3492],{"class":492,"line":596},[490,3489,794],{"class":500},[490,3491,797],{"class":504},[490,3493,524],{"class":500},[2901,3495,3497],{"id":3496},"usebackfacevisibilityutility",[461,3498,3499],{},"useBackfaceVisibilityUtility",[418,3501,3502],{},"Control visibility of element backfaces in 3D transforms.",[480,3504,3506],{"className":482,"code":3505,"language":485,"meta":486,"style":486},"useBackfaceVisibilityUtility(s, {\n    visible: 'visible',\n    hidden: 'hidden',\n});\n",[461,3507,3508,3518,3534,3550],{"__ignoreMap":486},[490,3509,3510,3512,3514,3516],{"class":492,"line":493},[490,3511,3499],{"class":569},[490,3513,587],{"class":504},[490,3515,590],{"class":500},[490,3517,593],{"class":500},[490,3519,3520,3523,3525,3527,3530,3532],{"class":492,"line":527},[490,3521,3522],{"class":602},"    visible",[490,3524,609],{"class":500},[490,3526,612],{"class":500},[490,3528,3529],{"class":517},"visible",[490,3531,606],{"class":500},[490,3533,620],{"class":500},[490,3535,3536,3539,3541,3543,3546,3548],{"class":492,"line":550},[490,3537,3538],{"class":602},"    hidden",[490,3540,609],{"class":500},[490,3542,612],{"class":500},[490,3544,3545],{"class":517},"hidden",[490,3547,606],{"class":500},[490,3549,620],{"class":500},[490,3551,3552,3554,3556],{"class":492,"line":556},[490,3553,794],{"class":500},[490,3555,797],{"class":504},[490,3557,524],{"class":500},[414,3559,3561],{"id":3560},"examples","Examples",[2901,3563,3565],{"id":3564},"hover-scale-effect","Hover Scale Effect",[472,3567,3568,3833],{},[475,3569,3570],{"icon":477,"label":478},[480,3571,3573],{"className":482,"code":3572,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useScaleUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { modifier } = s;\n\nconst hover = modifier('hover', ({ declarations }) => ({\n    '&:hover': declarations,\n}));\n\nuseScaleUtility(s, {\n    '100': '1',\n    '105': '1.05',\n});\n\n// Apply scale on hover\nuseScaleUtility(s, { '105': '1.05' }, [hover]);\n\nexport default s;\n",[461,3574,3575,3595,3615,3619,3633,3651,3655,3697,3712,3720,3724,3734,3752,3770,3778,3782,3787,3819,3823],{"__ignoreMap":486},[490,3576,3577,3579,3581,3583,3585,3587,3589,3591,3593],{"class":492,"line":493},[490,3578,497],{"class":496},[490,3580,501],{"class":500},[490,3582,505],{"class":504},[490,3584,508],{"class":500},[490,3586,511],{"class":496},[490,3588,514],{"class":500},[490,3590,518],{"class":517},[490,3592,521],{"class":500},[490,3594,524],{"class":500},[490,3596,3597,3599,3601,3603,3605,3607,3609,3611,3613],{"class":492,"line":527},[490,3598,497],{"class":496},[490,3600,501],{"class":500},[490,3602,1340],{"class":504},[490,3604,508],{"class":500},[490,3606,511],{"class":496},[490,3608,514],{"class":500},[490,3610,543],{"class":517},[490,3612,521],{"class":500},[490,3614,524],{"class":500},[490,3616,3617],{"class":492,"line":550},[490,3618,553],{"emptyLinePlaceholder":206},[490,3620,3621,3623,3625,3627,3629,3631],{"class":492,"line":556},[490,3622,560],{"class":559},[490,3624,563],{"class":504},[490,3626,566],{"class":500},[490,3628,505],{"class":569},[490,3630,572],{"class":504},[490,3632,524],{"class":500},[490,3634,3635,3637,3639,3642,3644,3647,3649],{"class":492,"line":577},[490,3636,560],{"class":559},[490,3638,501],{"class":500},[490,3640,3641],{"class":504}," modifier ",[490,3643,794],{"class":500},[490,3645,3646],{"class":500}," =",[490,3648,816],{"class":504},[490,3650,524],{"class":500},[490,3652,3653],{"class":492,"line":582},[490,3654,553],{"emptyLinePlaceholder":206},[490,3656,3657,3659,3662,3664,3667,3669,3671,3674,3676,3678,3681,3685,3688,3691,3694],{"class":492,"line":596},[490,3658,560],{"class":559},[490,3660,3661],{"class":504}," hover ",[490,3663,566],{"class":500},[490,3665,3666],{"class":569}," modifier",[490,3668,872],{"class":504},[490,3670,606],{"class":500},[490,3672,3673],{"class":517},"hover",[490,3675,606],{"class":500},[490,3677,590],{"class":500},[490,3679,3680],{"class":500}," ({",[490,3682,3684],{"class":3683},"sHdIc"," declarations",[490,3686,3687],{"class":500}," })",[490,3689,3690],{"class":559}," =>",[490,3692,3693],{"class":504}," (",[490,3695,3696],{"class":500},"{\n",[490,3698,3699,3701,3704,3706,3708,3710],{"class":492,"line":623},[490,3700,599],{"class":500},[490,3702,3703],{"class":602},"&:hover",[490,3705,606],{"class":500},[490,3707,609],{"class":500},[490,3709,3684],{"class":504},[490,3711,620],{"class":500},[490,3713,3714,3716,3718],{"class":492,"line":644},[490,3715,794],{"class":500},[490,3717,894],{"class":504},[490,3719,524],{"class":500},[490,3721,3722],{"class":492,"line":665},[490,3723,553],{"emptyLinePlaceholder":206},[490,3725,3726,3728,3730,3732],{"class":492,"line":686},[490,3727,1296],{"class":569},[490,3729,587],{"class":504},[490,3731,590],{"class":500},[490,3733,593],{"class":500},[490,3735,3736,3738,3740,3742,3744,3746,3748,3750],{"class":492,"line":707},[490,3737,599],{"class":500},[490,3739,1499],{"class":602},[490,3741,606],{"class":500},[490,3743,609],{"class":500},[490,3745,612],{"class":500},[490,3747,628],{"class":517},[490,3749,606],{"class":500},[490,3751,620],{"class":500},[490,3753,3754,3756,3758,3760,3762,3764,3766,3768],{"class":492,"line":728},[490,3755,599],{"class":500},[490,3757,1518],{"class":602},[490,3759,606],{"class":500},[490,3761,609],{"class":500},[490,3763,612],{"class":500},[490,3765,1527],{"class":517},[490,3767,606],{"class":500},[490,3769,620],{"class":500},[490,3771,3772,3774,3776],{"class":492,"line":749},[490,3773,794],{"class":500},[490,3775,797],{"class":504},[490,3777,524],{"class":500},[490,3779,3780],{"class":492,"line":770},[490,3781,553],{"emptyLinePlaceholder":206},[490,3783,3784],{"class":492,"line":791},[490,3785,3786],{"class":1209},"// Apply scale on hover\n",[490,3788,3789,3791,3793,3795,3797,3799,3801,3803,3805,3807,3809,3811,3814,3817],{"class":492,"line":802},[490,3790,1296],{"class":569},[490,3792,587],{"class":504},[490,3794,590],{"class":500},[490,3796,501],{"class":500},[490,3798,612],{"class":500},[490,3800,1518],{"class":602},[490,3802,606],{"class":500},[490,3804,609],{"class":500},[490,3806,612],{"class":500},[490,3808,1527],{"class":517},[490,3810,606],{"class":500},[490,3812,3813],{"class":500}," },",[490,3815,3816],{"class":504}," [hover])",[490,3818,524],{"class":500},[490,3820,3821],{"class":492,"line":807},[490,3822,553],{"emptyLinePlaceholder":206},[490,3824,3825,3827,3829,3831],{"class":492,"line":1603},[490,3826,810],{"class":496},[490,3828,813],{"class":496},[490,3830,816],{"class":504},[490,3832,524],{"class":500},[475,3834,3835],{"icon":140,"label":821},[480,3836,3838],{"className":824,"code":3837,"filename":826,"language":827,"meta":486,"style":486},"._scale\\:100 {\n    --tw-scale-x: 1;\n    --tw-scale-y: 1;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n._hover\\:scale\\:105:hover {\n    --tw-scale-x: 1.05;\n    --tw-scale-y: 1.05;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n",[461,3839,3840,3852,3862,3872,3958,3962,3966,3988,3998,4008,4094],{"__ignoreMap":486},[490,3841,3842,3844,3846,3848,3850],{"class":492,"line":493},[490,3843,834],{"class":500},[490,3845,1682],{"class":837},[490,3847,841],{"class":504},[490,3849,1499],{"class":837},[490,3851,593],{"class":500},[490,3853,3854,3856,3858,3860],{"class":492,"line":527},[490,3855,1693],{"class":504},[490,3857,609],{"class":500},[490,3859,1698],{"class":855},[490,3861,524],{"class":500},[490,3863,3864,3866,3868,3870],{"class":492,"line":550},[490,3865,1705],{"class":504},[490,3867,609],{"class":500},[490,3869,1698],{"class":855},[490,3871,524],{"class":500},[490,3873,3874,3876,3878,3880,3882,3884,3886,3888,3890,3892,3894,3896,3898,3900,3902,3904,3906,3908,3910,3912,3914,3916,3918,3920,3922,3924,3926,3928,3930,3932,3934,3936,3938,3940,3942,3944,3946,3948,3950,3952,3954,3956],{"class":492,"line":556},[490,3875,864],{"class":863},[490,3877,609],{"class":500},[490,3879,869],{"class":569},[490,3881,872],{"class":500},[490,3883,875],{"class":569},[490,3885,872],{"class":500},[490,3887,880],{"class":504},[490,3889,883],{"class":500},[490,3891,886],{"class":569},[490,3893,872],{"class":500},[490,3895,891],{"class":504},[490,3897,894],{"class":500},[490,3899,897],{"class":569},[490,3901,872],{"class":500},[490,3903,875],{"class":569},[490,3905,872],{"class":500},[490,3907,906],{"class":504},[490,3909,894],{"class":500},[490,3911,911],{"class":569},[490,3913,872],{"class":500},[490,3915,875],{"class":569},[490,3917,872],{"class":500},[490,3919,920],{"class":504},[490,3921,894],{"class":500},[490,3923,925],{"class":569},[490,3925,872],{"class":500},[490,3927,875],{"class":569},[490,3929,872],{"class":500},[490,3931,934],{"class":504},[490,3933,894],{"class":500},[490,3935,939],{"class":569},[490,3937,872],{"class":500},[490,3939,875],{"class":569},[490,3941,872],{"class":500},[490,3943,948],{"class":504},[490,3945,894],{"class":500},[490,3947,953],{"class":569},[490,3949,872],{"class":500},[490,3951,875],{"class":569},[490,3953,872],{"class":500},[490,3955,962],{"class":504},[490,3957,965],{"class":500},[490,3959,3960],{"class":492,"line":577},[490,3961,970],{"class":500},[490,3963,3964],{"class":492,"line":582},[490,3965,553],{"emptyLinePlaceholder":206},[490,3967,3968,3970,3973,3975,3978,3980,3982,3984,3986],{"class":492,"line":596},[490,3969,834],{"class":500},[490,3971,3972],{"class":837},"_hover",[490,3974,841],{"class":504},[490,3976,3977],{"class":837},"scale",[490,3979,841],{"class":504},[490,3981,1518],{"class":837},[490,3983,609],{"class":500},[490,3985,3673],{"class":559},[490,3987,593],{"class":500},[490,3989,3990,3992,3994,3996],{"class":492,"line":623},[490,3991,1693],{"class":504},[490,3993,609],{"class":500},[490,3995,1826],{"class":855},[490,3997,524],{"class":500},[490,3999,4000,4002,4004,4006],{"class":492,"line":644},[490,4001,1705],{"class":504},[490,4003,609],{"class":500},[490,4005,1826],{"class":855},[490,4007,524],{"class":500},[490,4009,4010,4012,4014,4016,4018,4020,4022,4024,4026,4028,4030,4032,4034,4036,4038,4040,4042,4044,4046,4048,4050,4052,4054,4056,4058,4060,4062,4064,4066,4068,4070,4072,4074,4076,4078,4080,4082,4084,4086,4088,4090,4092],{"class":492,"line":665},[490,4011,864],{"class":863},[490,4013,609],{"class":500},[490,4015,869],{"class":569},[490,4017,872],{"class":500},[490,4019,875],{"class":569},[490,4021,872],{"class":500},[490,4023,880],{"class":504},[490,4025,883],{"class":500},[490,4027,886],{"class":569},[490,4029,872],{"class":500},[490,4031,891],{"class":504},[490,4033,894],{"class":500},[490,4035,897],{"class":569},[490,4037,872],{"class":500},[490,4039,875],{"class":569},[490,4041,872],{"class":500},[490,4043,906],{"class":504},[490,4045,894],{"class":500},[490,4047,911],{"class":569},[490,4049,872],{"class":500},[490,4051,875],{"class":569},[490,4053,872],{"class":500},[490,4055,920],{"class":504},[490,4057,894],{"class":500},[490,4059,925],{"class":569},[490,4061,872],{"class":500},[490,4063,875],{"class":569},[490,4065,872],{"class":500},[490,4067,934],{"class":504},[490,4069,894],{"class":500},[490,4071,939],{"class":569},[490,4073,872],{"class":500},[490,4075,875],{"class":569},[490,4077,872],{"class":500},[490,4079,948],{"class":504},[490,4081,894],{"class":500},[490,4083,953],{"class":569},[490,4085,872],{"class":500},[490,4087,875],{"class":569},[490,4089,872],{"class":500},[490,4091,962],{"class":504},[490,4093,965],{"class":500},[490,4095,4096],{"class":492,"line":686},[490,4097,970],{"class":500},[418,4099,4100],{},"Usage in HTML:",[480,4102,4104],{"className":1217,"code":4103,"language":1219,"meta":486,"style":486},"\u003Cdiv class=\"_scale:100 _hover:scale:105\" style=\"transition: transform 0.2s;\">\n    Hover to scale\n\u003C/div>\n",[461,4105,4106,4135,4140],{"__ignoreMap":486},[490,4107,4108,4110,4112,4114,4116,4118,4121,4123,4125,4127,4129,4131,4133],{"class":492,"line":493},[490,4109,1226],{"class":500},[490,4111,1229],{"class":602},[490,4113,1232],{"class":559},[490,4115,566],{"class":500},[490,4117,521],{"class":500},[490,4119,4120],{"class":517},"_scale:100 _hover:scale:105",[490,4122,521],{"class":500},[490,4124,2132],{"class":559},[490,4126,566],{"class":500},[490,4128,521],{"class":500},[490,4130,2139],{"class":517},[490,4132,521],{"class":500},[490,4134,1255],{"class":500},[490,4136,4137],{"class":492,"line":527},[490,4138,4139],{"class":504},"    Hover to scale\n",[490,4141,4142,4144,4146],{"class":492,"line":550},[490,4143,1250],{"class":500},[490,4145,1229],{"class":602},[490,4147,1255],{"class":500},[2901,4149,4151],{"id":4150},"centering-with-translate","Centering with Translate",[472,4153,4154,4425],{},[475,4155,4156],{"icon":477,"label":478},[480,4157,4159],{"className":482,"code":4158,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useTranslateXUtility, useTranslateYUtility } from \"@styleframe/theme\";\nimport { usePositionUtility, useTopUtility, useLeftUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nusePositionUtility(s, { absolute: 'absolute' });\nuseTopUtility(s, { '1/2': '50%' });\nuseLeftUtility(s, { '1/2': '50%' });\nuseTranslateXUtility(s, { '-1/2': '-50%' });\nuseTranslateYUtility(s, { '-1/2': '-50%' });\n\nexport default s;\n",[461,4160,4161,4181,4205,4236,4240,4254,4258,4287,4318,4349,4381,4411,4415],{"__ignoreMap":486},[490,4162,4163,4165,4167,4169,4171,4173,4175,4177,4179],{"class":492,"line":493},[490,4164,497],{"class":496},[490,4166,501],{"class":500},[490,4168,505],{"class":504},[490,4170,508],{"class":500},[490,4172,511],{"class":496},[490,4174,514],{"class":500},[490,4176,518],{"class":517},[490,4178,521],{"class":500},[490,4180,524],{"class":500},[490,4182,4183,4185,4187,4189,4191,4193,4195,4197,4199,4201,4203],{"class":492,"line":527},[490,4184,497],{"class":496},[490,4186,501],{"class":500},[490,4188,2202],{"class":504},[490,4190,590],{"class":500},[490,4192,2207],{"class":504},[490,4194,508],{"class":500},[490,4196,511],{"class":496},[490,4198,514],{"class":500},[490,4200,543],{"class":517},[490,4202,521],{"class":500},[490,4204,524],{"class":500},[490,4206,4207,4209,4211,4214,4216,4219,4221,4224,4226,4228,4230,4232,4234],{"class":492,"line":550},[490,4208,497],{"class":496},[490,4210,501],{"class":500},[490,4212,4213],{"class":504}," usePositionUtility",[490,4215,590],{"class":500},[490,4217,4218],{"class":504}," useTopUtility",[490,4220,590],{"class":500},[490,4222,4223],{"class":504}," useLeftUtility",[490,4225,508],{"class":500},[490,4227,511],{"class":496},[490,4229,514],{"class":500},[490,4231,543],{"class":517},[490,4233,521],{"class":500},[490,4235,524],{"class":500},[490,4237,4238],{"class":492,"line":556},[490,4239,553],{"emptyLinePlaceholder":206},[490,4241,4242,4244,4246,4248,4250,4252],{"class":492,"line":577},[490,4243,560],{"class":559},[490,4245,563],{"class":504},[490,4247,566],{"class":500},[490,4249,505],{"class":569},[490,4251,572],{"class":504},[490,4253,524],{"class":500},[490,4255,4256],{"class":492,"line":582},[490,4257,553],{"emptyLinePlaceholder":206},[490,4259,4260,4263,4265,4267,4269,4272,4274,4276,4279,4281,4283,4285],{"class":492,"line":596},[490,4261,4262],{"class":569},"usePositionUtility",[490,4264,587],{"class":504},[490,4266,590],{"class":500},[490,4268,501],{"class":500},[490,4270,4271],{"class":602}," absolute",[490,4273,609],{"class":500},[490,4275,612],{"class":500},[490,4277,4278],{"class":517},"absolute",[490,4280,606],{"class":500},[490,4282,508],{"class":500},[490,4284,797],{"class":504},[490,4286,524],{"class":500},[490,4288,4289,4292,4294,4296,4298,4300,4302,4304,4306,4308,4310,4312,4314,4316],{"class":492,"line":623},[490,4290,4291],{"class":569},"useTopUtility",[490,4293,587],{"class":504},[490,4295,590],{"class":500},[490,4297,501],{"class":500},[490,4299,612],{"class":500},[490,4301,2356],{"class":602},[490,4303,606],{"class":500},[490,4305,609],{"class":500},[490,4307,612],{"class":500},[490,4309,2365],{"class":517},[490,4311,606],{"class":500},[490,4313,508],{"class":500},[490,4315,797],{"class":504},[490,4317,524],{"class":500},[490,4319,4320,4323,4325,4327,4329,4331,4333,4335,4337,4339,4341,4343,4345,4347],{"class":492,"line":644},[490,4321,4322],{"class":569},"useLeftUtility",[490,4324,587],{"class":504},[490,4326,590],{"class":500},[490,4328,501],{"class":500},[490,4330,612],{"class":500},[490,4332,2356],{"class":602},[490,4334,606],{"class":500},[490,4336,609],{"class":500},[490,4338,612],{"class":500},[490,4340,2365],{"class":517},[490,4342,606],{"class":500},[490,4344,508],{"class":500},[490,4346,797],{"class":504},[490,4348,524],{"class":500},[490,4350,4351,4353,4355,4357,4359,4361,4364,4366,4368,4370,4373,4375,4377,4379],{"class":492,"line":665},[490,4352,2398],{"class":569},[490,4354,587],{"class":504},[490,4356,590],{"class":500},[490,4358,501],{"class":500},[490,4360,612],{"class":500},[490,4362,4363],{"class":602},"-1/2",[490,4365,606],{"class":500},[490,4367,609],{"class":500},[490,4369,612],{"class":500},[490,4371,4372],{"class":517},"-50%",[490,4374,606],{"class":500},[490,4376,508],{"class":500},[490,4378,797],{"class":504},[490,4380,524],{"class":500},[490,4382,4383,4385,4387,4389,4391,4393,4395,4397,4399,4401,4403,4405,4407,4409],{"class":492,"line":686},[490,4384,2412],{"class":569},[490,4386,587],{"class":504},[490,4388,590],{"class":500},[490,4390,501],{"class":500},[490,4392,612],{"class":500},[490,4394,4363],{"class":602},[490,4396,606],{"class":500},[490,4398,609],{"class":500},[490,4400,612],{"class":500},[490,4402,4372],{"class":517},[490,4404,606],{"class":500},[490,4406,508],{"class":500},[490,4408,797],{"class":504},[490,4410,524],{"class":500},[490,4412,4413],{"class":492,"line":707},[490,4414,553],{"emptyLinePlaceholder":206},[490,4416,4417,4419,4421,4423],{"class":492,"line":728},[490,4418,810],{"class":496},[490,4420,813],{"class":496},[490,4422,816],{"class":504},[490,4424,524],{"class":500},[475,4426,4427],{"icon":140,"label":821},[480,4428,4430],{"className":824,"code":4429,"filename":826,"language":827,"meta":486,"style":486},"._position\\:absolute { position: absolute; }\n._top\\:1\\/2 { top: 50%; }\n._left\\:1\\/2 { left: 50%; }\n._translate-x\\:-1\\/2 {\n    --tw-translate-x: -50%;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n._translate-y\\:-1\\/2 {\n    --tw-translate-y: -50%;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n",[461,4431,4432,4457,4485,4513,4530,4541,4627,4631,4647,4657,4743],{"__ignoreMap":486},[490,4433,4434,4436,4439,4441,4443,4445,4448,4450,4452,4454],{"class":492,"line":493},[490,4435,834],{"class":500},[490,4437,4438],{"class":837},"_position",[490,4440,841],{"class":504},[490,4442,4278],{"class":837},[490,4444,501],{"class":500},[490,4446,4447],{"class":863}," position",[490,4449,609],{"class":500},[490,4451,4271],{"class":504},[490,4453,1615],{"class":500},[490,4455,4456],{"class":500}," }\n",[490,4458,4459,4461,4464,4466,4468,4470,4472,4474,4477,4479,4481,4483],{"class":492,"line":527},[490,4460,834],{"class":500},[490,4462,4463],{"class":837},"_top",[490,4465,841],{"class":504},[490,4467,628],{"class":837},[490,4469,2573],{"class":504},[490,4471,649],{"class":837},[490,4473,501],{"class":500},[490,4475,4476],{"class":863}," top",[490,4478,609],{"class":500},[490,4480,2586],{"class":855},[490,4482,1615],{"class":500},[490,4484,4456],{"class":500},[490,4486,4487,4489,4492,4494,4496,4498,4500,4502,4505,4507,4509,4511],{"class":492,"line":550},[490,4488,834],{"class":500},[490,4490,4491],{"class":837},"_left",[490,4493,841],{"class":504},[490,4495,628],{"class":837},[490,4497,2573],{"class":504},[490,4499,649],{"class":837},[490,4501,501],{"class":500},[490,4503,4504],{"class":863}," left",[490,4506,609],{"class":500},[490,4508,2586],{"class":855},[490,4510,1615],{"class":500},[490,4512,4456],{"class":500},[490,4514,4515,4517,4519,4521,4524,4526,4528],{"class":492,"line":556},[490,4516,834],{"class":500},[490,4518,2448],{"class":837},[490,4520,841],{"class":504},[490,4522,4523],{"class":837},"-1",[490,4525,2573],{"class":504},[490,4527,649],{"class":837},[490,4529,593],{"class":500},[490,4531,4532,4534,4536,4539],{"class":492,"line":577},[490,4533,2459],{"class":504},[490,4535,609],{"class":500},[490,4537,4538],{"class":855}," -50%",[490,4540,524],{"class":500},[490,4542,4543,4545,4547,4549,4551,4553,4555,4557,4559,4561,4563,4565,4567,4569,4571,4573,4575,4577,4579,4581,4583,4585,4587,4589,4591,4593,4595,4597,4599,4601,4603,4605,4607,4609,4611,4613,4615,4617,4619,4621,4623,4625],{"class":492,"line":582},[490,4544,864],{"class":863},[490,4546,609],{"class":500},[490,4548,869],{"class":569},[490,4550,872],{"class":500},[490,4552,875],{"class":569},[490,4554,872],{"class":500},[490,4556,880],{"class":504},[490,4558,883],{"class":500},[490,4560,886],{"class":569},[490,4562,872],{"class":500},[490,4564,891],{"class":504},[490,4566,894],{"class":500},[490,4568,897],{"class":569},[490,4570,872],{"class":500},[490,4572,875],{"class":569},[490,4574,872],{"class":500},[490,4576,906],{"class":504},[490,4578,894],{"class":500},[490,4580,911],{"class":569},[490,4582,872],{"class":500},[490,4584,875],{"class":569},[490,4586,872],{"class":500},[490,4588,920],{"class":504},[490,4590,894],{"class":500},[490,4592,925],{"class":569},[490,4594,872],{"class":500},[490,4596,875],{"class":569},[490,4598,872],{"class":500},[490,4600,934],{"class":504},[490,4602,894],{"class":500},[490,4604,939],{"class":569},[490,4606,872],{"class":500},[490,4608,875],{"class":569},[490,4610,872],{"class":500},[490,4612,948],{"class":504},[490,4614,894],{"class":500},[490,4616,953],{"class":569},[490,4618,872],{"class":500},[490,4620,875],{"class":569},[490,4622,872],{"class":500},[490,4624,962],{"class":504},[490,4626,965],{"class":500},[490,4628,4629],{"class":492,"line":596},[490,4630,970],{"class":500},[490,4632,4633,4635,4637,4639,4641,4643,4645],{"class":492,"line":623},[490,4634,834],{"class":500},[490,4636,2689],{"class":837},[490,4638,841],{"class":504},[490,4640,4523],{"class":837},[490,4642,2573],{"class":504},[490,4644,649],{"class":837},[490,4646,593],{"class":500},[490,4648,4649,4651,4653,4655],{"class":492,"line":644},[490,4650,2704],{"class":504},[490,4652,609],{"class":500},[490,4654,4538],{"class":855},[490,4656,524],{"class":500},[490,4658,4659,4661,4663,4665,4667,4669,4671,4673,4675,4677,4679,4681,4683,4685,4687,4689,4691,4693,4695,4697,4699,4701,4703,4705,4707,4709,4711,4713,4715,4717,4719,4721,4723,4725,4727,4729,4731,4733,4735,4737,4739,4741],{"class":492,"line":665},[490,4660,864],{"class":863},[490,4662,609],{"class":500},[490,4664,869],{"class":569},[490,4666,872],{"class":500},[490,4668,875],{"class":569},[490,4670,872],{"class":500},[490,4672,880],{"class":504},[490,4674,883],{"class":500},[490,4676,886],{"class":569},[490,4678,872],{"class":500},[490,4680,891],{"class":504},[490,4682,894],{"class":500},[490,4684,897],{"class":569},[490,4686,872],{"class":500},[490,4688,875],{"class":569},[490,4690,872],{"class":500},[490,4692,906],{"class":504},[490,4694,894],{"class":500},[490,4696,911],{"class":569},[490,4698,872],{"class":500},[490,4700,875],{"class":569},[490,4702,872],{"class":500},[490,4704,920],{"class":504},[490,4706,894],{"class":500},[490,4708,925],{"class":569},[490,4710,872],{"class":500},[490,4712,875],{"class":569},[490,4714,872],{"class":500},[490,4716,934],{"class":504},[490,4718,894],{"class":500},[490,4720,939],{"class":569},[490,4722,872],{"class":500},[490,4724,875],{"class":569},[490,4726,872],{"class":500},[490,4728,948],{"class":504},[490,4730,894],{"class":500},[490,4732,953],{"class":569},[490,4734,872],{"class":500},[490,4736,875],{"class":569},[490,4738,872],{"class":500},[490,4740,962],{"class":504},[490,4742,965],{"class":500},[490,4744,4745],{"class":492,"line":686},[490,4746,970],{"class":500},[418,4748,4100],{},[480,4750,4752],{"className":1217,"code":4751,"language":1219,"meta":486,"style":486},"\u003Cdiv style=\"position: relative; height: 200px;\">\n    \u003Cdiv class=\"_position:absolute _top:1/2 _left:1/2 _translate-x:-1/2 _translate-y:-1/2\">\n        Centered element\n    \u003C/div>\n\u003C/div>\n",[461,4753,4754,4773,4793,4798,4807],{"__ignoreMap":486},[490,4755,4756,4758,4760,4762,4764,4766,4769,4771],{"class":492,"line":493},[490,4757,1226],{"class":500},[490,4759,1229],{"class":602},[490,4761,2132],{"class":559},[490,4763,566],{"class":500},[490,4765,521],{"class":500},[490,4767,4768],{"class":517},"position: relative; height: 200px;",[490,4770,521],{"class":500},[490,4772,1255],{"class":500},[490,4774,4775,4778,4780,4782,4784,4786,4789,4791],{"class":492,"line":527},[490,4776,4777],{"class":500},"    \u003C",[490,4779,1229],{"class":602},[490,4781,1232],{"class":559},[490,4783,566],{"class":500},[490,4785,521],{"class":500},[490,4787,4788],{"class":517},"_position:absolute _top:1/2 _left:1/2 _translate-x:-1/2 _translate-y:-1/2",[490,4790,521],{"class":500},[490,4792,1255],{"class":500},[490,4794,4795],{"class":492,"line":550},[490,4796,4797],{"class":504},"        Centered element\n",[490,4799,4800,4803,4805],{"class":492,"line":556},[490,4801,4802],{"class":500},"    \u003C/",[490,4804,1229],{"class":602},[490,4806,1255],{"class":500},[490,4808,4809,4811,4813],{"class":492,"line":577},[490,4810,1250],{"class":500},[490,4812,1229],{"class":602},[490,4814,1255],{"class":500},[414,4816,4818],{"id":4817},"best-practices","Best Practices",[429,4820,4821,4827,4833,4839,4845],{},[432,4822,4823,4826],{},[435,4824,4825],{},"Use transforms for animations",": Transform properties are GPU-accelerated and perform well",[432,4828,4829,4832],{},[435,4830,4831],{},"Add transitions for smooth effects",": Combine with transition utilities for animated transforms",[432,4834,4835,4838],{},[435,4836,4837],{},"Set transform-origin for rotations",": Adjust the pivot point when rotating elements",[432,4840,4841,4844],{},[435,4842,4843],{},"Consider performance",": Multiple complex transforms can impact performance",[432,4846,4847,4850],{},[435,4848,4849],{},"Use translate for positioning",": Unlike margin/position changes, translate doesn't trigger layout",[414,4852,4854],{"id":4853},"faq","FAQ",[4856,4857,4858,4864,4872,4876],"accordion",{},[4859,4860,4863],"accordion-item",{"icon":4861,"label":4862},"i-lucide-circle-help","Why use transform instead of changing position/margin?","Transform is GPU-accelerated and doesn't trigger layout recalculation. This makes it much more performant for animations. Changing margin or position causes the browser to recalculate layout for the entire page.",[4859,4865,4867,4868,4871],{"icon":4861,"label":4866},"How do I combine multiple transforms?","The transform utilities use CSS custom properties for each transform type. You can apply multiple transform classes (scale + rotate + translate) and they'll combine automatically through the shared ",[461,4869,4870],{},"transform"," property.",[4859,4873,4875],{"icon":4861,"label":4874},"What is transform-origin used for?","Transform-origin sets the point around which transforms are applied. For rotation, it's the center of rotation. For scale, it's the point that stays fixed. Default is center, but you might want top-left for tooltips or top for dropdown animations.",[4859,4877,4879,4880,4883,4884,4887,4888,4891],{"icon":4861,"label":4878},"How do I flip an element horizontally?","Use ",[461,4881,4882],{},"scale-x: -1"," or ",[461,4885,4886],{},"scale: -100"," to flip horizontally. Similarly, use ",[461,4889,4890],{},"scale-y: -1"," to flip vertically. This is useful for mirroring icons or creating reflection effects.",[4893,4894,4895],"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":486,"searchDepth":527,"depth":527,"links":4897},[4898,4899,4900,4901,4902,4903,4910,4914,4915],{"id":416,"depth":527,"text":64},{"id":423,"depth":527,"text":424},{"id":459,"depth":527,"text":463},{"id":1293,"depth":527,"text":1296},{"id":2155,"depth":527,"text":2158},{"id":2898,"depth":527,"text":2899,"children":4904},[4905,4907,4908,4909],{"id":2903,"depth":550,"text":4906},"useSkewXUtility & useSkewYUtility",{"id":3177,"depth":550,"text":3180},{"id":3369,"depth":550,"text":3372},{"id":3496,"depth":550,"text":3499},{"id":3560,"depth":527,"text":3561,"children":4911},[4912,4913],{"id":3564,"depth":550,"text":3565},{"id":4150,"depth":550,"text":4151},{"id":4817,"depth":527,"text":4818},{"id":4853,"depth":527,"text":4854},"Create transform utilities for rotate, scale, translate, skew, and perspective with full type safety.","md",null,{},{"title":352,"icon":7},{"title":409,"description":4916},{"loc":353},"e-H8TJvMoHuwe7wEFXhGAe80cKIUHTuYlpxwNlQAR1c",[4925,4927],{"title":348,"path":349,"stem":350,"description":4926,"icon":7,"children":-1},"Create table utilities for border collapse, spacing, layout, and caption positioning with full type safety.",{"title":356,"path":357,"stem":358,"description":4928,"icon":7,"children":-1},"Create transition utilities for smooth state changes with full type safety. Control which properties animate, timing, easing, and delays.",1776621149960]