[{"data":1,"prerenderedAt":4315},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-form-state":682,"-docs-theme-modifiers-form-state-surround":4310},{"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":4303,"extension":4304,"links":4305,"meta":4306,"navigation":4307,"path":655,"seo":4308,"stem":656,"__hash__":4309},"docs_theme\u002Fdocs\u002Ftheme\u002Fmodifiers\u002F04.form-state.md","Form State Modifiers",{"type":686,"value":687,"toc":4279},"minimark",[688,714,718,734,738,741,769,775,782,1215,1220,1251,1257,1263,1266,1290,1296,1302,1812,1815,1839,1845,1851,1854,1878,1884,1890,1893,1917,1923,1929,1932,1956,1962,1968,2376,2379,2403,2409,2415,2418,2442,2448,2454,2743,2746,2770,2776,2782,2785,2809,2815,2821,2824,2848,2853,2859,3175,3180,3366,3370,3374,3778,3782,4155,4159,4200,4204,4275],[689,690,691,695,696,700,701,705,706,709,710,713],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Modifiers Preset:"," ",[697,698,699],"code",{},"useFormStateModifiers"," is included in the ",[702,703,704],"a",{"href":642},"Modifiers Preset"," (",[697,707,708],{},"useModifiersPreset",") and you can configure it through the preset's ",[697,711,712],{},"formStates"," option. For most projects, applying it via the preset is the recommended approach.",[715,716,78],"h2",{"id":717},"overview",[719,720,721,722,725,726,729,730,733],"p",{},"Form state modifiers let you apply utility styles conditionally based on form element states. They wrap utility declarations in CSS pseudo-class selectors like ",[697,723,724],{},":disabled",", ",[697,727,728],{},":checked",", and ",[697,731,732],{},":invalid",", generating variant utility classes that adapt to form element behavior.",[715,735,737],{"id":736},"why-use-form-state-modifiers","Why Use Form State Modifiers?",[719,739,740],{},"Form state modifiers help you:",[742,743,744,751,757,763],"ul",{},[745,746,747,750],"li",{},[692,748,749],{},"Style form validation states",": Apply different colors and styles for valid and invalid inputs",[745,752,753,756],{},[692,754,755],{},"Handle disabled states",": Reduce opacity or change appearance for disabled form elements",[745,758,759,762],{},[692,760,761],{},"React to user input",": Style checked checkboxes, selected radios, and filled autofill fields",[745,764,765,768],{},[692,766,767],{},"Build accessible forms",": Provide visual feedback that matches the semantic state of form controls",[715,770,772],{"id":771},"usedisabledmodifier",[697,773,774],{},"useDisabledModifier",[719,776,777,778,781],{},"The ",[697,779,780],{},"useDisabledModifier()"," function creates a modifier that applies styles when a form element is disabled.",[783,784,785,1030,1165],"tabs",{},[786,787,789],"tabs-item",{"icon":788,"label":290},"i-lucide-code",[790,791,797],"pre",{"className":792,"code":793,"filename":794,"language":795,"meta":796,"style":796},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useOpacityUtility, useCursorUtility } from \"@styleframe\u002Ftheme\";\nimport { useDisabledModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst disabled = useDisabledModifier(s);\n\nuseOpacityUtility(s, { 50: '0.5' }, [disabled]);\nuseCursorUtility(s, { 'not-allowed': 'not-allowed' }, [disabled]);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,798,799,835,864,886,892,913,918,935,940,977,1011,1016],{"__ignoreMap":796},[800,801,804,808,812,816,819,822,825,829,832],"span",{"class":802,"line":803},"line",1,[800,805,807],{"class":806},"s7zQu","import",[800,809,811],{"class":810},"sMK4o"," {",[800,813,815],{"class":814},"sTEyZ"," styleframe",[800,817,818],{"class":810}," }",[800,820,821],{"class":806}," from",[800,823,824],{"class":810}," \"",[800,826,828],{"class":827},"sfazB","styleframe",[800,830,831],{"class":810},"\"",[800,833,834],{"class":810},";\n",[800,836,838,840,842,845,848,851,853,855,857,860,862],{"class":802,"line":837},2,[800,839,807],{"class":806},[800,841,811],{"class":810},[800,843,844],{"class":814}," useOpacityUtility",[800,846,847],{"class":810},",",[800,849,850],{"class":814}," useCursorUtility",[800,852,818],{"class":810},[800,854,821],{"class":806},[800,856,824],{"class":810},[800,858,859],{"class":827},"@styleframe\u002Ftheme",[800,861,831],{"class":810},[800,863,834],{"class":810},[800,865,867,869,871,874,876,878,880,882,884],{"class":802,"line":866},3,[800,868,807],{"class":806},[800,870,811],{"class":810},[800,872,873],{"class":814}," useDisabledModifier",[800,875,818],{"class":810},[800,877,821],{"class":806},[800,879,824],{"class":810},[800,881,859],{"class":827},[800,883,831],{"class":810},[800,885,834],{"class":810},[800,887,889],{"class":802,"line":888},4,[800,890,891],{"emptyLinePlaceholder":223},"\n",[800,893,895,899,902,905,908,911],{"class":802,"line":894},5,[800,896,898],{"class":897},"spNyl","const",[800,900,901],{"class":814}," s ",[800,903,904],{"class":810},"=",[800,906,815],{"class":907},"s2Zo4",[800,909,910],{"class":814},"()",[800,912,834],{"class":810},[800,914,916],{"class":802,"line":915},6,[800,917,891],{"emptyLinePlaceholder":223},[800,919,921,923,926,928,930,933],{"class":802,"line":920},7,[800,922,898],{"class":897},[800,924,925],{"class":814}," disabled ",[800,927,904],{"class":810},[800,929,873],{"class":907},[800,931,932],{"class":814},"(s)",[800,934,834],{"class":810},[800,936,938],{"class":802,"line":937},8,[800,939,891],{"emptyLinePlaceholder":223},[800,941,943,946,949,951,953,957,960,963,966,969,972,975],{"class":802,"line":942},9,[800,944,945],{"class":907},"useOpacityUtility",[800,947,948],{"class":814},"(s",[800,950,847],{"class":810},[800,952,811],{"class":810},[800,954,956],{"class":955},"sbssI"," 50",[800,958,959],{"class":810},":",[800,961,962],{"class":810}," '",[800,964,965],{"class":827},"0.5",[800,967,968],{"class":810},"'",[800,970,971],{"class":810}," },",[800,973,974],{"class":814}," [disabled])",[800,976,834],{"class":810},[800,978,980,983,985,987,989,991,995,997,999,1001,1003,1005,1007,1009],{"class":802,"line":979},10,[800,981,982],{"class":907},"useCursorUtility",[800,984,948],{"class":814},[800,986,847],{"class":810},[800,988,811],{"class":810},[800,990,962],{"class":810},[800,992,994],{"class":993},"swJcz","not-allowed",[800,996,968],{"class":810},[800,998,959],{"class":810},[800,1000,962],{"class":810},[800,1002,994],{"class":827},[800,1004,968],{"class":810},[800,1006,971],{"class":810},[800,1008,974],{"class":814},[800,1010,834],{"class":810},[800,1012,1014],{"class":802,"line":1013},11,[800,1015,891],{"emptyLinePlaceholder":223},[800,1017,1019,1022,1025,1028],{"class":802,"line":1018},12,[800,1020,1021],{"class":806},"export",[800,1023,1024],{"class":806}," default",[800,1026,1027],{"class":814}," s",[800,1029,834],{"class":810},[786,1031,1032],{"icon":154,"label":326},[790,1033,1038],{"className":1034,"code":1035,"filename":1036,"language":1037,"meta":796,"style":796},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._opacity\\:50 { opacity: 0.5; }\n._cursor\\:not-allowed { cursor: not-allowed; }\n\n._disabled\\:opacity\\:50 { &:disabled { opacity: 0.5; } }\n._disabled\\:cursor\\:not-allowed { &:disabled { cursor: not-allowed; } }\n","styleframe\u002Findex.css","css",[697,1039,1040,1072,1097,1101,1135],{"__ignoreMap":796},[800,1041,1042,1045,1049,1052,1055,1057,1061,1063,1066,1069],{"class":802,"line":803},[800,1043,1044],{"class":810},".",[800,1046,1048],{"class":1047},"sBMFI","_opacity",[800,1050,1051],{"class":814},"\\:",[800,1053,1054],{"class":1047},"50",[800,1056,811],{"class":810},[800,1058,1060],{"class":1059},"sqsOY"," opacity",[800,1062,959],{"class":810},[800,1064,1065],{"class":955}," 0.5",[800,1067,1068],{"class":810},";",[800,1070,1071],{"class":810}," }\n",[800,1073,1074,1076,1079,1081,1083,1085,1088,1090,1093,1095],{"class":802,"line":837},[800,1075,1044],{"class":810},[800,1077,1078],{"class":1047},"_cursor",[800,1080,1051],{"class":814},[800,1082,994],{"class":1047},[800,1084,811],{"class":810},[800,1086,1087],{"class":1059}," cursor",[800,1089,959],{"class":810},[800,1091,1092],{"class":814}," not-allowed",[800,1094,1068],{"class":810},[800,1096,1071],{"class":810},[800,1098,1099],{"class":802,"line":866},[800,1100,891],{"emptyLinePlaceholder":223},[800,1102,1103,1105,1108,1110,1113,1115,1117,1119,1122,1124,1127,1129,1131,1133],{"class":802,"line":888},[800,1104,1044],{"class":810},[800,1106,1107],{"class":1047},"_disabled",[800,1109,1051],{"class":814},[800,1111,1112],{"class":1047},"opacity",[800,1114,1051],{"class":814},[800,1116,1054],{"class":1047},[800,1118,811],{"class":810},[800,1120,1121],{"class":814}," &",[800,1123,959],{"class":810},[800,1125,1126],{"class":814},"disabled { opacity: ",[800,1128,965],{"class":955},[800,1130,1068],{"class":810},[800,1132,818],{"class":810},[800,1134,1071],{"class":814},[800,1136,1137,1139,1141,1143,1146,1148,1150,1152,1154,1156,1159,1161,1163],{"class":802,"line":894},[800,1138,1044],{"class":810},[800,1140,1107],{"class":1047},[800,1142,1051],{"class":814},[800,1144,1145],{"class":1047},"cursor",[800,1147,1051],{"class":814},[800,1149,994],{"class":1047},[800,1151,811],{"class":810},[800,1153,1121],{"class":814},[800,1155,959],{"class":810},[800,1157,1158],{"class":814},"disabled { cursor: not-allowed",[800,1160,1068],{"class":810},[800,1162,818],{"class":810},[800,1164,1071],{"class":814},[786,1166,1168],{"icon":520,"label":1167},"Usage",[790,1169,1173],{"className":1170,"code":1171,"language":1172,"meta":796,"style":796},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton disabled class=\"_disabled:opacity:50 _disabled:cursor:not-allowed\">\n    Disabled button\n\u003C\u002Fbutton>\n","html",[697,1174,1175,1201,1206],{"__ignoreMap":796},[800,1176,1177,1180,1183,1186,1189,1191,1193,1196,1198],{"class":802,"line":803},[800,1178,1179],{"class":810},"\u003C",[800,1181,1182],{"class":993},"button",[800,1184,1185],{"class":897}," disabled",[800,1187,1188],{"class":897}," class",[800,1190,904],{"class":810},[800,1192,831],{"class":810},[800,1194,1195],{"class":827},"_disabled:opacity:50 _disabled:cursor:not-allowed",[800,1197,831],{"class":810},[800,1199,1200],{"class":810},">\n",[800,1202,1203],{"class":802,"line":837},[800,1204,1205],{"class":814},"    Disabled button\n",[800,1207,1208,1211,1213],{"class":802,"line":866},[800,1209,1210],{"class":810},"\u003C\u002F",[800,1212,1182],{"class":993},[800,1214,1200],{"class":810},[1216,1217,1219],"h4",{"id":1218},"css-selector","CSS Selector",[1221,1222,1223,1235],"table",{},[1224,1225,1226],"thead",{},[1227,1228,1229,1233],"tr",{},[1230,1231,1232],"th",{},"Modifier Name",[1230,1234,1219],{},[1236,1237,1238],"tbody",{},[1227,1239,1240,1246],{},[1241,1242,1243],"td",{},[697,1244,1245],{},"disabled",[1241,1247,1248],{},[697,1249,1250],{},"&:disabled",[715,1252,1254],{"id":1253},"useenabledmodifier",[697,1255,1256],{},"useEnabledModifier",[719,1258,777,1259,1262],{},[697,1260,1261],{},"useEnabledModifier()"," function creates a modifier that applies styles when a form element is enabled.",[1216,1264,1219],{"id":1265},"css-selector-1",[1221,1267,1268,1276],{},[1224,1269,1270],{},[1227,1271,1272,1274],{},[1230,1273,1232],{},[1230,1275,1219],{},[1236,1277,1278],{},[1227,1279,1280,1285],{},[1241,1281,1282],{},[697,1283,1284],{},"enabled",[1241,1286,1287],{},[697,1288,1289],{},"&:enabled",[715,1291,1293],{"id":1292},"usecheckedmodifier",[697,1294,1295],{},"useCheckedModifier",[719,1297,777,1298,1301],{},[697,1299,1300],{},"useCheckedModifier()"," function creates a modifier that applies styles when a checkbox or radio button is checked.",[783,1303,1304,1605,1765],{},[786,1305,1306],{"icon":788,"label":290},[790,1307,1309],{"className":792,"code":1308,"filename":794,"language":795,"meta":796,"style":796},"import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { useBackgroundColorUtility, useBorderColorUtility } from \"@styleframe\u002Ftheme\";\nimport { useCheckedModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);\n\nconst checked = useCheckedModifier(s);\n\nuseBackgroundColorUtility(s, {\n    primary: ref(colorPrimary),\n}, [checked]);\n\nuseBorderColorUtility(s, {\n    primary: ref(colorPrimary),\n}, [checked]);\n\nexport default s;\n",[697,1310,1311,1331,1352,1378,1399,1403,1417,1436,1440,1486,1490,1505,1509,1522,1539,1550,1555,1567,1580,1589,1594],{"__ignoreMap":796},[800,1312,1313,1315,1317,1319,1321,1323,1325,1327,1329],{"class":802,"line":803},[800,1314,807],{"class":806},[800,1316,811],{"class":810},[800,1318,815],{"class":814},[800,1320,818],{"class":810},[800,1322,821],{"class":806},[800,1324,824],{"class":810},[800,1326,828],{"class":827},[800,1328,831],{"class":810},[800,1330,834],{"class":810},[800,1332,1333,1335,1337,1340,1342,1344,1346,1348,1350],{"class":802,"line":837},[800,1334,807],{"class":806},[800,1336,811],{"class":810},[800,1338,1339],{"class":814}," useColorDesignTokens",[800,1341,818],{"class":810},[800,1343,821],{"class":806},[800,1345,824],{"class":810},[800,1347,859],{"class":827},[800,1349,831],{"class":810},[800,1351,834],{"class":810},[800,1353,1354,1356,1358,1361,1363,1366,1368,1370,1372,1374,1376],{"class":802,"line":866},[800,1355,807],{"class":806},[800,1357,811],{"class":810},[800,1359,1360],{"class":814}," useBackgroundColorUtility",[800,1362,847],{"class":810},[800,1364,1365],{"class":814}," useBorderColorUtility",[800,1367,818],{"class":810},[800,1369,821],{"class":806},[800,1371,824],{"class":810},[800,1373,859],{"class":827},[800,1375,831],{"class":810},[800,1377,834],{"class":810},[800,1379,1380,1382,1384,1387,1389,1391,1393,1395,1397],{"class":802,"line":888},[800,1381,807],{"class":806},[800,1383,811],{"class":810},[800,1385,1386],{"class":814}," useCheckedModifier",[800,1388,818],{"class":810},[800,1390,821],{"class":806},[800,1392,824],{"class":810},[800,1394,859],{"class":827},[800,1396,831],{"class":810},[800,1398,834],{"class":810},[800,1400,1401],{"class":802,"line":894},[800,1402,891],{"emptyLinePlaceholder":223},[800,1404,1405,1407,1409,1411,1413,1415],{"class":802,"line":915},[800,1406,898],{"class":897},[800,1408,901],{"class":814},[800,1410,904],{"class":810},[800,1412,815],{"class":907},[800,1414,910],{"class":814},[800,1416,834],{"class":810},[800,1418,1419,1421,1423,1426,1429,1432,1434],{"class":802,"line":920},[800,1420,898],{"class":897},[800,1422,811],{"class":810},[800,1424,1425],{"class":814}," ref ",[800,1427,1428],{"class":810},"}",[800,1430,1431],{"class":810}," =",[800,1433,1027],{"class":814},[800,1435,834],{"class":810},[800,1437,1438],{"class":802,"line":937},[800,1439,891],{"emptyLinePlaceholder":223},[800,1441,1442,1444,1446,1449,1451,1453,1455,1457,1459,1461,1464,1466,1468,1471,1473,1475,1478,1481,1484],{"class":802,"line":942},[800,1443,898],{"class":897},[800,1445,811],{"class":810},[800,1447,1448],{"class":814}," colorPrimary ",[800,1450,1428],{"class":810},[800,1452,1431],{"class":810},[800,1454,1339],{"class":907},[800,1456,948],{"class":814},[800,1458,847],{"class":810},[800,1460,811],{"class":810},[800,1462,1463],{"class":993}," primary",[800,1465,959],{"class":810},[800,1467,962],{"class":810},[800,1469,1470],{"class":827},"#006cff",[800,1472,968],{"class":810},[800,1474,818],{"class":810},[800,1476,1477],{"class":806}," as",[800,1479,1480],{"class":897}," const",[800,1482,1483],{"class":814},")",[800,1485,834],{"class":810},[800,1487,1488],{"class":802,"line":979},[800,1489,891],{"emptyLinePlaceholder":223},[800,1491,1492,1494,1497,1499,1501,1503],{"class":802,"line":1013},[800,1493,898],{"class":897},[800,1495,1496],{"class":814}," checked ",[800,1498,904],{"class":810},[800,1500,1386],{"class":907},[800,1502,932],{"class":814},[800,1504,834],{"class":810},[800,1506,1507],{"class":802,"line":1018},[800,1508,891],{"emptyLinePlaceholder":223},[800,1510,1512,1515,1517,1519],{"class":802,"line":1511},13,[800,1513,1514],{"class":907},"useBackgroundColorUtility",[800,1516,948],{"class":814},[800,1518,847],{"class":810},[800,1520,1521],{"class":810}," {\n",[800,1523,1525,1528,1530,1533,1536],{"class":802,"line":1524},14,[800,1526,1527],{"class":993},"    primary",[800,1529,959],{"class":810},[800,1531,1532],{"class":907}," ref",[800,1534,1535],{"class":814},"(colorPrimary)",[800,1537,1538],{"class":810},",\n",[800,1540,1542,1545,1548],{"class":802,"line":1541},15,[800,1543,1544],{"class":810},"},",[800,1546,1547],{"class":814}," [checked])",[800,1549,834],{"class":810},[800,1551,1553],{"class":802,"line":1552},16,[800,1554,891],{"emptyLinePlaceholder":223},[800,1556,1558,1561,1563,1565],{"class":802,"line":1557},17,[800,1559,1560],{"class":907},"useBorderColorUtility",[800,1562,948],{"class":814},[800,1564,847],{"class":810},[800,1566,1521],{"class":810},[800,1568,1570,1572,1574,1576,1578],{"class":802,"line":1569},18,[800,1571,1527],{"class":993},[800,1573,959],{"class":810},[800,1575,1532],{"class":907},[800,1577,1535],{"class":814},[800,1579,1538],{"class":810},[800,1581,1583,1585,1587],{"class":802,"line":1582},19,[800,1584,1544],{"class":810},[800,1586,1547],{"class":814},[800,1588,834],{"class":810},[800,1590,1592],{"class":802,"line":1591},20,[800,1593,891],{"emptyLinePlaceholder":223},[800,1595,1597,1599,1601,1603],{"class":802,"line":1596},21,[800,1598,1021],{"class":806},[800,1600,1024],{"class":806},[800,1602,1027],{"class":814},[800,1604,834],{"class":810},[786,1606,1607],{"icon":154,"label":326},[790,1608,1610],{"className":1034,"code":1609,"filename":1036,"language":1037,"meta":796,"style":796},"._background-color\\:primary { background-color: var(--color--primary); }\n._border-color\\:primary { border-color: var(--color--primary); }\n\n._checked\\:background-color\\:primary {\n    &:checked { background-color: var(--color--primary); }\n}\n\n._checked\\:border-color\\:primary {\n    &:checked { border-color: var(--color--primary); }\n}\n",[697,1611,1612,1645,1673,1677,1695,1716,1721,1725,1742,1761],{"__ignoreMap":796},[800,1613,1614,1616,1619,1621,1624,1626,1629,1631,1634,1637,1640,1643],{"class":802,"line":803},[800,1615,1044],{"class":810},[800,1617,1618],{"class":1047},"_background-color",[800,1620,1051],{"class":814},[800,1622,1623],{"class":1047},"primary",[800,1625,811],{"class":810},[800,1627,1628],{"class":1059}," background-color",[800,1630,959],{"class":810},[800,1632,1633],{"class":907}," var",[800,1635,1636],{"class":810},"(",[800,1638,1639],{"class":814},"--color--primary",[800,1641,1642],{"class":810},");",[800,1644,1071],{"class":810},[800,1646,1647,1649,1652,1654,1656,1658,1661,1663,1665,1667,1669,1671],{"class":802,"line":837},[800,1648,1044],{"class":810},[800,1650,1651],{"class":1047},"_border-color",[800,1653,1051],{"class":814},[800,1655,1623],{"class":1047},[800,1657,811],{"class":810},[800,1659,1660],{"class":1059}," border-color",[800,1662,959],{"class":810},[800,1664,1633],{"class":907},[800,1666,1636],{"class":810},[800,1668,1639],{"class":814},[800,1670,1642],{"class":810},[800,1672,1071],{"class":810},[800,1674,1675],{"class":802,"line":866},[800,1676,891],{"emptyLinePlaceholder":223},[800,1678,1679,1681,1684,1686,1689,1691,1693],{"class":802,"line":888},[800,1680,1044],{"class":810},[800,1682,1683],{"class":1047},"_checked",[800,1685,1051],{"class":814},[800,1687,1688],{"class":1047},"background-color",[800,1690,1051],{"class":814},[800,1692,1623],{"class":1047},[800,1694,1521],{"class":810},[800,1696,1697,1700,1702,1705,1708,1710,1712,1714],{"class":802,"line":894},[800,1698,1699],{"class":814},"    &",[800,1701,959],{"class":810},[800,1703,1704],{"class":814},"checked { background-color: ",[800,1706,1707],{"class":907},"var",[800,1709,1636],{"class":810},[800,1711,1639],{"class":814},[800,1713,1642],{"class":810},[800,1715,1071],{"class":810},[800,1717,1718],{"class":802,"line":915},[800,1719,1720],{"class":814},"}\n",[800,1722,1723],{"class":802,"line":920},[800,1724,891],{"emptyLinePlaceholder":223},[800,1726,1727,1729,1731,1733,1736,1738,1740],{"class":802,"line":937},[800,1728,1044],{"class":810},[800,1730,1683],{"class":1047},[800,1732,1051],{"class":814},[800,1734,1735],{"class":1047},"border-color",[800,1737,1051],{"class":814},[800,1739,1623],{"class":1047},[800,1741,1521],{"class":810},[800,1743,1744,1746,1748,1751,1753,1755,1757,1759],{"class":802,"line":942},[800,1745,1699],{"class":814},[800,1747,959],{"class":810},[800,1749,1750],{"class":814},"checked { border-color: ",[800,1752,1707],{"class":907},[800,1754,1636],{"class":810},[800,1756,1639],{"class":814},[800,1758,1642],{"class":810},[800,1760,1071],{"class":810},[800,1762,1763],{"class":802,"line":979},[800,1764,1720],{"class":814},[786,1766,1767],{"icon":520,"label":1167},[790,1768,1770],{"className":1170,"code":1769,"language":1172,"meta":796,"style":796},"\u003Cinput\n    type=\"checkbox\"\n    class=\"_checked:background-color:primary _checked:border-color:primary\"\n>\n",[697,1771,1772,1779,1794,1808],{"__ignoreMap":796},[800,1773,1774,1776],{"class":802,"line":803},[800,1775,1179],{"class":810},[800,1777,1778],{"class":993},"input\n",[800,1780,1781,1784,1786,1788,1791],{"class":802,"line":837},[800,1782,1783],{"class":897},"    type",[800,1785,904],{"class":810},[800,1787,831],{"class":810},[800,1789,1790],{"class":827},"checkbox",[800,1792,1793],{"class":810},"\"\n",[800,1795,1796,1799,1801,1803,1806],{"class":802,"line":866},[800,1797,1798],{"class":897},"    class",[800,1800,904],{"class":810},[800,1802,831],{"class":810},[800,1804,1805],{"class":827},"_checked:background-color:primary _checked:border-color:primary",[800,1807,1793],{"class":810},[800,1809,1810],{"class":802,"line":888},[800,1811,1200],{"class":810},[1216,1813,1219],{"id":1814},"css-selector-2",[1221,1816,1817,1825],{},[1224,1818,1819],{},[1227,1820,1821,1823],{},[1230,1822,1232],{},[1230,1824,1219],{},[1236,1826,1827],{},[1227,1828,1829,1834],{},[1241,1830,1831],{},[697,1832,1833],{},"checked",[1241,1835,1836],{},[697,1837,1838],{},"&:checked",[715,1840,1842],{"id":1841},"useindeterminatemodifier",[697,1843,1844],{},"useIndeterminateModifier",[719,1846,777,1847,1850],{},[697,1848,1849],{},"useIndeterminateModifier()"," function creates a modifier that applies styles when a checkbox is in an indeterminate state.",[1216,1852,1219],{"id":1853},"css-selector-3",[1221,1855,1856,1864],{},[1224,1857,1858],{},[1227,1859,1860,1862],{},[1230,1861,1232],{},[1230,1863,1219],{},[1236,1865,1866],{},[1227,1867,1868,1873],{},[1241,1869,1870],{},[697,1871,1872],{},"indeterminate",[1241,1874,1875],{},[697,1876,1877],{},"&:indeterminate",[715,1879,1881],{"id":1880},"userequiredmodifier",[697,1882,1883],{},"useRequiredModifier",[719,1885,777,1886,1889],{},[697,1887,1888],{},"useRequiredModifier()"," function creates a modifier that applies styles to required form fields.",[1216,1891,1219],{"id":1892},"css-selector-4",[1221,1894,1895,1903],{},[1224,1896,1897],{},[1227,1898,1899,1901],{},[1230,1900,1232],{},[1230,1902,1219],{},[1236,1904,1905],{},[1227,1906,1907,1912],{},[1241,1908,1909],{},[697,1910,1911],{},"required",[1241,1913,1914],{},[697,1915,1916],{},"&:required",[715,1918,1920],{"id":1919},"useoptionalmodifier",[697,1921,1922],{},"useOptionalModifier",[719,1924,777,1925,1928],{},[697,1926,1927],{},"useOptionalModifier()"," function creates a modifier that applies styles to optional form fields.",[1216,1930,1219],{"id":1931},"css-selector-5",[1221,1933,1934,1942],{},[1224,1935,1936],{},[1227,1937,1938,1940],{},[1230,1939,1232],{},[1230,1941,1219],{},[1236,1943,1944],{},[1227,1945,1946,1951],{},[1241,1947,1948],{},[697,1949,1950],{},"optional",[1241,1952,1953],{},[697,1954,1955],{},"&:optional",[715,1957,1959],{"id":1958},"usevalidmodifier",[697,1960,1961],{},"useValidModifier",[719,1963,777,1964,1967],{},[697,1965,1966],{},"useValidModifier()"," function creates a modifier that applies styles when a form element passes validation.",[783,1969,1970,2169,2314],{},[786,1971,1972],{"icon":788,"label":290},[790,1973,1975],{"className":792,"code":1974,"filename":794,"language":795,"meta":796,"style":796},"import { styleframe } from \"styleframe\";\nimport { useBorderColorUtility } from \"@styleframe\u002Ftheme\";\nimport { useValidModifier, useInvalidModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst valid = useValidModifier(s);\nconst invalid = useInvalidModifier(s);\n\nuseBorderColorUtility(s, {\n    success: '#28a745',\n    error: '#dc3545',\n}, [valid, invalid]);\n\nexport default s;\n",[697,1976,1977,1997,2017,2043,2047,2061,2065,2080,2095,2099,2109,2125,2141,2155,2159],{"__ignoreMap":796},[800,1978,1979,1981,1983,1985,1987,1989,1991,1993,1995],{"class":802,"line":803},[800,1980,807],{"class":806},[800,1982,811],{"class":810},[800,1984,815],{"class":814},[800,1986,818],{"class":810},[800,1988,821],{"class":806},[800,1990,824],{"class":810},[800,1992,828],{"class":827},[800,1994,831],{"class":810},[800,1996,834],{"class":810},[800,1998,1999,2001,2003,2005,2007,2009,2011,2013,2015],{"class":802,"line":837},[800,2000,807],{"class":806},[800,2002,811],{"class":810},[800,2004,1365],{"class":814},[800,2006,818],{"class":810},[800,2008,821],{"class":806},[800,2010,824],{"class":810},[800,2012,859],{"class":827},[800,2014,831],{"class":810},[800,2016,834],{"class":810},[800,2018,2019,2021,2023,2026,2028,2031,2033,2035,2037,2039,2041],{"class":802,"line":866},[800,2020,807],{"class":806},[800,2022,811],{"class":810},[800,2024,2025],{"class":814}," useValidModifier",[800,2027,847],{"class":810},[800,2029,2030],{"class":814}," useInvalidModifier",[800,2032,818],{"class":810},[800,2034,821],{"class":806},[800,2036,824],{"class":810},[800,2038,859],{"class":827},[800,2040,831],{"class":810},[800,2042,834],{"class":810},[800,2044,2045],{"class":802,"line":888},[800,2046,891],{"emptyLinePlaceholder":223},[800,2048,2049,2051,2053,2055,2057,2059],{"class":802,"line":894},[800,2050,898],{"class":897},[800,2052,901],{"class":814},[800,2054,904],{"class":810},[800,2056,815],{"class":907},[800,2058,910],{"class":814},[800,2060,834],{"class":810},[800,2062,2063],{"class":802,"line":915},[800,2064,891],{"emptyLinePlaceholder":223},[800,2066,2067,2069,2072,2074,2076,2078],{"class":802,"line":920},[800,2068,898],{"class":897},[800,2070,2071],{"class":814}," valid ",[800,2073,904],{"class":810},[800,2075,2025],{"class":907},[800,2077,932],{"class":814},[800,2079,834],{"class":810},[800,2081,2082,2084,2087,2089,2091,2093],{"class":802,"line":937},[800,2083,898],{"class":897},[800,2085,2086],{"class":814}," invalid ",[800,2088,904],{"class":810},[800,2090,2030],{"class":907},[800,2092,932],{"class":814},[800,2094,834],{"class":810},[800,2096,2097],{"class":802,"line":942},[800,2098,891],{"emptyLinePlaceholder":223},[800,2100,2101,2103,2105,2107],{"class":802,"line":979},[800,2102,1560],{"class":907},[800,2104,948],{"class":814},[800,2106,847],{"class":810},[800,2108,1521],{"class":810},[800,2110,2111,2114,2116,2118,2121,2123],{"class":802,"line":1013},[800,2112,2113],{"class":993},"    success",[800,2115,959],{"class":810},[800,2117,962],{"class":810},[800,2119,2120],{"class":827},"#28a745",[800,2122,968],{"class":810},[800,2124,1538],{"class":810},[800,2126,2127,2130,2132,2134,2137,2139],{"class":802,"line":1018},[800,2128,2129],{"class":993},"    error",[800,2131,959],{"class":810},[800,2133,962],{"class":810},[800,2135,2136],{"class":827},"#dc3545",[800,2138,968],{"class":810},[800,2140,1538],{"class":810},[800,2142,2143,2145,2148,2150,2153],{"class":802,"line":1511},[800,2144,1544],{"class":810},[800,2146,2147],{"class":814}," [valid",[800,2149,847],{"class":810},[800,2151,2152],{"class":814}," invalid])",[800,2154,834],{"class":810},[800,2156,2157],{"class":802,"line":1524},[800,2158,891],{"emptyLinePlaceholder":223},[800,2160,2161,2163,2165,2167],{"class":802,"line":1541},[800,2162,1021],{"class":806},[800,2164,1024],{"class":806},[800,2166,1027],{"class":814},[800,2168,834],{"class":810},[786,2170,2171],{"icon":154,"label":326},[790,2172,2174],{"className":1034,"code":2173,"filename":1036,"language":1037,"meta":796,"style":796},"._border-color\\:success { border-color: #28a745; }\n._border-color\\:error { border-color: #dc3545; }\n\n._valid\\:border-color\\:success {\n    &:valid { border-color: #28a745; }\n}\n\n._invalid\\:border-color\\:error {\n    &:invalid { border-color: #dc3545; }\n}\n",[697,2175,2176,2203,2229,2233,2250,2268,2272,2276,2293,2310],{"__ignoreMap":796},[800,2177,2178,2180,2182,2184,2187,2189,2191,2193,2196,2199,2201],{"class":802,"line":803},[800,2179,1044],{"class":810},[800,2181,1651],{"class":1047},[800,2183,1051],{"class":814},[800,2185,2186],{"class":1047},"success",[800,2188,811],{"class":810},[800,2190,1660],{"class":1059},[800,2192,959],{"class":810},[800,2194,2195],{"class":810}," #",[800,2197,2198],{"class":814},"28a745",[800,2200,1068],{"class":810},[800,2202,1071],{"class":810},[800,2204,2205,2207,2209,2211,2214,2216,2218,2220,2222,2225,2227],{"class":802,"line":837},[800,2206,1044],{"class":810},[800,2208,1651],{"class":1047},[800,2210,1051],{"class":814},[800,2212,2213],{"class":1047},"error",[800,2215,811],{"class":810},[800,2217,1660],{"class":1059},[800,2219,959],{"class":810},[800,2221,2195],{"class":810},[800,2223,2224],{"class":814},"dc3545",[800,2226,1068],{"class":810},[800,2228,1071],{"class":810},[800,2230,2231],{"class":802,"line":866},[800,2232,891],{"emptyLinePlaceholder":223},[800,2234,2235,2237,2240,2242,2244,2246,2248],{"class":802,"line":888},[800,2236,1044],{"class":810},[800,2238,2239],{"class":1047},"_valid",[800,2241,1051],{"class":814},[800,2243,1735],{"class":1047},[800,2245,1051],{"class":814},[800,2247,2186],{"class":1047},[800,2249,1521],{"class":810},[800,2251,2252,2254,2256,2259,2262,2264,2266],{"class":802,"line":894},[800,2253,1699],{"class":814},[800,2255,959],{"class":810},[800,2257,2258],{"class":814},"valid { border-color: ",[800,2260,2261],{"class":810},"#",[800,2263,2198],{"class":814},[800,2265,1068],{"class":810},[800,2267,1071],{"class":810},[800,2269,2270],{"class":802,"line":915},[800,2271,1720],{"class":814},[800,2273,2274],{"class":802,"line":920},[800,2275,891],{"emptyLinePlaceholder":223},[800,2277,2278,2280,2283,2285,2287,2289,2291],{"class":802,"line":937},[800,2279,1044],{"class":810},[800,2281,2282],{"class":1047},"_invalid",[800,2284,1051],{"class":814},[800,2286,1735],{"class":1047},[800,2288,1051],{"class":814},[800,2290,2213],{"class":1047},[800,2292,1521],{"class":810},[800,2294,2295,2297,2299,2302,2304,2306,2308],{"class":802,"line":942},[800,2296,1699],{"class":814},[800,2298,959],{"class":810},[800,2300,2301],{"class":814},"invalid { border-color: ",[800,2303,2261],{"class":810},[800,2305,2224],{"class":814},[800,2307,1068],{"class":810},[800,2309,1071],{"class":810},[800,2311,2312],{"class":802,"line":979},[800,2313,1720],{"class":814},[786,2315,2316],{"icon":520,"label":1167},[790,2317,2319],{"className":1170,"code":2318,"language":1172,"meta":796,"style":796},"\u003Cinput\n    type=\"email\"\n    required\n    class=\"_valid:border-color:success _invalid:border-color:error\"\n    placeholder=\"Enter email\"\n>\n",[697,2320,2321,2327,2340,2345,2358,2372],{"__ignoreMap":796},[800,2322,2323,2325],{"class":802,"line":803},[800,2324,1179],{"class":810},[800,2326,1778],{"class":993},[800,2328,2329,2331,2333,2335,2338],{"class":802,"line":837},[800,2330,1783],{"class":897},[800,2332,904],{"class":810},[800,2334,831],{"class":810},[800,2336,2337],{"class":827},"email",[800,2339,1793],{"class":810},[800,2341,2342],{"class":802,"line":866},[800,2343,2344],{"class":897},"    required\n",[800,2346,2347,2349,2351,2353,2356],{"class":802,"line":888},[800,2348,1798],{"class":897},[800,2350,904],{"class":810},[800,2352,831],{"class":810},[800,2354,2355],{"class":827},"_valid:border-color:success _invalid:border-color:error",[800,2357,1793],{"class":810},[800,2359,2360,2363,2365,2367,2370],{"class":802,"line":894},[800,2361,2362],{"class":897},"    placeholder",[800,2364,904],{"class":810},[800,2366,831],{"class":810},[800,2368,2369],{"class":827},"Enter email",[800,2371,1793],{"class":810},[800,2373,2374],{"class":802,"line":915},[800,2375,1200],{"class":810},[1216,2377,1219],{"id":2378},"css-selector-6",[1221,2380,2381,2389],{},[1224,2382,2383],{},[1227,2384,2385,2387],{},[1230,2386,1232],{},[1230,2388,1219],{},[1236,2390,2391],{},[1227,2392,2393,2398],{},[1241,2394,2395],{},[697,2396,2397],{},"valid",[1241,2399,2400],{},[697,2401,2402],{},"&:valid",[715,2404,2406],{"id":2405},"useinvalidmodifier",[697,2407,2408],{},"useInvalidModifier",[719,2410,777,2411,2414],{},[697,2412,2413],{},"useInvalidModifier()"," function creates a modifier that applies styles when a form element fails validation.",[1216,2416,1219],{"id":2417},"css-selector-7",[1221,2419,2420,2428],{},[1224,2421,2422],{},[1227,2423,2424,2426],{},[1230,2425,1232],{},[1230,2427,1219],{},[1236,2429,2430],{},[1227,2431,2432,2437],{},[1241,2433,2434],{},[697,2435,2436],{},"invalid",[1241,2438,2439],{},[697,2440,2441],{},"&:invalid",[715,2443,2445],{"id":2444},"useplaceholdershownmodifier",[697,2446,2447],{},"usePlaceholderShownModifier",[719,2449,777,2450,2453],{},[697,2451,2452],{},"usePlaceholderShownModifier()"," function creates a modifier that applies styles when a form element's placeholder is visible (i.e., the input is empty).",[783,2455,2456,2616,2694],{},[786,2457,2458],{"icon":788,"label":290},[790,2459,2461],{"className":792,"code":2460,"filename":794,"language":795,"meta":796,"style":796},"import { styleframe } from \"styleframe\";\nimport { useTextColorUtility } from \"@styleframe\u002Ftheme\";\nimport { usePlaceholderShownModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst placeholderShown = usePlaceholderShownModifier(s);\n\nuseTextColorUtility(s, {\n    muted: '#6c757d',\n}, [placeholderShown]);\n\nexport default s;\n",[697,2462,2463,2483,2504,2525,2529,2543,2547,2562,2566,2577,2593,2602,2606],{"__ignoreMap":796},[800,2464,2465,2467,2469,2471,2473,2475,2477,2479,2481],{"class":802,"line":803},[800,2466,807],{"class":806},[800,2468,811],{"class":810},[800,2470,815],{"class":814},[800,2472,818],{"class":810},[800,2474,821],{"class":806},[800,2476,824],{"class":810},[800,2478,828],{"class":827},[800,2480,831],{"class":810},[800,2482,834],{"class":810},[800,2484,2485,2487,2489,2492,2494,2496,2498,2500,2502],{"class":802,"line":837},[800,2486,807],{"class":806},[800,2488,811],{"class":810},[800,2490,2491],{"class":814}," useTextColorUtility",[800,2493,818],{"class":810},[800,2495,821],{"class":806},[800,2497,824],{"class":810},[800,2499,859],{"class":827},[800,2501,831],{"class":810},[800,2503,834],{"class":810},[800,2505,2506,2508,2510,2513,2515,2517,2519,2521,2523],{"class":802,"line":866},[800,2507,807],{"class":806},[800,2509,811],{"class":810},[800,2511,2512],{"class":814}," usePlaceholderShownModifier",[800,2514,818],{"class":810},[800,2516,821],{"class":806},[800,2518,824],{"class":810},[800,2520,859],{"class":827},[800,2522,831],{"class":810},[800,2524,834],{"class":810},[800,2526,2527],{"class":802,"line":888},[800,2528,891],{"emptyLinePlaceholder":223},[800,2530,2531,2533,2535,2537,2539,2541],{"class":802,"line":894},[800,2532,898],{"class":897},[800,2534,901],{"class":814},[800,2536,904],{"class":810},[800,2538,815],{"class":907},[800,2540,910],{"class":814},[800,2542,834],{"class":810},[800,2544,2545],{"class":802,"line":915},[800,2546,891],{"emptyLinePlaceholder":223},[800,2548,2549,2551,2554,2556,2558,2560],{"class":802,"line":920},[800,2550,898],{"class":897},[800,2552,2553],{"class":814}," placeholderShown ",[800,2555,904],{"class":810},[800,2557,2512],{"class":907},[800,2559,932],{"class":814},[800,2561,834],{"class":810},[800,2563,2564],{"class":802,"line":937},[800,2565,891],{"emptyLinePlaceholder":223},[800,2567,2568,2571,2573,2575],{"class":802,"line":942},[800,2569,2570],{"class":907},"useTextColorUtility",[800,2572,948],{"class":814},[800,2574,847],{"class":810},[800,2576,1521],{"class":810},[800,2578,2579,2582,2584,2586,2589,2591],{"class":802,"line":979},[800,2580,2581],{"class":993},"    muted",[800,2583,959],{"class":810},[800,2585,962],{"class":810},[800,2587,2588],{"class":827},"#6c757d",[800,2590,968],{"class":810},[800,2592,1538],{"class":810},[800,2594,2595,2597,2600],{"class":802,"line":1013},[800,2596,1544],{"class":810},[800,2598,2599],{"class":814}," [placeholderShown])",[800,2601,834],{"class":810},[800,2603,2604],{"class":802,"line":1018},[800,2605,891],{"emptyLinePlaceholder":223},[800,2607,2608,2610,2612,2614],{"class":802,"line":1511},[800,2609,1021],{"class":806},[800,2611,1024],{"class":806},[800,2613,1027],{"class":814},[800,2615,834],{"class":810},[786,2617,2618],{"icon":154,"label":326},[790,2619,2621],{"className":1034,"code":2620,"filename":1036,"language":1037,"meta":796,"style":796},"._text-color\\:muted { color: #6c757d; }\n\n._placeholder-shown\\:text-color\\:muted {\n    &:placeholder-shown { color: #6c757d; }\n}\n",[697,2622,2623,2651,2655,2673,2690],{"__ignoreMap":796},[800,2624,2625,2627,2630,2632,2635,2637,2640,2642,2644,2647,2649],{"class":802,"line":803},[800,2626,1044],{"class":810},[800,2628,2629],{"class":1047},"_text-color",[800,2631,1051],{"class":814},[800,2633,2634],{"class":1047},"muted",[800,2636,811],{"class":810},[800,2638,2639],{"class":1059}," color",[800,2641,959],{"class":810},[800,2643,2195],{"class":810},[800,2645,2646],{"class":814},"6c757d",[800,2648,1068],{"class":810},[800,2650,1071],{"class":810},[800,2652,2653],{"class":802,"line":837},[800,2654,891],{"emptyLinePlaceholder":223},[800,2656,2657,2659,2662,2664,2667,2669,2671],{"class":802,"line":866},[800,2658,1044],{"class":810},[800,2660,2661],{"class":1047},"_placeholder-shown",[800,2663,1051],{"class":814},[800,2665,2666],{"class":1047},"text-color",[800,2668,1051],{"class":814},[800,2670,2634],{"class":1047},[800,2672,1521],{"class":810},[800,2674,2675,2677,2679,2682,2684,2686,2688],{"class":802,"line":888},[800,2676,1699],{"class":814},[800,2678,959],{"class":810},[800,2680,2681],{"class":814},"placeholder-shown { color: ",[800,2683,2261],{"class":810},[800,2685,2646],{"class":814},[800,2687,1068],{"class":810},[800,2689,1071],{"class":810},[800,2691,2692],{"class":802,"line":894},[800,2693,1720],{"class":814},[786,2695,2696],{"icon":520,"label":1167},[790,2697,2699],{"className":1170,"code":2698,"language":1172,"meta":796,"style":796},"\u003C!-- Style input when placeholder is visible (empty) -->\n\u003Cinput\n    class=\"_placeholder-shown:text-color:muted\"\n    placeholder=\"Type something...\"\n>\n",[697,2700,2701,2707,2713,2726,2739],{"__ignoreMap":796},[800,2702,2703],{"class":802,"line":803},[800,2704,2706],{"class":2705},"sHwdD","\u003C!-- Style input when placeholder is visible (empty) -->\n",[800,2708,2709,2711],{"class":802,"line":837},[800,2710,1179],{"class":810},[800,2712,1778],{"class":993},[800,2714,2715,2717,2719,2721,2724],{"class":802,"line":866},[800,2716,1798],{"class":897},[800,2718,904],{"class":810},[800,2720,831],{"class":810},[800,2722,2723],{"class":827},"_placeholder-shown:text-color:muted",[800,2725,1793],{"class":810},[800,2727,2728,2730,2732,2734,2737],{"class":802,"line":888},[800,2729,2362],{"class":897},[800,2731,904],{"class":810},[800,2733,831],{"class":810},[800,2735,2736],{"class":827},"Type something...",[800,2738,1793],{"class":810},[800,2740,2741],{"class":802,"line":894},[800,2742,1200],{"class":810},[1216,2744,1219],{"id":2745},"css-selector-8",[1221,2747,2748,2756],{},[1224,2749,2750],{},[1227,2751,2752,2754],{},[1230,2753,1232],{},[1230,2755,1219],{},[1236,2757,2758],{},[1227,2759,2760,2765],{},[1241,2761,2762],{},[697,2763,2764],{},"placeholder-shown",[1241,2766,2767],{},[697,2768,2769],{},"&:placeholder-shown",[715,2771,2773],{"id":2772},"useautofillmodifier",[697,2774,2775],{},"useAutofillModifier",[719,2777,777,2778,2781],{},[697,2779,2780],{},"useAutofillModifier()"," function creates a modifier that applies styles when a form element has been autofilled by the browser.",[1216,2783,1219],{"id":2784},"css-selector-9",[1221,2786,2787,2795],{},[1224,2788,2789],{},[1227,2790,2791,2793],{},[1230,2792,1232],{},[1230,2794,1219],{},[1236,2796,2797],{},[1227,2798,2799,2804],{},[1241,2800,2801],{},[697,2802,2803],{},"autofill",[1241,2805,2806],{},[697,2807,2808],{},"&:autofill",[715,2810,2812],{"id":2811},"usereadonlymodifier",[697,2813,2814],{},"useReadOnlyModifier",[719,2816,777,2817,2820],{},[697,2818,2819],{},"useReadOnlyModifier()"," function creates a modifier that applies styles to read-only form elements.",[1216,2822,1219],{"id":2823},"css-selector-10",[1221,2825,2826,2834],{},[1224,2827,2828],{},[1227,2829,2830,2832],{},[1230,2831,1232],{},[1230,2833,1219],{},[1236,2835,2836],{},[1227,2837,2838,2843],{},[1241,2839,2840],{},[697,2841,2842],{},"read-only",[1241,2844,2845],{},[697,2846,2847],{},"&:read-only",[715,2849,2851],{"id":2850},"useformstatemodifiers",[697,2852,699],{},[719,2854,777,2855,2858],{},[697,2856,2857],{},"useFormStateModifiers()"," function registers all form state modifiers at once and returns them as a destructurable object.",[783,2860,2861,3092],{},[786,2862,2863],{"icon":788,"label":290},[790,2864,2866],{"className":792,"code":2865,"filename":794,"language":795,"meta":796,"style":796},"import { styleframe } from \"styleframe\";\nimport { useBorderColorUtility, useOpacityUtility } from \"@styleframe\u002Ftheme\";\nimport { useFormStateModifiers } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst { disabled, valid, invalid, checked } = useFormStateModifiers(s);\n\nuseBorderColorUtility(s, {\n    success: '#28a745',\n    error: '#dc3545',\n}, [valid, invalid]);\n\nuseOpacityUtility(s, {\n    50: '0.5',\n}, [disabled]);\n\nexport default s;\n",[697,2867,2868,2888,2912,2933,2937,2951,2955,2987,2991,3001,3015,3029,3041,3045,3055,3070,3078,3082],{"__ignoreMap":796},[800,2869,2870,2872,2874,2876,2878,2880,2882,2884,2886],{"class":802,"line":803},[800,2871,807],{"class":806},[800,2873,811],{"class":810},[800,2875,815],{"class":814},[800,2877,818],{"class":810},[800,2879,821],{"class":806},[800,2881,824],{"class":810},[800,2883,828],{"class":827},[800,2885,831],{"class":810},[800,2887,834],{"class":810},[800,2889,2890,2892,2894,2896,2898,2900,2902,2904,2906,2908,2910],{"class":802,"line":837},[800,2891,807],{"class":806},[800,2893,811],{"class":810},[800,2895,1365],{"class":814},[800,2897,847],{"class":810},[800,2899,844],{"class":814},[800,2901,818],{"class":810},[800,2903,821],{"class":806},[800,2905,824],{"class":810},[800,2907,859],{"class":827},[800,2909,831],{"class":810},[800,2911,834],{"class":810},[800,2913,2914,2916,2918,2921,2923,2925,2927,2929,2931],{"class":802,"line":866},[800,2915,807],{"class":806},[800,2917,811],{"class":810},[800,2919,2920],{"class":814}," useFormStateModifiers",[800,2922,818],{"class":810},[800,2924,821],{"class":806},[800,2926,824],{"class":810},[800,2928,859],{"class":827},[800,2930,831],{"class":810},[800,2932,834],{"class":810},[800,2934,2935],{"class":802,"line":888},[800,2936,891],{"emptyLinePlaceholder":223},[800,2938,2939,2941,2943,2945,2947,2949],{"class":802,"line":894},[800,2940,898],{"class":897},[800,2942,901],{"class":814},[800,2944,904],{"class":810},[800,2946,815],{"class":907},[800,2948,910],{"class":814},[800,2950,834],{"class":810},[800,2952,2953],{"class":802,"line":915},[800,2954,891],{"emptyLinePlaceholder":223},[800,2956,2957,2959,2961,2963,2965,2968,2970,2973,2975,2977,2979,2981,2983,2985],{"class":802,"line":920},[800,2958,898],{"class":897},[800,2960,811],{"class":810},[800,2962,1185],{"class":814},[800,2964,847],{"class":810},[800,2966,2967],{"class":814}," valid",[800,2969,847],{"class":810},[800,2971,2972],{"class":814}," invalid",[800,2974,847],{"class":810},[800,2976,1496],{"class":814},[800,2978,1428],{"class":810},[800,2980,1431],{"class":810},[800,2982,2920],{"class":907},[800,2984,932],{"class":814},[800,2986,834],{"class":810},[800,2988,2989],{"class":802,"line":937},[800,2990,891],{"emptyLinePlaceholder":223},[800,2992,2993,2995,2997,2999],{"class":802,"line":942},[800,2994,1560],{"class":907},[800,2996,948],{"class":814},[800,2998,847],{"class":810},[800,3000,1521],{"class":810},[800,3002,3003,3005,3007,3009,3011,3013],{"class":802,"line":979},[800,3004,2113],{"class":993},[800,3006,959],{"class":810},[800,3008,962],{"class":810},[800,3010,2120],{"class":827},[800,3012,968],{"class":810},[800,3014,1538],{"class":810},[800,3016,3017,3019,3021,3023,3025,3027],{"class":802,"line":1013},[800,3018,2129],{"class":993},[800,3020,959],{"class":810},[800,3022,962],{"class":810},[800,3024,2136],{"class":827},[800,3026,968],{"class":810},[800,3028,1538],{"class":810},[800,3030,3031,3033,3035,3037,3039],{"class":802,"line":1018},[800,3032,1544],{"class":810},[800,3034,2147],{"class":814},[800,3036,847],{"class":810},[800,3038,2152],{"class":814},[800,3040,834],{"class":810},[800,3042,3043],{"class":802,"line":1511},[800,3044,891],{"emptyLinePlaceholder":223},[800,3046,3047,3049,3051,3053],{"class":802,"line":1524},[800,3048,945],{"class":907},[800,3050,948],{"class":814},[800,3052,847],{"class":810},[800,3054,1521],{"class":810},[800,3056,3057,3060,3062,3064,3066,3068],{"class":802,"line":1541},[800,3058,3059],{"class":955},"    50",[800,3061,959],{"class":810},[800,3063,962],{"class":810},[800,3065,965],{"class":827},[800,3067,968],{"class":810},[800,3069,1538],{"class":810},[800,3071,3072,3074,3076],{"class":802,"line":1552},[800,3073,1544],{"class":810},[800,3075,974],{"class":814},[800,3077,834],{"class":810},[800,3079,3080],{"class":802,"line":1557},[800,3081,891],{"emptyLinePlaceholder":223},[800,3083,3084,3086,3088,3090],{"class":802,"line":1569},[800,3085,1021],{"class":806},[800,3087,1024],{"class":806},[800,3089,1027],{"class":814},[800,3091,834],{"class":810},[786,3093,3094],{"icon":520,"label":1167},[790,3095,3097],{"className":1170,"code":3096,"language":1172,"meta":796,"style":796},"\u003Cinput\n    type=\"email\"\n    required\n    class=\"_valid:border-color:success _invalid:border-color:error\"\n>\n\n\u003Cbutton disabled class=\"_disabled:opacity:50\">\n    Submit\n\u003C\u002Fbutton>\n",[697,3098,3099,3105,3117,3121,3133,3137,3141,3162,3167],{"__ignoreMap":796},[800,3100,3101,3103],{"class":802,"line":803},[800,3102,1179],{"class":810},[800,3104,1778],{"class":993},[800,3106,3107,3109,3111,3113,3115],{"class":802,"line":837},[800,3108,1783],{"class":897},[800,3110,904],{"class":810},[800,3112,831],{"class":810},[800,3114,2337],{"class":827},[800,3116,1793],{"class":810},[800,3118,3119],{"class":802,"line":866},[800,3120,2344],{"class":897},[800,3122,3123,3125,3127,3129,3131],{"class":802,"line":888},[800,3124,1798],{"class":897},[800,3126,904],{"class":810},[800,3128,831],{"class":810},[800,3130,2355],{"class":827},[800,3132,1793],{"class":810},[800,3134,3135],{"class":802,"line":894},[800,3136,1200],{"class":810},[800,3138,3139],{"class":802,"line":915},[800,3140,891],{"emptyLinePlaceholder":223},[800,3142,3143,3145,3147,3149,3151,3153,3155,3158,3160],{"class":802,"line":920},[800,3144,1179],{"class":810},[800,3146,1182],{"class":993},[800,3148,1185],{"class":897},[800,3150,1188],{"class":897},[800,3152,904],{"class":810},[800,3154,831],{"class":810},[800,3156,3157],{"class":827},"_disabled:opacity:50",[800,3159,831],{"class":810},[800,3161,1200],{"class":810},[800,3163,3164],{"class":802,"line":937},[800,3165,3166],{"class":814},"    Submit\n",[800,3168,3169,3171,3173],{"class":802,"line":942},[800,3170,1210],{"class":810},[800,3172,1182],{"class":993},[800,3174,1200],{"class":810},[3176,3177,3179],"h3",{"id":3178},"returned-modifiers","Returned Modifiers",[1221,3181,3182,3193],{},[1224,3183,3184],{},[1227,3185,3186,3189,3191],{},[1230,3187,3188],{},"Key",[1230,3190,1232],{},[1230,3192,1219],{},[1236,3194,3195,3209,3223,3237,3251,3265,3279,3293,3307,3322,3336,3351],{},[1227,3196,3197,3201,3205],{},[1241,3198,3199],{},[697,3200,1245],{},[1241,3202,3203],{},[697,3204,1245],{},[1241,3206,3207],{},[697,3208,1250],{},[1227,3210,3211,3215,3219],{},[1241,3212,3213],{},[697,3214,1284],{},[1241,3216,3217],{},[697,3218,1284],{},[1241,3220,3221],{},[697,3222,1289],{},[1227,3224,3225,3229,3233],{},[1241,3226,3227],{},[697,3228,1833],{},[1241,3230,3231],{},[697,3232,1833],{},[1241,3234,3235],{},[697,3236,1838],{},[1227,3238,3239,3243,3247],{},[1241,3240,3241],{},[697,3242,1872],{},[1241,3244,3245],{},[697,3246,1872],{},[1241,3248,3249],{},[697,3250,1877],{},[1227,3252,3253,3257,3261],{},[1241,3254,3255],{},[697,3256,1911],{},[1241,3258,3259],{},[697,3260,1911],{},[1241,3262,3263],{},[697,3264,1916],{},[1227,3266,3267,3271,3275],{},[1241,3268,3269],{},[697,3270,1950],{},[1241,3272,3273],{},[697,3274,1950],{},[1241,3276,3277],{},[697,3278,1955],{},[1227,3280,3281,3285,3289],{},[1241,3282,3283],{},[697,3284,2397],{},[1241,3286,3287],{},[697,3288,2397],{},[1241,3290,3291],{},[697,3292,2402],{},[1227,3294,3295,3299,3303],{},[1241,3296,3297],{},[697,3298,2436],{},[1241,3300,3301],{},[697,3302,2436],{},[1241,3304,3305],{},[697,3306,2441],{},[1227,3308,3309,3314,3318],{},[1241,3310,3311],{},[697,3312,3313],{},"placeholderShown",[1241,3315,3316],{},[697,3317,2764],{},[1241,3319,3320],{},[697,3321,2769],{},[1227,3323,3324,3328,3332],{},[1241,3325,3326],{},[697,3327,2803],{},[1241,3329,3330],{},[697,3331,2803],{},[1241,3333,3334],{},[697,3335,2808],{},[1227,3337,3338,3343,3347],{},[1241,3339,3340],{},[697,3341,3342],{},"readOnly",[1241,3344,3345],{},[697,3346,2842],{},[1241,3348,3349],{},[697,3350,2847],{},[1227,3352,3353,3358,3362],{},[1241,3354,3355],{},[697,3356,3357],{},"readonly",[1241,3359,3360],{},[697,3361,3357],{},[1241,3363,3364],{},[697,3365,2847],{},[715,3367,3369],{"id":3368},"examples","Examples",[3176,3371,3373],{"id":3372},"form-validation-feedback","Form Validation Feedback",[783,3375,3376,3643],{},[786,3377,3378],{"icon":788,"label":290},[790,3379,3381],{"className":792,"code":3380,"filename":794,"language":795,"meta":796,"style":796},"import { styleframe } from \"styleframe\";\nimport { useBorderColorUtility, useTextColorUtility } from \"@styleframe\u002Ftheme\";\nimport { useFormStateModifiers } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\n\nconst { valid, invalid, required, disabled } = useFormStateModifiers(s);\n\nuseBorderColorUtility(s, {\n    success: '#28a745',\n    error: '#dc3545',\n    warning: '#ffc107',\n}, [valid, invalid, required]);\n\nuseTextColorUtility(s, {\n    success: '#28a745',\n    error: '#dc3545',\n}, [valid, invalid]);\n\nexport default s;\n",[697,3382,3383,3403,3427,3447,3451,3465,3469,3500,3504,3514,3528,3542,3558,3575,3579,3589,3603,3617,3629,3633],{"__ignoreMap":796},[800,3384,3385,3387,3389,3391,3393,3395,3397,3399,3401],{"class":802,"line":803},[800,3386,807],{"class":806},[800,3388,811],{"class":810},[800,3390,815],{"class":814},[800,3392,818],{"class":810},[800,3394,821],{"class":806},[800,3396,824],{"class":810},[800,3398,828],{"class":827},[800,3400,831],{"class":810},[800,3402,834],{"class":810},[800,3404,3405,3407,3409,3411,3413,3415,3417,3419,3421,3423,3425],{"class":802,"line":837},[800,3406,807],{"class":806},[800,3408,811],{"class":810},[800,3410,1365],{"class":814},[800,3412,847],{"class":810},[800,3414,2491],{"class":814},[800,3416,818],{"class":810},[800,3418,821],{"class":806},[800,3420,824],{"class":810},[800,3422,859],{"class":827},[800,3424,831],{"class":810},[800,3426,834],{"class":810},[800,3428,3429,3431,3433,3435,3437,3439,3441,3443,3445],{"class":802,"line":866},[800,3430,807],{"class":806},[800,3432,811],{"class":810},[800,3434,2920],{"class":814},[800,3436,818],{"class":810},[800,3438,821],{"class":806},[800,3440,824],{"class":810},[800,3442,859],{"class":827},[800,3444,831],{"class":810},[800,3446,834],{"class":810},[800,3448,3449],{"class":802,"line":888},[800,3450,891],{"emptyLinePlaceholder":223},[800,3452,3453,3455,3457,3459,3461,3463],{"class":802,"line":894},[800,3454,898],{"class":897},[800,3456,901],{"class":814},[800,3458,904],{"class":810},[800,3460,815],{"class":907},[800,3462,910],{"class":814},[800,3464,834],{"class":810},[800,3466,3467],{"class":802,"line":915},[800,3468,891],{"emptyLinePlaceholder":223},[800,3470,3471,3473,3475,3477,3479,3481,3483,3486,3488,3490,3492,3494,3496,3498],{"class":802,"line":920},[800,3472,898],{"class":897},[800,3474,811],{"class":810},[800,3476,2967],{"class":814},[800,3478,847],{"class":810},[800,3480,2972],{"class":814},[800,3482,847],{"class":810},[800,3484,3485],{"class":814}," required",[800,3487,847],{"class":810},[800,3489,925],{"class":814},[800,3491,1428],{"class":810},[800,3493,1431],{"class":810},[800,3495,2920],{"class":907},[800,3497,932],{"class":814},[800,3499,834],{"class":810},[800,3501,3502],{"class":802,"line":937},[800,3503,891],{"emptyLinePlaceholder":223},[800,3505,3506,3508,3510,3512],{"class":802,"line":942},[800,3507,1560],{"class":907},[800,3509,948],{"class":814},[800,3511,847],{"class":810},[800,3513,1521],{"class":810},[800,3515,3516,3518,3520,3522,3524,3526],{"class":802,"line":979},[800,3517,2113],{"class":993},[800,3519,959],{"class":810},[800,3521,962],{"class":810},[800,3523,2120],{"class":827},[800,3525,968],{"class":810},[800,3527,1538],{"class":810},[800,3529,3530,3532,3534,3536,3538,3540],{"class":802,"line":1013},[800,3531,2129],{"class":993},[800,3533,959],{"class":810},[800,3535,962],{"class":810},[800,3537,2136],{"class":827},[800,3539,968],{"class":810},[800,3541,1538],{"class":810},[800,3543,3544,3547,3549,3551,3554,3556],{"class":802,"line":1018},[800,3545,3546],{"class":993},"    warning",[800,3548,959],{"class":810},[800,3550,962],{"class":810},[800,3552,3553],{"class":827},"#ffc107",[800,3555,968],{"class":810},[800,3557,1538],{"class":810},[800,3559,3560,3562,3564,3566,3568,3570,3573],{"class":802,"line":1511},[800,3561,1544],{"class":810},[800,3563,2147],{"class":814},[800,3565,847],{"class":810},[800,3567,2972],{"class":814},[800,3569,847],{"class":810},[800,3571,3572],{"class":814}," required])",[800,3574,834],{"class":810},[800,3576,3577],{"class":802,"line":1524},[800,3578,891],{"emptyLinePlaceholder":223},[800,3580,3581,3583,3585,3587],{"class":802,"line":1541},[800,3582,2570],{"class":907},[800,3584,948],{"class":814},[800,3586,847],{"class":810},[800,3588,1521],{"class":810},[800,3590,3591,3593,3595,3597,3599,3601],{"class":802,"line":1552},[800,3592,2113],{"class":993},[800,3594,959],{"class":810},[800,3596,962],{"class":810},[800,3598,2120],{"class":827},[800,3600,968],{"class":810},[800,3602,1538],{"class":810},[800,3604,3605,3607,3609,3611,3613,3615],{"class":802,"line":1557},[800,3606,2129],{"class":993},[800,3608,959],{"class":810},[800,3610,962],{"class":810},[800,3612,2136],{"class":827},[800,3614,968],{"class":810},[800,3616,1538],{"class":810},[800,3618,3619,3621,3623,3625,3627],{"class":802,"line":1569},[800,3620,1544],{"class":810},[800,3622,2147],{"class":814},[800,3624,847],{"class":810},[800,3626,2152],{"class":814},[800,3628,834],{"class":810},[800,3630,3631],{"class":802,"line":1582},[800,3632,891],{"emptyLinePlaceholder":223},[800,3634,3635,3637,3639,3641],{"class":802,"line":1591},[800,3636,1021],{"class":806},[800,3638,1024],{"class":806},[800,3640,1027],{"class":814},[800,3642,834],{"class":810},[786,3644,3645],{"icon":520,"label":1167},[790,3646,3648],{"className":1170,"code":3647,"language":1172,"meta":796,"style":796},"\u003Cform>\n    \u003Cinput\n        type=\"email\"\n        required\n        class=\"_invalid:border-color:error _valid:border-color:success\"\n        placeholder=\"Email address\"\n    >\n    \u003Cinput\n        type=\"text\"\n        class=\"_required:border-color:warning\"\n        required\n        placeholder=\"Required field\"\n    >\n\u003C\u002Fform>\n",[697,3649,3650,3659,3666,3679,3684,3698,3712,3717,3723,3736,3749,3753,3766,3770],{"__ignoreMap":796},[800,3651,3652,3654,3657],{"class":802,"line":803},[800,3653,1179],{"class":810},[800,3655,3656],{"class":993},"form",[800,3658,1200],{"class":810},[800,3660,3661,3664],{"class":802,"line":837},[800,3662,3663],{"class":810},"    \u003C",[800,3665,1778],{"class":993},[800,3667,3668,3671,3673,3675,3677],{"class":802,"line":866},[800,3669,3670],{"class":897},"        type",[800,3672,904],{"class":810},[800,3674,831],{"class":810},[800,3676,2337],{"class":827},[800,3678,1793],{"class":810},[800,3680,3681],{"class":802,"line":888},[800,3682,3683],{"class":897},"        required\n",[800,3685,3686,3689,3691,3693,3696],{"class":802,"line":894},[800,3687,3688],{"class":897},"        class",[800,3690,904],{"class":810},[800,3692,831],{"class":810},[800,3694,3695],{"class":827},"_invalid:border-color:error _valid:border-color:success",[800,3697,1793],{"class":810},[800,3699,3700,3703,3705,3707,3710],{"class":802,"line":915},[800,3701,3702],{"class":897},"        placeholder",[800,3704,904],{"class":810},[800,3706,831],{"class":810},[800,3708,3709],{"class":827},"Email address",[800,3711,1793],{"class":810},[800,3713,3714],{"class":802,"line":920},[800,3715,3716],{"class":810},"    >\n",[800,3718,3719,3721],{"class":802,"line":937},[800,3720,3663],{"class":810},[800,3722,1778],{"class":993},[800,3724,3725,3727,3729,3731,3734],{"class":802,"line":942},[800,3726,3670],{"class":897},[800,3728,904],{"class":810},[800,3730,831],{"class":810},[800,3732,3733],{"class":827},"text",[800,3735,1793],{"class":810},[800,3737,3738,3740,3742,3744,3747],{"class":802,"line":979},[800,3739,3688],{"class":897},[800,3741,904],{"class":810},[800,3743,831],{"class":810},[800,3745,3746],{"class":827},"_required:border-color:warning",[800,3748,1793],{"class":810},[800,3750,3751],{"class":802,"line":1013},[800,3752,3683],{"class":897},[800,3754,3755,3757,3759,3761,3764],{"class":802,"line":1018},[800,3756,3702],{"class":897},[800,3758,904],{"class":810},[800,3760,831],{"class":810},[800,3762,3763],{"class":827},"Required field",[800,3765,1793],{"class":810},[800,3767,3768],{"class":802,"line":1511},[800,3769,3716],{"class":810},[800,3771,3772,3774,3776],{"class":802,"line":1524},[800,3773,1210],{"class":810},[800,3775,3656],{"class":993},[800,3777,1200],{"class":810},[3176,3779,3781],{"id":3780},"custom-checkbox","Custom Checkbox",[783,3783,3784,4113],{},[786,3785,3786],{"icon":788,"label":290},[790,3787,3789],{"className":792,"code":3788,"filename":794,"language":795,"meta":796,"style":796},"import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe\u002Ftheme\";\nimport { useBackgroundColorUtility, useBorderColorUtility } from \"@styleframe\u002Ftheme\";\nimport { useCheckedModifier, useFocusVisibleModifier } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);\n\nconst checked = useCheckedModifier(s);\nconst focusVisible = useFocusVisibleModifier(s);\n\nuseBackgroundColorUtility(s, {\n    primary: ref(colorPrimary),\n    white: '#ffffff',\n}, [checked]);\n\nuseBorderColorUtility(s, {\n    primary: ref(colorPrimary),\n    muted: '#dee2e6',\n}, [checked, focusVisible]);\n\nexport default s;\n",[697,3790,3791,3811,3831,3855,3880,3884,3898,3914,3918,3958,3962,3976,3991,3995,4005,4017,4033,4041,4045,4055,4067,4082,4097,4102],{"__ignoreMap":796},[800,3792,3793,3795,3797,3799,3801,3803,3805,3807,3809],{"class":802,"line":803},[800,3794,807],{"class":806},[800,3796,811],{"class":810},[800,3798,815],{"class":814},[800,3800,818],{"class":810},[800,3802,821],{"class":806},[800,3804,824],{"class":810},[800,3806,828],{"class":827},[800,3808,831],{"class":810},[800,3810,834],{"class":810},[800,3812,3813,3815,3817,3819,3821,3823,3825,3827,3829],{"class":802,"line":837},[800,3814,807],{"class":806},[800,3816,811],{"class":810},[800,3818,1339],{"class":814},[800,3820,818],{"class":810},[800,3822,821],{"class":806},[800,3824,824],{"class":810},[800,3826,859],{"class":827},[800,3828,831],{"class":810},[800,3830,834],{"class":810},[800,3832,3833,3835,3837,3839,3841,3843,3845,3847,3849,3851,3853],{"class":802,"line":866},[800,3834,807],{"class":806},[800,3836,811],{"class":810},[800,3838,1360],{"class":814},[800,3840,847],{"class":810},[800,3842,1365],{"class":814},[800,3844,818],{"class":810},[800,3846,821],{"class":806},[800,3848,824],{"class":810},[800,3850,859],{"class":827},[800,3852,831],{"class":810},[800,3854,834],{"class":810},[800,3856,3857,3859,3861,3863,3865,3868,3870,3872,3874,3876,3878],{"class":802,"line":888},[800,3858,807],{"class":806},[800,3860,811],{"class":810},[800,3862,1386],{"class":814},[800,3864,847],{"class":810},[800,3866,3867],{"class":814}," useFocusVisibleModifier",[800,3869,818],{"class":810},[800,3871,821],{"class":806},[800,3873,824],{"class":810},[800,3875,859],{"class":827},[800,3877,831],{"class":810},[800,3879,834],{"class":810},[800,3881,3882],{"class":802,"line":894},[800,3883,891],{"emptyLinePlaceholder":223},[800,3885,3886,3888,3890,3892,3894,3896],{"class":802,"line":915},[800,3887,898],{"class":897},[800,3889,901],{"class":814},[800,3891,904],{"class":810},[800,3893,815],{"class":907},[800,3895,910],{"class":814},[800,3897,834],{"class":810},[800,3899,3900,3902,3904,3906,3908,3910,3912],{"class":802,"line":920},[800,3901,898],{"class":897},[800,3903,811],{"class":810},[800,3905,1425],{"class":814},[800,3907,1428],{"class":810},[800,3909,1431],{"class":810},[800,3911,1027],{"class":814},[800,3913,834],{"class":810},[800,3915,3916],{"class":802,"line":937},[800,3917,891],{"emptyLinePlaceholder":223},[800,3919,3920,3922,3924,3926,3928,3930,3932,3934,3936,3938,3940,3942,3944,3946,3948,3950,3952,3954,3956],{"class":802,"line":942},[800,3921,898],{"class":897},[800,3923,811],{"class":810},[800,3925,1448],{"class":814},[800,3927,1428],{"class":810},[800,3929,1431],{"class":810},[800,3931,1339],{"class":907},[800,3933,948],{"class":814},[800,3935,847],{"class":810},[800,3937,811],{"class":810},[800,3939,1463],{"class":993},[800,3941,959],{"class":810},[800,3943,962],{"class":810},[800,3945,1470],{"class":827},[800,3947,968],{"class":810},[800,3949,818],{"class":810},[800,3951,1477],{"class":806},[800,3953,1480],{"class":897},[800,3955,1483],{"class":814},[800,3957,834],{"class":810},[800,3959,3960],{"class":802,"line":979},[800,3961,891],{"emptyLinePlaceholder":223},[800,3963,3964,3966,3968,3970,3972,3974],{"class":802,"line":1013},[800,3965,898],{"class":897},[800,3967,1496],{"class":814},[800,3969,904],{"class":810},[800,3971,1386],{"class":907},[800,3973,932],{"class":814},[800,3975,834],{"class":810},[800,3977,3978,3980,3983,3985,3987,3989],{"class":802,"line":1018},[800,3979,898],{"class":897},[800,3981,3982],{"class":814}," focusVisible ",[800,3984,904],{"class":810},[800,3986,3867],{"class":907},[800,3988,932],{"class":814},[800,3990,834],{"class":810},[800,3992,3993],{"class":802,"line":1511},[800,3994,891],{"emptyLinePlaceholder":223},[800,3996,3997,3999,4001,4003],{"class":802,"line":1524},[800,3998,1514],{"class":907},[800,4000,948],{"class":814},[800,4002,847],{"class":810},[800,4004,1521],{"class":810},[800,4006,4007,4009,4011,4013,4015],{"class":802,"line":1541},[800,4008,1527],{"class":993},[800,4010,959],{"class":810},[800,4012,1532],{"class":907},[800,4014,1535],{"class":814},[800,4016,1538],{"class":810},[800,4018,4019,4022,4024,4026,4029,4031],{"class":802,"line":1552},[800,4020,4021],{"class":993},"    white",[800,4023,959],{"class":810},[800,4025,962],{"class":810},[800,4027,4028],{"class":827},"#ffffff",[800,4030,968],{"class":810},[800,4032,1538],{"class":810},[800,4034,4035,4037,4039],{"class":802,"line":1557},[800,4036,1544],{"class":810},[800,4038,1547],{"class":814},[800,4040,834],{"class":810},[800,4042,4043],{"class":802,"line":1569},[800,4044,891],{"emptyLinePlaceholder":223},[800,4046,4047,4049,4051,4053],{"class":802,"line":1582},[800,4048,1560],{"class":907},[800,4050,948],{"class":814},[800,4052,847],{"class":810},[800,4054,1521],{"class":810},[800,4056,4057,4059,4061,4063,4065],{"class":802,"line":1591},[800,4058,1527],{"class":993},[800,4060,959],{"class":810},[800,4062,1532],{"class":907},[800,4064,1535],{"class":814},[800,4066,1538],{"class":810},[800,4068,4069,4071,4073,4075,4078,4080],{"class":802,"line":1596},[800,4070,2581],{"class":993},[800,4072,959],{"class":810},[800,4074,962],{"class":810},[800,4076,4077],{"class":827},"#dee2e6",[800,4079,968],{"class":810},[800,4081,1538],{"class":810},[800,4083,4085,4087,4090,4092,4095],{"class":802,"line":4084},22,[800,4086,1544],{"class":810},[800,4088,4089],{"class":814}," [checked",[800,4091,847],{"class":810},[800,4093,4094],{"class":814}," focusVisible])",[800,4096,834],{"class":810},[800,4098,4100],{"class":802,"line":4099},23,[800,4101,891],{"emptyLinePlaceholder":223},[800,4103,4105,4107,4109,4111],{"class":802,"line":4104},24,[800,4106,1021],{"class":806},[800,4108,1024],{"class":806},[800,4110,1027],{"class":814},[800,4112,834],{"class":810},[786,4114,4115],{"icon":520,"label":1167},[790,4116,4118],{"className":1170,"code":4117,"language":1172,"meta":796,"style":796},"\u003Cinput\n    type=\"checkbox\"\n    class=\"_background-color:white _border-color:muted _checked:background-color:primary _checked:border-color:primary\"\n>\n",[697,4119,4120,4126,4138,4151],{"__ignoreMap":796},[800,4121,4122,4124],{"class":802,"line":803},[800,4123,1179],{"class":810},[800,4125,1778],{"class":993},[800,4127,4128,4130,4132,4134,4136],{"class":802,"line":837},[800,4129,1783],{"class":897},[800,4131,904],{"class":810},[800,4133,831],{"class":810},[800,4135,1790],{"class":827},[800,4137,1793],{"class":810},[800,4139,4140,4142,4144,4146,4149],{"class":802,"line":866},[800,4141,1798],{"class":897},[800,4143,904],{"class":810},[800,4145,831],{"class":810},[800,4147,4148],{"class":827},"_background-color:white _border-color:muted _checked:background-color:primary _checked:border-color:primary",[800,4150,1793],{"class":810},[800,4152,4153],{"class":802,"line":888},[800,4154,1200],{"class":810},[715,4156,4158],{"id":4157},"best-practices","Best Practices",[742,4160,4161,4167,4173,4182,4191],{},[745,4162,4163,4166],{},[692,4164,4165],{},"Combine valid\u002Finvalid with border colors",": Provide clear visual feedback for form validation states",[745,4168,4169,4172],{},[692,4170,4171],{},"Use disabled with opacity",": Reduce opacity for disabled elements to indicate they cannot be interacted with",[745,4174,4175,4178,4179,4181],{},[692,4176,4177],{},"Pair placeholder-shown with labels",": Create floating label patterns by combining ",[697,4180,2764],{}," with CSS transforms",[745,4183,4184,4187,4188,4190],{},[692,4185,4186],{},"Test autofill styling",": Browser autofill can override your styles; use the ",[697,4189,2803],{}," modifier to handle this",[745,4192,4193,4196,4197,4199],{},[692,4194,4195],{},"Use required with visual indicators",": Add visual cues for required fields using the ",[697,4198,1911],{}," modifier",[715,4201,4203],{"id":4202},"faq","FAQ",[4205,4206,4207,4227,4242,4261],"accordion",{},[4208,4209,777,4212,4214,4215,4218,4219,4222,4223,4226],"accordion-item",{"icon":4210,"label":4211},"i-lucide-circle-help","When should I use disabled vs aria-disabled?",[697,4213,724],{}," pseudo-class only works on native form elements. For custom components or ",[697,4216,4217],{},"\u003Cdiv>","-based controls, use ",[697,4220,4221],{},"useAriaDisabledModifier"," to target ",[697,4224,4225],{},"aria-disabled=\"true\""," instead.",[4208,4228,4230,4231,4234,4235,725,4238,4241],{"icon":4210,"label":4229},"Can I combine form state and pseudo-state modifiers?","Yes! Passing ",[697,4232,4233],{},"[disabled, hover]"," to a utility generates ",[697,4236,4237],{},"_disabled:property:value",[697,4239,4240],{},"_hover:property:value",", and combined variants. This lets you create nuanced interactions like hover effects that differ for enabled vs disabled states.",[4208,4243,4245,4246,4248,4249,4251,4252,4248,4255,4257,4258,4260],{"icon":4210,"label":4244},"What's the difference between read-only and readonly modifiers?","Both ",[697,4247,2814],{}," (generates modifier name ",[697,4250,2842],{},") and ",[697,4253,4254],{},"useReadonlyModifier",[697,4256,3357],{},") target the same CSS pseudo-class ",[697,4259,2847],{},". They are aliases for convenience based on your preferred naming convention.",[4208,4262,4264,4267,4268,4271,4272,4274],{"icon":4210,"label":4263},"How does placeholder-shown work with validation?",[697,4265,4266],{},":placeholder-shown"," matches when the input value is empty and the placeholder is visible. This is independent of validation states, so you can combine it with ",[697,4269,4270],{},":valid"," or ",[697,4273,732],{}," for more specific styling logic.",[4276,4277,4278],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":796,"searchDepth":837,"depth":837,"links":4280},[4281,4282,4283,4284,4285,4286,4287,4288,4289,4290,4291,4292,4293,4294,4297,4301,4302],{"id":717,"depth":837,"text":78},{"id":736,"depth":837,"text":737},{"id":771,"depth":837,"text":774},{"id":1253,"depth":837,"text":1256},{"id":1292,"depth":837,"text":1295},{"id":1841,"depth":837,"text":1844},{"id":1880,"depth":837,"text":1883},{"id":1919,"depth":837,"text":1922},{"id":1958,"depth":837,"text":1961},{"id":2405,"depth":837,"text":2408},{"id":2444,"depth":837,"text":2447},{"id":2772,"depth":837,"text":2775},{"id":2811,"depth":837,"text":2814},{"id":2850,"depth":837,"text":699,"children":4295},[4296],{"id":3178,"depth":866,"text":3179},{"id":3368,"depth":837,"text":3369,"children":4298},[4299,4300],{"id":3372,"depth":866,"text":3373},{"id":3780,"depth":866,"text":3781},{"id":4157,"depth":837,"text":4158},{"id":4202,"depth":837,"text":4203},"Create form state modifiers for styling form elements based on their validation and interaction states with full type safety.","md",null,{},{"title":654,"icon":429},{"title":684,"description":4303},"sRlOunk8YtBci7KQLtQ1-mrApti9PueYLS-TjPJ-7UE",[4311,4313],{"title":649,"path":650,"stem":651,"description":4312,"icon":652,"children":-1},"Create directional modifiers for targeting elements based on text direction (RTL\u002FLTR) with full type safety.",{"title":658,"path":659,"stem":660,"description":4314,"icon":661,"children":-1},"Create media and preference modifiers for adaptive styling based on user preferences like dark mode, reduced motion, and more.",1781596356294]