22:I[26879,["/_next/static/chunks/3i4dfrtuoj1bo.js","/_next/static/chunks/3a0xu0gdjs81p.js","/_next/static/chunks/3yakebpd54m1s.js","/_next/static/chunks/3ok2vzxu24_lc.js"],"LibraryDetail"] 23:T1725,"use client"; /*! * Adapted from KanchanaSW/doodle-ui Textarea and RoughSvg for standalone use. * MIT License · Copyright (c) 2026 KanchanaSW (doodle-ui) * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ import { forwardRef, useEffect, useId, useRef, useState, type ReactNode, type TextareaHTMLAttributes } from "react"; import rough from "roughjs"; export interface SketchTextareaProps extends Omit, "color"> { label?: ReactNode; size?: "sm" | "md" | "lg"; roughness?: number; seed?: number; sketchColor?: string; accentColor?: string; bowing?: number; strokeWidth?: number; animate?: boolean; invalid?: boolean; errorMessage?: string; } export const SketchTextarea = forwardRef(function SketchTextarea({ label, size = "md", roughness = 1.5, seed = 42, sketchColor = "#1f1d1a", accentColor = "#b44235", bowing = 1, strokeWidth = 1.75, animate = true, invalid = false, errorMessage, id, rows = 5, disabled, className = "", style, onFocus, onBlur, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, ...props }, ref) { const generatedId = useId(); const fieldId = id ?? generatedId; const errorId = `${fieldId}-error`; const frame = useRef(null); const svgRef = useRef(null); const [focused, setFocused] = useState(false); const hasError = invalid || !!errorMessage || ariaInvalid === true || ariaInvalid === "true"; const color = hasError ? "#b91c1c" : focused ? accentColor : sketchColor; useEffect(() => { const container = frame.current, svg = svgRef.current; if (!container || !svg) return; let animations: Animation[] = []; const paint = () => { const { width, height } = container.getBoundingClientRect(); if (width < 8 || height < 8) return; animations.forEach(animation => animation.cancel()); animations = []; const renderer = rough.svg(svg); const rectangle = renderer.rectangle(3, 3, width - 6, height - 6, { roughness, seed: seed + (focused && animate ? 997 : 0), bowing, strokeWidth: strokeWidth + (focused ? .2 : 0), stroke: color }); svg.replaceChildren(rectangle); svg.setAttribute("viewBox", `0 0 ${width} ${height}`); container.style.borderColor = "transparent"; if (animate && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) { rectangle.querySelectorAll("path").forEach(path => { const length = path.getTotalLength(); if (typeof path.animate === "function") animations.push(path.animate([{ strokeDasharray: `${length}`, strokeDashoffset: length }, { strokeDasharray: `${length}`, strokeDashoffset: 0 }], { duration: 280, easing: "ease-out" })); }); } }; paint(); const observer = new ResizeObserver(paint); observer.observe(container); return () => { observer.disconnect(); animations.forEach(animation => animation.cancel()); }; }, [roughness, seed, bowing, strokeWidth, focused, animate, color]); const dimensions = { sm: { fontSize: 14, padding: "9px 12px" }, md: { fontSize: 16, padding: "13px 16px" }, lg: { fontSize: 18, padding: "17px 20px" } }[size]; return

{label && {label}}

{ setFocused(true); onFocus?.(event); }} onBlur={event => { setFocused(false); onBlur?.(event); }} style={{ display: "block", position: "relative", zIndex: 1, width: "100%", maxWidth: "100%", minHeight: 60, boxSizing: "border-box", border: 0, outline: "none", background: "transparent", color: sketchColor, fontFamily: "inherit", lineHeight: 1.65, resize: "vertical", ...dimensions, ...style }} />
    </span>
    {errorMessage && <p id={errorId} role="alert" style={{ marginTop: 8, fontSize: 12, color: "#b91c1c" }}>{errorMessage}</p>}
    <style>{`.sketch-textarea textarea::placeholder { color: currentColor; opacity: .45; } .sketch-textarea:focus-within { outline: 2px solid transparent; } @media (forced-colors: active) { .sketch-textarea textarea:focus { outline: 2px solid Highlight !important; } }`}</style>
  </div>;
});

export { SketchTextarea as Textarea };
export default SketchTextarea;24:T531,"use client";
import { useState } from "react";
import { SketchTextarea } from "@/components/ui/sketch-textarea";

export default function SketchTextareaDemo() {
  const [note, setNote] = useState("");
  const [roughness, setRoughness] = useState(1.5);
  return <div className="flex min-h-screen items-center justify-center bg-[#f7f6f2] p-7 text-[#1f1d1a] sm:p-10"><div className="w-full max-w-sm"><p className="mb-2 text-[10px] font-semibold tracking-[.25em] text-[#8e7361]">A LITTLE ROOM FOR YOUR THOUGHTS</p><h2 className="mb-7 font-serif text-3xl">Make a little note.</h2><SketchTextarea label="오늘 떠오른 생각" placeholder="정리되지 않은 생각도 좋아요. 편하게 적어 보세요." roughness={roughness} rows={5} maxLength={500} value={note} onChange={event => setNote(event.target.value)} /><div className="mt-3 flex justify-between text-[11px] text-[#81786e]"><span>손으로 그린 듯, 조금 더 편안하게.</span><span>{note.length} / 500</span></div><label className="mt-7 flex items-center gap-4 text-xs text-[#6c6257]">선의 거칠기<input type="range" min="0.5" max="3" step="0.1" value={roughness} onChange={event => setRoughness(Number(event.target.value))} className="min-w-0 flex-1 accent-[#b44235]" /><span className="w-6 font-mono">{roughness.toFixed(1)}</span></label></div></div>;
}25:Tdb69,<style>*,::before,::after,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}body{font-family:inherit;line-height:inherit}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}ol,ul,menu{list-style:none}img,svg,video,canvas,iframe{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;color:inherit;letter-spacing:inherit;background-color:transparent;border-radius:0;opacity:1}button,[role=button]{cursor:pointer}::placeholder{opacity:1;color:color-mix(in oklab,currentcolor 50%,transparent)}textarea{resize:vertical}[hidden]:where(:not([hidden=until-found])){display:none!important}#root{min-height:100vh}/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-outline-style:solid;--tw-ease:initial}}}:root,:host{--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--container-sm:24rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-semibold:600;--ease-out:cubic-bezier(0, 0, .2, 1)}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-7{margin-top:calc(var(--spacing) * 7)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-7{margin-bottom:calc(var(--spacing) * 7)}.block{display:block}.flex{display:flex}.min-h-screen{min-height:100vh}.w-6{width:calc(var(--spacing) * 6)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:0}.flex-1{flex:1}.resize{resize:both}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-4{gap:calc(var(--spacing) * 4)}.border{border-style:var(--tw-border-style);border-width:1px}.bg-\[\#f7f6f2\]{background-color:#f7f6f2}.p-7{padding:calc(var(--spacing) * 7)}.font-mono{font-family:var(--font-mono)}.font-serif{font-family:var(--font-serif)}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[\.25em\]{--tw-tracking:.25em;letter-spacing:.25em}.text-\[\#1f1d1a\]{color:#1f1d1a}.text-\[\#6c6257\]{color:#6c6257}.text-\[\#8e7361\]{color:#8e7361}.text-\[\#81786e\]{color:#81786e}.accent-\[\#b44235\]{accent-color:#b44235}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media (min-width:40rem){.sm\:p-10{padding:calc(var(--spacing) * 10)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-ease{syntax:"*";inherits:false}</style><div id="root"></div><script>(()=>{var ge,k,gt,yn,j,ft,vt,yt,Ae,_e,re,bt,We,Ne,Ie,bn,pe={},de=[],kn=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,se=Array.isArray;function U(t,e){for(var n in e)t[n]=e[n];return t}function He(t){t&&t.parentNode&&t.parentNode.removeChild(t)}function B(t,e,n){var o,r,s,i={};for(s in e)s=="key"?o=e[s]:s=="ref"?r=e[s]:i[s]=e[s];if(arguments.length>2&&(i.children=arguments.length>3?ge.call(arguments,2):n),typeof t=="function"&&t.defaultProps!=null)for(s in t.defaultProps)i[s]===void 0&&(i[s]=t.defaultProps[s]);return fe(t,i,o,r,null)}function fe(t,e,n,o,r){var s={type:t,props:e,key:n,ref:o,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:r??++gt,__i:-1,__u:0};return r==null&&k.vnode!=null&&k.vnode(s),s}function z(t){return t.children}function F(t,e){this.props=t,this.context=e}function q(t,e){if(e==null)return t.__?q(t.__,t.__i+1):null;for(var n;e<t.__k.length;e++)if((n=t.__k[e])!=null&&n.__e!=null)return n.__e;return typeof t.type=="function"?q(t):null}function Mn(t){if(t.__P&&t.__d){var e=t.__v,n=e.__e,o=[],r=[],s=U({},e);s.__v=e.__v+1,k.vnode&&k.vnode(s),Fe(t.__P,s,e,t.__n,t.__P.namespaceURI,32&e.__u?[n]:null,o,n??q(e),!!(32&e.__u),r),s.__v=e.__v,s.__.__k[s.__i]=s,St(o,s,r),e.__e=e.__=null,s.__e!=n&&kt(s)}}function kt(t){if((t=t.__)!=null&&t.__c!=null)return t.__e=t.__c.base=null,t.__k.some(function(e){if(e!=null&&e.__e!=null)return t.__e=t.__c.base=e.__e}),kt(t)}function pt(t){(!t.__d&&(t.__d=!0)&&j.push(t)&&!me.__r++||ft!=k.debounceRendering)&&((ft=k.debounceRendering)||vt)(me)}function me(){try{for(var t,e=1;j.length;)j.length>e&&j.sort(yt),t=j.shift(),e=j.length,Mn(t)}finally{j.length=me.__r=0}}function Mt(t,e,n,o,r,s,i,a,u,l,h){var p,c,_,f,g,m,v=o&&o.__k||de,d=e.length;for(u=xn(n,e,v,u,d),p=0;p<d;p++)(_=n.__k[p])!=null&&(c=_.__i!=-1&&v[_.__i]||pe,_.__i=p,m=Fe(t,_,c,r,s,i,a,u,l,h),f=_.__e,_.ref&&c.ref!=_.ref&&(c.ref&&ze(c.ref,null,_),h.push(_.ref,_.__c||f,_)),g==null&&f!=null&&(g=f),4&_.__u?(u=xt(_,u,t),c.__e&&(c.__e=null)):typeof _.type=="function"&&m!==void 0?u=m:f&&(u=f.nextSibling),_.__u&=-7);return n.__e=g,u}function xn(t,e,n,o,r){var s,i,a,u,l,h=n.length,p=h,c=0;for(t.__k=new Array(r),s=0;s<r;s++)(i=e[s])!=null&&typeof i!="boolean"&&typeof i!="function"?(typeof i=="string"||typeof i=="number"||typeof i=="bigint"||i.constructor==String?i=t.__k[s]=fe(null,i,null,null,null):se(i)?i=t.__k[s]=fe(z,{children:i},null,null,null):i.constructor===void 0&&i.__b>0?i=t.__k[s]=fe(i.type,i.props,i.key,i.ref?i.ref:null,i.__v):t.__k[s]=i,u=s+c,i.__=t,i.__b=t.__b+1,a=null,(l=i.__i=wn(i,n,u,p))!=-1&&(p--,(a=n[l])&&(a.__u|=2)),a==null||a.__v==null?(l==-1&&(r>h?c--:r<h&&c++),typeof i.type!="function"&&(i.__u|=4)):l!=u&&(l==u-1?c--:l==u+1?c++:(l>u?c--:c++,i.__u|=4))):t.__k[s]=null;if(p)for(s=0;s<h;s++)(a=n[s])!=null&&(2&a.__u)==0&&(a.__e==o&&(o=q(a)),Ct(a,a));return o}function xt(t,e,n){var o,r;if(typeof t.type=="function"){for(o=t.__k,r=0;o&&r<o.length;r++)o[r]&&(o[r].__=t,e=xt(o[r],e,n));return e}t.__e!=e&&(e&&t.type&&!e.parentNode&&(e=q(t)),e=n.insertBefore(t.__e,e||null));do e=e&&e.nextSibling;while(e!=null&&e.nodeType==8);return e}function ae(t,e){return e=e||[],t==null||typeof t=="boolean"||(se(t)?t.some(function(n){ae(n,e)}):e.push(t)),e}function wn(t,e,n,o){var r,s,i,a=t.key,u=t.type,l=e[n],h=l!=null&&(2&l.__u)==0;if(l===null&&a==null||h&&a==l.key&&u==l.type)return n;if(o>(h?1:0)){for(r=n-1,s=n+1;r>=0||s<e.length;)if((l=e[i=r>=0?r--:s++])!=null&&(2&l.__u)==0&&a==l.key&&u==l.type)return i}return-1}function dt(t,e,n){e[0]=="-"?t.setProperty(e,n??""):t[e]=n==null?"":typeof n!="number"||kn.test(e)?n:n+"px"}function he(t,e,n,o,r){var s,i;e:if(e=="style")if(typeof n=="string")t.style.cssText=n;else{if(typeof o=="string"&&(t.style.cssText=o=""),o)for(e in o)n&&e in n||dt(t.style,e,"");if(n)for(e in n)o&&n[e]==o[e]||dt(t.style,e,n[e])}else if(e[0]=="o"&&e[1]=="n")s=e!=(e=e.replace(bt,"$1")),i=e.toLowerCase(),e=i in t||e=="onFocusOut"||e=="onFocusIn"?i.slice(2):e.slice(2),t.l||(t.l={}),t.l[e+s]=n,n?o?n[re]=o[re]:(n[re]=We,t.addEventListener(e,s?Ie:Ne,s)):t.removeEventListener(e,s?Ie:Ne,s);else{if(r=="http://www.w3.org/2000/svg")e=e.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(e!="width"&&e!="height"&&e!="href"&&e!="list"&&e!="form"&&e!="tabIndex"&&e!="download"&&e!="rowSpan"&&e!="colSpan"&&e!="role"&&e!="popover"&&e in t)try{t[e]=n??"";break e}catch{}typeof n=="function"||(n==null||n===!1&&e[4]!="-"?t.removeAttribute(e):t.setAttribute(e,e=="popover"&&n==1?"":n))}}function mt(t){return function(e){if(this.l){var n=this.l[e.type+t];if(e[_e]==null)e[_e]=We++;else if(e[_e]<n[re])return;return n(k.event?k.event(e):e)}}}function Fe(t,e,n,o,r,s,i,a,u,l){var h,p,c,_,f,g,m,v,d,y,w,x,M,L,E,H,S=e.type;if(e.constructor!==void 0)return null;128&n.__u&&(u=!!(32&n.__u),s=[a=e.__e=n.__e]),(h=k.__b)&&h(e);e:if(typeof S=="function"){p=i.length;try{if(d=e.props,y=S.prototype&&S.prototype.render,w=(h=S.contextType)&&o[h.__c],x=h?w?w.props.value:h.__:o,n.__c?v=(c=e.__c=n.__c).__=c.__E:(y?e.__c=c=new S(d,x):(e.__c=c=new F(d,x),c.constructor=S,c.render=Pn),w&&w.sub(c),c.state||(c.state={}),c.__n=o,_=c.__d=!0,c.__h=[],c._sb=[]),y&&c.__s==null&&(c.__s=c.state),y&&S.getDerivedStateFromProps!=null&&(c.__s==c.state&&(c.__s=U({},c.__s)),U(c.__s,S.getDerivedStateFromProps(d,c.__s))),f=c.props,g=c.state,c.__v=e,_)y&&S.getDerivedStateFromProps==null&&c.componentWillMount!=null&&c.componentWillMount(),y&&c.componentDidMount!=null&&c.__h.push(c.componentDidMount);else{if(y&&S.getDerivedStateFromProps==null&&d!==f&&c.componentWillReceiveProps!=null&&c.componentWillReceiveProps(d,x),e.__v==n.__v||!c.__e&&c.shouldComponentUpdate!=null&&c.shouldComponentUpdate(d,c.__s,x)===!1){e.__v!=n.__v&&(c.props=d,c.state=c.__s,c.__d=!1),e.__e=n.__e,e.__k=n.__k,e.__k.some(function(D){D&&(D.__=e)}),de.push.apply(c.__h,c._sb),c._sb=[],c.__h.length&&i.push(c),a=q(n);break e}c.componentWillUpdate!=null&&c.componentWillUpdate(d,c.__s,x),y&&c.componentDidUpdate!=null&&c.__h.push(function(){c.componentDidUpdate(f,g,m)})}if(c.context=x,c.props=d,c.__P=t,c.__e=!1,M=k.__r,L=0,y)c.state=c.__s,c.__d=!1,M&&M(e),h=c.render(c.props,c.state,c.context),de.push.apply(c.__h,c._sb),c._sb=[];else do c.__d=!1,M&&M(e),h=c.render(c.props,c.state,c.context),c.state=c.__s;while(c.__d&&++L<25);c.state=c.__s,c.getChildContext!=null&&(o=U(U({},o),c.getChildContext())),y&&!_&&c.getSnapshotBeforeUpdate!=null&&(m=c.getSnapshotBeforeUpdate(f,g)),E=h!=null&&h.type===z&&h.key==null?Pt(h.props.children):h,a=Mt(t,se(E)?E:[E],e,n,o,r,s,i,a,u,l),c.base=e.__e,e.__u&=-161,c.__h.length&&i.push(c),v&&(c.__E=c.__=null)}catch(D){if(i.length=p,e.__v=null,u||s!=null){if(D.then){for(e.__u|=u?160:128;a&&a.nodeType==8&&a.nextSibling;)a=a.nextSibling;s!=null&&(s[s.indexOf(a)]=null),e.__e=a}else if(s!=null)for(H=s.length;H--;)He(s[H])}else e.__e=n.__e;e.__k==null&&(e.__k=n.__k||[]),D.then||wt(e),k.__e(D,e,n)}}else s==null&&e.__v==n.__v?(e.__k=n.__k,e.__e=n.__e):a=e.__e=Sn(n.__e,e,n,o,r,s,i,u,l);return(h=k.diffed)&&h(e),128&e.__u?void 0:a}function wt(t){t&&(t.__c&&(t.__c.__e=!0),t.__k&&t.__k.some(wt))}function St(t,e,n){for(var o=0;o<n.length;o++)ze(n[o],n[++o],n[++o]);k.__c&&k.__c(e,t),t.some(function(r){try{t=r.__h,r.__h=[],t.some(function(s){s.call(r)})}catch(s){k.__e(s,r.__v)}})}function Pt(t){return typeof t!="object"||t==null||t.__b>0?t:se(t)?t.map(Pt):t.constructor!==void 0?null:U({},t)}function Sn(t,e,n,o,r,s,i,a,u){var l,h,p,c,_,f,g,m=n.props||pe,v=e.props,d=e.type;if(d=="svg"?r="http://www.w3.org/2000/svg":d=="math"?r="http://www.w3.org/1998/Math/MathML":r||(r="http://www.w3.org/1999/xhtml"),s!=null){for(l=0;l<s.length;l++)if((_=s[l])&&"setAttribute"in _==!!d&&(d?_.localName==d:_.nodeType==3)){t=_,s[l]=null;break}}if(t==null){if(d==null)return document.createTextNode(v);t=document.createElementNS(r,d,v.is&&v),a&&(k.__m&&k.__m(e,s),a=!1),s=null}if(d==null)m===v||a&&t.data==v||(t.data=v);else{if(s=d=="textarea"&&v.defaultValue!=null?null:s&&ge.call(t.childNodes),!a&&s!=null)for(m={},l=0;l<t.attributes.length;l++)m[(_=t.attributes[l]).name]=_.value;for(l in m)_=m[l],l=="dangerouslySetInnerHTML"?p=_:l=="children"||l in v||l=="value"&&"defaultValue"in v||l=="checked"&&"defaultChecked"in v||he(t,l,null,_,r);for(l in v)_=v[l],l=="children"?c=_:l=="dangerouslySetInnerHTML"?h=_:l=="value"?f=_:l=="checked"?g=_:a&&typeof _!="function"||m[l]===_||he(t,l,_,m[l],r);if(h)a||p&&(h.__html==p.__html||h.__html==t.innerHTML)||(t.innerHTML=h.__html),e.__k=[];else if(p&&(t.innerHTML=""),Mt(e.type=="template"?t.content:t,se(c)?c:[c],e,n,o,d=="foreignObject"?"http://www.w3.org/1999/xhtml":r,s,i,s?s[0]:n.__k&&q(n,0),a,u),s!=null)for(l=s.length;l--;)He(s[l]);a&&d!="textarea"||(l="value",d=="progress"&&f==null?t.removeAttribute("value"):f!=null&&(f!==t[l]||d=="progress"&&!f||d=="option"&&f!=m[l])&&he(t,l,f,m[l],r),l="checked",g!=null&&g!=t[l]&&he(t,l,g,m[l],r))}return t}function ze(t,e,n){try{if(typeof t=="function"){var o=typeof t.__u=="function";o&&t.__u(),o&&e==null||(t.__u=t(e))}else t.current=e}catch(r){k.__e(r,n)}}function Ct(t,e,n){var o,r;if(k.unmount&&k.unmount(t),(o=t.ref)&&(o.current&&o.current!=t.__e||ze(o,null,e)),(o=t.__c)!=null){if(o.componentWillUnmount)try{o.componentWillUnmount()}catch(s){k.__e(s,e)}o.base=o.__P=o.__n=null}if(o=t.__k)for(r=0;r<o.length;r++)o[r]&&Ct(o[r],e,n||typeof t.type!="function");n||He(t.__e),t.__c=t.__=t.__e=void 0}function Pn(t,e,n){return this.constructor(t,n)}function Ue(t,e,n){var o,r,s,i;e==document&&(e=document.documentElement),k.__&&k.__(t,e),r=(o=typeof n=="function")?null:n&&n.__k||e.__k,s=[],i=[],Fe(e,t=(!o&&n||e).__k=B(z,null,[t]),r||pe,pe,e.namespaceURI,!o&&n?[n]:r?null:e.firstChild?ge.call(e.childNodes):null,s,!o&&n?n:r?r.__e:e.firstChild,o,i),St(s,t,i),t.props.children=null}ge=de.slice,k={__e:function(t,e,n,o){for(var r,s,i;e=e.__;)if((r=e.__c)&&!r.__)try{if((s=r.constructor)&&s.getDerivedStateFromError!=null&&(r.setState(s.getDerivedStateFromError(t)),i=r.__d),r.componentDidCatch!=null&&(r.componentDidCatch(t,o||{}),i=r.__d),i)return r.__E=r}catch(a){t=a}throw t}},gt=0,yn=function(t){return t!=null&&t.constructor===void 0},F.prototype.setState=function(t,e){var n;n=this.__s!=null&&this.__s!=this.state?this.__s:this.__s=U({},this.state),typeof t=="function"&&(t=t(U({},n),this.props)),t&&U(n,t),t!=null&&this.__v&&(e&&this._sb.push(e),pt(this))},F.prototype.forceUpdate=function(t){this.__v&&(this.__e=!0,t&&this.__h.push(t),pt(this))},F.prototype.render=z,j=[],vt=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,yt=function(t,e){return t.__v.__b-e.__v.__b},me.__r=0,Ae=Math.random().toString(8),_e="__d"+Ae,re="__a"+Ae,bt=/(PointerCapture)$|Capture$/i,We=0,Ne=mt(!1),Ie=mt(!0),bn=0;var J,P,$e,Ot,ye=0,It=[],T=k,Tt=T.__b,Et=T.__r,Lt=T.diffed,Dt=T.__c,Rt=T.unmount,At=T.__;function be(t,e){T.__h&&T.__h(P,t,ye||e),ye=0;var n=P.__H||(P.__H={__:[],__h:[]});return t>=n.__.length&&n.__.push({}),n.__[t]}function K(t){return ye=1,Wt(zt,t)}function Wt(t,e,n){var o=be(J++,2);if(o.t=t,!o.__c&&(o.__=[n?n(e):zt(void 0,e),function(a){var u=o.__N?o.__N[0]:o.__[0],l=o.t(u,a);u!==l&&(o.__N=[l,o.__[1]],o.__c.setState({}))}],o.__c=P,!P.__f)){var r=function(a,u,l){if(!o.__c.__H)return!0;var h=!1,p=o.__c.props!==a;if(o.__c.__H.__.some(function(_){if(_.__N){h=!0;var f=_.__[0];_.__=_.__N,_.__N=void 0,f!==_.__[0]&&(p=!0)}}),s){var c=s.call(this,a,u,l);return h?c||p:c}return!h||p};P.__f=!0;var s=P.shouldComponentUpdate,i=P.componentWillUpdate;P.componentWillUpdate=function(a,u,l){if(this.__e){var h=s;s=void 0,r(a,u,l),s=h}i&&i.call(this,a,u,l)},P.shouldComponentUpdate=r}return o.__N||o.__}function Ve(t,e){var n=be(J++,3);!T.__s&&Ft(n.__H,e)&&(n.__=t,n.u=e,P.__H.__h.push(n))}function ke(t){return ye=5,Ht(function(){return{current:t}},[])}function Ht(t,e){var n=be(J++,7);return Ft(n.__H,e)&&(n.__=t(),n.__H=e,n.__h=t),n.__}function Ge(){var t=be(J++,11);if(!t.__){for(var e=P.__v;e!==null&&!e.__m&&e.__!==null;)e=e.__;var n=e.__m||(e.__m=[0,0]);t.__="P"+n[0]+"-"+n[1]++}return t.__}function Cn(){for(var t;t=It.shift();){var e=t.__H;if(t.__P&&e)try{e.__h.some(ve),e.__h.some(je),e.__h=[]}catch(n){e.__h=[],T.__e(n,t.__v)}}}T.__b=function(t){P=null,Tt&&Tt(t)},T.__=function(t,e){t&&e.__k&&e.__k.__m&&(t.__m=e.__k.__m),At&&At(t,e)},T.__r=function(t){Et&&Et(t),J=0;var e=(P=t.__c).__H;e&&($e===P?(e.__h=[],P.__h=[],e.__.some(function(n){n.__N&&(n.__=n.__N),n.u=n.__N=void 0})):(e.__h.some(ve),e.__h.some(je),e.__h=[],J=0)),$e=P},T.diffed=function(t){Lt&&Lt(t);var e=t.__c;e&&e.__H&&(e.__H.__h.length&&(It.push(e)!==1&&Ot===T.requestAnimationFrame||((Ot=T.requestAnimationFrame)||On)(Cn)),e.__H.__.some(function(n){n.u&&(n.__H=n.u,n.u=void 0)})),$e=P=null},T.__c=function(t,e){e.some(function(n){try{n.__h.some(ve),n.__h=n.__h.filter(function(o){return!o.__||je(o)})}catch(o){e.some(function(r){r.__h&&(r.__h=[])}),e=[],T.__e(o,n.__v)}}),Dt&&Dt(t,e)},T.unmount=function(t){Rt&&Rt(t);var e,n=t.__c;n&&n.__H&&(n.__H.__.some(function(o){try{ve(o)}catch(r){e=r}}),n.__H=void 0,e&&T.__e(e,n.__v))};var Nt=typeof requestAnimationFrame=="function";function On(t){var e,n=function(){clearTimeout(o),Nt&&cancelAnimationFrame(e),setTimeout(t)},o=setTimeout(n,35);Nt&&(e=requestAnimationFrame(n))}function ve(t){var e=P,n=t.__c;typeof n=="function"&&(t.__c=void 0,n()),P=e}function je(t){var e=P;t.__c=t.__(),P=e}function Ft(t,e){return!t||t.length!==e.length||e.some(function(n,o){return n!==t[o]})}function zt(t,e){return typeof e=="function"?e(t):e}function Yt(t,e){for(var n in e)t[n]=e[n];return t}function Ut(t,e){for(var n in t)if(n!=="__source"&&!(n in e))return!0;for(var o in e)if(o!=="__source"&&t[o]!==e[o])return!0;return!1}function $t(t,e){this.props=t,this.context=e}($t.prototype=new F).isPureReactComponent=!0,$t.prototype.shouldComponentUpdate=function(t,e){return Ut(this.props,t)||Ut(this.state,e)};var jt=k.__b;k.__b=function(t){t.type&&t.type.__f&&t.ref&&(t.props.ref=t.ref,t.ref=null),jt&&jt(t)};var Ln=typeof Symbol<"u"&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function Jt(t){function e(n){var o=Yt({},n);return delete o.ref,t(o,n.ref||null)}return e.$$typeof=Ln,e.render=t,e.prototype.isReactComponent=e.__f=!0,e.displayName="ForwardRef("+(t.displayName||t.name)+")",e}var Dn=k.__e;k.__e=function(t,e,n,o){if(t.then){for(var r,s=e;s=s.__;)if((r=s.__c)&&r.__c)return e.__e==null&&(e.__e=n.__e,e.__k=n.__k||[]),r.__c(t,e)}Dn(t,e,n,o)};var Vt=k.unmount;function Kt(t,e,n){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach(function(o){typeof o.__c=="function"&&o.__c()}),t.__c.__H=null),(t=Yt({},t)).__c!=null&&(t.__c.__P===n&&(t.__c.__P=e),t.__c.__e=!0,t.__c=null),t.__k=t.__k&&t.__k.map(function(o){return Kt(o,e,n)})),t}function Xt(t,e,n){return t&&n&&(t.__v=null,t.__k=t.__k&&t.__k.map(function(o){return Xt(o,e,n)}),t.__c&&t.__c.__P===e&&(t.__e&&n.appendChild(t.__e),t.__c.__e=!0,t.__c.__P=n)),t}function qe(){this.__u=0,this.o=null,this.__b=null}function en(t){var e=t.__&&t.__.__c;return e&&e.__a&&e.__a(t)}function Me(){this.i=null,this.l=null}k.unmount=function(t){var e=t.__c;e&&(e.__z=!0),e&&e.__R&&e.__R(),e&&32&t.__u&&(t.type=null),Vt&&Vt(t)},(qe.prototype=new F).__c=function(t,e){var n=e.__c,o=this;o.o==null&&(o.o=[]),o.o.push(n);var r=en(o.__v),s=!1,i=function(){s||o.__z||(s=!0,n.__R=null,r?r(u):u())};n.__R=i;var a=n.__P;n.__P=null;var u=function(){if(!--o.__u){if(o.state.__a){var l=o.state.__a;o.__v.__k[0]=Xt(l,l.__c.__P,l.__c.__O)}var h;for(o.setState({__a:o.__b=null});h=o.o.pop();)h.__P=a,h.forceUpdate()}};o.__u++||32&e.__u||o.setState({__a:o.__b=o.__v.__k[0]}),t.then(i,i)},qe.prototype.componentWillUnmount=function(){this.o=[]},qe.prototype.render=function(t,e){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=Kt(this.__b,n,o.__O=o.__P)}this.__b=null}var r=e.__a&&B(z,null,t.fallback);return r&&(r.__u&=-33),[B(z,null,e.__a?null:t.children),r]};var Gt=function(t,e,n){if(++n[1]===n[0]&&t.l.delete(e),t.props.revealOrder&&(t.props.revealOrder[0]!=="t"||!t.l.size))for(n=t.i;n;){for(;n.length>3;)n.pop()();if(n[1]<n[0])break;t.i=n=n[2]}};(Me.prototype=new F).__a=function(t){var e=this,n=en(e.__v),o=e.l.get(t);return o[0]++,function(r){var s=function(){e.props.revealOrder?(o.push(r),Gt(e,t,o)):r()};n?n(s):s()}},Me.prototype.render=function(t){this.i=null,this.l=new Map;var e=ae(t.children);t.revealOrder&&t.revealOrder[0]==="b"&&e.reverse();for(var n=e.length;n--;)this.l.set(e[n],this.i=[1,0,this.i]);return t.children},Me.prototype.componentDidUpdate=Me.prototype.componentDidMount=function(){var t=this;this.l.forEach(function(e,n){Gt(t,n,e)})};var Rn=typeof Symbol<"u"&&Symbol.for&&Symbol.for("react.element")||60103,An=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Nn=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,In=/[A-Z0-9]/g,Wn=typeof document<"u",Hn=function(t){return(typeof Symbol<"u"&&typeof Symbol()=="symbol"?/fil|che|rad/:/fil|che|ra/).test(t)};F.prototype.isReactComponent=!0,["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(t){Object.defineProperty(F.prototype,t,{configurable:!0,get:function(){return this["UNSAFE_"+t]},set:function(e){Object.defineProperty(this,t,{configurable:!0,writable:!0,value:e})}})});var qt=k.event;k.event=function(t){return qt&&(t=qt(t)),t.persist=function(){},t.isPropagationStopped=function(){return this.cancelBubble},t.isDefaultPrevented=function(){return this.defaultPrevented},t.nativeEvent=t};var tn,Fn={configurable:!0,get:function(){return this.class}},Bt=k.vnode;k.vnode=function(t){typeof t.type=="string"&&(function(e){var n=e.props,o=e.type,r={},s=o.indexOf("-")==-1;for(var i in n){var a=n[i];if(!(i==="value"&&"defaultValue"in n&&a==null||Wn&&i==="children"&&o==="noscript"||i==="class"||i==="className")){var u=i.toLowerCase();i==="defaultValue"&&"value"in n&&n.value==null?i="value":i==="download"&&a===!0?a="":u==="translate"&&a==="no"?a=!1:u[0]==="o"&&u[1]==="n"?u==="ondoubleclick"?i="ondblclick":u!=="onchange"||o!=="input"&&o!=="textarea"||Hn(n.type)?u==="onfocus"?i="onfocusin":u==="onblur"?i="onfocusout":Nn.test(i)&&(i=u):u=i="oninput":s&&An.test(i)?i=i.replace(In,"-$&").toLowerCase():a===null&&(a=void 0),u==="oninput"&&r[i=u]&&(i="oninputCapture"),r[i]=a}}o=="select"&&(r.multiple&&Array.isArray(r.value)&&(r.value=ae(n.children).forEach(function(l){l.props.selected=r.value.indexOf(l.props.value)!=-1})),r.defaultValue!=null&&(r.value=ae(n.children).forEach(function(l){l.props.selected=r.multiple?r.defaultValue.indexOf(l.props.value)!=-1:r.defaultValue==l.props.value}))),n.class&&!n.className?(r.class=n.class,Object.defineProperty(r,"className",Fn)):n.className&&(r.class=r.className=n.className),e.props=r})(t),t.$$typeof=Rn,Bt&&Bt(t)};var Zt=k.__r;k.__r=function(t){Zt&&Zt(t),tn=t.__c};var Qt=k.diffed;k.diffed=function(t){Qt&&Qt(t);var e=t.props,n=t.__e;n!=null&&t.type==="textarea"&&"value"in e&&e.value!==n.value&&(n.value=e.value==null?"":e.value),tn=null};function Be(t,e,n){if(t&&t.length){let[o,r]=e,s=Math.PI/180*n,i=Math.cos(s),a=Math.sin(s);for(let u of t){let[l,h]=u;u[0]=(l-o)*i-(h-r)*a+o,u[1]=(l-o)*a+(h-r)*i+r}}}function zn(t,e){return t[0]===e[0]&&t[1]===e[1]}function Un(t,e,n,o=1){let r=n,s=Math.max(e,.1),i=t[0]&&t[0][0]&&typeof t[0][0]=="number"?[t]:t,a=[0,0];if(r)for(let l of i)Be(l,a,r);let u=(function(l,h,p){let c=[];for(let d of l){let y=[...d];zn(y[0],y[y.length-1])||y.push([y[0][0],y[0][1]]),y.length>2&&c.push(y)}let _=[];h=Math.max(h,.1);let f=[];for(let d of c)for(let y=0;y<d.length-1;y++){let w=d[y],x=d[y+1];if(w[1]!==x[1]){let M=Math.min(w[1],x[1]);f.push({ymin:M,ymax:Math.max(w[1],x[1]),x:M===w[1]?w[0]:x[0],islope:(x[0]-w[0])/(x[1]-w[1])})}}if(f.sort(((d,y)=>d.ymin<y.ymin?-1:d.ymin>y.ymin?1:d.x<y.x?-1:d.x>y.x?1:d.ymax===y.ymax?0:(d.ymax-y.ymax)/Math.abs(d.ymax-y.ymax))),!f.length)return _;let g=[],m=f[0].ymin,v=0;for(;g.length||f.length;){if(f.length){let d=-1;for(let y=0;y<f.length&&!(f[y].ymin>m);y++)d=y;f.splice(0,d+1).forEach((y=>{g.push({s:m,edge:y})}))}if(g=g.filter((d=>!(d.edge.ymax<=m))),g.sort(((d,y)=>d.edge.x===y.edge.x?0:(d.edge.x-y.edge.x)/Math.abs(d.edge.x-y.edge.x))),(p!==1||v%h==0)&&g.length>1)for(let d=0;d<g.length;d+=2){let y=d+1;if(y>=g.length)break;let w=g[d].edge,x=g[y].edge;_.push([[Math.round(w.x),m],[Math.round(x.x),m]])}m+=p,g.forEach((d=>{d.edge.x=d.edge.x+p*d.edge.islope})),v++}return _})(i,s,o);if(r){for(let l of i)Be(l,a,-r);(function(l,h,p){let c=[];l.forEach((_=>c.push(..._))),Be(c,h,p)})(u,a,-r)}return u}function ce(t,e){var n;let o=e.hachureAngle+90,r=e.hachureGap;r<0&&(r=4*e.strokeWidth),r=Math.round(Math.max(r,.1));let s=1;return e.roughness>=1&&(((n=e.randomizer)===null||n===void 0?void 0:n.next())||Math.random())>.7&&(s=r),Un(t,r,o,s||1)}var ue=class{constructor(e){this.helper=e}fillPolygons(e,n){return this._fillPolygons(e,n)}_fillPolygons(e,n){let o=ce(e,n);return{type:"fillSketch",ops:this.renderLines(o,n)}}renderLines(e,n){let o=[];for(let r of e)o.push(...this.helper.doubleLineOps(r[0][0],r[0][1],r[1][0],r[1][1],n));return o}};function Le(t){let e=t[0],n=t[1];return Math.sqrt(Math.pow(e[0]-n[0],2)+Math.pow(e[1]-n[1],2))}var Ke=class extends ue{fillPolygons(e,n){let o=n.hachureGap;o<0&&(o=4*n.strokeWidth),o=Math.max(o,.1);let r=ce(e,Object.assign({},n,{hachureGap:o})),s=Math.PI/180*n.hachureAngle,i=[],a=.5*o*Math.cos(s),u=.5*o*Math.sin(s);for(let[l,h]of r)Le([l,h])&&i.push([[l[0]-a,l[1]+u],[...h]],[[l[0]+a,l[1]-u],[...h]]);return{type:"fillSketch",ops:this.renderLines(i,n)}}},Xe=class extends ue{fillPolygons(e,n){let o=this._fillPolygons(e,n),r=Object.assign({},n,{hachureAngle:n.hachureAngle+90}),s=this._fillPolygons(e,r);return o.ops=o.ops.concat(s.ops),o}},et=class{constructor(e){this.helper=e}fillPolygons(e,n){let o=ce(e,n=Object.assign({},n,{hachureAngle:0}));return this.dotsOnLines(o,n)}dotsOnLines(e,n){let o=[],r=n.hachureGap;r<0&&(r=4*n.strokeWidth),r=Math.max(r,.1);let s=n.fillWeight;s<0&&(s=n.strokeWidth/2);let i=r/4;for(let a of e){let u=Le(a),l=u/r,h=Math.ceil(l)-1,p=u-h*r,c=(a[0][0]+a[1][0])/2-r/4,_=Math.min(a[0][1],a[1][1]);for(let f=0;f<h;f++){let g=_+p+f*r,m=c-i+2*Math.random()*i,v=g-i+2*Math.random()*i,d=this.helper.ellipse(m,v,s,s,n);o.push(...d.ops)}}return{type:"fillSketch",ops:o}}},tt=class{constructor(e){this.helper=e}fillPolygons(e,n){let o=ce(e,n);return{type:"fillSketch",ops:this.dashedLine(o,n)}}dashedLine(e,n){let o=n.dashOffset<0?n.hachureGap<0?4*n.strokeWidth:n.hachureGap:n.dashOffset,r=n.dashGap<0?n.hachureGap<0?4*n.strokeWidth:n.hachureGap:n.dashGap,s=[];return e.forEach((i=>{let a=Le(i),u=Math.floor(a/(o+r)),l=(a+r-u*(o+r))/2,h=i[0],p=i[1];h[0]>p[0]&&(h=i[1],p=i[0]);let c=Math.atan((p[1]-h[1])/(p[0]-h[0]));for(let _=0;_<u;_++){let f=_*(o+r),g=f+o,m=[h[0]+f*Math.cos(c)+l*Math.cos(c),h[1]+f*Math.sin(c)+l*Math.sin(c)],v=[h[0]+g*Math.cos(c)+l*Math.cos(c),h[1]+g*Math.sin(c)+l*Math.sin(c)];s.push(...this.helper.doubleLineOps(m[0],m[1],v[0],v[1],n))}})),s}},nt=class{constructor(e){this.helper=e}fillPolygons(e,n){let o=n.hachureGap<0?4*n.strokeWidth:n.hachureGap,r=n.zigzagOffset<0?o:n.zigzagOffset,s=ce(e,n=Object.assign({},n,{hachureGap:o+r}));return{type:"fillSketch",ops:this.zigzagLines(s,r,n)}}zigzagLines(e,n,o){let r=[];return e.forEach((s=>{let i=Le(s),a=Math.round(i/(2*n)),u=s[0],l=s[1];u[0]>l[0]&&(u=s[1],l=s[0]);let h=Math.atan((l[1]-u[1])/(l[0]-u[0]));for(let p=0;p<a;p++){let c=2*p*n,_=2*(p+1)*n,f=Math.sqrt(2*Math.pow(n,2)),g=[u[0]+c*Math.cos(h),u[1]+c*Math.sin(h)],m=[u[0]+_*Math.cos(h),u[1]+_*Math.sin(h)],v=[g[0]+f*Math.cos(h+Math.PI/4),g[1]+f*Math.sin(h+Math.PI/4)];r.push(...this.helper.doubleLineOps(g[0],g[1],v[0],v[1],o),...this.helper.doubleLineOps(v[0],v[1],m[0],m[1],o))}})),r}},I={},ot=class{constructor(e){this.seed=e}next(){return this.seed?(2**31-1&(this.seed=Math.imul(48271,this.seed)))/2**31:Math.random()}},$n=0,Ze=1,nn=2,xe={A:7,a:7,C:6,c:6,H:1,h:1,L:2,l:2,M:2,m:2,Q:4,q:4,S:4,s:4,T:2,t:2,V:1,v:1,Z:0,z:0};function Qe(t,e){return t.type===e}function ut(t){let e=[],n=(function(i){let a=new Array;for(;i!=="";)if(i.match(/^([ \t\r\n,]+)/))i=i.substr(RegExp.$1.length);else if(i.match(/^([aAcChHlLmMqQsStTvVzZ])/))a[a.length]={type:$n,text:RegExp.$1},i=i.substr(RegExp.$1.length);else{if(!i.match(/^(([-+]?[0-9]+(\.[0-9]*)?|[-+]?\.[0-9]+)([eE][-+]?[0-9]+)?)/))return[];a[a.length]={type:Ze,text:`${parseFloat(RegExp.$1)}`},i=i.substr(RegExp.$1.length)}return a[a.length]={type:nn,text:""},a})(t),o="BOD",r=0,s=n[r];for(;!Qe(s,nn);){let i=0,a=[];if(o==="BOD"){if(s.text!=="M"&&s.text!=="m")return ut("M0,0"+t);r++,i=xe[s.text],o=s.text}else Qe(s,Ze)?i=xe[o]:(r++,i=xe[s.text],o=s.text);if(!(r+i<n.length))throw new Error("Path data ended short");for(let u=r;u<r+i;u++){let l=n[u];if(!Qe(l,Ze))throw new Error("Param not a number: "+o+","+l.text);a[a.length]=+l.text}if(typeof xe[o]!="number")throw new Error("Bad segment: "+o);{let u={key:o,data:a};e.push(u),r+=i,s=n[r],o==="M"&&(o="L"),o==="m"&&(o="l")}}return e}function hn(t){let e=0,n=0,o=0,r=0,s=[];for(let{key:i,data:a}of t)switch(i){case"M":s.push({key:"M",data:[...a]}),[e,n]=a,[o,r]=a;break;case"m":e+=a[0],n+=a[1],s.push({key:"M",data:[e,n]}),o=e,r=n;break;case"L":s.push({key:"L",data:[...a]}),[e,n]=a;break;case"l":e+=a[0],n+=a[1],s.push({key:"L",data:[e,n]});break;case"C":s.push({key:"C",data:[...a]}),e=a[4],n=a[5];break;case"c":{let u=a.map(((l,h)=>h%2?l+n:l+e));s.push({key:"C",data:u}),e=u[4],n=u[5];break}case"Q":s.push({key:"Q",data:[...a]}),e=a[2],n=a[3];break;case"q":{let u=a.map(((l,h)=>h%2?l+n:l+e));s.push({key:"Q",data:u}),e=u[2],n=u[3];break}case"A":s.push({key:"A",data:[...a]}),e=a[5],n=a[6];break;case"a":e+=a[5],n+=a[6],s.push({key:"A",data:[a[0],a[1],a[2],a[3],a[4],e,n]});break;case"H":s.push({key:"H",data:[...a]}),e=a[0];break;case"h":e+=a[0],s.push({key:"H",data:[e]});break;case"V":s.push({key:"V",data:[...a]}),n=a[0];break;case"v":n+=a[0],s.push({key:"V",data:[n]});break;case"S":s.push({key:"S",data:[...a]}),e=a[2],n=a[3];break;case"s":{let u=a.map(((l,h)=>h%2?l+n:l+e));s.push({key:"S",data:u}),e=u[2],n=u[3];break}case"T":s.push({key:"T",data:[...a]}),e=a[0],n=a[1];break;case"t":e+=a[0],n+=a[1],s.push({key:"T",data:[e,n]});break;case"Z":case"z":s.push({key:"Z",data:[]}),e=o,n=r}return s}function _n(t){let e=[],n="",o=0,r=0,s=0,i=0,a=0,u=0;for(let{key:l,data:h}of t){switch(l){case"M":e.push({key:"M",data:[...h]}),[o,r]=h,[s,i]=h;break;case"C":e.push({key:"C",data:[...h]}),o=h[4],r=h[5],a=h[2],u=h[3];break;case"L":e.push({key:"L",data:[...h]}),[o,r]=h;break;case"H":o=h[0],e.push({key:"L",data:[o,r]});break;case"V":r=h[0],e.push({key:"L",data:[o,r]});break;case"S":{let p=0,c=0;n==="C"||n==="S"?(p=o+(o-a),c=r+(r-u)):(p=o,c=r),e.push({key:"C",data:[p,c,...h]}),a=h[0],u=h[1],o=h[2],r=h[3];break}case"T":{let[p,c]=h,_=0,f=0;n==="Q"||n==="T"?(_=o+(o-a),f=r+(r-u)):(_=o,f=r);let g=o+2*(_-o)/3,m=r+2*(f-r)/3,v=p+2*(_-p)/3,d=c+2*(f-c)/3;e.push({key:"C",data:[g,m,v,d,p,c]}),a=_,u=f,o=p,r=c;break}case"Q":{let[p,c,_,f]=h,g=o+2*(p-o)/3,m=r+2*(c-r)/3,v=_+2*(p-_)/3,d=f+2*(c-f)/3;e.push({key:"C",data:[g,m,v,d,_,f]}),a=p,u=c,o=_,r=f;break}case"A":{let p=Math.abs(h[0]),c=Math.abs(h[1]),_=h[2],f=h[3],g=h[4],m=h[5],v=h[6];p===0||c===0?(e.push({key:"C",data:[o,r,m,v,m,v]}),o=m,r=v):(o!==m||r!==v)&&(fn(o,r,m,v,p,c,_,f,g).forEach((function(d){e.push({key:"C",data:d})})),o=m,r=v);break}case"Z":e.push({key:"Z",data:[]}),o=s,r=i}n=l}return e}function ie(t,e,n){return[t*Math.cos(n)-e*Math.sin(n),t*Math.sin(n)+e*Math.cos(n)]}function fn(t,e,n,o,r,s,i,a,u,l){let h=(p=i,Math.PI*p/180);var p;let c=[],_=0,f=0,g=0,m=0;if(l)[_,f,g,m]=l;else{[t,e]=ie(t,e,-h),[n,o]=ie(n,o,-h);let R=(t-n)/2,O=(e-o)/2,N=R*R/(r*r)+O*O/(s*s);N>1&&(N=Math.sqrt(N),r*=N,s*=N);let $=r*r,A=s*s,Q=$*A-$*O*O-A*R*R,Y=$*O*O+A*R*R,te=(a===u?-1:1)*Math.sqrt(Math.abs(Q/Y));g=te*r*O/s+(t+n)/2,m=te*-s*R/r+(e+o)/2,_=Math.asin(parseFloat(((e-m)/s).toFixed(9))),f=Math.asin(parseFloat(((o-m)/s).toFixed(9))),t<g&&(_=Math.PI-_),n<g&&(f=Math.PI-f),_<0&&(_=2*Math.PI+_),f<0&&(f=2*Math.PI+f),u&&_>f&&(_-=2*Math.PI),!u&&f>_&&(f-=2*Math.PI)}let v=f-_;if(Math.abs(v)>120*Math.PI/180){let R=f,O=n,N=o;f=u&&f>_?_+120*Math.PI/180*1:_+120*Math.PI/180*-1,c=fn(n=g+r*Math.cos(f),o=m+s*Math.sin(f),O,N,r,s,i,0,u,[f,R,g,m])}v=f-_;let d=Math.cos(_),y=Math.sin(_),w=Math.cos(f),x=Math.sin(f),M=Math.tan(v/4),L=4/3*r*M,E=4/3*s*M,H=[t,e],S=[t+L*y,e-E*d],D=[n+L*x,o-E*w],G=[n,o];if(S[0]=2*H[0]-S[0],S[1]=2*H[1]-S[1],l)return[S,D,G].concat(c);{c=[S,D,G].concat(c);let R=[];for(let O=0;O<c.length;O+=3){let N=ie(c[O][0],c[O][1],h),$=ie(c[O+1][0],c[O+1][1],h),A=ie(c[O+2][0],c[O+2][1],h);R.push([N[0],N[1],$[0],$[1],A[0],A[1]])}return R}}var jn={randOffset:function(t,e){return b(t,e)},randOffsetWithRange:function(t,e,n){return Oe(t,e,n)},ellipse:function(t,e,n,o,r){let s=dn(n,o,r);return rt(t,e,r,s).opset},doubleLineOps:function(t,e,n,o,r){return V(t,e,n,o,r,!0)}};function pn(t,e,n,o,r){return{type:"path",ops:V(t,e,n,o,r)}}function Pe(t,e,n){let o=(t||[]).length;if(o>2){let r=[];for(let s=0;s<o-1;s++)r.push(...V(t[s][0],t[s][1],t[s+1][0],t[s+1][1],n));return e&&r.push(...V(t[o-1][0],t[o-1][1],t[0][0],t[0][1],n)),{type:"path",ops:r}}return o===2?pn(t[0][0],t[0][1],t[1][0],t[1][1],n):{type:"path",ops:[]}}function Vn(t,e,n,o,r){return(function(s,i){return Pe(s,!0,i)})([[t,e],[t+n,e],[t+n,e+o],[t,e+o]],r)}function on(t,e){if(t.length){let n=typeof t[0][0]=="number"?[t]:t,o=we(n[0],1*(1+.2*e.roughness),e),r=e.disableMultiStroke?[]:we(n[0],1.5*(1+.22*e.roughness),an(e));for(let s=1;s<n.length;s++){let i=n[s];if(i.length){let a=we(i,1*(1+.2*e.roughness),e),u=e.disableMultiStroke?[]:we(i,1.5*(1+.22*e.roughness),an(e));for(let l of a)l.op!=="move"&&o.push(l);for(let l of u)l.op!=="move"&&r.push(l)}}return{type:"path",ops:o.concat(r)}}return{type:"path",ops:[]}}function dn(t,e,n){let o=Math.sqrt(2*Math.PI*Math.sqrt((Math.pow(t/2,2)+Math.pow(e/2,2))/2)),r=Math.ceil(Math.max(n.curveStepCount,n.curveStepCount/Math.sqrt(200)*o)),s=2*Math.PI/r,i=Math.abs(t/2),a=Math.abs(e/2),u=1-n.curveFitting;return i+=b(i*u,n),a+=b(a*u,n),{increment:s,rx:i,ry:a}}function rt(t,e,n,o){let[r,s]=ln(o.increment,t,e,o.rx,o.ry,1,o.increment*Oe(.1,Oe(.4,1,n),n),n),i=Te(r,null,n);if(!n.disableMultiStroke&&n.roughness!==0){let[a]=ln(o.increment,t,e,o.rx,o.ry,1.5,0,n),u=Te(a,null,n);i=i.concat(u)}return{estimatedPoints:s,opset:{type:"path",ops:i}}}function rn(t,e,n,o,r,s,i,a,u){let l=t,h=e,p=Math.abs(n/2),c=Math.abs(o/2);p+=b(.01*p,u),c+=b(.01*c,u);let _=r,f=s;for(;_<0;)_+=2*Math.PI,f+=2*Math.PI;f-_>2*Math.PI&&(_=0,f=2*Math.PI);let g=2*Math.PI/u.curveStepCount,m=Math.min(g/2,(f-_)/2),v=un(m,l,h,p,c,_,f,1,u);if(!u.disableMultiStroke){let d=un(m,l,h,p,c,_,f,1.5,u);v.push(...d)}return i&&(a?v.push(...V(l,h,l+p*Math.cos(_),h+c*Math.sin(_),u),...V(l,h,l+p*Math.cos(f),h+c*Math.sin(f),u)):v.push({op:"lineTo",data:[l,h]},{op:"lineTo",data:[l+p*Math.cos(_),h+c*Math.sin(_)]})),{type:"path",ops:v}}function sn(t,e){let n=_n(hn(ut(t))),o=[],r=[0,0],s=[0,0];for(let{key:i,data:a}of n)switch(i){case"M":s=[a[0],a[1]],r=[a[0],a[1]];break;case"L":o.push(...V(s[0],s[1],a[0],a[1],e)),s=[a[0],a[1]];break;case"C":{let[u,l,h,p,c,_]=a;o.push(...Gn(u,l,h,p,c,_,s,e)),s=[c,_];break}case"Z":o.push(...V(s[0],s[1],r[0],r[1],e)),s=[r[0],r[1]]}return{type:"path",ops:o}}function Ye(t,e){let n=[];for(let o of t)if(o.length){let r=e.maxRandomnessOffset||0,s=o.length;if(s>2){n.push({op:"move",data:[o[0][0]+b(r,e),o[0][1]+b(r,e)]});for(let i=1;i<s;i++)n.push({op:"lineTo",data:[o[i][0]+b(r,e),o[i][1]+b(r,e)]})}}return{type:"fillPath",ops:n}}function X(t,e){return(function(n,o){let r=n.fillStyle||"hachure";if(!I[r])switch(r){case"zigzag":I[r]||(I[r]=new Ke(o));break;case"cross-hatch":I[r]||(I[r]=new Xe(o));break;case"dots":I[r]||(I[r]=new et(o));break;case"dashed":I[r]||(I[r]=new tt(o));break;case"zigzag-line":I[r]||(I[r]=new nt(o));break;default:r="hachure",I[r]||(I[r]=new ue(o))}return I[r]})(e,jn).fillPolygons(t,e)}function an(t){let e=Object.assign({},t);return e.randomizer=void 0,t.seed&&(e.seed=t.seed+1),e}function mn(t){return t.randomizer||(t.randomizer=new ot(t.seed||0)),t.randomizer.next()}function Oe(t,e,n,o=1){return n.roughness*o*(mn(n)*(e-t)+t)}function b(t,e,n=1){return Oe(-t,t,e,n)}function V(t,e,n,o,r,s=!1){let i=s?r.disableMultiStrokeFill:r.disableMultiStroke,a=st(t,e,n,o,r,!0,!1);if(i)return a;let u=st(t,e,n,o,r,!0,!0);return a.concat(u)}function st(t,e,n,o,r,s,i){let a=Math.pow(t-n,2)+Math.pow(e-o,2),u=Math.sqrt(a),l=1;l=u<200?1:u>500?.4:-.0016668*u+1.233334;let h=r.maxRandomnessOffset||0;h*h*100>a&&(h=u/10);let p=h/2,c=.2+.2*mn(r),_=r.bowing*r.maxRandomnessOffset*(o-e)/200,f=r.bowing*r.maxRandomnessOffset*(t-n)/200;_=b(_,r,l),f=b(f,r,l);let g=[],m=()=>b(p,r,l),v=()=>b(h,r,l),d=r.preserveVertices;return s&&(i?g.push({op:"move",data:[t+(d?0:m()),e+(d?0:m())]}):g.push({op:"move",data:[t+(d?0:b(h,r,l)),e+(d?0:b(h,r,l))]})),i?g.push({op:"bcurveTo",data:[_+t+(n-t)*c+m(),f+e+(o-e)*c+m(),_+t+2*(n-t)*c+m(),f+e+2*(o-e)*c+m(),n+(d?0:m()),o+(d?0:m())]}):g.push({op:"bcurveTo",data:[_+t+(n-t)*c+v(),f+e+(o-e)*c+v(),_+t+2*(n-t)*c+v(),f+e+2*(o-e)*c+v(),n+(d?0:v()),o+(d?0:v())]}),g}function we(t,e,n){if(!t.length)return[];let o=[];o.push([t[0][0]+b(e,n),t[0][1]+b(e,n)]),o.push([t[0][0]+b(e,n),t[0][1]+b(e,n)]);for(let r=1;r<t.length;r++)o.push([t[r][0]+b(e,n),t[r][1]+b(e,n)]),r===t.length-1&&o.push([t[r][0]+b(e,n),t[r][1]+b(e,n)]);return Te(o,null,n)}function Te(t,e,n){let o=t.length,r=[];if(o>3){let s=[],i=1-n.curveTightness;r.push({op:"move",data:[t[1][0],t[1][1]]});for(let a=1;a+2<o;a++){let u=t[a];s[0]=[u[0],u[1]],s[1]=[u[0]+(i*t[a+1][0]-i*t[a-1][0])/6,u[1]+(i*t[a+1][1]-i*t[a-1][1])/6],s[2]=[t[a+1][0]+(i*t[a][0]-i*t[a+2][0])/6,t[a+1][1]+(i*t[a][1]-i*t[a+2][1])/6],s[3]=[t[a+1][0],t[a+1][1]],r.push({op:"bcurveTo",data:[s[1][0],s[1][1],s[2][0],s[2][1],s[3][0],s[3][1]]})}if(e&&e.length===2){let a=n.maxRandomnessOffset;r.push({op:"lineTo",data:[e[0]+b(a,n),e[1]+b(a,n)]})}}else o===3?(r.push({op:"move",data:[t[1][0],t[1][1]]}),r.push({op:"bcurveTo",data:[t[1][0],t[1][1],t[2][0],t[2][1],t[2][0],t[2][1]]})):o===2&&r.push(...st(t[0][0],t[0][1],t[1][0],t[1][1],n,!0,!0));return r}function ln(t,e,n,o,r,s,i,a){let u=[],l=[];if(a.roughness===0){t/=4,l.push([e+o*Math.cos(-t),n+r*Math.sin(-t)]);for(let h=0;h<=2*Math.PI;h+=t){let p=[e+o*Math.cos(h),n+r*Math.sin(h)];u.push(p),l.push(p)}l.push([e+o*Math.cos(0),n+r*Math.sin(0)]),l.push([e+o*Math.cos(t),n+r*Math.sin(t)])}else{let h=b(.5,a)-Math.PI/2;l.push([b(s,a)+e+.9*o*Math.cos(h-t),b(s,a)+n+.9*r*Math.sin(h-t)]);let p=2*Math.PI+h-.01;for(let c=h;c<p;c+=t){let _=[b(s,a)+e+o*Math.cos(c),b(s,a)+n+r*Math.sin(c)];u.push(_),l.push(_)}l.push([b(s,a)+e+o*Math.cos(h+2*Math.PI+.5*i),b(s,a)+n+r*Math.sin(h+2*Math.PI+.5*i)]),l.push([b(s,a)+e+.98*o*Math.cos(h+i),b(s,a)+n+.98*r*Math.sin(h+i)]),l.push([b(s,a)+e+.9*o*Math.cos(h+.5*i),b(s,a)+n+.9*r*Math.sin(h+.5*i)])}return[l,u]}function un(t,e,n,o,r,s,i,a,u){let l=s+b(.1,u),h=[];h.push([b(a,u)+e+.9*o*Math.cos(l-t),b(a,u)+n+.9*r*Math.sin(l-t)]);for(let p=l;p<=i;p+=t)h.push([b(a,u)+e+o*Math.cos(p),b(a,u)+n+r*Math.sin(p)]);return h.push([e+o*Math.cos(i),n+r*Math.sin(i)]),h.push([e+o*Math.cos(i),n+r*Math.sin(i)]),Te(h,null,u)}function Gn(t,e,n,o,r,s,i,a){let u=[],l=[a.maxRandomnessOffset||1,(a.maxRandomnessOffset||1)+.3],h=[0,0],p=a.disableMultiStroke?1:2,c=a.preserveVertices;for(let _=0;_<p;_++)_===0?u.push({op:"move",data:[i[0],i[1]]}):u.push({op:"move",data:[i[0]+(c?0:b(l[0],a)),i[1]+(c?0:b(l[0],a))]}),h=c?[r,s]:[r+b(l[_],a),s+b(l[_],a)],u.push({op:"bcurveTo",data:[t+b(l[_],a),e+b(l[_],a),n+b(l[_],a),o+b(l[_],a),h[0],h[1]]});return u}function le(t){return[...t]}function cn(t,e=0){let n=t.length;if(n<3)throw new Error("A curve must have at least three points.");let o=[];if(n===3)o.push(le(t[0]),le(t[1]),le(t[2]),le(t[2]));else{let r=[];r.push(t[0],t[0]);for(let a=1;a<t.length;a++)r.push(t[a]),a===t.length-1&&r.push(t[a]);let s=[],i=1-e;o.push(le(r[0]));for(let a=1;a+2<r.length;a++){let u=r[a];s[0]=[u[0],u[1]],s[1]=[u[0]+(i*r[a+1][0]-i*r[a-1][0])/6,u[1]+(i*r[a+1][1]-i*r[a-1][1])/6],s[2]=[r[a+1][0]+(i*r[a][0]-i*r[a+2][0])/6,r[a+1][1]+(i*r[a][1]-i*r[a+2][1])/6],s[3]=[r[a+1][0],r[a+1][1]],o.push(s[1],s[2],s[3])}}return o}function Ce(t,e){return Math.pow(t[0]-e[0],2)+Math.pow(t[1]-e[1],2)}function qn(t,e,n){let o=Ce(e,n);if(o===0)return Ce(t,e);let r=((t[0]-e[0])*(n[0]-e[0])+(t[1]-e[1])*(n[1]-e[1]))/o;return r=Math.max(0,Math.min(1,r)),Ce(t,Z(e,n,r))}function Z(t,e,n){return[t[0]+(e[0]-t[0])*n,t[1]+(e[1]-t[1])*n]}function at(t,e,n,o){let r=o||[];if((function(a,u){let l=a[u+0],h=a[u+1],p=a[u+2],c=a[u+3],_=3*h[0]-2*l[0]-c[0];_*=_;let f=3*h[1]-2*l[1]-c[1];f*=f;let g=3*p[0]-2*c[0]-l[0];g*=g;let m=3*p[1]-2*c[1]-l[1];return m*=m,_<g&&(_=g),f<m&&(f=m),_+f})(t,e)<n){let a=t[e+0];r.length?(s=r[r.length-1],i=a,Math.sqrt(Ce(s,i))>1&&r.push(a)):r.push(a),r.push(t[e+3])}else{let u=t[e+0],l=t[e+1],h=t[e+2],p=t[e+3],c=Z(u,l,.5),_=Z(l,h,.5),f=Z(h,p,.5),g=Z(c,_,.5),m=Z(_,f,.5),v=Z(g,m,.5);at([u,c,g,v],0,n,r),at([v,m,f,p],0,n,r)}var s,i;return r}function Bn(t,e){return Ee(t,0,t.length,e)}function Ee(t,e,n,o,r){let s=r||[],i=t[e],a=t[n-1],u=0,l=1;for(let h=e+1;h<n-1;++h){let p=qn(t[h],i,a);p>u&&(u=p,l=h)}return Math.sqrt(u)>o?(Ee(t,e,l+1,o,s),Ee(t,l,n,o,s)):(s.length||s.push(i),s.push(a)),s}function Je(t,e=.15,n){let o=[],r=(t.length-1)/3;for(let s=0;s<r;s++)at(t,3*s,e,o);return n&&n>0?Ee(o,0,o.length,n):o}var W="none",ee=class{constructor(e){this.defaultOptions={maxRandomnessOffset:2,roughness:1,bowing:1,stroke:"#000",strokeWidth:1,curveTightness:0,curveFitting:.95,curveStepCount:9,fillStyle:"hachure",fillWeight:-1,hachureAngle:-41,hachureGap:-1,dashOffset:-1,dashGap:-1,zigzagOffset:-1,seed:0,disableMultiStroke:!1,disableMultiStrokeFill:!1,preserveVertices:!1,fillShapeRoughnessGain:.8},this.config=e||{},this.config.options&&(this.defaultOptions=this._o(this.config.options))}static newSeed(){return Math.floor(Math.random()*2**31)}_o(e){return e?Object.assign({},this.defaultOptions,e):this.defaultOptions}_d(e,n,o){return{shape:e,sets:n||[],options:o||this.defaultOptions}}line(e,n,o,r,s){let i=this._o(s);return this._d("line",[pn(e,n,o,r,i)],i)}rectangle(e,n,o,r,s){let i=this._o(s),a=[],u=Vn(e,n,o,r,i);if(i.fill){let l=[[e,n],[e+o,n],[e+o,n+r],[e,n+r]];i.fillStyle==="solid"?a.push(Ye([l],i)):a.push(X([l],i))}return i.stroke!==W&&a.push(u),this._d("rectangle",a,i)}ellipse(e,n,o,r,s){let i=this._o(s),a=[],u=dn(o,r,i),l=rt(e,n,i,u);if(i.fill)if(i.fillStyle==="solid"){let h=rt(e,n,i,u).opset;h.type="fillPath",a.push(h)}else a.push(X([l.estimatedPoints],i));return i.stroke!==W&&a.push(l.opset),this._d("ellipse",a,i)}circle(e,n,o,r){let s=this.ellipse(e,n,o,o,r);return s.shape="circle",s}linearPath(e,n){let o=this._o(n);return this._d("linearPath",[Pe(e,!1,o)],o)}arc(e,n,o,r,s,i,a=!1,u){let l=this._o(u),h=[],p=rn(e,n,o,r,s,i,a,!0,l);if(a&&l.fill)if(l.fillStyle==="solid"){let c=Object.assign({},l);c.disableMultiStroke=!0;let _=rn(e,n,o,r,s,i,!0,!1,c);_.type="fillPath",h.push(_)}else h.push((function(c,_,f,g,m,v,d){let y=c,w=_,x=Math.abs(f/2),M=Math.abs(g/2);x+=b(.01*x,d),M+=b(.01*M,d);let L=m,E=v;for(;L<0;)L+=2*Math.PI,E+=2*Math.PI;E-L>2*Math.PI&&(L=0,E=2*Math.PI);let H=(E-L)/d.curveStepCount,S=[];for(let D=L;D<=E;D+=H)S.push([y+x*Math.cos(D),w+M*Math.sin(D)]);return S.push([y+x*Math.cos(E),w+M*Math.sin(E)]),S.push([y,w]),X([S],d)})(e,n,o,r,s,i,l));return l.stroke!==W&&h.push(p),this._d("arc",h,l)}curve(e,n){let o=this._o(n),r=[],s=on(e,o);if(o.fill&&o.fill!==W)if(o.fillStyle==="solid"){let i=on(e,Object.assign(Object.assign({},o),{disableMultiStroke:!0,roughness:o.roughness?o.roughness+o.fillShapeRoughnessGain:0}));r.push({type:"fillPath",ops:this._mergedShape(i.ops)})}else{let i=[],a=e;if(a.length){let u=typeof a[0][0]=="number"?[a]:a;for(let l of u)l.length<3?i.push(...l):l.length===3?i.push(...Je(cn([l[0],l[0],l[1],l[2]]),10,(1+o.roughness)/2)):i.push(...Je(cn(l),10,(1+o.roughness)/2))}i.length&&r.push(X([i],o))}return o.stroke!==W&&r.push(s),this._d("curve",r,o)}polygon(e,n){let o=this._o(n),r=[],s=Pe(e,!0,o);return o.fill&&(o.fillStyle==="solid"?r.push(Ye([e],o)):r.push(X([e],o))),o.stroke!==W&&r.push(s),this._d("polygon",r,o)}path(e,n){let o=this._o(n),r=[];if(!e)return this._d("path",r,o);e=(e||"").replace(/\n/g," ").replace(/(-\s)/g,"-").replace("/(ss)/g"," ");let s=o.fill&&o.fill!=="transparent"&&o.fill!==W,i=o.stroke!==W,a=!!(o.simplification&&o.simplification<1),u=(function(h,p,c){let _=_n(hn(ut(h))),f=[],g=[],m=[0,0],v=[],d=()=>{v.length>=4&&g.push(...Je(v,p)),v=[]},y=()=>{d(),g.length&&(f.push(g),g=[])};for(let{key:x,data:M}of _)switch(x){case"M":y(),m=[M[0],M[1]],g.push(m);break;case"L":d(),g.push([M[0],M[1]]);break;case"C":if(!v.length){let L=g.length?g[g.length-1]:m;v.push([L[0],L[1]])}v.push([M[0],M[1]]),v.push([M[2],M[3]]),v.push([M[4],M[5]]);break;case"Z":d(),g.push([m[0],m[1]])}if(y(),!c)return f;let w=[];for(let x of f){let M=Bn(x,c);M.length&&w.push(M)}return w})(e,1,a?4-4*(o.simplification||1):(1+o.roughness)/2),l=sn(e,o);if(s)if(o.fillStyle==="solid")if(u.length===1){let h=sn(e,Object.assign(Object.assign({},o),{disableMultiStroke:!0,roughness:o.roughness?o.roughness+o.fillShapeRoughnessGain:0}));r.push({type:"fillPath",ops:this._mergedShape(h.ops)})}else r.push(Ye(u,o));else r.push(X(u,o));return i&&(a?u.forEach((h=>{r.push(Pe(h,!1,o))})):r.push(l)),this._d("path",r,o)}opsToPath(e,n){let o="";for(let r of e.ops){let s=typeof n=="number"&&n>=0?r.data.map((i=>+i.toFixed(n))):r.data;switch(r.op){case"move":o+=`M${s[0]} ${s[1]} `;break;case"bcurveTo":o+=`C${s[0]} ${s[1]}, ${s[2]} ${s[3]}, ${s[4]} ${s[5]} `;break;case"lineTo":o+=`L${s[0]} ${s[1]} `}}return o.trim()}toPaths(e){let n=e.sets||[],o=e.options||this.defaultOptions,r=[];for(let s of n){let i=null;switch(s.type){case"path":i={d:this.opsToPath(s),stroke:o.stroke,strokeWidth:o.strokeWidth,fill:W};break;case"fillPath":i={d:this.opsToPath(s),stroke:W,strokeWidth:0,fill:o.fill||W};break;case"fillSketch":i=this.fillSketch(s,o)}i&&r.push(i)}return r}fillSketch(e,n){let o=n.fillWeight;return o<0&&(o=n.strokeWidth/2),{d:this.opsToPath(e),stroke:n.fill||W,strokeWidth:o,fill:W}}_mergedShape(e){return e.filter(((n,o)=>o===0||n.op!=="move"))}},it=class{constructor(e,n){this.canvas=e,this.ctx=this.canvas.getContext("2d"),this.gen=new ee(n)}draw(e){let n=e.sets||[],o=e.options||this.getDefaultOptions(),r=this.ctx,s=e.options.fixedDecimalPlaceDigits;for(let i of n)switch(i.type){case"path":r.save(),r.strokeStyle=o.stroke==="none"?"transparent":o.stroke,r.lineWidth=o.strokeWidth,o.strokeLineDash&&r.setLineDash(o.strokeLineDash),o.strokeLineDashOffset&&(r.lineDashOffset=o.strokeLineDashOffset),this._drawToContext(r,i,s),r.restore();break;case"fillPath":{r.save(),r.fillStyle=o.fill||"";let a=e.shape==="curve"||e.shape==="polygon"||e.shape==="path"?"evenodd":"nonzero";this._drawToContext(r,i,s,a),r.restore();break}case"fillSketch":this.fillSketch(r,i,o)}}fillSketch(e,n,o){let r=o.fillWeight;r<0&&(r=o.strokeWidth/2),e.save(),o.fillLineDash&&e.setLineDash(o.fillLineDash),o.fillLineDashOffset&&(e.lineDashOffset=o.fillLineDashOffset),e.strokeStyle=o.fill||"",e.lineWidth=r,this._drawToContext(e,n,o.fixedDecimalPlaceDigits),e.restore()}_drawToContext(e,n,o,r="nonzero"){e.beginPath();for(let s of n.ops){let i=typeof o=="number"&&o>=0?s.data.map((a=>+a.toFixed(o))):s.data;switch(s.op){case"move":e.moveTo(i[0],i[1]);break;case"bcurveTo":e.bezierCurveTo(i[0],i[1],i[2],i[3],i[4],i[5]);break;case"lineTo":e.lineTo(i[0],i[1])}}n.type==="fillPath"?e.fill(r):e.stroke()}get generator(){return this.gen}getDefaultOptions(){return this.gen.defaultOptions}line(e,n,o,r,s){let i=this.gen.line(e,n,o,r,s);return this.draw(i),i}rectangle(e,n,o,r,s){let i=this.gen.rectangle(e,n,o,r,s);return this.draw(i),i}ellipse(e,n,o,r,s){let i=this.gen.ellipse(e,n,o,r,s);return this.draw(i),i}circle(e,n,o,r){let s=this.gen.circle(e,n,o,r);return this.draw(s),s}linearPath(e,n){let o=this.gen.linearPath(e,n);return this.draw(o),o}polygon(e,n){let o=this.gen.polygon(e,n);return this.draw(o),o}arc(e,n,o,r,s,i,a=!1,u){let l=this.gen.arc(e,n,o,r,s,i,a,u);return this.draw(l),l}curve(e,n){let o=this.gen.curve(e,n);return this.draw(o),o}path(e,n){let o=this.gen.path(e,n);return this.draw(o),o}},Se="http://www.w3.org/2000/svg",lt=class{constructor(e,n){this.svg=e,this.gen=new ee(n)}draw(e){let n=e.sets||[],o=e.options||this.getDefaultOptions(),r=this.svg.ownerDocument||window.document,s=r.createElementNS(Se,"g"),i=e.options.fixedDecimalPlaceDigits;for(let a of n){let u=null;switch(a.type){case"path":u=r.createElementNS(Se,"path"),u.setAttribute("d",this.opsToPath(a,i)),u.setAttribute("stroke",o.stroke),u.setAttribute("stroke-width",o.strokeWidth+""),u.setAttribute("fill","none"),o.strokeLineDash&&u.setAttribute("stroke-dasharray",o.strokeLineDash.join(" ").trim()),o.strokeLineDashOffset&&u.setAttribute("stroke-dashoffset",`${o.strokeLineDashOffset}`);break;case"fillPath":u=r.createElementNS(Se,"path"),u.setAttribute("d",this.opsToPath(a,i)),u.setAttribute("stroke","none"),u.setAttribute("stroke-width","0"),u.setAttribute("fill",o.fill||""),e.shape!=="curve"&&e.shape!=="polygon"||u.setAttribute("fill-rule","evenodd");break;case"fillSketch":u=this.fillSketch(r,a,o)}u&&s.appendChild(u)}return s}fillSketch(e,n,o){let r=o.fillWeight;r<0&&(r=o.strokeWidth/2);let s=e.createElementNS(Se,"path");return s.setAttribute("d",this.opsToPath(n,o.fixedDecimalPlaceDigits)),s.setAttribute("stroke",o.fill||""),s.setAttribute("stroke-width",r+""),s.setAttribute("fill","none"),o.fillLineDash&&s.setAttribute("stroke-dasharray",o.fillLineDash.join(" ").trim()),o.fillLineDashOffset&&s.setAttribute("stroke-dashoffset",`${o.fillLineDashOffset}`),s}get generator(){return this.gen}getDefaultOptions(){return this.gen.defaultOptions}opsToPath(e,n){return this.gen.opsToPath(e,n)}line(e,n,o,r,s){let i=this.gen.line(e,n,o,r,s);return this.draw(i)}rectangle(e,n,o,r,s){let i=this.gen.rectangle(e,n,o,r,s);return this.draw(i)}ellipse(e,n,o,r,s){let i=this.gen.ellipse(e,n,o,r,s);return this.draw(i)}circle(e,n,o,r){let s=this.gen.circle(e,n,o,r);return this.draw(s)}linearPath(e,n){let o=this.gen.linearPath(e,n);return this.draw(o)}polygon(e,n){let o=this.gen.polygon(e,n);return this.draw(o)}arc(e,n,o,r,s,i,a=!1,u){let l=this.gen.arc(e,n,o,r,s,i,a,u);return this.draw(l)}curve(e,n){let o=this.gen.curve(e,n);return this.draw(o)}path(e,n){let o=this.gen.path(e,n);return this.draw(o)}},gn={canvas:(t,e)=>new it(t,e),svg:(t,e)=>new lt(t,e),generator:t=>new ee(t),newSeed:()=>ee.newSeed()};var Zn=0;function C(t,e,n,o,r,s){e||(e={});var i,a,u=e;if("ref"in u)for(a in u={},e)a=="ref"?i=e[a]:u[a]=e[a];var l={type:t,props:u,key:n,ref:i,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--Zn,__i:-1,__u:0,__source:r,__self:s};if(typeof t=="function"&&(i=t.defaultProps))for(a in i)u[a]===void 0&&(u[a]=i[a]);return k.vnode&&k.vnode(l),l}var vn=Jt(function({label:e,size:n="md",roughness:o=1.5,seed:r=42,sketchColor:s="#1f1d1a",accentColor:i="#b44235",bowing:a=1,strokeWidth:u=1.75,animate:l=!0,invalid:h=!1,errorMessage:p,id:c,rows:_=5,disabled:f,className:g="",style:m,onFocus:v,onBlur:d,"aria-describedby":y,"aria-invalid":w,...x},M){let L=Ge(),E=c??L,H=`${E}-error`,S=ke(null),D=ke(null),[G,R]=K(!1),O=h||!!p||w===!0||w==="true",N=O?"#b91c1c":G?i:s;Ve(()=>{let A=S.current,Q=D.current;if(!A||!Q)return;let Y=[],te=()=>{let{width:ne,height:De}=A.getBoundingClientRect();if(ne<8||De<8)return;Y.forEach(oe=>oe.cancel()),Y=[];let _t=gn.svg(Q).rectangle(3,3,ne-6,De-6,{roughness:o,seed:r+(G&&l?997:0),bowing:a,strokeWidth:u+(G?.2:0),stroke:N});Q.replaceChildren(_t),Q.setAttribute("viewBox",`0 0 ${ne} ${De}`),A.style.borderColor="transparent",l&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches&&_t.querySelectorAll("path").forEach(oe=>{let Re=oe.getTotalLength();typeof oe.animate=="function"&&Y.push(oe.animate([{strokeDasharray:`${Re}`,strokeDashoffset:Re},{strokeDasharray:`${Re}`,strokeDashoffset:0}],{duration:280,easing:"ease-out"}))})};te();let ht=new ResizeObserver(te);return ht.observe(A),()=>{ht.disconnect(),Y.forEach(ne=>ne.cancel())}},[o,r,a,u,G,l,N]);let $={sm:{fontSize:14,padding:"9px 12px"},md:{fontSize:16,padding:"13px 16px"},lg:{fontSize:18,padding:"17px 20px"}}[n];return C("div",{className:`sketch-textarea ${g}`,style:{width:"100%",opacity:f?.5:1,color:s},children:[e&&C("label",{htmlFor:E,style:{display:"block",marginBottom:8,fontSize:13,fontWeight:600},children:e}),C("span",{ref:S,style:{position:"relative",display:"block",border:`1px solid ${N}`,borderRadius:2},children:[C("svg",{ref:D,"aria-hidden":"true",focusable:"false",style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"}}),C("textarea",{...x,ref:M,id:E,rows:_,disabled:f,"aria-invalid":O||void 0,"aria-describedby":[y,p?H:void 0].filter(Boolean).join(" ")||void 0,onFocus:A=>{R(!0),v?.(A)},onBlur:A=>{R(!1),d?.(A)},style:{display:"block",position:"relative",zIndex:1,width:"100%",maxWidth:"100%",minHeight:60,boxSizing:"border-box",border:0,outline:"none",background:"transparent",color:s,fontFamily:"inherit",lineHeight:1.65,resize:"vertical",...$,...m}})]}),p&&C("p",{id:H,role:"alert",style:{marginTop:8,fontSize:12,color:"#b91c1c"},children:p}),C("style",{children:".sketch-textarea textarea::placeholder { color: currentColor; opacity: .45; } .sketch-textarea:focus-within { outline: 2px solid transparent; } @media (forced-colors: active) { .sketch-textarea textarea:focus { outline: 2px solid Highlight !important; } }"})]})});function ct(){let[t,e]=K(""),[n,o]=K(1.5);return C("div",{className:"flex min-h-screen items-center justify-center bg-[#f7f6f2] p-7 text-[#1f1d1a] sm:p-10",children:C("div",{className:"w-full max-w-sm",children:[C("p",{className:"mb-2 text-[10px] font-semibold tracking-[.25em] text-[#8e7361]",children:"A LITTLE ROOM FOR YOUR THOUGHTS"}),C("h2",{className:"mb-7 font-serif text-3xl",children:"Make a little note."}),C(vn,{label:"\uC624\uB298 \uB5A0\uC624\uB978 \uC0DD\uAC01",placeholder:"\uC815\uB9AC\uB418\uC9C0 \uC54A\uC740 \uC0DD\uAC01\uB3C4 \uC88B\uC544\uC694. \uD3B8\uD558\uAC8C \uC801\uC5B4 \uBCF4\uC138\uC694.",roughness:n,rows:5,maxLength:500,value:t,onChange:r=>e(r.target.value)}),C("div",{className:"mt-3 flex justify-between text-[11px] text-[#81786e]",children:[C("span",{children:"\uC190\uC73C\uB85C \uADF8\uB9B0 \uB4EF, \uC870\uAE08 \uB354 \uD3B8\uC548\uD558\uAC8C."}),C("span",{children:[t.length," / 500"]})]}),C("label",{className:"mt-7 flex items-center gap-4 text-xs text-[#6c6257]",children:["\uC120\uC758 \uAC70\uCE60\uAE30",C("input",{type:"range",min:"0.5",max:"3",step:"0.1",value:n,onChange:r=>o(Number(r.target.value)),className:"min-w-0 flex-1 accent-[#b44235]"}),C("span",{className:"w-6 font-mono",children:n.toFixed(1)})]})]})})}Ue(B(ct,null),document.getElementById("root"));})();
/*!
 * Adapted from KanchanaSW/doodle-ui Textarea and RoughSvg for standalone use.
 * MIT License · Copyright (c) 2026 KanchanaSW (doodle-ui)
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
</script>18:["$","main",null,{"id":"main-content","tabIndex":-1,"className":"library-module__hPw9rq__page","children":[["$","div",null,{"className":"library-module__hPw9rq__headerSpace","children":"$L21"}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"LearningResource\",\"name\":\"스케치 텍스트 입력\",\"description\":\"손으로 그린 듯한 테두리가 포커스에 반응해 다시 그려지는 여러 줄 입력창\",\"url\":\"https://aicoder.kr/library/sketch-textarea\",\"inLanguage\":\"ko-KR\",\"learningResourceType\":\"코드 예제 및 실습\",\"educationalLevel\":\"기초\"},{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"홈\",\"item\":\"https://aicoder.kr/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"라이브러리\",\"item\":\"https://aicoder.kr/library\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"스케치 텍스트 입력\",\"item\":\"https://aicoder.kr/library/sketch-textarea\"}]}]}"}}],["$","div",null,{"className":"library-module__hPw9rq__container","children":["$","$L22",null,{"item":{"slug":"sketch-textarea","tags":["React","Textarea","roughjs","손그림","폼","접근성"],"files":[{"name":"sketch-textarea.tsx","content":"$23","language":"tsx"},{"name":"demo.tsx","content":"$24","language":"tsx"}],"level":"기초","title":"스케치 텍스트 입력","author":"KanchanaSW · AI Coder 독립형 통합","license":"MIT · Copyright (c) 2026 KanchanaSW (doodle-ui)","category":"form","exercise":"roughness를 0.5와 2.5로 바꾸어 선의 차이를 비교하세요. animate={false}와 errorMessage를 적용하고 키보드로 입력·크기 변경을 확인하세요. npm install roughjs 후 소스를 복사하고 MIT 저작권 표시를 유지하세요.","sourceUrl":"https://21st.dev/@kanchanasw/components/textarea","objectives":["rough.js로 실제 HTML 입력창 뒤에 SVG 테두리 그리기","포커스 상태와 seed로 손그림 테두리 변형하기","ResizeObserver로 입력창 크기 변경을 추적하고 자원 정리하기","레이블·오류 안내·동작 줄이기 설정을 함께 지원하기"],"description":"손으로 그린 듯한 테두리가 포커스에 반응해 다시 그려지는 여러 줄 입력창","previewHtml":"$25","dependencies":"React · Tailwind CSS · roughjs"},"highlighted":[{"name":"sketch-textarea.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"/*!","color":"#8B949E"}],[{"content":" * Adapted from KanchanaSW/doodle-ui Textarea and RoughSvg for standalone use.","color":"#8B949E"}],[{"content":" * MIT License · Copyright (c) 2026 KanchanaSW (doodle-ui)","color":"#8B949E"}],[{"content":" * Permission is hereby granted, free of charge, to any person obtaining a copy","color":"#8B949E"}],[{"content":" * of this software and associated documentation files (the \"Software\"), to deal","color":"#8B949E"}],[{"content":" * in the Software without restriction, including without limitation the rights","color":"#8B949E"}],[{"content":" * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell","color":"#8B949E"}],[{"content":" * copies of the Software, and to permit persons to whom the Software is","color":"#8B949E"}],[{"content":" * furnished to do so, subject to the following conditions:","color":"#8B949E"}],[{"content":" * The above copyright notice and this permission notice shall be included in all","color":"#8B949E"}],[{"content":" * copies or substantial portions of the Software.","color":"#8B949E"}],[{"content":" * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR","color":"#8B949E"}],[{"content":" * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,","color":"#8B949E"}],[{"content":" * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE","color":"#8B949E"}],[{"content":" * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER","color":"#8B949E"}],[{"content":" * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,","color":"#8B949E"}],[{"content":" * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE","color":"#8B949E"}],[{"content":" * SOFTWARE.","color":"#8B949E"}],[{"content":" */","color":"#8B949E"}],[{"content":"import","color":"#FF7B72"},{"content":" { forwardRef, useEffect, useId, useRef, useState, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ReactNode, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" TextareaHTMLAttributes } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" rough ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"roughjs\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SketchTextareaProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"extends","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Omit","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"TextareaHTMLAttributes","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLTextAreaElement","color":"#FFA657"},{"content":">, ","color":"#E6EDF3"},{"content":"\"color\"","color":"#A5D6FF"},{"content":"> {","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"label","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ReactNode","color":"#FFA657"},{"content":"; ","color":"#E6EDF3"},{"content":"size","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"sm\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"md\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"lg\"","color":"#A5D6FF"},{"content":"; ","color":"#E6EDF3"},{"content":"roughness","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"seed","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"sketchColor","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"accentColor","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"bowing","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"animate","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"invalid","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"boolean","color":"#79C0FF"},{"content":"; ","color":"#E6EDF3"},{"content":"errorMessage","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SketchTextarea","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"forwardRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLTextAreaElement","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"SketchTextareaProps","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"SketchTextarea","color":"#D2A8FF"},{"content":"({","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"label","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"size","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"md\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"roughness","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1.5","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"seed","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"42","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"sketchColor","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"#1f1d1a\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"accentColor","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"#b44235\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"bowing","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1.75","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"animate","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"invalid","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"errorMessage","color":"#FFA657"},{"content":",","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"id","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"rows","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"5","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"disabled","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"className","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"style","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"onFocus","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"onBlur","color":"#FFA657"},{"content":",","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"\"aria-describedby\"","color":"#A5D6FF"},{"content":": ","color":"#E6EDF3"},{"content":"describedBy","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"\"aria-invalid\"","color":"#A5D6FF"},{"content":": ","color":"#E6EDF3"},{"content":"ariaInvalid","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"props","color":"#FFA657"}],[{"content":"}, ","color":"#E6EDF3"},{"content":"ref","color":"#FFA657"},{"content":") {","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"generatedId","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useId","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"fieldId","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" id ","color":"#E6EDF3"},{"content":"??","color":"#FF7B72"},{"content":" generatedId;","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"errorId","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"fieldId","color":"#E6EDF3"},{"content":"}-error`","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"frame","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLSpanElement","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"svgRef","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"SVGSVGElement","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"focused","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setFocused","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"hasError","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" invalid ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!!","color":"#FF7B72"},{"content":"errorMessage ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" ariaInvalid ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" ariaInvalid ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"true\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"color","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" hasError ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"#b91c1c\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" focused ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" accentColor ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" sketchColor;","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"container","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" frame.current, ","color":"#E6EDF3"},{"content":"svg","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" svgRef.current;","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"container ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"svg) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"let","color":"#FF7B72"},{"content":" animations","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Animation","color":"#FFA657"},{"content":"[] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [];","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"paint","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"      ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"width","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"height","color":"#79C0FF"},{"content":" } ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" container.","color":"#E6EDF3"},{"content":"getBoundingClientRect","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"      ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (width ","color":"#E6EDF3"},{"content":"<","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"8","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" height ","color":"#E6EDF3"},{"content":"<","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"8","color":"#79C0FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":"      animations.","color":"#E6EDF3"},{"content":"forEach","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"animation","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" animation.","color":"#E6EDF3"},{"content":"cancel","color":"#D2A8FF"},{"content":"()); animations ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [];","color":"#E6EDF3"}],[{"content":"      ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"renderer","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" rough.","color":"#E6EDF3"},{"content":"svg","color":"#D2A8FF"},{"content":"(svg);","color":"#E6EDF3"}],[{"content":"      ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"rectangle","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" renderer.","color":"#E6EDF3"},{"content":"rectangle","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"3","color":"#79C0FF"},{"content":", width ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"6","color":"#79C0FF"},{"content":", height ","color":"#E6EDF3"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"6","color":"#79C0FF"},{"content":", { roughness, seed: seed ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" (focused ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" animate ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"997","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"), bowing, strokeWidth: strokeWidth ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" (focused ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":".2","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":"), stroke: color });","color":"#E6EDF3"}],[{"content":"      svg.","color":"#E6EDF3"},{"content":"replaceChildren","color":"#D2A8FF"},{"content":"(rectangle);","color":"#E6EDF3"}],[{"content":"      svg.","color":"#E6EDF3"},{"content":"setAttribute","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"viewBox\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"`0 0 ${","color":"#A5D6FF"},{"content":"width","color":"#E6EDF3"},{"content":"} ${","color":"#A5D6FF"},{"content":"height","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":"      container.style.borderColor ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"transparent\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"      ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (animate ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"window.","color":"#E6EDF3"},{"content":"matchMedia","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"(prefers-reduced-motion: reduce)\"","color":"#A5D6FF"},{"content":").matches) {","color":"#E6EDF3"}],[{"content":"        rectangle.","color":"#E6EDF3"},{"content":"querySelectorAll","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"path\"","color":"#A5D6FF"},{"content":").","color":"#E6EDF3"},{"content":"forEach","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"path","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" path.","color":"#E6EDF3"},{"content":"getTotalLength","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"          ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"typeof","color":"#FF7B72"},{"content":" path.animate ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"function\"","color":"#A5D6FF"},{"content":") animations.","color":"#E6EDF3"},{"content":"push","color":"#D2A8FF"},{"content":"(path.","color":"#E6EDF3"},{"content":"animate","color":"#D2A8FF"},{"content":"([{ strokeDasharray: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"length","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":", strokeDashoffset: length }, { strokeDasharray: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"length","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":", strokeDashoffset: ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":" }], { duration: ","color":"#E6EDF3"},{"content":"280","color":"#79C0FF"},{"content":", easing: ","color":"#E6EDF3"},{"content":"\"ease-out\"","color":"#A5D6FF"},{"content":" }));","color":"#E6EDF3"}],[{"content":"        });","color":"#E6EDF3"}],[{"content":"      }","color":"#E6EDF3"}],[{"content":"    };","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"paint","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"observer","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"new","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ResizeObserver","color":"#D2A8FF"},{"content":"(paint); observer.","color":"#E6EDF3"},{"content":"observe","color":"#D2A8FF"},{"content":"(container);","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" { observer.","color":"#E6EDF3"},{"content":"disconnect","color":"#D2A8FF"},{"content":"(); animations.","color":"#E6EDF3"},{"content":"forEach","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"animation","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" animation.","color":"#E6EDF3"},{"content":"cancel","color":"#D2A8FF"},{"content":"()); };","color":"#E6EDF3"}],[{"content":"  }, [roughness, seed, bowing, strokeWidth, focused, animate, color]);","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"dimensions","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" { sm: { fontSize: ","color":"#E6EDF3"},{"content":"14","color":"#79C0FF"},{"content":", padding: ","color":"#E6EDF3"},{"content":"\"9px 12px\"","color":"#A5D6FF"},{"content":" }, md: { fontSize: ","color":"#E6EDF3"},{"content":"16","color":"#79C0FF"},{"content":", padding: ","color":"#E6EDF3"},{"content":"\"13px 16px\"","color":"#A5D6FF"},{"content":" }, lg: { fontSize: ","color":"#E6EDF3"},{"content":"18","color":"#79C0FF"},{"content":", padding: ","color":"#E6EDF3"},{"content":"\"17px 20px\"","color":"#A5D6FF"},{"content":" } }[size];","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`sketch-textarea ${","color":"#A5D6FF"},{"content":"className","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ width: ","color":"#E6EDF3"},{"content":"\"100%\"","color":"#A5D6FF"},{"content":", opacity: disabled ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":".5","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", color: sketchColor }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"label ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"label","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"htmlFor","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"fieldId","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ display: ","color":"#E6EDF3"},{"content":"\"block\"","color":"#A5D6FF"},{"content":", marginBottom: ","color":"#E6EDF3"},{"content":"8","color":"#79C0FF"},{"content":", fontSize: ","color":"#E6EDF3"},{"content":"13","color":"#79C0FF"},{"content":", fontWeight: ","color":"#E6EDF3"},{"content":"600","color":"#79C0FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"label","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"</","color":"#E6EDF3"},{"content":"label","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"    <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"frame","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ position: ","color":"#E6EDF3"},{"content":"\"relative\"","color":"#A5D6FF"},{"content":", display: ","color":"#E6EDF3"},{"content":"\"block\"","color":"#A5D6FF"},{"content":", border: ","color":"#E6EDF3"},{"content":"`1px solid ${","color":"#A5D6FF"},{"content":"color","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":", borderRadius: ","color":"#E6EDF3"},{"content":"2","color":"#79C0FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":"      <","color":"#E6EDF3"},{"content":"svg","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"svgRef","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"true\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"focusable","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"false\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ position: ","color":"#E6EDF3"},{"content":"\"absolute\"","color":"#A5D6FF"},{"content":", inset: ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", width: ","color":"#E6EDF3"},{"content":"\"100%\"","color":"#A5D6FF"},{"content":", height: ","color":"#E6EDF3"},{"content":"\"100%\"","color":"#A5D6FF"},{"content":", overflow: ","color":"#E6EDF3"},{"content":"\"visible\"","color":"#A5D6FF"},{"content":", pointerEvents: ","color":"#E6EDF3"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":"      <","color":"#E6EDF3"},{"content":"textarea","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"{...","color":"#FF7B72"},{"content":"props","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"ref","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"fieldId","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"rows","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"rows","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"disabled","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"disabled","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-invalid","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"hasError ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"aria-describedby","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"[describedBy, errorMessage ","color":"#E6EDF3"},{"content":"?","color":"#FF7B72"},{"content":" errorId ","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":"].","color":"#E6EDF3"},{"content":"filter","color":"#D2A8FF"},{"content":"(Boolean).","color":"#E6EDF3"},{"content":"join","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\" \"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"||","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"undefined","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"onFocus","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"setFocused","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"true","color":"#79C0FF"},{"content":"); ","color":"#E6EDF3"},{"content":"onFocus","color":"#D2A8FF"},{"content":"?.(event); }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"onBlur","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"setFocused","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"false","color":"#79C0FF"},{"content":"); ","color":"#E6EDF3"},{"content":"onBlur","color":"#D2A8FF"},{"content":"?.(event); }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ display: ","color":"#E6EDF3"},{"content":"\"block\"","color":"#A5D6FF"},{"content":", position: ","color":"#E6EDF3"},{"content":"\"relative\"","color":"#A5D6FF"},{"content":", zIndex: ","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":", width: ","color":"#E6EDF3"},{"content":"\"100%\"","color":"#A5D6FF"},{"content":", maxWidth: ","color":"#E6EDF3"},{"content":"\"100%\"","color":"#A5D6FF"},{"content":", minHeight: ","color":"#E6EDF3"},{"content":"60","color":"#79C0FF"},{"content":", boxSizing: ","color":"#E6EDF3"},{"content":"\"border-box\"","color":"#A5D6FF"},{"content":", border: ","color":"#E6EDF3"},{"content":"0","color":"#79C0FF"},{"content":", outline: ","color":"#E6EDF3"},{"content":"\"none\"","color":"#A5D6FF"},{"content":", background: ","color":"#E6EDF3"},{"content":"\"transparent\"","color":"#A5D6FF"},{"content":", color: sketchColor, fontFamily: ","color":"#E6EDF3"},{"content":"\"inherit\"","color":"#A5D6FF"},{"content":", lineHeight: ","color":"#E6EDF3"},{"content":"1.65","color":"#79C0FF"},{"content":", resize: ","color":"#E6EDF3"},{"content":"\"vertical\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"dimensions, ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"style }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":"    </","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"    ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"errorMessage ","color":"#E6EDF3"},{"content":"&&","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"errorId","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"role","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"alert\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ marginTop: ","color":"#E6EDF3"},{"content":"8","color":"#79C0FF"},{"content":", fontSize: ","color":"#E6EDF3"},{"content":"12","color":"#79C0FF"},{"content":", color: ","color":"#E6EDF3"},{"content":"\"#b91c1c\"","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"errorMessage","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"</","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":"    <","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"`.sketch-textarea textarea::placeholder { color: currentColor; opacity: .45; } .sketch-textarea:focus-within { outline: 2px solid transparent; } @media (forced-colors: active) { .sketch-textarea textarea:focus { outline: 2px solid Highlight !important; } }`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":"</","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":"  </","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">;","color":"#E6EDF3"}],[{"content":"});","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" { SketchTextarea ","color":"#E6EDF3"},{"content":"as","color":"#FF7B72"},{"content":" Textarea };","color":"#E6EDF3"}],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"SketchTextarea;","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { useState } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { SketchTextarea } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/sketch-textarea\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"SketchTextareaDemo","color":"#D2A8FF"},{"content":"() ","color":"#FFA657"},{"content":"{","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"note","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setNote","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"roughness","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"setRoughness","color":"#79C0FF"},{"content":"] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useState","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"1.5","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[{"content":"  ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex min-h-screen items-center justify-center bg-[#f7f6f2] p-7 text-[#1f1d1a] sm:p-10\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"w-full max-w-sm\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mb-2 text-[10px] font-semibold tracking-[.25em] text-[#8e7361]\"","color":"#A5D6FF"},{"content":">A LITTLE ROOM FOR YOUR THOUGHTS</","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":"><","color":"#E6EDF3"},{"content":"h2","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mb-7 font-serif text-3xl\"","color":"#A5D6FF"},{"content":">Make a little note.</","color":"#E6EDF3"},{"content":"h2","color":"#7EE787"},{"content":"><","color":"#E6EDF3"},{"content":"SketchTextarea","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"label","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"오늘 떠오른 생각\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"placeholder","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"정리되지 않은 생각도 좋아요. 편하게 적어 보세요.\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"roughness","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"roughness","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"rows","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"5","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"maxLength","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"500","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"value","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"note","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"onChange","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setNote","color":"#D2A8FF"},{"content":"(event.target.value)","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" /><","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-3 flex justify-between text-[11px] text-[#81786e]\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">손으로 그린 듯, 조금 더 편안하게.</","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":"><","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"note.","color":"#E6EDF3"},{"content":"length","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" / 500</","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":"></","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":"><","color":"#E6EDF3"},{"content":"label","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-7 flex items-center gap-4 text-xs text-[#6c6257]\"","color":"#A5D6FF"},{"content":">선의 거칠기<","color":"#E6EDF3"},{"content":"input","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"range\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"min","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0.5\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"max","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"3\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"step","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0.1\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"value","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"roughness","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"onChange","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"event","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"setRoughness","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"Number","color":"#D2A8FF"},{"content":"(event.target.value))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"min-w-0 flex-1 accent-[#b44235]\"","color":"#A5D6FF"},{"content":" /><","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"w-6 font-mono\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"roughness.","color":"#E6EDF3"},{"content":"toFixed","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"1","color":"#79C0FF"},{"content":")","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"</","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":"></","color":"#E6EDF3"},{"content":"label","color":"#7EE787"},{"content":"></","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":"></","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">;","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}]]}]}]}]]}]
</article></body></html>

예제에 포함된 파일