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